/* ═══════════════════════════════════════════════════════════════
   VISUALIK · v3.css · "Un solo trazo"
   ───────────────────────────────────────────────────────────────
   Concepto: cada visita es un recorrido. Una sola línea continua
   recorre la página (margen mientras se lee, cruce ortogonal en cada
   cambio de sección) y termina abriéndose en el plano naranja.

   Sistema:
   - Paleta y escala P0–P5 del Brand Book 2.5, sin colores nuevos.
   - Celeste = sistema (trazo, nodos, estados). Naranja = llegada:
     el punto de una i, una palabra por bloque (≥ 48 px) y el cierre.
   - Geometría: recorridos ortogonales con radio fijo; planos y movimiento
     solo sobre la pendiente 1:2 (26.565°) o su perpendicular 2:1.
   - Una fuente (Montserrat). Display 800, interlineado .95.
   - Movimiento: un vector (ortogonal o 1:2) y una curva (--ease-out).

   Índice:
     1. Fuente y tokens     6. Recorrido ("Te ____.")   11. Señal
     2. Base                7. Tres planos               12. Footer, CTA móvil, diálogo
     3. Botones y enlaces   8. Trabajo real              13. Páginas secundarias
     4. Header              9. Proceso                   14. MOVIMIENTO
     5. Trazo y apertura   10. Promesas y preguntas

   Contrastes (WCAG 2.2):
     #FFFFFF/#1C2D4A 13.8:1 · #E6E6E6/#1C2D4A 11:1 · #B8C2D3/#1C2D4A 7.7:1
     #8D9AB0/#111C30 5.8:1 (estados atenuados) · #0D1626/#FF6B00 6.3:1
     #FF6B00/#1C2D4A 4.8:1: solo en bold de 48 px o más, o como forma (punto de la i).
═══════════════════════════════════════════════════════════════ */

/* ─── 1. Fuente y tokens ─── */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Marca */
  --azul: #1C2D4A;
  --naranja: #FF6B00;
  --celeste: #5ABEFF;
  --gris-claro: #E6E6E6;
  --gris-oscuro: #2E2E2E;
  --blanco: #FFFFFF;
  --naranja-tinta: #B84A00;

  /* Profundidad P0–P5 */
  --azul-hondo: #0D1626;
  --azul-noche: #111C30;
  --azul-profundo: #172640;
  --azul-elevado: #22375A;
  --azul-borde: #2C4470;

  --naranja-hover: #FF8126;
  --texto-sec: #B8C2D3;
  --texto-atenuado: #8D9AB0;
  --linea: rgba(90, 190, 255, .22);
  --linea-suave: rgba(90, 190, 255, .12);
  --linea-fuerte: rgba(90, 190, 255, .55);

  /* Tipografía */
  --fuente: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Topes medidos: la línea 1 (con su sangría de 1.9em) mide ~11.6em y debe entrar en 1152 px de contenedor */
  --fs-escalon: clamp(3rem, 7.1vw, 6.1rem);
  /* "Te encuentran." mide ~7.4em: tope para 1152 px de contenedor */
  --fs-verbo: clamp(3.25rem, 10.5vw, 9.6rem);
  --fs-h2: clamp(3rem, 1.6rem + 4.2vw, 5.4rem);
  --fs-plano: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem);
  --fs-promesa: clamp(2rem, .8rem + 5vw, 6rem);
  /* "improvisando?" mide ~7.3em: tiene que entrar en una línea también a 375 px */
  --fs-senal: clamp(2.2rem, 10.6vw, 9.8rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-base: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --lh-display: .95;

  /* Espacio */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --seccion: clamp(5.5rem, 3rem + 8vw, 10rem);
  --gutter: clamp(1.75rem, 4vw, 2.75rem);
  --header-h: 68px;
  --radio: 4px;
  /* Ángulo Visualik: el corte de los planos avanza 2 por cada 1 que baja */
  --corte: clamp(3rem, 6vw, 6rem);

  /* Movimiento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-rapido: 150ms;
  --t-normal: 260ms;

  interpolate-size: allow-keywords;
}

/* ─── 2. Base ─── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(90, 190, 255, .18);
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--azul-hondo);
  color: var(--gris-claro);
  font-family: var(--fuente);
  font-size: var(--fs-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { color: var(--blanco); }
ul, ol { padding: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
em { font-style: normal; }

::selection { background: var(--naranja); color: var(--azul-hondo); }

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

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

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.anchor-alias { display: block; height: 0; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--naranja);
  color: var(--azul-hondo);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radio);
}
.skip-link:focus { top: var(--s-2); }

/* Aviso de demostración: gris oscuro = mensaje del sistema, no de marca */
.demo-banner {
  padding: .5rem var(--gutter);
  background: var(--gris-oscuro);
  color: var(--gris-claro);
  font-size: .875rem;
  line-height: 1.4;
  text-align: center;
}
.demo-banner strong { color: var(--naranja); }

.top-sentinel { height: 1px; }

/* Titulares de sección: display 800, una sola palabra naranja (siempre ≥ 48 px) */
.servicios-titulo,
.trabajo-titulo,
.proceso-titulo,
.principios-titulo,
.faq-titulo {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
:is(.servicios-titulo, .proceso-titulo, .lo-que-si-titulo) em { color: var(--naranja); }

/* El punto de la i es el nodo de consulta.
   Se usa la ı sin punto y se dibuja el punto en naranja sobre el asta
   (medidas tomadas del glifo i de Montserrat 800). */
.i-nodo { position: relative; }
.i-punto {
  position: absolute;
  /* Medido en Montserrat 800: el punto ocupa de .03em a .28em del avance y su borde superior está a .81em de la base */
  left: .03em;
  top: .16em;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: var(--naranja);
}
.i-punto::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--naranja);
  border-radius: 50%;
  opacity: 0;
}

