/* =============================================================
   TRACCIÓN ARGENTINA — Sistema de diseño "Doble tiempo"
   Hero oscuro cinematográfico → cuerpo claro editorial.
   HTML + CSS + JS puro. Sin frameworks.
   ============================================================= */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  /* Color — cinco valores, nada más (moderación deliberada) */
  --ink:        #0B0E13;   /* negro de tinta */
  --ink-deep:   #05080D;   /* negro del hero */
  --paper:      #F4F2ED;   /* hueso */
  --paper-2:    #EAE7DF;   /* hueso hundido */
  --celeste:    #75AADB;   /* celeste bandera (sobre oscuro) */
  --ambar:      #D9822B;   /* señalización vial / Sol de Mayo */

  /* Derivados */
  --celeste-ink: #1F638F;  /* celeste legible sobre hueso */
  --grafito:     #5B6675;
  --grafito-2:   #8C97A5;
  --line-dark:   rgba(255,255,255,.12);
  --line-light:  rgba(11,14,19,.14);

  /* Tipografía */
  --display: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Métrica */
  --wrap:     1180px;
  --wrap-wide:1400px;
  --gutter:   clamp(20px, 5vw, 56px);
  --band:     clamp(88px, 11vw, 168px);
  --r:        4px;
  --r-lg:     10px;

  /* Curvas */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-synthesis-weight:none;
}
img,svg,video{ display:block; max-width:100%; }
/* sin esto, el atributo height="" del HTML gana y deforma la imagen */
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:.98; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ink); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:16px; z-index:999;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:var(--r);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{ top:16px; }

/* ---------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--wrap-wide); }

/* overflow:hidden recorta el halo del cursor, que es más ancho que la pantalla
   de un teléfono y provocaba scroll horizontal */
.band{ position:relative; padding-block:var(--band); overflow:hidden; }
.band--light{ background:var(--paper); color:var(--ink); }
.band--sunk { background:var(--paper-2); color:var(--ink); }
.band--dark {
  background:var(--ink-deep);
  color:#EDF2F7;
  --line-light:var(--line-dark);
  --grafito:#93A2B4;
  --grafito-2:#6C7B8D;
  --celeste-ink:var(--celeste);
}
/* Grano de película y de papel.
   SIN mix-blend-mode a propósito: igual que backdrop-filter, obliga al navegador a
   leer lo que hay pintado detrás, y con la GPU acelerada Chrome deja baldosas viejas
   sin repintar (aparecía contenido del pie arriba de todo al volver al inicio).
   El ruido se genera ya con el color final y alfa variable, así que se pinta encima
   sin mirar el fondo. */
.band--dark::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.band--light::after,
.band--sunk::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
}
.band > *{ position:relative; z-index:2; }

/* ---------------------------------------------------------------
   4. TIPOGRAFÍA
   --------------------------------------------------------------- */
.kicker{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--celeste-ink);
}
.kicker::before{
  content:""; width:22px; height:1px; background:currentColor; opacity:.8;
}
.band--dark .kicker{ color:var(--celeste); }

.h-xl{
  font-family:var(--display);
  font-weight:800; font-stretch:112%;
  font-size:clamp(46px, 8.4vw, 122px);
  line-height:.9; letter-spacing:-.035em;
  text-wrap:balance;
}
.h-lg{
  font-family:var(--display);
  font-weight:700; font-stretch:108%;
  font-size:clamp(34px, 5.4vw, 68px);
  line-height:.96; letter-spacing:-.028em;
  text-wrap:balance;
}
.h-md{
  font-family:var(--display);
  font-weight:700; font-stretch:104%;
  font-size:clamp(24px, 2.6vw, 34px);
  line-height:1.05; letter-spacing:-.02em;
}
.h-sm{
  font-family:var(--display);
  font-weight:600; font-stretch:102%;
  font-size:20px; line-height:1.15; letter-spacing:-.012em;
}
.serif{ font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.01em; }
.lead{
  font-size:clamp(18px, 1.5vw, 21px);
  line-height:1.55; color:var(--grafito);
  max-width:60ch; text-wrap:pretty;
}
.small{ font-size:15.5px; line-height:1.62; color:var(--grafito); }
.mono{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grafito-2);
}
.accent{ color:var(--celeste-ink); }
.band--dark .accent{ color:var(--celeste); }

