/* =====================================================================
   Web de Colonna · estilos del sitio
   Se carga después de assets/kit/tokens.css (D-014): colores, tipografías
   y radios salen de ahí. Sin sombras negras ni blur, el degradado solo
   en el remate de los titulares y movimiento solo con
   prefers-reduced-motion: no-preference.
   Dirección visual: propuesta-arquitectura-narrativa.md §7, nivel 1.
   El diagrama de la empresa completa cambia de estado en cada tramo
   (reposo, debajo, mapa, caminos); el movimiento explica el relato y,
   con «reducir movimiento», todo queda en su estado final.
   Los valores propios del sitio (borde de campos, error, diagrama) van en
   :root acá: tokens.css es copia del kit y no se edita.
   ===================================================================== */

/* Fuentes: las mismas del kit, con font-display: swap para que el texto se vea
   enseguida aunque la fuente tarde. Solo se descargan los pesos que se usan. */
@font-face { font-family: 'Sora'; font-weight: 600; font-style: normal; font-display: swap; src: url('../kit/fuentes/Sora-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Sora'; font-weight: 700; font-style: normal; font-display: swap; src: url('../kit/fuentes/Sora-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../kit/fuentes/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../kit/fuentes/Inter-SemiBold.ttf') format('truetype'); }

:root {
  color-scheme: dark;
  --ancho: 1160px;
  --ancho-texto: 640px;
  --gutter: clamp(16px, 5vw, 40px);
  --borde-campo: #6B7790;   /* 4,2:1 sobre --bg2 (WCAG 1.4.11) */
  --error: #FF8F8F;
  --foco: var(--gold);
  /* Diagrama sobre oscuro (en el panel claro se redefinen) */
  --d-linea: rgba(231, 236, 245, .16);
  --d-nodo-fondo: var(--bg1);
  --d-nodo-borde: rgba(231, 236, 245, .24);
  --d-texto: var(--ink-2);
  --d-acento: var(--gold);
  --d-hallazgo: var(--cap);
}

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

/* hidden oculta siempre, aunque la clase del elemento le dé un display (p. ej. .ayuda { display: block }). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background-color: var(--bg0); }

/* El fondo --bg0 lo pinta html: si lo pintara también body, taparía las capas de fondo (z-index: -1). */
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font: 400 1rem/1.6 var(--font-texto);
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Fondo del kit (--fondo-oscuro) pintado solo en la parte de arriba: así se ve igual en páginas
   cortas y largas. Termina en --bg0, el mismo color del resto de la página. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(1100px, 140vh);
  background: var(--fondo-oscuro);
  z-index: -1;
  pointer-events: none;
}

/* Ambiente: halos muy suaves (un resplandor dorado y uno azul) fijos detrás del contenido.
   Con movimiento permitido derivan muy despacio; si no, quedan quietos. */
body::after {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(520px 380px at 78% 22%, rgba(224, 168, 46, .09), transparent 70%),
    radial-gradient(620px 440px at 16% 74%, rgba(91, 157, 255, .07), transparent 70%);
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-titulos);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

strong { font-weight: 600; color: var(--ink); }

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

.saltar {
  position: absolute; left: var(--gutter); top: -100px; z-index: 50;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  background: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 0; }
.saltar:hover, .saltar:focus { color: var(--on-gold); }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: clamp(64px, 10vw, 128px) 0; }
.seccion + .seccion { border-top: 1px solid var(--line); }
.seccion--profunda { background: var(--bg2); }
.seccion--profunda + .seccion, .seccion + .seccion--profunda { border-top: 0; }

.dos-columnas { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.dos-columnas--centro { align-items: center; }

.kicker {
  margin: 0 0 14px;
  font: 600 .78rem/1.4 var(--font-titulos);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cap);
}
.kicker--oro { color: var(--gold); }

.titulo-grande { font-size: clamp(1.8rem, 1.15rem + 2.7vw, 3rem); max-width: 18em; }

.lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--ink-3); max-width: var(--ancho-texto); }

.remate {
  background: var(--grad-texto);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- Encabezado ---------- */
.cabecera { padding: 20px 0; }
.cabecera .contenedor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.marca img { height: 24px; width: auto; }
.nav { display: none; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-block; padding: 10px 0; color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 600; }
.nav a:hover { color: var(--gold); }

/* ---------- Botones ---------- */
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.botones--centro { justify-content: center; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px;
  border-radius: var(--radio-pildora); border: 1px solid transparent;
  font: 600 1rem/1.2 var(--font-titulos);
  text-decoration: none; text-align: center; cursor: pointer;
}
.boton--oro { background: var(--grad-oro); color: var(--on-gold); box-shadow: var(--sombra-oro); }
.boton--oro:hover { color: var(--on-gold); filter: brightness(1.06); }
/* La flecha es decorativa: no se lee ni se copia. */
.boton--oro::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: .55em; }
.boton--chico { min-height: 44px; padding: 9px 14px; font-size: .86rem; box-shadow: none; }
.boton--chico::after { display: none; }   /* en la cabecera no entra la flecha junto al logo en 375 px */
.boton--ancho { width: 100%; }
.boton--fantasma { background: var(--card); border-color: var(--line); color: var(--ink); }
.boton--fantasma:hover { border-color: var(--gold-line); color: var(--gold); }
.boton[disabled], .boton[aria-disabled=true] { opacity: .6; cursor: progress; }

