/* ==========================================================================
   TRINITY — SISTEMA DE FUNNEL DE INDUSTRIA
   Base compartida por las landings de industria (Retail, Constructoras, …).
   Implementa el ritmo de secciones y los componentes que fijan los
   Commercial Funnel Masters y las Funnels Global Rules v1.0

   Implementa el ritmo de secciones de §11 del Funnel Master:
   foto → iconos → diagrama → cards → captura → diagrama → chips →
   before/after → foto → timeline → formulario → accordion.

   Regla de §6: un mensaje principal + un recurso visual dominante +
   una acción principal por sección. Por eso ninguna sección mezcla
   fotografía con diagrama, ni captura con pared de iconos.

   Paleta: solo tokens.css. Acá no se declara ningún color de marca.
   ========================================================================== */

:root{
  --line-soft:#E2E5EA;
  --w-page:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--c-white);color:var(--c-ink);
  font:var(--t-body)/var(--lh-body) var(--f-text);-webkit-font-smoothing:antialiased;
}
/* height:auto es obligatorio: los <img> llevan width/height reales para
   reservar espacio (CLS), y sin esto conservarían el alto del atributo. */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{margin:0;font-family:var(--f-display);color:var(--c-navy);text-wrap:balance}

h1{font-size:var(--t-h1);line-height:1.04;letter-spacing:var(--ls-display)}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.028em}
h3{font-size:var(--t-h3);line-height:var(--lh-snug);letter-spacing:-.018em}

.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{width:min(var(--w-page),100%);margin-inline:auto;padding-inline:var(--s-gutter)}
.sec{padding-block:var(--s-section)}
.sec--cloud{background:var(--c-cloud)}
.sec--navy{background:var(--c-navy);color:var(--c-on-dark)}
.sec--navy h2,.sec--navy h3{color:var(--c-on-dark)}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--c-red);outline-offset:3px;
}
.sec--navy :where(a,button,input,select,summary):focus-visible{outline-color:#fff}

.skip{
  position:fixed;left:14px;top:14px;z-index:99;padding:12px 16px;
  background:#fff;font-weight:600;text-decoration:none;
  border-radius:var(--r-control);transform:translateY(-200%);
}
.skip:focus{transform:none}

/* --- Etiqueta de sección: regla roja + rótulo ---------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:14px;margin-bottom:var(--s-6);
  font:700 var(--t-meta)/1 var(--f-text);
  letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--c-red-on-light);
}
.eyebrow::before{content:"";flex:none;width:36px;height:2px;background:var(--c-red)}
.sec--navy .eyebrow{color:#fff}
.sec--navy .eyebrow::before{background:var(--c-red-bright)}

.lead{max-width:52ch;font-size:var(--t-lead);line-height:1.6;color:var(--c-gray)}
.body{max-width:var(--w-text);color:var(--c-gray)}
.sec--navy .lead,.sec--navy .body{color:var(--c-on-dark-2)}

/* --- Acciones ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding-inline:30px;
  background:var(--c-red);color:#fff;text-decoration:none;
  font:700 15px/1 var(--f-text);border:0;cursor:pointer;
  clip-path:var(--chamfer);
  transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.btn:hover{background:var(--c-red-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}

.linkr{
  display:inline-flex;align-items:center;gap:10px;padding-block:8px;
  font:700 15px/1.4 var(--f-text);color:var(--c-navy);text-decoration:none;
  border-bottom:2px solid var(--c-red);
}
.linkr>.lucide{transition:transform var(--dur-base) var(--ease)}
.linkr:hover>.lucide{transform:translateX(4px)}
.sec--navy .linkr{color:#fff;border-bottom-color:var(--c-red-bright)}

/* --- Migas --------------------------------------------------------------- */
.crumb{display:flex;flex-wrap:wrap;gap:9px;padding-top:var(--s-6);font-size:var(--t-meta);color:var(--c-gray)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb [aria-current]{color:var(--c-navy);font-weight:600}

/* --- Íconos: una sola familia, lineal, siempre con texto al lado --------- */
.ico{
  display:block;width:26px;height:26px;flex:none;
  fill:none;stroke:var(--c-navy);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico--red{stroke:var(--c-red)}

/* ==========================================================================
   01 · HERO — 7/12 texto + 5/12 fotografía operativa (§27.1)
   ========================================================================== */

.hero{padding-block:clamp(36px,4vw,56px) clamp(56px,7vw,96px)}
.hero__grid{
  display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
/* Tres hijos: texto (col 1), fotografía (col 2, ambas filas) y micro-prueba
   debajo del texto. La foto acompaña toda la altura del bloque. */
.hero__head{grid-column:1;grid-row:1}
.hero__figure{grid-column:2;grid-row:1/span 2}
.hero__trust{grid-column:1;grid-row:2}
.hero h1{max-width:14ch}
.hero__lead{margin-top:var(--s-6);max-width:46ch;font-size:var(--t-lead);line-height:1.6;color:var(--c-gray)}
.hero__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6);margin-top:var(--s-10)}
.hero__trust{
  margin-top:var(--s-10);padding-top:var(--s-6);max-width:56ch;
  border-top:1px solid var(--line-soft);
  font-size:var(--t-sm);color:var(--c-gray);
}
/* La foto no es un rectángulo suelto: chaflán de marca, marco desplazado
   detrás y un velo inferior que la ancla al fondo. */
.hero__figure{position:relative;isolation:isolate}
.hero__frame{
  --off:26px;
  position:absolute;z-index:0;
  inset:var(--off) calc(var(--off) * -1) calc(var(--off) * -1) var(--off);
  border:2px solid var(--c-navy);opacity:.16;
  clip-path:var(--chamfer-lg);
}
/* La foto mide lo mismo en las ocho industrias: la proporción de
   Constructoras, que es la aprobada.

   Antes la figura se estiraba al alto de la columna de texto
   (align-self:stretch + height:100%), así que el alto dependía de lo
   largo que fueran el titular y la bajada de cada página. Medido a
   1440px: Constructoras 706px, Retail/Distribuidoras/Talleres 741px,
   Clínicas 770px, Gastronomía/Manufactura/Desarrolladoras 806px. Cien
   píxeles de diferencia entre la más chica y la más grande.

   Con aspect-ratio el alto sale del ancho de la columna, que es el
   mismo en todas, así que quedan idénticas — y además la proporción se
   mantiene al cambiar de viewport, cosa que un alto fijo no daría. */
.hero__figure{align-self:start}
.hero__media{
  position:relative;z-index:1;display:block;overflow:hidden;
  aspect-ratio:450/706;
  clip-path:var(--chamfer-lg);background:var(--c-navy);
}
.hero__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to top,rgba(20,24,38,.55),transparent);
  pointer-events:none;
}
/* Sin min-height: pelearía contra el aspect-ratio del contenedor. */
.hero__figure img{
  width:100%;height:100%;min-height:0;
  object-fit:cover;object-position:42% center;
}
/* Barrido: una sola pasada al revelarse. Explica "lectura del sistema" sin
   caer en el glitch prohibido por §26. */
