/* ============================================================
   ofertia.pro — adaptaciones responsive
   Cargar siempre después de style.css
   ============================================================ */

/* ---------- Escritorio angosto ---------- */

@media (max-width: 1080px){
    .site-nav{ gap:18px; }
    .site-nav a.nav-link{ font-size:.9rem; }
    .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:28px; }
}

/* ---------- Tablet ---------- */

@media (max-width: 900px){
    body{ font-size:16.5px; }

    .grid-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .grid-lead{ grid-template-columns:1fr; }

    .bonus-grid{ grid-template-columns:1fr; gap:22px; }

    .cta-band{ padding:30px 26px; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .foot-brand{ grid-column:1 / -1; }
}

/* ---------- Navegación móvil ---------- */

@media (max-width: 860px){
    .head-in{ min-height:62px; flex-wrap:wrap; }

    .nav-toggle{ display:inline-flex; }

    .site-nav{
        display:none;
        order:3;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:8px 0 16px;
        border-top:1px solid var(--line);
        margin-top:4px;
    }
    .site-nav.is-open{ display:flex; }

    .site-nav a.nav-link{
        padding:13px 4px;
        font-size:1rem;
        border-bottom:1px solid var(--line);
    }
    .site-nav a.nav-link.is-active::after{ display:none; }
    .site-nav a.nav-link.is-active{ color:var(--naranja); }

    .lang-switch{
        align-self:flex-start;
        margin-top:16px;
        font-size:.8rem;
    }
    .lang-switch a{ padding:6px 14px; }
}

/* ---------- Teléfono ---------- */

@media (max-width: 680px){
    .wrap{ padding-inline:18px; }

    body{
        background-size:26px 26px;
    }

    .ribbon-in{
        justify-content:flex-start;
        padding-block:7px;
        font-size:.64rem;
        gap:8px;
    }
    .ribbon-hide-sm{ display:none; }

    .grid-3,
    .grid-4,
    .grid-2,
    .grid-lead{ grid-template-columns:1fr; }
    .grid{ gap:16px; }

    .hero-boleta{
        --pad:22px;
        /* deja sitio al sello para que no pise el antetítulo */
        padding:74px var(--pad) 30px;
        border-radius:12px;
    }
    .hero-stamp{
        width:70px;
        height:70px;
        right:14px;
        top:12px;
    }

    .bonus-card{ --pad:20px; padding:22px var(--pad) 24px; }
    .bonus-top{ flex-direction:column; gap:10px; }
    .badge{ align-self:flex-start; }

    .card{ padding:20px 20px; }

    .dl div{ grid-template-columns:1fr; gap:4px; padding:13px 0; }

    .form-inline{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; gap:0; }
    .field-row .field{ margin-bottom:18px; }

    .btn{ width:100%; }
    .btn-auto{ width:auto; }
    .error-actions .btn{ width:100%; }
    .cookie-actions{ width:100%; }
    .cookie-actions .btn{ flex:1 1 auto; }

    .helpline{ padding:18px 20px; }
    .helpline-num{ font-size:1.18rem; }

    .faq-item summary{ padding:15px 44px 15px 18px; font-size:.98rem; }
    .faq-answer{ padding-inline:18px; }

    .table-wrap{ border-radius:12px; }
    table.cmp{ font-size:.9rem; min-width:520px; }
    table.cmp th,
    table.cmp td{ padding:13px 15px; }

    .foot-grid{ grid-template-columns:1fr; gap:26px; }
    .foot-bottom{ flex-direction:column; gap:8px; }

    .cookie-bar{
        left:10px; right:10px; bottom:10px;
        padding:16px 18px;
    }
    .to-top{ right:12px; bottom:76px; }
}

/* ---------- Teléfono chico ---------- */

@media (max-width: 520px){
    .ribbon-hide-xs{ display:none; }
}

@media (max-width: 400px){
    .brand-name{ font-size:1.1rem; }
    .brand-mark{ width:30px; height:30px; }
    .nav-toggle{ padding:8px 11px; }
    .bonus-offer{ font-size:1.5rem; }
}

/* ---------- Impresión ---------- */

@media print{
    .site-head,
    .ribbon,
    .cookie-bar,
    .to-top,
    .subscribe,
    .btn{ display:none !important; }

    body{
        background:#fff;
        color:#000;
        font-size:12pt;
    }
    .card,
    .bonus-card,
    .table-wrap,
    .form-panel{ box-shadow:none; border-color:#bbb; }
    a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}