/* Enaitech 2.0 · estilos compartidos
   Solo lo que piden el brief y los archivos de contenido (v2/*.md). Referencias Gxx = lineamientos del brief. */

:root{
  --void:#0B1220;
  --void-deep:#0E1524;
  --paper:#F4F6FB;
  --surface:#FFFFFF;
  --ink:#1C2430;
  --ink-2:#5B6472;
  --line:#DFE3EA;
  --orbit:#2F6FED;
  --sky:#8DB4FF;
  --deep:#1F56D6;
  --hero-bar:#4c86ff;   /* barra de las frases del hero actual (G20) */
  --wa:#25D366;
  --wa-ink:#062812;
  --on-void:rgba(255,255,255,.92);
  --on-void-2:rgba(255,255,255,.7);
  --line-void:rgba(255,255,255,.12);
  --font-display:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(22px,3.2vw,48px);
  --header-h:76px;
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box;}
html,body{margin:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);}
body.menu-open{overflow:hidden;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance;}
p,ul,ol{margin:0;}
button{font:inherit;color:inherit;}
img,svg{display:block;}
:focus-visible{outline:2px solid var(--orbit);outline-offset:3px;}
section[id],form[id]{scroll-margin-top:calc(var(--header-h) + 16px);}
.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;left:16px;top:-60px;z-index:100;background:var(--surface);color:var(--ink);padding:12px 18px;font-weight:600;border-radius:4px;}
.skip-link:focus{top:12px;}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter);}
/* G33: cuerpo de 16 px o más en celular */
@media (max-width:767px){ body{font-size:16px;} }

/* ---------- Header (0 · Global) ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);color:#fff;background:var(--void);transition:background-color .3s ease;}
.js .site-header:not(.is-solid){background:transparent;}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.brand svg{width:32px;height:32px;flex-shrink:0;}
.site-nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px);}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;color:rgba(255,255,255,.78);white-space:nowrap;}
.nav-link[aria-current="page"]{color:#fff;}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--sky);}
.lang{display:inline-flex;align-items:center;font-size:14.5px;color:rgba(255,255,255,.45);}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:44px;color:rgba(255,255,255,.7);}
.lang a[aria-current="true"]{color:#fff;font-weight:600;}
.nav-cta{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 22px;border-radius:999px;background:var(--wa);color:var(--wa-ink);font-size:14.5px;font-weight:600;white-space:nowrap;}
.nav-cta svg{width:18px;height:18px;}
@media (hover:hover){
  .nav-link:hover,.lang a:hover{color:#fff;}
  .nav-cta:hover{background:#4BE083;}
}
@media (min-width:1024px){ .site-nav{margin-left:32px;} }
@media (min-width:1024px) and (max-width:1199px){
  .site-nav{gap:14px;}
  .nav-link,.lang{font-size:13.5px;}
  .nav-cta{padding:0 16px;font-size:13.5px;}
}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px;position:relative;z-index:52;}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .25s ease,opacity .25s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-overlay{position:fixed;inset:0;z-index:48;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s;}
.nav-overlay.open{opacity:1;visibility:visible;}
/* Tablet y celular: logo + hamburguesa (tres ejes, Nosotros, ES/EN); WhatsApp flotante */
@media (max-width:1023px){
  .nav-toggle{display:block;}
  .site-nav{position:fixed;top:0;right:0;z-index:51;height:100vh;height:100dvh;width:min(84vw,340px);flex-direction:column;align-items:stretch;gap:4px;padding:96px 28px 32px;
    background:var(--void);box-shadow:-10px 0 40px rgba(0,0,0,.35);transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease-out), visibility .3s;}
  .site-nav.open{transform:none;visibility:visible;}
  .site-nav .nav-link{font-size:18px;min-height:48px;border-bottom:1px solid var(--line-void);}
  .site-nav .nav-link::after{display:none;}
  .site-nav .nav-home,.site-nav .nav-cta{display:none;}
  .site-nav .lang{margin-top:12px;font-size:17px;}
}

/* ---------- 1.1 · Hero del Inicio: se conserva el actual (logo orbital, ENAITECH y las tres frases, G20) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 50% 40%, #131C2E 0%, #10182A 55%, var(--void) 100%);padding:calc(var(--header-h) + 24px) var(--gutter) 72px;}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,#000 100%);}
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;}
/* Escritorio: ENAITECH arriba, logo a la izquierda, frases + statement a la derecha */
.hero-inner{position:relative;z-index:2;width:min(1760px,100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"word word" "logo copy";column-gap:clamp(40px,6vw,120px);align-items:center;}
.hero-word{grid-area:word;justify-self:center;margin-bottom:clamp(4px,2vh,24px);font-size:clamp(3.4rem,7.4vw,8rem);font-weight:700;line-height:.95;letter-spacing:.04em;text-transform:uppercase;
  animation:word-drop 2.2s ease-out .15s both;}
@keyframes word-drop{from{opacity:0;transform:scale(1.15);}to{opacity:1;transform:none;}}
.hero-logo{grid-area:logo;justify-self:end;width:min(58vh,36vw,680px);aspect-ratio:1;}
.hero-logo svg{width:100%;height:100%;}
.hero-copy{grid-area:copy;max-width:560px;}
.hero-line{margin:0 0 26px;padding-left:20px;border-left:4px solid var(--hero-bar);font-family:var(--font-display);font-size:clamp(26px,1.5vw,38px);font-weight:600;line-height:1.25;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.92);}
.hero-statement{margin-top:34px;font-size:clamp(17px,.95vw,23px);line-height:1.7;color:var(--on-void-2);max-width:480px;}
/* Celular: ENAITECH → logo reducido → frases apiladas (una línea cada una) → statement */
@media (max-width:1023px){
  .hero{align-items:flex-start;padding-top:calc(var(--header-h) + 20px);padding-bottom:56px;}
  .hero::after{display:none;}
  .hero-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"word" "logo" "copy";justify-items:center;}
  .hero-word{font-size:clamp(3rem,14vw,6rem);margin-bottom:8px;}
  .hero-logo{justify-self:center;width:min(58vw,340px,42vh);margin-bottom:28px;}
  .hero-copy{width:100%;max-width:440px;}
  .hero-line{font-size:clamp(16px,4.6vw,20px);margin-bottom:10px;padding-left:16px;white-space:nowrap;}
  .hero-statement{margin-top:22px;font-size:16px;line-height:1.65;}
}

