/* ============================================================
   ESSENTIA — Instituto de Transformación Humana · soyessentia.com
   César Andrade, fundador. Sistema visual v3 — estructura inspirada en
   referencias (Cassandra Worthy / Tony Robbins / Sé Infinito), adaptada
   a la identidad y colores propios de ESSENTIA. Sin copiar literal.
   ============================================================ */

/* ---- Fonts (self-hosted, no Google Fonts/CDN en runtime) ---- */
@font-face{
  font-family:'Big Shoulders';font-style:normal;font-weight:400;font-display:swap;
  src:url('lib/fonts/BigShoulders-Regular.woff?v=20260925c') format('woff');
}
@font-face{
  font-family:'Big Shoulders';font-style:normal;font-weight:700;font-display:swap;
  src:url('lib/fonts/BigShoulders-Bold.woff?v=20260925c') format('woff');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('lib/fonts/Outfit-Regular.woff?v=20260925c') format('woff');
}
@font-face{
  font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;
  src:url('lib/fonts/Outfit-Bold.woff?v=20260925c') format('woff');
}
@font-face{
  font-family:'Angin Senja';font-style:normal;font-weight:400;font-display:swap;
  src:url('lib/fonts/Angin-Senja.woff?v=20260925') format('woff');
}
@font-face{
  font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;
  src:url('lib/fonts/Lora-MediumItalic.woff?v=20260924') format('woff');
}
@font-face{
  font-family:'Raleway';font-style:normal;font-weight:300;font-display:swap;
  src:url('lib/fonts/Raleway-Variable.woff2?v=20260925e') format('woff2');
}
@font-face{
  font-family:'Raleway';font-style:normal;font-weight:400;font-display:swap;
  src:url('lib/fonts/Raleway-Variable.woff2?v=20260925e') format('woff2');
}

/* ---- Tokens ---- */
:root{
  --black:#050403;
  --black-deep:#000000;
  --ink:#0e0c0a;
  --panel:#141110;
  --panel-2:#1a1613;
  --line:rgba(245,241,234,0.12);
  --line-strong:rgba(245,241,234,0.24);
  --ivory:#f5f1ea;
  --ivory-dim:rgba(245,241,234,0.66);
  /* CORRECCIÓN — ronda de pulido técnico post-auditoría: la auditoría
     maestra midió (fórmula WCAG de luminancia relativa, sobre estos
     mismos tokens contra --ink) que --ivory-faint a alpha .4 da 3.50:1,
     por debajo de AA texto normal (4.5:1). Se confirmó por grep que las
     ~20 reglas que usan este token en el CSS son TODAS color de texto
     (nav, etiquetas de Confiar, stats/CTA de Fundador, subtítulo de
     marca, enlaces de footer) — ninguna es un uso puramente decorativo
     (borde/fondo) — así que no hacía falta un token paralelo: subir el
     alpha aquí corrige selectivamente todo uso informativo real sin
     tocar nada decorativo. Alpha .5 → 4.86:1 (AA con margen). */
  --ivory-faint:rgba(245,241,234,0.5);

  --logo-ivory:#f4f1ea;
  --logo-bg:#0d0d0d;
  --logo:'Raleway',var(--sans);

  --orange:#ff7f1f;
  --orange-deep:#f24405;
  --orange-soft:#ffb066;
  --orange-peach:#f9c597;
  --orange-dim:rgba(255,127,31,0.16);
  --orange-line:rgba(255,127,31,0.45);
  /* --orange-line mide 2.39:1 contra --ink — falla incluso el mínimo de
     texto grande (3:1). A diferencia de --ivory-faint, la mayoría de sus
     usos SÍ son decorativos (bordes, línea de gradiente) y deben
     conservar su intensidad actual — por eso este token no se toca.
     Solo un uso es texto real: el numeral "01/02.../05" del nav
     (11px, bold — no califica como "texto grande" en WCAG, necesita
     4.5:1 completo). Token paralelo solo para ese caso — ver
     .nav__steps .num más abajo. Alpha .75 → 4.73:1. */
  --orange-line-text:rgba(255,127,31,0.75);

  --turquoise:#22babb;
  --turquoise-soft:#baf2f2;
  --turquoise-dim:rgba(34,186,187,0.14);
  --turquoise-line:rgba(34,186,187,0.45);

  --grad-brand:linear-gradient(90deg,var(--orange),var(--turquoise));

  --display:'Big Shoulders','Outfit',sans-serif;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --quote:'Lora',Georgia,serif;
  --script:'Angin Senja',var(--quote);

  --container:1220px;
  --container-narrow:820px;
  --gutter:clamp(20px,6vw,96px);
  --section-pad:clamp(72px,12vw,148px);

  --radius:4px;
  --radius-sm:2px;
  --radius-lg:8px;
  --radius-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-s:350ms;
  --dur-m:550ms;
  --dur-l:750ms;

  --nav-h:72px;

  /* Camino ESSENTIA — sistema unificado del marcador (la V/A) y la línea.
     Un único valor por propiedad, reutilizado tal cual en Hero, Sentir,
     Reconocerme y Descubrir, para que el Camino se perciba como UNA sola
     trayectoria continua y no como un estilo distinto por bloque. Ver
     auditoría de continuidad para el detalle de qué cambió y por qué.
     --essentia-path-lit-alpha y los dos --essentia-glow-*-alpha se subieron
     ligeramente (de .6/.3/.13 a .8/.37/.16) para que "lo recorrido" se
     distinga con claridad de "lo futuro" (--essentia-path-track-alpha
     se deja igual, casi invisible) sin acercarse al brillo de la punta
     activa (que sigue siendo la más luminosa, vía --essentia-tip-glow-*) y
     sin tocar --essentia-path-width ni --essentia-path-track-width —
     mismo grosor en todas las secciones, solo cambia la opacidad.
     RONDA DE PULIDO GLOBAL (jerarquía de luz, pedido de César, sección E):
     el criterio pasa de 3 a 4 niveles — FUTURO < RECORRIDO < TRAMO ACTIVO <
     A/V — así que --essentia-path-lit-alpha baja de .8 a .55 ("recorrido")
     para dejar sitio, con claridad, a un nuevo nivel intermedio más
     luminoso, --essentia-path-active-*, aplicado únicamente al tramo que
     queda justo detrás de la punta (ver --essentia-path-active-alpha y el
     nuevo elemento .xxx__path-active en cada sección, con moderación: no es
     un cuarto color ni un cuarto grosor, solo más opacidad y un glow algo
     mayor en ese tramo corto). .55 sigue siendo ampliamente distinguible de
     .07 (7×), así que no reintroduce el problema original de "recorrido
     apenas se distingue del futuro" que motivó subir a .8 en su momento. */
  --essentia-path-color:34,186,187;
  --essentia-path-width:1.4px;
  --essentia-path-track-width:1px;
  --essentia-path-track-alpha:.07;
  --essentia-path-lit-alpha:.55;
  --essentia-path-active-alpha:.95;
  --essentia-path-active-glow-near-alpha:.5;
  --essentia-path-active-glow-far-alpha:.22;
  --essentia-glow-near-blur:8px;
  --essentia-glow-far-blur:18px;
  --essentia-glow-near-alpha:.37;
  --essentia-glow-far-alpha:.16;
  --essentia-tip-size:12px;
  --essentia-tip-glow-near-blur:10px;
  --essentia-tip-glow-far-blur:20px;
  --essentia-tip-glow-near-alpha:.58;
  --essentia-tip-glow-far-alpha:.26;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:var(--nav-h);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .hero__media,.nav{opacity:1;transform:none;}
}

body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-0.01em;text-transform:uppercase;line-height:.96;}
p{margin:0;}
button{font-family:inherit;}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.container--narrow{max-width:var(--container-narrow);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.script-accent{
  font-family:var(--script);font-weight:400;text-transform:none;
  font-size:1.2em;line-height:1;display:inline-block;color:var(--orange-soft);padding:0 .03em;
}
.script-accent--turquoise{color:var(--turquoise-soft);}

/* ================= Splash — ESSENTIA (secuencia de carga) ================= */
:root{
  --splash-logo-w:clamp(224px,43vw,428px);
}
#splash{
  position:fixed;inset:0;z-index:999;background:var(--logo-bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s var(--ease);
}
/* Salida: el preloader (fondo + logo, como una sola unidad) se desvanece
   sin corte mientras el Hero se revela detrás — timing en initSplash() (main.js). */
#splash.is-leaving{opacity:0;}
#splash.is-hidden{visibility:hidden;pointer-events:none;}
.splash__logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px;}
.splash__word-box{position:relative;display:block;}
.splash__word{
  display:block;width:var(--splash-logo-w);height:auto;aspect-ratio:4016/748;
  margin:0;opacity:0;
  animation:splash-logo .6s var(--ease) .15s forwards;
}
/* La barra es la línea degradada real del logo oficial (mismos píxeles),
   recortada aparte y revelada de izquierda a derecha — una sola barra,
   no una dibujada de nuevo. */
.splash__bar{
  display:block;width:calc(var(--splash-logo-w) * 980 / 4016);height:auto;aspect-ratio:980/26;
  clip-path:inset(0 100% 0 0);
  animation:splash-bar-fill 1s cubic-bezier(.65,0,.35,1) .45s forwards;
}
@keyframes splash-logo{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes splash-bar-fill{to{clip-path:inset(0 0 0 0);}}

/* La A final de ESSENTIA (mismos píxeles del logo oficial, ver mask
   #essentiaAMask) se enciende con el degradado de marca justo cuando la
   barra termina de cargar — como si la carga completa "prendiera" la A.
   Posición calculada a partir de las coordenadas reales de la A dentro
   del archivo del logo (90.04%/1.47% de origen, 9.76%/57.75% de tamaño
   respecto al bloque completo de la palabra ESSENTIA — recorte ajustado
   solo al trazo de la letra, sin el texto del eslogan que queda debajo). */
.splash__a-ignite{
  position:absolute;left:90.04%;top:1.47%;width:9.76%;height:57.75%;
  clip-path:inset(0 100% 0 0);
  opacity:0;
  filter:drop-shadow(0 0 0 rgba(34,186,187,0));
}
.splash__a-ignite.is-lit{
  opacity:1;clip-path:inset(0 0 0 0);
  filter:drop-shadow(0 0 10px rgba(34,186,187,.55)) drop-shadow(0 0 22px rgba(255,127,31,.22));
  transition:clip-path .65s cubic-bezier(.65,0,.35,1),opacity .12s ease,filter .55s ease .1s;
}

/* El vuelo de la A: un clon temporal, fijo a la ventana (no al documento),
   que main.js posiciona exactamente sobre la A encendida y anima hasta la
   posición real del marcador del Camino — mismo degradado, mismo recorte
   del logo oficial. Se retira del DOM en cuanto aterriza (ver flyAToPath
   en main.js); nunca queda un segundo elemento permanente en la página. */
.camino-flight{
  position:fixed;left:0;top:0;z-index:999;pointer-events:none;
  transform-origin:50% 50%;
  filter:drop-shadow(0 0 10px rgba(34,186,187,.5)) drop-shadow(0 0 22px rgba(255,127,31,.22));
  transition:transform .78s cubic-bezier(.4,0,.2,1),filter .78s ease;
}
.camino-flight svg{display:block;width:100%;height:100%;}
.camino-flight.is-flying{
  filter:drop-shadow(0 0 18px rgba(34,186,187,.75)) drop-shadow(0 0 36px rgba(34,186,187,.4));
}

/* ================= Hero intro — revelado en capas tras el preloader ================= */
/* fondo primero, con un asentamiento de escala casi imperceptible */
.hero__media{
  opacity:0;transform:scale(1.015);
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);
}
.hero__media.is-visible{opacity:1;transform:scale(1);}

