@font-face{
  font-family:'Squada One'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/squada-one.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo Black'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/archivo-black.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
                U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
                U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}



:root{
  
  color-scheme: dark;

  
  --negro:      #0A0B12;
  
  --negro-elev: #102253;
  
  
  --metal-alto: #13285C;
  --metal-bajo: #08153A;
  
  --negro-elev-tarjeta: #102253;
  --blanco:     #FFFFFF;
  --texto:      #E9EAF0;
  --texto-2:    #A7ACBE;   
  --texto-3:    #A8ADBC;   

  
  --rojo:       #EA091F;   
  --rojo-hover: #ED0A1E;   
  --rojo-press: #C00518;
  --rojo-dim:   #FF2233;      
  --rojo-ghost: #360A0C;   

  
  --rojo-rgb:   234,9,31;

  
  --rojo-tinta: #FF5C52;   

  --linea:      rgba(255,255,255,.14);   
  --linea-2:    rgba(255,255,255,.24);

  
  --fondo-rgb:  10,11,18;

  
  --fl-caja:    #152D6E;
  --fl-agente:  #14337F;

  
  --linea-fuerte: #5D6377;
  
  --negro-linea: #05060A;
  --rojo-luz-rgb: 255,90,82;
  
  --azul: #4058FF;   
  --azul-hondo: #14337F;
  --azul-hondo-rgb: 20,51,127;
  --azul-hondo-2: #0E2358;   
  --azul-tinta: #93B4FF;
  --foco: #FFFFFF;
  --ok: #4ADE80;
  --alerta: #FBBF24;
}



:root{
  --fs-display: clamp(3.25rem,  1.512rem + 7.130vw, 8.25rem);   
  --fs-h1:      clamp(2.375rem, 1.549rem + 3.387vw, 4.75rem);   
  --fs-h2:      clamp(1.875rem, 1.354rem + 2.139vw, 3.375rem);  
  --fs-h3:      clamp(1.438rem, 1.199rem + 0.980vw, 2.125rem);  
  --fs-lead:    clamp(1.125rem, 1.038rem + 0.357vw, 1.375rem);  
  --fs-body:    clamp(1rem,     0.978rem + 0.089vw, 1.062rem);  
  --fs-small:   0.875rem;
  --fs-label:   clamp(0.6875rem,0.666rem + 0.089vw, 0.75rem);   
}


:root{
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:24px; --s-6:32px;  --s-7:48px;  --s-8:64px;
  --s-9:96px; --s-10:128px;--s-11:160px;--s-12:192px;
}


:root{
  --max:       1512px;
  --max-texto: 68ch;      
  --gutter:    clamp(20px, 5vw, 48px);
  --cols:      12;
  --gap:       32px;
}
@media (max-width:768px){ :root{ --cols:8; } }
@media (max-width:640px){ :root{ --cols:4; } }


:root{ --r-1:2px; --r-2:6px; }


:root{
  --t-micro: 150ms;
  --t-corta: 250ms;
  --t-media: 400ms;
  --t-larga: 800ms;
  --t-escena:1200ms;

  --e-salida:     cubic-bezier(.22, 1, .36, 1);    
  --e-suave:      cubic-bezier(.165,.84,.44,1);    
  --e-ui:         cubic-bezier(.4, 0, .2, 1);      
  --e-ida-vuelta: cubic-bezier(.76,0,.24,1);       
}


:root{
  --sombra:
     2px   4px  20px rgba(0,0,0,.10),
     6px  18px  42px rgba(0,0,0,.10),
    24px  72px  76px rgba(0,0,0,.09),
    55px 163px 103px rgba(0,0,0,.05),
    98px 289px 122px rgba(0,0,0,.10);
}



*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  scrollbar-color: var(--rojo-dim) var(--negro);
}