/* ─── 3. Botones y enlaces ─── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--radio);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-rapido) ease-out, transform var(--t-rapido) ease-out;
}
.btn:active { transform: scale(.98); }
.btn .icon { width: 1.15em; height: 1.15em; fill: currentColor; transition: transform var(--t-normal) var(--ease-out); }
.btn:hover .icon,
.btn:focus-visible .icon { transform: translateX(5px); }

.btn-primary { background: var(--naranja); color: var(--azul-hondo); }
.btn-primary:hover { background: var(--naranja-hover); }
.btn-dark { background: var(--azul-hondo); color: var(--gris-claro); }
.btn-dark:hover { background: var(--azul-profundo); }
.btn-sm { min-height: 44px; padding: 0 1rem; font-size: var(--fs-sm); }

.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--celeste);
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 9px) / 100% 1px no-repeat;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.link-arrow:hover::after,
.link-arrow:focus-visible::after { transform: scaleX(1); }

.toggle-grupo { display: flex; flex-wrap: wrap; gap: .5rem; }
.toggle-grupo button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--texto-sec);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-rapido), border-color var(--t-rapido), background-color var(--t-rapido);
}
.toggle-grupo button:hover { color: var(--gris-claro); border-color: var(--linea-fuerte); }
.toggle-grupo button[aria-pressed='true'] { color: var(--azul-hondo); background: var(--celeste); border-color: var(--celeste); }

/* ─── 4. Header ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-normal) ease-out, border-color var(--t-normal) ease-out;
}
/* Opaco: nada se lee "a través" del header */
.site-header.is-scrolled { background: var(--azul-hondo); border-bottom-color: var(--linea-suave); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; min-height: 44px; }
.logo { width: auto; height: 1.5rem; aspect-ratio: 4322.6 / 1104.8; }
.logo-visua { fill: var(--blanco); }
.logo-lik { fill: var(--naranja); }

.nav-panel { display: flex; align-items: center; gap: var(--s-4); }
.nav-list { display: flex; gap: var(--s-3); list-style: none; }
.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-sec);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-rapido) ease-out;
}
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 2px;
  background: var(--celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.nav-list a:hover { color: var(--gris-claro); }
.nav-list a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: 0 .75rem;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--gris-claro);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-normal) var(--ease-out), background-color var(--t-rapido);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 959px) {
  .nav-toggle { display: inline-flex; }
  .js .nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-2) var(--gutter) var(--s-3);
    background: var(--azul-hondo);
    border-bottom: 1px solid var(--linea);
  }
  .js .nav-panel.is-open { display: flex; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .nav-panel { flex-wrap: wrap; gap: var(--s-2); padding-bottom: var(--s-2); }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a { width: 100%; min-height: 48px; font-size: 1.0625rem; color: var(--gris-claro); }
  .nav-list a::after { display: none; }
  .js .nav-panel .btn { width: 100%; }
}

/* ─── 5. Trazo y apertura ─── */
.lienzo { position: relative; display: block; }

/* El trazo ocupa todo el lienzo, por encima de los fondos y por debajo del contenido interactivo */
.trazo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.trazo-guia { fill: none; stroke: var(--linea-suave); stroke-width: 1.5; }
.trazo-linea { fill: none; stroke: var(--celeste); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trazo-nodo { fill: var(--azul-hondo); stroke: var(--celeste); stroke-width: 2; }
.trazo-nodo-fin { fill: var(--naranja); stroke: none; }
.trazo-nodo-inicio { fill: var(--celeste); stroke: none; }
/* La visita: viaja por el trazo con el scroll (solo con scroll-driven y movimiento) */
.trazo-cabeza {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--celeste);
  box-shadow: 0 0 0 5px rgba(90, 190, 255, .18);
  pointer-events: none;
}
.trazo-ancla { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* Apertura */
.apertura {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(920px, calc(100svh - var(--header-h) - 36px));
  padding-block: clamp(3rem, 1rem + 7vh, 6rem) clamp(5rem, 3rem + 6vh, 7rem);
  overflow: clip;
  /* Técnico: P3 → P0, luz ambiental arriba a la derecha */
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(34, 55, 90, .9), transparent 70%),
    linear-gradient(var(--azul), var(--azul-hondo));
}
/* Retícula de puntos: casi invisible bajo el texto, más densa hacia la derecha */
.apertura-plano {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, rgba(90, 190, 255, .55) 1.2px, transparent 1.6px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(70% 80% at 100% 70%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 100% 70%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
}

.apertura-inner { display: grid; gap: clamp(2.5rem, 6vh, 4.5rem); }

.apertura-titulo {
  position: relative;
  font-size: var(--fs-escalon);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -.035em;
}
.escalon { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.escalon-texto { display: inline-block; white-space: nowrap; }
/* Escalera 1:2 ascendente: la primera línea avanza 2 × el paso de línea */
.escalon:first-child { padding-left: calc(2 * var(--lh-display) * 1em); }
/* Arista de construcción: une el arranque de las dos líneas sobre la pendiente 1:2 */
.apertura-titulo::before {
  content: '';
  position: absolute;
  left: -.55em;
  /* Pasa .2em por debajo de las dos líneas de base (libra la cola de la Q); arranca .55em antes (sube .275em)
     y termina bajo el arranque de la primera línea */
  top: calc(var(--lh-display) * 1em + .83em + .2em + .275em);
  width: calc(2.45em * 1.118);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--linea-fuerte) 20%, var(--linea-fuerte) 80%, transparent);
  transform: rotate(-26.565deg);
  transform-origin: left center;
}

.apertura-bajada {
  display: grid;
  gap: var(--s-3);
  max-width: 31rem;
  justify-self: end;
  margin-right: clamp(0rem, 6vw, 6rem);
}
.apertura-sub { color: var(--texto-sec); font-size: var(--fs-lead); text-wrap: pretty; }
.apertura-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); }
[data-trazo-inicio] { left: 0; bottom: 2.75rem; }