.nota-cta { margin: 14px 0 0; font-size: .92rem; color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding: clamp(32px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
.hero__grilla { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero h1 { max-width: 15em; }
.hero .lead { margin-top: 20px; }

/* ---------- Diagrama de la empresa completa ---------- */
.diagrama { margin: 0; }
.diagrama svg { width: 100%; max-width: 460px; margin: 0 auto; overflow: visible; }
.diagrama--caminos svg { max-width: 420px; }
.d-arista { stroke: var(--d-linea); stroke-width: 2; stroke-linecap: round; fill: none; }
.d-oculta { stroke: var(--d-acento); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; fill: none; opacity: 0; }
.d-nodo rect { fill: var(--d-nodo-fondo); stroke: var(--d-nodo-borde); stroke-width: 1.5; }
/* En pantallas chicas el diagrama se achica: los textos van más grandes en unidades del dibujo. */
.d-nodo text { fill: var(--d-texto); font-family: var(--font-titulos); font-weight: 600; font-size: 17px; }
.d-centro { fill: var(--muted); font-family: var(--font-titulos); font-weight: 600; font-size: 13px; letter-spacing: .2em; }
.d-marca circle { fill: var(--d-acento); }
.d-marca text { fill: var(--d-acento); font-family: var(--font-texto); font-weight: 600; font-size: 13px; }
.d-hallazgo { fill: var(--d-hallazgo); stroke: var(--d-nodo-fondo); stroke-width: 3; }
.d-camino { stroke: var(--gold-line); stroke-width: 2; stroke-linecap: round; fill: none; }
.d-destino circle { fill: var(--gold); }
.d-destino text { fill: var(--ink-2); font-family: var(--font-titulos); font-weight: 600; font-size: 15px; }
.d-nodo--plan rect { stroke: var(--gold-line); }
/* Capas que solo se ven con movimiento: la señal que circula, el destello de los nodos, las ondas y las chispas. */
.d-nodo .d-brillo { fill: none; stroke: var(--d-acento); stroke-width: 1.5; opacity: 0; }
.d-halo { opacity: .75; }
.d-halo-centro { stop-color: var(--gold); stop-opacity: .16; }
.d-halo-borde { stop-color: var(--gold); stop-opacity: 0; }
.d-senal, .d-senal-diag, .d-senal-plan { fill: none; stroke: var(--d-acento); stroke-linecap: round; opacity: 0; }
.d-senal { stroke-width: 2.5; stroke-dasharray: 4 96; }
.d-senal-diag, .d-senal-plan { stroke-width: 3; stroke-dasharray: 12 200; stroke-dashoffset: 12; }
.d-senal--brillo, .d-senal-diag--brillo { stroke-width: 10; }
.d-onda { fill: none; stroke: var(--d-acento); stroke-width: 1.5; opacity: 0; }
.d-onda--h { stroke: var(--d-hallazgo); }
.d-chispa { fill: var(--gold); opacity: 0; }
.d-nodo, .d-halo, .d-onda, .d-chispa, .d-destino circle { transform-box: fill-box; transform-origin: center; }
/* Estados: debajo (se enciende la conexión ventas → administración) y mapa (hallazgos en las cuatro áreas). */
.diagrama--debajo .d-oculta { opacity: 1; }
.diagrama--debajo .d-nodo--ventas rect, .diagrama--debajo .d-nodo--admin rect { stroke: var(--d-acento); }
.diagrama--mapa .d-nodo rect { stroke: var(--d-acento); }

/* ---------- El problema ---------- */
.sintomas { display: grid; gap: 4px 48px; grid-template-columns: minmax(0, 1fr); margin: 36px 0 0; padding: 0; list-style: none; max-width: 980px; }
.sintomas li {
  position: relative; padding: 16px 0 16px 26px;
  border-top: 1px solid var(--line); color: var(--ink-2); font-size: 1.08rem;
}
.sintomas li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 4px; height: 1.05em; border-radius: 2px; background: var(--grad-oro);
}

/* ---------- Lo que pasa por debajo ---------- */
.ejemplo {
  margin-top: 32px; max-width: 560px; padding: 22px 24px;
  border-radius: var(--radio); background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
}
.ejemplo p { margin: 0 0 .7em; color: var(--ink-3); }
.ejemplo p:last-child { margin-bottom: 0; }
.ejemplo .ejemplo__rotulo {
  margin-bottom: 12px; color: var(--gold);
  font: 600 .75rem/1.4 var(--font-titulos); letter-spacing: .16em; text-transform: uppercase;
}

/* ---------- Prueba rápida ---------- */
.preguntas { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 36px 0 0; padding: 0; list-style: none; }
.preguntas li { padding: 24px; border-radius: var(--radio); background: var(--card); border: 1px solid var(--line); }
.preguntas .area {
  display: block; margin-bottom: 10px; color: var(--cap);
  font: 600 .75rem/1.4 var(--font-titulos); letter-spacing: .16em; text-transform: uppercase;
}
.preguntas p { margin: 0; font: 600 1.15rem/1.4 var(--font-titulos); color: var(--ink); }
.cierre-prueba { margin-top: 44px; }
.cierre-prueba p { margin: 0 0 .4em; max-width: var(--ancho-texto); }
.cierre-prueba__dato { color: var(--ink-3); font-size: 1.08rem; }
.cierre-prueba__invita { font: 600 1.25rem/1.35 var(--font-titulos); color: var(--ink); }
.cierre-prueba .boton { margin-top: 22px; }

/* ---------- Ejemplos ilustrativos: tres situaciones breves ---------- */
.seccion--ejemplos { padding-top: clamp(48px, 7vw, 88px); }
.situaciones { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 32px 0 0; padding: 0; list-style: none; }
.situacion {
  padding: 22px 24px; border-radius: var(--radio);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold);
}
.situacion .area {
  display: block; margin-bottom: 12px; color: var(--cap);
  font: 600 .75rem/1.4 var(--font-titulos); letter-spacing: .16em; text-transform: uppercase;
}
.situacion p { margin: 0 0 .6em; color: var(--ink-3); font-size: .98rem; }
.situacion p:last-child { margin-bottom: 0; }

/* ---------- Ambiente: presencia continua de partículas en todo el sitio ----------
   movimiento.js crea la capa solo si el movimiento está permitido: 16 partículas en la computadora y 9 en
   el celular (menos y más tenues en /llamada). La capa es fija, cubre el viewport entero y no recibe
   clicks. Planos: los fondos de las secciones (también los de las bandas oscuras) quedan debajo de la capa;
   el contenido (.contenedor) y el panel claro, encima. Así las partículas se ven en todo el recorrido,
   siempre detrás del texto, y en el panel claro y en la tarjeta del formulario desaparecen.
   Cada partícula tiene su lugar, tamaño, color, brillo y deriva; los retrasos negativos hacen que arranquen
   a mitad de ciclo, así se ven desde el primer momento. Las primeras nueve, las del celular, ya cubren
   todo el alto. */
.ambiente { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.contenedor { position: relative; z-index: 1; }
.seccion--clara { position: relative; z-index: 1; }
.ambiente span {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: var(--t, 2px); height: var(--t, 2px); border-radius: 50%;
  background: var(--color, var(--gold)); box-shadow: 0 0 10px 1px var(--halo, rgba(245, 201, 90, .55));
  opacity: 0;
}
.ambiente span:nth-child(1)  { --x: 7%;  --y: 14%; --t: 3px;   --brillo: 0.65; --dur: 22s; --retraso: -3s;  --dx: 8px;   --dy: -70px; }
.ambiente span:nth-child(2)  { --x: 63%; --y: 9%;  --t: 2.5px; --brillo: 0.7;  --dur: 26s; --retraso: -11s; --dx: -10px; --dy: -60px; --color: var(--ink); --halo: rgba(231, 236, 245, .4); }
.ambiente span:nth-child(3)  { --x: 33%; --y: 31%; --t: 4px;   --brillo: 0.55; --dur: 30s; --retraso: -18s; --dx: 12px;  --dy: -80px; }
.ambiente span:nth-child(4)  { --x: 88%; --y: 36%; --t: 3px;   --brillo: 0.65; --dur: 24s; --retraso: -6s;  --dx: -8px;  --dy: -70px; --color: var(--cap); --halo: rgba(91, 157, 255, .5); }
.ambiente span:nth-child(5)  { --x: 18%; --y: 55%; --t: 3.5px; --brillo: 0.6;  --dur: 28s; --retraso: -14s; --dx: 6px;   --dy: -90px; }
.ambiente span:nth-child(6)  { --x: 52%; --y: 62%; --t: 2.5px; --brillo: 0.75; --dur: 20s; --retraso: -9s;  --dx: -12px; --dy: -50px; --color: var(--ink); --halo: rgba(231, 236, 245, .4); }
.ambiente span:nth-child(7)  { --x: 79%; --y: 74%; --t: 4px;   --brillo: 0.55; --dur: 32s; --retraso: -21s; --dx: 10px;  --dy: -80px; }
.ambiente span:nth-child(8)  { --x: 9%;  --y: 86%; --t: 3px;   --brillo: 0.65; --dur: 25s; --retraso: -2s;  --dx: 14px;  --dy: -60px; --color: var(--cap); --halo: rgba(91, 157, 255, .5); }
.ambiente span:nth-child(9)  { --x: 44%; --y: 92%; --t: 3px;   --brillo: 0.7;  --dur: 23s; --retraso: -16s; --dx: -6px;  --dy: -75px; }
.ambiente span:nth-child(10) { --x: 95%; --y: 12%; --t: 2.5px; --brillo: 0.65; --dur: 27s; --retraso: -7s;  --dx: -10px; --dy: -60px; }
.ambiente span:nth-child(11) { --x: 25%; --y: 8%;  --t: 3px;   --brillo: 0.6;  --dur: 29s; --retraso: -24s; --dx: 8px;   --dy: -70px; --color: var(--cap); --halo: rgba(91, 157, 255, .5); }
.ambiente span:nth-child(12) { --x: 70%; --y: 47%; --t: 3.5px; --brillo: 0.6;  --dur: 21s; --retraso: -12s; --dx: -14px; --dy: -85px; }
.ambiente span:nth-child(13) { --x: 38%; --y: 75%; --t: 2.5px; --brillo: 0.7;  --dur: 26s; --retraso: -4s;  --dx: 10px;  --dy: -55px; --color: var(--ink); --halo: rgba(231, 236, 245, .4); }
.ambiente span:nth-child(14) { --x: 92%; --y: 90%; --t: 3px;   --brillo: 0.65; --dur: 31s; --retraso: -19s; --dx: -8px;  --dy: -80px; }
.ambiente span:nth-child(15) { --x: 3%;  --y: 40%; --t: 2.5px; --brillo: 0.7;  --dur: 24s; --retraso: -13s; --dx: 12px;  --dy: -65px; }
.ambiente span:nth-child(16) { --x: 58%; --y: 25%; --t: 3px;   --brillo: 0.6;  --dur: 28s; --retraso: -26s; --dx: -6px;  --dy: -70px; --color: var(--cap); --halo: rgba(91, 157, 255, .5); }
/* En /llamada, más tenue (el formulario manda). */
.ambiente--suave { --factor: .65; }

/* ---------- Panel claro: el Diagnóstico (el documento) ---------- */
.seccion--clara {
  --d-linea: var(--claro-linea);
  --d-nodo-fondo: var(--claro-fondo);
  --d-nodo-borde: rgba(16, 25, 46, .22);
  --d-texto: var(--claro-navy);
  --d-acento: var(--claro-oro);
  --d-hallazgo: var(--claro-azul);
  color-scheme: light;
  background: var(--claro-fondo);
  color: var(--claro-tinta);
}
.seccion--clara, .seccion--clara + .seccion { border-top: 0; }
.seccion--clara h2, .seccion--clara h3, .seccion--clara strong { color: var(--claro-navy); }
.seccion--clara .kicker { color: var(--claro-azul); }
.seccion--clara .lead { color: var(--claro-tinta-suave); }
.seccion--clara a { color: var(--claro-azul); }
.diagnostico { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
.diagnostico h3 { margin-bottom: 14px; font-size: 1.05rem; letter-spacing: .02em; }
.llevas { margin: 0; padding: 0; list-style: none; }
.llevas li { padding: 18px 0; border-top: 1px solid var(--claro-linea); font-size: 1.1rem; color: var(--claro-tinta-suave); }
.llevas strong { display: block; margin-bottom: 2px; font: 700 1.2rem/1.35 var(--font-titulos); }
.diagnostico__incluye { padding: 26px; border-radius: var(--radio); background: var(--claro-bloque); }
.incluye { margin: 0; padding: 0; list-style: none; }
.incluye li { position: relative; padding: 9px 0 9px 28px; color: var(--claro-tinta); }
.incluye li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; top: 9px; font-weight: 700; color: var(--claro-oro-texto); }

/* ---------- Inversión: sola y con aire ---------- */
.inversion { padding: clamp(88px, 13vw, 168px) 0; text-align: center; }
.inversion .contenedor::before {
  content: ""; display: block; width: 2px; height: 64px; margin: 0 auto 32px;
  background: linear-gradient(transparent, var(--gold));
}
.inversion__frase { max-width: 20em; margin: 0 auto; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.6rem); }

/* ---------- Cierre ---------- */
.banda-final {
  background:
    radial-gradient(760px 380px at 50% 0%, rgba(224, 168, 46, .14), transparent 70%),
    var(--bg1);
  text-align: center;
}
.banda-final__contenido .titulo-grande, .banda-final__contenido .lead { margin-left: auto; margin-right: auto; }
.banda-final { position: relative; overflow: hidden; }
.banda-final__contenido { position: relative; z-index: 1; }
/* Unas pocas chispas que se desprenden del brillo dorado; solo se ven con movimiento. */
.chispas { position: absolute; inset: 0; pointer-events: none; }
.chispas span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0; }
.chispas span:nth-child(1) { left: 44%; top: 30%; }
.chispas span:nth-child(2) { left: 53%; top: 22%; width: 2px; height: 2px; }
.chispas span:nth-child(3) { left: 59%; top: 36%; }
.chispas span:nth-child(4) { left: 48%; top: 44%; width: 2px; height: 2px; }
.chispas span:nth-child(5) { left: 63%; top: 18%; width: 2px; height: 2px; }