/* ---------- 1.2 · Tres rutas (G31) ---------- */
.routes{padding:clamp(72px,10vw,128px) 0;}
.routes-grid{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.route{position:relative;isolation:isolate;flex:1 1 0;min-width:0;padding:44px 36px 40px;border-left:1px solid var(--line);}
.route:last-child{border-right:1px solid var(--line);}
/* "Se agranda" al pasar el mouse */
.route::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--surface);box-shadow:0 28px 56px -28px rgba(28,36,48,.32);opacity:0;transform:scale(.98);transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);}
.route-icon{width:60px;height:60px;margin-bottom:28px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.route-icon svg{width:28px;height:28px;stroke:var(--deep);stroke-width:1.6;fill:none;stroke-linejoin:round;stroke-linecap:round;}
.route-name{font-size:22px;line-height:1.25;margin-bottom:12px;}
.route-main{color:var(--ink);}
.route-short{font-size:17px;line-height:1.55;max-width:34ch;}
.route-desc{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .22s var(--ease-out), opacity .15s ease, visibility .22s;}
.route-desc-inner{overflow:hidden;}
.route-desc p{padding-top:18px;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:42ch;}
.route-link{position:relative;z-index:3;display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:15.5px;font-weight:600;color:var(--deep);text-decoration:underline;}
.route.is-open::after{opacity:1;transform:none;}
.route.is-open .route-desc{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .3s var(--ease-out), opacity .25s ease, visibility 0s;}
/* Táctil: la tarjeta se despliega al tocarla, con "Conoce la ruta" explícito; solo una abierta */
.route-toggle{position:absolute;inset:0;z-index:2;width:100%;background:none;border:0;cursor:pointer;}
.route-toggle::after{content:"";position:absolute;right:28px;top:52px;width:14px;height:14px;
  background:linear-gradient(var(--deep),var(--deep)) center/14px 2px no-repeat, linear-gradient(var(--deep),var(--deep)) center/2px 14px no-repeat;transition:transform .25s var(--ease-out);}
.route.is-open .route-toggle::after{transform:rotate(135deg);}
.route-toggle:focus-visible{outline-offset:-3px;}
/* Pista visual en reposo (escritorio con mouse): sin ella nada indica que la tarjeta reacciona al pasar el cursor */
.route-hint{display:none;}
/* Escritorio con mouse: hover = se agranda y muestra el descriptor; clic = página del eje */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .route-toggle{display:none;}
  .route-main::after{content:"";position:absolute;inset:0;z-index:1;}
  .route-main:focus-visible{outline:none;}
  .route:has(.route-main:focus-visible){outline:2px solid var(--orbit);outline-offset:-2px;}
  .route:hover::after,.route:focus-within::after{opacity:1;transform:scale(1.03);}
  .route:hover .route-desc,.route:focus-within .route-desc{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .3s var(--ease-out), opacity .25s ease, visibility 0s;}
  .route-hint{position:absolute;right:36px;top:44px;z-index:1;display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:50%;border:1px solid var(--line);pointer-events:none;
    transition:transform .3s var(--ease-out), background-color .25s ease, border-color .25s ease;}
  .route-hint::before{content:"";width:12px;height:12px;
    background:linear-gradient(var(--deep),var(--deep)) center/12px 2px no-repeat, linear-gradient(var(--deep),var(--deep)) center/2px 12px no-repeat;
    transition:transform .3s var(--ease-out), background .2s ease;}
  .route:hover .route-hint,.route:focus-within .route-hint{background:var(--deep);border-color:var(--deep);transform:scale(1.08);}
  .route:hover .route-hint::before,.route:focus-within .route-hint::before{transform:rotate(135deg);
    background:linear-gradient(#fff,#fff) center/12px 2px no-repeat, linear-gradient(#fff,#fff) center/2px 12px no-repeat;}
}
@media (max-width:1023px){
  .routes-grid{flex-direction:column;border-bottom:0;}
  .route{border-left:0;border-right:0 !important;border-bottom:1px solid var(--line);padding:32px 64px 32px 4px;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;}
  .route::after{left:-12px;right:-12px;}
  .route-icon{width:52px;height:52px;margin:0;grid-row:1 / span 3;}
  .route-icon svg{width:24px;height:24px;}
  .route-name{font-size:20px;margin-bottom:6px;}
  .route-short,.route-desc{grid-column:2;}
  .route-toggle::after{right:14px;top:44px;}
}

/* ---------- 1.3 · Villano + guía (G32): dos columnas en espejo, 4 bullets alineados fila por fila ---------- */
.standoff{--pad:clamp(32px,5vw,80px);background:linear-gradient(90deg,var(--void) 50%,var(--paper) 50%);}
.standoff-grid{display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:0 auto;padding:0 var(--gutter);}
.side{grid-row:1 / span 7;display:grid;grid-template-rows:subgrid;padding:clamp(88px,10vw,128px) 0;}
.villain{padding-right:var(--pad);color:var(--on-void);background:var(--void);}
.guide{padding-left:var(--pad);color:var(--ink);}
.side h2{font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.18;padding-bottom:20px;max-width:18ch;}
.villain h2{color:#fff;}
.side-lede{padding-bottom:32px;font-size:17px;line-height:1.65;max-width:44ch;}
.villain .side-lede{color:var(--on-void-2);}
.guide .side-lede{color:var(--ink-2);}
.rows{grid-row:span 4;display:grid;grid-template-rows:subgrid;list-style:none;padding:0;}
.rows li{position:relative;padding:16px 0 16px 22px;font-size:17px;line-height:1.55;border-top:1px solid var(--line);}
.rows li:last-child{border-bottom:1px solid var(--line);}
.villain .rows li{border-color:var(--line-void);color:rgba(255,255,255,.86);}
.rows li::before{content:"";position:absolute;left:0;top:27px;width:6px;height:6px;border-radius:50%;background:var(--deep);}
.villain .rows li::before{background:var(--sky);}
/* La frase de cierre del villano va destacada */
.standoff-close{margin-top:36px;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;line-height:1.35;color:#fff;max-width:24ch;align-self:start;}
@media (max-width:1023px){
  .side h2{font-size:1.45rem;}
  .side-lede,.rows li{font-size:16px;}
}
/* Celular: villano arriba, guía debajo */
@media (max-width:767px){
  .standoff{background:none;}
  .standoff-grid{display:block;padding:0;}
  .side{display:block;padding:64px 22px;}
  .guide{background:var(--paper);}
  .rows{display:block;}
  .side-lede{padding-bottom:26px;}
}

/* ---------- Aliados: "Construimos con" (G12–G19, G44) ---------- */
.allies{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.allies-inner{display:flex;align-items:center;gap:48px;}
.allies-label{flex-shrink:0;font-size:15px;color:var(--ink-2);}
.allies-grid{flex:1;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1px;background:var(--line);border-left:1px solid var(--line);list-style:none;padding:0;}
.ally{display:flex;align-items:center;justify-content:center;height:104px;padding:0 12px;background:var(--surface);font-family:var(--font-display);font-size:18px;font-weight:600;color:#5B6472;text-align:center;}
.ally img{height:28px;width:auto;filter:grayscale(1);opacity:.75;}
/* Celular: cuadrícula de 2 × 2, nunca carrusel */
@media (max-width:767px){
  .allies-inner{flex-direction:column;align-items:stretch;gap:0;padding:0;}
  .allies-label{padding:26px 22px 16px;text-align:center;}
  .allies-grid{grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;border-top:1px solid var(--line);}
  .ally{height:88px;font-size:17px;}
  .ally:nth-child(odd):last-child{grid-column:1 / -1;}
}

/* ---------- Preguntas frecuentes (sección 10): acordeón, respuesta dentro del HTML (G45) ---------- */
.faq{padding:clamp(80px,10vw,128px) 0;}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(32px,6vw,96px);align-items:start;}
.faq h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;}
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:24px 4px;cursor:pointer;font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.35;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-mark{position:relative;flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:50%;top:50%;background:var(--deep);transform:translate(-50%,-50%);}
.faq-mark::before{width:12px;height:2px;}
.faq-mark::after{width:2px;height:12px;transition:transform .22s var(--ease-out);}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .28s var(--ease-out), content-visibility .28s allow-discrete;}
.faq-item[open]::details-content{block-size:auto;}
.faq-a{padding:0 48px 26px 4px;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:64ch;}
@media (hover:hover){ .faq-item summary:hover{color:var(--deep);} }
@media (max-width:767px){
  .faq-layout{grid-template-columns:1fr;}
  .faq-item summary{font-size:17px;padding:20px 2px;}
  .faq-a{font-size:16px;padding-right:8px;}
}

/* ---------- CTA estándar (G22, G27) ---------- */
.cta{padding:clamp(88px,11vw,136px) 0;background:var(--void);color:#fff;}
/* Escritorio: botones lado a lado + formulario al costado */
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,7vw,112px);align-items:center;}
.cta h2{font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.1;max-width:15ch;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s ease, border-color .2s ease;}
.btn svg{width:20px;height:20px;}
.btn-wa{background:var(--wa);color:var(--wa-ink);border:1px solid var(--wa);}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);}
.btn-send{background:var(--ink);color:#fff;border:1px solid var(--ink);}
.btn-send:disabled{opacity:.6;cursor:wait;}
@media (hover:hover){
  .btn-wa:hover{background:#4BE083;border-color:#4BE083;}
  .btn-ghost:hover{border-color:#fff;}
  .btn-send:hover{background:var(--deep);border-color:var(--deep);}
}
/* Formulario simple: Nombre, Email, Mensaje (G27) */
.cta-form{background:var(--paper);color:var(--ink);padding:clamp(28px,3.4vw,44px);border-radius:6px;}
.cta-form.is-surface{background:var(--surface);border:1px solid var(--line);}
.field{margin-bottom:22px;}
.field label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--ink-2);}
.field input,.field textarea{width:100%;padding:12px 0;border:0;border-bottom:1px solid #C7CBD3;border-radius:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);}
.field textarea{resize:vertical;min-height:112px;}
.field input:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--deep);padding-bottom:11px;}
.field-error{display:none;margin-top:6px;font-size:14px;line-height:1.4;color:#B3261E;}
.field.invalid input,.field.invalid textarea{border-bottom-color:#B3261E;}
.field.invalid .field-error{display:block;}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-foot{margin-top:6px;}
.form-status{display:none;margin-bottom:18px;font-size:15px;font-weight:600;}
.form-status.ok{color:var(--deep);}
.form-status.err{color:#B3261E;}
.form-status.show{display:block;}
/* Celular: WhatsApp a ancho completo → mensaje → campos apilados */
@media (max-width:1023px){ .cta-grid{grid-template-columns:1fr;} }
@media (max-width:767px){
  .cta-actions{flex-direction:column;}
  .cta-actions .btn{width:100%;}
  .cta-form{padding:26px 20px;}
}

/* ---------- Footer (0 · Global): escritorio en columnas; celular apilado con © y entidades al final ---------- */
.site-footer{background:var(--void-deep);color:rgba(255,255,255,.78);padding:64px 0 32px;}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px 40px;padding-bottom:40px;border-bottom:1px solid var(--line-void);}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;}
.footer-col a,.footer-col p{display:flex;align-items:center;min-height:36px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.8);}
.footer-col .footer-label{color:rgba(255,255,255,.55);}
@media (hover:hover){ .footer-col a:hover{color:#fff;} }
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:26px;font-size:14px;color:rgba(255,255,255,.55);}
@media (max-width:767px){
  .footer-cols{grid-template-columns:1fr;gap:20px;}
  .footer-col a,.footer-col p{min-height:44px;font-size:16px;}
  .footer-bottom{flex-direction:column;}
}

/* ---------- WhatsApp flotante en tablet y celular (G22, G33) ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;width:58px;height:58px;border-radius:50%;background:var(--wa);color:var(--wa-ink);display:none;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.3);}
.wa-float svg{width:28px;height:28px;}
@media (max-width:1023px){ .wa-float{display:flex;} }

/* =====================================================================
   Páginas interiores
   ===================================================================== */

/* Encabezado igual que el hero de las páginas interiores actuales (contenido ES §2) */
.page-hero{background:radial-gradient(circle at 50% 20%, #131C2E 0%, #10182A 55%, #0E1524 100%);background-color:var(--void);color:#fff;text-align:center;
  padding:calc(var(--header-h) + clamp(72px,8vw,104px)) 0 clamp(72px,8vw,100px);}
.page-kicker{margin-bottom:18px;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);}
.page-hero h1{margin:0 auto;max-width:24ch;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.02em;}
.page-lead{margin:24px auto 0;max-width:60ch;font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--on-void-2);}
@media (max-width:767px){
  .page-hero{padding-top:calc(var(--header-h) + 48px);padding-bottom:60px;}
  .page-lead{font-size:16.5px;}
}

.section{padding:clamp(72px,9vw,112px) 0;}
.section + .section{padding-top:clamp(24px,4vw,48px);}
.section + .section > .wrap::before{content:"";display:block;height:1px;margin-bottom:clamp(40px,5vw,64px);background:var(--line);}
.section-title{margin-bottom:clamp(28px,4vw,44px);font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.12;}
.section-intro{max-width:62ch;margin-bottom:clamp(36px,5vw,56px);font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--ink-2);}
.bullets{list-style:none;padding:0;max-width:760px;}
.bullets li{position:relative;padding:14px 0 14px 22px;font-size:17px;line-height:1.55;border-bottom:1px solid var(--line);}
.bullets li:first-child{border-top:1px solid var(--line);}
.bullets li::before{content:"";position:absolute;left:0;top:25px;width:6px;height:6px;border-radius:50%;background:var(--deep);}
.prose{max-width:68ch;}
.prose p{font-size:clamp(17px,1.4vw,18.5px);line-height:1.7;}
.prose p + p{margin-top:20px;}
@media (max-width:767px){ .bullets li{font-size:16px;} }