/* Campo de la apertura (campo.js): visitas → una sola línea → la ı de «elijan» */
.campo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.apertura-inner { position: relative; z-index: 1; }
.campo-ruta { fill: none; stroke: var(--celeste); stroke-opacity: .42; stroke-width: 1.5; stroke-linejoin: round; }
.campo-tronco,
.campo-brazo { fill: none; stroke: var(--celeste); stroke-opacity: .85; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.campo-visita { fill: var(--celeste); }
.campo-origen { fill: var(--celeste); }
.campo-viajero { fill: var(--celeste); }

@media (max-width: 759px) {
  /* En celular "encuentran." mide ~6em y va sola en su renglón */
  :root { --fs-escalon: clamp(2.6rem, 12.6vw, 4rem); --fs-verbo: clamp(2.6rem, 13.2vw, 4.2rem); }
  .apertura { min-height: auto; }
  .escalon:first-child { padding-left: 0; }
  .escalon-texto { white-space: normal; }
  .apertura-titulo::before { display: none; }
  .apertura-bajada { justify-self: start; margin-right: 0; }
}

/* ─── 6. Recorrido ("Te ____.") ─── */
.recorrido { position: relative; background: var(--azul-hondo); }

.recorrido-escena { padding-block: var(--seccion); }
.recorrido-inner { position: relative; }

.verbos { list-style: none; display: grid; gap: var(--s-6); }
.verbo-frase {
  color: var(--blanco);
  font-size: var(--fs-verbo);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -.04em;
  white-space: nowrap;
}
.verbo-te { color: var(--texto-atenuado); }
.verbo-palabra { display: inline-block; padding-bottom: .12em; margin-bottom: -.12em; }
.verbo-texto { max-width: 34ch; margin-top: var(--s-3); color: var(--texto-sec); font-size: var(--fs-lead); text-wrap: pretty; }

.escalera { width: min(100%, 440px); height: auto; margin-top: var(--s-6); overflow: visible; }
.escalera-guia { fill: none; stroke: var(--linea-suave); stroke-width: 1; stroke-dasharray: 2 6; }
.escalera-base { fill: none; stroke: var(--linea); stroke-width: 2; }
.escalera-paso { fill: none; stroke: var(--celeste); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.en { fill: var(--celeste); transition: fill .3s ease-out, transform .45s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.en-4 { fill: var(--naranja); }
.escalera-rotulos text { fill: var(--texto-sec); font-size: 13px; font-weight: 700; text-anchor: middle; }

/* Escena armada (JS + movimiento): la escena queda fija y el verbo cambia en el lugar */
.recorrido.is-armed { height: calc(100svh + 240svh); }
.recorrido.is-armed .recorrido-escena {
  position: sticky;
  top: var(--header-h);
  display: flex;
  align-items: center;
  height: calc(100svh - var(--header-h));
  padding-block: 0;
}
.recorrido.is-armed .recorrido-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-4); }
.recorrido.is-armed .verbos { display: grid; gap: 0; }
.recorrido.is-armed .verbo { grid-area: 1 / 1; }
.recorrido.is-armed .verbo-palabra,
.recorrido.is-armed .verbo-texto { transition: clip-path .7s var(--ease-out), opacity .45s ease-out; }
/* Barrido con borde 2:1: el borde superior va adelante del inferior */
.recorrido.is-armed .verbo-palabra { clip-path: polygon(-.6em 0, calc(100% + 1em) 0, calc(100% + .45em) 100%, -1.15em 100%); }
.recorrido.is-armed .verbo.is-futuro .verbo-palabra { clip-path: polygon(-.6em 0, -.6em 0, -1.15em 100%, -1.15em 100%); }
.recorrido.is-armed .verbo.is-pasado .verbo-palabra { clip-path: polygon(calc(100% + 1em) 0, calc(100% + 1em) 0, calc(100% + .45em) 100%, calc(100% + .45em) 100%); }
.recorrido.is-armed .verbo:not(.is-activo) .verbo-texto { opacity: 0; }
.recorrido.is-armed .verbo:not(.is-activo) .verbo-te { visibility: hidden; }
.recorrido.is-armed .verbo.is-activo .verbo-te { visibility: visible; }
.recorrido.is-armed .escalera { margin-top: 0; }
.recorrido.is-armed .escalera-paso { stroke-dasharray: 1; stroke-dashoffset: var(--paso, .91); transition: stroke-dashoffset .8s var(--ease-io); }
.recorrido.is-armed .en { fill: var(--azul-borde); transform: scale(.75); }
.recorrido-escena[data-etapa='1'] { --paso: .91; }
.recorrido-escena[data-etapa='2'] { --paso: .636; }
.recorrido-escena[data-etapa='3'] { --paso: .364; }
.recorrido-escena[data-etapa='4'] { --paso: .09; }
.recorrido.is-armed .recorrido-escena:is([data-etapa='1'], [data-etapa='2'], [data-etapa='3'], [data-etapa='4']) .en-1,
.recorrido.is-armed .recorrido-escena:is([data-etapa='2'], [data-etapa='3'], [data-etapa='4']) .en-2,
.recorrido.is-armed .recorrido-escena:is([data-etapa='3'], [data-etapa='4']) .en-3 { fill: var(--celeste); transform: none; }
.recorrido.is-armed .recorrido-escena[data-etapa='4'] .en-4 { fill: var(--naranja); transform: scale(1.2); }

.recorrido-marcas { display: none; }
.recorrido.is-armed .recorrido-marcas {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

@media (max-width: 759px) {
  .verbo-frase { white-space: normal; }
  /* En celular la escena queda fija la mitad del tramo (≈ 30 % de pantalla por verbo):
     los cuatro estados se ven y Servicios llega sin pantallas de scroll vacías */
  .recorrido.is-armed { height: calc(100svh + 120svh); }
  .recorrido.is-armed .recorrido-inner { grid-template-columns: 1fr; align-items: start; }
  .recorrido.is-armed .escalera { width: min(100%, 320px); }
}

/* ─── 7. Tres planos ─── */
.servicios { position: relative; padding-block: var(--seccion); background: var(--azul-noche); }
.servicios-lead { max-width: 46ch; margin-top: var(--s-3); color: var(--texto-sec); font-size: var(--fs-lead); }

.planos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: var(--s-6);
}
/* Cada plano corta su esquina superior izquierda sobre la pendiente 1:2 (sube hacia la derecha) */
.plano {
  position: relative;
  display: grid;
  gap: var(--s-5);
  align-items: start;
  padding: calc(var(--corte) + var(--s-3)) clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
  clip-path: polygon(0 calc(var(--corte) / 2), var(--corte) 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 var(--linea-suave);
}
.plano-web { grid-column: 1 / 11; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--azul-profundo); }
.plano-redes { grid-column: 3 / 13; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); margin-top: calc(var(--s-5) * -1); background: var(--azul); }
.plano-ads { grid-column: 1 / 12; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); margin-top: calc(var(--s-5) * -1); background: var(--azul-elevado); }