/* ---------- Pie ---------- */
.pie { padding: 32px 0 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.pie img { height: 22px; width: auto; }
.pie a { display: inline-block; padding: 10px 0; color: var(--ink-2); }

/* ---------- /llamada ---------- */
.llamada {
  display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(24px, 5vw, 64px); padding-bottom: clamp(56px, 8vw, 104px);
}
.llamada h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); max-width: 13em; }
.valor { margin: 32px 0 0; padding: 0; list-style: none; max-width: 560px; }
.valor li { position: relative; padding: 14px 0 14px 26px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 1.1rem; }
.valor li::before { content: ""; position: absolute; left: 0; top: 19px; width: 4px; height: 1.05em; border-radius: 2px; background: var(--grad-oro); }
.siguiente { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--gold-line); max-width: 560px; }
.siguiente p { color: var(--ink-3); }
.siguiente .siguiente__inversion { margin: 24px 0 0; font: 600 1.2rem/1.45 var(--font-titulos); color: var(--ink); }
.llamada__form { padding: clamp(22px, 4vw, 34px); border-radius: var(--radio-grande); background: var(--bg1); border: 1px solid var(--line); }
.llamada__form h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); }
.formulario__coordina { margin: 4px 0 16px; color: var(--ink-2); font-size: .95rem; }
.nota-cta--form { text-align: center; }