/* El dolor: lista + cierre */
.pain-close{max-width:760px;margin-top:28px;font-size:clamp(17px,1.5vw,19px);line-height:1.65;}

/* El ciclo de 4 etapas (G41): diagrama, nunca lista. Escritorio circular; tablet 2 × 2; celular 2 × 2 que se despliega al tocar */
.cycle-map{display:grid;gap:22px;}
.cycle-stages{display:contents;list-style:none;padding:0;margin:0;}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px 28px 28px;}
.stage-title{font-size:20px;line-height:1.25;}
.stage-btn{display:flex;align-items:center;gap:14px;width:100%;padding:0;margin:0;background:none;border:0;text-align:left;font:inherit;color:inherit;letter-spacing:inherit;cursor:default;}
.stage-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--orbit);font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--deep);}
.stage-desc{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--ink-2);}
.cycle-ring,.cycle-arrow{display:none;}
.cycle-note{margin-top:36px;text-align:center;font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:600;}
.ring-track{fill:none;stroke:#C9D0DC;stroke-width:1.5;}
.ring-arrow{fill:none;stroke:var(--orbit);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.ring-node circle{fill:var(--surface);stroke:var(--orbit);stroke-width:2;}
.ring-node text{font-family:var(--font-display);font-size:17px;font-weight:600;fill:var(--deep);}
@media (min-width:1024px){
  .cycle-map{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:". s1 ." "s4 ring s2" ". s3 .";gap:28px 36px;align-items:center;}
  .stage:nth-child(1){grid-area:s1;align-self:end;}
  .stage:nth-child(2){grid-area:s2;}
  .stage:nth-child(3){grid-area:s3;align-self:start;}
  .stage:nth-child(4){grid-area:s4;}
  .cycle-ring{display:block;grid-area:ring;width:100%;max-width:340px;justify-self:center;aspect-ratio:1;}
  .cycle-ring svg{width:100%;height:100%;overflow:visible;}
}
@media (min-width:768px) and (max-width:1023px){
  .cycle-map{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);grid-template-areas:"s1 a1 s2" "a4 . a2" "s4 a3 s3";gap:10px;}
  .stage:nth-child(1){grid-area:s1;} .stage:nth-child(2){grid-area:s2;} .stage:nth-child(3){grid-area:s3;} .stage:nth-child(4){grid-area:s4;}
}
@media (max-width:1023px){
  .cycle-arrow{display:block;position:relative;align-self:center;justify-self:center;width:22px;height:22px;}
  .cycle-arrow::before{content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;border-top:2.2px solid var(--orbit);border-right:2.2px solid var(--orbit);}
  .cycle-arrow.a1{grid-area:a1;} .cycle-arrow.a1::before{transform:translateX(-3px) rotate(45deg);}
  .cycle-arrow.a2{grid-area:a2;} .cycle-arrow.a2::before{transform:translateY(-3px) rotate(135deg);}
  .cycle-arrow.a3{grid-area:a3;} .cycle-arrow.a3::before{transform:translateX(3px) rotate(-135deg);}
  .cycle-arrow.a4{grid-area:a4;} .cycle-arrow.a4::before{transform:translateY(3px) rotate(-45deg);}
}
@media (max-width:767px){
  .cycle-map{grid-template-columns:1fr;}
  .cycle-arrow{display:none;}
  .js .cycle-map{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);grid-template-areas:"s1 a1 s2" "a4 . a2" "s4 a3 s3" "panel panel panel";gap:6px;}
  .js .cycle-arrow{display:block;}
  .js .stage{display:contents;}
  .js .stage:nth-child(1) .stage-title{grid-area:s1;} .js .stage:nth-child(2) .stage-title{grid-area:s2;}
  .js .stage:nth-child(3) .stage-title{grid-area:s3;} .js .stage:nth-child(4) .stage-title{grid-area:s4;}
  .js .stage-title{display:flex;font-size:16px;}
  .js .stage-btn{flex-direction:column;align-items:flex-start;gap:10px;min-height:104px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:6px;cursor:pointer;}
  .js .stage.is-active .stage-btn{border-color:var(--orbit);}
  .js .stage.is-active .stage-num{background:var(--deep);border-color:var(--deep);color:#fff;}
  .js .stage-desc{grid-area:panel;display:none;margin-top:10px;padding:20px;background:var(--surface);border:1px solid var(--orbit);border-radius:6px;font-size:16px;}
  .js .stage.is-active .stage-desc{display:block;}
  .stage-num{width:34px;height:34px;font-size:15px;}
}

/* Data Infrastructure: "Tu infraestructura, business-ready" */
.ready{margin-top:clamp(48px,6vw,64px);}
.ready h3{margin-bottom:18px;font-size:clamp(1.3rem,2vw,1.6rem);}

/* Lo que obtienes: 3 × 2 o 2 × 2 en escritorio; lista en celular */
.gains{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);list-style:none;padding:0;}
.gains li{position:relative;background:var(--surface);padding:30px 30px 32px 50px;font-size:17px;line-height:1.55;}
.gains li::before{content:"";position:absolute;left:28px;top:42px;width:6px;height:6px;border-radius:50%;background:var(--deep);}
@media (max-width:767px){
  .gains{grid-template-columns:1fr;}
  .gains li{padding:20px 20px 22px 40px;font-size:16px;}
  .gains li::before{left:20px;top:31px;}
}

/* Evidencia: 3 tarjetas en fila en escritorio; apiladas en celular */
.scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0;}
.scene{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:30px 28px 32px;}
.scene h3{font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:1.25;margin-bottom:12px;}
.scene p{font-size:16.5px;line-height:1.65;color:var(--ink-2);}
@media (max-width:1023px){ .scenes{grid-template-columns:1fr;} }

/* Technology Leadership (EN): Expanding into Mexico & Latin America (4.4b) */
.expand .section-head{max-width:760px;margin-bottom:clamp(36px,5vw,52px);}
.expand h2{font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.12;}
.expand .section-head p:not(.page-kicker){margin-top:16px;font-size:17px;line-height:1.65;color:var(--ink-2);}
.expand .page-kicker{color:var(--deep);}
.phases{list-style:none;padding:0;margin-bottom:clamp(40px,5vw,56px);max-width:760px;}
.phases li{position:relative;padding:18px 0 18px 22px;border-bottom:1px solid var(--line);}
.phases li:first-child{border-top:1px solid var(--line);}
.phases li::before{content:"";position:absolute;left:0;top:30px;width:6px;height:6px;border-radius:50%;background:var(--deep);}
.phases h3{font-size:1.15rem;margin-bottom:6px;}
.phases p{font-size:16.5px;line-height:1.65;color:var(--ink-2);}
.expand-faq{margin-top:clamp(40px,5vw,56px);max-width:820px;}

/* Nosotros: principios en 4 bloques (brief §4.6) */
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;padding:0;}
.principles li{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px 24px 28px;font-size:17px;line-height:1.55;}
@media (max-width:1023px){ .principles{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:767px){ .principles{grid-template-columns:1fr;} .principles li{font-size:16px;} }

/* Contacto (brief §4.7): datos a la izquierda, formulario a la derecha; en celular, datos arriba */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:start;}
.contact-card{background:var(--void);color:#fff;border-radius:6px;padding:clamp(28px,4vw,44px);}
.contact-card .btn{width:100%;}
.contact-lines{list-style:none;padding:0;margin-top:24px;}
.contact-lines li{display:flex;align-items:center;min-height:52px;border-top:1px solid var(--line-void);font-size:17px;color:var(--on-void);}
.contact-lines a{display:flex;align-items:center;min-height:52px;width:100%;}
@media (max-width:1023px){ .contact-grid{grid-template-columns:1fr;} }

/* Aviso de privacidad (texto vigente, G26) */
.legal{max-width:760px;margin:0 auto;}
.legal h2{margin:56px 0 18px;padding-top:40px;border-top:1px solid var(--line);font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.2;}
.legal h3{margin:30px 0 10px;font-size:1.15rem;}
.legal p.body,.legal > p{margin:0 0 16px;font-size:16.5px;line-height:1.75;color:var(--ink-2);}
.legal .bullets{margin:0 0 18px;padding-left:22px;list-style:disc;font-size:16px;line-height:1.75;color:var(--ink-2);}
.legal .bullets li{margin-bottom:6px;padding:0;border:0;font-size:16px;}
.legal .bullets li::before{display:none;}
.legal .bullets ul{margin-top:6px;padding-left:20px;}
.legal .glossary{list-style:none;padding:0;margin:0 0 18px;}
.legal .glossary li{padding:16px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.7;color:var(--ink-2);}
.legal strong{color:var(--ink);}
.legal a{color:var(--deep);text-decoration:underline;}
.legal .meta-date{margin-top:24px;font-size:14px;color:var(--ink-2);}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-word{animation:none;}
  .route::after,.route:hover::after,.route:focus-within::after{transform:none !important;}
  *,*::before,*::after{transition-duration:.01ms !important;}
}

/* =====================================================================
   CAPA DE DISEÑO Y JUEGO
   El contenido y la estructura son los del .md; aquí solo vive la forma.
   Referencias: recorrido visual (Respond.io), atmósfera oscura con ritmo claro/oscuro
   (Mission, Caylent), interacción al pasar el mouse (galería de sitios de TI).
   ===================================================================== */

/* ---------- Color por ruta: orientación entre ejes ---------- */
body{--axis:var(--orbit);--axis-2:var(--sky);--axis-soft:#EEF1F7;}
.axis-cc{--axis:var(--orbit);--axis-2:var(--sky);--axis-soft:#EEF1F7;}
.axis-di{--axis:var(--orbit);--axis-2:var(--sky);--axis-soft:#EEF1F7;}
.axis-tl{--axis:var(--orbit);--axis-2:var(--sky);--axis-soft:#EEF1F7;}

/* ---------- Entrada al hacer scroll (escalonada con --i) ---------- */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms);}
.reveal-ready .villain [data-reveal]{transform:translateX(-26px);}
.reveal-ready .guide [data-reveal]{transform:translateX(26px);}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none;}

/* ---------- Foco de luz que sigue al cursor ---------- */
[data-spot]{--mx:-400px;--my:-400px;}

/* ---------- Header: subrayado que crece ---------- */
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);}
.nav-link[aria-current="page"]::after{transform:scaleX(1);}
@media (hover:hover) and (pointer:fine){ .nav-link:hover::after{transform:scaleX(1);} }
.btn,.nav-cta{transition:transform .35s var(--ease-out), background-color .2s ease, border-color .2s ease;will-change:transform;}