.plano-nombre { font-size: var(--fs-plano); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.plano-resumen { margin-top: var(--s-2); max-width: 40ch; color: var(--texto-sec); font-size: var(--fs-lead); }
.plano-ads .plano-resumen { color: var(--gris-claro); }

.plano-grafico { position: relative; }
.plano-grafico figcaption { margin-top: var(--s-2); color: var(--texto-sec); font-size: var(--fs-xs); line-height: 1.5; }
.plano-ads .plano-grafico figcaption { color: var(--gris-claro); }
.plano-grafico figcaption strong { color: var(--blanco); }

.escala-control { margin-top: var(--s-4); }
.escala-descripcion {
  min-height: 3.2em;
  margin-top: var(--s-2);
  padding-left: var(--s-2);
  border-left: 2px solid var(--naranja);
  font-weight: 600;
  line-height: 1.5;
}
.plano-web .plano-grafico { align-self: center; }

.escala { width: 100%; height: auto; overflow: visible; }
.escala rect { fill: var(--azul-elevado); stroke: var(--linea-fuerte); stroke-width: 1.2; }
.escala text { fill: var(--gris-claro); font-size: 13px; font-weight: 600; text-anchor: middle; }
.escala .e { fill: none; stroke: var(--celeste); stroke-width: 1.5; stroke-linejoin: round; }
.escala .n-inicio { fill: var(--azul-borde); stroke: var(--celeste); }
.escala .n-cta,
.escala .n-accion { fill: var(--naranja); stroke: none; }
.escala .t-accion { fill: var(--azul-hondo); font-weight: 800; }
.escala .n { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.escala .n-vendedor { stroke-dasharray: 4 3; }
.escala[data-nivel='0'] :is(.n1, .n2, .n3),
.escala[data-nivel='1'] :is(.n2, .n3),
.escala[data-nivel='2'] .n3 { opacity: 0; transform: translateY(8px); }

.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 340px; }
.cal-dia { color: var(--texto-sec); font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.cal { aspect-ratio: 1; border-radius: 3px; background: rgba(13, 22, 38, .45); }
.c-p { background: var(--celeste); }
.c-d { background: transparent; box-shadow: inset 0 0 0 2px var(--celeste); }
.c-c { background: var(--gris-claro); }
.pilares { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: var(--s-2); list-style: none; color: var(--texto-sec); font-size: var(--fs-xs); font-weight: 600; }
.pilares li { display: inline-flex; align-items: center; gap: .45rem; }
.sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 2px; }
.sw-p { background: var(--celeste); }
.sw-d { box-shadow: inset 0 0 0 2px var(--celeste); }
.sw-c { background: var(--gris-claro); }

.anuncios { width: 100%; height: auto; overflow: visible; }
.an-grid path { fill: none; stroke: rgba(230, 230, 230, .12); stroke-width: 1; }
.an-grid .an-base { stroke: rgba(230, 230, 230, .4); }
.anuncios text { fill: var(--gris-claro); font-size: 12px; font-weight: 600; }
.an-y text { text-anchor: end; }
.an-x text { text-anchor: middle; }
.an-x text:first-child { text-anchor: start; }
.an-x text:last-child { text-anchor: end; }
.an-linea { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.an-a { stroke: #9AA6BA; stroke-dasharray: 6 5; }
.an-c { stroke: #9AA6BA; stroke-dasharray: 1.5 5; }
.an-b { stroke: var(--celeste); }
.an-b2 { stroke: var(--naranja); stroke-width: 3; }
.an-ajuste path { stroke: var(--gris-claro); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.an-ajuste text { fill: var(--gris-claro); font-weight: 700; }
.an-etiquetas text { font-size: 13px; font-weight: 800; }
.an-etiquetas .et-b { fill: var(--naranja); text-anchor: end; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.plano-detalles { margin-top: var(--s-3); }
.plano-detalles summary,
.faq-item summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; font-weight: 700; }
.plano-detalles summary { display: inline-flex; color: var(--celeste); }
.plano-detalles summary::after,
.faq-item summary::after {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
  transition: transform var(--t-normal) var(--ease-out), background-size var(--t-normal) var(--ease-out);
}
.plano-detalles[open] > summary::after,
.faq-item[open] > summary::after { transform: rotate(180deg); background-size: 12px 2px, 2px 0; }
.plano-cuerpo { display: grid; gap: var(--s-2); padding-block: var(--s-1); }
.plano-cuerpo ul { display: grid; gap: .6rem; list-style: none; }
.plano-cuerpo li { position: relative; padding-left: 1.1rem; color: var(--texto-sec); font-size: var(--fs-sm); line-height: 1.5; }
.plano-ads .plano-cuerpo li { color: var(--gris-claro); }
.plano-cuerpo li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; background: var(--celeste); }
.plano-cuerpo .link-arrow { justify-self: start; }

@media (max-width: 959px) {
  .plano-web,
  .plano-redes,
  .plano-ads { grid-column: 1 / -1; grid-template-columns: 1fr; gap: var(--s-4); }
  .plano-redes,
  .plano-ads { margin-top: calc(var(--s-3) * -1); }
}
@media (max-width: 599px) {
  .anuncios text { font-size: 16px; }
  .an-etiquetas text { font-size: 17px; }
  .escala text { font-size: 16.5px; }
}

/* ─── 8. Trabajo real (familia Editorial) ─── */
.trabajo {
  position: relative;
  isolation: isolate;
  padding-block: var(--seccion);
  overflow: clip;
  background: linear-gradient(160deg, var(--azul-profundo), var(--azul-hondo));
}
/* Plano 1:2 que sube hacia la derecha, detrás de los dispositivos */
.trabajo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--azul-elevado), var(--azul-noche));
  clip-path: polygon(0 100%, 100% calc(100% - 50vw), 100% 100%);
  opacity: .8;
}
.trabajo-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: center; }
.trabajo-lead { max-width: 40ch; margin-top: var(--s-3); color: var(--texto-sec); font-size: var(--fs-lead); }
.trabajo-estado {
  display: inline-block;
  margin-top: var(--s-3);
  padding: .3rem .7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--celeste);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.trabajo-notas { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.trabajo-notas div { padding-left: var(--s-2); border-left: 2px solid var(--linea-fuerte); }
.trabajo-notas dt { color: var(--blanco); font-weight: 800; }
.trabajo-notas dd { margin-top: .25rem; color: var(--texto-sec); font-size: var(--fs-sm); }

/* Dispositivos: los dos girados −7° (regla Editorial: todos con el mismo ángulo).
   Excepción documentada al radio de 4 px: un teléfono es un objeto físico. */
.dispositivos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  padding-block: var(--s-4);
}
.telefono { position: relative; transform: rotate(-7deg); }
.telefono-carrusel { grid-column: 1 / 8; grid-row: 1; z-index: 1; }
.telefono-reel { grid-column: 7 / 12; grid-row: 1; z-index: 2; margin-top: 18%; }
.telefono-pantalla {
  overflow: hidden;
  border: 10px solid var(--azul-hondo);
  border-radius: 34px;
  background: var(--azul-hondo);
  box-shadow: 0 0 0 1px var(--azul-borde), 0 40px 80px -30px rgba(5, 9, 18, .9);
}
.carrusel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 24px;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel img { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.carrusel:focus-visible { outline-offset: 6px; }
.carrusel-avance { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-2); }
.carrusel-avance span { width: 22px; height: 3px; border-radius: 2px; background: var(--azul-borde); transition: background-color .3s ease-out; }
.carrusel-avance span.is-activo { background: var(--celeste); }

