/* ============================================================
   shell.css · la cabecera, el menú y el pie de TODAS las páginas
   ------------------------------------------------------------
   Lo comparten las once: la home (que encima carga home.css) y las diez
   internas (que encima cargan estilos.css y su CSS propio). Por eso:

   - Todo va bajo nombres propios del shell (.site-header, .hdr-logo,
     .mega, .drawer, .site-footer…), grepeados contra estilos.css y los
     CSS de cada página antes de usarlos (GOTCHAS §4). Ojo: estilos.css
     tiene `.logo` y `a{ color:var(--cyan) }`; por eso acá el logo se
     llama .hdr-logo y cada link del shell declara su color.
   - Nada de resets globales: un `ul{ list-style:none }` acá les rompería
     las listas a las internas. Los resets de la home viven en home.css.
   - Los valores salen de tokens.css. Lo que se suma son tintes nombrados
     (--gold, --navy y --cyan con alfa) y alturas del shell.

   En la home la cabecera va fija y transparente sobre el hero; en las
   internas (body.interna) va pegada arriba y sólida desde el principio.
   ============================================================ */

:root{
  --vidrio: rgba(5,8,15,.86);
  --vidrio-fuerte: rgba(5,8,15,.96);
  --oro-tinte: rgba(230,207,139,.08);
  --oro-borde: rgba(230,207,139,.32);
  --oro-brillo: rgba(230,207,139,.22);
  --cian-tinte: rgba(95,200,232,.10);
  --cian-borde: rgba(95,200,232,.32);
  --sombra: 0 24px 60px rgba(0,0,0,.45);
  --tinta-oro: #1a1407;          /* texto sobre el oro: 11,9:1 sobre --gold, 8,1:1 sobre --gold-2 */
  --tinta-wa: #04231a;           /* el mismo del .cta de tokens.css */

  --fs-sec: clamp(30px, 4.2vw, 52px);
  --fs-big: clamp(36px, 5vw, 64px);

  --wrap: 1280px;
  --gut: clamp(16px, 4vw, 40px);
  --hdr-h: 72px;
  --ann-h: 36px;
  --curva: cubic-bezier(.2,.7,.2,1);
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); box-sizing:border-box }
.icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none }
.icon.sm{ width:18px; height:18px }
.icon.lg{ width:28px; height:28px }
.cta .icon, .wa-float .icon{ fill:currentColor; stroke:none }
.cta-sm{ min-height:44px; padding:0 var(--sp-4); font-size:var(--fs-md); white-space:nowrap }

.saltar{ position:absolute; left:var(--sp-4); top:-100px; z-index:300; background:var(--gold); color:var(--tinta-oro);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); font-weight:700; text-decoration:none }
.saltar:focus{ top:var(--sp-4) }

/* ---------- el link de texto con la flechita dorada ---------- */
.ir{ display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; font-weight:700; color:var(--ink);
  text-decoration:none; transition:color var(--ease) }
.ir .icon{ color:var(--gold); transition:transform var(--ease) }
.ir:hover{ color:var(--gold) }
.ir:hover .icon{ transform:translateX(4px) }

.kicker{ display:inline-flex; align-items:center; gap:var(--sp-3); font-family:var(--baj); font-weight:700;
  font-size:var(--fs-md); letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.kicker::before{ content:''; width:34px; height:2px; background:var(--gold) }

.chip{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 var(--sp-3); border-radius:var(--r-pill);
  font-family:var(--baj); font-size:var(--fs-sm); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--oro-tinte); color:var(--gold); border:1px solid var(--oro-borde) }
.chip.cian{ background:var(--cian-tinte); color:var(--cyan); border-color:var(--cian-borde) }
.chip.vivo::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--ok) }

/* ============================================================
   Barra de anuncios
   ============================================================ */
.announce{ height:var(--ann-h); background:var(--gold); color:var(--tinta-oro); display:flex; align-items:center;
  justify-content:center; overflow:hidden; position:relative; z-index:60 }