/* ================= Nav — sticky, siempre visible ================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--gutter);
  background:rgba(5,4,3,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  opacity:0;
  transition:background var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease),opacity .6s var(--ease);
}
.nav.is-visible{opacity:1;}
.nav.is-scrolled{background:rgba(5,4,3,.92);border-bottom-color:var(--line);}

.nav__brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex-shrink:0;}
.nav__brand-word{
  display:block;width:180px;height:auto;aspect-ratio:4016/867;
}

.nav__steps{display:flex;gap:clamp(10px,1.6vw,26px);list-style:none;margin:0;padding:0;flex:1;justify-content:center;}
.nav__steps a{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-faint);
  padding:6px 2px;position:relative;transition:color .25s ease;white-space:nowrap;
}
.nav__steps .num{
  font-family:var(--display);font-weight:700;color:var(--orange-line-text);font-size:11px;
}
.nav__steps a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--grad-brand);transition:right .3s var(--ease);}
.nav__steps a:hover,.nav__steps a:focus-visible,.nav__steps a.is-active{color:var(--ivory);}
.nav__steps a.is-active::after,.nav__steps a:hover::after{right:0;}
.nav__steps a.is-active .num{color:var(--orange);}

.nav__right{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.nav__social{display:flex;gap:8px;}
.nav__social a{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--ivory-dim);
  transition:border-color .25s ease,color .25s ease,transform .25s var(--ease);
}
.nav__social a:hover,.nav__social a:focus-visible{border-color:var(--orange);color:var(--orange-soft);transform:translateY(-2px);}
.nav__social svg{width:14px;height:14px;}

.nav__toggle{
  /* CORRECCIÓN — ronda de pulido técnico post-auditoría, punto 5: subido
     de 38×38px a 44×44px (mínimo de área táctil recomendado). Ícono
     interno sin cambios. */
  display:none;position:relative;z-index:5;width:44px;height:44px;
  border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--ivory);
  cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;
}
.nav__toggle svg line{transition:transform .3s var(--ease),opacity .2s ease;transform-origin:12px 12px;}
.nav__toggle[aria-expanded="true"] line:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] line:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] line:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:980px){
  .nav__steps{
    position:fixed;inset:var(--nav-h) 0 0 auto;width:min(80vw,340px);height:calc(100vh - var(--nav-h));
    background:var(--ink);flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;
    padding:0 40px;transform:translateX(100%);transition:transform .45s var(--ease);border-left:1px solid var(--line);
  }
  .nav__steps.is-open{transform:translateX(0);}
  /* CORRECCIÓN — ronda de pulido técnico post-auditoría, punto 5: la
     auditoría midió (Playwright, 430/375px) que cada link del menú
     mobile medía 35.25px de alto (padding 6px arriba/abajo + line-height
     heredado de body, 15px*1.55≈23.25px = 35.25px), por debajo del
     mínimo de ~44px recomendado para área táctil. Solo se sube el
     padding vertical — mismo font-size, mismo texto, misma composición
     visual del menú — el link pasa a ~45px de alto (11px*2+23.25).
     El gap:22px entre items (regla base de .nav__steps arriba) no se
     tocó. */
  .nav__steps a{font-size:15px;padding-top:11px;padding-bottom:11px;}
  .nav__toggle{display:flex;}
  .nav__social{display:none;}
  .nav__brand-word{width:150px;}
  .nav__brand-sub{font-size:6px;}
}

/* ================= Botones ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
  font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:0 30px;border-radius:var(--radius-pill);
  border:1px solid var(--orange);color:var(--black-deep);background:var(--orange);
  cursor:pointer;transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease),background var(--dur-s) var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(255,127,31,.55);}
.btn--ghost{background:transparent;color:var(--ivory);border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--orange);box-shadow:0 14px 34px -18px rgba(255,127,31,.4);}
.btn--turquoise{border-color:var(--turquoise);background:var(--turquoise);color:var(--black-deep);}
.btn--turquoise:hover{box-shadow:0 14px 34px -12px rgba(34,186,187,.5);}
.btn--turquoise-ghost{background:transparent;color:var(--ivory);border-color:var(--turquoise-line);}
.btn--turquoise-ghost:hover{border-color:var(--turquoise);box-shadow:0 14px 34px -18px rgba(34,186,187,.4);}
.btn--soon{background:transparent;color:var(--ivory-faint);border:1px dashed var(--line-strong);cursor:not-allowed;pointer-events:none;}
.btn--soon:hover{transform:none;box-shadow:none;}
.btn--soon .dot{width:6px;height:6px;border-radius:50%;background:var(--orange-soft);animation:pulse-dot 2.4s ease infinite;}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(255,176,102,.45);}50%{box-shadow:0 0 0 6px rgba(255,176,102,0);}}

/* botón circular con flecha — estilo "camino" */
.btn-arrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory);
}
.btn-arrow .circle{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--orange-line);
  display:flex;align-items:center;justify-content:center;color:var(--orange-soft);
  transition:background var(--dur-s) var(--ease),transform var(--dur-s) var(--ease),color var(--dur-s) var(--ease);
}
.btn-arrow .circle svg{width:16px;height:16px;}
.btn-arrow:hover .circle{background:var(--orange);color:var(--black-deep);transform:translateX(4px);}
.btn-arrow--turquoise .circle{border-color:var(--turquoise-line);color:var(--turquoise-soft);}
.btn-arrow--turquoise:hover .circle{background:var(--turquoise);color:var(--black-deep);}

/* ================= Reveal ================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-l) var(--ease),transform var(--dur-l) var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
.no-js .reveal{opacity:1 !important;transform:none !important;}
.img-hover{overflow:hidden;}
.img-hover img,.img-hover video{transition:transform var(--dur-l) var(--ease);}
.img-hover:hover img,.img-hover:hover video{transform:scale(1.025);}

/* ================= Section scaffolding ================= */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-soft);margin-bottom:18px;font-weight:700;
}
.section-eyebrow::before{content:'';width:24px;height:1px;background:var(--orange);display:inline-block;}
.section-eyebrow--turquoise{color:var(--turquoise-soft);}
.section-eyebrow--turquoise::before{background:var(--turquoise);}
.section-eyebrow--center{justify-content:center;}

/* ================= Hero — entrada a ESSENTIA ================= */
/* Menos es más: fondo, espacio y tipografía hacen el trabajo. Un solo bloque
   de contenido en el tercio inferior izquierdo, una sola acción discreta. */
.hero{
  position:relative;min-height:100svh;
  padding:calc(var(--nav-h) + clamp(24px,6vw,64px)) 0 clamp(64px,10vw,120px);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
/* Fondo placeholder (ver comentario en index.html): gradientes muy suaves,
   naranja/turquesa casi imperceptibles, más oscuro donde vive el texto. */
.hero__media{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(58% 50% at 18% 82%,rgba(255,127,31,.09),transparent 62%),
    radial-gradient(52% 46% at 86% 12%,rgba(34,186,187,.10),transparent 60%),
    linear-gradient(160deg,#110d0a 0%,#0a0908 48%,#07070a 100%);
}
/* Video real del Hero: cubre todo el bloque, decorativo, sin controles.
   El sujeto principal del clip queda hacia el centro-derecha; el texto vive
   abajo a la izquierda, bajo la capa de lectura (::after). */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 50%;
  display:block;pointer-events:none;
}
/* En pantallas angostas se ve solo una franja central del video: se alinea
   para que el rostro de la persona en primer plano quede completo. */
@media (max-width:820px){
  .hero__video{object-position:46% 50%;}
}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 14% 100%,rgba(5,4,3,.82) 0%,rgba(5,4,3,.48) 42%,transparent 68%),
    linear-gradient(180deg,rgba(5,4,3,.3) 0%,rgba(5,4,3,.1) 26%,rgba(5,4,3,.58) 100%);
}
.hero__copy{
  position:relative;z-index:1;
  width:100%;max-width:min(760px,86vw);
  padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turquoise-soft);margin-bottom:22px;font-weight:700;
}
.hero__eyebrow::before{content:'';width:20px;height:1px;background:var(--turquoise);display:inline-block;}
/* serif editorial (declaración) + sans moderna de apoyo debajo */
.hero__headline{
  font-family:var(--quote);font-weight:500;font-style:italic;text-transform:none;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.16;letter-spacing:0;
  max-width:16ch;color:var(--ivory);
}
.hero__sub{
  margin-top:24px;font-family:var(--sans);font-weight:400;text-transform:none;
  font-size:clamp(.98rem,1.4vw,1.1rem);color:var(--ivory-dim);max-width:48ch;line-height:1.6;
}
.hero__cta{
  margin-top:clamp(30px,4.5vw,42px);
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 2px;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ivory-dim);border-bottom:1px solid var(--line-strong);
  transition:color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease),gap var(--dur-s) var(--ease);
}
.hero__cta:hover,.hero__cta:focus-visible{color:var(--ivory);border-color:var(--orange-line);gap:14px;}
.hero__cta-arrow{width:13px;height:13px;color:var(--orange-soft);transition:transform var(--dur-s) var(--ease);}
.hero__cta:hover .hero__cta-arrow,.hero__cta:focus-visible .hero__cta-arrow{transform:translateY(2px);}

/* Nacimiento del Camino ESSENTIA: la misma A que se encendió en el
   preloader reaparece aquí, en miniatura, como el punto que guía el
   Camino — mismos píxeles (#essentiaAMask), mismo degradado de marca.
   Gana luminosidad y una línea fina hacia abajo cuando el usuario
   empieza a desplazarse (--path-progress la actualiza initPathSeed()
   en main.js). */
.hero__path-seed{
  position:absolute;left:50%;bottom:clamp(20px,4.5vh,44px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;z-index:1;
  opacity:0;transition:opacity 1s var(--ease);
}
.hero__path-seed.is-visible{opacity:1;}
/* Aterrizaje del vuelo (ver flyAToPath en main.js): el relevo entre la A
   que viaja y el marcador real debe ser invisible — sin otro fundido
   encima del que ya hizo el vuelo. Por eso, solo en este instante, el
   wrapper aparece sin transición propia (el vuelo ya fue el movimiento)
   y el punto se enciende a brillo pleno; 850ms después is-lit-on-arrival
   se quita y el punto cae, con su propia transición de .4s, al nivel que
   le corresponde por scroll — un destello de bienvenida, no un estado fijo. */
.hero__path-seed.is-visible.is-lit-on-arrival{transition:none;}
.hero__path-seed.is-lit-on-arrival .hero__path-dot{
  opacity:.92;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),.7))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),.36));
}
/* Pulso orgánico compartido del marcador-A del Camino (Hero y Sentir): ni
   una respiración genérica ni un latido cardíaco reconocible — algo entre
   ambos. Expansión muy suave (0→38%), breve permanencia arriba (38→50%),
   contracción (50→74%) y pausa en reposo (74→100%), en un ciclo largo
   (4s) para que no se lea como "pum-pum". El vértice ya apunta hacia
   abajo (rotate 180deg), así que cada keyframe conserva esa rotación y
   solo varía la escala, muy poco (máx. 1.08x) — la intención es "esto
   está vivo", no "esto es un corazón". Bajo prefers-reduced-motion, la
   regla global de arriba ya colapsa esta animación a un solo frame. */
@keyframes camino-pulso{
  0%{transform:rotate(180deg) scale(1);}
  38%,50%{transform:rotate(180deg) scale(1.08);}
  74%,100%{transform:rotate(180deg) scale(1);}
}
/* --path-exit (ver initPathSeed() en main.js, ronda de pulido global del
   Camino): sin este multiplicador, el punto del Hero nunca se apagaba al
   salir de escena y coincidía, encendido, con el punto ya pleno de Sentir
   — dos marcadores a la vez. Mismo criterio de fundido (TIP_FADE_PX=260,
   proximidad del borde inferior del Hero al techo del viewport) que usa
   el resto del Camino, aplicado aquí por primera vez. */
.hero__path-dot{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;
  animation:camino-pulso 4s ease-in-out infinite;
  opacity:calc((.3 + var(--path-progress,0) * .5) * var(--path-exit,1));
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),calc(var(--essentia-tip-glow-near-alpha) * (.55 + var(--path-progress,0) * .45))))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),calc(var(--essentia-tip-glow-far-alpha) * (.5 + var(--path-progress,0) * .5))));
  transition:opacity .4s linear,filter .4s linear;
}
.hero__path-line{
  width:var(--essentia-path-width);
  background:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));
  height:calc(6px + var(--path-progress,0) * 44px);
  opacity:calc((.4 + var(--path-progress,0) * .4) * var(--path-exit,1));
  box-shadow:0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),calc(var(--essentia-glow-near-alpha) * (.5 + var(--path-progress,0) * .5)));
  transition:height .4s linear,opacity .4s linear,box-shadow .4s linear;
}
@media (max-width:820px){
  .hero__path-seed{left:var(--gutter);transform:none;}
}