.hero__scan{
  position:absolute;left:0;right:0;top:0;height:120px;opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(224,43,43,.18) 55%,var(--c-red-bright));
  pointer-events:none;
}
.hero__figure.is-visible .hero__scan{animation:scan 1.6s var(--ease) .35s 1 both}
/* El recorrido tiene que cubrir la foto ya estirada, no los 560px viejos. */
@keyframes scan{
  0%{opacity:0;transform:translateY(-120px)}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0;transform:translateY(820px)}
}
/* Mobile (§27.1): texto → CTA → fotografía → micro-prueba. */
@media(max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s-8)}
  .hero__head,.hero__figure,.hero__trust{grid-column:auto;grid-row:auto}
  .hero__head{order:1}
  .hero__figure{order:2}
  /* El marco no puede salirse del gutter en pantallas chicas. */
  .hero__frame{--off:14px}
  /* En una columna la foto es una franja apaisada, no el vertical del
     desktop: se suelta la proporción y manda el alto propio. */
  .hero__media{aspect-ratio:auto}
  .hero__figure img{height:clamp(260px,54vw,400px);min-height:0}
  .hero__trust{order:3;margin-top:0}
}
@media(max-width:560px){
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .btn{width:100%}
  .hero__acts .linkr{justify-content:center}
}

/* ==========================================================================
   MICROBARRA DE PLATAFORMA — Global Rules §4

   Franja fina bajo el hero. Cuatro conceptos separados por punto medio en
   desktop; en mobile se apilan en dos columnas para no achicar la letra.
   ========================================================================== */

/* Cuando la microbarra sigue al hero, el hero cierra más corto: 96px de aire
   antes de una franja fina se leían como un bloque roto. */
.hero:has(+ .microbar){padding-bottom:clamp(32px,3.5vw,52px)}

.microbar{position:relative;background:var(--c-navy);color:#fff;overflow:hidden}
/* Trama de plano, como en las secciones oscuras: la franja deja de ser un
   rectángulo plano sin dejar de ser una franja. */
.microbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--c-line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--c-line-dark) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 62%);
  mask-image:linear-gradient(90deg,#000,transparent 62%);
}
/* OJO: .microbar__in también es .wrap. Nada de margin:0 acá, que pisaría el
   margin-inline:auto y tiraría la franja contra el borde izquierdo. */
.microbar__in{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;
  /* El rombo va dentro del <li> siguiente, así que este gap y el de adentro
     del item tienen que ser iguales: si no, el separador queda pegado a un
     lado. 20 + rombo + 20. */
  gap:var(--s-3) var(--s-5);
  padding-block:var(--s-5);list-style:none;
}
.microbar__in li{
  display:flex;align-items:center;gap:var(--s-5);
  font:700 var(--t-meta)/1.2 var(--f-text);
  letter-spacing:var(--ls-meta);text-transform:uppercase;
}
/* Rombo rojo entre conceptos: la misma figura que marca el avance en el
   diagrama de flujo. */
.microbar__in li+li::before{
  content:"";flex:none;width:6px;height:6px;
  background:var(--c-red-bright);transform:rotate(45deg);
}
@media(max-width:820px){
  .microbar__in{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-5)}
  .microbar__in li+li::before{display:none}
  .microbar__in li{gap:10px;letter-spacing:.06em}
  .microbar__in li::after{
    content:"";order:-1;flex:none;width:6px;height:6px;
    background:var(--c-red-bright);transform:rotate(45deg);
  }
}
@media(max-width:480px){
  .microbar__in{grid-template-columns:1fr}
}

/* ==========================================================================
   02 · RECONOCIMIENTO DEL PROBLEMA — grid 2×2, iconos lineales (§27.2)
   ========================================================================== */

.probl h2{max-width:20ch}
.probl__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,64px);
}
.probl__grid article{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:start}
.probl__grid h3{font-size:var(--t-h4);margin-bottom:var(--s-2)}
.probl__grid p{font-size:var(--t-sm);color:var(--c-gray)}
.probl__close{
  margin-top:clamp(40px,5vw,64px);padding-top:var(--s-6);
  max-width:58ch;border-top:2px solid var(--c-navy);
  font-size:var(--t-lead);line-height:1.55;color:var(--c-navy);font-weight:600;
}
@media(max-width:820px){.probl__grid{grid-template-columns:1fr}}

/* ==========================================================================
   03 · OPERACIÓN CONECTADA — diagrama protagonista sobre Azul Noche (§27.3)

   Dibujado en HTML/CSS y no en un SVG con texto: §20 pide que el contenido
   crítico sea texto rastreable, y §24 que en mobile el flujo pase a vertical.
   ========================================================================== */