.reel { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 24px; background: var(--azul-hondo); object-fit: cover; }
.reel-control {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  margin-top: var(--s-2);
  padding: 0 .9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--azul-hondo);
  color: var(--gris-claro);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transform: rotate(7deg);
}
.reel-control:hover { border-color: var(--linea-fuerte); }
.reel-control-icono { width: 0; height: 0; border-block: 6px solid transparent; border-left: 10px solid var(--celeste); }
.reel-control[aria-pressed='true'] .reel-control-icono { width: 10px; height: 12px; border: 0; border-inline: 3.5px solid var(--celeste); }

@media (max-width: 959px) {
  .trabajo-inner { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 599px) {
  .telefono-pantalla { border-width: 7px; border-radius: 24px; }
  .carrusel,
  .reel { border-radius: 17px; }
  .telefono-carrusel { grid-column: 1 / 9; }
  .telefono-reel { grid-column: 7 / 13; margin-top: 30%; }
}

/* ─── 9. Proceso sobre una pieza real ─── */
.proceso { position: relative; padding-block: var(--seccion); background: var(--azul-noche); }
.proceso-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6); margin-top: var(--s-6); }

.proceso-escena { position: sticky; top: calc(var(--header-h) + var(--s-3)); align-self: start; }
.lamina {
  position: relative;
  width: min(100%, 470px, calc((100svh - var(--header-h) - 9rem) * .8));
  aspect-ratio: 1080 / 1350;
  overflow: hidden;
  border-radius: var(--radio);
  box-shadow: 0 0 0 1px var(--linea);
}
.lamina-final { width: 100%; height: 100%; object-fit: cover; }
.lamina-plano { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-papel { fill: var(--azul); }
.lp-nota { fill: var(--gris-claro); font-family: var(--fuente); font-size: 44px; font-weight: 600; }
.lp-suave { fill: var(--texto-sec); font-size: 34px; font-weight: 500; }
.trazo-l { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reticula { stroke: var(--linea); stroke-width: 2; }
.lp-segura { fill: none; stroke: var(--linea-fuerte); stroke-width: 3; stroke-dasharray: 10 8; }
.lp-titulo { fill: rgba(90, 190, 255, .07); stroke: var(--celeste); stroke-width: 3; }
.lp-diagonal { stroke: var(--celeste); stroke-width: 5; }
.lp-acento { stroke: var(--naranja); stroke-width: 5; }
.lp-cota { fill: var(--celeste); font-family: var(--fuente); font-size: 30px; font-weight: 700; }
.lp-plano { fill: var(--azul-profundo); }
.lp-plano-acento { fill: var(--naranja); }
.lp-bloque { fill: var(--blanco); opacity: .9; }
.lp-bloque-acento { fill: var(--naranja); opacity: 1; }

/* Etapas: 1 mensaje · 2 plano · 3 producción · 4 pieza real con el plano encima */
.proceso-escena[data-etapa='1'] :is(.capa-2, .capa-3),
.proceso-escena[data-etapa='2'] :is(.capa-1 .lp-nota, .capa-3),
.proceso-escena[data-etapa='3'] .capa-1 .lp-nota,
.proceso-escena[data-etapa='4'] :is(.capa-1, .capa-3) { opacity: 0; }
.proceso-escena[data-etapa='4'] .capa-2 { opacity: .4; }
.proceso-escena[data-etapa='4'] .capa-2 :is(.lp-cota, .lp-titulo, .reticula) { opacity: 0; }
/* Escena sin armar (sin JS o con "reducir movimiento"): la pieza terminada, sin capas de construcción */
.proceso:not(.is-armed) .lamina-plano { display: none; }

.proceso-indicador {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 470px);
  margin-top: var(--s-3);
  list-style: none;
  color: var(--texto-atenuado);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.proceso-indicador li { padding-top: .6rem; border-top: 3px solid var(--linea); transition: border-color .3s, color .3s; }
.proceso-escena[data-etapa='1'] .proceso-indicador li:nth-child(-n + 1),
.proceso-escena[data-etapa='2'] .proceso-indicador li:nth-child(-n + 2),
.proceso-escena[data-etapa='3'] .proceso-indicador li:nth-child(-n + 3),
.proceso-escena[data-etapa='4'] .proceso-indicador li { border-color: var(--celeste); color: var(--gris-claro); }

.proceso-pasos { list-style: none; }
.paso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42vh;
  padding-left: var(--s-4);
  border-left: 1px solid var(--linea);
  transition: border-color .4s ease-out;
}
.paso:first-child { min-height: 30vh; justify-content: flex-start; padding-top: var(--s-4); }
.paso h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; transition: color .4s ease-out; }
.paso p { margin-top: var(--s-2); max-width: 36ch; color: var(--texto-sec); font-size: var(--fs-lead); transition: color .4s ease-out; }
/* Atenuado por color, no por opacidad: sigue por encima de 4.5:1 */
.proceso.is-armed .paso:not(.is-activo) h3,
.proceso.is-armed .paso:not(.is-activo) p { color: var(--texto-atenuado); }
.proceso.is-armed .paso.is-activo { border-left-color: var(--celeste); }