/* ================= Sentir — pausa, silencio diseñado ================= */
/* Negro casi puro, una sola idea, mucho aire. Sin border-top (a diferencia
   del resto de secciones): la salida del Hero no debe sentirse como un
   corte. El Camino ESSENTIA gana presencia real aquí — ver comentario
   sobre --sentir-progress en initSentirPath() (main.js).
   CORRECCIÓN — ronda de pulido técnico post-auditoría: la auditoría
   maestra midió (Playwright, 1440/1180/430/375, scroll gradual real) que
   con align-items:center la idea queda fuera de pantalla durante el
   ~45-50% final de la sección (dead_zone ≈ H/2, geometría inherente a
   centrar contenido no-sticky en una sección casi tan alta como el
   viewport) — el Camino quedaba solo, sosteniendo un vacío no
   intencional. Fix puramente geométrico, sin sticky/position:fixed/
   scroll-jacking (ninguno de los tres se usa aquí): min-height baja de
   100vh a 76vh (respiro más corto, sigue siendo una pantalla casi
   completa — no "compactado") y el ancla vertical pasa de center a
   flex-end + padding-bottom fijo, de forma que la idea permanece visible
   hasta cerca del final real de la sección y el "vacío" que queda
   después es exactamente ese padding-bottom — un cierre de aire
   intencional y medido, no un tramo indefinido. Verificado con el mismo
   método de medición: dead zone baja de ~425px (47%) a ~70-90px
   (~12-14% de la nueva altura) en los 4 anchos. No se tocó
   --sentir-progress/--sentir-fade ni ningún otro aspecto del Camino. */
.sentir{
  position:relative;min-height:76vh;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:clamp(64px,8.5vh,90px);
  background:radial-gradient(120% 85% at 50% 38%,#0a0908 0%,#020201 62%,#000000 100%);
}
@media (max-width:820px){
  .sentir{min-height:80vh;padding-bottom:clamp(56px,7vh,80px);}
}

/* Línea vertical centrada, continuación visual del punto nacido en el Hero.
   .sentir__path-track es el recorrido completo en baja opacidad (el futuro,
   casi invisible); .sentir__path-lit es el recorrido ya andado, que crece
   con el scroll pero nunca llega al final — deja el cierre abierto hacia
   el Bloque 3. */
.sentir__path{
  position:absolute;left:50%;top:0;bottom:0;width:0;transform:translateX(-50%);
  z-index:1;pointer-events:none;
}
.sentir__path-track{
  position:absolute;left:0;top:0;bottom:0;width:var(--essentia-path-track-width);transform:translateX(-50%);
  background:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));
}
.sentir__path-lit{
  position:absolute;left:0;top:0;width:var(--essentia-path-width);transform:translateX(-50%);
  height:calc(6% + var(--sentir-progress,0) * 72%);
  background:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));
  box-shadow:
    0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)),
    0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha));
}
.sentir__path-point{
  position:absolute;left:0;top:calc(6% + var(--sentir-progress,0) * 72%);
  transform:translate(-50%,-50%);
  /* --sentir-fade (ver initSentirPath() en main.js, ronda de pulido global
     del Camino): fundido de entrada/salida por proximidad de viewport,
     mismo criterio que el resto de la trayectoria — antes este punto no
     tenía ninguno y coincidía encendido con el marcador del Hero. */
  opacity:var(--sentir-fade,1);
  transition:opacity .4s linear;
}
/* Pulsa al mismo ritmo orgánico que el marcador del Hero (@keyframes
   camino-pulso, ver arriba) — la misma A del preloader y del Hero
   (#essentiaAMask), un poco más grande — "gana ligera presencia" —, no
   un círculo distinto. Se pausa con .is-scrolling para que el avance
   real del scroll sea lo que domine la sensación de movimiento, no el
   pulso ambiental. Glow en un punto intermedio: más que la versión
   original, pero lejos del brillo protagónico — el Camino tiene
   presencia, no protagonismo (jerarquía: silencio > idea > Camino). */
.sentir__path-point-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}
.sentir.is-scrolling .sentir__path-point-core{animation-play-state:paused;}
@media (max-width:820px){
  /* El Camino se desplaza al margen para no atravesar nunca el texto. */
  .sentir__path{left:clamp(24px,7vw,32px);transform:none;}
}

/* Una sola idea, centrada, con mucho aire alrededor — mismo tratamiento
   editorial (serif itálica) que el headline del Hero, pero más callada:
   menor tamaño, color más tenue. No debe dominar la pantalla. */
.sentir__idea{
  position:relative;z-index:2;max-width:min(560px,80vw);margin:0 auto;
  padding:0 var(--gutter);text-align:center;
}
/* Selector actualizado de "p" a "h2": el elemento pasó a <h2> en la
   ronda de pulido técnico (jerarquía semántica, punto 4) — mismo
   selector por tag, ahora apuntando al tag real. margin:1em 0 añadido
   explícito porque antes no había ninguna regla de margin aquí y el
   <p> tomaba el margin por defecto del user-agent (1em 0); un <h2> por
   defecto usa un valor distinto (.83em 0), así que se fija el mismo
   valor explícito para que el layout no cambie ni un píxel. */
.sentir__idea h2{
  font-family:var(--quote);font-weight:500;font-style:italic;text-transform:none;
  font-size:clamp(1.15rem,2.6vw,1.7rem);line-height:1.55;letter-spacing:.01em;
  color:var(--ivory-dim);
  /* margin-bottom en 0 (no 1em como el resto de headings de esta ronda):
     .sentir__idea es un flex item de .sentir (align-items:flex-end,
     punto 1 de esta ronda) — al ser flex item establece su propio
     contexto de formato de bloque, así que el margin del h2 NO colapsa
     hacia afuera, queda "atrapado" dentro de .sentir__idea y se suma al
     padding-bottom de .sentir, duplicando el cierre de aire. Se deja
     una sola fuente de "respiro final" (el padding-bottom de .sentir)
     en vez de dos superpuestas — verificado con el mismo script de
     medición: dead zone vuelve a los ~64px/9.4% (1440px) medidos al
     implementar el punto 1 de esta ronda, antes de la conversión a
     heading. */
  margin:1em 0 0;
}

/* ================= Reconocerme — de observador a participante ================= */
/* Sin border-top (mismo criterio que Sentir). Fondo casi negro puro, con dos
   capas muy sutiles: una insinuación de turquesa abajo (el Camino se dirige
   hacia una zona "ligeramente más luminosa", sin cerrar con borde ni línea)
   y un aclarado mínimo en el último tramo — nunca un corte, un umbral. */
.reconocerme{
  position:relative;overflow:hidden;
  background:
    radial-gradient(55% 38% at 50% 100%,rgba(34,186,187,.06) 0%,rgba(34,186,187,0) 72%),
    linear-gradient(180deg,#000000 0%,#000000 84%,#040403 100%);
}
.reconocerme__silence{height:clamp(10vh,13vw,16vh);}
@media (max-width:820px){
  .reconocerme__silence{height:clamp(8vh,11vw,13vh);}
}

/* El trazo del Camino no es un dato fijo: initReconocerme() (main.js) mide
   la posición real de los 3 nodos y dibuja una curva suave entre ellos —
   por eso cada nodo lleva un desplazamiento horizontal MUY leve (ver
   .reconocerme__node más abajo), que es lo único que produce la curva.
   .reconocerme__path-track es el recorrido completo, casi invisible;
   .reconocerme__path-lit es lo ya andado (stroke-dasharray/dashoffset,
   misma técnica que Sentir pero en un trazo, no en una barra). */
.reconocerme__path-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}
.reconocerme__path-track{fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));stroke-width:var(--essentia-path-track-width);}
.reconocerme__path-lit{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha)));
}
.reconocerme__path-active{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-active-alpha));
  stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-far-alpha)));
}

.reconocerme__moment{
  position:relative;z-index:2;min-height:50vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(32px,6vh,56px) var(--gutter);text-align:center;
}
/* Variación MUY leve por momento — evita que las tres paradas se sientan
   como copias del mismo layout, sin mover nada por decorar. El aire antes
   y después cambia según lo que cada momento necesita: la pregunta pide
   llegada; la reflexión es "breve" por definición, así que respira menos;
   la posibilidad deja más aire después, hacia la apertura del Bloque 4. */
.reconocerme__moment[data-moment="0"]{padding-top:clamp(40px,7vh,64px);}
.reconocerme__moment[data-moment="1"]{min-height:42vh;padding-top:clamp(24px,4vh,36px);padding-bottom:clamp(24px,4vh,36px);}
.reconocerme__moment[data-moment="2"]{padding-bottom:clamp(48px,8vh,72px);}

/* El nodo por momento ya NO es un marcador visible — es solo un punto de
   anclaje invisible (1x1) que buildPath() en main.js usa para saber por
   dónde debe pasar la curva cerca de cada idea. La única V visible en
   toda la sección es .reconocerme__tip, más abajo: UNA sola punta activa
   que se desplaza en continuo con el scroll a lo largo del trazo — nunca
   una V fija por momento. Esto es una corrección deliberada: antes cada
   momento encendía su propia V y la dejaba tenue pero visible al quedar
   atrás, lo que se leía como "V → línea → V → línea → V" (una secuencia
   de nodos) en vez de un único Camino continuo. */
.reconocerme__node{
  position:absolute;left:clamp(28px,6vw,64px);top:50%;width:1px;height:1px;margin:0;
  transform:translateY(-50%);
}

/* Punta activa del Camino — una sola por sección, nunca una por momento.
   Se posiciona vía JS (initReconocerme(), main.js) en el punto exacto del
   trazo que corresponde al scroll actual (mismo cálculo que alimenta
   stroke-dashoffset), así la V queda siempre en el extremo de lo ya
   iluminado. Se atenúa a casi nada en el primer/último ~6% del recorrido
   de la sección, para que el relevo con la punta de la sección siguiente
   no se perciba como dos V encendidas a la vez. */
.reconocerme__tip{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%);}
.reconocerme__tip-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;transform:rotate(180deg);
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}

/* El texto de cada momento sigue la misma lógica que su nodo — no se apoya
   en el .reveal genérico del sitio a propósito: initReveal() muestra todo
   de inmediato bajo prefers-reduced-motion, y aquí eso rompería la regla
   de no mostrar las tres ideas a la vez. Con esta clase propia, el orden
   progresivo se mantiene siempre (solo cambia si hay o no transición
   animada de por medio). */
.reconocerme__text{
  max-width:min(600px,84vw);font-family:var(--quote);font-style:italic;font-weight:500;
  line-height:1.5;letter-spacing:.01em;color:var(--ivory-dim);
  /* margin y text-transform explícitos: .reconocerme__text--pregunta pasó
     de <p> a <h2> en la ronda de pulido técnico (jerarquía semántica).
     Sin esto, la regla global "h1,h2,h3,h4{margin:0;text-transform:
     uppercase;...}" (más abajo en este archivo) se aplicaría por encima
     de esta clase para cualquier propiedad no fijada aquí — mismo
     criterio que .sentir__idea h2, ver ese comentario. */
  margin:1em 0;text-transform:none;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),color .9s var(--ease);
}
.reconocerme__moment.is-active .reconocerme__text,
.reconocerme__moment.is-past .reconocerme__text{opacity:1;transform:none;}
.reconocerme__moment.is-past .reconocerme__text{opacity:.55;}

.reconocerme__text--pregunta{font-size:clamp(1.4rem,3.4vw,2.15rem);color:var(--ivory);}
/* "Breve" también en el ritmo de entrada: aparece un poco más rápido que
   las otras dos, coherente con lo que dice de sí misma. */
.reconocerme__text--reflexion{font-size:clamp(1.05rem,2.2vw,1.4rem);max-width:min(480px,78vw);transition-duration:.65s,.65s,.65s;}
/* La posibilidad se abre con un instante extra de espera antes de moverse —
   una pausa mínima, no un efecto — como si costara un poco más abrirla. */
.reconocerme__text--posibilidad{font-size:clamp(1.3rem,3vw,1.9rem);color:var(--turquoise-soft);transition-delay:.1s;}

@media (max-width:820px){
  /* Camino lateral, texto vertical: el nodo ya vive en el margen desde
     desktop (arriba); aquí solo se ajusta al gutter mobile y el texto pasa
     a ocupar el resto del ancho, alineado a la izquierda — igual que Sentir.
     El aire vertical sube un poco respecto a desktop: en mobile el texto
     envuelve en más líneas y el bloque necesita algo más de respiración
     para no sentirse apretado, aun dentro del mismo rango objetivo. */
  .reconocerme__moment{align-items:flex-start;text-align:left;position:relative;padding-left:calc(var(--gutter) + 26px);min-height:58vh;}
  .reconocerme__moment[data-moment="1"]{min-height:50vh;}
  .reconocerme__node{left:var(--gutter);}
  .reconocerme__text{max-width:min(420px,74vw);}
}