/* ---------- Hero del Inicio: el logo responde al cursor ---------- */
.hero-logo{transition:transform .6s var(--ease-out);will-change:transform;}
.hero-logo svg{filter:drop-shadow(0 30px 60px rgba(27,95,158,.35));}

/* ---------- Tres rutas ---------- */
.route{transition:transform .3s var(--ease-out);}
.route::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;z-index:1;background:var(--axis);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);}
.route::after{background:radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--axis) 13%, transparent), transparent 60%), var(--surface);}
.route.is-open::before{transform:scaleX(1);}
.route-art{width:120px;height:80px;margin-bottom:26px;}
.art{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--axis);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Conversaciones */
.art-cc rect{fill:var(--surface);}
.art-cc .b2 rect{fill:var(--axis-soft);}
.art-cc .dot{fill:var(--axis);stroke:none;}
.art-cc .b{transform-box:fill-box;transform-origin:left bottom;}
.art-cc .b2{transform-origin:right bottom;}
/* Infraestructura */
.art-di path{fill:var(--surface);}
.art-di .l1 path{fill:var(--axis-soft);}
.art-di .led{fill:var(--axis);stroke:none;opacity:.35;transition:opacity .4s ease;}
.art-di .l{transition:transform .55s cubic-bezier(.34,1.4,.64,1);}
/* Liderazgo */
.art-tl .ring.inner{stroke-dasharray:3 5;opacity:.6;}
.art-tl .n-up{fill:var(--axis);}
.art-tl .n-down{fill:var(--surface);}
.art-tl .hub{fill:var(--surface);}
.art-tl .needle{transform-box:view-box;transform-origin:60px 40px;transform:rotate(-38deg);transition:transform .9s cubic-bezier(.34,1.56,.64,1);}
/* Estado activo: hover en escritorio, abierta en táctil */
.route.is-open .art-cc .b,.route:hover .art-cc .b{animation:bubble-pop .5s cubic-bezier(.34,1.5,.64,1) both;}
.route.is-open .art-cc .b2,.route:hover .art-cc .b2{animation-delay:.12s;}
.route.is-open .art-cc .b3,.route:hover .art-cc .b3{animation-delay:.24s;}
.route.is-open .art-cc .dot,.route:hover .art-cc .dot{animation:typing 1.1s ease-in-out infinite;}
.art-cc .d2{animation-delay:.15s !important;} .art-cc .d3{animation-delay:.3s !important;}
.route.is-open .art-di .l1,.route:hover .art-di .l1{transform:translateY(-9px);}
.route.is-open .art-di .l3,.route:hover .art-di .l3{transform:translateY(7px);}
.route.is-open .art-di .led,.route:hover .art-di .led{opacity:1;}
.route.is-open .art-tl .needle,.route:hover .art-tl .needle{transform:rotate(22deg);}
@keyframes bubble-pop{0%{opacity:0;transform:scale(.6);}100%{opacity:1;transform:none;}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-3px);opacity:1;}}
.art-cc .dot{transform-box:fill-box;}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .route:hover::before,.route:focus-within::before{transform:scaleX(1);}
  .route:focus-within .art-tl .needle{transform:rotate(22deg);}
}
@media (max-width:1023px){
  .route{grid-template-columns:76px minmax(0,1fr);}
  .route-art{width:72px;height:48px;margin:4px 0 0;grid-row:1 / span 3;}
}

/* ---------- Villano y guía: cada problema encuentra su respuesta ---------- */
.villain{background:radial-gradient(ellipse 70% 60% at 100% 50%, rgba(47,111,237,.10), transparent 70%), var(--void);}
.rows li{transition:color .3s ease, background-color .3s ease;cursor:default;}
.rows li::before{transition:transform .35s cubic-bezier(.34,1.5,.64,1), background-color .3s ease;}
.villain .rows li::after{content:"";position:absolute;top:50%;right:calc(var(--pad) * -1);width:var(--pad);height:2px;margin-top:-1px;background:linear-gradient(90deg, rgba(141,180,255,0), var(--sky));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);}
.villain .rows li.is-pair{color:#fff;}
.villain .rows li.is-pair::after{transform:scaleX(1);}
.rows li.is-pair::before{transform:scale(1.9);}
.guide .rows li.is-pair{background:linear-gradient(90deg, rgba(47,111,237,.12), rgba(47,111,237,0) 85%);}
.guide .rows li.is-pair::before{background:var(--orbit);}
@media (max-width:767px){ .villain .rows li::after{display:none;} }

/* ---------- Aliados ---------- */
.ally{position:relative;transition:color .25s ease, background-color .25s ease;}
.ally::after{content:"";position:absolute;left:50%;bottom:22px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--axis);transform:scale(0);transition:transform .35s cubic-bezier(.34,1.6,.64,1);}
@media (hover:hover){
  .ally:hover{color:var(--ink);background:var(--axis-soft);}
  .ally:hover::after{transform:scale(1);}
}