/* ---------- Formulario ---------- */
.formulario { margin-top: 20px; }
.campo { margin: 0 0 20px; }
.campo label, .campo .etiqueta { display: block; margin-bottom: 8px; font-weight: 600; color: var(--ink); }
.campo .opcional { font-weight: 400; color: var(--muted); }
.campo .obligatorio { color: var(--gold); }
.campo input[type=text], .campo input[type=email], .campo input[type=tel],
.campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--borde-campo);
  background: var(--bg2); color: var(--ink);
  font: inherit;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { border-color: var(--gold); }
.campo input:disabled { opacity: .5; cursor: not-allowed; }
.campo [aria-invalid=true] { border-color: var(--error); }
.ayuda { display: block; margin-top: 6px; font-size: .88rem; color: var(--muted); }
.error { display: block; margin-top: 6px; font-size: .9rem; color: var(--error); }
.error:empty { display: none; }
.casilla { display: flex; gap: 12px; align-items: flex-start; }
.casilla input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--gold); }
.casilla label { margin: 0; font-weight: 400; color: var(--ink-2); font-size: .95rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Cuenta opcional dentro del formulario: el resumen exacto que se sumaría, a la vista. */
.sumar-cuenta { padding: 16px; border-radius: 12px; background: var(--card); border: 1px dashed var(--gold-line); }
.sumar-cuenta[hidden] { display: none; }
.sumar-cuenta__resumen { margin: 10px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-3); }
/* La región de estado queda siempre en la página (sin display: none) para que los lectores de pantalla la anuncien. */
.estado {
  margin: 18px 0 0; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
}
.estado:empty { margin: 0; padding: 0; border: 0; }
.estado--error { border-color: var(--error); color: var(--ink); }
.nota-legal { font-size: .88rem; color: var(--muted); margin-top: 14px; text-align: center; }

