/* =================================================================
   responsive.css — ajustes por ancho de pantalla.
   Base del proyecto: mobile first. Acá se activan los layouts
   de tablet y escritorio, y se resuelve el menú hamburguesa.
   ================================================================= */

/* ---------- Móvil: 320px – 767px ---------- */
@media (max-width:767px){

  .agebar{font-size:.72rem;line-height:1.45;padding-block:.45rem;}

  .navtoggle{display:flex;}

  .nav{
    position:absolute;top:100%;left:0;right:0;
    margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-850);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.4rem;
    max-height:70dvh;
    overflow-y:auto;
    transform:translateY(-8px);
    opacity:0;visibility:hidden;
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:translateY(0);}

  .nav__list{flex-direction:column;gap:0;}
  .nav__link{
    display:block;padding:.95rem 0;font-size:1rem;
    border-bottom:1px solid var(--line);border-left:0;
  }
  .nav__link.is-current{border-bottom-color:var(--line);color:var(--sun);}
  .nav__cta{margin-top:1.1rem;width:100%;}

  .grid--3,.grid--2{grid-template-columns:1fr;}

  .hero__actions .btn{width:100%;}

  .cookiebar{
    left:0;right:0;bottom:0;transform:none;
    width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-left:0;border-right:0;border-bottom:0;
    padding:1rem var(--pad) 1.2rem;
  }
  .cookiebar__inner{flex-direction:column;gap:.9rem;}
  .cookiebar__actions{margin-left:0;width:100%;}
  .cookiebar__actions .btn{flex:1;}

  .sitefooter__grid{grid-template-columns:1fr;gap:1.8rem;}

  .offer__top{gap:.6rem;}
  .offer__top .chip{order:3;}

  .ctable{min-width:640px;font-size:.85rem;}
  .ctable th,.ctable td{padding:.7rem .8rem;}
}

/* ---------- Móviles muy angostos: hasta 359px ---------- */
@media (max-width:359px){
  :root{--pad:1rem;}
  .logo__text{font-size:.88rem;}
  .logo__text em{font-size:.6rem;}
  .h1{font-size:1.85rem;}
  .offer__bonusvalue{font-size:1.08rem;}
  .btn{padding:.8rem 1.1rem;font-size:.9rem;}
}

/* ---------- Tablet: 768px+ ---------- */
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .featlist{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero__inner{grid-template-columns:minmax(0,1fr);}
}

/* ---------- Escritorio chico: 1024px+ ---------- */
@media (min-width:1024px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hero__inner{grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);}
  .ctable{min-width:0;}
  .tablewrap__hint{display:none;}
}

/* ---------- Escritorio grande: 1440px+ ---------- */
@media (min-width:1440px){
  :root{--maxw:1240px;}
  body{font-size:1.03rem;}
}

/* ---------- Pantallas muy anchas: 1920px+ ---------- */
@media (min-width:1920px){
  :root{--maxw:1320px;}
}

/* ---------- Impresión ---------- */
@media print{
  .siteheader,.cookiebar,.agebar,.hero::after,.navtoggle{display:none !important;}
  body{background:#fff;color:#000;}
  .card{box-shadow:none;border:1px solid #ccc;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;}
}