body{
  background:var(--negro); color:var(--texto);
  position:relative;
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video,svg{ display:block; max-width:100%; height:auto }
button,input,select,textarea{ font:inherit; color:inherit }



.display{
  font-family:'Squada One',sans-serif; text-transform:uppercase;
  font-size:var(--fs-display); line-height:1.02;
  letter-spacing:clamp(-0.005em, -0.05vw, -0.02em);
}
h1{ font-family:'Squada One',sans-serif; text-transform:uppercase;
    font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.01em }
h2{ font-family:'Squada One',sans-serif; text-transform:uppercase;
    font-size:var(--fs-h2); line-height:1.05; letter-spacing:-.01em }
h3{ font-family:'Archivo',sans-serif; font-weight:700;
    font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.01em }

p{ max-width:var(--max-texto) }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--texto) }


.impacto{ font-family:'Archivo Black',sans-serif; font-size:94%; color:var(--rojo-tinta) }


.label{
  font-family:'Archivo',sans-serif; font-weight:500; text-transform:uppercase;
  font-size:var(--fs-label); letter-spacing:.12em; line-height:1; color:var(--texto-3);
}


@supports (text-box: trim-both cap alphabetic){
  h1,h2,.display{ text-box: trim-both cap alphabetic }
}


.cifra{ font-variant-numeric: tabular-nums }



.envoltorio{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }

section{ padding-block: clamp(56px, 7.5vw, 116px) }
.seccion-cabecera{ margin-bottom: clamp(32px, 4vw, 64px) }
h2 + p{ margin-top:var(--s-4) }
p + p { margin-top:var(--s-5) }

.grid{ display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:var(--gap) }



.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 26px; border-radius:var(--r-1);
  font-weight:700; font-size:var(--fs-body); text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background-color var(--t-micro) var(--e-ui),
             border-color var(--t-micro) var(--e-ui),
             transform var(--t-micro) var(--e-ui);
}

.btn-primario{ background:var(--rojo); color:#FFF; border:1px solid var(--rojo-dim) }
.btn-fantasma{ border-color:var(--linea-2); color:var(--texto) }
@media (hover:hover){
  .btn-primario:hover{ background:var(--rojo-hover); transform:translateY(-1px) }
  .btn-fantasma:hover{ border-color:rgba(var(--rojo-rgb), .5) }
}

.btn:active{ transform:scale(.97) }
.btn-primario:active{ background:var(--rojo-press) }
.btn-fantasma:active{ border-color:rgba(var(--rojo-rgb), .5) }
@media (prefers-reduced-motion:reduce){ .btn:active{ transform:none } }



.tarjeta{
  background:var(--negro-elev); border:1px solid var(--linea);
  border-radius:var(--r-2); padding:var(--s-6);
  transition:border-color var(--t-corta) var(--e-ui), transform var(--t-corta) var(--e-ui);
}
@media (hover:hover){
  .tarjeta:hover{ border-color:var(--linea-2); transform:translateY(-4px) }
}

.captura{
  border-radius:var(--r-2); border:1px solid var(--linea);
  box-shadow:var(--sombra); background:var(--negro-elev);
}


::selection{ background:var(--rojo); color:#FFF }
:focus-visible{ outline:2px solid var(--foco); outline-offset:3px }  
::marker{ color:var(--rojo-tinta) }


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}




.solo-lector{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}


section[id]{ scroll-margin-top:84px }





body::before{
  content:''; position:fixed; z-index:0; pointer-events:none;
  inset:-30vh -20vw auto auto; width:min(900px,110vw); aspect-ratio:1;
  background:
    radial-gradient(circle at 62% 38%, rgba(var(--rojo-rgb), .075), transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(117,197,222,.045), transparent 62%);
  filter:blur(10px);
}


body::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}


html::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  display:none;
  background-image:radial-gradient(circle at 1px 1px, var(--punto) 1px, transparent 0);
  background-size:22px 22px;
  
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 5%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 120% 90% at 50% 5%, #000 40%, transparent 100%);
}

:root{ --punto:rgba(255,255,255,.11) }
:root[data-tema="claro"]{
  color-scheme: light; --punto:rgba(0,0,0,.14) }


:root[data-tema="claro"]::before{ display:block }

@media (max-width:900px), (hover:none){
  html::before{ display:block }
}

@media (prefers-reduced-motion:reduce){
  html::before{ display:block }
}