.band-head{ max-width:920px; margin-bottom:clamp(48px, 6vw, 88px); }
.band-head .h-lg{ margin-top:22px; }
.band-head .lead{ margin-top:22px; }

/* ---------------------------------------------------------------
   5. BOTONES Y BADGES DE TIENDA
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  font-family:var(--display); font-weight:600; font-stretch:104%;
  font-size:15px; letter-spacing:.01em;
  border-radius:var(--r);
  border:1px solid transparent;
  transition:transform .3s var(--ease), background-color .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ box-shadow:0 14px 34px rgba(11,14,19,.22); }
.band--dark .btn--solid{ background:var(--paper); color:var(--ink); }
.band--dark .btn--solid:hover{ box-shadow:0 14px 40px rgba(0,0,0,.5); }

.btn--line{ border-color:var(--line-light); color:inherit; }
.btn--line:hover{ border-color:currentColor; }

/* Badges de tienda ------------------------------------------------ */
.stores{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.store{
  display:inline-flex; align-items:center; gap:12px;
  padding:10px 20px 10px 16px;
  border-radius:8px;
  border:1px solid var(--line-light);
  background:var(--ink); color:#fff;
  /* Sin will-change: estaba en TODOS los botones e insignias, y dejaba a cada uno
     como una capa de GPU permanente. Esas capas eran las que reaparecían pintadas
     arriba de todo al volver al inicio. El desplazamiento de 2px en hover no
     necesita promoción. */
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.store:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(11,14,19,.25); }
.band--dark .store{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
}
.band--dark .store:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); }
.store.is-secondary{ opacity:.55; }        /* la tienda que no es la del visitante */
.store.is-secondary:hover{ opacity:1; }
.store__mark{ width:26px; height:26px; flex:none; }
.store__txt{ display:flex; flex-direction:column; line-height:1.1; }
.store__txt small{
  font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; opacity:.72;
}
.store__txt strong{
  font-family:var(--display); font-weight:600; font-stretch:104%;
  font-size:17px; letter-spacing:-.01em; margin-top:2px;
}

/* ---------------------------------------------------------------
   6. HEADER
   --------------------------------------------------------------- */
/* Sin backdrop-filter a propósito: Chrome conserva una instantánea vieja de lo que
   había detrás de un elemento fijo y la pinta como un rectángulo claro al hacer
   scroll. Un fondo casi opaco se ve igual y no tiene ese artefacto. */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding-block:18px;
  transition:padding .4s var(--ease), background-color .4s var(--ease),
             border-color .4s var(--ease);
  border-bottom:1px solid transparent;
  color:#EDF2F7;
}
/* Fondo 100% opaco: si el navegador no tiene que repintar lo que pasa por detrás
   de una barra fija, no puede quedarse con pixeles viejos ahí. */
.site-header.is-stuck{
  padding-block:11px;
  background:var(--ink-deep);
  border-bottom-color:var(--line-dark);
}
/* El header cambia de tema al entrar en las secciones claras */
.site-header.on-light{ color:var(--ink); }
.site-header.on-light.is-stuck{
  background:var(--paper);
  border-bottom-color:var(--line-light);
}
.header-in{ display:flex; align-items:center; justify-content:space-between; gap:28px; }

.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand img{ width:auto; height:38px; flex:none; }
.brand__name{
  display:flex; flex-direction:column; line-height:.94;
  font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:16px; letter-spacing:.005em; text-transform:uppercase;
}
.brand__name span:last-child{ color:var(--celeste); font-size:15.4px; }
.on-light .brand__name span:last-child{ color:var(--celeste-ink); }

.site-nav{ display:flex; gap:30px; }
.site-nav a{
  position:relative; padding-block:6px;
  font-size:14.5px; font-weight:500;
  opacity:.78; transition:opacity .25s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1.5px; background:currentColor;
  transition:width .35s var(--ease);
}
.site-nav a:hover{ opacity:1; }
.site-nav a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:12px; }
.header-cta .btn{ padding:11px 20px; font-size:14px; }
.site-header .btn--solid{ background:#fff; color:var(--ink); }
.site-header.on-light .btn--solid{ background:var(--ink); color:var(--paper); }

.burger{
  display:none; width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid currentColor; border-radius:var(--r); opacity:.6;
}
.burger i{ display:block; width:17px; height:1.5px; background:currentColor; position:relative; }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor;
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger i::before{ top:-6px; }
.burger i::after{ top:6px; }
.burger[aria-expanded="true"] i{ background:transparent; }
.burger[aria-expanded="true"] i::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] i::after{ top:0; transform:rotate(-45deg); }