/* ---------- Preguntas frecuentes ---------- */
.faq-item{transition:background-color .3s ease;}
.faq-item[open]{background:var(--surface);}
.faq-item summary{transition:padding .3s var(--ease-out), color .2s ease;}
.faq-item[open] summary{padding-left:18px;}
.faq-item[open] .faq-a{padding-left:18px;}
.faq-item[open] .faq-mark{background:var(--axis);border-color:var(--axis);}
.faq-item[open] .faq-mark::before,.faq-item[open] .faq-mark::after{background:#fff;}
@media (hover:hover){ .faq-item summary:hover{padding-left:10px;} .faq-item[open] summary:hover{padding-left:18px;} }

/* ---------- CTA: luces vivas y una conversación a punto de empezar ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;}
.cta-glow{position:absolute;z-index:-1;width:560px;height:560px;border-radius:50%;filter:blur(90px);opacity:.32;pointer-events:none;animation:drift 20s ease-in-out infinite alternate;}
.cta-glow.g1{left:-160px;top:-200px;background:var(--orbit);}
.cta-glow.g2{right:-180px;bottom:-240px;background:#25D366;opacity:.16;animation-duration:26s;animation-direction:alternate-reverse;}
@keyframes drift{from{transform:translate(0,0) scale(1);}to{transform:translate(120px,80px) scale(1.15);}}
.cta-bubble{display:inline-flex;align-items:center;gap:6px;margin-bottom:26px;padding:13px 18px;border-radius:20px 20px 20px 5px;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.45);}
.cta-bubble span{width:8px;height:8px;border-radius:50%;background:var(--wa);animation:typing 1.2s ease-in-out infinite;}
.cta-bubble span:nth-child(2){animation-delay:.15s;} .cta-bubble span:nth-child(3){animation-delay:.3s;}
.cta-form{box-shadow:0 40px 80px -30px rgba(0,0,0,.6);}
.field input,.field textarea{transition:border-color .2s ease, padding .2s ease;}
.field:focus-within label{color:var(--deep);}

/* ---------- Pie: la marca en grande ---------- */
.footer-mark{margin:48px 0 0;font-family:var(--font-display);font-size:clamp(3.6rem,16.5vw,15rem);font-weight:700;line-height:.82;letter-spacing:.02em;text-transform:uppercase;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(141,180,255,.22);user-select:none;
  transition:-webkit-text-stroke-color .4s ease;}
.site-footer:hover .footer-mark{-webkit-text-stroke-color:rgba(141,180,255,.4);}
.footer-bottom{margin-top:32px;}

/* =====================================================================
   Páginas interiores
   ===================================================================== */

/* Encabezados con ilustración propia; el centro queda despejado para el texto */
.page-hero{position:relative;overflow:hidden;isolation:isolate;}
.page-hero.has-art{background:radial-gradient(ellipse 60% 80% at 50% 0%, color-mix(in srgb, var(--axis) 22%, transparent), transparent 70%), radial-gradient(circle at 50% 20%, #131C2E 0%, #10182A 55%, #0E1524 100%);background-color:var(--void);}
.page-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 72% at 50% 50%, transparent 0%, transparent 42%, #000 88%);mask-image:radial-gradient(ellipse 50% 72% at 50% 50%, transparent 0%, transparent 42%, #000 88%);}
.page-kicker{color:var(--axis-2);}
.page-hero-inner{position:relative;}
/* Canales que convergen */
.art-converge .tracks path{fill:none;stroke:color-mix(in srgb, var(--axis-2) 22%, transparent);stroke-width:1.2;}
.art-converge .pulse{fill:var(--axis-2);}
.art-converge .hub{fill:var(--axis-2);opacity:.6;}
/* Red de infraestructura */
.art-grid .cell{fill:color-mix(in srgb, var(--axis-2) 12%, transparent);}
.art-grid .cell.on{animation:cell-on 7s ease-in-out infinite;}
@keyframes cell-on{0%,62%,100%{fill:color-mix(in srgb, var(--axis-2) 12%, transparent);}76%{fill:var(--axis-2);}}
/* Mesa de dirección */
.art-table .table{fill:none;stroke:color-mix(in srgb, var(--axis-2) 22%, transparent);stroke-width:1.2;}
.art-table .table.inner{stroke-dasharray:4 10;}
.art-table .seat{fill:color-mix(in srgb, var(--axis-2) 20%, transparent);}
.art-table .seat.tech{fill:none;stroke:var(--axis-2);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:seat 2.6s ease-in-out infinite;}
@keyframes seat{0%,100%{transform:scale(1);opacity:.55;}50%{transform:scale(1.35);opacity:1;}}
/* Órbita (Nosotros) */
.art-orbit .o{fill:none;stroke:rgba(141,180,255,.14);stroke-width:1.2;}
.art-orbit .spin{transform-box:view-box;transform-origin:600px 250px;animation:turn 48s linear infinite;}
.art-orbit .s2{animation-duration:30s;animation-direction:reverse;}
.art-orbit .planet{fill:var(--sky);}
@keyframes turn{to{transform:rotate(360deg);}}
/* Conversaciones que suben (Contacto) */
.art-bubbles rect{fill:rgba(141,180,255,.08);stroke:rgba(141,180,255,.25);stroke-width:1.2;}
.art-bubbles .float{animation:rise 16s linear infinite;}
@keyframes rise{from{transform:translateY(0);}to{transform:translateY(-640px);}}
/* Conexión con el aliado */
.art-link .wire{fill:none;stroke:color-mix(in srgb, var(--axis-2) 35%, transparent);stroke-width:1.5;stroke-dasharray:6 9;animation:dash 1.6s linear infinite;}
.art-link .node circle{fill:color-mix(in srgb, var(--axis-2) 8%, transparent);stroke:color-mix(in srgb, var(--axis-2) 45%, transparent);}
.art-link .core{fill:var(--axis-2);stroke:none;}
.art-link .pulse{fill:var(--axis-2);}
@keyframes dash{to{stroke-dashoffset:-30;}}

/* ---------- El dolor: la caja negra que se abre ---------- */
.pain-box{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;
  padding:clamp(36px,5vw,72px);background:radial-gradient(circle at 80% 55%, color-mix(in srgb, var(--axis) 24%, transparent), transparent 55%), var(--void);color:var(--on-void);border-radius:10px;box-shadow:0 40px 80px -48px rgba(10,18,32,.9);}
.pain-box .bullets li{border-color:var(--line-void);color:rgba(255,255,255,.86);}
.pain-box .bullets li::before{width:9px;height:9px;top:23px;border-radius:1px;background:none;border:1.5px solid color-mix(in srgb, var(--axis-2) 80%, transparent);}
.pain-box .pain-close{color:#fff;font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:600;line-height:1.4;}
.bbox{position:relative;justify-self:center;width:240px;height:280px;perspective:900px;}
.cube{position:absolute;left:50%;top:60%;width:120px;height:120px;margin:-60px 0 0 -60px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(0deg);animation:cube-spin 24s linear infinite;}
@keyframes cube-spin{to{transform:rotateX(-24deg) rotateY(360deg);}}
.f{position:absolute;inset:0;background:#060A12;border:1px solid color-mix(in srgb, var(--axis-2) 40%, transparent);box-shadow:inset 0 0 28px rgba(0,0,0,.7);transition:transform 1s cubic-bezier(.34,1.3,.64,1), border-color .8s ease;}
.fr{transform:translateZ(60px);} .bk{transform:rotateY(180deg) translateZ(60px);}
.lf{transform:rotateY(-90deg) translateZ(60px);} .rt{transform:rotateY(90deg) translateZ(60px);}
.bt{transform:rotateX(-90deg) translateZ(60px);} .tp{transform:rotateX(90deg) translateZ(60px);}
.bbox-light{position:absolute;left:50%;bottom:calc(40% + 52px);width:110px;height:170px;margin-left:-55px;border-radius:50% 50% 0 0;
  background:linear-gradient(to top, color-mix(in srgb, var(--axis-2) 85%, transparent), transparent);filter:blur(12px);opacity:0;transform:scaleY(.1);transform-origin:bottom;transition:opacity 1s ease, transform 1.2s var(--ease-out);}
.bbox-shadow{position:absolute;left:50%;bottom:6%;width:150px;height:22px;margin-left:-75px;border-radius:50%;background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent);}
/* Al entrar en vista la tapa se levanta y sale luz; con el mouse, se abre más */
.pain-box.is-in .tp{transform:rotateX(90deg) translateZ(96px);}
.pain-box.is-in .f{border-color:color-mix(in srgb, var(--axis-2) 85%, transparent);}
.pain-box.is-in .bbox-light{opacity:.75;transform:scaleY(.8);}
@media (hover:hover){
  .pain-box:hover .tp{transform:rotateX(90deg) translateZ(128px);}
  .pain-box:hover .bbox-light{opacity:.9;transform:scaleY(1);}
}
@media (max-width:767px){
  .pain-box{grid-template-columns:1fr;padding:32px 22px 36px;}
  .bbox{order:-1;width:100%;height:200px;}
  .cube{width:90px;height:90px;margin:-45px 0 0 -45px;}
  .fr{transform:translateZ(45px);} .bk{transform:rotateY(180deg) translateZ(45px);}
  .lf{transform:rotateY(-90deg) translateZ(45px);} .rt{transform:rotateY(90deg) translateZ(45px);}
  .bt{transform:rotateX(-90deg) translateZ(45px);} .tp{transform:rotateX(90deg) translateZ(45px);}
  .pain-box.is-in .tp{transform:rotateX(90deg) translateZ(72px);}
  .bbox-light{width:84px;margin-left:-42px;height:120px;bottom:calc(40% + 40px);}
}

/* ---------- El ciclo: el punto recorre la órbita y enciende cada etapa ---------- */
.stage{position:relative;transition:border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease-out);
  background-image:radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--axis) 10%, transparent), transparent 60%);}
.stage-num{transition:background-color .35s ease, border-color .35s ease, color .35s ease;border-color:var(--axis);}
.ring-arrow{stroke:var(--axis);}
.ring-core{opacity:.9;}
.ring-trail{fill:none;stroke:none;}
.ring-dot{transform-box:view-box;transform-origin:150px 150px;transition:transform 1.1s cubic-bezier(.65,0,.35,1);}
.ring-dot circle{fill:var(--axis);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--axis) 70%, transparent));}
.ring-node{cursor:pointer;}
.ring-node circle{stroke:var(--axis);transition:fill .35s ease;}
.ring-node text{transition:fill .35s ease;}
.ring-node.is-lit circle{fill:var(--axis);}
.ring-node.is-lit text{fill:#fff;}
.stage.is-lit{border-color:var(--axis);background-color:var(--axis-soft);}
.js .stage.is-lit.is-in{transform:translateY(-4px);}
.stage.is-lit .stage-num{background:var(--axis);color:#fff;}
@media (max-width:767px){
  .js .stage.is-active .stage-btn{border-color:var(--axis);background:var(--axis-soft);}
  .js .stage.is-active .stage-num{background:var(--axis);border-color:var(--axis);}
  .js .stage-desc{border-color:var(--axis);}
}

/* ---------- Lo que obtienes ---------- */
.gains li{padding-left:62px;transition:background-color .3s ease;
  background-image:radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--axis) 10%, transparent), transparent 60%);}
.gains li::before{left:26px;top:32px;width:20px;height:20px;border-radius:50%;background:none;border:2px solid var(--axis);transition:transform .4s cubic-bezier(.34,1.6,.64,1), background-color .3s ease;}
.gains li::after{content:"";position:absolute;left:33px;top:39px;width:6px;height:6px;border-radius:50%;background:var(--axis);}
@media (hover:hover){ .gains li:hover::before{transform:scale(1.25);background:var(--axis-soft);} }
@media (max-width:767px){
  .gains li{padding-left:52px;}
  .gains li::before{left:18px;top:22px;}
  .gains li::after{left:25px;top:29px;}
}

/* ---------- Evidencia: banda oscura, escenas que se inclinan ---------- */
.proof{position:relative;background:radial-gradient(ellipse 60% 80% at 20% 0%, color-mix(in srgb, var(--axis) 18%, transparent), transparent 65%), var(--void);padding:clamp(88px,10vw,128px) 0;}
.section + .section.proof{padding-top:clamp(88px,10vw,128px);}
.proof > .wrap::before{display:none;}
.scenes{perspective:1200px;}
.scene{position:relative;overflow:hidden;background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));border:1px solid var(--line-void);color:#fff;
  transform-style:preserve-3d;}
.js .scene.is-in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.scene[data-tilting]{transition:transform .2s ease-out, border-color .3s ease;transition-delay:0s;}
.scene::before{content:"";display:block;width:44px;height:3px;margin-bottom:24px;border-radius:2px;background:var(--axis-2);}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(300px circle at var(--mx,-300px) var(--my,-300px), rgba(255,255,255,.09), transparent 60%);}
.scene h3{color:#fff;}
.scene p{color:var(--on-void-2);}
@media (hover:hover){ .scene:hover{border-color:color-mix(in srgb, var(--axis-2) 55%, transparent);} }

/* ---------- Expanding into Mexico & Latin America: las tres fases en línea ---------- */
.phases{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);max-width:none;}
.phases::before,.phases::after{content:"";position:absolute;left:21px;right:21px;top:20px;height:2px;background:var(--line);}
.phases::after{background:var(--axis);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out) .2s;}
.phases.is-in::after{transform:scaleX(1);}
.phases li{position:relative;padding:64px 0 0 !important;border:0 !important;}
.phases li::before{display:none;}
.phase-num{position:absolute;left:0;top:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--paper);border:2px solid var(--axis);font-family:var(--font-display);font-weight:600;color:var(--deep);}
@media (max-width:767px){
  .phases{grid-template-columns:1fr;gap:28px;}
  .phases::before,.phases::after{left:20px;right:auto;top:21px;bottom:21px;width:2px;height:auto;}
  .phases::after{transform:scaleY(0);transform-origin:top;}
  .phases.is-in::after{transform:scaleY(1);}
  .phases li{padding:0 0 0 64px !important;}
}

/* ---------- Nosotros ---------- */
.story-rail{position:relative;padding-left:48px;}
.story-rail::before,.story-rail::after{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line);}
.story-rail::after{background:var(--orbit);transform:scaleY(var(--rail,0));transform-origin:top;}
.story-rail p{position:relative;}
.story-rail p::before{content:"";position:absolute;left:-48px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--line);transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease;}
.story-rail p.lit::before{border-color:var(--orbit);background:var(--orbit);box-shadow:0 0 0 6px rgba(47,111,237,.16);}
.principles li{display:flex;flex-direction:column;gap:20px;transition:transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease;
  background-image:radial-gradient(320px circle at var(--mx) var(--my), rgba(47,111,237,.10), transparent 60%);}