.flujo__head{max-width:60ch}
.flujo__head p+p{margin-top:var(--s-4)}
/* Los nodos son piezas separadas, no una tira partida por líneas: la flecha
   necesita aire propio para leerse como paso de una a otra. El gap y el
   desplazamiento de la flecha están atados a la misma variable. */
.flujo__chain{
  --paso:var(--s-6);
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  gap:var(--paso);
  margin:clamp(48px,6vw,88px) 0 0;padding:0;list-style:none;
}
.flujo__chain li{
  position:relative;display:grid;justify-items:center;align-content:center;gap:var(--s-3);
  min-height:168px;padding:var(--s-6) var(--s-4);text-align:center;
  border:1px solid var(--c-line-dark-2);
  transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.flujo__chain b{
  font:700 clamp(13px,1.15vw,16px)/1.3 var(--f-display);
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
}
.flujo__n{
  font:700 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--c-on-dark-3);
  transition:color var(--dur-base) var(--ease);
}
.flujo__chain .ico{
  width:30px;height:30px;stroke:var(--c-on-dark-2);
  transition:stroke var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
/* Encendido: el nodo pasa de apagado a activo cuando el bloque se revela. */
.f-js .flujo__chain li{background:transparent}
.f-js .flujo__chain.is-visible li{background:rgba(255,255,255,.03)}
.flujo__chain.is-visible .ico{stroke:#fff}
.flujo__chain.is-visible .flujo__n{color:var(--c-on-dark-2)}

.flujo__chain li:hover{background:var(--c-navy-2);border-color:var(--c-line-dark-2)}
.flujo__chain li:hover .ico{stroke:var(--c-red-bright);transform:translateY(-3px)}

.flujo__chain li:last-child{border:1px solid var(--c-red);background:var(--c-red)}
.f-js .flujo__chain li:last-child,
.f-js .flujo__chain.is-visible li:last-child{background:var(--c-red)}
.flujo__chain li:last-child .ico,
.flujo__chain.is-visible li:last-child .ico{stroke:#fff}
.flujo__chain li:last-child .flujo__n,
.flujo__chain.is-visible li:last-child .flujo__n{color:var(--c-on-red-2)}
.flujo__chain li:last-child:hover{background:var(--c-red-hover)}
.flujo__chain li:last-child:hover .ico{stroke:#fff}
/* La flecha va centrada en el espacio entre nodos: mitad del gap, menos la
   mitad de su propio ancho. Si el gap cambia, la flecha lo sigue sola. */
.flujo__chain li+li::before{
  content:"";position:absolute;top:50%;z-index:1;
  left:calc((var(--paso) / 2 + 5px) * -1);
  width:10px;height:10px;margin-top:-5px;
  border-top:2px solid var(--c-red-bright);border-right:2px solid var(--c-red-bright);
  transform:rotate(45deg);
}
/* En vertical el nodo se lee como una fila: número, ícono y etiqueta. */
@media(max-width:860px){
  .flujo__chain{grid-template-columns:1fr}
  .flujo__chain li{
    min-height:0;padding:var(--s-5) var(--s-4);text-align:left;
    grid-template-columns:auto auto 1fr;justify-items:start;align-items:center;gap:var(--s-4);
  }
  .flujo__chain .ico{width:24px;height:24px}
  /* En vertical la flecha baja: mismo cálculo, sobre el eje Y. */
  .flujo__chain li+li::before{
    left:50%;top:calc((var(--paso) / 2 + 5px) * -1);
    margin:0 0 0 -5px;transform:rotate(135deg);
  }
}

/* ==========================================================================
   04 · NÚCLEO RETAIL — 3×2 cards con icono (§27.4)
   ========================================================================== */

.nucleo__head{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,64px);align-items:end;
}
.nucleo__head h2{max-width:18ch}
.nucleo__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3vw,48px);margin-top:clamp(44px,5vw,72px);
}
.nucleo__grid article{padding-top:var(--s-6);border-top:2px solid var(--c-navy)}
.nucleo__grid .ico{margin-bottom:var(--s-5)}
.nucleo__grid h3{font-size:var(--t-h4);margin-bottom:var(--s-3)}
.nucleo__grid p{font-size:var(--t-sm);color:var(--c-gray)}
.nucleo__more{margin-top:clamp(36px,4vw,56px)}
@media(max-width:1000px){
  .nucleo__head{grid-template-columns:1fr;align-items:start}
  .nucleo__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.nucleo__grid{grid-template-columns:1fr}}

/* ==========================================================================
   05 · PRODUCTO REAL — 5/12 texto + 7/12 captura (§27.5)

   Los callouts son marcadores numerados sobre la captura MÁS una leyenda
   en texto. En mobile el marcador se apaga y queda la leyenda: §20 prohíbe
   que la información viva solo dentro de la imagen.
   ========================================================================== */

.real__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,64px);align-items:center}
.real__grid p+p{margin-top:var(--s-4)}
.real__legend{margin-top:var(--s-8);padding:0;list-style:none;display:grid;gap:var(--s-3)}
.real__legend li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);font-size:var(--t-sm);color:var(--c-gray)}
.real__legend b{
  display:grid;place-items:center;width:24px;height:24px;
  background:var(--c-red);color:#fff;border-radius:50%;
  font:700 12px/1 var(--f-text);
}
.real__shot{margin:0}
/* Los marcadores se ubican contra la imagen, no contra la figura: si midieran
   la figura, el epígrafe correría los porcentajes. */
.real__frame{position:relative}
/* Mockup con alfa: no lleva marco ni sombra propia, ya trae el dispositivo. */
.real__shot img{position:relative;z-index:1;width:100%}
/* Bloque rojo detrás del equipo: asoma arriba y a la derecha. */
.real__accent{
  position:absolute;z-index:0;top:-11%;right:-5%;width:32%;height:64%;
  background:var(--c-red);clip-path:var(--chamfer-lg);
}
/* El desplazamiento de entrada es solo vertical: uno horizontal empujaría
   el bloque fuera del gutter en mobile y aparecería scroll lateral. */