.announce-track{ position:relative; height:100%; width:100%; max-width:1100px }
.announce-item{ position:absolute; inset:0; margin:0; max-width:none; display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--baj); font-weight:700; font-size:var(--fs-md); letter-spacing:.08em; text-transform:uppercase;
  text-align:center; padding:0 var(--sp-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(100%);
  transition:opacity .5s, transform .5s var(--curva) }
.announce-item.on{ opacity:1; transform:none }
.announce-item.off{ opacity:0; transform:translateY(-100%) }
/* sin JS o con movimiento reducido, se ve el primero y listo */
.announce-item:first-child{ opacity:1; transform:none }
.announce.js .announce-item:first-child:not(.on){ opacity:0; transform:translateY(100%) }
.announce.js .announce-item:first-child.off{ transform:translateY(-100%) }

/* ============================================================
   Cabecera
   ============================================================ */
.site-header{ position:fixed; left:0; right:0; top:var(--ann-h); z-index:50; height:var(--hdr-h);
  transition:background .3s, top .3s, box-shadow .3s }
.site-header::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--vidrio), transparent) }
body.scrolled .site-header{ top:0; background:var(--vidrio-fuerte); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line) }
body.scrolled .site-header::before{ display:none }
/* las internas: pegada arriba y sólida desde el arranque */
body.interna .site-header{ position:sticky; top:0; background:var(--vidrio-fuerte); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line) }
body.interna .site-header::before{ display:none }
.hdr{ height:100%; display:flex; align-items:center; gap:var(--sp-5) }
.site-header button, .drawer button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0 }

.hdr-logo{ display:inline-flex; align-items:center; gap:var(--sp-3); flex:none; min-height:44px; color:var(--ink); text-decoration:none }
.hdr-logo svg{ width:38px; height:38px }
.hdr-logo .marca{ font-size:var(--fs-xl); line-height:1 }
.logo-baj{ display:block; font-family:var(--baj); font-weight:700; font-size:var(--fs-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); margin-top:3px }

.nav-desk{ display:flex; align-items:center; margin:0 auto }
.nav-link{ position:relative; display:inline-flex; align-items:center; gap:6px; height:var(--hdr-h); padding:0 var(--sp-3);
  font-weight:600; font-size:var(--fs-md); color:var(--ink); text-decoration:none }
.nav-link .icon{ color:var(--muted) }
.nav-link::after{ content:''; position:absolute; left:var(--sp-3); right:var(--sp-3); bottom:20px; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--curva) }
.nav-link:hover::after, .nav-link[aria-current]::after, .has-mega:focus-within > .nav-link::after, .has-mega:hover > .nav-link::after{ transform:scaleX(1) }
.hdr-right{ display:flex; align-items:center; gap:var(--sp-2); margin-left:auto }
.nav-desk + .hdr-right{ margin-left:0 }
.burger{ display:none; width:44px; height:44px; place-items:center; border-radius:50%; color:var(--ink) }
.burger:hover{ background:var(--panel-2) }

/* mega menú: se abre al pasar el mouse o con el foco, sin JS */
.has-mega{ position:static }
.mega{ position:absolute; left:0; right:0; top:100%; background:var(--panel); border-top:2px solid var(--gold);
  border-bottom:1px solid var(--line); box-shadow:var(--sombra); opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s, transform .25s var(--curva), visibility .2s }
.has-mega:hover .mega, .has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:none }
.mega-inner{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) 240px; align-items:start; gap:var(--sp-4); padding:var(--sp-5) var(--gut) var(--sp-6);
  max-width:var(--wrap); margin:0 auto; box-sizing:border-box }
.mega-inner.mega-3{ grid-template-columns:repeat(3, minmax(0,1fr)) 240px }
.mega-card{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); border-radius:var(--r-md); color:var(--ink); text-decoration:none;
  background:var(--navy); border:1px solid var(--line); transition:border-color var(--ease), transform .25s var(--curva) }