/* ---------- Cuenta opcional: plegable, al final y sin competir con la conversación ---------- */
.seccion--cuenta { padding-top: 0; }
.cuenta { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cuenta > summary { position: relative; display: block; cursor: pointer; list-style: none; padding: 22px 8px 22px 44px; }
.cuenta > summary::-webkit-details-marker { display: none; }
.cuenta > summary::before {
  content: "+"; content: "+" / "";
  position: absolute; left: 8px; top: 20px;
  font: 600 1.4rem/1 var(--font-titulos); color: var(--gold);
}
.cuenta[open] > summary::before { content: "−"; content: "−" / ""; }
.cuenta > summary .kicker { display: block; margin-bottom: 6px; color: var(--muted); }
.cuenta__titulo { display: block; font: 600 1.08rem/1.4 var(--font-titulos); color: var(--ink); }
.cuenta__bajada { display: block; margin-top: 4px; font-size: .95rem; color: var(--muted); }
.cuenta__cuerpo { max-width: 720px; padding: 0 8px 28px 44px; }
.cuenta fieldset { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.cuenta legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fila > input { flex: 1 1 0; min-width: 0; }
.nose { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; color: var(--ink-2); cursor: pointer; }
.nose input { width: 20px; height: 20px; accent-color: var(--gold); }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones label {
  display: inline-flex; gap: 8px; align-items: center; margin: 0;
  min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--borde-campo);
  font-weight: 400; cursor: pointer;
}
.opciones input { width: 18px; height: 18px; accent-color: var(--gold); }
.resultado { margin-top: 8px; }
.resultado[hidden] { display: none; }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.cifra { padding: 16px; border-radius: var(--radio-chico); border: 1px solid var(--line); background: var(--bg1); }
.cifra b { display: block; font: 700 clamp(1.4rem, 5vw, 1.9rem)/1.1 var(--font-titulos); color: var(--gold); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cifra span { display: block; margin-top: 4px; font-size: .85rem; color: var(--muted); }
.lineas { list-style: none; margin: 0 0 18px; padding: 0; }
.lineas li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.lineas li:first-child { border-top: 0; }
.lineas .clave { color: var(--gold); font-weight: 600; }

/* ---------- /gracias ---------- */
.gracias { padding: clamp(48px, 10vw, 128px) 0 clamp(64px, 10vw, 128px); }
.gracias__contenido { max-width: 760px; }
.gracias h1 { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3rem); }
.gracias__subtitulo { margin-top: 48px; font-size: 1.2rem; font-weight: 600; color: var(--ink-2); }
.preparar { margin: 0; padding: 0; list-style: none; counter-reset: pregunta; }
.preparar li {
  position: relative; padding: 16px 0 16px 52px; counter-increment: pregunta;
  border-top: 1px solid var(--line); font-size: 1.1rem; color: var(--ink);
}
.preparar li::before {
  content: counter(pregunta); position: absolute; left: 0; top: 13px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .95rem/1 var(--font-titulos); color: var(--gold);
  background: var(--bg1); border: 1px solid var(--gold-line);
}
.gracias__nota { margin-top: 28px; color: var(--muted); }

/* Aviso de privacidad */
.aviso { padding: clamp(48px, 8vw, 104px) 0 clamp(64px, 10vw, 128px); }
.aviso__contenido { max-width: 760px; }
.aviso h1 { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3rem); }
.aviso__bajada { margin-top: 20px; font-size: 1.1rem; color: var(--ink-2); }
.aviso h2 { margin-top: 44px; font-size: 1.2rem; font-weight: 600; }
.aviso p, .aviso li { color: var(--ink-2); }
.aviso ul { margin: 14px 0 1em; padding-left: 1.2em; }
.aviso li + li { margin-top: 10px; }
.aviso h2 + p { margin-top: 14px; }
.aviso__legal { font-size: .9rem; color: var(--muted); }
.aviso__fecha { margin-top: 44px; font-size: .9rem; color: var(--muted); }
.casilla label a { color: inherit; text-decoration: underline; }

