/* AX Logistic · estilos del sitio
   Dirección de arte "El hilo AX" (aprobada el 11/11/2026). Valores técnicos y su porqué: LEEME.md
   Orden: tokens · base · botones · cabecera y menú · portada · secciones · formulario · pie · barra fija · Lenis · menos movimiento */

/* ===== Tokens ===== */
:root{
  --navy:#0B1F44; --deep:#052F36; --green:#0F7A3B; --green-2:#1BAA30; --lime:#B7F23B; --lime-hi:#C5FF59;
  --mint:#EAF8ED; --gray:#E6E9EF; --bg:#F5F8F8; --white:#FFFFFF;
  --ink:var(--navy); --muted:#4B5D6B; --on-dark:#C3D4D1; --on-dark-soft:#9DB7B3;
  --line:#DCE4E6; --field-line:#7A8B97; --error:#B42318; --marker:#FFE58A; --marker-ink:#3D2E00;
  --cta:var(--lime); --cta-ink:var(--navy); --cta-hover:var(--lime-hi);
  --font-head:"Montserrat","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:24px; --r-field:12px; --r-pill:999px;
  --cut:30px; --cut-w:17px;                     /* corte de la A: 60 grados */
  --ease:cubic-bezier(.19,.82,.24,1);
  --ease-io:cubic-bezier(.72,0,.18,1);
  --ease-pop:cubic-bezier(.3,1.32,.55,1);
  --dur:.72s; --dist:24px; --t-hover:.18s;
  --gutter:clamp(20px,5vw,56px); --maxw:1200px; --section-y:clamp(72px,10vw,136px);
  --cab-h:68px;
}
@media (min-width:960px){:root{--cab-h:80px}}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-padding-top:calc(var(--cab-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--font-body);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);margin:0;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
p,ul,ol,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:12px;top:-80px;z-index:100;background:var(--lime);color:var(--navy);padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.saltar:focus{top:12px}
.envoltura{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}

.ceja{display:inline-flex;align-items:center;gap:.65em;font:700 .78rem/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.ceja::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(15,122,59,.16)}
.portada .ceja,.bloque--profundo .ceja,.cierre .ceja{color:var(--lime)}
.portada .ceja::before,.bloque--profundo .ceja::before{box-shadow:0 0 0 4px rgba(183,242,59,.18)}

.marcador{display:inline-block;background:var(--marker);color:var(--marker-ink);font:700 .8rem/1.35 var(--font-body);letter-spacing:.02em;padding:.35em .6em;border-radius:8px}

.resalte{color:var(--navy);background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 0/100% 100%;border-radius:.2em;padding:0 .12em;margin-left:-.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ===== Botones ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:0 22px 0 18px;border-radius:var(--r-pill);border:2px solid transparent;font:700 1rem/1.15 var(--font-head);letter-spacing:-.005em;text-decoration:none;text-align:center;cursor:pointer;
  transition:background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),scale .15s var(--ease)}