/* ================= Descubrir ESSENTIA — de conciencia a claridad ================= */
/* Sin border-top: emerge directo desde la Posibilidad del Bloque 3. El
   Camino cambia de función (deja de acompañar, empieza a revelar) pero
   sigue siendo el mismo lenguaje: misma A/V (essentiaAMask/essentiaAGrad,
   nunca un círculo), mismos 3 estados, mismo pulso orgánico. La única
   diferencia deliberada es que el nodo se acerca un poco más al texto
   momento a momento — "abre ligeramente su recorrido" sin volverse
   decorativo ni convertirse en timeline. */
.descubrir{
  position:relative;overflow:hidden;
  background:
    radial-gradient(48% 32% at 50% 20%,rgba(34,186,187,.055) 0%,rgba(34,186,187,0) 70%),
    radial-gradient(46% 28% at 50% 97%,rgba(255,127,31,.035) 0%,rgba(255,127,31,0) 72%),
    linear-gradient(180deg,#000000 0%,#030302 62%,#050403 100%);
}
.descubrir__silence{height:clamp(6vh,8vw,9vh);}
@media (max-width:820px){
  .descubrir__silence{height:clamp(5vh,7vw,8vh);}
}

.descubrir__path-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}
.descubrir__path-track{fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));stroke-width:var(--essentia-path-track-width);}
.descubrir__path-lit{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha)));
}
.descubrir__path-active{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-active-alpha));
  stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-far-alpha)));
}

.descubrir__moment{
  position:relative;z-index:2;min-height:34vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(28px,5vh,44px) var(--gutter);text-align:center;
}
.descubrir__moment--revelacion{min-height:42vh;padding-top:clamp(36px,6vh,56px);}
.descubrir__moment[data-moment="3"]{padding-bottom:clamp(44px,7vh,64px);}

/* Igual que en Reconocerme: el nodo por momento es solo un anclaje
   invisible (1x1) para que buildPath() sepa por dónde curvar cerca de
   cada territorio — ya no enciende su propia V. La única V visible es
   .descubrir__tip, la punta activa única de la sección, que se desplaza
   en continuo con el scroll (ver initDescubrir(), main.js). */
.descubrir__node{position:absolute;top:50%;width:1px;height:1px;margin:0;transform:translateY(-50%);}
.descubrir__moment[data-moment="0"] .descubrir__node{left:clamp(28px,6vw,64px);}
.descubrir__moment[data-moment="1"] .descubrir__node{left:clamp(34px,6.6vw,72px);}
.descubrir__moment[data-moment="2"] .descubrir__node{left:clamp(28px,6vw,64px);}
.descubrir__moment[data-moment="3"] .descubrir__node{left:clamp(34px,6.6vw,72px);}

.descubrir__tip{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%);}
.descubrir__tip-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;transform:rotate(180deg);
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}

/* Momento A — revelación: "ESSENTIA" y su subtítulo ya NO son placeholder
   (son el mismo texto de marca del nav/splash); solo la definición queda
   pendiente. Se apoya en --display, la misma tipografía de los h1-h4. */
.descubrir__revelacion{
  opacity:0;transform:translateY(14px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.descubrir__moment.is-active .descubrir__revelacion,
.descubrir__moment.is-past .descubrir__revelacion{opacity:1;transform:none;}
.descubrir__moment.is-past .descubrir__revelacion{opacity:.55;}

.descubrir__revelacion-eyebrow{
  font-family:var(--display);font-weight:700;letter-spacing:.1em;
  font-size:clamp(1.9rem,5vw,3.1rem);color:var(--ivory);margin:0;
}
.descubrir__revelacion-sub{
  font-family:var(--sans);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(.72rem,1.3vw,.86rem);color:var(--ivory-dim);margin:10px 0 0;
}
.descubrir__revelacion-def{
  font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory-dim);
  font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.55;max-width:52ch;
  margin:clamp(18px,3vh,28px) auto 0;
  /* p→h2: text-transform/letter-spacing explícitos para no heredar la
     regla global de heading (uppercase) — mismo criterio que el resto
     de esta ronda. */
  text-transform:none;letter-spacing:normal;
}

/* Momentos B/C/D — territorios: secuencia nodo → palabra → microfrase,
   escalonada con transition-delay (nunca aparecen de golpe, aunque vivan
   en el mismo momento). Sin cards, sin iconos: solo dos líneas de texto
   en el recorrido. */
.descubrir__territorio{
  font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory);
  font-size:clamp(1.25rem,2.8vw,1.8rem);margin:0;
  /* p→h3: line-height/text-transform/letter-spacing explícitos, mismo
     motivo que .descubrir__revelacion-def arriba. */
  line-height:1.55;text-transform:none;letter-spacing:normal;
  opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.descubrir__microfrase{
  font-size:clamp(.85rem,1.4vw,1rem);letter-spacing:.02em;color:var(--ivory-dim);
  margin:10px 0 0;
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease) .18s,transform .8s var(--ease) .18s;
}
.descubrir__moment.is-active .descubrir__territorio,
.descubrir__moment.is-active .descubrir__microfrase,
.descubrir__moment.is-past .descubrir__territorio,
.descubrir__moment.is-past .descubrir__microfrase{opacity:1;transform:none;}
.descubrir__moment.is-past .descubrir__territorio,
.descubrir__moment.is-past .descubrir__microfrase{opacity:.5;}

@media (max-width:820px){
  /* Mismo criterio que Reconocerme: Camino lateral fijo al gutter, texto
     en recorrido vertical a la izquierda, sin zigzag. */
  .descubrir__moment{align-items:flex-start;text-align:left;position:relative;padding-left:calc(var(--gutter) + 26px);min-height:40vh;}
  .descubrir__moment--revelacion{min-height:50vh;}
  .descubrir__node{left:var(--gutter) !important;}
  .descubrir__revelacion,.descubrir__revelacion-def{max-width:min(400px,78vw);margin-left:0;margin-right:0;}
  .descubrir__territorio,.descubrir__microfrase{max-width:min(400px,76vw);}
}

/* ================= Experimentar — dar vida a la idea ================= */
/* Sin border-top (mismo criterio que Sentir/Reconocerme/Descubrir): emerge
   directo desde la última escena de Descubrir, sin corte. El fondo gana un
   poco más de calidez/luz que Descubrir (radiales de naranja y turquesa
   ligeramente más presentes) — "puede aumentar ligeramente: movimiento,
   luz, presencia visual" — pero sigue siendo predominantemente negro; el
   color real lo aportarán los medios cuando existan. */
.experimentar{
  position:relative;overflow:hidden;
  background:
    radial-gradient(50% 34% at 18% 12%,rgba(34,186,187,.065) 0%,rgba(34,186,187,0) 70%),
    radial-gradient(58% 40% at 86% 60%,rgba(255,127,31,.05) 0%,rgba(255,127,31,0) 72%),
    radial-gradient(46% 30% at 30% 96%,rgba(255,127,31,.045) 0%,rgba(255,127,31,0) 72%),
    linear-gradient(180deg,#050403 0%,#030302 50%,#040302 100%);
}
.experimentar__silence{height:clamp(6vh,8vw,9vh);}
@media (max-width:820px){
  .experimentar__silence{height:clamp(5vh,7vw,8vh);}
}

/* Camino: misma técnica que Reconocerme/Descubrir (curva construida en
   tiempo real entre anclajes reales, ver initExperimentar() en main.js).
   Aquí SOLO se diseña la trayectoria: corre por una franja fija a la
   izquierda (.experimentar__scenes reserva ese espacio con padding-left),
   nunca sobre una escena ni sobre texto. */
.experimentar__path-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}
.experimentar__path-track{fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));stroke-width:var(--essentia-path-track-width);}
.experimentar__path-lit{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha)));
}
.experimentar__path-active{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-active-alpha));
  stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-far-alpha)));
}
.experimentar__tip{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%);}
.experimentar__tip-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;transform:rotate(180deg);
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}

/* Anclaje invisible (1×1) para la geometría de la curva — igual que en
   Reconocerme/Descubrir, nunca un marcador visible por escena. Se alterna
   levemente entre dos posiciones horizontales dentro de la franja del
   Camino para que la curva respire, sin llegar nunca a cruzar una escena. */
.experimentar__node{position:absolute;top:50%;width:1px;height:1px;margin:0;transform:translateY(-50%);}
.experimentar__umbral .experimentar__node{left:clamp(28px,6vw,64px);}
.experimentar__scene[data-moment="1"] .experimentar__node{left:clamp(30px,6.2vw,66px);}
.experimentar__scene[data-moment="2"] .experimentar__node{left:clamp(24px,5.4vw,58px);}
.experimentar__scene[data-moment="3"] .experimentar__node{left:clamp(32px,6.6vw,70px);}
.experimentar__scene[data-moment="4"] .experimentar__node{left:clamp(26px,5.8vw,62px);}

/* Umbral: una sola idea, callada, mismo tratamiento serif itálico que el
   resto del sitio para lo que "se dice" en vez de "se muestra". Usa el
   .reveal genérico (misma lógica que .sentir__idea). */
.experimentar__umbral{
  position:relative;z-index:2;min-height:24vh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,5vh,44px) var(--gutter);text-align:center;
}
.experimentar__umbral-text{
  max-width:min(620px,84vw);font-family:var(--quote);font-weight:500;font-style:italic;text-transform:none;
  font-size:clamp(1.15rem,2.6vw,1.7rem);line-height:1.55;letter-spacing:.01em;color:var(--ivory-dim);
  margin:1em 0; /* p→h2, mismo criterio que .sentir__idea h2 */
}

/* Composición editorial: franja del Camino reservada a la izquierda,
   asimetría controlada a la derecha — nunca un grid rígido de 4 cards, ni
   tarjetas, ni carrusel. Cada escena es un bloque independiente en flujo
   vertical normal, con su propio ancho/alineación/aspecto para crear
   ritmo (dominante → íntima → secundaria → amplia), mucho espacio
   negativo entre ellas. */
.experimentar__scenes{
  position:relative;z-index:2;
  padding:0 var(--gutter) 0 clamp(90px,11vw,150px);
  display:flex;flex-direction:column;
}
/* position:relative explícito (igual que .reconocerme__moment/.descubrir__node
   más arriba): el nodo del Camino (.experimentar__node, position:absolute)
   necesita un ancla de posicionamiento ESTABLE. Sin esto, un elemento con
   transform (como el que anima la entrada de .experimentar__scene-inner,
   más abajo) crearía su propio "containing block" y el nodo saltaría de
   referencia en cuanto esa animación terminara (transform:none) — por eso
   el contenido visual que se anima vive en un div interno aparte
   (.experimentar__scene-inner), nunca en el mismo elemento que el nodo. */
.experimentar__scene{
  position:relative;display:flex;flex-direction:column;
  margin:0;
  --scene-life:0;
}
/* Envuelve el media + la microidea; hereda align-items del padre para que
   la composición (centrada / pegada a la izquierda / a la derecha) se vea
   exactamente igual que si esos elementos fueran hijos directos de la
   escena — solo que ahora aislados del nodo del Camino (ver arriba). */
.experimentar__scene-inner{display:flex;flex-direction:column;align-items:inherit;}

/* Dirección de atención: la punta V/A "despierta" cada escena a medida que
   se aproxima (ver setSceneStates() en initExperimentar(), main.js). Una
   sola variable continua por escena, --scene-life (0→1, recalculada cada
   frame de scroll a partir de la distancia real, en longitud de curva,
   entre la punta y el anclaje de esa escena — nunca por click ni por
   temporizador), maneja a la vez el microcopy, el borde y el medio: no hay
   estados ON/OFF, todo es la misma curva de intensidad leída por 3
   propiedades CSS distintas. FUTURA = 0, ACTIVA = 1 en el punto más
   cercano, RECORRIDA = un valor intermedio permanente al que decae SIN
   volver a 0 ("lo vivido permanece") — esa curva de decaimiento-con-piso
   vive enteramente en JS; aquí solo se traduce a apariencia. */
.experimentar__microidea{
  font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory-dim);
  font-size:clamp(.85rem,1.4vw,1rem);line-height:1.5;margin:16px 0 1em;max-width:36ch;
  /* p→h3: margin-bottom, text-transform y letter-spacing explícitos
     (antes implícitos vía <p>), mismo criterio que el resto de esta
     ronda. */
  text-transform:none;letter-spacing:normal;
  opacity:calc(.5 + var(--scene-life) * .5);
  transition:opacity .5s var(--ease);
}
.experimentar__media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 10%,rgba(34,186,187,.07),transparent 60%),
    radial-gradient(110% 85% at 85% 90%,rgba(255,127,31,.06),transparent 60%),
    linear-gradient(155deg,#141110 0%,#0a0908 55%,#07070a 100%);
  /* --scene-accent: acento de color propio de cada escena (progresión de
     temperatura muy sutil, punto 8 del pedido) — SOLO afecta este halo/
     borde local, nunca los tokens globales --essentia-path-*/--essentia-
     glow-* del Camino, que permanecen intactos. */
  --scene-accent:34,186,187;
  border:1px solid var(--line);
  border-color:rgba(var(--scene-accent),calc(.14 + var(--scene-life) * .4));
  box-shadow:0 0 calc(6px + var(--scene-life) * 30px) rgba(var(--scene-accent),calc(var(--scene-life) * .22));
  filter:brightness(calc(.85 + var(--scene-life) * .15)) contrast(calc(.95 + var(--scene-life) * .05));
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),filter .5s var(--ease);
}

