/* =============================================================
   responsive.css — ajustes por ancho de pantalla
   Base mobile-first en style.css; acá se adapta hacia abajo.
   Anchos probados: 320 · 375 · 390 · 414 · 768 · 1024 · 1440 · 1920
   ============================================================= */

/* ---------- ≤ 1024px: dos columnas ---------- */
@media (max-width:1024px) {
  .offers,
  .feature-grid,
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-about { grid-column:1 / -1; }
  .hero__inner { grid-template-columns:1fr; }
  .stamp { max-width:520px; }
}

/* ---------- ≤ 900px: navegación colapsada ---------- */
@media (max-width:900px) {
  .nav-toggle { display:flex; }

  .nav {
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink-800); border-bottom:1px solid var(--line-strong);
    box-shadow:0 20px 40px -24px rgba(0,0,0,.9);
    display:none;
  }
  .nav.is-open { display:block; }

  .nav__list {
    flex-direction:column; align-items:stretch; gap:0;
    padding:.6rem 20px 1.1rem;
    max-width:var(--wrap); margin:0 auto;
  }
  .nav__link {
    padding:.9rem .2rem; font-size:1rem; border-radius:0;
    border-bottom:1px solid var(--line);
  }
  .nav__link.is-current { box-shadow:none; color:var(--gold); }
  .nav__cta-wrap { margin:.9rem 0 0; }
  .nav__cta-wrap .btn { width:100%; }

  .site-header__inner { position:relative; }
}

/* ---------- ≤ 768px: una columna ---------- */
@media (max-width:768px) {
  .offers,
  .feature-grid,
  .grid-2,
  .grid-3 { grid-template-columns:1fr; }

  .offers { gap:2rem; }

  .operator { grid-template-columns:auto 1fr; }
  .operator__side { grid-column:1 / -1; min-width:0; }

  .cookie-banner__actions { margin-left:0; width:100%; }
  .cookie-banner__actions .btn { flex:1 1 auto; }

  .footer-grid { grid-template-columns:1fr; }
  .footer-nav__list { columns:2; }
  .footer-bottom { flex-direction:column; gap:.4rem; }
}

/* ---------- ≤ 640px: teléfonos grandes ---------- */
@media (max-width:640px) {
  .wrap { padding:0 16px; }

  .hero { padding-top:2.2rem; }
  .hero__actions { gap:.65rem; }
  .hero__actions .btn { width:100%; }

  .section__head { margin-bottom:1.6rem; }

  .offer-card { padding:1.35rem 1.2rem 1.2rem; }
  .offer-card__head { gap:.45rem .7rem; }

  .compare { min-width:620px; font-size:.86rem; }
  .compare th, .compare td { padding:.8rem .85rem; }
  .compare tbody th { width:34%; }

  .faq__trigger { font-size:.95rem; padding:1rem .1rem; }

  .cookie-banner { left:8px; right:8px; bottom:8px; transform:none; width:auto; padding:1rem; }
  .cookie-banner__actions { flex-direction:column; align-items:stretch; }
  .cookie-banner__actions .btn { width:100%; }
  .cookie-banner__more { text-align:center; }

  .form { max-width:none; }
  .form .btn { width:100%; }
}

/* ---------- ≤ 380px: pantallas chicas (320–375) ---------- */
@media (max-width:380px) {
  h1 { font-size:1.8rem; }
  .brand__sub { display:none; }
  .footer-nav__list { columns:1; }
  .operator { grid-template-columns:1fr; }
  .operator__logo { width:52px; height:52px; font-size:1.5rem; }
  .stamp { padding:1.2rem; }
  .stamp__list li { flex-direction:column; align-items:flex-start; gap:.15rem; }
  .stamp__val { text-align:left; }
}

/* ---------- ≥ 1440px: pantallas anchas ---------- */
@media (min-width:1440px) {
  :root { --wrap:1280px; }
  body { font-size:1.02rem; }
}

/* ---------- Impresión ---------- */
@media print {
  .site-header, .agebar, .cookie-banner, .hero__actions, .btn { display:none !important; }
  body { background:#fff; color:#000; }
  .section--paper, .offer-card { box-shadow:none; border:1px solid #ccc; }
}