/* El menú es un elemento fijo, del tamaño de la pantalla, con transform y con las
   insignias de tienda adentro. Estaba SIEMPRE presente, apenas corrido hacia arriba:
   una capa de GPU permanente justo encima del borde superior. Con `visibility:hidden`
   el navegador directamente no la pinta, y en escritorio ni siquiera existe. */
.mobile-menu{
  position:fixed; inset:0; z-index:85;
  background:var(--ink-deep); color:#EDF2F7;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:100px var(--gutter) 48px;
  transform:translateY(-101%);
  visibility:hidden;
  transition:transform .55s var(--ease-out), visibility 0s linear .55s;
}
.mobile-menu.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform .55s var(--ease-out), visibility 0s;
}
@media (min-width:1081px){ .mobile-menu{ display:none; } }
.mobile-menu a{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(30px, 9vw, 46px); letter-spacing:-.03em;
  padding-block:10px; border-bottom:1px solid var(--line-dark);
}
.mobile-menu .stores{ margin-top:34px; }

/* ---------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:150px 56px;
  background:var(--ink-deep); color:#EDF2F7;
  overflow:hidden;
  --grafito:#93A2B4;
  --grafito-2:#6C7B8D;
  --line-light:var(--line-dark);
  --celeste-ink:var(--celeste);
}
.hero__media{
  position:absolute; inset:-8% 0 -8% 0; z-index:0;
}
.hero__media video,
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.05);
}
/* La toma del atardecer es clara: hace falta un velo lateral fuerte para que el
   titular blanco se lea, dejando el camión y el cielo limpios a la derecha. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(95deg,
      rgba(5,8,13,.94) 0%,
      rgba(5,8,13,.82) 26%,
      rgba(5,8,13,.5)  48%,
      rgba(5,8,13,.14) 70%,
      transparent 88%),
    linear-gradient(180deg,
      rgba(5,8,13,.72) 0%,
      rgba(5,8,13,.18) 26%,
      rgba(5,8,13,.42) 66%,
      rgba(5,8,13,.9)  88%,
      var(--ink-deep) 100%);
}
@media (max-width:900px){
  /* En el teléfono el texto ocupa todo el ancho y cae justo sobre la parte más
     clara del cielo, así que el velo tapa desde bastante más arriba. */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(5,8,13,.86) 0%,
        rgba(5,8,13,.52) 14%,
        rgba(5,8,13,.66) 30%,
        rgba(5,8,13,.82) 48%,
        rgba(5,8,13,.94) 72%,
        var(--ink-deep) 100%);
  }
  /* Celeste más luminoso y una sombra suave: el texto chico se lee igual aunque
     por detrás pase una nube iluminada. */
  .hero .kicker{ color:#B6D8F5; text-shadow:0 1px 14px rgba(5,8,13,.95); }
  .hero__sub{ color:#D3DEE9; text-shadow:0 1px 16px rgba(5,8,13,.8); }
  .hero__note{ color:#93A6BB; text-shadow:0 1px 14px rgba(5,8,13,.95); }
  .hero h1{ text-shadow:0 2px 30px rgba(5,8,13,.6); }
}
.hero__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.hero__in{ position:relative; z-index:3; width:100%; }
.hero h1{ margin-top:26px; max-width:15ch; }
.hero h1 .serif{ display:block; color:var(--celeste); }
.hero__sub{ margin-top:26px; max-width:52ch; font-size:clamp(17px,1.45vw,20px); color:#B7C4D3; }
.hero__actions{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero__note{
  margin-top:20px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:#6C7B8D;
}

.hero__cue{
  position:absolute; z-index:3; right:var(--gutter); bottom:56px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:#6C7B8D;
  writing-mode:vertical-rl;
}
.hero__cue i{
  display:block; width:1px; height:56px;
  background:linear-gradient(180deg, transparent, var(--celeste));
  position:relative; overflow:hidden;
}
.hero__cue i::after{
  content:""; position:absolute; inset:0 auto auto 0;
  width:1px; height:38%; background:#DCEBFA;
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ top:-40% } 100%{ top:120% } }

/* ---------------------------------------------------------------
   8. CINTA DE CORREDORES (costura oscuro → claro)
   --------------------------------------------------------------- */
.seam{
  background:var(--ink-deep); color:#9FAEC0;
  border-top:1px solid var(--line-dark);
  padding-block:16px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.ticker ul{ display:flex; align-items:center; gap:44px; padding-right:44px; }
.ticker li{
  font-family:var(--mono); font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.ticker li::before{ content:"◆"; margin-right:14px; color:var(--celeste); opacity:.55; font-size:8px; vertical-align:middle; }
@keyframes slide{ to{ transform:translateX(-50%) } }
.seam:hover .ticker{ animation-play-state:paused; }

/* ---------------------------------------------------------------
   9. MANIFIESTO (editorial)
   --------------------------------------------------------------- */
.manifesto{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; }
.manifesto__claim{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:clamp(30px, 3.9vw, 54px); line-height:1.04; letter-spacing:-.03em;
  text-wrap:balance;
}
.manifesto__claim .serif{ color:var(--celeste-ink); }
.manifesto__body{ padding-top:10px; display:grid; gap:22px; }
.manifesto__body p{ font-size:17.5px; line-height:1.62; color:var(--grafito); max-width:52ch; }
.manifesto__body strong{ color:var(--ink); font-weight:600; }

.figures{
  margin-top:clamp(56px,7vw,96px);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-light);
}
.figure{ padding:30px 26px 4px 0; border-right:1px solid var(--line-light); }
.figure:last-child{ border-right:0; }
.figure__n{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:clamp(38px,4vw,54px); line-height:1; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.figure__n em{ font-style:normal; color:var(--celeste-ink); }
/* Cuando el dato es una palabra y no un número, achicar para que no rompa la fila */
.figure__n--word{ font-size:clamp(30px,3.1vw,42px); letter-spacing:-.02em; padding-top:.12em; }
.figure__l{
  margin-top:14px; font-size:14.5px; line-height:1.45;
  color:var(--grafito); max-width:26ch;
}

/* ---------------------------------------------------------------
   10. CÓMO FUNCIONA — ruta que se dibuja con el scroll
   --------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,34px); }
.step{ position:relative; padding-top:32px; border-top:1px solid var(--line-light); }
.step::before{ /* la ruta que se dibuja tramo a tramo */
  content:""; position:absolute; inset:-1px 0 auto 0; height:2px;
  background:var(--ink); transform-origin:left;
  transition:transform 1s var(--ease-out);
}
.js .step::before{ transform:scaleX(0); }
.js .step.is-in::before{ transform:scaleX(1); }
.step:nth-child(2)::before{ transition-delay:.18s }
.step:nth-child(3)::before{ transition-delay:.36s }
.step:nth-child(4)::before{ transition-delay:.54s }
.step__dot{
  position:absolute; top:-5px; left:-1px;
  width:9px; height:9px; border-radius:50%;
  background:var(--ambar); box-shadow:0 0 0 5px var(--paper);
  transition:transform .5s var(--ease-out) .2s;
}
.js .step__dot{ transform:scale(0); }
.js .step.is-in .step__dot{ transform:scale(1); }
.step__n{
  display:block; margin-bottom:28px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--celeste-ink);
}
.step h3{ margin-bottom:12px; }
.step p{ font-size:15.5px; line-height:1.6; color:var(--grafito); }

/* ---------------------------------------------------------------
   11. DOS LADOS — pestañas
   --------------------------------------------------------------- */
.switch{
  display:inline-flex; position:relative;
  border:1px solid var(--line-light); border-radius:999px; padding:4px;
  margin-bottom:clamp(38px,4.5vw,58px);
}
.switch__pill{
  position:absolute; top:4px; left:4px; height:calc(100% - 8px);
  background:var(--ink); border-radius:999px; z-index:0;
  transition:transform .45s var(--ease-out), width .45s var(--ease-out);
}
.switch button{
  position:relative; z-index:1;
  padding:11px 26px; border-radius:999px;
  font-family:var(--display); font-weight:600; font-stretch:104%;
  font-size:14.5px; color:var(--grafito);
  transition:color .35s var(--ease);
  white-space:nowrap;
}
.switch button[aria-selected="true"]{ color:var(--paper); }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.cards[hidden]{ display:none; }
.card{
  background:var(--paper); padding:34px 30px 38px;
  transition:background-color .4s var(--ease);
  position:relative; overflow:hidden;
}
.card:hover{ background:var(--paper-2); }
.card::before{ /* filo de luz que barre el borde superior */
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--celeste-ink), var(--ambar));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.card:hover::before{ transform:scaleX(1); }
.card__ico{
  width:34px; height:34px; margin-bottom:26px;
  color:var(--celeste-ink);
  transition:transform .45s var(--ease-out), color .35s var(--ease);
}
.card:hover .card__ico{ transform:translateY(-3px); color:var(--ambar); }
.card__ico svg{ width:100%; height:100%; stroke-width:1.4; }
.card h3{ margin-bottom:10px; }
.card p{ font-size:15px; line-height:1.6; color:var(--grafito); }
.card__tag{
  position:absolute; top:22px; right:24px;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ambar); border:1px solid currentColor; border-radius:99px; padding:3px 9px;
}

/* ---------------------------------------------------------------
   12. LA APP — banda oscura con teléfonos
   --------------------------------------------------------------- */
.app-grid{
  display:grid; grid-template-columns:1.12fr 1fr;
  gap:clamp(36px,4.5vw,72px); align-items:center;
}
.phones{ position:relative; display:flex; justify-content:center; align-items:center; gap:clamp(8px,1.2vw,18px); }
.phone{
  position:relative; flex:1 1 0; min-width:0; max-width:212px;
  border-radius:30px; padding:7px;
  background:linear-gradient(160deg,#2C333D,#0E1217 55%);
  box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.phone img{ width:100%; border-radius:24px; display:block; }
.phone::after{ /* reflejo de vidrio */
  content:""; position:absolute; inset:7px; border-radius:24px; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.16) 0%, transparent 38%);
}
.phone--mid{ margin-top:-42px; z-index:2; max-width:230px; }
.phone__cap{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  width:34%; height:5px; border-radius:99px; background:#05080D; z-index:3;
}

.app-list{ display:grid; gap:2px; margin-top:38px; }
.app-list li{
  display:flex; gap:16px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--line-dark);
}
.app-list li:last-child{ border-bottom:1px solid var(--line-dark); }
.app-list b{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; color:var(--celeste); flex:none; width:26px;
}
.app-list span{ font-size:16px; line-height:1.5; }
.app-list em{ font-style:normal; color:#93A2B4; }

/* ---------------------------------------------------------------
   13. LO QUE HAY ADENTRO — grilla densa
   --------------------------------------------------------------- */
.inside{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(28px,4vw,64px);
}
.inside li{
  display:flex; gap:14px; align-items:flex-start;
  padding:17px 0; border-bottom:1px solid var(--line-light);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .inside li{ opacity:0; transform:translateY(14px); }
.js .inside.is-in li{ opacity:1; transform:none; }
.inside svg{ width:16px; height:16px; margin-top:4px; flex:none; color:var(--celeste-ink); }
.inside span{ font-size:15.5px; line-height:1.5; }
.inside b{ font-weight:600; }

/* ---------------------------------------------------------------
   14. FAQ
   --------------------------------------------------------------- */
.faq{ max-width:860px; border-top:1px solid var(--line-light); }
.faq__item{ border-bottom:1px solid var(--line-light); }
.faq__q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:28px;
  text-align:left; padding:27px 0;
  font-family:var(--display); font-weight:600; font-stretch:104%;
  font-size:clamp(18px,1.7vw,22px); letter-spacing:-.015em; line-height:1.25;
  transition:color .25s var(--ease);
}
.faq__q:hover{ color:var(--celeste-ink); }
.faq__q i{ position:relative; width:15px; height:15px; flex:none; }
.faq__q i::before,.faq__q i::after{
  content:""; position:absolute; top:7px; left:0; width:15px; height:1.5px;
  background:currentColor; transition:transform .35s var(--ease-out);
}
.faq__q i::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__q i::after{ transform:rotate(0); }
.faq__a{ overflow:hidden; height:0; transition:height .4s var(--ease-out); }
.faq__a > div{ padding-bottom:28px; max-width:66ch; color:var(--grafito); font-size:16.5px; line-height:1.65; }

/* ---------------------------------------------------------------
   16. CTA FINAL
   --------------------------------------------------------------- */
.finale{ text-align:center; }
.finale .h-xl{ margin-inline:auto; max-width:14ch; }
.finale .lead{ margin:26px auto 0; text-align:center; }
.finale .stores{ justify-content:center; margin-top:40px; }
.finale__alt{ margin-top:26px; }

/* ---------------------------------------------------------------
   17. FOOTER
   --------------------------------------------------------------- */
.site-footer{ background:var(--ink-deep); color:#93A2B4; padding-block:clamp(64px,7vw,96px) 34px; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr;
  gap:clamp(30px,4vw,56px);
  padding-bottom:52px; border-bottom:1px solid var(--line-dark);
}
.site-footer .brand{ color:#EDF2F7; }
.site-footer h4{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:#5E6B7C; margin-bottom:20px;
}
.site-footer li + li{ margin-top:2px; }
.site-footer li a{
  display:inline-block; padding-block:7px;   /* zona táctil cómoda en el teléfono */
  font-size:15px; transition:color .25s var(--ease);
}
.site-footer li a:hover{ color:#EDF2F7; }
.footer-blurb{ margin-top:20px; font-size:15px; line-height:1.62; max-width:34ch; }
.footer-bottom{
  padding-top:26px; display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.footer-bottom p{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#5E6B7C; }
.footer-legal{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-legal a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#8DA0B6; padding-block:4px;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.footer-legal a:hover{ color:#EDF2F7; border-bottom-color:var(--celeste); }
.social{ display:flex; gap:8px; }
.social a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line-dark); border-radius:var(--r);
  transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social a:hover{ border-color:var(--celeste); color:var(--celeste); transform:translateY(-2px); }
.social svg{ width:16px; height:16px; }

/* ---------------------------------------------------------------
   18. HALO QUE SIGUE AL CURSOR (solo bandas oscuras, con retraso)
   --------------------------------------------------------------- */
.halo{
  position:absolute; z-index:1; pointer-events:none;
  width:640px; height:640px; margin:-320px 0 0 -320px;
  left:var(--hx,50%); top:var(--hy,50%);
  background:radial-gradient(circle, rgba(117,170,219,.13) 0%, rgba(117,170,219,.05) 32%, transparent 66%);
  opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility 0s linear .6s;
}
.band--dark:hover .halo,
.hero:hover .halo{
  opacity:1; visibility:visible;
  transition:opacity .6s var(--ease), visibility 0s;
}

/* ---------------------------------------------------------------
   19. REVELADOS
   --------------------------------------------------------------- */
/* El estado oculto se aplica SOLO si hay JavaScript (la clase .js la pone un
   script mínimo en el <head>). Sin JS, todo el contenido se ve normalmente. */
.rv{ transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .rv{ opacity:0; transform:translateY(26px); }
.js .rv.is-in{ opacity:1; transform:none; }
.rv-1{ transition-delay:.07s } .rv-2{ transition-delay:.14s }
.rv-3{ transition-delay:.21s } .rv-4{ transition-delay:.28s }

/* titular palabra por palabra */
.words span{
  display:inline-block; overflow:hidden; vertical-align:top;
}
.words span > i{
  display:inline-block; font-style:inherit;
  transition:transform .95s var(--ease-out);
}
.js .words span > i{ transform:translateY(105%); }
.js .words.is-in span > i{ transform:translateY(0); }

/* ---------------------------------------------------------------
   19. PÁGINAS DE TEXTO (privacidad / eliminar cuenta)
   --------------------------------------------------------------- */
.page-hero{
  background:var(--ink-deep); color:#EDF2F7;
  padding:clamp(150px,16vw,210px) 0 clamp(64px,8vw,104px);
  position:relative; overflow:hidden;
  --grafito:#93A2B4;
  --grafito-2:#6C7B8D;
  --line-light:var(--line-dark);
  --celeste-ink:var(--celeste);
}
.page-hero::before{ /* luz baja para que el negro no quede plano */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(75% 65% at 8% 115%, rgba(117,170,219,.18), transparent 62%);
}
.page-hero::after{ /* mismo grano que las bandas oscuras */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.page-hero > *{ position:relative; z-index:2; }
.page-hero .lead{ color:#B7C4D3; margin-top:24px; }

.prose{ max-width:74ch; }
.prose h2{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:clamp(25px,2.7vw,36px); letter-spacing:-.025em; line-height:1.06;
  margin:clamp(48px,5vw,72px) 0 18px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:20px; margin:38px 0 12px; }
.prose p{ margin-bottom:18px; color:var(--grafito); font-size:17px; line-height:1.7; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ul{ margin:0 0 22px; display:grid; gap:11px; }
.prose ul li{
  position:relative; padding-left:24px; color:var(--grafito); font-size:17px; line-height:1.65;
}
.prose ul li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:7px; height:1.5px; background:var(--celeste-ink);
}
.prose a{ color:var(--celeste-ink); text-decoration:underline; text-underline-offset:3px; }
.prose hr{ border:0; border-top:1px solid var(--line-light); margin:44px 0; }

/* ---------------------------------------------------------------
   21. RESPONSIVE — pase dedicado de móvil
   --------------------------------------------------------------- */
@media (max-width:1080px){
  .site-nav{ display:none; }
  .header-cta .btn{ display:none; }
  .burger{ display:flex; }
  .manifesto{ grid-template-columns:1fr; gap:34px; }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .app-grid{ grid-template-columns:1fr; gap:56px; }
  .inside{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child{ grid-column:1 / -1; }
}

@media (max-width:720px){
  body{ font-size:16.5px; }
  :root{ --band:clamp(64px,15vw,92px); }

  .hero{ min-height:92svh; padding-block:126px 44px; align-items:flex-end; }
  .hero h1{ max-width:none; }
  .hero__cue{ display:none; }
  .hero__actions{ gap:10px; }
  .hero__actions .btn--line{ display:none; }   /* en el teléfono manda la descarga */
  .store{ flex:1 1 auto; min-width:0; justify-content:flex-start; }

  /* Dos columnas: cada dato necesita aire contra la línea divisoria, si no el
     texto queda pegado a la raya y se lee apretado. */
  .figures{ grid-template-columns:1fr 1fr; }
  .figure{ padding:24px 18px 22px; border-bottom:1px solid var(--line-light); }
  .figure:nth-child(odd){ padding-left:0; }
  .figure:nth-child(even){ padding-right:0; }
  .figure:nth-child(2n){ border-right:0; }
  .figure:nth-last-child(-n+2){ border-bottom:0; }
  .figure__l{ max-width:none; }

  .steps{ grid-template-columns:1fr; row-gap:34px; }
  .route__line{ display:none; }

  .cards{ grid-template-columns:1fr; }
  .card{ padding:28px 24px 30px; }
  .switch{ width:100%; }
  .switch button{ flex:1; padding:11px 12px; font-size:13.5px; }

  /* Las tres capturas en un carrusel que se pasa con el dedo, a sangre completa y
     con imán en cada teléfono. Los vecinos asoman por los costados: eso es lo que
     le avisa al usuario que se puede deslizar. */
  .phones{
    display:flex; gap:14px;
    /* flex-start es obligatorio: con justify-content:center, cuando el contenido no
       entra, el primer elemento se desborda hacia la izquierda y no se puede alcanzar
       con el scroll. El centrado lo hace el relleno lateral. */
    justify-content:flex-start;
    margin-inline:calc(var(--gutter) * -1);
    /* en vw, no en %: el % se calcula contra la columna de la grilla, no contra el
       ancho real de la tira, y el primer teléfono quedaba corrido un gutter */
    padding-inline:calc(50vw - min(62vw, 250px) / 2);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .phones::-webkit-scrollbar{ display:none; }
  .phone{
    flex:0 0 auto;
    width:min(62vw, 250px);
    max-width:none;
    scroll-snap-align:center;
    border-radius:26px; padding:6px;
  }
  .phone img{ border-radius:21px; }
  .phone--side{ display:block; }
  .phone--mid{ margin-top:0; max-width:none; }

  .inside{ grid-template-columns:1fr; }
  .quote{ grid-template-columns:1fr; gap:6px; }
  .quote__mark{ font-size:74px; }

  .milestone{ grid-template-columns:1fr; gap:8px; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; padding-bottom:38px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------
   22. PREFERENCIAS DEL SISTEMA
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv{ opacity:1; transform:none; }
  .words span > i{ transform:none; }
  .route__line path{ stroke-dashoffset:0 !important; }
}

@media print{
  .site-header,.hero__media,.hero__cue,.seam,.halo{ display:none !important; }
  body{ background:#fff; color:#000; }
}