.equipo-lento::before{ display:block }
.equipo-lento .fondo-hex{ display:none }


.nav, main, .pie, .rutas, .wa-flota{ position:relative; z-index:1 }


main > section + section{
  border-top:1px solid var(--negro-linea);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

main > section.pegada{ border-top:0; box-shadow:none }


.ac{ color:var(--rojo-tinta) }


.badge{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--linea-2); border-radius:100px;
  padding:7px 15px 7px 13px; margin-bottom:var(--s-5);
  font-size:13px; color:var(--texto-2); background:rgba(255,255,255,.02);
}
.badge::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--rojo);
  
  box-shadow:0 0 0 1px rgba(var(--rojo-rgb), .28);
}
@media (prefers-reduced-motion:reduce){ .badge::before{ animation:none } }


.btn-primario{
  box-shadow:0 6px 22px rgba(var(--rojo-rgb), .16), inset 0 1px 0 rgba(255,255,255,.35);
}
@media (hover:hover){
  .btn-primario:hover{ box-shadow:0 10px 30px rgba(var(--rojo-rgb), .26), inset 0 1px 0 rgba(255,255,255,.4) }
}


:root[data-tema="claro"]{
  --negro:      #F6F7FA;
  --negro-elev: #FFFFFF;
  --texto:      #101425;   
  --texto-2:    #39405A;   
  --texto-3:    #5C6478;   

  --rojo-dim:   #E00429;   
  --rojo-ghost: #FDE7E9;   
  --fondo-rgb:  246,247,250;   
  --rojo-rgb:   234,9,31;
  
  --rojo-tinta: #C40A22;   

  --linea:      #DDE1EC;
  --linea-2:    #C6CCDC;

  
  --fl-caja:    #FFFFFF;
  --fl-agente:  #DEE7FC;

  
  --linea-fuerte: #8C8F9A;
  --negro-linea: #0A0C14;
  --rojo: #EA091F;
  --rojo-hover: #ED0A1E;
  --rojo-press: #B80417;
  --rojo-luz-rgb: 196,10,34;
  --azul: #2438EE;   
  --azul-hondo: #17348C;
  --azul-hondo-rgb: 23,52,140;
  --azul-hondo-2: #102A72;
  
  --negro-elev-tarjeta: #102253;
  --metal-alto: #13285C;
  --metal-bajo: #08153A;
  --azul-tinta: #17348C;   
  --foco: #BE0929;
  --ok: #0F5132;
  --alerta: #8A5A00;
}


:root[data-tema="claro"] .nav{ background:rgba(247,248,246,.86) }
@supports (backdrop-filter: blur(12px)){
  :root[data-tema="claro"] .nav{ background:rgba(247,248,246,.7) }
}
:root[data-tema="claro"] .nav.scrolleado{ background:rgba(247,248,246,.95) }
:root[data-tema="claro"] .nav-movil{
  background:rgba(247,248,246,.98);
  box-shadow:0 100vh 0 100vh rgba(16,20,37,.42);
}
:root[data-tema="claro"] .nav-abrir span{ background:var(--texto) }


:root[data-tema="claro"] .nav-marca img,
:root[data-tema="claro"] .pie-marca img{ filter:invert(1) }


:root[data-tema="claro"] body::before{
  background:
    radial-gradient(circle at 62% 38%, rgba(var(--rojo-rgb), .10), transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(3,105,161,.06), transparent 62%);
}

:root[data-tema="claro"] body::after{ opacity:.03 }