.f-js .real__accent{opacity:0;transform:translateY(-16px)}
.f-js .real__shot.is-visible .real__accent{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) .1s,transform .7s var(--ease) .1s;
}
.real__shot figcaption{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);
  margin-top:var(--s-4);font-size:var(--t-meta);color:var(--c-gray);
}
.real__shot figcaption .demo{
  padding:3px 9px;background:var(--c-cloud);border:1px solid var(--c-line-strong);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink);
}
/* left/top marcan el CENTRO del marcador: así los porcentajes se leen
   directo contra la captura y no hay que descontar el radio. */
.real__pin{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:30px;height:30px;transform:translate(-50%,-50%);
  background:var(--c-red);color:#fff;
  border:2px solid #fff;border-radius:50%;box-shadow:var(--e-2);
  font:700 13px/1 var(--f-text);
}
@media(max-width:900px){
  .real__grid{grid-template-columns:1fr}
  .real__pin{display:none}
  /* En una columna el bloque no puede pasarse del gutter. */
  .real__accent{top:-14px;right:-10px;width:38%;height:60%}
}

/* ==========================================================================
   PLATAFORMA WEB — Global Rules §5

   El marco del teléfono se dibuja en CSS; adentro va una captura real de la
   plataforma. Nada de interfaces inventadas ni dispositivos de relleno (§7).
   ========================================================================== */

.plataforma__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.plataforma__claim{
  margin-top:var(--s-6);padding-left:var(--s-6);
  border-left:3px solid var(--c-red-bright);
  font:600 var(--t-lead)/1.5 var(--f-text);color:#fff;
}

.fono{margin:0;display:grid;justify-items:center;gap:var(--s-6)}

/* El marco: chasis con filo metálico arriba y abajo del degradado, para que
   no sea un rectángulo negro plano sobre un fondo navy casi del mismo tono. */