.p-icon{width:48px;height:48px;fill:none;stroke:var(--deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.p-talent .spark{stroke:var(--orbit);transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.34,1.6,.64,1);}
.p-pencil .stroke-line{stroke:var(--orbit);stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .9s var(--ease-out);}
.p-pencil .pen{transition:transform .9s var(--ease-out);}
.p-data .bar{fill:var(--axis-soft);transform-box:fill-box;transform-origin:bottom;transform:scaleY(.55);transition:transform .7s cubic-bezier(.34,1.4,.64,1);}
.p-data .b2{transition-delay:.08s;} .p-data .b3{transition-delay:.16s;}
.p-cycle .loop{transform-box:fill-box;transform-origin:center;transition:transform .9s var(--ease-out);}
.principles li.is-in .p-pencil .stroke-line{stroke-dashoffset:0;}
.principles li.is-in .p-data .bar{transform:none;}
@media (hover:hover){
  .principles li:hover{transform:translateY(-4px);border-color:var(--orbit);}
  .principles li:hover .spark{transform:rotate(90deg) scale(1.3);}
  .principles li:hover .pen{transform:translate(-4px,4px);}
  .principles li:hover .loop{transform:rotate(180deg);}
  .principles li:hover .p-data .bar{transform:scaleY(1.12);}
}
.audience li{transition:padding .3s var(--ease-out);}
@media (hover:hover){ .audience li:hover{padding-left:30px;} .audience li:hover::before{background:var(--orbit);} }

/* ---------- Contacto ---------- */
.contact-card{position:relative;overflow:hidden;background:radial-gradient(circle at 100% 0%, rgba(37,211,102,.14), transparent 55%), var(--void);}
.contact-lines a{transition:color .2s ease, padding .3s var(--ease-out);}
@media (hover:hover){ .contact-lines a:hover{color:var(--sky);padding-left:8px;} }

/* ---------- Aviso de privacidad: progreso de lectura ---------- */
.read-progress{position:fixed;top:var(--header-h);left:0;right:0;z-index:49;height:3px;pointer-events:none;}
.read-progress span{display:block;height:100%;background:linear-gradient(90deg, var(--deep), var(--sky));transform:scaleX(0);transform-origin:left;}

/* ---------- Animaciones en pausa fuera de pantalla ---------- */
.motion-paused,.motion-paused *{animation-play-state:paused !important;}

/* ---------- Movimiento reducido: todo visible, sin desplazamientos ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal-ready [data-reveal]{opacity:1;transform:none !important;transition:none;}
  .cube,.cta-glow,.cta-bubble span,.art-cc .dot,.art-grid .cell.on,.art-table .seat.tech,.art-orbit .spin,.art-bubbles .float,.art-link .wire{animation:none !important;}
  .hero-logo,.btn,.nav-cta{transform:none !important;}
  .pain-box.is-in .tp,.pain-box:hover .tp{transform:rotateX(90deg) translateZ(60px);}
  .scene{transform:none !important;}
}

/* Cuadrículas con filetes: cada celda dibuja sus líneas, así no aparece un bloque gris mientras entran */
.gains{gap:0;background:none;border:0;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.gains li{box-shadow:inset -1px -1px 0 var(--line);}
.allies-grid{gap:0;background:none;}
.ally{box-shadow:inset -1px 0 0 var(--line);}
@media (max-width:767px){
  .allies-grid{border-left:1px solid var(--line);}
  .ally{box-shadow:inset -1px -1px 0 var(--line);}
}

/* Correcciones del detector: sin texto con degradado; movimiento con transform, no con padding */
.faq-item summary,.faq-item[open] summary,.faq-item[open] .faq-a{transition:color .2s ease;padding-left:4px;}
@media (hover:hover){ .faq-item summary:hover,.faq-item[open] summary:hover{padding-left:4px;} }
.faq-item[open]{background:linear-gradient(90deg, var(--axis-soft), transparent 70%);}
.audience li{transition:transform .3s var(--ease-out);}
@media (hover:hover){ .audience li:hover{padding-left:22px;transform:translateX(8px);} }
.contact-lines a{transition:color .2s ease, transform .3s var(--ease-out);}
@media (hover:hover){ .contact-lines a:hover{padding-left:0;transform:translateX(8px);} }

.cta-form.is-surface{box-shadow:none;}
.footer-mark{color:transparent;}

/* Escenas fuera de la banda oscura (p. ej. Expanding into Mexico, fondo claro): versión clara */
.scene{background:var(--surface);border-color:var(--line);color:var(--ink);}
.scene h3{color:var(--ink);}
.scene p{color:var(--ink-2);}
.scene::before{background:var(--axis);}
.scene::after{background:radial-gradient(300px circle at var(--mx,-300px) var(--my,-300px), color-mix(in srgb, var(--axis) 10%, transparent), transparent 60%);}
@media (hover:hover){ .scene:hover{border-color:var(--axis);} }
/* En la banda de evidencia: vidrio oscuro */
.proof .scene{background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--void);border-color:var(--line-void);color:#fff;}
.proof .scene h3{color:#fff;}
.proof .scene p{color:var(--on-void-2);}
.proof .scene::before{background:var(--axis-2);}
.proof .scene::after{background:radial-gradient(300px circle at var(--mx,-300px) var(--my,-300px), rgba(255,255,255,.09), transparent 60%);}
@media (hover:hover){ .proof .scene:hover{border-color:color-mix(in srgb, var(--axis-2) 55%, transparent);} }

/* =====================================================================
   v2 · Ideas rescatadas de sitios de alto nivel
   Mini interfaces (Family, Linear, Stripe) · caja negra con el scroll (Apple) · mapa con arcos (Stripe)
   Header en píldora (Clear Street, Raycast) · letras que ruedan (Paffi) · envío que se transforma (Family)
   ===================================================================== */

/* ---------- 5 · Header en píldora flotante ---------- */
.site-header{transition:background-color .35s ease, top .5s var(--ease-out), left .5s var(--ease-out), right .5s var(--ease-out), height .5s var(--ease-out), border-radius .5s var(--ease-out), box-shadow .4s ease, padding .5s var(--ease-out);}
.site-header.is-solid{top:10px;left:10px;right:10px;height:60px;padding:0 8px 0 18px;border-radius:18px;background:rgba(10,18,32,.95);box-shadow:0 18px 40px -22px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);}
/* El desenfoque solo en escritorio: en celular el menú lateral es fijo y el filtro lo encerraría en la píldora */
@media (min-width:1024px){
  .site-header.is-solid{top:14px;left:max(20px, calc(50% - 660px));right:max(20px, calc(50% - 660px));height:62px;padding:0 9px 0 24px;border-radius:999px;
    background:rgba(10,18,32,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);}
  .site-header.is-solid .brand svg{width:28px;height:28px;}
}
@media (prefers-reduced-transparency:reduce){ .site-header.is-solid{background:var(--void);-webkit-backdrop-filter:none;backdrop-filter:none;} }

/* ---------- 5 · Letras que ruedan en los botones ---------- */
.roll{display:inline-flex;overflow:hidden;height:1.3em;line-height:1.3;}
.roll .ch{position:relative;display:inline-block;white-space:pre;transition:transform .5s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--c) * 16ms);}
.roll .ch::after{content:attr(data-c);position:absolute;left:0;top:100%;}
@media (hover:hover) and (pointer:fine){
  .btn:hover .roll .ch,.nav-cta:hover .roll .ch{transform:translateY(-100%);}
}