.btn svg{width:22px;height:22px;flex:none}
.btn__flecha{width:18px!important;height:18px!important;transition:translate var(--t-hover) var(--ease)}
.btn--wa{background:var(--cta);color:var(--cta-ink)}
.btn--linea{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn--chico{min-height:48px;font-size:.95rem;padding:0 18px 0 14px;white-space:nowrap}
.btn--chico svg{width:20px;height:20px}
.btn--ancho{width:100%}
.btn:active{scale:.97}
@media (hover:hover){
  .btn--wa:hover{background:var(--cta-hover)}
  .btn:hover .btn__flecha{translate:4px 0}
  .btn--linea:hover{background:var(--navy);color:#fff}
}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.portada .btn:focus-visible,.cierre .btn:focus-visible,.bloque--profundo .btn:focus-visible,.menu .btn:focus-visible{outline-color:#fff}
.btn__anillo{position:absolute;inset:-6px;border-radius:inherit;border:2px solid var(--lime);opacity:0;pointer-events:none}
.enlace-flecha{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--green);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.enlace-flecha svg{width:18px;height:18px}

/* ===== Cabecera ===== */
.cabecera{position:fixed;inset:0 0 auto;z-index:40;color:#fff;transition:transform .45s var(--ease-io),background-color .3s linear,box-shadow .3s linear}
.cabecera.es-solida{background:rgba(5,47,54,.97);box-shadow:0 12px 30px -20px rgba(0,0,0,.6)}
.cabecera.se-oculta{transform:translateY(-105%)}
.menu-abierto .cabecera{transform:none;background:var(--deep)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--cab-h)}
.marca{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none}
.logo{height:30px;width:auto;overflow:hidden}
.pieza{transform-box:fill-box;transform-origin:50% 100%}
.logo-a{fill:#fff}.logo-x{fill:var(--green)}.letra{fill:#fff;transform-box:fill-box;transform-origin:50% 100%}
.nav{display:none}
.cabecera__movil{display:flex;align-items:center;gap:8px}
.icono-wa{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--lime);color:var(--navy)}
.icono-wa svg{width:24px;height:24px}
.menu-boton{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;cursor:pointer}
.menu-boton__lineas,.menu-boton__lineas::before,.menu-boton__lineas::after{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease-io),opacity .2s}
.menu-boton__lineas{position:relative}
.menu-boton__lineas::before,.menu-boton__lineas::after{content:"";position:absolute;left:0}
.menu-boton__lineas::before{top:-6px}.menu-boton__lineas::after{top:6px}
.menu-boton[aria-expanded="true"] .menu-boton__lineas{background:transparent}
.menu-boton[aria-expanded="true"] .menu-boton__lineas::before{transform:translateY(6px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .menu-boton__lineas::after{transform:translateY(-6px) rotate(-45deg)}
.no-js .menu-boton{display:none}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:26px;font:600 .94rem/1 var(--font-body)}
  .nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--on-dark);transition:color var(--t-hover) var(--ease)}
  .nav a:not(.btn):hover,.nav a[aria-current="true"]{color:#fff}
  .cabecera__movil{display:none}
}

.menu{position:fixed;inset:0;z-index:39;background:var(--deep);color:#fff;padding:calc(var(--cab-h) + 24px) var(--gutter) 32px;display:grid;align-content:start;gap:28px;overflow-y:auto}
.menu[hidden]{display:none}
.menu nav{display:grid}
.menu nav a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid rgba(255,255,255,.12);font:800 1.6rem/1.1 var(--font-head);letter-spacing:-.02em;text-decoration:none}
.menu__nota{color:var(--on-dark-soft);font-size:.92rem}
.menu.se-abre{animation:menu-entra .4s var(--ease) both}
.menu.se-abre nav a{animation:menu-item .5s var(--ease) both}
.menu.se-abre nav a:nth-child(2){animation-delay:.04s}.menu.se-abre nav a:nth-child(3){animation-delay:.08s}
.menu.se-abre nav a:nth-child(4){animation-delay:.12s}.menu.se-abre nav a:nth-child(5){animation-delay:.16s}.menu.se-abre nav a:nth-child(6){animation-delay:.2s}
@keyframes menu-entra{from{opacity:0}to{opacity:1}}
@keyframes menu-item{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (min-width:1024px){.menu{display:none!important}}

/* ===== Portada ===== */
.portada{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:#fff;
  padding-top:calc(var(--cab-h) + clamp(8px,2.4vw,36px));padding-bottom:clamp(44px,8vw,104px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--corte-p,56px)),calc(100% - var(--corte-p,56px)*.577) 100%,0 100%)}
.portada::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:-30%;width:62%;
  background:linear-gradient(180deg,#0B1F44 0%,#073A3E 60%,#00553D 120%);transform:skewX(-30deg);transform-origin:100% 100%}
.portada::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:calc(32% - 2px);width:3px;
  background:linear-gradient(180deg,rgba(183,242,59,0),rgba(183,242,59,.5) 55%,rgba(183,242,59,0));transform:skewX(-30deg);transform-origin:100% 100%}
@media (max-width:959px){.portada::before{right:-58%;width:110%;top:46%}.portada::after{display:none}}
.portada__grid{position:relative;z-index:2;display:grid;gap:30px}
@media (min-width:960px){.portada__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:56px;min-height:min(640px,calc(100svh - var(--cab-h) - 120px))}}
.portada__texto{display:grid;gap:18px;align-content:start;position:relative;z-index:3}
.titular{font-weight:800;font-size:clamp(2.3rem,1.2rem + 5vw,3.6rem);line-height:1.04;letter-spacing:-.03em;color:#fff;max-width:13ch}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .03em .16em;margin:-.04em -.03em -.16em}
.w > span{display:inline-block}
.bajada{font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);line-height:1.55;color:var(--on-dark);max-width:34ch}
.nota{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--on-dark-soft);text-wrap:pretty}
.nota::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(183,242,59,.16)}
.portada__accion{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:2px}