.fono__device{
  position:relative;width:min(268px,70vw);padding:9px;
  background:linear-gradient(157deg,#3D465C 0%,#131826 16%,#0B0E17 50%,#131826 84%,#3D465C 100%);
  border-radius:42px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 28px 56px -18px rgba(0,0,0,.75),
    0 10px 22px -14px rgba(0,0,0,.6);
}
/* Botones laterales: volumen a la izquierda, encendido a la derecha. */
.fono__device::before,
.fono__device::after{
  content:"";position:absolute;width:2px;
  background:linear-gradient(#525C73,#232A3A);
}
.fono__device::before{left:-2px;top:92px;height:62px;border-radius:2px 0 0 2px}
.fono__device::after{right:-2px;top:114px;height:46px;border-radius:0 2px 2px 0}

/* La pantalla lleva una banda superior del color de fondo de la propia
   captura (--pantalla). Sin esa banda el notch tapa la primera fila de la
   interfaz; con ella queda como en un teléfono real. */
.fono__screen{
  position:relative;display:block;overflow:hidden;
  padding-top:22px;border-radius:34px;
  background:var(--pantalla,#fff);
  /* Filo interno: sin esto la captura clara queda pegada sobre el chasis
     oscuro, como recortada y superpuesta. */
  box-shadow:inset 0 0 0 1px rgba(11,14,23,.12);
}
.fono__screen img{width:100%;display:block}
/* La captura termina donde termina el recorte, casi siempre a mitad de una
   tarjeta. Sin esto se lee como un corte mal hecho; con esto se lee como que
   la pantalla sigue hacia abajo. */
.fono__screen::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(to bottom,transparent,var(--pantalla,#fff));
}
.fono__notch{
  position:absolute;z-index:1;top:0;left:50%;
  width:94px;height:22px;margin-left:-47px;
  background:#0B0E17;border-radius:0 0 13px 13px;
}
.fono figcaption{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-3);
  font-size:var(--t-meta);color:var(--c-on-dark-3);text-align:center;
}
.fono figcaption .demo{
  padding:3px 9px;border:1px solid var(--c-line-dark);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-on-dark-2);
}
@media(max-width:900px){
  .plataforma__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   PLACEHOLDER DE CAPTURA PENDIENTE

   Reserva el lugar de una captura real que todavía no existe, manteniendo la
   proporción para que no haya salto de layout cuando llegue. Está rotulado a
   propósito: nunca se inventa una interfaz para rellenar (Global Rules §7).

   Marcado con data-pendiente para poder auditarlos antes de publicar.
   ========================================================================== */

.pendiente{
  display:grid;place-items:center;gap:var(--s-4);
  aspect-ratio:16/10;padding:var(--s-6);text-align:center;
  background:var(--c-navy-2);border:1px dashed var(--c-line-dark-2);
  clip-path:var(--chamfer-lg);
}
.sec--cloud .pendiente,.sec:not(.sec--navy) .pendiente{
  background:var(--c-white);border-color:var(--c-line-strong);
}
.pendiente__rotulo{
  padding:5px 12px;background:var(--c-red);color:#fff;
  font:700 11px/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;
}
.pendiente p{max-width:34ch;font-size:var(--t-sm);color:var(--c-gray)}
.sec--navy .pendiente p{color:var(--c-on-dark-2)}
.pendiente .ico{width:34px;height:34px;stroke:var(--c-line-strong)}

/* ==========================================================================
   06 · MULTISUCURSAL — 6/12 diagrama + 6/12 copy (§27.6)
   ========================================================================== */

.multi__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
/* El diagrama se coloca a la izquierda aunque en el HTML venga después. */
.multi__grid .org{grid-column:1;grid-row:1}
.multi__grid p+p{margin-top:var(--s-4)}
.multi blockquote{
  margin:var(--s-8) 0 0;padding-left:var(--s-6);
  border-left:3px solid var(--c-red);
  font:600 var(--t-lead)/1.5 var(--f-text);color:var(--c-navy);
}

/* Diagrama: DIRECCIÓN → VISIÓN CONSOLIDADA → 3 puntos. */
.org{display:grid;justify-items:center;gap:0;text-align:center}
.org__box{
  display:grid;place-items:center;width:100%;max-width:320px;min-height:64px;
  padding:var(--s-4) var(--s-5);background:var(--c-navy);color:#fff;
  font:700 var(--t-meta)/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase;
}
.org__box--soft{background:transparent;color:var(--c-navy);border:2px solid var(--c-navy)}
.org__stem{width:2px;height:34px;background:var(--c-line-strong)}
.org__branches{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);width:100%;padding:34px 0 0;margin:0;list-style:none;
}
/* Travesaño + bajadas: dibujados con bordes, no con una imagen.
   El travesaño termina en el centro de la primera y la última columna:
   media columna = (ancho - 2 gaps) / 6. Con porcentajes redondos quedaría
   corto y las bajadas no engancharían. */
.org__branches::before{
  content:"";position:absolute;top:17px;height:2px;background:var(--c-line-strong);
  left:calc((100% - 2 * var(--s-4)) / 6);
  right:calc((100% - 2 * var(--s-4)) / 6);
}
/* Bajada desde la visión consolidada hasta el travesaño. */
.org__branches::after{
  content:"";position:absolute;top:0;left:50%;width:2px;height:18px;
  margin-left:-1px;background:var(--c-line-strong);
}
.org__branches li{position:relative;display:grid;justify-items:center}
.org__branches li::before{
  content:"";position:absolute;top:-17px;left:50%;width:2px;height:17px;
  margin-left:-1px;background:var(--c-line-strong);
}
.org__node{
  display:grid;place-items:center;align-content:center;gap:6px;
  width:100%;min-height:86px;padding:var(--s-4) var(--s-2);
  background:#fff;border:1px solid var(--line-soft);border-top:3px solid var(--c-red);
}
.org__node b{font:700 var(--t-meta)/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--c-navy)}
.org__node span{font-size:var(--t-meta);color:var(--c-gray)}
@media(max-width:820px){
  /* En una columna manda el orden del HTML: título, texto y después diagrama. */
  .multi__grid{grid-template-columns:1fr}
  .multi__grid .org{grid-column:auto;grid-row:auto}
  .org__branches{grid-template-columns:1fr;gap:0;padding-top:0}
  .org__branches::before,.org__branches::after{display:none}
  .org__branches li{width:100%;max-width:320px;margin-inline:auto;padding-top:26px}
  .org__branches li::before{top:0;height:26px}
}

/* ==========================================================================
   07 · CONFIGURABLES Y OPCIONALES — tres niveles, chips compactos (§27.7)
   ========================================================================== */

.conf__head{max-width:62ch}
.conf__base{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  margin-top:clamp(36px,4vw,56px);padding:var(--s-5) var(--s-6);
  background:var(--c-navy);color:#fff;
}
.conf__base b{font:700 var(--t-h4)/1.2 var(--f-display)}
.conf__base span{font-size:var(--t-sm);color:var(--c-on-dark-2)}

/* §24 — En mobile los configurables y opcionales viven en accordion; en
   desktop quedan abiertos y el summary no se comporta como control. El
   <details> nace abierto, así que sin JS todo el contenido es visible. */
.conf__level{margin-top:clamp(32px,4vw,48px)}
.conf__level>summary{display:block;list-style:none;cursor:default}
.conf__level>summary::-webkit-details-marker{display:none}
.conf__level h3{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line-soft);
  font-size:var(--t-h4);
}
/* El grupo de módulos adicionales es profundidad: nace plegado también en
   desktop. Lo configurable, que es el argumento de adaptabilidad, queda
   abierto. Así la sección entra en el presupuesto de palabras (§12) sin
   esconder lo que sostiene el mensaje. */
.conf__level--fold>summary{cursor:pointer}
.conf__level--fold h3{padding-right:34px}
.conf__level--fold h3::after,.conf__level--fold h3::before{
  content:"";position:absolute;right:4px;top:calc(50% - var(--s-2));background:var(--c-red);
}
.conf__level--fold h3::after{width:16px;height:2px;margin-top:-1px}
.conf__level--fold h3::before{
  width:2px;height:16px;margin:-8px 7px 0 0;
  transition:transform var(--dur-base) var(--ease);
}
.conf__level--fold[open] h3::before{transform:scaleY(0)}

@media(max-width:900px){
  .conf__level>summary{cursor:pointer}
  .conf__level h3{padding-right:34px}
  .conf__level h3::after,.conf__level h3::before{
    content:"";position:absolute;right:4px;top:calc(50% - var(--s-2));background:var(--c-red);
  }
  .conf__level h3::after{width:16px;height:2px;margin-top:-1px}
  .conf__level h3::before{
    width:2px;height:16px;margin:-8px 7px 0 0;
    transition:transform var(--dur-base) var(--ease);
  }
  .conf__level[open] h3::before{transform:scaleY(0)}
}
.tag{
  padding:4px 10px;font:700 11px/1.4 var(--f-text);
  letter-spacing:.14em;text-transform:uppercase;
}
.tag--conf{background:var(--c-cloud);color:var(--c-navy);border:1px solid var(--c-line-strong)}
.tag--mod{background:var(--c-red);color:#fff}

.conf__tiles{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-6) clamp(24px,3vw,40px);margin:var(--s-6) 0 0;padding:0;list-style:none;
}
.conf__tiles li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start}
.conf__tiles .ico{width:22px;height:22px;margin-top:2px}
.conf__tiles b{display:block;font:600 var(--t-body)/1.35 var(--f-text);color:var(--c-navy)}
.conf__tiles span{display:block;margin-top:4px;font-size:var(--t-sm);color:var(--c-gray)}
.conf__cta{margin-top:clamp(36px,4vw,56px)}
@media(max-width:900px){.conf__tiles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.conf__tiles{grid-template-columns:1fr}}