/* Escena dominante — Quietud / presencia. La más grande, centrada dentro
   del área disponible: la primera impresión, la que más aire recibe. */
.experimentar__scene--dominant{min-height:50vh;justify-content:center;align-items:center;padding:clamp(24px,4vh,40px) 0;}
.experimentar__scene--dominant .experimentar__media{width:min(500px,84%);aspect-ratio:5/4;--scene-accent:34,186,187;}
.experimentar__scene--dominant .experimentar__microidea{text-align:center;margin-left:auto;margin-right:auto;}

/* Escena íntima — Movimiento / experiencia. Pequeña, pegada a la franja
   del Camino, formato retrato: un vistazo privado, no un despliegue. */
.experimentar__scene--intimate{min-height:34vh;justify-content:center;padding:clamp(20px,3.4vh,32px) 0 clamp(20px,3.4vh,32px) clamp(72px,8vw,112px);}
.experimentar__scene--intimate .experimentar__media{width:min(200px,52%);aspect-ratio:3/4;--scene-accent:52,181,175;}

/* Escena secundaria — Conexión / acompañamiento. Mediana, desplazada hacia
   el borde derecho (se aleja de la franja del Camino a propósito, para que
   el ritmo horizontal no se sienta repetitivo respecto a la íntima). */
.experimentar__scene--secondary{min-height:36vh;justify-content:center;align-items:flex-end;padding:clamp(20px,3.4vh,32px) 0;}
.experimentar__scene--secondary .experimentar__media{width:min(350px,62%);aspect-ratio:4/3;--scene-accent:74,175,160;}
.experimentar__scene--secondary .experimentar__microidea{text-align:right;margin-left:auto;}

/* Escena amplia — Integración / alegría. La más expansiva, formato
   panorámico: el cierre del bloque, la que debe dejar la sensación de
   "esto se puede vivir" sin necesidad de decirlo. */
/* align-items:stretch (no center): esta escena necesita que
   .experimentar__scene-inner ocupe todo el ancho disponible para que su
   media al 100% se sienta realmente expansiva — con "center" el wrapper
   se encoge a su contenido (ver .experimentar__scene-inner más arriba,
   que hereda align-items del padre) y el resultado deja de ser "amplio". */
.experimentar__scene--wide{min-height:46vh;justify-content:center;align-items:stretch;padding:clamp(24px,4vh,40px) 0 clamp(24px,4vh,40px) clamp(60px,7vw,96px);}
.experimentar__scene--wide .experimentar__media{width:100%;aspect-ratio:3/1;--scene-accent:100,168,140;}
.experimentar__scene--wide .experimentar__microidea{text-align:center;margin-left:auto;margin-right:auto;max-width:44ch;}

/* Reutiliza el .reveal genérico del sitio, con el movimiento propio de
   este bloque (fade + translate + scale 1.02→1, dentro de lo permitido:
   nada de scroll-jacking, zoom agresivo, glitch ni bounce). Vive en
   .experimentar__scene-inner, no en .experimentar__scene — ver comentario
   sobre position:relative más arriba. */
.experimentar__scene-inner.reveal{transform:translateY(28px) scale(1.02);}
.experimentar__scene-inner.reveal.is-visible{transform:none;}

@media (max-width:820px){
  /* Camino lateral fijo al gutter (mismo criterio que Reconocerme/
     Descubrir en mobile). Escenas apiladas a ancho completo, alternando
     proporciones para conservar ritmo sin composición editorial de
     desktop (que depende de espacio horizontal que no existe aquí). */
  .experimentar__umbral{min-height:30vh;padding-left:calc(var(--gutter) + 46px);text-align:left;justify-content:flex-start;}
  .experimentar__umbral-text{max-width:min(420px,78vw);}
  .experimentar__node{left:var(--gutter) !important;}
  .experimentar__scenes{padding:0 var(--gutter) 0 var(--gutter);}
  /* El nodo (position:absolute) se mide desde el borde propio de
     .experimentar__scene (ver comentario junto a esa regla, arriba) — por
     eso, a diferencia de desktop, en mobile el espacio de despeje respecto
     al Camino se fija aquí, con un padding-left ÚNICO para las 4 escenas
     (mismo criterio que .reconocerme__moment/.descubrir__moment en
     mobile), en vez de un valor distinto por variante. */
  .experimentar__scene{padding-left:calc(var(--gutter) + 46px);}
  .experimentar__scene--dominant,.experimentar__scene--secondary,.experimentar__scene--wide{align-items:stretch;}
  .experimentar__scene--dominant .experimentar__media{width:100%;aspect-ratio:4/3;}
  .experimentar__scene--intimate{align-items:flex-start;}
  .experimentar__scene--intimate .experimentar__media{width:min(220px,62%);aspect-ratio:3/4;}
  .experimentar__scene--secondary .experimentar__media{width:100%;aspect-ratio:4/3;}
  .experimentar__scene--secondary .experimentar__microidea{text-align:left;margin-left:0;}
  .experimentar__scene--wide .experimentar__media{aspect-ratio:4/3;}
  .experimentar__scene--dominant{min-height:50vh;}
  .experimentar__scene--intimate{min-height:38vh;}
  .experimentar__scene--secondary{min-height:46vh;}
  .experimentar__scene--wide{min-height:48vh;}
}

/* ================= 6. Elegir camino ================= */
.elegir{
  position:relative;overflow:hidden;
  background:
    radial-gradient(46% 32% at 20% 30%,rgba(34,186,187,.06) 0%,rgba(34,186,187,0) 72%),
    radial-gradient(46% 32% at 82% 76%,rgba(255,127,31,.055) 0%,rgba(255,127,31,0) 72%),
    linear-gradient(180deg,#050403 0%,#030302 55%,#040302 100%);
}
.elegir__silence{height:clamp(5vh,7vw,8vh);}

/* Camino: misma técnica de curva-en-tiempo-real que el resto del sitio
   (ver initElegir(), main.js). A diferencia de Experimentar/Descubrir, acá
   los anclajes se alternan bien a la izquierda y bien a la derecha — el
   zigzag es geometría pura, no una línea recta con ángulos. */
.elegir__path-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.elegir__path-track{fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));stroke-width:var(--essentia-path-track-width);}
.elegir__path-lit{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha)));
}
.elegir__path-active{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-active-alpha));
  stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-far-alpha)));
}
/* La V/A que llega desde Experimentar — misma pieza (essentiaAMask/
   essentiaAGrad), mismo pulso. Lo único nuevo es que main.js le añade,
   además del crossfade de viewport que ya comparte con el resto del
   Camino, una segunda curva de "entrega": se atenúa y se encoge
   ligeramente justo después de cruzar el umbral (--tip-settle, ver
   setNodeStates() en main.js) — nunca tocando el keyframe camino-pulso
   compartido ni sus tokens de glow globales. */
.elegir__tip{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%);}
.elegir__tip-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;transform:rotate(180deg);
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}

.elegir__node{position:absolute;top:50%;width:1px;height:1px;margin:0;transform:translateY(-50%);}
.elegir__umbral .elegir__node{left:clamp(28px,6vw,64px);}

/* Anillo del umbral: el primer círculo de la nueva gramática — nace justo
   donde la V/A se atenúa. Sin número, sin relleno: un contorno que gana
   presencia con la misma curva de proximidad que después usan los
   círculos de ruta (--node-life, ver setNodeStates()). */
.elegir__ring{
  position:absolute;top:50%;left:clamp(28px,6vw,64px);transform:translate(-50%,-50%);
  width:clamp(40px,5vw,56px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(var(--essentia-path-color),calc(.1 + var(--node-life,0) * .5));
  box-shadow:0 0 calc(4px + var(--node-life,0) * 22px) rgba(var(--essentia-path-color),calc(var(--node-life,0) * .3));
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease);
  pointer-events:none;
}

.elegir__umbral{
  position:relative;z-index:2;min-height:30vh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4.5vh,40px) var(--gutter);text-align:center;
}
.elegir__umbral-text{
  max-width:min(560px,82vw);font-family:var(--quote);font-weight:500;font-style:italic;text-transform:none;
  font-size:clamp(1.1rem,2.4vw,1.55rem);line-height:1.55;letter-spacing:.01em;color:var(--ivory-dim);
  margin:1em 0; /* p→h2, mismo criterio que .sentir__idea h2 */
}

/* Rutas: composición editorial alternada, sin grid ni cards — mismo
   criterio de Experimentar (una columna en flujo normal, alineación por
   variante). --node-life (0→1, ver setNodeStates() en main.js) es la
   MISMA función continua de proximidad-por-curva de Bloque 5, aplicada
   ahora a los círculos en vez de a escenas: FUTURO/PRÓXIMO/ACTIVO/
   RECORRIDO son una sola curva, nunca clases ON/OFF. */
.elegir__routes{position:relative;z-index:2;display:flex;flex-direction:column;}
/* position:relative explícito (mismo motivo que .experimentar__scene —
   ver ese comentario en su regla, arriba): el nodo del Camino necesita un
   ancla estable, nunca el elemento que se anima con transform. */
.elegir__route{position:relative;display:flex;flex-direction:column;margin:0;--node-life:0;}
.elegir__route-inner{display:flex;flex-direction:column;align-items:inherit;max-width:min(420px,86vw);}

.elegir__route-circle{
  display:block;width:clamp(56px,6.2vw,72px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(var(--route-accent),calc(.16 + var(--node-life) * .5));
  background:radial-gradient(60% 60% at 40% 32%,rgba(var(--route-accent),calc(.05 + var(--node-life) * .1)),transparent 72%);
  box-shadow:0 0 calc(5px + var(--node-life) * 26px) rgba(var(--route-accent),calc(var(--node-life) * .28));
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
}
.elegir__route-title{
  /* p→h3: margin-bottom y line-height explícitos (antes implícitos vía
     <p>: 1em y 1.55 heredado del body respectivamente), mismo criterio
     que el resto de esta ronda. */
  margin:20px 0 1em;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.55;color:var(--ivory);
  opacity:calc(.55 + var(--node-life) * .45);transition:opacity .5s var(--ease);
}
.elegir__route-desc{
  margin-top:10px;font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory-dim);
  font-size:clamp(.9rem,1.4vw,1.02rem);line-height:1.55;
  opacity:calc(.5 + var(--node-life) * .5);transition:opacity .5s var(--ease);
}
.elegir__route-cta{
  margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ivory-dim);border-bottom:1px solid var(--line-strong);padding-bottom:6px;cursor:default;
  opacity:calc(.6 + var(--node-life) * .4);transition:opacity .5s var(--ease),border-color .5s var(--ease);
}
.elegir__route:hover .elegir__route-cta{border-color:rgba(var(--route-accent),.5);}
.elegir__route-cta-arrow{width:13px;height:13px;color:rgba(var(--route-accent),.9);}

.elegir__route--a{align-items:flex-start;padding:clamp(26px,4.4vh,44px) 0 clamp(26px,4.4vh,44px) clamp(210px,20vw,300px);min-height:72vh;justify-content:center;}
.elegir__route--a .elegir__node{left:clamp(28px,6vw,64px);top:30%;}
.elegir__route--a .elegir__route-circle{--route-accent:34,186,187;}

.elegir__route--b{align-items:flex-end;padding:clamp(26px,4.4vh,44px) clamp(210px,20vw,300px) clamp(26px,4.4vh,44px) 0;min-height:72vh;justify-content:center;}
.elegir__route--b .elegir__node{left:calc(100% - clamp(28px,6vw,64px));top:30%;}
.elegir__route--b .elegir__route-circle{--route-accent:189,145,78;}
.elegir__route--b .elegir__route-title,.elegir__route--b .elegir__route-desc{text-align:right;}
.elegir__route--b .elegir__route-cta{flex-direction:row-reverse;}

.elegir__route-inner.reveal{transform:translateY(24px) scale(1.015);}
.elegir__route-inner.reveal.is-visible{transform:none;}