@media (max-width: 959px) {
  .proceso-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  /* En celular la lámina queda fija arriba y los pasos pasan por debajo */
  .proceso-escena { z-index: 2; display: flex; justify-content: center; padding-block: var(--s-2); background: var(--azul-noche); box-shadow: 0 1px 0 var(--linea-suave); }
  .lamina { width: min(62vw, 300px, calc((100svh - var(--header-h)) * .42)); }
  .proceso-indicador { display: none; }
  .paso,
  .paso:first-child { min-height: 46svh; justify-content: flex-start; padding-top: var(--s-4); }
}

/* ─── 10. Promesas y preguntas ─── */
/* Minimalista: P3 plano con un plano 2:1 en el borde derecho */
.principios { position: relative; isolation: isolate; padding-block: var(--seccion); overflow: clip; background: var(--azul); }
.principios::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 22vw;
  background: var(--azul-profundo);
  border-left: 2px solid rgba(90, 190, 255, .28);
  transform: skewX(-26.565deg);
  transform-origin: right bottom;
}
.principios-titulo { max-width: 14ch; }
.promesas { display: grid; gap: var(--s-2); margin-top: var(--s-6); list-style: none; }
.promesa { font-size: var(--fs-promesa); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
/* El trazo tacha la promesa (estado final por defecto). Es un fondo por línea
   (box-decoration-break), así también tacha cuando la frase ocupa dos renglones. */
.promesa s {
  color: var(--texto-atenuado);
  text-decoration: none;
  background: linear-gradient(var(--celeste), var(--celeste)) 0 58% / 100% max(3px, .07em) no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lo-que-si { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: end; margin-top: var(--s-7); }
.lo-que-si-titulo { color: var(--blanco); font-size: clamp(3rem, 1.6rem + 4.2vw, 5.4rem); font-weight: 800; line-height: var(--lh-display); letter-spacing: -.03em; }
.lo-que-si-texto { max-width: 34ch; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); font-weight: 600; line-height: 1.35; }

@media (max-width: 759px) {
  .principios::after { width: 30vw; opacity: .7; }
  .lo-que-si { grid-template-columns: 1fr; }
}

.faq { position: relative; padding-block: var(--seccion); background: var(--azul-profundo); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-5); align-items: start; }
.faq-titulo { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); }
.faq-list { border-top: 1px solid var(--linea); }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item summary { justify-content: space-between; padding-block: var(--s-2); font-size: 1.125rem; line-height: 1.35; transition: color var(--t-rapido); }
.faq-item summary:hover { color: var(--blanco); }
.faq-item summary::after { color: var(--celeste); }
.faq-item p { max-width: 62ch; padding-bottom: var(--s-3); color: var(--texto-sec); }
@media (max-width: 859px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ─── 11. Señal ─── */
/* El trazo termina en un nodo naranja sobre el borde superior y desde ahí se abre el plano
   (así el celeste nunca pasa por encima del naranja).
   Por defecto el plano está entero: el barrido solo existe en la sección 14. */
.senal { position: relative; isolation: isolate; background: var(--azul-noche); }
.trazo-fin { left: 50%; top: 0; }
.senal-plano {
  min-height: max(100svh, 40rem);
  padding-block: max(24svh, 9rem) clamp(4rem, 3rem + 5vw, 7rem);
  background: var(--naranja);
  color: var(--azul-hondo);
}
.senal-inner { display: grid; gap: var(--s-5); }
.senal-inner > * { min-width: 0; }
.senal-titulo {
  color: var(--azul-hondo);
  font-size: var(--fs-senal);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
}
/* «improvisando?»: con movimiento empieza como contorno (boceto) y se rellena en diagonal 1:2
   mientras la señal se abre (plano). Sin movimiento, relleno pleno. */
.senal-l2 { display: inline-block; padding-bottom: .22em; margin-bottom: -.22em; }
.senal-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-4) var(--s-5);
  align-items: start;
  padding-top: var(--s-4);
  border-top: 2px solid var(--azul-hondo);
}
.senal-sub { max-width: 30ch; font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.senal-acciones { display: grid; justify-items: start; gap: var(--s-2); }
.senal-nota { max-width: 42ch; font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; }
.senal-nota a { font-weight: 700; text-underline-offset: 3px; }
.senal :focus-visible { outline-color: var(--azul-hondo); }
@media (max-width: 759px) {
  .senal-cuerpo { grid-template-columns: 1fr; }
}

/* ─── 12. Footer, CTA móvil y diálogo ─── */
.site-footer { position: relative; padding-block: var(--s-6) var(--s-4); background: var(--azul-hondo); font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.footer-brand .logo { height: 1.4rem; }
.footer-brand p { margin-top: var(--s-1); max-width: 28ch; color: var(--texto-sec); }
.footer-title { margin-bottom: var(--s-2); font-size: var(--fs-sm); font-weight: 800; color: var(--gris-claro); }
.footer-col ul { display: grid; gap: .25rem; list-style: none; color: var(--texto-sec); }
.footer-col a { display: inline-block; padding-block: .4rem; color: var(--texto-sec); text-decoration: none; transition: color var(--t-rapido) ease-out; }
.footer-col a:hover { color: var(--gris-claro); text-decoration: underline; text-underline-offset: 4px; }
.footer-col li:not(:has(a)) { padding-block: .35rem; line-height: 1.45; }
.pendiente { color: var(--texto-sec); font-style: italic; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--linea-suave); color: var(--texto-sec); }
@media (max-width: 859px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .footer-grid { grid-template-columns: 1fr; } }

.mobile-cta { display: none; }
@media (max-width: 959px) {
  .mobile-cta {
    position: fixed;
    left: var(--s-2);
    right: var(--s-2);
    bottom: calc(var(--s-2) + env(safe-area-inset-bottom));
    z-index: 40;
    display: block;
    visibility: hidden;
    transform: translateY(calc(100% + 2rem));
    transition: transform var(--t-normal) var(--ease-out), visibility 0s linear var(--t-normal);
  }
  .mobile-cta.is-visible { visibility: visible; transform: none; transition: transform var(--t-normal) var(--ease-out), visibility 0s; }
  .mobile-cta .btn { width: 100%; box-shadow: 0 8px 24px rgba(11, 18, 32, .45); }
  html { scroll-padding-bottom: 92px; }
  .site-footer { padding-bottom: calc(var(--s-4) + 84px); }
}

.demo-dialog { width: min(480px, calc(100% - 2rem)); padding: 0; border: 1px solid rgba(230, 230, 230, .16); border-radius: 6px; background: var(--gris-oscuro); color: var(--gris-claro); }
.demo-dialog::backdrop { background: rgba(13, 22, 38, .8); }
.demo-dialog-inner { display: grid; gap: var(--s-2); padding: var(--s-4); }
.demo-dialog h2 { font-size: 1.375rem; font-weight: 800; line-height: 1.2; }
.demo-dialog p { color: var(--texto-sec); }
.demo-dialog dl { display: grid; gap: .2rem; }
.demo-dialog dt { color: var(--texto-sec); font-size: .875rem; }
.demo-dialog dd { margin-bottom: var(--s-1); font-weight: 700; }
.demo-dialog .btn { justify-self: start; }

/* ─── 13. Páginas secundarias (legales y 404) ─── */
.site-header.is-solido { background: var(--azul-hondo); border-bottom-color: var(--linea-suave); }
.page-simple { padding-block: var(--seccion); background: var(--azul); }
.page-simple .section-title { max-width: 20ch; font-size: var(--fs-h2); font-weight: 800; line-height: var(--lh-display); letter-spacing: -.03em; }
.page-simple .section-lead { max-width: 50ch; margin-top: var(--s-3); color: var(--texto-sec); font-size: var(--fs-lead); }
.notice { max-width: 62ch; margin-top: var(--s-4); padding: var(--s-3); border-left: 4px solid var(--naranja); background: var(--azul-profundo); border-radius: var(--radio); }
.notice strong { color: var(--blanco); }
.doc-block { max-width: 62ch; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--linea); }
.doc-block h2 { font-size: var(--fs-h3); font-weight: 800; }
.doc-block p { margin-top: var(--s-1); color: var(--texto-sec); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-top: var(--s-4); }