/* ==========================================================================
   08 · EVIDENCIA — antes → después, sin logos hasta que haya permiso (§27.8)
   ========================================================================== */

.casos h2{max-width:24ch}
.casos__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3vw,44px);margin-top:clamp(40px,5vw,64px);
}
.casos__grid article{padding-top:var(--s-6);border-top:2px solid var(--c-navy)}
/* El antes → después no agrega palabras: parte en dos el mismo título. */
.casos__ba{display:grid;gap:var(--s-3);margin-bottom:var(--s-4)}
.casos__ba span{display:block}
.casos__ba span:first-child{color:var(--c-gray)}
.casos__ba span+span{position:relative;padding-top:var(--s-4)}
.casos__ba span+span::before{
  content:"";position:absolute;top:0;left:0;width:28px;height:2px;background:var(--c-red);
}
.casos__grid h3{font-size:var(--t-h4);margin-bottom:var(--s-3)}
.casos__grid p{font-size:var(--t-sm);color:var(--c-gray)}
.casos__note{
  margin-top:clamp(32px,4vw,48px);padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);font-size:var(--t-sm);color:var(--c-gray);
}
@media(max-width:900px){.casos__grid{grid-template-columns:1fr}}

/* ==========================================================================
   09 · POR QUÉ TRINITY — 5/12 fotografía + 7/12 contenido (§27.9)
   ========================================================================== */

.porque__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,72px);align-items:center}
/* Mismo tratamiento que el hero, espejado: el marco cae hacia la izquierda. */
.porque__figure{position:relative;isolation:isolate}
.porque__frame{
  --off:26px;
  position:absolute;z-index:0;
  inset:var(--off) var(--off) calc(var(--off) * -1) calc(var(--off) * -1);
  border:2px solid var(--c-navy);opacity:.16;clip-path:var(--chamfer-lg);
}
.porque__media{
  position:relative;z-index:1;display:block;overflow:hidden;
  clip-path:var(--chamfer-lg);background:var(--c-navy);
}
.porque figure img{width:100%;height:clamp(340px,42vw,520px);object-fit:cover;object-position:center 42%}
.porque h2{max-width:18ch}
.porque__intro{margin-top:var(--s-6)}
.porque__intro p+p{margin-top:var(--s-4)}
.porque__pilares{margin:var(--s-10) 0 0;padding:0;list-style:none;display:grid;gap:0}
.porque__pilares li{padding-block:var(--s-5);border-top:1px solid var(--line-soft)}
.porque__pilares li:last-child{border-bottom:1px solid var(--line-soft)}
.porque__pilares b{display:block;margin-bottom:4px;font:700 var(--t-h4)/1.3 var(--f-display);color:var(--c-navy)}
.porque__pilares span{font-size:var(--t-sm);color:var(--c-gray)}
.porque__close{margin-top:var(--s-8);font-weight:600;color:var(--c-navy);max-width:60ch}
.porque--sinfoto .porque__head{max-width:var(--w-text)}
.porque--sinfoto .porque__intro{margin-top:var(--s-6)}
.porque--sinfoto .porque__intro p+p{margin-top:var(--s-4)}
.porque__pilares--fila{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,64px)}
.porque__pilares--fila li{padding:var(--s-6) 0 0;border-top:2px solid var(--c-navy);border-bottom:0}
.porque__pilares--fila li:last-child{border-bottom:0}
@media(max-width:980px){
  .porque__grid{grid-template-columns:1fr}
  .porque__frame{--off:14px}
  .porque figure img{height:clamp(240px,50vw,360px)}
  .porque__pilares--fila{grid-template-columns:1fr;gap:0}
  .porque__pilares--fila li{padding-block:var(--s-5);border-top:1px solid var(--c-line)}
  .porque__pilares--fila li:first-child{border-top:2px solid var(--c-navy)}
}

/* ==========================================================================
   10 · METODOLOGÍA — timeline de cinco pasos, sin fotografía (§27.10)
   ========================================================================== */

.metodo__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:start}
.metodo ol{margin:0;padding:0;list-style:none;border-top:2px solid var(--c-navy)}
.metodo li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);
  padding-block:var(--s-6);border-bottom:1px solid var(--line-soft);
}
.metodo b{font:700 var(--t-meta)/1.9 var(--f-mono);color:var(--c-red-on-light)}
.metodo h3{font-size:var(--t-h4);margin-bottom:4px}
.metodo p{font-size:var(--t-sm);color:var(--c-gray);max-width:52ch}
@media(max-width:900px){.metodo__grid{grid-template-columns:1fr}}

/* ==========================================================================
   11 · CTA / DIAGNÓSTICO — Azul Noche, formulario de 5 campos (§27.11)
   ========================================================================== */

.cta__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.cta h2{max-width:16ch}
.cta__grid>div>.lead{margin-top:var(--s-6)}
.cta__micro{
  margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid var(--c-line-dark);
  font:700 var(--t-body)/1.5 var(--f-text);color:#fff;
}
.cta__directo{display:grid;gap:10px;margin-top:var(--s-6)}
.cta__directo a{
  width:max-content;max-width:100%;overflow-wrap:anywhere;
  color:#fff;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.55);
}
@media(max-width:980px){.cta__grid{grid-template-columns:1fr}}

/* Panel oscuro sobre Azul Noche en vez de la caja blanca: el formulario deja
   de ser un recorte pegado y pasa a ser parte del bloque. El chaflán y la
   regla roja superior son la firma de marca. */