@media (max-width:820px){
  .elegir__silence{height:clamp(4vh,6vw,7vh);}
  .elegir__umbral{min-height:28vh;padding-left:calc(var(--gutter) + 46px);text-align:left;justify-content:flex-start;}
  .elegir__umbral-text{max-width:min(400px,78vw);}
  .elegir__umbral .elegir__node{left:var(--gutter);}
  .elegir__ring{left:var(--gutter);}
  /* Zigzag "leve": ya no se alterna de un extremo al otro de la pantalla
     (no hay ancho para eso) — ambas rutas quedan en el mismo corredor
     lateral fijo que el resto del Camino en mobile, con una alternancia
     apenas perceptible entre ellas (punto 12 del pedido: "no forzar
     grandes desplazamientos laterales"). */
  .elegir__route--a,.elegir__route--b{
    align-items:flex-start;text-align:left;padding:clamp(22px,3.6vh,32px) var(--gutter) clamp(22px,3.6vh,32px) calc(var(--gutter) + 46px);
    min-height:70vh;
  }
  .elegir__route--a .elegir__node{left:calc(var(--gutter) + 6px);}
  .elegir__route--b .elegir__node{left:calc(var(--gutter) + 22px);right:auto;}
  .elegir__route--b .elegir__route-title,.elegir__route--b .elegir__route-desc{text-align:left;}
  .elegir__route--b .elegir__route-cta{flex-direction:row;}
  .elegir__route-inner{max-width:min(420px,84vw);}
}

/* ================= 7. Confiar — evidencia humana ================= */
.confiar{
  position:relative;overflow:hidden;
  background:
    radial-gradient(48% 34% at 82% 16%,rgba(255,127,31,.075) 0%,rgba(255,127,31,0) 72%),
    radial-gradient(44% 30% at 14% 72%,rgba(34,186,187,.05) 0%,rgba(34,186,187,0) 72%),
    linear-gradient(180deg,#050403 0%,#060402 50%,#040302 100%);
}
.confiar__silence{height:clamp(5vh,7vw,8vh);}

/* Camino: función deliberadamente más silenciosa aquí (punto 9 del
   pedido) — "el Camino continúa, pero ahora las personas hablan". A
   diferencia del resto de secciones, initConfiar() (main.js) NO teje un
   anclaje por testimonio: solo 2 anclajes (.confiar__node, inicio y fin
   del bloque), ambos fijos sobre el mismo corredor lateral izquierdo que
   ya usa el Camino en mobile en el resto del sitio — una línea recta, sin
   ondulación, que nunca se acerca a un rostro ni a un bloque de texto
   (todo el contenido vive a la derecha de ese corredor, vía
   .confiar__stories). Mismos tokens/mismo glow/mismo pulso que el resto
   del Camino — nada de esto cambia aquí, solo la geometría del trazo. */
.confiar__path-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.confiar__path-track{fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));stroke-width:var(--essentia-path-track-width);}
.confiar__path-lit{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha)));
}
.confiar__path-active{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-active-alpha));
  stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-far-alpha)));
}
.confiar__tip{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%);}
.confiar__tip-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;transform:rotate(180deg);
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}
/* Anclaje invisible (1×1) — solo 2 en todo el bloque, nunca uno por
   testimonio (ver comentario arriba). */
.confiar__node{position:absolute;width:1px;height:1px;margin:0;left:clamp(28px,6vw,64px);}
.confiar__apertura{position:relative;}
.confiar__apertura .confiar__node{top:50%;transform:translateY(-50%);}
.confiar__node--close{bottom:5vh;}

.confiar__apertura{
  z-index:2;min-height:20vh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4.5vh,40px) var(--gutter);text-align:center;
}
.confiar__apertura-text{
  max-width:min(560px,82vw);font-family:var(--quote);font-weight:500;font-style:italic;text-transform:none;
  font-size:clamp(1.1rem,2.4vw,1.55rem);line-height:1.55;letter-spacing:.01em;color:var(--ivory-dim);
  margin:1em 0; /* p→h2, mismo criterio que .sentir__idea h2 */
}

/* Composición editorial: testimonio principal grande + 3 secundarios
   distribuidos de forma asimétrica — nunca un grid uniforme, nunca cards
   SaaS idénticas (punto 8 del pedido). Corredor del Camino reservado a la
   izquierda (mismo criterio que .experimentar__scenes). */
.confiar__stories{
  position:relative;z-index:2;
  padding:0 var(--gutter) 0 clamp(90px,11vw,150px);
  display:flex;flex-direction:column;
  gap:clamp(36px,5.5vh,60px);
}

/* Testimonio principal — dominante, pensado para video real. Mientras no
   exista el material definitivo, placeholder explícito (nunca un
   testimonio inventado). */
.confiar__main-inner{display:flex;flex-direction:column;max-width:720px;}
.confiar__main-inner.reveal{transform:translateY(26px) scale(1.015);}
.confiar__main-inner.reveal.is-visible{transform:none;}

.confiar__video{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 12%,rgba(255,127,31,.08),transparent 60%),
    radial-gradient(110% 85% at 86% 90%,rgba(34,186,187,.06),transparent 60%),
    linear-gradient(155deg,#171310 0%,#0b0908 55%,#07070a 100%);
  border:1px solid var(--line);
}
.confiar__video-poster{position:absolute;inset:0;}
/* NO autoplay, NO sonido automático — solo un botón de play accesible,
   inerte hasta que exista el video real (mismo patrón .video-slot__play
   ya usado en Formas de vivir, arquitectura anterior). */
.confiar__video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:rgba(5,4,3,.55);backdrop-filter:blur(4px);
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--ivory);
}
.confiar__video-play svg{width:20px;height:20px;margin-left:3px;}
.confiar__video-tag{
  position:absolute;left:16px;bottom:16px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ivory-faint);background:rgba(5,4,3,.6);padding:6px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);
}
.confiar__main-copy{margin-top:22px;}
.confiar__quote{
  font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory);
  font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.55;max-width:56ch;
}
.confiar__main-copy .confiar__name{margin-top:14px;font-size:.95rem;}
.confiar__main-copy .confiar__context{font-size:.84rem;}

/* Testimonios secundarios — retrato + microhistoria, 3 como máximo, cada
   uno con tamaño/alineación distintos (mismo criterio de asimetría que
   las 4 escenas de Experimentar) para que nunca se lean como una grilla
   repetida. */
.confiar__secondary{display:flex;flex-direction:column;gap:clamp(28px,4.5vh,44px);}
.confiar__sec-inner{display:flex;flex-direction:column;}
.confiar__sec-inner.reveal{transform:translateY(22px) scale(1.015);}
.confiar__sec-inner.reveal.is-visible{transform:none;}
.confiar__sec-portrait{
  display:block;border-radius:50%;overflow:hidden;flex:none;
  background:
    radial-gradient(120% 90% at 25% 15%,rgba(34,186,187,.08),transparent 60%),
    radial-gradient(110% 85% at 85% 90%,rgba(255,127,31,.07),transparent 60%),
    linear-gradient(155deg,#171310 0%,#0b0908 55%,#07070a 100%);
  border:1px solid var(--line);
}
.confiar__fragment{
  margin-top:14px;font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory-dim);
  font-size:clamp(.92rem,1.3vw,1rem);line-height:1.55;
}
.confiar__sec-inner .confiar__name{margin-top:12px;font-size:.85rem;}
.confiar__sec-inner .confiar__context{margin-top:3px;font-size:.78rem;}
.confiar__name{font-family:var(--sans);font-weight:700;letter-spacing:.01em;color:var(--ivory);}
.confiar__context{color:var(--ivory-faint);}

.confiar__sec--a{padding:0;}
.confiar__sec--a .confiar__sec-inner{align-items:flex-start;max-width:360px;}
.confiar__sec--a .confiar__sec-portrait{width:88px;aspect-ratio:1;}

/* Desplazada hacia el borde derecho — se aleja a propósito del corredor
   del Camino, mismo criterio que .experimentar__scene--secondary, para
   que el ritmo horizontal no se sienta repetitivo respecto a las otras. */
.confiar__sec--b{display:flex;justify-content:flex-end;padding:0 clamp(30px,6vw,90px) 0 0;}
.confiar__sec--b .confiar__sec-inner{align-items:flex-end;text-align:right;max-width:300px;}
.confiar__sec--b .confiar__sec-portrait{width:60px;aspect-ratio:1;}

.confiar__sec--c{padding:0 0 0 clamp(50px,7vw,110px);}
.confiar__sec--c .confiar__sec-inner{align-items:flex-start;max-width:400px;}
.confiar__sec--c .confiar__sec-portrait{width:104px;aspect-ratio:1;}

/* CTA discreto y opcional (punto 17 del pedido) — nunca "reserva/compra/
   agenda ahora": un enlace de texto, inerte hasta que exista destino. */
.confiar__foot{position:relative;z-index:2;padding:clamp(20px,3.6vh,32px) var(--gutter) clamp(40px,6vh,64px);text-align:center;}
.confiar__more{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ivory-faint);border-bottom:1px solid var(--line);padding-bottom:5px;cursor:default;
}

@media (max-width:820px){
  .confiar__silence{height:clamp(4vh,6vw,7vh);}
  .confiar__apertura{min-height:36vh;padding-left:calc(var(--gutter) + 46px);text-align:left;justify-content:flex-start;}
  .confiar__apertura-text{max-width:min(420px,78vw);}
  .confiar__node{left:var(--gutter) !important;}
  .confiar__stories{padding:0 var(--gutter) 0 var(--gutter);gap:clamp(48px,13vh,130px);}
  .confiar__main-inner{padding-left:calc(var(--gutter) + 46px) ;max-width:none;}
  .confiar__video{aspect-ratio:4/3;}
  /* En mobile no hay ancho para el desplazamiento asimétrico de --b: los
     3 secundarios quedan en el mismo corredor izquierdo (mismo criterio
     que las rutas de Elegir en mobile), la asimetría sobrevive solo por
     el tamaño de retrato distinto por testimonio. */
  .confiar__secondary{gap:clamp(36px,9vh,86px);}
  .confiar__sec--a{padding-left:calc(var(--gutter) + 46px);}
  .confiar__sec--b{justify-content:flex-start;padding:0 var(--gutter) 0 calc(var(--gutter) + 46px);}
  .confiar__sec--b .confiar__sec-inner{align-items:flex-start;text-align:left;max-width:min(360px,80vw);}
  .confiar__sec--c{padding-left:calc(var(--gutter) + 46px);}
  .confiar__foot{padding-left:calc(var(--gutter) + 46px);text-align:left;padding-top:clamp(32px,6vh,48px);}
}

/* ================= 8. César Andrade — origen, rostro humano ================= */
.fundador{
  position:relative;overflow:hidden;
  background:
    radial-gradient(46% 32% at 18% 12%,rgba(255,127,31,.07) 0%,rgba(255,127,31,0) 72%),
    radial-gradient(42% 30% at 84% 78%,rgba(34,186,187,.055) 0%,rgba(34,186,187,0) 72%),
    linear-gradient(180deg,#050403 0%,#060402 50%,#040302 100%);
}
.fundador__silence{height:clamp(5vh,7vw,8vh);}

/* Camino: igual criterio que Confiar (ver ese comentario arriba) — sin
   nodo por elemento, solo 2 anclajes fijos sobre el corredor lateral
   izquierdo, fuera de fotografía/headline/narrativa/indicadores. Mismos
   tokens/mismo glow/mismo pulso que el resto del Camino — nada de esto
   cambia aquí, solo la geometría del trazo (línea recta de 2 puntos,
   igual que initConfiar()). */
.fundador__path-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.fundador__path-track{fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));stroke-width:var(--essentia-path-track-width);}
.fundador__path-lit{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha)));
}
.fundador__path-active{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-active-alpha));
  stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-far-alpha)));
}
.fundador__tip{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%);}
.fundador__tip-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;transform:rotate(180deg);
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}
/* Anclaje invisible (1×1) — solo 2 en todo el bloque. El primero se ubica
   a la altura donde arranca la composición (justo tras el silencio); el
   segundo, .fundador__node--close, al final del bloque. El `top` del
   primer nodo se aplica con :not(.fundador__node--close) a propósito —
   ambos comparten la clase base .fundador__node, así que un `top` puesto
   directamente ahí (en vez de en este selector más específico) terminaría
   pisando también el `bottom:4vh` del segundo nodo (con height fija,
   top+bottom ambos no-auto hace que `top` gane) y los dos colapsarían en
   el mismo punto — exactamente el bug que esto evita. */