.mega-card:hover{ border-color:var(--oro-borde); transform:translateY(-3px) }
/* height:auto es lo que manda: sin eso el atributo height del <img> (1688 en una
   captura de celular) le gana al aspect-ratio y la tarjeta mide un metro */
.mega-card img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center; border-radius:var(--r-sm); background:var(--panel-2) }
.mega-card img.arriba{ object-position:center 38% }
.mega-card .mega-ico{ width:100%; aspect-ratio:16/9; border-radius:var(--r-sm); background:var(--panel-2); display:grid; place-items:center; color:var(--gold) }
.mega-card .mega-ico .icon{ width:40px; height:40px; stroke-width:1.4 }
.mega-card b{ font-family:var(--tit); font-size:var(--fs-lg) }
.mega-card span{ font-size:var(--fs-sm); color:var(--muted) }
.mega-links{ display:flex; flex-direction:column; padding-left:var(--sp-2) }
.mega-links h5{ margin:0 0 var(--sp-2); font-family:var(--baj); font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--cyan) }
.mega-links a{ display:flex; justify-content:space-between; align-items:center; min-height:44px; border-bottom:1px solid var(--line);
  font-weight:600; font-size:var(--fs-md); color:var(--ink); text-decoration:none }
.mega-links a .icon{ color:var(--gold) }
.mega-links a:hover{ color:var(--gold) }

/* capas: el menú del celular */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s }
.scrim.on{ opacity:1; visibility:visible }
body.lock{ overflow:hidden }
.drawer{ position:fixed; top:0; bottom:0; left:0; width:min(400px, 100vw); background:var(--panel); z-index:100; box-sizing:border-box;
  transform:translateX(-100%); visibility:hidden; transition:transform .35s var(--curva), visibility .35s; display:flex; flex-direction:column; border-right:1px solid var(--line) }
.drawer.on{ transform:none; visibility:visible }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line) }
.drawer-body{ flex:1; overflow-y:auto; padding:var(--sp-2) var(--sp-5) var(--sp-5); display:grid; align-content:start }
.drawer-tit{ display:block; margin:var(--sp-5) 0 var(--sp-1); font-family:var(--baj); font-size:var(--fs-sm); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan) }
.drawer-foot{ padding:var(--sp-4) var(--sp-5) var(--sp-5); border-top:1px solid var(--line) }
.drawer-foot .cta{ width:100%; justify-content:center; box-sizing:border-box }
.x-btn{ width:44px; height:44px; display:grid; place-items:center; border-radius:50% }
.x-btn:hover{ background:var(--panel-2) }
.menu-big{ display:flex; justify-content:space-between; align-items:center; min-height:52px; border-bottom:1px solid var(--line);
  font-family:var(--tit); font-weight:700; font-size:var(--fs-xl); color:var(--ink); text-decoration:none }
.menu-big .icon{ color:var(--gold) }
.menu-small{ display:flex; align-items:center; min-height:44px; font-weight:600; color:var(--muted); text-decoration:none }
.menu-big[aria-current], .menu-small[aria-current]{ color:var(--gold) }

/* ============================================================
   Pie
   ============================================================ */
.site-footer{ background:var(--navy); color:var(--muted); padding:var(--sp-8) 0 calc(var(--sp-6) + 72px); border-top:1px solid var(--line) }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3, minmax(0,1fr)); gap:var(--sp-6) }
.foot-grid h5{ margin:0 0 var(--sp-3); font-family:var(--baj); font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--cyan) }
.foot-grid a, .foot-grid #pie-mail a{ display:flex; align-items:center; min-height:44px; color:var(--muted); font-size:var(--fs-md); text-decoration:none }
.foot-grid a:hover{ color:var(--gold) }
.foot-grid .hdr-logo{ color:var(--ink) }
.foot-brand p{ max-width:34ch; font-size:var(--fs-md); margin:var(--sp-4) 0 0 }
.foot-bottom{ display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; border-top:1px solid var(--line);
  margin-top:var(--sp-7); padding-top:var(--sp-5); font-size:var(--fs-sm); color:var(--subtle) }