.form{
  position:relative;padding:clamp(26px,3vw,40px);
  background:var(--c-navy-2);color:var(--c-on-dark);
  clip-path:var(--chamfer-lg);
  box-shadow:inset 0 3px 0 var(--c-red);
}
.form__head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  margin-bottom:var(--s-3);
}
.form__head strong{font:700 var(--t-h3)/1.2 var(--f-display);color:#fff}
.form__head p{font-size:var(--t-meta);color:var(--c-on-dark-3)}
.form__head b{color:#fff}

.form__progress{
  height:2px;margin-bottom:var(--s-6);background:var(--c-line-dark-2);overflow:hidden;
}
.form__progress span{
  display:block;height:100%;width:0;background:var(--c-red-bright);
  transition:width .4s var(--ease);
}

.form fieldset{margin:0;padding:0;border:0;min-width:0}
.form legend{margin-bottom:var(--s-5);font-size:var(--t-xs);color:var(--c-on-dark-2)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.form label{display:block;margin-bottom:var(--s-4)}
.form label>span{display:block;margin-bottom:var(--s-2);font-size:var(--t-meta);font-weight:700;color:#fff}
.form label small{font-weight:400;font-size:inherit;color:var(--c-on-dark-3)}
.form input,.form select{
  width:100%;height:52px;padding-inline:14px;
  font:400 var(--t-sm)/1.5 var(--f-text);color:#fff;background:var(--c-navy);
  border:1px solid var(--c-line-strong);border-radius:var(--r-control);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.form input::placeholder{color:var(--c-on-dark-3)}
.form select option{color:var(--c-ink);background:#fff}
.form :is(input,select):hover{border-color:#fff}
.form :is(input,select):focus{
  outline:0;border-color:var(--c-red-bright);
  box-shadow:0 0 0 3px rgba(224,43,43,.45);
}
.form [aria-invalid="true"]{border-color:var(--c-red-bright);background:rgba(157,0,0,.22)}
.form__consent{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start}
.form__consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--c-red)}
.form__consent span{margin:0;font-size:var(--t-meta);font-weight:400;color:var(--c-on-dark-2)}
.form button{
  width:100%;min-height:56px;background:var(--c-red);color:#fff;border:0;
  border-radius:var(--r-control);cursor:pointer;font:700 15px var(--f-text);
  transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.form button:hover{background:var(--c-red-hover);transform:translateY(-2px)}
.form button:active{transform:translateY(1px)}
.form button:disabled{cursor:wait;opacity:.65}
.form__status{min-height:22px;margin-top:var(--s-3);font-size:var(--t-meta);font-weight:700;color:var(--c-on-dark-2)}
.form__status.is-error{color:#fff}
.form__status.is-success{color:var(--c-ok-on-dark)}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.done{
  padding:clamp(26px,3vw,40px);background:var(--c-navy-2);color:var(--c-on-dark);
  clip-path:var(--chamfer-lg);box-shadow:inset 0 3px 0 var(--c-red);
}
.done h3{margin-bottom:var(--s-4);color:#fff}
.done ol{margin:0 0 var(--s-6);padding-left:20px;font-size:var(--t-sm);color:var(--c-on-dark-2)}
.done li{margin-bottom:var(--s-2)}
@media(max-width:600px){.form__row{grid-template-columns:1fr;gap:0}}

/* ==========================================================================
   12 · FAQ — accordion nativo, texto siempre en HTML (§27.12)
   ========================================================================== */

.faq__grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(32px,5vw,72px);align-items:start}
.faq__list{border-top:2px solid var(--c-navy)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  position:relative;display:flex;justify-content:space-between;align-items:center;gap:var(--s-6);
  padding-block:var(--s-5);padding-right:34px;cursor:pointer;list-style:none;
  font:700 var(--t-h4)/1.35 var(--f-display);color:var(--c-navy);
}
.faq summary::-webkit-details-marker{display:none}
/* Signo + / − dibujado con dos reglas: solo el trazo vertical se retrae. */
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:4px;top:50%;background:var(--c-red);
}
.faq summary::after{width:16px;height:2px;margin-top:-1px}
.faq summary::before{
  width:2px;height:16px;margin:-8px 7px 0 0;
  transition:transform var(--dur-base) var(--ease);
}
.faq details[open] summary::before{transform:scaleY(0)}
.faq details>p{padding-bottom:var(--s-5);max-width:66ch;font-size:var(--t-sm);color:var(--c-gray)}
@media(max-width:900px){.faq__grid{grid-template-columns:1fr}}

/* ==========================================================================
   BARRA STICKY + PIE
   ========================================================================== */

.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:18px;padding:12px var(--s-gutter);
  background:var(--glass-bg);backdrop-filter:var(--glass-filter);
  border-top:1px solid var(--c-line-dark-2);
  transform:translateY(120%);transition:transform .3s var(--ease);
}
@supports not (backdrop-filter:blur(1px)){.sticky{background:var(--glass-solid)}}
.sticky.is-visible{transform:none}
.sticky p{font-size:var(--t-xs);color:var(--c-on-dark-2)}
.sticky p b{display:block;font:700 var(--t-sm)/1.3 var(--f-display);color:#fff}
.sticky .btn{margin-left:auto;flex:none;min-height:48px}
@media(max-width:620px){.sticky p{display:none}.sticky .btn{margin-left:0;width:100%}}

.pie{padding-block:clamp(48px,6vw,72px);background:var(--c-navy);color:#fff}
.pie__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.pie img{height:36px;width:auto}
.pie__firma{margin-top:16px;font-size:var(--t-meta);color:var(--c-on-dark-2)}
.pie__firma i{font-style:normal;color:var(--c-red-bright)}
.pie h4{margin-bottom:16px;font:700 var(--t-meta)/1 var(--f-text);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--c-on-dark-3)}
.pie ul{list-style:none;padding:0;display:grid;gap:10px}
.pie a{font-size:var(--t-xs);color:var(--c-on-dark-2);text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--c-line-dark);
  font-size:var(--t-meta);color:var(--c-on-dark-3);
}
@media(max-width:900px){.pie__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pie__grid{grid-template-columns:1fr}}

/* ==========================================================================
   CAPA TÉCNICA · trama, estados y trazados

   Todo lo de acá abajo es §26: aparición suave, trazado breve de diagramas,
   hover discreto. Nada se mueve en loop y nada retrasa la lectura.
   ========================================================================== */

/* --- Trama de plano en los bloques oscuros -------------------------------- */
.sec--navy{position:relative;overflow:hidden}
.sec--navy::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(var(--c-line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--c-line-dark) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 85% at 78% 0,#000 10%,transparent 72%);
  mask-image:radial-gradient(120% 85% at 78% 0,#000 10%,transparent 72%);
}
.sec--navy>.wrap{position:relative;z-index:1}

/* --- La regla del rótulo se dibuja al entrar ------------------------------ */
.f-js .eyebrow::before{width:0}
.f-js .is-visible .eyebrow::before{width:36px;transition:width .7s var(--ease) .1s}

/* --- Hero: la foto entra con un acercamiento mínimo ----------------------- */
.f-js .hero__media img{transform:scale(1.06);transition:transform 1.3s var(--ease)}
.f-js .hero__figure.is-visible .hero__media img{transform:none}

/* --- Tarjetas: el borde superior se enciende y el ícono toma el rojo ------ */
.nucleo__grid article,.casos__grid article{
  transition:border-top-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.nucleo__grid article:hover,.casos__grid article:hover{border-top-color:var(--c-red);transform:translateY(-4px)}
.nucleo__grid .ico,.probl__grid .ico,.conf__tiles .ico{transition:stroke var(--dur-base) var(--ease)}
.nucleo__grid article:hover .ico,.probl__grid article:hover .ico{stroke:var(--c-red)}
.conf__tiles li:hover .ico{stroke:var(--c-red)}
.conf__tiles li b{transition:color var(--dur-base) var(--ease)}
.conf__tiles li:hover b{color:var(--c-red-on-light)}

/* --- Organigrama: primero baja la línea, después abre el travesaño -------- */
.f-js .org__stem,.f-js .org__branches::after{transform:scaleY(0);transform-origin:top}
.f-js .org.is-visible .org__stem{transform:none;transition:transform .45s var(--ease) .15s}
.f-js .org.is-visible .org__branches::after{transform:none;transition:transform .3s var(--ease) .5s}
.f-js .org__branches::before{transform:scaleX(0)}
.f-js .org.is-visible .org__branches::before{transform:none;transition:transform .7s var(--ease) .75s}
.f-js .org__branches li::before{transform:scaleY(0);transform-origin:top}
.f-js .org.is-visible .org__branches li::before{transform:none;transition:transform .3s var(--ease) 1.35s}
.org__node{transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.org__node:hover{transform:translateY(-4px);box-shadow:var(--e-2)}

/* --- Captura: los tres callouts laten tres veces y se quedan quietos ------ */
.real__pin::after{
  content:"";position:absolute;inset:-7px;border:2px solid var(--c-red);
  border-radius:50%;opacity:0;
}
.real__shot.is-visible .real__pin::after{animation:pin 2.1s var(--ease) 3}
.real__shot.is-visible .real__pin:nth-of-type(2)::after{animation-delay:.35s}
.real__shot.is-visible .real__pin:nth-of-type(3)::after{animation-delay:.7s}
@keyframes pin{
  0%{opacity:.85;transform:scale(.65)}
  70%{opacity:0;transform:scale(1.45)}
  100%{opacity:0;transform:scale(1.45)}
}

/* --- Metodología: cada paso cierra su línea al aparecer ------------------- */
.metodo li{position:relative}
.metodo li::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--c-red);transform:scaleX(0);transform-origin:left;
}
.f-js .metodo ol.is-visible li::after{transform:scaleX(1);transition:transform .7s var(--ease)}
.f-js .metodo ol.is-visible li:nth-child(2)::after{transition-delay:.1s}
.f-js .metodo ol.is-visible li:nth-child(3)::after{transition-delay:.2s}
.f-js .metodo ol.is-visible li:nth-child(4)::after{transition-delay:.3s}
.f-js .metodo ol.is-visible li:nth-child(5)::after{transition-delay:.4s}
.metodo li h3{transition:color var(--dur-base) var(--ease)}
.metodo li:hover h3{color:var(--c-red-on-light)}

/* --- FAQ: la fila responde al puntero ------------------------------------ */
.faq summary{transition:color var(--dur-base) var(--ease)}
.faq summary:hover{color:var(--c-red-on-light)}

/* --- Revelado (§26: aparición suave, nada más) --------------------------- */
.f-js [data-reveal],.f-js [data-stagger]>*{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
[data-reveal].is-visible,[data-stagger].is-visible>*{opacity:1;transform:none}
[data-stagger].is-visible>*:nth-child(2){transition-delay:.06s}
[data-stagger].is-visible>*:nth-child(3){transition-delay:.12s}
[data-stagger].is-visible>*:nth-child(4){transition-delay:.18s}
[data-stagger].is-visible>*:nth-child(5){transition-delay:.24s}
[data-stagger].is-visible>*:nth-child(6){transition-delay:.30s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important;transition:none}
  .sticky{transition:none}
  /* Los trazados quedan en su estado final y nada se anima. */
  .hero__scan,.real__pin::after{display:none}
  .f-js .hero__media img,
  .f-js .org__stem,.f-js .org__branches::before,.f-js .org__branches::after,
  .f-js .org__branches li::before,.f-js .metodo ol li::after{transform:none!important}
  .f-js .eyebrow::before{width:36px!important}
}