.fundador__node{position:absolute;width:1px;height:1px;margin:0;left:clamp(28px,6vw,64px);}
.fundador__node:not(.fundador__node--close){top:clamp(9vh,11vw,13vh);}
.fundador__node--close{top:auto;bottom:4vh;}

/* Composición editorial: fotografía protagonista + copy, nunca cards ni
   grid tipo SaaS. Corredor del Camino reservado a la izquierda (mismo
   criterio que .confiar__stories/.experimentar__scenes). */
.fundador__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(280px,42%) 1fr;
  align-items:center;gap:clamp(48px,6vw,88px);
  min-height:136vh;
  padding:clamp(56px,8vh,88px) var(--gutter) clamp(72px,10vh,112px) clamp(90px,11vw,150px);
}

.fundador__media{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
}
.fundador__media.reveal{transform:translateY(26px) scale(1.015);}
.fundador__media.reveal.is-visible{transform:none;}
.fundador__media-ph{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 20% 14%,rgba(255,127,31,.09),transparent 60%),
    radial-gradient(110% 85% at 88% 92%,rgba(34,186,187,.07),transparent 60%),
    linear-gradient(155deg,#171310 0%,#0b0908 55%,#07070a 100%);
  border:1px solid var(--line);
}

.fundador__copy{max-width:560px;}

.fundador__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-soft);margin:0 0 16px;
}
.fundador__eyebrow::before{content:'';width:22px;height:1px;background:var(--orange);display:inline-block;}

.fundador__headline{
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.05;color:var(--ivory);margin:0 0 20px;
}
.fundador__narrative{
  font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory-dim);text-transform:none;
  font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.6;max-width:52ch;margin:0;
}
/* Ronda de actualización de contenido: la narrativa aprobada viene en dos
   párrafos — microajuste de espaciado entre ambos (punto 13 del pedido,
   "separación vertical"), sin tocar el resto del bloque. */
.fundador__narrative + .fundador__narrative{margin-top:1em;}

/* Máximo 3 indicadores — nunca cifras/ciudades/organizaciones inventadas;
   se mantienen como texto simple con divisores finos, nunca stat-tiles
   tipo card (esos ya existen, sin tocar, en la sección Empresas de la
   arquitectura anterior — aquí se pide deliberadamente algo más discreto). */
.fundador__stats{display:flex;flex-wrap:wrap;margin:clamp(28px,4vh,40px) 0 0;}
.fundador__stat{
  font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ivory-faint);padding-right:20px;margin-right:20px;border-right:1px solid var(--line);
  line-height:1.4;
}
.fundador__stat:last-child{border-right:none;margin-right:0;padding-right:0;}
/* Ronda de actualización de contenido: cada indicador pasó de una línea a
   dos (valor + descripción breve), para representar el copy aprobado
   "Ingeniero Ambiental / Profesión de origen" tal como se entregó — ver
   comentario en index.html junto a .fundador__stats. .fundador__stat-main
   hereda el estilo del contenedor (solo se bloquea a block); la
   descripción usa el mismo criterio tipográfico que .descubrir__microfrase
   (más pequeña, sin mayúsculas, más discreta que el valor). */
.fundador__stat-main{display:block;}
.fundador__stat-sub{
  display:block;margin-top:4px;font-weight:400;text-transform:none;
  letter-spacing:.02em;font-size:10px;line-height:1.45;max-width:24ch;
  color:var(--ivory-faint);
}

/* CTA discreto y opcional (punto 13 del pedido) — nunca "agenda ahora/
   trabaja conmigo/compra/reserva": un enlace de texto, inerte hasta que
   exista destino, mismo criterio que .confiar__more. */
.fundador__cta{
  display:inline-block;margin-top:clamp(28px,4vh,40px);
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ivory-faint);border-bottom:1px solid var(--line);padding-bottom:5px;cursor:default;
}

@media (max-width:820px){
  .fundador__silence{height:clamp(13vh,16vw,19vh);}
  .fundador__node{left:var(--gutter) !important;}
  .fundador__node:not(.fundador__node--close){top:clamp(4vh,7vh,8vh);}
  .fundador__grid{
    grid-template-columns:1fr;min-height:0;
    gap:clamp(56px,19vh,180px);
    padding:clamp(24px,5vh,40px) var(--gutter) clamp(150px,26vh,260px) calc(var(--gutter) + 46px);
  }
  /* La fotografía gana altura (3/4 en vez de 4/5) pero se mantiene dentro
     del mismo inset que el resto del contenido — nunca se deja sangrar
     hasta el borde real de la pantalla, porque eso invadiría el corredor
     del Camino (ver .fundador__node, left:var(--gutter) en mobile). */
  .fundador__media{aspect-ratio:3/4;}
  .fundador__copy{max-width:none;}
  .fundador__headline{margin-bottom:24px;}
  .fundador__narrative{margin-bottom:4px;}
  .fundador__stats{flex-direction:column;margin-top:clamp(36px,6vh,52px);}
  .fundador__stat{
    border-right:none;padding-right:0;margin-right:0;
    padding:14px 0;border-top:1px solid var(--line);
  }
  .fundador__stat:first-child{border-top:none;padding-top:0;}
  .fundador__cta{margin-top:clamp(36px,6vh,52px);}
}

/* ================= 9. Actuar — cierre y elección ================= */
.actuar{
  position:relative;overflow:hidden;
  background:
    radial-gradient(40% 30% at 50% 6%,rgba(245,241,234,.045) 0%,rgba(245,241,234,0) 70%),
    radial-gradient(46% 34% at 12% 88%,rgba(34,186,187,.055) 0%,rgba(34,186,187,0) 72%),
    radial-gradient(46% 34% at 92% 92%,rgba(255,127,31,.06) 0%,rgba(255,127,31,0) 72%),
    linear-gradient(180deg,#050403 0%,#060402 55%,#040302 100%);
}
.actuar__silence{height:clamp(7vh,9vw,11vh);}

/* Camino: mismo criterio de línea recta de 2 anclajes que Confiar/Fundador
   (ver esos comentarios) — corredor fijo en la franja izquierda, sin nodo
   por ruta. Mismo fix :not(.actuar__node--close) desde el inicio, para no
   repetir el bug de colisión top/bottom ya documentado en Fundador.

   El nodo de cierre (.actuar__node--close) es distinto de los otros: en
   vez de posicionarse absoluto contra el 100% de la sección (lo que en
   la primera versión de este bloque hizo que, con .actuar__brand como
   última pieza, el trazo terminara cruzando el wordmark ESSENTIA — cruce
   detectado y corregido esta ronda), queda en flujo normal del documento
   justo entre .actuar__routes y .actuar__brand: su posición vertical
   sigue siempre el final real de las rutas sin depender de una medida en
   vh, y el Camino termina exactamente donde termina la elección — antes
   de la coda de marca, que queda deliberadamente sin Camino encima. */
.actuar__path-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.actuar__path-track{fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-track-alpha));stroke-width:var(--essentia-path-track-width);}
.actuar__path-lit{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-lit-alpha));stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-glow-far-alpha)));
}
.actuar__path-active{
  fill:none;stroke:rgba(var(--essentia-path-color),var(--essentia-path-active-alpha));
  stroke-width:var(--essentia-path-width);stroke-linecap:round;
  filter:
    drop-shadow(0 0 var(--essentia-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-path-active-glow-far-alpha)));
}
.actuar__tip{position:absolute;top:0;left:0;margin:0;pointer-events:none;z-index:3;transform:translate(-50%,-50%);}
.actuar__tip-core{
  display:block;width:var(--essentia-tip-size);height:auto;aspect-ratio:392/432;transform:rotate(180deg);
  animation:camino-pulso 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 var(--essentia-tip-glow-near-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-near-alpha)))
    drop-shadow(0 0 var(--essentia-tip-glow-far-blur) rgba(var(--essentia-path-color),var(--essentia-tip-glow-far-alpha)));
}
.actuar__node{position:absolute;width:1px;height:1px;margin:0;left:clamp(28px,6vw,64px);top:clamp(9vh,11vw,13vh);}
.actuar__node--close{position:static;display:block;left:auto;top:auto;margin:0 0 0 clamp(28px,6vw,64px);}

/* MOMENTO A — cierre: una sola línea, centrada, muy poco texto. */
.actuar__close{position:relative;z-index:2;text-align:center;padding:0 var(--gutter);}
.actuar__close-text{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.15;letter-spacing:.01em;
  color:var(--ivory);max-width:16ch;margin:0 auto;
}

/* MOMENTO B — dos zonas amplias, nunca cards: sin sombra, sin esquina
   redondeada, separadas por una línea fina (vertical en desktop,
   horizontal en mobile — mismo criterio que .fundador__stat). Inset
   izquierdo mayor que el derecho a propósito, para que el corredor del
   Camino (ver .actuar__node, left arriba) quede siempre fuera de las dos
   zonas de texto, igual que .fundador__grid. */
.actuar__routes{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:clamp(96px,15vh,172px);
  padding:0 var(--gutter) 0 clamp(90px,11vw,150px);
}
/* CORRECCIÓN — ronda de pulido técnico post-auditoría: el padding-bottom
   pasa a ser independiente del padding-top (antes idéntico, mismo valor
   en las cuatro direcciones vía shorthand de 2 valores). Medido con
   Playwright (getBoundingClientRect, sin scroll simulado): entre el
   final del CTA de cada ruta y la palabra "ESSENTIA" del cierre de marca
   había ~254px en desktop / ~302px en mobile — la auditoría maestra lo
   señaló como el vacío extendido antes del footer. Ese espacio se
   repartía entre este padding-bottom, el margin-top de .actuar__brand y
   su padding-top (ver esas reglas más abajo); se redujo el aporte de
   los tres en conjunto, sin tocar el padding-top de esta regla (el aire
   sobre el label de cada ruta, parte de la composición de "MOMENTO B",
   no del vacío señalado). */
.actuar__route{position:relative;display:flex;padding-top:clamp(64px,10vh,116px);padding-bottom:clamp(40px,6vh,72px);padding-left:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px);}
.actuar__route--personal{--route-accent:34,186,187;border-right:1px solid var(--line);justify-content:flex-start;}
.actuar__route--org{--route-accent:255,127,31;justify-content:flex-start;padding-left:clamp(28px,4vw,56px);}
.actuar__route-inner{max-width:420px;}
.actuar__route-inner.reveal{transform:translateY(22px);}
.actuar__route-inner.reveal.is-visible{transform:none;}
.actuar__route-label{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.15;color:var(--ivory);margin:0 0 14px;
  /* p→h3: letter-spacing explícito (antes "normal" implícito vía <p>). */
  letter-spacing:normal;
}
.actuar__route-copy{color:var(--ivory-dim);font-size:.98rem;line-height:1.55;max-width:36ch;margin:0 0 clamp(24px,3.4vh,36px);}
.actuar__route-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ivory-dim);border-bottom:1px solid var(--line-strong);padding-bottom:6px;cursor:default;
  transition:color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);
}
.actuar__route-arrow{width:14px;height:14px;color:rgba(var(--route-accent),.85);transition:transform var(--dur-s) var(--ease);}
.actuar__route:hover .actuar__route-cta{color:var(--ivory);border-color:rgba(var(--route-accent),.55);}
.actuar__route:hover .actuar__route-arrow{transform:translateX(3px);}

/* MOMENTO C — cierre de marca: centrado, mínimo, sin competir con César
   (Bloque 8) ni con el resto del sitio — solo el wordmark + la línea de
   posicionamiento que ya existe en el resto de ESSENTIA. */
.actuar__brand{
  position:relative;z-index:2;text-align:center;
  /* margin-top y padding-top reducidos en la misma ronda de pulido que
     .actuar__route (ver comentario ahí) — el padding-bottom NO se tocó:
     ese tramo (cierre de marca → footer) medía solo ~54-57px y la
     auditoría lo confirmó correcto, es el punto final "LLEGUÉ", no el
     vacío. */
  margin-top:clamp(40px,6vh,64px);padding:clamp(36px,5vh,52px) var(--gutter) clamp(40px,6vh,56px);
  border-top:1px solid var(--line);
}
.actuar__brand.reveal{transform:translateY(16px);}
.actuar__brand.reveal.is-visible{transform:none;}
.actuar__brand-word{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:.02em;color:var(--ivory);}
.actuar__brand-sub{display:block;margin-top:8px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-faint);}