.wa-float{ position:fixed; right:var(--sp-4); bottom:var(--sp-4); z-index:65; width:58px; height:58px; border-radius:50%;
  background:var(--wa); color:var(--tinta-wa); display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.35);
  transition:transform var(--ease), opacity .3s, visibility .3s; opacity:0; visibility:hidden }
body.scrolled .wa-float{ opacity:1; visibility:visible }
.wa-float:hover{ transform:scale(1.06) }
.wa-float svg{ width:30px; height:30px; fill:currentColor }

/* ============================================================
   Responsive del shell
   ============================================================ */
@media (max-width:1100px){
  .nav-desk{ display:none }
  .burger{ display:grid }
  .hdr .hdr-right{ margin-left:auto }
  .foot-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:600px){
  :root{ --hdr-h:62px }
  .logo-baj{ display:none }
  .hdr-logo svg{ width:32px; height:32px }
  .hdr .cta-sm span{ display:none }
  .hdr .cta-sm{ width:44px; padding:0; justify-content:center }
  .announce-item{ font-size:var(--fs-xs); letter-spacing:.04em }
  .foot-grid{ grid-template-columns:minmax(0,1fr) }
}
@media (prefers-reduced-motion:reduce){
  .announce-item, .drawer, .mega, .site-header{ transition:none }
}
@media print{
  .site-header, .announce, .wa-float, .drawer, .scrim{ display:none }
}

/* ============================================================
   Puente: el cuerpo de las internas con el ritmo de la home
   ------------------------------------------------------------
   Las internas siguen con estilos.css y su CSS propio (las demos no se
   tocan). Esto solo les pone la misma voz visual que la portada: la
   apertura con el brillo dorado, títulos más grandes, la etiqueta con la
   rayita y el cierre de la home. Todo bajo body.interna, así que a la
   home no le llega nada.
   ⚠ Si cambiás un título de una apertura, medí a 390 y a 1024 que no
   desborde: el h1 creció de 44 a hasta 64px.
   ============================================================ */
.interna main > .seccion:first-child{
  background:
    radial-gradient(900px 420px at 85% 0%, var(--oro-tinte), transparent 65%),
    radial-gradient(700px 380px at 0% 100%, var(--cian-tinte), transparent 60%);
  border-bottom:1px solid var(--line) }
.interna main > .seccion:first-child h1,
.interna .caso-pg > .intro h1{ font-size:var(--fs-big); line-height:1.05; letter-spacing:-.03em; max-width:20ch }
.interna .seccion-cab h2{ font-size:var(--fs-sec); line-height:1.1; letter-spacing:-.03em }
/* la etiqueta de arriba del título: dorada y con la rayita, como en la home */
.interna main > .seccion:first-child .eyebrow,
.interna .seccion-cab > .eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-3); color:var(--gold); font-size:var(--fs-sm) }
.interna main > .seccion:first-child .eyebrow::before,
.interna .seccion-cab > .eyebrow::before{ content:''; width:28px; height:2px; background:var(--gold); flex:none }
/* el cierre, igual al de la home */
.interna .cierre{ background:radial-gradient(700px 360px at 50% 0%, var(--oro-tinte), transparent 70%), var(--panel); border-top:1px solid var(--line) }
.interna .cierre h2{ font-size:var(--fs-big); line-height:1.05; letter-spacing:-.03em; max-width:18ch; margin-inline:auto }
/* la línea del costo venía corrida a la izquierda (era un <p> de 68ch sin
   centrar) y con un margen negativo que la pegaba al texto de arriba */
.interna .cierre-txt, .interna .cierre-gratis{ margin-inline:auto }
.interna .cierre-gratis{ margin-block:0 var(--sp-5) }