/* ---------- Bloque pendiente (solo en borrador; el verificador impide publicarlo) ---------- */
.pendiente {
  margin-top: 36px; padding: 22px 24px; border-radius: var(--radio);
  border: 1px dashed var(--gold-line); background: rgba(245, 201, 90, .05);
  color: var(--ink-2); font-size: .95rem;
}
.pendiente strong { color: var(--gold); }

/* ---------- Tamaños mayores ---------- */
@media (min-width: 720px) {
  .nav { display: block; }
  .cabecera .contenedor { column-gap: 28px; }
  .marca img { height: 30px; }
  .boton--chico { padding: 10px 18px; font-size: .92rem; }
  .d-nodo text { font-size: 15px; }
  .d-centro { font-size: 11px; }
  .sintomas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preguntas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .situaciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .hero__grilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; }
  .dos-columnas { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
  .diagnostico { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .llamada { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: start; }
  .llamada__form { position: sticky; top: 24px; }
}

/* ---------- Movimiento: solo si la persona no pidió reducirlo ----------
   Se animan opacity y transform y, en los trazos del diagrama, stroke-dashoffset (SVG chico, sin
   reflujo). Con «reducir movimiento» nada de esto se aplica: el diagrama queda en su estado final y las
   capas que solo existen con movimiento (señal, destellos, ondas, chispas) no se ven.
   Sin movimiento.js no se agrega .mov: las entradas no se ocultan y el hero sigue vivo.
   movimiento.js marca con .fuera lo que no está en pantalla, y eso queda en pausa. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .boton { transition: filter .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
  .boton--oro:hover { transform: translateY(-2px); }
  .boton--oro::after { transition: transform .2s ease; }
  .boton--oro:hover::after { transform: translateX(4px); }
  a { transition: color .2s ease; }

  /* Fondo: los halos derivan muy despacio. */
  @keyframes deriva {
    from { transform: translate3d(-2%, -1.5%, 0) scale(1); opacity: .75; }
    to { transform: translate3d(2%, 2%, 0) scale(1.08); opacity: 1; }
  }
  body::after { animation: deriva 46s ease-in-out infinite alternate; }

  /* Hero: la empresa viva. Una señal recorre las conexiones en 16 s y cada área respira cuando pasa
     (Marketing 0 s, Ventas 4,4 s, Operación 8 s, Administración 12,4 s); el centro tiene un halo
     y de su brillo se desprenden unas pocas chispas. */
  @keyframes circula { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes respira { 0%, 9%, 100% { transform: scale(1); } 3.5% { transform: scale(1.03); } }
  @keyframes destello { 0%, 10%, 100% { opacity: 0; } 3.5% { opacity: .85; } }
  @keyframes pulso { from { opacity: .45; } to { opacity: .9; } }
  @keyframes halo { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
  @keyframes chispa {
    0% { opacity: 0; transform: translate(0, 0); }
    18% { opacity: .85; }
    70% { opacity: .3; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -48px)); }
  }
  .diagrama--reposo .d-senal { opacity: .9; animation: circula 16s linear infinite; }
  .diagrama--reposo .d-senal--brillo { opacity: .16; }
  .diagrama--reposo .d-nodo { animation: respira 16s ease-in-out infinite; }
  .diagrama--reposo .d-brillo { animation: destello 16s ease-in-out infinite; }
  .diagrama--reposo .d-nodo--ventas, .diagrama--reposo .d-nodo--ventas .d-brillo { animation-delay: 4.4s; }
  .diagrama--reposo .d-nodo--op, .diagrama--reposo .d-nodo--op .d-brillo { animation-delay: 8s; }
  .diagrama--reposo .d-nodo--admin, .diagrama--reposo .d-nodo--admin .d-brillo { animation-delay: 12.4s; }
  .diagrama--reposo .d-arista { animation: pulso 8s ease-in-out infinite alternate; }
  .diagrama--reposo .d-arista:nth-of-type(2) { animation-delay: 2s; }
  .diagrama--reposo .d-arista:nth-of-type(3) { animation-delay: 4s; }
  .diagrama--reposo .d-arista:nth-of-type(4) { animation-delay: 6s; }
  .diagrama--reposo .d-halo { animation: halo 11s ease-in-out infinite alternate; }
  .diagrama--reposo .d-chispa { animation: chispa 11s ease-out infinite; }
  .diagrama--reposo .d-chispa:nth-of-type(2) { --dx: -10px; --dy: -52px; animation-duration: 12s; animation-delay: .5s; }
  .diagrama--reposo .d-chispa:nth-of-type(3) { --dx: 8px; --dy: -46px; animation-duration: 10s; animation-delay: 2.6s; }
  .diagrama--reposo .d-chispa:nth-of-type(4) { --dx: -6px; --dy: -40px; animation-duration: 13s; animation-delay: 4.8s; }
  .diagrama--reposo .d-chispa:nth-of-type(5) { --dx: 12px; --dy: -56px; animation-duration: 11s; animation-delay: 6.4s; }
  .diagrama--reposo .d-chispa:nth-of-type(6) { --dx: 2px; --dy: -44px; animation-duration: 12s; animation-delay: 8.2s; }
  .diagrama--reposo .d-chispa:nth-of-type(7) { --dx: -12px; --dy: -50px; animation-duration: 10s; animation-delay: 9.6s; }

  /* Entradas suaves, una por bloque. */
  .mov .aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .mov .aparece.visible { opacity: 1; transform: none; }
  .mov .preguntas li.aparece:nth-child(2) { transition-delay: .08s; }
  .mov .preguntas li.aparece:nth-child(3) { transition-delay: .16s; }
  .mov .preguntas li.aparece:nth-child(4) { transition-delay: .24s; }
  .mov .situaciones li.aparece:nth-child(2) { transition-delay: .12s; }
  .mov .situaciones li.aparece:nth-child(3) { transition-delay: .24s; }

  /* Lo que pasa por debajo: primero se marca dónde se ve, después dónde nace y se enciende la conexión.
     Después, cada 7 s, una señal nace en ventas, baja por la conexión y repercute en administración. */
  @keyframes viaja { 0%, 8% { stroke-dashoffset: 12; } 48%, 100% { stroke-dashoffset: -100; } }
  @keyframes onda-nace { 0% { opacity: .85; transform: scale(1); } 16%, 100% { opacity: 0; transform: scale(3.2); } }
  @keyframes onda-llega { 0%, 46% { opacity: 0; transform: scale(1); } 49% { opacity: .9; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(3.6); } }
  @keyframes destello-sale { 0% { opacity: .9; } 14%, 100% { opacity: 0; } }
  @keyframes destello-llega { 0%, 46%, 72%, 100% { opacity: 0; } 52% { opacity: .9; } }
  @keyframes sacude { 0%, 47%, 60%, 100% { transform: scale(1); } 51% { transform: scale(1.035); } }
  .mov .diagrama--debajo .d-oculta, .mov .diagrama--debajo .d-marca { opacity: 0; transition: opacity .8s ease; }
  .mov .diagrama--debajo.visible .d-marca--se-ve { opacity: 1; transition-delay: .3s; }
  .mov .diagrama--debajo.visible .d-marca--nace { opacity: 1; transition-delay: .9s; }
  .mov .diagrama--debajo.visible .d-oculta { opacity: 1; transition-delay: 1.3s; }
  .mov .diagrama--debajo.visible .d-senal-diag { opacity: .95; animation: viaja 7s ease-in-out 2.2s infinite; }
  .mov .diagrama--debajo.visible .d-senal-diag--brillo { opacity: .2; }
  .mov .diagrama--debajo.visible .d-onda--nace { animation: onda-nace 7s ease-out 2.2s infinite; }
  .mov .diagrama--debajo.visible .d-onda--se-ve { animation: onda-llega 7s ease-out 2.2s infinite; }
  .mov .diagrama--debajo.visible .d-nodo--ventas .d-brillo { animation: destello-sale 7s ease-out 2.2s infinite; }
  .mov .diagrama--debajo.visible .d-nodo--admin .d-brillo { animation: destello-llega 7s ease-in-out 2.2s infinite; }
  .mov .diagrama--debajo.visible .d-nodo--admin { animation: sacude 7s ease-in-out 2.2s infinite; }

  /* Mapa: las conexiones se definen y los hallazgos aparecen de a uno, cada uno con una onda;
     después respiran muy despacio. */
  @keyframes onda-unica { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
  @keyframes late { from { opacity: 1; } to { opacity: .55; } }
  .mov .diagrama--mapa .d-arista { opacity: .25; transition: opacity 1.6s ease .2s; }
  .mov .diagrama--mapa.visible .d-arista { opacity: 1; }
  .mov .diagrama--mapa .d-hallazgo { opacity: 0; transform: scale(.3); transition: opacity .6s ease, transform .6s ease; }
  .mov .diagrama--mapa.visible .d-hallazgo { opacity: 1; transform: none; animation: late 5s ease-in-out 4s infinite alternate; }
  .mov .diagrama--mapa.visible .d-hallazgo--1 { transition-delay: .6s; }
  .mov .diagrama--mapa.visible .d-hallazgo--2 { transition-delay: 1.2s; animation-delay: 4.4s; }
  .mov .diagrama--mapa.visible .d-hallazgo--3 { transition-delay: 1.8s; animation-delay: 4.8s; }
  .mov .diagrama--mapa.visible .d-hallazgo--4 { transition-delay: 2.4s; animation-delay: 5.2s; }
  .mov .diagrama--mapa.visible .d-hallazgo--5 { transition-delay: 3s; animation-delay: 5.6s; }
  .mov .diagrama--mapa.visible .d-onda--h1 { animation: onda-unica 1.8s ease-out .6s forwards; }
  .mov .diagrama--mapa.visible .d-onda--h2 { animation: onda-unica 1.8s ease-out 1.2s forwards; }
  .mov .diagrama--mapa.visible .d-onda--h3 { animation: onda-unica 1.8s ease-out 1.8s forwards; }
  .mov .diagrama--mapa.visible .d-onda--h4 { animation: onda-unica 1.8s ease-out 2.4s forwards; }
  .mov .diagrama--mapa.visible .d-onda--h5 { animation: onda-unica 1.8s ease-out 3s forwards; }

  /* El plan es tuyo: la línea del plan se abre en tres caminos. Después, cada 8 s, la señal sale del
     plan, desemboca en el cruce y sigue por los tres caminos a la vez. */
  @keyframes tronco { 0% { stroke-dashoffset: 12; } 22%, 100% { stroke-dashoffset: -100; } }
  @keyframes rama { 0%, 21% { stroke-dashoffset: 12; } 56%, 100% { stroke-dashoffset: -100; } }
  @keyframes llega { 0%, 53%, 72%, 100% { transform: scale(1); } 59% { transform: scale(1.6); } }
  @keyframes onda-destino { 0%, 54% { opacity: 0; transform: scale(1); } 56% { opacity: .8; } 78%, 100% { opacity: 0; transform: scale(3); } }
  .mov .diagrama--caminos .d-camino, .mov .diagrama--caminos .d-destino { opacity: 0; transition: opacity .6s ease; }
  .mov .diagrama--caminos.visible .d-camino, .mov .diagrama--caminos.visible .d-destino { opacity: 1; }
  .mov .diagrama--caminos.visible .d-camino--2, .mov .diagrama--caminos.visible .d-destino--2 { transition-delay: .25s; }
  .mov .diagrama--caminos.visible .d-camino--3, .mov .diagrama--caminos.visible .d-destino--3 { transition-delay: .5s; }
  .mov .diagrama--caminos.visible .d-senal-plan { opacity: .95; }
  .mov .diagrama--caminos.visible .d-senal-plan--tronco { animation: tronco 8s ease-in 1.4s infinite; }
  .mov .diagrama--caminos.visible .d-senal-plan--rama { animation: rama 8s ease-out 1.4s infinite; }
  .mov .diagrama--caminos.visible .d-nodo--plan .d-brillo { animation: destello-sale 8s ease-out 1.4s infinite; }
  .mov .diagrama--caminos.visible .d-destino circle { animation: llega 8s ease-out 1.4s infinite; }
  .mov .diagrama--caminos.visible .d-onda--destino { animation: onda-destino 8s ease-out 1.4s infinite; }

  /* Cierre: unas pocas chispas suben desde el brillo y se apagan. */
  @keyframes flota {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: .7; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), -80px); }
  }
  .chispas span { animation: flota 12s ease-out infinite; }
  .chispas span:nth-child(2) { --dx: -10px; animation-duration: 14s; animation-delay: 3s; }
  .chispas span:nth-child(3) { --dx: 12px; animation-duration: 11s; animation-delay: 6s; }
  .chispas span:nth-child(4) { --dx: -6px; animation-duration: 13s; animation-delay: 1.5s; }
  .chispas span:nth-child(5) { --dx: 4px; animation-duration: 15s; animation-delay: 8s; }

  /* Ambiente: cada partícula entra, deriva despacio y se apaga; siempre hay alguna entrando y otra saliendo. */
  @keyframes polvo {
    0% { opacity: 0; transform: translate3d(0, 0, 0); }
    20% { opacity: calc(var(--brillo, .4) * var(--factor, 1)); }
    80% { opacity: calc(var(--brillo, .4) * var(--factor, 1) * .7); }
    100% { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, -70px), 0); }
  }
  .ambiente span { animation: polvo var(--dur, 24s) ease-in-out var(--retraso, 0s) infinite; }

  /* Fuera de pantalla, todo en pausa. */
  .mov .diagrama.fuera *, .mov .banda-final.fuera .chispas span { animation-play-state: paused; }
}