:root[data-tema="claro"] main > section + section{
  border-top-color:rgba(0,0,0,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}


:root[data-tema="claro"] .ac{
  
  color:var(--texto);
  background:linear-gradient(transparent 86%, var(--rojo) 86%, var(--rojo) 99%, transparent 99%);
  padding-inline:.06em;
  
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}





:root[data-tema="claro"] .plan.destacado .plan-val,
:root[data-tema="claro"] .cifra .n,
:root[data-tema="claro"] .dolor .horas,
:root[data-tema="claro"] .prueba .dato,
:root[data-tema="claro"] .num,
:root[data-tema="claro"] .vs-caja.mio .vs-tit,
:root[data-tema="claro"] .paso3-tiempo{ color:var(--rojo-tinta) !important }


:root[data-tema="claro"] .btn-primario{
  color:#FFF;
  box-shadow:0 4px 14px rgba(var(--rojo-rgb), .22), inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-tema="claro"] .btn-fantasma{ background:#FFFFFF }


:root[data-tema="claro"] .ben,
:root[data-tema="claro"] .caso,
:root[data-tema="claro"] .plan,
:root[data-tema="claro"] .ruta,
:root[data-tema="claro"] .ej,
:root[data-tema="claro"] .dolor,
:root[data-tema="claro"] .siempre,
:root[data-tema="claro"] .faq details,
:root[data-tema="claro"] .integra span{
  box-shadow:0 1px 3px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.04);
}


:root[data-tema="claro"] .ad-antes{ background:rgba(0,0,0,.04); color:var(--texto-3) }
:root[data-tema="claro"] .ad-desp{ background:rgba(var(--rojo-rgb), .15); color:var(--texto) }   
:root[data-tema="claro"] .ad-desp b,
:root[data-tema="claro"] .ad-desp .ad-et{ color:var(--rojo-tinta) }


:root[data-tema="claro"] .ben-ico svg,
:root[data-tema="claro"] .caso-ico svg,
:root[data-tema="claro"] .plan li svg,
:root[data-tema="claro"] .siempre-lista svg{ stroke:var(--rojo-tinta) }
:root[data-tema="claro"] .ben-ico,
:root[data-tema="claro"] .caso-ico{ background:#F2FFC7; border-color:rgba(var(--rojo-rgb), .3) }


:root[data-tema="claro"] .campo input,
:root[data-tema="claro"] .campo textarea,
:root[data-tema="claro"] .campo select{ background:#FFFFFF; color:var(--texto) }
:root[data-tema="claro"] .flujo-marco{ background:#FFFFFF }
:root[data-tema="claro"] .flujo-barra{ background:#F1F2F6 }
:root[data-tema="claro"] .nodo{ background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,.06) }
:root[data-tema="claro"] .mockup-barra{ background:#ECEEF3 }
:root[data-tema="claro"] .mockup-url{ background:#FFFFFF }


:root[data-tema="claro"] .pie{ background:#0A0A0A; border-top-color:transparent }
:root[data-tema="claro"] .pie *{ color:#A4A4A4 }
:root[data-tema="claro"] .pie .label{ color:#E8E8E8 }
:root[data-tema="claro"] .pie-marca img{ filter:none }
:root[data-tema="claro"] .pie-fin{ border-top-color:rgba(255,255,255,.1) }


.tema-btn{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:none; border:1px solid var(--linea-2); border-radius:50%;
  cursor:pointer; color:var(--texto-2); padding:0;
  transition:border-color var(--t-micro) var(--e-ui), color var(--t-micro) var(--e-ui);
}
.tema-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;
               stroke-linecap:round; stroke-linejoin:round }
.tema-btn .sol{ display:none }


@media (pointer:coarse){
  .tema-btn{ width:44px; height:44px }
  .tema-btn svg{ width:19px; height:19px }
}
:root[data-tema="claro"] .tema-btn .sol{ display:block }
:root[data-tema="claro"] .tema-btn .luna{ display:none }
@media (hover:hover){ .tema-btn:hover{ border-color:var(--rojo-dim); color:var(--texto) } }







.equipo-lento .nav{ backdrop-filter:none !important; background:rgba(10,10,10,.9) }
:root[data-tema="claro"].equipo-lento .nav{ background:rgba(247,248,246,.94) }
.equipo-lento body::before{ filter:none }


.equipo-lento .flujo-log li,
.equipo-lento .badge::before,
.equipo-lento .hero-pre::before,
.equipo-lento .fl-pensando circle,
.equipo-lento .fl-curso,
.equipo-lento .flujo-punto{ animation:none !important }


.equipo-lento .fl-punto{ display:none }