/* ---------- 5 · El botón Enviar se transforma: carga → palomita ---------- */
.btn-send{position:relative;overflow:hidden;transition:width .45s var(--ease-out), padding .45s var(--ease-out), background-color .3s ease, border-color .3s ease, transform .35s var(--ease-out);}
.btn-send .bs-label{transition:opacity .2s ease;}
.bs-spin,.bs-check{position:absolute;inset:0;margin:auto;opacity:0;pointer-events:none;}
.bs-spin{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;}
.bs-check{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;}
.btn-send.is-loading{padding:0;}
.btn-send.is-loading .bs-label,.btn-send.is-done .bs-label{opacity:0;}
.btn-send.is-loading .bs-spin{opacity:1;animation:spin .8s linear infinite;}
.btn-send.is-done{background:#16A34A;border-color:#16A34A;}
.btn-send.is-done .bs-check{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-out) .1s;}
.btn-send.is-error{animation:shake .45s ease;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shake{0%,100%{transform:none;}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}

/* ---------- 2 · Mini interfaces en "Lo que obtienes" ---------- */
.gains li{display:flex;flex-direction:column;gap:20px;padding:30px 30px 32px;}
.gains li::before,.gains li::after{display:none;}
.gain-art{width:96px;height:64px;flex:none;overflow:visible;fill:none;stroke:var(--axis);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:767px){
  .gains li{flex-direction:row;align-items:flex-start;gap:16px;padding:20px 18px 22px;}
  .gain-art{width:60px;height:40px;}
}
/* elementos comunes */
.gain-art .bub,.gain-art .ch,.gain-art .inbox,.gain-art .srv,.gain-art .doc,.gain-art .app,.gain-art .base,.gain-art .shield{fill:var(--surface);}
.gain-art .dot,.gain-art .home{fill:var(--axis);stroke:none;}
.gain-art [class*="wire"],.gain-art .tick,.gain-art .arrow,.gain-art .line,.gain-art .cut,.gain-art .ar,.gain-art .main,.gain-art .link,.gain-art .doc-l,.gain-art .track-fill,.gain-art .loop{stroke-dasharray:120;stroke-dashoffset:120;}
.gains li.is-in [class*="wire"],.gains li.is-in .tick,.gains li.is-in .arrow,.gains li.is-in .line,.gains li.is-in .cut,.gains li.is-in .ar,.gains li.is-in .main,.gains li.is-in .link,.gains li.is-in .doc-l,.gains li.is-in .loop{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease-out) calc(var(--i,0) * 90ms + .2s);}
/* Un solo lugar */
.ga-merge .ch{fill:var(--axis-soft);}
.ga-merge .w2{transition-delay:.35s !important;} .ga-merge .w3{transition-delay:.5s !important;}
.ga-merge .inbox{transform-box:fill-box;transform-origin:center;}
.gains li.is-in .ga-merge .inbox{animation:inbox-pop .6s cubic-bezier(.34,1.6,.64,1) 1.1s both;}
@keyframes inbox-pop{from{transform:scale(.7);opacity:0;}to{transform:none;opacity:1;}}
/* Seguimiento en toda la relación */
.ga-journey .track{stroke:var(--line);}
.ga-journey .track-fill{stroke-dasharray:80;stroke-dashoffset:80;}
.gains li.is-in .ga-journey .track-fill{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .2s;}
.ga-journey .st{fill:var(--surface);transition:fill .3s ease;}
.gains li.is-in .ga-journey .st{fill:var(--axis);}
.gains li.is-in .ga-journey .s2{transition-delay:.6s;} .gains li.is-in .ga-journey .s3{transition-delay:1s;} .gains li.is-in .ga-journey .s4{transition-delay:1.5s;}
.ga-journey .loop{stroke-dasharray:4 5;stroke-dashoffset:0;opacity:0;transition:opacity .6s ease 1.9s;}
.gains li.is-in .ga-journey .loop{opacity:1;animation:dash-flow 2.4s linear 2.2s infinite;}
@keyframes dash-flow{to{stroke-dashoffset:-36;}}
/* Lineamientos también en la IA */
.ga-rules .b-ai{fill:var(--axis-soft);}
.gains li.is-in .ga-rules .t2{transition-delay:.9s !important;}
.ga-rules .spark,.ga-handoff .spark,.ga-governed .spark{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite;}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.35) rotate(45deg);}}
/* Entrega a una persona */
.ga-handoff .b-ai{fill:var(--axis-soft);}
.ga-handoff .head,.ga-handoff .body{fill:var(--surface);}
.gains li.is-in .ga-handoff .arrow{animation:nudge 2.4s ease-in-out 1.4s infinite;}
@keyframes nudge{0%,100%{transform:none;}50%{transform:translateX(5px);}}
/* Conocimiento: pasó, pasa, podría pasar */
.ga-insight .axis{stroke:var(--line);}
.ga-insight .bar{fill:var(--axis-soft);transform-box:fill-box;transform-origin:bottom;transform:scaleY(.15);transition:transform .8s cubic-bezier(.34,1.4,.64,1);}
.ga-insight .future{fill:none;stroke-dasharray:4 4;}
.gains li.is-in .ga-insight .bar{transform:none;}
.gains li.is-in .ga-insight .r2{transition-delay:.15s;} .gains li.is-in .ga-insight .r3{transition-delay:.3s;} .gains li.is-in .ga-insight .r4{transition-delay:.45s;}
/* Sigue operando sin luz ni internet */
.ga-resilient .bolt{stroke:var(--ink-2);}
.ga-resilient .cut{stroke:#B3261E;}
.ga-resilient .dot{transform-box:fill-box;animation:typing 1.2s ease-in-out infinite;}
.ga-resilient .d2{animation-delay:.15s;} .ga-resilient .d3{animation-delay:.3s;}
/* Recuperación oficina ↔ nube */
.ga-recovery .cloud{fill:var(--axis-soft);}
.ga-recovery .sync{stroke-dasharray:4 4;}
.gains li.is-in .ga-recovery .sync{animation:dash-flow 1.4s linear infinite;}
.gains li.is-in .ga-recovery .s2{animation-direction:reverse;}
/* Plataformas sobre la infraestructura */
.ga-platforms .base{fill:var(--axis-soft);}
.ga-platforms .app{transform:translateY(-12px);opacity:0;transition:transform .6s cubic-bezier(.34,1.5,.64,1), opacity .4s ease;}
.gains li.is-in .ga-platforms .app{transform:none;opacity:1;}
.gains li.is-in .ga-platforms .a2{transition-delay:.12s;} .gains li.is-in .ga-platforms .a3{transition-delay:.24s;}
.gains li.is-in .ga-platforms .a4{transition-delay:.4s;} .gains li.is-in .ga-platforms .a5{transition-delay:.52s;}
/* IA en un entorno gobernado */
.ga-governed .shield{fill:var(--axis-soft);}
.ga-governed .orbit{stroke-dasharray:3 6;transform-box:fill-box;transform-origin:center;animation:turn 14s linear infinite;}
/* Visibilidad */
.ga-visibility .axis{stroke:var(--line);}
.ga-visibility .lens{fill:var(--surface);}
.gains li.is-in .ga-visibility .lens,.gains li.is-in .ga-visibility .handle{animation:scan 4s ease-in-out 1.2s infinite;}
@keyframes scan{0%,100%{transform:none;}50%{transform:translateX(-26px) translateY(8px);}}
/* Asesor en la mesa */
.ga-table .tbl{fill:var(--axis-soft);}
.ga-table .seat{fill:var(--surface);}
.ga-table .tech{fill:var(--axis);transform-box:fill-box;transform-origin:center;animation:seat 2.6s ease-in-out infinite;}
/* Alineados con la estrategia */
.gains li.is-in .ga-align .main{transition-delay:.7s !important;}
.ga-align .tip{opacity:0;transition:opacity .3s ease 1.3s;}
.gains li.is-in .ga-align .tip{opacity:1;}
/* CTO fraccional */
.ga-cto .ring{stroke-dasharray:3 5;}
.ga-cto .slice{fill:var(--axis);stroke:none;transform-box:view-box;transform-origin:48px 32px;transform:scale(0);transition:transform .7s cubic-bezier(.34,1.5,.64,1) .3s;}
.gains li.is-in .ga-cto .slice{transform:none;}
.ga-cto .nd{fill:var(--surface);}
/* Certificación supervisada */
.ga-cert .seal{fill:var(--axis-soft);transform-box:fill-box;transform-origin:center;transform:scale(1.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.5,.64,1) 1s, opacity .3s ease 1s;}
.gains li.is-in .ga-cert .seal{transform:none;opacity:1;}
.gains li.is-in .ga-cert .tick{transition-delay:1.35s !important;}
/* Al pasar el mouse, la interfaz se vuelve a animar */
@media (hover:hover){ .gains li:hover .gain-art{animation:art-nudge .5s var(--ease-out);} }
@keyframes art-nudge{50%{transform:translateY(-3px);}}

/* ---------- 4 · Mapa de puntos con arcos ---------- */
.with-map{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;}
.with-map .section-head{margin-bottom:0;}
.expand .with-map{margin-bottom:clamp(40px,5vw,56px);}
.map{margin:0;}
.map svg{width:100%;height:auto;max-width:460px;display:block;margin:0 auto;overflow:visible;}
.map .land circle{fill:color-mix(in srgb, var(--axis) 22%, var(--line));}
.map .arc{fill:none;stroke:var(--axis);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;}
.map.is-in .arc{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out) calc(var(--i) * 180ms + .3s);}
.map .city{fill:var(--surface);stroke:var(--axis);stroke-width:2;opacity:0;transition:opacity .4s ease 1.2s;}
.map.is-in .city{opacity:1;}
.map .home{fill:var(--axis);}
.map .home-pulse{fill:none;stroke:var(--axis);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pulse-ring 2.4s ease-out infinite;}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.8;}100%{transform:scale(3.6);opacity:0;}}
@media (max-width:1023px){
  .with-map{grid-template-columns:1fr;}
  .map svg{max-width:360px;}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .roll .ch{transition:none;}
  .btn:hover .roll .ch,.nav-cta:hover .roll .ch{transform:none !important;}
  .gain-art *{animation:none !important;transition:none !important;stroke-dashoffset:0 !important;transform:none !important;opacity:1 !important;}
  .map .arc{stroke-dashoffset:0;transition:none;}
  .map .city{opacity:1;}
  .map .home-pulse{animation:none;}
  .scrub-ready .guide .rows li:not(.is-lit){opacity:1;}
}