/* ═══════════════════════════════════════════════════════════════
   14. MOVIMIENTO
   El estado por defecto de todo es el FINAL. El movimiento solo existe
   dentro de estos bloques: sin JS, sin soporte o con "reducir movimiento",
   la página se lee completa y quieta (trazo entero, planos en su lugar,
   promesas tachadas, señal abierta, verbos en lista).

   14.a  Entrada de la apertura.
   14.b  Ligado al scroll con CSS (trazo, planos, tachado, señal).
   14.c  Alternativa con IntersectionObserver.
   14.d  Microinteracciones de servicios (heredadas de la V2).
═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* ── 14.a Apertura: las líneas suben, la arista se traza y la i se enciende ── */
  .escalon-texto { animation: sube-mascara 1s var(--ease-out) .1s both; }
  .escalon-2 .escalon-texto { animation-delay: .24s; }
  .apertura-titulo::before { animation: traza-x .9s var(--ease-io) .7s both; }
  .apertura .i-punto { animation: punto-entra .45s var(--ease-out) 1.45s both; }
  .apertura .i-punto::after { animation: anillo 1.2s ease-out 1.75s both; }
  .apertura-bajada { animation: entra-1-2 .8s var(--ease-out) .6s both; }
  .verbo-final.is-activo .i-punto::after { animation: anillo 1.2s ease-out .5s both; }

  /* Campo: las visitas aparecen, sus recorridos bajan al pie y la línea sube hasta la i.
     Con el campo, el punto de la i se enciende cuando llega la línea. */
  .campo-entra .campo-visita { animation: punto-entra .35s var(--ease-out) calc(.7s + var(--i) * 80ms) both; }
  .campo-entra .campo-ruta { stroke-dasharray: 1; animation: traza-ruta .7s var(--ease-io) calc(.85s + var(--i) * 80ms) both; }
  .campo-entra .campo-brazo { stroke-dasharray: 1; animation: traza-ruta .6s var(--ease-io) 1.35s both; }
  .campo-entra .campo-tronco { stroke-dasharray: 1; animation: traza-ruta 1s var(--ease-io) 1.35s both; }
  .apertura.campo-entra .i-punto { animation-delay: 2.3s; }
  .apertura.campo-entra .i-punto::after { animation-delay: 2.55s; }
  .apertura .i-punto.llega::after { animation: anillo 1.2s ease-out both; }

  /* ── 14.b Ligado al scroll ── */
  @supports (animation-timeline: view()) {
    /* El trazo: keyframes generados por trazo.js con la geometría real */
    .js .trazo.is-listo .trazo-linea { animation: trazo-dibujo linear both; animation-timeline: scroll(root); }
    .js .trazo.is-listo ~ .trazo-cabeza { display: block; animation: trazo-cabeza linear both; animation-timeline: scroll(root); }

    /* Cada plano entra sobre la diagonal: viene de abajo a la izquierda y sube hacia la derecha */
    .plano { animation: plano-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }

    /* El trazo tacha cada promesa al cruzar el centro de la pantalla */
    .promesa { view-timeline-name: --promesa; }
    .promesa s { animation: tacha linear both; animation-timeline: --promesa; animation-range: entry 70% cover 45%; }

    /* La señal se abre desde el nodo final con bordes 1:2 */
    .senal { view-timeline-name: --senal; }
    .senal-plano { animation: senal-abre linear both; animation-timeline: --senal; animation-range: entry 45% cover 50%; }
    .senal-l2 {
      color: transparent;
      -webkit-text-stroke: 2px var(--azul-hondo);
      background: linear-gradient(116.565deg, var(--azul-hondo) 50%, transparent 50%) 100% 0 / 250% 100% no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      animation: rellena linear both;
      animation-timeline: --senal;
      animation-range: cover 38% cover 62%;
    }
  }

  /* ── 14.c Alternativa sin scroll-driven (IntersectionObserver, una vez) ── */
  @supports not (animation-timeline: view()) {
    .js .plano:not(.is-visible) { opacity: 0; transform: translate(-6rem, 3rem); }
    .js .plano { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
    .js .promesa:not(.is-visible) s { color: var(--blanco); background-size: 0% max(3px, .07em); }
    .js .promesa s { transition: background-size .9s var(--ease-io) .15s, color .6s ease-out .4s; }
    .js .senal.is-armed:not(.is-visible) .senal-plano { clip-path: polygon(0 25vw, 100% -25vw, 100% -25vw, 0 25vw); }
    .js .senal.is-armed .senal-plano { transition: clip-path 1.4s var(--ease-io); clip-path: polygon(0 -100%, 100% calc(-100% - 50vw), 100% 100%, 0 calc(100% + 50vw)); }
    .js .senal.is-armed .senal-l2 {
      color: transparent;
      -webkit-text-stroke: 2px var(--azul-hondo);
      background: linear-gradient(116.565deg, var(--azul-hondo) 50%, transparent 50%) 0 0 / 250% 100% no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      transition: background-position 1.2s var(--ease-io) .9s;
    }
    .js .senal.is-armed:not(.is-visible) .senal-l2 { background-position: 100% 0; }
  }

  /* ── 14.d Servicios ── */
  .js [data-al-entrar] :is(.c-p, .c-d, .c-c) { opacity: 0; transform: scale(.4); transition: opacity .35s ease-out, transform .45s var(--ease-out); transition-delay: calc(.2s + var(--n) * 70ms); }
  .js [data-al-entrar].is-visible :is(.c-p, .c-d, .c-c) { opacity: 1; transform: none; }

  .js .anuncios-fig[data-al-entrar] :is(.an-b, .an-b2) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .anuncios-fig[data-al-entrar] :is(.an-a, .an-c) { opacity: 0; transition: opacity .9s ease-out .25s; }
  .js .anuncios-fig[data-al-entrar] .an-b { transition: stroke-dashoffset 1.1s var(--ease-io) .2s; }
  .js .anuncios-fig[data-al-entrar] :is(.an-ajuste, .an-etiquetas .et-a, .an-etiquetas .et-c) { opacity: 0; transition: opacity .4s ease-out 1.35s; }
  .js .anuncios-fig[data-al-entrar] .an-b2 { transition: stroke-dashoffset 1s var(--ease-io) 1.7s; }
  .js .anuncios-fig[data-al-entrar] .et-b { opacity: 0; transition: opacity .4s ease-out 2.6s; }
  .js .anuncios-fig[data-al-entrar].is-visible :is(.an-b, .an-b2) { stroke-dashoffset: 0; }
  .js .anuncios-fig[data-al-entrar].is-visible :is(.an-a, .an-c) { opacity: 1; }
  .js .anuncios-fig[data-al-entrar].is-visible :is(.an-ajuste, .an-etiquetas text) { opacity: 1; }

  .escala .e { stroke-dasharray: 1; transition: stroke-dashoffset .6s var(--ease-io) .1s; }
  .escala[data-nivel='0'] :is(.n1, .n2, .n3) .e,
  .escala[data-nivel='1'] :is(.n2, .n3) .e,
  .escala[data-nivel='2'] .n3 .e { stroke-dashoffset: 1; }

  /* Proceso: la retícula, la diagonal y el acento se trazan al aparecer el plano */
  .lamina-plano :is(.capa, .capa *) { transition: opacity .55s var(--ease-out); }
  .lamina-plano .trazo-l { stroke-dasharray: 1; transition: stroke-dashoffset .9s var(--ease-io); }
  .proceso-escena[data-etapa='1'] .trazo-l { stroke-dashoffset: 1; }

  details::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-normal) var(--ease-out), content-visibility var(--t-normal) allow-discrete; }
  details[open]::details-content { block-size: auto; }

  .demo-dialog[open] { animation: aparece .25s var(--ease-out); }
}