@media (max-width:820px){
  .actuar__silence{height:clamp(17vh,21vw,25vh);}
  .actuar__node:not(.actuar__node--close){left:var(--gutter) !important;top:clamp(4vh,7vh,8vh);}
  .actuar__node--close{margin-left:var(--gutter);}
  .actuar__close{padding:0 var(--gutter) 0 calc(var(--gutter) + 46px);text-align:left;}
  .actuar__close-text{max-width:none;margin:0;}

  .actuar__routes{
    grid-template-columns:1fr;
    gap:clamp(64px,16vh,150px);
    margin-top:clamp(104px,19vh,170px);
    padding:0 var(--gutter) 0 calc(var(--gutter) + 46px);
  }
  /* Mismo criterio de reducción que en desktop: padding-top de la ruta
     intacto, padding-bottom reducido; ver comentario en la regla base
     de .actuar__route. */
  .actuar__route{padding-top:clamp(48px,10vh,80px);padding-bottom:clamp(32px,6vh,56px);padding-left:0;padding-right:0;}
  .actuar__route--personal{border-right:none;border-bottom:1px solid var(--line);}
  .actuar__route--org{padding-left:0;}
  .actuar__route-inner{max-width:none;}

  /* padding-bottom de .actuar__brand se mantiene igual (gap hacia el
     footer, correcto según la auditoría) — solo bajan margin-top y
     padding-top, mismo criterio que desktop. */
  .actuar__brand{margin-top:clamp(56px,10vh,88px);padding-top:clamp(40px,6vh,64px);padding-bottom:clamp(48px,7vh,64px);}
}

.intro{padding:clamp(56px,9vw,96px) 0;border-top:1px solid var(--line);}
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:end;}
.intro h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:14ch;}
.intro__body{color:var(--ivory-dim);max-width:48ch;font-size:1.02rem;}
.intro__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.intro__chips span{
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ivory-dim);
  border:1px solid var(--line);padding:8px 14px;border-radius:var(--radius-pill);
}
@media (max-width:820px){.intro__grid{grid-template-columns:1fr;}}

/* ================= El camino ESSENTIA — journey numerado ================= */
.journey{padding:var(--section-pad) 0;border-top:1px solid var(--line);position:relative;}
.journey__head{text-align:center;max-width:640px;margin:0 auto clamp(48px,7vw,88px);}
.journey__head h2{font-size:clamp(1.9rem,4vw,3.1rem);}
.journey__head p{margin-top:16px;color:var(--ivory-faint);}

.journey__path{position:relative;}
.journey__line{
  position:absolute;left:29px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--orange-line),var(--turquoise-line));
}
@media (min-width:820px){
  .journey__line{left:50%;top:0;bottom:0;transform:translateX(-50%);}
}

.journey__step{position:relative;padding:0 0 clamp(48px,7vw,88px) 70px;}
.journey__step:last-child{padding-bottom:0;}
.journey__node{
  position:absolute;left:0;top:2px;width:60px;height:60px;border-radius:50%;
  background:var(--panel);border:1px solid var(--orange-line);
  display:flex;align-items:center;justify-content:center;z-index:1;
}
.journey__step:nth-child(2) .journey__node{border-color:var(--turquoise-line);}
.journey__step:nth-child(3) .journey__node{border-color:var(--orange-line);}
.journey__node span{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--ivory);}
.journey__body{max-width:640px;}
.journey__step-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-soft);font-weight:700;display:block;margin-bottom:10px;}
.journey__step:nth-child(2) .journey__step-eyebrow{color:var(--turquoise-soft);}
.journey__body h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:14px;}
.journey__body p{color:var(--ivory-dim);max-width:52ch;}

@media (min-width:820px){
  .journey__step{padding:0 0 clamp(56px,8vw,110px) 0;display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;gap:0 40px;}
  .journey__node{position:relative;left:auto;top:auto;grid-column:2;justify-self:center;}
  .journey__body{grid-column:1;text-align:right;margin-left:auto;}
  .journey__step:nth-child(even) .journey__body{grid-column:3;text-align:left;margin-left:0;margin-right:auto;}
  .journey__body p{margin-left:auto;}
  .journey__step:nth-child(even) .journey__body p{margin-left:0;margin-right:auto;}
}

/* ================= Offer cards (experiencias) ================= */
.offer-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,40px);display:flex;flex-direction:column;height:100%;
  transition:border-color var(--dur-s) var(--ease),transform var(--dur-s) var(--ease);
}
.offer-card:hover{border-color:var(--orange-line);transform:translateY(-4px);}
.offer-card--turquoise:hover{border-color:var(--turquoise-line);}
.offer-card__icon{
  width:46px;height:46px;border-radius:var(--radius);background:var(--orange-dim);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0;
}
.offer-card__icon svg{width:22px;height:22px;stroke:var(--orange);}
.offer-card--turquoise .offer-card__icon{background:var(--turquoise-dim);}
.offer-card--turquoise .offer-card__icon svg{stroke:var(--turquoise);}
.offer-card__eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-soft);font-weight:700;margin-bottom:10px;}
.offer-card--turquoise .offer-card__eyebrow{color:var(--turquoise-soft);}
.offer-card h3{font-size:1.4rem;margin-bottom:12px;text-transform:none;}
.offer-card p{color:var(--ivory-dim);font-size:.94rem;margin-bottom:18px;}
.offer-card__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.offer-card__meta span{
  display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ivory-faint);border:1px solid var(--line);padding:6px 11px;border-radius:var(--radius-pill);
}
.offer-card__meta svg{width:12px;height:12px;}

/* mini-video slot dentro de la tarjeta */
.video-slot{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;margin-bottom:20px;
  background:var(--ink);border:1px solid var(--line);
}
.video-slot img{width:100%;height:100%;object-fit:cover;opacity:.7;}
.video-slot__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.video-slot__play .circle{
  width:46px;height:46px;border-radius:50%;background:rgba(5,4,3,.55);backdrop-filter:blur(4px);
  border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--ivory);
}
.video-slot__play svg{width:16px;height:16px;margin-left:2px;}
.video-slot__tag{
  position:absolute;left:12px;bottom:12px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ivory-faint);background:rgba(5,4,3,.6);padding:5px 10px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);
}
.offer-card__foot{margin-top:auto;padding-top:6px;}

/* Featured (Respira destacada) — tarjeta grande de dos columnas */
.featured{padding:var(--section-pad) 0;border-top:1px solid var(--line);position:relative;}
.featured__wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;
  position:relative;overflow:hidden;
}
.featured__wrap::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 60% at 100% 0%,rgba(34,186,187,.12),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(255,127,31,.14),transparent 60%);
}
.featured__wrap > *{position:relative;z-index:1;}
.featured__title{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:18px;}
.featured p.hook{font-family:var(--quote);font-style:italic;font-weight:500;color:var(--ivory);font-size:clamp(1.05rem,1.6vw,1.25rem);text-transform:none;margin-bottom:18px;max-width:40ch;}
.featured p.desc{color:var(--ivory-dim);max-width:46ch;margin-bottom:22px;}
.featured__icon{width:min(100%,300px);margin:0 auto;}
@media (max-width:900px){.featured__wrap{grid-template-columns:1fr;}}

/* ================= Carrusel horizontal (formas de vivir / testimonios) ================= */
.carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 20px;scrollbar-width:thin;}
.carousel::-webkit-scrollbar{height:6px;}
.carousel::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius-pill);}
.carousel__item{scroll-snap-align:start;flex:0 0 min(340px,84vw);}
.carousel--testi .carousel__item{flex-basis:min(420px,86vw);}
.carousel__nav{display:flex;justify-content:flex-end;gap:10px;margin-bottom:20px;}
.carousel__nav button{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--ivory);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s ease,color .25s ease;
}
.carousel__nav button:hover{border-color:var(--orange);color:var(--orange-soft);}
.carousel__nav svg{width:16px;height:16px;}

/* ================= Formas de vivir — header ================= */
.forms{padding:var(--section-pad) 0;border-top:1px solid var(--line);}
.forms__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,56px);}
.forms__head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);}

/* ================= Manifiesto ================= */
.manifesto{padding:var(--section-pad) 0;border-top:1px solid var(--line);text-align:center;position:relative;}
.manifesto blockquote{
  max-width:840px;margin:0 auto;font-family:var(--quote);font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:1.4;color:var(--ivory);text-transform:none;
}
.manifesto cite{display:block;margin-top:28px;font-style:normal;font-family:var(--sans);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory-faint);}
.manifesto cite strong{color:var(--orange-soft);font-weight:700;}

/* ================= César narrativa ================= */
.about{padding:var(--section-pad) 0;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--black) 0%,var(--ink) 100%);}
.about__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:center;}
.about__media{position:relative;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);}
.about__media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
.about h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:8px;text-transform:none;}
.about__role{font-family:var(--sans);font-size:.92rem;letter-spacing:.02em;color:var(--ivory-dim);margin-bottom:24px;text-transform:none;}
.about p{color:var(--ivory-dim);max-width:52ch;margin-bottom:16px;}
.about blockquote{
  margin:26px 0 28px;padding:20px 24px;border-left:2px solid var(--orange-line);background:var(--orange-dim);
  font-family:var(--quote);font-style:italic;color:var(--ivory);font-size:1.02rem;line-height:1.5;
}
@media (max-width:900px){.about__grid{grid-template-columns:1fr;}.about__media{aspect-ratio:4/3;}}

/* ================= Testimonios ================= */
.testimonials{padding:var(--section-pad) 0;border-top:1px solid var(--line);}
.testimonials__head{text-align:center;margin-bottom:clamp(32px,5vw,56px);}
.testimonials__head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);}
.testi-card{
  background:var(--panel);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,36px);height:100%;display:flex;flex-direction:column;
}
.testi-card svg{width:26px;height:26px;stroke:var(--ivory-faint);margin-bottom:16px;}
.testi-card p{font-family:var(--quote);font-style:italic;color:var(--ivory-dim);font-size:.98rem;flex:1;}
.testi-card__label{display:block;margin-top:18px;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-faint);}

/* ================= Empresas / stat tiles ================= */
.enterprise{padding:var(--section-pad) 0;border-top:1px solid var(--line);}
.enterprise__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.enterprise h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:18px;}
.enterprise p{color:var(--ivory-dim);max-width:46ch;margin-bottom:24px;}
.stat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.stat-tile{
  border:1px dashed var(--line-strong);border-radius:var(--radius);padding:22px 18px;text-align:center;
}
.stat-tile strong{display:block;font-family:var(--display);font-weight:700;font-size:2rem;color:var(--ivory-faint);}
.stat-tile span{display:block;margin-top:6px;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ivory-faint);}
.logo-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;}
.logo-slot{
  width:112px;height:52px;border:1px dashed var(--line-strong);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.04em;text-align:center;color:var(--ivory-faint);padding:8px;
}
@media (max-width:900px){.enterprise__grid{grid-template-columns:1fr;}}

/* ================= CTA final ================= */
.cta-final{padding:var(--section-pad) 0;border-top:1px solid var(--line);text-align:center;position:relative;}
.cta-final h2{font-size:clamp(1.9rem,4vw,3.1rem);max-width:18ch;margin:0 auto;}
.cta-final__sub{margin:16px auto 40px;max-width:44ch;color:var(--ivory-faint);}
.cta-final__buttons{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* ================= Footer ================= */
.footer{padding-top:clamp(40px,7vw,64px);padding-bottom:28px;border-top:1px solid var(--line);}
.footer__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding-bottom:32px;margin-bottom:24px;border-bottom:1px solid var(--line);}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.footer__brand-word{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ivory);}
.footer__brand-word span{color:var(--orange);}
.footer__brand-sub{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ivory-faint);}
.footer__social{display:flex;gap:10px;}
.footer__social a{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
  color:var(--ivory-dim);transition:border-color .25s ease,color .25s ease;
}
.footer__social a:hover{border-color:var(--orange);color:var(--orange-soft);}
.footer__social svg{width:15px;height:15px;}

/* Navegación del footer (punto 14 del pedido Bloque 9) — enlaces reales
   donde ya existe destino, placeholder inerte donde no. */
.footer__nav{display:flex;flex-wrap:wrap;gap:12px 28px;padding-bottom:24px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.footer__nav a,.footer__nav-soon{
  font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.03em;color:var(--ivory-dim);
  text-decoration:none;transition:color .25s ease;
}
.footer__nav a:hover{color:var(--orange-soft);}
.footer__nav-soon{color:var(--ivory-faint);cursor:default;}

.footer__cross{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding-bottom:24px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.footer__cross span{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-faint);}
.footer__cross img{height:15px;width:auto;opacity:.85;}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.76rem;color:var(--ivory-faint);letter-spacing:.02em;}
.footer__legal{display:flex;gap:18px;}
.footer__legal-link{color:var(--ivory-faint);cursor:default;transition:color .25s ease;}
.footer__legal-link:hover{color:var(--ivory-dim);}