/* ---------- Inicio: el logo y las letras aparecen desde abajo ---------- */
.hero-word{animation:none;}
.word-rise{display:inline-flex;}
.wl{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.wl > span{display:inline-block;animation:rise-in 1s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--l) * 60ms) both;}
.hero-logo svg{animation:rise-in-soft 1.3s cubic-bezier(.2,.8,.2,1) .4s both;}
.hero-line{animation:rise-in-soft .9s cubic-bezier(.2,.8,.2,1) both;}
.hero-line:nth-child(1){animation-delay:.8s;}
.hero-line:nth-child(2){animation-delay:.92s;}
.hero-line:nth-child(3){animation-delay:1.04s;}
.hero-statement{animation:rise-in-soft .9s cubic-bezier(.2,.8,.2,1) 1.2s both;}
@keyframes rise-in{from{transform:translateY(110%);}to{transform:none;}}
@keyframes rise-in-soft{from{opacity:0;transform:translateY(44px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .wl > span,.hero-logo svg,.hero-line,.hero-statement{animation:none;}
}

/* =====================================================================
   v2 · La caja negra son las columnas
   Al llegar, toda la comparación está oscura (la caja cerrada). Con el scroll, la hoja
   del guía gira sobre la costura como la tapa de una caja y entra la luz.
   ===================================================================== */
.standoff{position:relative;overflow:hidden;isolation:isolate;perspective:1800px;perspective-origin:50% 50%;}
.standoff-grid{position:relative;z-index:2;}
.box-flap,.box-light{display:none;}
@media (min-width:768px){
  .scrub-ready .box-flap{display:block;position:absolute;top:0;bottom:0;left:50%;right:0;z-index:4;pointer-events:none;transform-origin:left center;
    transform:rotateY(calc(var(--open,0) * -86deg));opacity:clamp(0, calc((1 - var(--open,0)) * 5), 1);
    background:radial-gradient(ellipse 70% 55% at 0% 50%, rgba(47,111,237,.12), transparent 70%), linear-gradient(90deg, #0C1628, var(--void) 40%);
    box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);}
  .flap-edge{position:absolute;left:0;top:6%;bottom:6%;width:2px;background:linear-gradient(transparent, var(--sky), transparent);
    opacity:clamp(0, calc(var(--open,0) * 3), 1);box-shadow:0 0 18px 2px rgba(141,180,255,.55);}
  .scrub-ready .box-light{display:block;position:absolute;left:50%;top:0;bottom:0;width:55%;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 60% 50% at 0% 50%, rgba(141,180,255,.30), rgba(141,180,255,0) 70%);
    opacity:calc(var(--open,0) * (1.3 - var(--open,0)));}
}
/* Las respuestas del guía se iluminan en orden, cuando la luz las alcanza */
.scrub-ready .guide .rows li{transition:opacity .9s ease, background-color .9s ease;}
.villain .rows li,.villain .rows li::after,.rows li::before{transition-duration:.7s;}
@media (min-width:768px){ .scrub-ready .guide .rows li:not(.is-lit){opacity:.3;} }
.rows li.is-lit::before{transform:scale(1.9);}
.villain .rows li.is-lit{color:#fff;}
.villain .rows li.is-lit::after{transform:scaleX(1);}
.guide .rows li.is-lit{background:linear-gradient(90deg, rgba(47,111,237,.12), rgba(47,111,237,0) 85%);}
.guide .rows li.is-lit::before{background:var(--orbit);}
@media (prefers-reduced-motion:reduce){
  .box-flap,.box-light{display:none !important;}
  .scrub-ready .guide .rows li:not(.is-lit){opacity:1;}
}

/* =====================================================================
   Parámetros comunes de las subpáginas
   Ejes, Nosotros, Contacto, aliados y aviso de privacidad siguen las mismas reglas:
   - fondo liso (sin cuadrículas ni puntos)
   - esquinas de 6 px y bordes de 1 px, sin marcos internos ni esquinas asimétricas
   - el mismo separador de línea entre secciones
   - encabezado de la misma altura y con el mismo fondo
   - títulos de sección de un solo tamaño
   Ninguna página cambia la forma de los componentes.
   ===================================================================== */
:root{--radius:6px;--page-hero-h:clamp(480px,70vh,640px);--title-size:clamp(1.75rem,3.2vw,2.6rem);}

/* Encabezado: misma altura y mismo fondo en todas las subpáginas */
@media (min-width:768px){ .page-hero{min-height:var(--page-hero-h);display:flex;flex-direction:column;justify-content:center;} }
.page-hero:not(.has-art){background:radial-gradient(ellipse 60% 80% at 50% 0%, color-mix(in srgb, var(--axis) 22%, transparent), transparent 70%), radial-gradient(circle at 50% 20%, #131C2E 0%, #10182A 55%, #0E1524 100%);background-color:var(--void);}

/* Títulos de sección: un solo tamaño */
.section-title,.faq h2{font-size:var(--title-size);line-height:1.12;}

/* Tarjetas y cajas: una sola forma */
.stage,.scene,.pain-box,.cta-form,.contact-card,.principles li,.faq-item[open]{border-radius:var(--radius);}

/* Aviso de privacidad: el documento usa la misma tarjeta que el resto */
.page-privacy .legal{background:var(--surface);padding:clamp(28px,5vw,72px);border:1px solid var(--line);border-radius:var(--radius);}
.page-privacy .legal h2:first-of-type{margin-top:40px;}

/* ---------- Logos oficiales de los aliados (G15: mismo tamaño, un solo tono · G44: nombre visible y en alt) ---------- */
.ally.has-logo{flex-direction:column;gap:10px;}
.ally img{display:block;width:auto;height:34px;max-width:110px;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.62;transition:filter .3s ease, opacity .3s ease, transform .35s var(--ease-out);}
.ally .ally-name{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);}
.ally.has-logo .ally-name{font-family:var(--font-body);}
@media (hover:hover){
  .ally:hover img{filter:none;opacity:1;transform:translateY(-2px);}
}
@media (max-width:767px){ .ally img{height:28px;} .ally.has-logo{height:104px;} }
@media (prefers-reduced-motion:reduce){ .ally:hover img{transform:none;} }
/* El punto de hover chocaba con el nombre: con logo, el color del logo ya es la señal; sin logo, el punto baja */
.ally.has-logo::after{display:none;}
.ally::after{bottom:14px;}

/* =====================================================================
   FUSIÓN v1 + v2
   De la v1: el hero que se arma con el scroll, el avance por secciones (snap) en el Inicio
   y la fotografía (entra "cayendo" como en la v1). De la v2: contenido, estructura,
   ilustraciones animadas y la personalidad de color de cada eje.
   ===================================================================== */

/* ---------- Hero que se arma con el scroll (escritorio con mouse: html.hero-scroll) ---------- */
.hero-stage{position:relative;}
.hero-word{position:relative;z-index:3;}
html.hero-scroll .hero-stage{height:200vh;}
html.hero-scroll .hero{position:sticky;top:0;height:100vh;min-height:0;}
html.hero-scroll .hero-logo,html.hero-scroll .hero-word{transform-origin:50% 50%;will-change:translate,scale;}
html.hero-scroll .hero-copy{will-change:opacity,translate;}
/* Antes de que el script calcule la posición inicial no se muestra la composición final;
   si el script no corriera, a los 1.5 s aparece igual */
html.hero-scroll:not(.hero-ready) .hero-inner{opacity:0;animation:hero-fallback 0s 1.5s forwards;}
@keyframes hero-fallback{to{opacity:1;}}
/* Indicador de scroll: solo mientras el hero está por armarse */
.hero-cue{display:none;}
html.hero-scroll .hero-cue{display:block;position:absolute;left:50%;bottom:26px;z-index:3;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.45);border-radius:14px;pointer-events:none;}
html.hero-scroll .hero-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.6s ease-in-out infinite;}
@keyframes cue{0%{opacity:0;transform:translateY(0);}30%{opacity:1;}100%{opacity:0;transform:translateY(12px);}}

/* ---------- Inicio: cada sección ocupa la pantalla y se avanza una por una (html.snap-home) ---------- */
html.snap-home [data-panel]{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
html.snap-home .routes{padding:calc(var(--header-h) + 28px) 0 48px;}
html.snap-home .panel-group .faq{padding:56px 0 72px;}
html.snap-home .standoff .side{padding-top:calc(var(--header-h) + 28px);padding-bottom:56px;}
html.snap-home .cta{padding-top:calc(var(--header-h) + 40px);}

/* ---------- Fotografía que "cae" al entrar en pantalla (el efecto de la v1) ---------- */
.photo-drop{margin:0;}
.photo-drop img{width:100%;height:100%;object-fit:cover;}

/* Tres rutas: la foto firma de cada eje encabeza su tarjeta */
.route-photo{position:relative;margin:-44px -36px 28px;aspect-ratio:16/10;overflow:hidden;background:var(--axis-soft);}
.route-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, color-mix(in srgb, var(--axis) 42%, transparent), transparent 62%);mix-blend-mode:multiply;}
.route-photo img{transition:transform .9s var(--ease-out);}
.reveal-ready [data-reveal] .route-photo img{opacity:0;transform:translateY(-26px) scale(1.25);transition:opacity .7s ease-out .15s, transform .9s cubic-bezier(.34,1.56,.64,1) .15s;}
.reveal-ready [data-reveal].is-in .route-photo img{opacity:1;transform:none;}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .route:hover .route-photo img,
  .reveal-ready [data-reveal].is-in:hover .route-photo img{transform:scale(1.06);transition:transform .9s var(--ease-out);}
  /* La pista "+" queda sobre la foto: fondo claro para que se lea */
  .route-hint{background:rgba(255,255,255,.92);border-color:transparent;}
}
@media (max-width:1023px){
  .route-photo{grid-column:1 / -1;grid-row:1;margin:0 -64px 18px -4px;aspect-ratio:21/9;border-radius:6px;}
  .route-art{grid-row:2 / span 3;}
  /* El "+" táctil puede quedar sobre la foto: círculo claro detrás */
  .route-toggle::after{width:30px;height:30px;border-radius:50%;background-color:rgba(255,255,255,.92);
    background-image:linear-gradient(var(--deep),var(--deep)), linear-gradient(var(--deep),var(--deep));background-size:14px 2px, 2px 14px;}
}

/* Preguntas frecuentes del Inicio: la columna del título lleva una foto */
.faq-side{display:flex;flex-direction:column;gap:32px;}
.faq-photo{aspect-ratio:4/3;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(28,36,48,.45);}
.reveal-ready .faq-photo[data-reveal]{transform:translateY(-46px);transition:opacity .7s ease-out, transform .8s cubic-bezier(.34,1.56,.64,1);}
.reveal-ready .faq-photo[data-reveal].is-in{transform:none;}
@media (max-width:767px){ .faq-photo{aspect-ratio:16/9;} }

/* CTA (todas las páginas): la foto del pizarrón, apenas visible detrás de las luces */
.cta-photo{position:absolute;inset:0;z-index:-2;pointer-events:none;}
.cta-photo img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:grayscale(1) contrast(1.15);}
.cta-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, var(--void) 16%, rgba(10,18,32,.55) 55%, rgba(10,18,32,.88) 100%);}

/* Páginas de eje y Nosotros: franja fotográfica con el color del eje y desplazamiento suave */
.photo-band{position:relative;margin:0;height:clamp(240px,46vh,520px);overflow:hidden;isolation:isolate;background:var(--void);}
.photo-band img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--py,0px),0);will-change:transform;}
.photo-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:color-mix(in srgb, var(--axis) 55%, #0A1220);mix-blend-mode:multiply;opacity:.55;}
.photo-band::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,18,32,.55) 0%, rgba(10,18,32,0) 30%, rgba(10,18,32,0) 70%, rgba(10,18,32,.45) 100%);}

@media (prefers-reduced-motion:reduce){
  .reveal-ready [data-reveal] .route-photo img,.reveal-ready .faq-photo[data-reveal]{opacity:1;transform:none;}
  .photo-band img{transform:none;}
}

/* WEB-002: logos de aliados como enlaces */
.ally-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:calc(100% + 24px);margin:0 -12px;height:100%;color:inherit;text-decoration:none;}
.ally-link:focus-visible{outline-offset:-3px;}

/* Hero de referencia (inicio de peachpuff): wordmark con la fuente de palegoldenrod y logo sin sombra.
   Solo aplica donde el escenario del hero lleva data-hero-ref. */
[data-hero-ref] .hero-word{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}
[data-hero-ref] .hero-logo svg{filter:none;}