.nivel{position:relative;width:100%;max-width:600px;aspect-ratio:560/470;justify-self:center}
.nivel > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mod{stroke:var(--deep);stroke-width:4;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 100%}
.mod--1{fill:#0B1F44;stroke:rgba(183,242,59,.45);stroke-width:2}
.mod--2{fill:var(--green)}.mod--3{fill:var(--green-2)}.mod--4{fill:var(--lime)}
.piso{stroke:rgba(255,255,255,.14);stroke-width:2}
.hilo{fill:none;stroke:var(--lime);stroke-width:3.5;stroke-linecap:round}
.guia{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.nodo{transform-box:fill-box;transform-origin:50% 50%}
.nodo__halo{fill:rgba(183,242,59,.18)}
.nodo__nucleo{fill:var(--deep);stroke:var(--lime);stroke-width:4}
.nodo--meta .nodo__nucleo{fill:var(--lime);stroke:var(--deep)}
.chip{position:absolute;z-index:2;display:inline-flex;align-items:center;padding:8px 13px;border-radius:var(--r-pill);font:600 .82rem/1.15 var(--font-body);white-space:nowrap;transform-origin:50% 100%}
.chip--hoy{left:0;top:43%;background:rgba(5,47,54,.92);color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.chip--meta{left:81.6%;top:27.6%;translate:-50% calc(-100% - 20px);background:var(--lime);color:var(--navy);font-weight:700;box-shadow:0 0 0 4px var(--deep)}
.rama{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.rama__linea{fill:none;stroke:var(--lime);stroke-width:2.5;stroke-linecap:round}
.rama__nodo{fill:var(--lime);transform-box:fill-box;transform-origin:50% 50%}

/* Estado inicial de la firma: solo mientras arranca el JS. Si el JS no llega, a los 3.8 s todo aparece solo */
@keyframes ax-rescate{to{opacity:1}}
@keyframes ax-rescate-resalte{to{background-size:100% 100%}}
.firma [data-firma] [data-p]{opacity:0;animation:ax-rescate .35s 3.8s forwards}
.firma [data-portada] .resalte{background-size:0% 100%;animation:ax-rescate-resalte .35s 3.8s forwards}

/* ===== Secciones ===== */
.bloque{padding-block:var(--section-y)}
.bloque--blanco{background:#fff}
.bloque--menta{background:var(--mint)}
.bloque--profundo{background:var(--deep);color:#fff}
.encabezado{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,56px);max-width:720px;align-content:start}
.encabezado h2{font-weight:800;font-size:clamp(1.85rem,1.25rem + 2.6vw,3rem);color:var(--navy)}
.bloque--profundo .encabezado h2{color:#fff}
.encabezado p{color:var(--muted);font-size:1.06rem;max-width:56ch}
.bloque--profundo .encabezado p{color:var(--on-dark)}
.encabezado .btn{justify-self:start}
@media (min-width:1024px){.encabezado--pegado{position:sticky;top:calc(var(--cab-h) + 32px)}}
/* Títulos divididos por líneas: aire para colitas y acentos */
[data-split] [class*="-mask"]{padding:.06em .04em .16em;margin:-.06em -.04em -.16em}

/* --- Retos --- */
.problemas__grid{display:grid;gap:8px}
@media (min-width:1024px){.problemas__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}}
.retos{position:relative}
.retos__hilo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.retos__hilo path{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round}
.retos__lista{display:grid;gap:12px}
.reto{position:relative;padding-left:38px}
.reto__nodo{position:absolute;left:8px;top:26px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:4px solid var(--lime);box-shadow:0 0 0 6px rgba(183,242,59,.2);transition:background-color .35s var(--ease),scale .35s var(--ease-pop)}
.reto.esta-abierto .reto__nodo{background:var(--lime)}
.hilos-vivos .reto:not(.encendido) .reto__nodo{border-color:var(--gray);box-shadow:none;scale:.8}
.reto__titulo{font-size:inherit}
.reto__boton,.pregunta__boton{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding:16px 16px 16px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;text-align:left;cursor:pointer;
  font:800 clamp(1.05rem,.95rem + .5vw,1.28rem)/1.3 var(--font-head);letter-spacing:-.01em;color:var(--navy);transition:border-color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.reto__boton[aria-expanded="true"]{border-color:var(--navy);border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (hover:hover){.reto__boton:hover,.pregunta__boton:hover{border-color:var(--navy)}}
.mas{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--green);transition:rotate .35s var(--ease-io),background-color var(--t-hover)}
.mas svg{width:18px;height:18px}
[aria-expanded="true"] > .mas{rotate:45deg;background:var(--lime);color:var(--navy)}
.desplegable{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease-io)}
.desplegable.cerrado{grid-template-rows:0fr}
.sin-transicion .desplegable,.sin-transicion .mas{transition:none!important}
.desplegable__interior{min-height:0;overflow:hidden}
.reto .desplegable__interior > *:first-child{margin-top:0}
.reto .desplegable__interior{display:grid;gap:12px;align-content:start}
.reto .desplegable{background:#fff;border:1px solid var(--navy);border-top:0;border-radius:0 0 18px 18px}
.reto .desplegable.cerrado{border-color:transparent}
.reto .desplegable__interior{padding:0 16px}
.reto .desplegable:not(.cerrado) .desplegable__interior{padding:4px 16px 18px}
@media (min-width:760px){.reto .desplegable__interior{padding-inline:20px}.reto .desplegable:not(.cerrado) .desplegable__interior{padding:4px 20px 20px}}
.reto__solucion{font-size:.92rem;color:var(--muted)}
.reto__solucion strong{display:block;font:800 1.08rem/1.3 var(--font-head);color:var(--green)}
.reto .btn{justify-self:start}

/* --- El cambio --- */
.cambio__tabla{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.cambio__cabeza{display:grid;grid-template-columns:1fr 1fr;font:700 .78rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.cambio__cabeza span{padding:16px 18px}
.cambio__cabeza span:first-child{background:var(--gray);color:var(--navy)}
.cambio__cabeza span:last-child{background:var(--deep);color:var(--lime)}
.cambio__fila{position:relative;display:grid;grid-template-columns:1fr 1fr}
.cambio__fila + .cambio__fila{border-top:1px solid var(--line)}
.cambio__hoy,.cambio__luego{padding:18px;font-weight:600;line-height:1.35}
.cambio__hoy{background:var(--bg);color:var(--muted)}
.cambio__luego{background:var(--deep);color:#fff;font-family:var(--font-head);font-weight:700}
.cambio__fila + .cambio__fila .cambio__luego{border-top:1px solid rgba(255,255,255,.1)}
.cambio__puente{position:absolute;left:50%;top:50%;width:24px;height:24px;translate:-50% -50%;pointer-events:none}
.cambio__puente i{position:absolute;inset:0;border-radius:50%;background:var(--lime);border:4px solid var(--deep);box-shadow:0 0 0 3px rgba(183,242,59,.35)}
@media (min-width:760px){.cambio__hoy,.cambio__luego{padding:24px 32px;font-size:1.08rem}.cambio__cabeza span{padding:18px 32px}}
.para-quien{margin-top:28px;display:grid;gap:12px;justify-items:start}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px}
.etiquetas li{padding:10px 16px;border-radius:var(--r-pill);background:var(--mint);color:var(--green);font-weight:700;font-size:.92rem}

/* --- Soluciones: tarjetas que se apilan en escritorio --- */
.servicios{display:grid;gap:16px}
.servicio{position:relative;display:grid;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,40px);overflow:hidden;transform-origin:50% 0}
.servicio::after{content:"";position:absolute;top:0;right:0;width:calc(var(--cut-w)*2.4);height:calc(var(--cut)*2.4);background:var(--lime);clip-path:polygon(0 0,100% 0,100% 100%)}
.servicio:nth-child(3n+2)::after{background:var(--green)}
.servicio:nth-child(3n)::after{background:var(--navy)}
.servicio__lado{display:flex;align-items:center;justify-content:space-between;gap:14px}
.servicio__num{font:800 clamp(2.4rem,1.8rem + 2.5vw,4rem)/1 var(--font-head);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--green)}
.icono-tile{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--mint);color:var(--green)}
.icono-tile svg{width:32px;height:32px}
.servicio__cuerpo{display:grid;gap:14px}
.servicio h3{font:800 clamp(1.35rem,1.1rem + 1vw,1.85rem)/1.15 var(--font-head);color:var(--navy)}
.servicio__beneficio{color:var(--muted);font-size:1.05rem}
.puntos{display:grid;gap:10px}
.puntos li{position:relative;padding-left:26px;line-height:1.45}
.puntos li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--green)}
.servicio__pie{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:4px}
.medida{font-size:.88rem;color:var(--muted)}
@media (min-width:760px){
  .servicio{grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
  .servicio__lado{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px}
}
@media (min-width:1024px){
  .servicios{gap:28px}
  .servicio{position:sticky;top:calc(var(--cab-h) + 28px + var(--i) * 14px);min-height:340px;box-shadow:0 -18px 40px -32px rgba(11,31,68,.45)}
}

/* --- Cómo trabajamos --- */
.proceso{position:relative;overflow:hidden}
.pasos{position:relative}
.pasos__hilo{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pasos__hilo path{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round}
.pasos__lista{display:grid;gap:12px;counter-reset:paso}
.paso{position:relative;padding:20px 20px 22px 64px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);display:grid;gap:6px}
.paso__nodo{position:absolute;left:18px;top:24px;width:22px;height:22px;border-radius:50%;background:var(--deep);border:4px solid var(--lime);box-shadow:0 0 0 6px rgba(183,242,59,.16);transition:background-color .35s var(--ease),scale .35s var(--ease-pop)}
.paso.encendido .paso__nodo,.paso:last-child .paso__nodo{background:var(--lime)}
.hilos-vivos .paso:not(.encendido) .paso__nodo{background:var(--deep);border-color:rgba(255,255,255,.3);box-shadow:none;scale:.8}
.paso__nivel{display:none}
.paso__num{font:700 .8rem/1 var(--font-body);letter-spacing:.14em;color:var(--lime)}
.paso h3{font:800 1.35rem/1.2 var(--font-head);color:#fff}
.paso p:last-child{color:var(--on-dark)}
@media (min-width:960px){
  .pasos__lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end;padding-top:24px}
  .paso{padding:0;background:none;border:0;gap:8px}
  .paso__nivel{display:block;position:relative;height:calc(70px + var(--n) * 54px);margin-bottom:22px}
  .paso:nth-child(1){--n:0}.paso:nth-child(2){--n:1}.paso:nth-child(3){--n:2}.paso:nth-child(4){--n:3}
  .paso__nivel i{position:absolute;inset:0;transform-origin:50% 100%;border-radius:14px 0 14px 14px;clip-path:polygon(0 0,calc(100% - var(--cut-w)) 0,100% var(--cut),100% 100%,0 100%)}
  .paso:nth-child(1) .paso__nivel i{background:#0B1F44;box-shadow:inset 0 0 0 2px rgba(183,242,59,.45)}
  .paso:nth-child(2) .paso__nivel i{background:var(--green)}
  .paso:nth-child(3) .paso__nivel i{background:var(--green-2)}
  .paso:nth-child(4) .paso__nivel i{background:var(--lime)}
  .paso__nodo{left:calc(50% - 13px - var(--cut-w) / 2);top:-13px;width:26px;height:26px}
}
.proceso__nota{margin-top:24px;color:var(--on-dark-soft);font-size:.92rem}
.entregables{margin-top:clamp(48px,7vw,80px);display:grid;gap:20px}
.entregables h3{font:800 clamp(1.3rem,1.1rem + 1vw,1.75rem)/1.2 var(--font-head);color:#fff}
.entregables__lista{display:grid;gap:10px}
@media (min-width:640px){.entregables__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.entregables__lista{grid-template-columns:repeat(3,minmax(0,1fr))}}
.entregables__lista li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-weight:600}
.entregables__lista svg{flex:none;width:38px;height:38px;padding:7px;border-radius:12px;background:rgba(183,242,59,.14);color:var(--lime)}

/* --- Por qué AX Logistic: tres nodos que suben de nivel y la promesa --- */
.dif{position:relative}
.dif__hilo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dif__hilo path{fill:none;stroke:var(--green-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;transition:stroke-dashoffset 1.3s var(--ease-io)}
.dif__lista{display:grid;gap:8px}
.dif__item{position:relative;display:grid;gap:8px;padding:2px 0 28px 52px;justify-items:start}
.dif__nodo{position:absolute;left:6px;top:14px;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--green-2);box-shadow:0 0 0 7px rgba(27,170,48,.14);z-index:1;
  transition:background-color .35s var(--ease),scale .45s var(--ease-pop),box-shadow .45s var(--ease)}
.dif__item:last-child .dif__nodo{background:var(--lime);border-color:var(--green)}
.dif__item .icono-tile{margin-bottom:6px}
.dif__num{font:700 .8rem/1 var(--font-body);letter-spacing:.14em;color:var(--green)}
.dif__item h3{font:800 clamp(1.3rem,1.1rem + .9vw,1.7rem)/1.15 var(--font-head);color:var(--navy)}
.dif__item p:last-child{color:var(--muted);max-width:36ch}
@media (min-width:900px){
  .dif__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:start}
  .dif__item{padding:56px 0 0}
  .dif__item:nth-child(1){margin-top:72px}.dif__item:nth-child(2){margin-top:36px}
  .dif__nodo{left:0;top:0}
}
/* Animación sin librerías: el hilo se dibuja y cada nodo se enciende (solo si JavaScript lo preparó) */
.dif.espera .dif__hilo path{stroke-dashoffset:1}
.dif.espera .dif__nodo{scale:0;box-shadow:none}
.dif.espera .dif__item > :not(.dif__nodo){opacity:0;translate:0 18px}
.dif__item > :not(.dif__nodo){transition:opacity .6s var(--ease),translate .7s var(--ease)}
.dif__item:nth-child(2) > *{transition-delay:.4s}.dif__item:nth-child(3) > *{transition-delay:.8s}
.dif__item:nth-child(2) .dif__nodo{transition-delay:.45s}.dif__item:nth-child(3) .dif__nodo{transition-delay:.9s}

.promesa{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(40px,6vw,72px);display:grid;gap:18px;justify-items:start;padding:clamp(28px,5vw,60px);border-radius:var(--r-card);background:var(--navy);color:#fff;
  clip-path:polygon(0 0,calc(100% - 40px) 0,100% 69px,100% 100%,0 100%)}
.promesa::before{content:"";position:absolute;z-index:-1;inset:-20% -30% -20% 52%;background:linear-gradient(180deg,#0F7A3B,#052F36);transform:skewX(-30deg);opacity:.5}
.promesa__cinta{position:absolute;z-index:-1;width:min(520px,90%);right:-8%;bottom:-18%;opacity:.28}
.promesa .ceja{color:var(--lime)}
.promesa .ceja::before{box-shadow:0 0 0 4px rgba(183,242,59,.18)}
.promesa blockquote p{font:800 clamp(1.45rem,1.05rem + 1.9vw,2.5rem)/1.18 var(--font-head);letter-spacing:-.02em;max-width:24ch}
.promesa .btn{margin-top:6px}
@media (min-width:900px){.promesa__cinta{opacity:.9;width:44%;right:-2%;bottom:-6%}.promesa blockquote p{max-width:20ch}}

/* --- Nosotros --- */
.nosotros__grid{display:grid;gap:32px;align-items:start}
@media (min-width:900px){.nosotros__grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px}}
.fundador__foto{position:relative;aspect-ratio:4/5;width:100%;max-width:520px;border-radius:var(--r-card);background:var(--deep);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 45px,100% 100%,0 100%)}
@media (min-width:900px){.fundador__foto{position:sticky;top:calc(var(--cab-h) + 32px)}}
.fundador__foto picture,.fundador__foto img{display:block;width:100%;height:100%}
.fundador__foto img{object-fit:cover;object-position:50% 20%}
.nosotros__texto{display:grid;gap:20px}
.nosotros__texto h2{font-weight:800;font-size:clamp(1.85rem,1.25rem + 2.6vw,3rem);color:var(--navy)}
.nosotros__texto > p{color:var(--muted);font-size:1.06rem}
.fundador{display:grid;gap:10px;padding:22px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.fundador__nombre{font:800 1.5rem/1.15 var(--font-head);color:var(--navy)}
.fundador__rol{font:700 1rem/1.3 var(--font-head);color:var(--green);margin-bottom:4px}
.cita{border-left:4px solid var(--lime);padding:4px 0 4px 16px;font:600 1.1rem/1.5 var(--font-body);color:var(--navy)}
.aliados{font-size:.95rem;color:var(--muted)!important}
.testimonio{display:grid;gap:8px;padding:18px;border:1.5px dashed var(--field-line);border-radius:18px}
.testimonio figcaption{font-size:.88rem;color:var(--muted)}

/* --- Preguntas --- */
.preguntas__grid{display:grid;gap:8px}
@media (min-width:1024px){.preguntas__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}}
.acordeon{display:grid;gap:10px}
.pregunta__boton[aria-expanded="true"]{border-color:var(--navy);border-bottom-left-radius:0;border-bottom-right-radius:0}
.pregunta .desplegable{background:#fff;border:1px solid var(--navy);border-top:0;border-radius:0 0 18px 18px}
.pregunta .desplegable.cerrado{border-color:transparent}
.pregunta .desplegable__interior p{padding:0 20px 20px;color:var(--muted)}

/* ===== Contacto y formulario ===== */
.contacto__grid{display:grid;gap:8px}
@media (min-width:1024px){.contacto__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}}
.contacto__datos{display:grid;gap:8px}
.contacto__datos li{display:flex;align-items:center;gap:12px;font-weight:700}
.contacto__datos svg{width:24px;height:24px;color:var(--green)}
.contacto__datos a{display:inline-flex;align-items:center;min-height:44px}
.formulario{display:grid;gap:18px;background:#fff;border-radius:var(--r-card);padding:clamp(18px,3vw,36px);box-shadow:0 30px 60px -40px rgba(11,31,68,.45)}
.campo{display:grid;gap:8px}
.campo label{font:700 .95rem/1.3 var(--font-body);color:var(--navy)}
.opcional{font-weight:500;color:var(--muted)}
.campo input,.campo select,.campo textarea{width:100%;min-height:52px;padding:13px 16px;border:1.5px solid var(--field-line);border-radius:var(--r-field);background:#fff;color:var(--ink);font:400 1rem/1.4 var(--font-body);transition:border-color var(--t-hover),box-shadow var(--t-hover)}
.campo textarea{resize:vertical;min-height:120px}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230F7A3B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(15,122,59,.18)}
.campo [aria-invalid="true"]{border-color:var(--error)}
.formulario__error{color:var(--error);font-weight:600}
.formulario__nota{font-size:.86rem;color:var(--muted);text-align:center}

/* ===== Cierre y pie ===== */
.cierre{position:relative;overflow:hidden;background:var(--deep);color:#fff;padding-block:clamp(80px,11vw,140px) 28px}
.cierre::before{content:"";position:absolute;inset:auto -10% -40% auto;width:70%;height:120%;background:linear-gradient(180deg,#0B1F44,#00553D);transform:skewX(-30deg);opacity:.55;pointer-events:none}
.cierre__grid{position:relative;display:grid;gap:26px;justify-items:start}
.logo--pie{height:auto;width:min(420px,78vw)}
.cierre__frase{font:800 clamp(1.9rem,1.3rem + 2.8vw,3.4rem)/1.08 var(--font-head);letter-spacing:-.03em;max-width:15ch}
.pie{position:relative;margin-top:clamp(56px,8vw,96px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:12px;font-size:.92rem;color:var(--on-dark-soft)}
.pie a{color:var(--on-dark)}
.pie__nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.pie__nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-decoration:none;font-weight:600}
.pie__nav a:hover{color:#fff}
.pie__legal{font-size:.84rem}
.arriba{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none}
.arriba svg{width:18px;height:18px}

/* ===== Barra fija del celular ===== */
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(245,248,248,0),rgba(245,248,248,.92) 30%);
  transform:translateY(120%);transition:transform .45s var(--ease-io);pointer-events:none}
.barra-fija.visible{transform:none;pointer-events:auto}
@media (min-width:1024px){.barra-fija{display:none}}
.no-js .barra-fija{display:none}

/* ===== Movimiento propio (main.js 3.14): solo se prepara lo que está debajo de la pantalla al cargar ===== */
.revela{transition:opacity var(--dur) var(--ease) var(--d,0s),translate var(--dur) var(--ease) var(--d,0s)}
.espera-revelar{opacity:0;translate:0 var(--dist)}
.servicio .icono-tile{transition:scale .6s var(--ease-pop) calc(var(--d,0s) + .2s),rotate .6s var(--ease-pop) calc(var(--d,0s) + .2s)}
.servicio.espera-revelar .icono-tile{scale:.6;rotate:-12deg}
/* El cambio: cada fila se conecta y "tu siguiente nivel" se abre desde el nodo */
.cambio__puente i{transition:scale .42s var(--ease-pop) calc(var(--f,0) * .16s)}
.cambio__luego{clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease-io) calc(var(--f,0) * .16s + .12s)}
.cambio__fila:nth-child(2){--f:1}.cambio__fila:nth-child(3){--f:2}.cambio__fila:nth-child(4){--f:3}
[data-cambio].espera .cambio__puente i{scale:0}
[data-cambio].espera .cambio__luego{clip-path:inset(0 100% 0 0)}
/* Nosotros: la foto se abre con el corte de la A y el símbolo sube */
.fundador__foto{transition:clip-path 1s var(--ease-io)}
.fundador__foto img{transition:scale 1.4s var(--ease) .1s}
.fundador__foto.espera{clip-path:polygon(0 100%,100% 100%,100% 100%,100% 100%,0 100%)}
.fundador__foto.espera img{scale:1.08}
.paso__nivel i{will-change:transform}

/* ===== Avance y recorrido: el hilo AX te dice dónde estás ===== */
.cabecera__avance{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;opacity:0;transition:opacity .3s linear;pointer-events:none}
.cabecera.es-solida .cabecera__avance{opacity:1}
.cabecera__avance i{position:absolute;inset:0;background:linear-gradient(90deg,var(--green-2),var(--lime));transform-origin:0 50%;transform:scaleX(var(--avance,0))}
.recorrido{display:none}
@media (min-width:1360px) and (hover:hover){
  .js .recorrido{position:fixed;z-index:35;left:22px;top:50%;display:grid;gap:4px;padding:10px 6px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 10px 30px -18px rgba(11,31,68,.5),inset 0 0 0 1px rgba(11,31,68,.08);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);translate:-140% -50%;opacity:0;transition:translate .6s var(--ease),opacity .4s linear}
  .js .recorrido.visible{translate:0 -50%;opacity:1}
  .recorrido__riel{position:absolute;left:calc(50% - 1px);top:24px;bottom:24px;width:2px;background:var(--gray);border-radius:2px}
  .recorrido__riel i{position:absolute;inset:0;background:linear-gradient(180deg,var(--green-2),var(--lime));transform-origin:50% 0;transform:scaleY(var(--avance,0));border-radius:2px}
  .recorrido a{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;text-decoration:none}
  .recorrido a::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #9DB0BC;transition:background-color .3s var(--ease),border-color .3s var(--ease),scale .4s var(--ease-pop)}
  .recorrido a.pasado::before{background:var(--green-2);border-color:var(--green-2)}
  .recorrido a[aria-current="true"]::before{background:var(--lime);border-color:var(--green);scale:1.45}
  .recorrido a span{position:absolute;left:calc(100% + 12px);top:50%;translate:-6px -50%;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--navy);color:#fff;font:600 .82rem/1 var(--font-body);opacity:0;pointer-events:none;transition:opacity .2s linear,translate .3s var(--ease)}
  .recorrido a:hover span,.recorrido a:focus-visible span{opacity:1;translate:0 -50%}
  .recorrido a:focus-visible{outline:3px solid var(--green);outline-offset:1px}
}

/* ===== Transiciones entre secciones: las secciones profundas entran con el corte de la A ===== */
/* Cada sección profunda lleva dos cortes de la A (arriba a la derecha y abajo a la izquierda), pintados con el color
   de la sección vecina. Con el scroll el corte se cierra de 220 px a 64 px (main.js 3.14) */
.bloque--profundo{--corte:64px;position:relative}
.bloque--profundo::before,.bloque--profundo::after,.cierre::after{content:"";position:absolute;z-index:2;pointer-events:none;width:calc(var(--corte) * .577);height:var(--corte)}
.bloque--profundo::before,.cierre::after{top:-1px;right:-1px;background:var(--antes,#fff);clip-path:polygon(0 0,100% 0,100% 100%)}
.bloque--profundo::after{bottom:-1px;left:-1px;background:var(--despues,#fff);clip-path:polygon(0 0,0 100%,100% 100%)}
.proceso{--antes:#fff;--despues:#fff}
.cierre{--corte:64px;--antes:var(--mint)}

/* ===== Modo diagnóstico (index.html#diagnostico): estado real de fuentes y librerías ===== */
.diagnostico{position:fixed;z-index:80;left:12px;bottom:12px;width:min(360px,calc(100vw - 24px));max-height:70vh;overflow:auto;padding:14px 16px;border-radius:14px;background:#0B1F44;color:#fff;box-shadow:0 20px 50px -20px rgba(0,0,0,.7);font:500 .8rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.diagnostico h2{font:700 .9rem/1.2 var(--font-body);margin-bottom:8px}
.diagnostico dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.diagnostico dt{color:#C3D4D1}
.diagnostico .si{color:#B7F23B}.diagnostico .no{color:#FFB4A8}
.diagnostico button{margin-top:10px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font:600 .8rem/1 var(--font-body);cursor:pointer}

/* ===== Lenis 1.3.11 ===== */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ===== Menos movimiento: todo quieto y visible ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}