/* ─── Keyframes ─── */
@keyframes sube-mascara { from { transform: translateY(108%); } }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }
/* Entrada sobre el vector 1:2: avanza 2 por cada 1 que sube */
@keyframes entra-1-2 { from { opacity: 0; transform: translate(-2.4rem, 1.2rem); } }
@keyframes traza-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes traza-ruta { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 759px) and (prefers-reduced-motion: no-preference) { .senal-l2 { -webkit-text-stroke-width: 1.5px; } }
@keyframes rellena { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes punto-entra { from { transform: scale(0); } }
@keyframes anillo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes plano-entra { from { opacity: 0; transform: translate(-6rem, 3rem); } to { opacity: 1; transform: none; } }
@keyframes tacha {
  from { color: var(--blanco); background-size: 0% max(3px, .07em); }
  60% { color: var(--blanco); }
  to { color: var(--texto-atenuado); background-size: 100% max(3px, .07em); }
}
@keyframes senal-abre {
  from { clip-path: polygon(0 25vw, 100% -25vw, 100% -25vw, 0 25vw); }
  to { clip-path: polygon(0 -100%, 100% calc(-100% - 50vw), 100% 100%, 0 calc(100% + 50vw)); }
}

/* Wordmark como texto en las páginas secundarias (sin sprite) */
.brand-texto { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; color: var(--blanco); text-decoration: none; }
.brand-texto span:not(.sr-only) { color: var(--naranja); }

/* SEO: la versión visual de «elijan.» del titular se dibuja con contenido generado,
   así el texto del H1 que leen buscadores y lectores de pantalla queda una sola vez («elijan.»). */
.ct::before { content: attr(data-t); }