/* ============================================================
   De piezas sueltas a sistemas con IA
   Rediseño premium — monocromo plata/platino, sin color de acento.
   Híbrido: hero con scroll-scrub + secciones limpias estilo Ascend.
   El énfasis se da por brillo/peso y un acabado metálico, no por tono.
   ============================================================ */

:root {
  --bg: #08090b;
  --bg-2: #0b0c10;
  --panel: #0f1115;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #f3f4f6;      /* títulos / lo más brillante */
  --text-2: #a7acb4;    /* cuerpo, plata-gris */
  --text-dim: #71767e;  /* apagado */
  --text-faint: #565b63;/* eyebrows */

  --silver: #e7eaef;
  --silver-2: #c3c8d0;

  /* Color corporativo (lima Eskailet) — se usa SOLO en acentos muy sutiles. */
  --brand: #d8e88a;
  --brand-rgb: 216, 232, 138;

  /* acabados metálicos */
  --metal: linear-gradient(180deg, #f7f8fa 0%, #d4d8de 50%, #abb1ba 100%);
  --metal-text: linear-gradient(180deg, #ffffff 0%, #dfe3e9 58%, #c1c6cf 100%);

  --maxw: 1120px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Precarga: cubre la pantalla hasta que el primer frame del video y el
   motor estan listos. Evita ver estados intermedios (sopa de palabras,
   salto del video) al cargar en frio. Se desvanece con html.loaded.
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
html.loaded #preloader {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}
.preloader__box { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.preloader__mark { width: 52px; height: auto; opacity: 0.92; animation: preloader-pulse 1.8s ease-in-out infinite; }
.preloader__bar { position: relative; width: 120px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.preloader__bar i { position: absolute; top: 0; left: -40%; height: 100%; width: 40%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--silver), transparent); animation: preloader-slide 1.15s ease-in-out infinite; }
@keyframes preloader-pulse { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } }
@keyframes preloader-slide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .preloader__mark, .preloader__bar i { animation: none; }
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

::selection { background: rgba(255, 255, 255, 0.18); color: #fff; }

a { color: inherit; }

/* ---------- Capas de fondo ---------- */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: var(--bg);
  opacity: 1;
  will-change: opacity;
}
.scene-dim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
}
/* Glow radial negro detrás del texto: oscurece la banda central (donde vive el
   copy) y deja respirar el vídeo en los bordes -> legibilidad sin matar la
   imagen. El JS puede ajustar su intensidad vía --text-scrim. */
.text-scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--text-scrim, 1);
  background: radial-gradient(ellipse 92% 64% at 50% 50%,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.58) 40%,
    rgba(0, 0, 0, 0) 76%);
}
/* Halo: orbe esférico que sigue al ratón (la posición la pinta el JS vía --mx/--my),
   muta de forma como una burbuja orgánica y late. La opacidad/parpadeo los pinta el JS. */
.halo {
  position: fixed;
  top: 0;
  left: 0;
  width: 64vmin;
  height: 64vmin;
  margin: -32vmin 0 0 -32vmin;
  transform: translate(var(--mx, 50vw), var(--my, 33vh));
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}
/* El orbe: relleno radial suave + desenfoque = luz esférica; border-radius animado
   + giro/escala no uniforme = "cambia de forma" sin dejar de ser una esfera. */
.halo__orb {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(232, 236, 242, 0.07), rgba(232, 236, 242, 0.038) 58%, rgba(232, 236, 242, 0.012) 100%);
  border-radius: 50%;
  filter: blur(34px);
  animation: halo-morph 16s ease-in-out infinite;
}
@keyframes halo-morph {
  0%, 100% { border-radius: 52% 48% 47% 53% / 55% 51% 49% 45%; transform: scale(1, 1) rotate(0deg); }
  33%      { border-radius: 45% 55% 58% 42% / 47% 57% 43% 53%; transform: scale(1.08, 0.95) rotate(7deg); }
  66%      { border-radius: 57% 43% 49% 51% / 43% 47% 53% 57%; transform: scale(0.95, 1.06) rotate(-6deg); }
}
/* Ruido dentro de la luz (no se desenfoca: va en el padre, encima del orbe),
   enmascarado en círculo. Late y se mueve. Hereda la opacidad/parpadeo del halo. */
.halo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 48%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 48%, transparent 70%);
  animation: grain-shift 0.42s steps(3) infinite, halo-noise 5.5s ease-in-out infinite;
}
@keyframes halo-noise {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.38; }
}
html.ambient #scene { display: none; }
/* Con vídeo real, el lienzo es el fondo: ocultamos las capas de ambiente
   (orbe/aura/rejilla) para que el vídeo respire. Mantenemos velo, viñeta y grano. */
.has-video .aura,
.has-video .grid,
.has-video .halo { display: none; }
/* Legibilidad del copy sobre el vídeo: sombra sutil que garantiza contraste
   sobre los frames brillantes del final sin ensuciar la tipografía. */
.has-video .eyebrow,
.has-video .hero__title,
.has-video .hero__lead,
.has-video .sec__title,
.has-video .sec__body,
.has-video .sec__body li,
.has-video .card,
.has-video .chip {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 28px rgba(0, 0, 0, 0.65);
}
/* ---------- Modo presentación ----------
   Cada sección llena la pantalla; su contenido "aparece" al entrar y se
   desvanece al salir (--present lo conduce el scroll en JS). Las secciones
   con mucho copy crecen de forma natural, sin recorte. */
.has-video .sec {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: safe center;
  padding-top: 12vh;
  padding-bottom: 12vh;
}
.has-video .sec__wrap,
.has-video .hero__inner,
.has-video .footer__cta {
  width: 100%;
  opacity: var(--present, 1);
  transform: translateY(calc((1 - var(--present, 1)) * 28px));
  will-change: opacity, transform;
}
/* Rejilla técnica sutil (plano del "sistema"): líneas finas con máscara radial
   para que se concentren cerca del centro-superior y se difuminen en los bordes. */
.grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(115% 78% at 50% 32%, #000 0%, rgba(0, 0, 0, 0.5) 48%, transparent 82%);
  mask-image: radial-gradient(115% 78% at 50% 32%, #000 0%, rgba(0, 0, 0, 0.5) 48%, transparent 82%);
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(125% 90% at 50% 45%, rgba(8, 9, 11, 0) 38%, rgba(8, 9, 11, 0.62) 100%),
    linear-gradient(to bottom, rgba(8, 9, 11, 0.55) 0%, rgba(8, 9, 11, 0) 16%, rgba(8, 9, 11, 0) 78%, rgba(8, 9, 11, 0.7) 100%);
}
/* Ruido de estática ACTIVO: un sprite con 10 fotogramas de ruido DISTINTOS que
   se reproducen en bucle -> el grano cambia de verdad (vídeo de ruido/inter-
   ferencia), no una textura fija que se desplaza. Color (RGB) + saturate =
   aberración cromática. Por encima de toda la página. */
.grain {
  position: fixed;
  inset: -10px;
  z-index: 80;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: normal;
  filter: saturate(1.5);
  background-image: url("../assets/noise-sprite.png");
  background-repeat: repeat;
  background-size: 256px 2560px;
  animation: grain-frames 0.7s steps(10) infinite;
  will-change: background-position;
}
/* Aberración cromática: copia desplazada unos px en "screen" -> fringe RGB.
   Cicla los mismos fotogramas en sincronía y mantiene el desfase de canal. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/noise-sprite.png");
  background-repeat: repeat;
  background-size: 256px 2560px;
  transform: translate(3px, -2px);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: grain-frames 0.7s steps(10) infinite;
}
@keyframes grain-frames {
  from { background-position: 0 0; }
  to   { background-position: 0 -2560px; }
}
/* Aura: orbes de luz muy difuminados que derivan lentos -> profundidad. */
.aura {
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aura span {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  will-change: transform;
}
.aura .a1 {
  width: 52vw; height: 52vw; left: -6vw; top: -8vh;
  background: radial-gradient(circle, rgba(223, 229, 238, 0.12), rgba(223, 229, 238, 0) 70%);
  animation: drift-1 27s ease-in-out infinite;
}
.aura .a2 {
  width: 46vw; height: 46vw; right: -10vw; top: 22vh;
  background: radial-gradient(circle, rgba(198, 206, 219, 0.10), rgba(198, 206, 219, 0) 70%);
  animation: drift-2 33s ease-in-out infinite;
}
.aura .a3 {
  width: 62vw; height: 62vw; left: 18vw; bottom: -26vh;
  background: radial-gradient(circle, rgba(232, 236, 242, 0.09), rgba(232, 236, 242, 0) 70%);
  animation: drift-3 39s ease-in-out infinite;
}
@keyframes drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vw, 5vh) scale(1.12); } }
@keyframes drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5vw, -4vh) scale(1.08); } }
@keyframes drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, -6vh) scale(1.14); } }

/* ---------- Progreso ---------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 70;
  background: transparent;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), var(--silver));
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem clamp(1.2rem, 4vw, 2.6rem);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease),
              border-color 0.4s var(--ease), padding 0.4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(8, 9, 11, 0.66);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.brand__mark {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--metal);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}
.brand__symbol { height: 22px; width: auto; display: block; opacity: 0.95; }
.brand__logo { height: 76px; width: auto; display: block; opacity: 0.95; }
.brand__name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand__name i { color: var(--silver-2); font-style: normal; }
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--text-2);
  font-size: 0.92rem;
  padding: 0.2rem 0;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--silver);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav__cta:hover { border-color: var(--brand); background: var(--brand); color: #0e1206; }

/* ---------- Tipografía base ---------- */
.display { font-family: "Inter", sans-serif; }
h1, h2, h3 { font-family: "Inter", sans-serif; color: var(--text); margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
}
.eyebrow b {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--silver-2);
}
.eyebrow--hero {
  color: var(--text-dim);
  letter-spacing: 0.22em;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* énfasis: cursiva + acabado metálico claro (sin tono) */
.accent {
  font-style: italic;
  font-weight: 700;
  background: var(--metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dot { color: var(--brand); -webkit-text-fill-color: var(--brand); }

.lead {
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
  font-weight: 300;
}
.fineprint { font-size: 0.85rem; color: var(--text-dim); }

/* #sec-11 — badge "En directo" con punto REC parpadeante */
.live-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: #ff7a7a;
  border: 1px solid rgba(255, 95, 95, 0.45); border-radius: 999px;
  padding: 0.45rem 1.05rem; background: rgba(255, 60, 60, 0.08);
  margin: 0 0 1.3rem;
}
.rec-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b;
  box-shadow: 0 0 10px 1px rgba(255, 59, 59, 0.95);
  animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.65); } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9rem clamp(1.4rem, 5vw, 2rem) 7rem;
}
.hero__inner { max-width: 1000px; }
.hero .eyebrow--hero { margin-bottom: 2rem; }
.hero__title {
  font-weight: 800;
  font-size: clamp(2.9rem, 8.2vw, 7rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  margin: 0 0 1.6rem;
  color: var(--text);
}
.hero__lead {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-2);
  font-weight: 300;
  max-width: 42ch;
  margin: 0 auto 1.8rem;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
}

/* triad */
.triad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 1.4rem 0;
  padding: 0;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero .triad, .sec--cta .triad { justify-content: center; }
.triad span { position: relative; padding-left: 1rem; }
.triad span::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%;
  background: var(--silver-2);
}

/* ---------- CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 2rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: #0e1206;
  background: var(--brand); /* lima corporativo — llamada a la acción */
  border-radius: 999px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 40px -16px rgba(var(--brand-rgb), 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
}
.cta::after { content: "→"; transition: transform 0.3s var(--ease); }
.cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 22px 54px -16px rgba(var(--brand-rgb), 0.7); }
.cta:hover::after { transform: translateX(4px); }
.cta--lg { padding: 1.1rem 2.6rem; font-size: 1.08rem; }

/* ---------- Scroll hint ---------- */
.scroll-hint {
  position: absolute;
  left: 50%; bottom: 30px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-dim);
  transition: opacity 0.5s var(--ease);
}
.scroll-hint i {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
  animation: hint 1.9s var(--ease) infinite;
  transform-origin: top;
}
@keyframes hint {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(40px); opacity: 0; }
}
.scroll-hint.hidden { opacity: 0; }

/* ---------- Secciones ---------- */
.sec {
  position: relative;
  z-index: 5;
  padding: clamp(7rem, 14vh, 12rem) clamp(1.4rem, 5vw, 2.6rem);
}
.sec__wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.sec__head .eyebrow { margin-bottom: 1.3rem; }
.sec__title {
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.sec__body { display: flex; flex-direction: column; gap: 1.15rem; padding-top: 0.3rem; }
.sec__body p { margin: 0; }
.sec p {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.72;
  color: var(--text-2);
  max-width: 58ch;
}

.emph {
  color: var(--text) !important;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.42rem) !important;
  line-height: 1.45 !important;
  padding-left: 1.2rem;
  margin-top: 0.5rem !important;
  border-left: 2px solid var(--silver-2);
}

/* criteria — tabla fina a dos columnas */
.criteria {
  list-style: none;
  margin: 0.4rem 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.4rem;
}
.criteria li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
}
.criteria li::before {
  content: ""; flex: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--silver-2);
}

/* chips */
.chips { display: flex !important; flex-wrap: wrap; gap: 0.55rem; max-width: none !important; margin: 0.4rem 0 1.4rem; }
.chips span {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text-2);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.chips span:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--text); }

/* ---------- Sección ancha (tres capas) ---------- */
.sec--wide .sec__wrap { display: block; }
.sec__head--center { text-align: center; max-width: 720px; margin: 0 auto; }
.sec__head--center .eyebrow { justify-content: center; }
.sec__head--center .lead { margin-top: 1.1rem; color: var(--text-2); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.7rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s var(--ease);
}
.card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0));
}
.card__num { font-family: "Inter", sans-serif; font-size: 0.85rem; letter-spacing: 0.2em; color: var(--silver-2); }
.card h3 { font-size: 1.32rem; font-weight: 600; margin: 0.8rem 0 1rem; }
.card p { font-size: 0.97rem !important; line-height: 1.62; color: var(--text-2); margin: 0 0 0.85rem; max-width: none; }
.card__foot {
  color: var(--text) !important;
  font-weight: 500;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  margin-top: 0.4rem !important;
}

/* build-list — lista grande interactiva */
.build-list { list-style: none; margin: 0.3rem 0 1.6rem; padding: 0; }
.build-list li {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(0.9rem, 1.6vw, 1.25rem) 0;
  border-top: 1px solid var(--line);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  color: var(--text);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.build-list li:last-child { border-bottom: 1px solid var(--line); }
.build-list li::before { content: "+"; color: var(--silver-2); font-weight: 700; }
.build-list li:hover { color: #fff; padding-left: 0.5rem; }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  width: max-content;
  white-space: nowrap;
  animation: marquee 42s linear infinite;
}
.marquee__track span {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
  color: var(--text-faint);
}
.marquee__track span[aria-hidden] { color: var(--silver-2); font-size: 0.7em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- CTA final ---------- */
.sec--cta .sec__wrap { display: block; text-align: center; max-width: 880px; }
.sec--cta .eyebrow { justify-content: center; margin-bottom: 1.6rem; }
.sec--cta h2 { font-weight: 800; font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 1.4rem; }
.sec--cta .lead { margin: 0 auto 0.4rem; max-width: 46ch; color: var(--text-2); }
.sec--cta .hero__actions { margin-top: 2rem; }

/* ---------- Cierre ---------- */
.sec--close { padding: clamp(9rem, 22vh, 16rem) clamp(1.4rem, 5vw, 2.6rem); }
.sec--close .sec__wrap { display: block; text-align: center; max-width: 1000px; }
.close-1 { font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 2.6vw, 2rem); color: var(--text-dim); margin: 0 0 0.6rem; }
.close-2 { font-weight: 800; font-size: clamp(2.4rem, 7.5vw, 6rem); line-height: 1.0; letter-spacing: -0.04em; color: var(--text); }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.2rem, 4vw, 2.6rem) 3rem; /* mismo lateral que el nav */
  background: linear-gradient(180deg, rgba(8, 9, 11, 0), rgba(8, 9, 11, 0.55));
}
.footer__cta {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  text-align: center;
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.footer__q { font-family: "Inter", sans-serif; font-weight: 700; font-size: clamp(1.8rem, 5vw, 3.2rem); color: var(--text); margin: 0; letter-spacing: -0.03em; }
.footer__bottom {
  max-width: none;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
/* +70px: compensa el hueco transparente del wordmark del nav para que el
   símbolo del footer quede en la misma vertical que el ≡ de la cabecera. */
.footer__logo { height: 40px; width: auto; opacity: 0.85; margin-left: 70px; }

/* ---------- Reveals ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].in { opacity: 1; transform: none; }
.cards .card:nth-child(2) { transition-delay: 0.08s; }
.cards .card:nth-child(3) { transition-delay: 0.16s; }

/* ---------- Reveals de texto enmascarado (SplitType) ---------- */
.pre-split [data-split] { opacity: 0; }
.is-split { opacity: 1; }
.is-split .line {
  overflow: hidden;
  padding: 0.12em 0.06em 0.16em;
  margin: -0.12em -0.06em -0.16em;
}
.is-split .word {
  display: inline-block;
  transform: translateY(118%);
  filter: blur(7px);
  transition: transform 0.95s var(--ease), filter 0.9s var(--ease);
  will-change: transform, filter;
}
.is-split.in-split .word { transform: translateY(0); filter: blur(0); }
/* Las palabras del acento llevan el degradado metálico individualmente,
   para que el clip de texto siga funcionando tras dividir el titular. */
.accent .word, .accent.word {
  background: var(--metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Entrada coreografiada del hero ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.js .hero .eyebrow--hero { opacity: 0; animation: rise-in 0.9s var(--ease) 0.12s both; }
.js .hero .hero__lead { opacity: 0; animation: rise-in 0.9s var(--ease) 0.52s both; }
.js .hero .triad { opacity: 0; animation: rise-in 0.9s var(--ease) 0.64s both; }
.js .hero .hero__actions { opacity: 0; animation: rise-in 0.9s var(--ease) 0.76s both; }

/* ---------- Parallax tipográfico ---------- */
.hero__title, .close-2 {
  transform: translate3d(0, var(--px, 0px), 0);
  will-change: transform;
}


/* ---------- Cursor personalizado ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 90;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
}
.cursor-ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: width 0.26s var(--ease), height 0.26s var(--ease), margin 0.26s var(--ease), background 0.26s var(--ease);
}
.cursor-ring.is-hover {
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(255, 255, 255, 0.1);
}
html.cursor-on, html.cursor-on a, html.cursor-on button, html.cursor-on .cta, html.cursor-on .nav__cta { cursor: none; }

/* ---------- Responsive ---------- */
@media (min-width: 901px) {
  .sec__head { position: sticky; top: clamp(7rem, 18vh, 11rem); align-self: start; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .sec__wrap { grid-template-columns: 1fr; gap: 1.8rem; }
  .cards { grid-template-columns: 1fr; }
  .criteria { grid-template-columns: 1fr; }
  .sec p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.lenis { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .scroll-hint i { animation: none; }
  .halo { animation: none; }
  .halo__orb { animation: none; }
  .halo::after { animation: none; }
  .pre-split [data-split] { opacity: 1; }
  .is-split .word { transform: none !important; filter: none !important; }
  .grain { animation: none; }
  .grain::after { animation: none; }
  .aura span { animation: none; }
  .js .hero .eyebrow--hero,
  .js .hero .hero__lead,
  .js .hero .triad,
  .js .hero .hero__actions { animation: none; opacity: 1; }
  .hero__title, .close-2 { transform: none !important; }
}

/* ============================================================
   REDISEÑO — fase piloto
   Movimiento "emerge grande" + jerarquía C izquierda + vídeo a la derecha.
   Activado por html.redesign (siempre on en el piloto). Reversible.
   ============================================================ */

/* sticky operativo: 'clip' (no 'hidden') evita crear un contenedor de scroll
   que rompería position:sticky, manteniendo el corte horizontal. */
html.redesign,
html.redesign body { overflow-x: clip; }

/* --- Composición: vídeo a la derecha (zoom + desplazamiento), ajustable en vivo --- */
html.redesign #scene {
  transform: scale(var(--vzoom, 1)) translate(var(--vx, 0%), var(--vy, 0%));
  transform-origin: 50% center;
}
/* Velo: funde la izquierda a negro (texto), deja limpio el vídeo a la derecha */
html.redesign .text-scrim {
  opacity: 1;
  background:
    linear-gradient(100deg,
      #06070a 0%,
      rgba(6, 7, 10, 0.95) 30%,
      rgba(6, 7, 10, 0.62) 50%,
      rgba(6, 7, 10, 0.18) 70%,
      rgba(6, 7, 10, 0) 86%);
}

/* --- Texto anclado a la izquierda --- */
html.redesign .hero {
  align-items: flex-start;
  text-align: left;
  padding-left: clamp(1.4rem, 6vw, 5.5rem);
}
html.redesign .hero__inner { max-width: min(620px, 52vw); margin: 0; }
html.redesign .sec { justify-content: flex-start; }
html.redesign .sec__wrap {
  display: block;
  max-width: min(640px, 52vw);
  margin: 0;
  text-align: left;
  grid-template-columns: none;
}
html.redesign .sec__head { position: static; }
/* Secciones densas aún sin rediseñar (fase 2): más ancho para no romper */
html.redesign #sec-2 .sec__wrap,
html.redesign #sec-3 .sec__wrap,
html.redesign #sec-7 .sec__wrap,
html.redesign #sec-10 .sec__wrap { max-width: min(920px, 88vw); }
html.redesign .sec--wide .sec__wrap,
html.redesign .sec--cta .sec__wrap,
html.redesign .sec--close .sec__wrap { max-width: min(1040px, 92vw); margin: 0; text-align: left; }

/* Títulos de secciones no rediseñadas: igualar peso del nuevo titular */
html.redesign .sec__title {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* No dejar ocultos los reveals antiguos: el bloque entero hace el emerge */
html.redesign [data-reveal] { opacity: 1 !important; transform: none !important; }

/* --- Jerarquía rediseñada (hero, sec-1, sec-4) --- */
html.redesign .kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500; margin: 0 0 0.7rem;
}
html.redesign .kicker b {
  color: #0a0b0d; background: var(--metal); font-weight: 700;
  border-radius: 6px; padding: 0.16rem 0.46rem; letter-spacing: 0.04em; font-size: 0.82rem;
}
html.redesign .titular {
  font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 0.95; letter-spacing: -0.05em; color: var(--text); margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
html.redesign .remate {
  font-style: italic; font-weight: 700; color: var(--text);
  font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.12;
  margin: 0.85rem 0 0; max-width: 22ch; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
html.redesign .pie {
  font-size: clamp(0.98rem, 1.05vw, 1.1rem); color: var(--text-dim);
  line-height: 1.6; font-weight: 300; max-width: 48ch;
  margin: 0.85rem 0 0; padding-top: 0; border-top: none;
}
html.redesign .hero-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--text-2);
  line-height: 1.5; font-weight: 300; max-width: 40ch; margin: 0.8rem 0 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
html.redesign .hero .hero__actions { align-items: flex-start; margin-top: 2rem; }

/* --- Movimiento: "misma pantalla" — la letra NO hace scroll.
   Cada sección es una "escena" alta (da recorrido de scroll) y su contenido
   queda FIJO (sticky) centrado en pantalla: aparece, se mantiene y desaparece
   en su sitio. El scroll solo conduce la transición; el texto no se desplaza.
   El JS (bucle de scroll) controla opacity/scale/blur por escena. --- */
html.redesign .hero {
  min-height: 135vh;
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}
html.redesign .sec {
  min-height: 150vh;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}
html.redesign .hero__inner,
html.redesign main > section .sec__wrap {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: opacity, transform, filter;
}
/* footer: sin fijar, siempre visible (cierre normal) */
html.redesign .footer__cta { opacity: 1; }

/* Anti-FOUC: hasta que el motor arranca (scroll-sequence.js quita .pre-anim, o
   el failsafe del <head> a los 2.5s), ocultar la entrada coreografiada del hero
   para que no se vea de golpe y luego se reanime subiendo. Reduced-motion: al
   quitarse .pre-anim vuelven a su opacidad natural (1), sin animacion. */
html.redesign.pre-anim .hero__inner > *,
html.redesign.pre-anim #sec-1 .word-soup { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  html.redesign .hero,
  html.redesign .sec { min-height: 100vh; }
  html.redesign .hero__inner,
  html.redesign main > section .sec__wrap {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ============================================================
   AJUSTE: alineación CENTRAL + más presencia en pantalla
   ============================================================ */
/* Velo centrado: legibilidad del texto centrado sobre el vídeo */
html.redesign .text-scrim {
  background: radial-gradient(ellipse 100% 76% at 50% 50%,
    rgba(6, 7, 10, 0.9) 0%,
    rgba(6, 7, 10, 0.72) 38%,
    rgba(6, 7, 10, 0.32) 64%,
    rgba(6, 7, 10, 0) 85%);
}
/* Más recorrido = el texto permanece más tiempo en pantalla */
html.redesign .hero { min-height: 165vh; padding-left: 0; text-align: center; }
html.redesign .sec { min-height: 205vh; }
/* Centrado del bloque fijado (horizontal y vertical) */
html.redesign .hero__inner,
html.redesign main > section .sec__wrap {
  align-items: center;
  text-align: center;
  transform-origin: center center;
  margin: 0 auto;
  max-width: min(940px, 90vw);
}
html.redesign .hero .hero__actions { align-items: center; }
/* Tipografía más grande (ocupa más pantalla) */
html.redesign .titular {
  font-size: clamp(3rem, 6.6vw, 5.6rem);
  max-width: 20ch; margin-left: auto; margin-right: auto;
}
html.redesign .remate {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  max-width: 26ch; margin-left: auto; margin-right: auto;
}
html.redesign .pie { max-width: 58ch; margin-left: auto; margin-right: auto; }
html.redesign .hero-lead { max-width: 48ch; margin-left: auto; margin-right: auto; }
/* Secciones densas / especiales: también centradas y anchas */
html.redesign #sec-2 .sec__wrap,
html.redesign #sec-3 .sec__wrap,
html.redesign #sec-7 .sec__wrap,
html.redesign #sec-10 .sec__wrap,
html.redesign .sec--wide .sec__wrap,
html.redesign .sec--cta .sec__wrap,
html.redesign .sec--close .sec__wrap { max-width: min(1040px, 92vw); margin: 0 auto; text-align: center; }

/* velo ajustable en vivo */
html.redesign .text-scrim { opacity: var(--velo, 1); }

/* ============================================================
   Grafismo animado por escena (tras el vídeo): refuerza el mensaje.
   Monocromo geométrico, casa con la estética. (muestra en #sec-6)
   ============================================================ */
html.redesign .scene-gfx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
html.redesign .has-gfx > :not(.scene-gfx) { position: relative; z-index: 2; }
html.redesign .gfx-svg {
  width: min(840px, 92vw); height: auto; overflow: visible; opacity: 0.6;
  transform-origin: 50% 50%;
  animation: gfx-breathe 18s ease-in-out infinite;
}
html.redesign .gfx-link { stroke: rgba(231, 234, 239, 0.13); stroke-width: 1; }
html.redesign .gfx-pulse {
  stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 0.16 0.84; stroke-dashoffset: 1;
  animation: gfx-flow 3.6s linear infinite;
}
html.redesign .gfx-node {
  fill: #e7eaef; transform-box: fill-box; transform-origin: 50% 50%;
  animation: gfx-node 3.4s ease-in-out infinite;
}
html.redesign .gfx-node--hub { filter: drop-shadow(0 0 8px rgba(231, 234, 239, 0.55)); }
@keyframes gfx-flow { to { stroke-dashoffset: 0; } }
@keyframes gfx-node { 0%, 100% { opacity: 0.3; transform: scale(0.55); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes gfx-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) {
  html.redesign .gfx-pulse, html.redesign .gfx-node, html.redesign .gfx-svg { animation: none; }
  html.redesign .gfx-pulse { stroke-dasharray: none; stroke-dashoffset: 0; stroke: rgba(255, 255, 255, 0.22); }
}

/* ============================================================
   Panel de ajuste del vídeo (desarrollo) — desplazar/modificar en vivo
   ============================================================ */
.tuner {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  font-family: "Inter", system-ui, sans-serif; color: var(--text);
}
.tuner__toggle {
  font-family: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  color: #0a0b0d; background: var(--metal); border: none; border-radius: 999px;
  padding: .6rem 1.1rem; cursor: pointer; box-shadow: 0 8px 28px -10px rgba(0,0,0,.8);
}
.tuner__body {
  display: none; margin-top: 10px; width: 280px; padding: 16px 18px;
  background: rgba(10, 12, 16, .92); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,.85);
}
.tuner.open .tuner__body { display: block; }
.tuner__row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 12px; }
.tuner__row label { display: flex; justify-content: space-between; align-items: baseline; font-size: .76rem; color: var(--text-2); letter-spacing: .03em; }
.tuner__row label b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tuner input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--line-strong); border-radius: 999px; outline: none; }
.tuner input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--metal); cursor: pointer; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.tuner__out { margin: 6px 0 12px; }
.tuner__out code { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .76rem; color: var(--silver-2); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; word-break: break-word; }
.tuner__actions { display: flex; gap: .5rem; }
.tuner__actions button { flex: 1; font-family: inherit; font-size: .76rem; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem; cursor: pointer; }
.tuner__actions button:hover { background: rgba(255,255,255,.1); }

/* ============================================================
   POST-VÍDEO: scroll normal + revelado progresivo de elementos.
   Al acabar el vídeo (sec-6+), las secciones dejan de fijarse: se bajan
   con scroll y sus elementos (texto + grafismo) van apareciendo al entrar.
   ============================================================ */
html.redesign .sec.post {
  min-height: auto;
  padding-top: clamp(7rem, 15vh, 13rem);
  padding-bottom: clamp(7rem, 15vh, 13rem);
  display: block;
}
html.redesign .sec.post .sec__wrap {
  position: static;
  min-height: 0;
  opacity: 1;
  transform: none;
  filter: none;
}
html.redesign .sec.post .reveal {
  opacity: 0;
  transform: translateY(66px) scale(0.84);
  filter: blur(14px);
  transition: opacity 1.1s var(--ease), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.14s);
  transform-origin: center center;
}
html.redesign .sec.post .reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* origen de escala centrado para el movimiento por-elemento (durante el vídeo) */
html.redesign .sec:not(.post) .sec__wrap > *,
html.redesign .hero__inner > * { transform-origin: center center; will-change: opacity, transform, filter; }
/* el grafismo se revela solo con opacidad (no se desplaza) */
html.redesign .sec.post .scene-gfx.reveal { transform: none; }
html.redesign .sec.post .scene-gfx.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.redesign .sec.post .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============================================================
   La persona detrás — reveal en el funde a NEGRO (entre 05 y 06).
   El vídeo termina, la pantalla queda negra y aparece el retrato.
   ============================================================ */
html.redesign .sec--face {
  padding-top: clamp(8rem, 18vh, 15rem);
  padding-bottom: clamp(8rem, 18vh, 15rem);
}
html.redesign .sec--face .sec__wrap.face {
  display: grid;
  grid-template-columns: minmax(260px, 350px) 1fr;
  align-items: center;
  gap: clamp(2.2rem, 5vw, 5rem);
  max-width: min(1040px, 92vw);
  margin: 0 auto;
  text-align: left;
}
html.redesign .face__photo {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1080 / 1980;
  /* honra la marca: hairline lima muy fina + halo frío + sombra honda */
  box-shadow:
    0 0 0 1px rgba(var(--brand-rgb), 0.55),
    0 30px 80px -34px rgba(0, 0, 0, 0.92),
    0 0 64px -22px rgba(var(--brand-rgb), 0.28);
}
html.redesign .face__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(1.02);
}
/* viñeta inferior: funde el retrato con el negro de la escena */
html.redesign .face__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8, 10, 14, 0.6) 100%);
}
html.redesign .face__body { max-width: 46ch; }
html.redesign .face__body .kicker { margin-bottom: 0.6rem; }
html.redesign .face__body .titular { margin: 0; }
/* subtítulo: misma distancia al titular que en el resto de secciones (0.85rem),
   alineado a la izquierda (anulamos los márgenes auto que lo centrarían). */
html.redesign .face__body .remate { margin: 0.85rem 0 0; }
/* texto descriptivo: separación clara del subtítulo, como bloque aparte. */
html.redesign .face__body .pie {
  margin: 1.9rem 0 0;
  max-width: 46ch;
}
/* el subrayado se DIBUJA después de que el subtítulo haya aparecido (no a la vez):
   retardo ≈ delay del reveal (--i:3) + casi toda su duración, para que el trazo
   se vea trazarse como un segundo tiempo. */
html.redesign .sec--face .brush-underline {
  transition: background-size 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1.4s;
}
@media (max-width: 760px) {
  html.redesign .sec--face .sec__wrap.face {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.8rem;
    max-width: 420px;
  }
  html.redesign .face__photo { max-width: 290px; margin: 0 auto; }
  html.redesign .face__body { margin: 0 auto; }
  html.redesign .face__body .pie { margin-left: auto; margin-right: auto; }
}

/* ===== Grafismo #sec-7 — perímetro / límites (boundary + brackets + núcleo) ===== */
html.redesign .gfx-bound { stroke: rgba(231, 234, 239, 0.14); stroke-width: 1.5; fill: none; }
html.redesign .gfx-bound-pulse {
  stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; fill: none;
  stroke-dasharray: 0.22 0.78; stroke-dashoffset: 1;
  animation: gfx-flow 5s linear infinite;
}
html.redesign .gfx-bracket { stroke: rgba(231, 234, 239, 0.5); stroke-width: 2; fill: none; stroke-linecap: round; }
html.redesign .gfx-core {
  fill: #e7eaef; transform-box: fill-box; transform-origin: 50% 50%;
  animation: gfx-node 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(231, 234, 239, 0.55));
}
@media (prefers-reduced-motion: reduce) {
  html.redesign .gfx-bound-pulse, html.redesign .gfx-core { animation: none; }
  html.redesign .gfx-bound-pulse { stroke-dasharray: none; stroke-dashoffset: 0; stroke: rgba(255, 255, 255, 0.22); }
}

/* ===== Grafismo #sec-8 — capas (pieza por pieza, capa por capa) ===== */
html.redesign .gfx-plate {
  fill: rgba(231, 234, 239, 0.05); stroke: rgba(231, 234, 239, 0.3); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: gfx-rise 4.5s ease-in-out infinite;
}
html.redesign .gfx-spine {
  stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; fill: none;
  stroke-dasharray: 0.2 0.8; stroke-dashoffset: 1; animation: gfx-flow 3s linear infinite;
}
@keyframes gfx-rise { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }

/* ===== Grafismo #sec-9 — piezas que encajan ===== */
html.redesign .gfx-frame { fill: none; stroke: rgba(231, 234, 239, 0.26); stroke-width: 1.5; }
html.redesign .gfx-piece {
  fill: rgba(231, 234, 239, 0.85);
  animation: gfx-assemble 4s ease-in-out infinite;
}
@keyframes gfx-assemble {
  0%, 100% { transform: translate(var(--ax, 0px), var(--ay, 0px)); opacity: 0.35; }
  45%, 72% { transform: translate(0, 0); opacity: 1; }
}

/* ===== Grafismo #sec-10 — constelación / órbita ===== */
html.redesign .gfx-ring { fill: none; stroke: rgba(231, 234, 239, 0.15); stroke-width: 1.2; }
html.redesign .gfx-orbit { transform-box: fill-box; transform-origin: center; animation: gfx-spin 26s linear infinite; }
html.redesign .gfx-orbit--rev { animation-duration: 40s; animation-direction: reverse; }
html.redesign .gfx-onode { fill: #e7eaef; transform-box: fill-box; transform-origin: 50% 50%; animation: gfx-node 3.2s ease-in-out infinite; }
@keyframes gfx-spin { to { transform: rotate(360deg); } }
html.redesign .sec.post .build-list { max-width: 540px; margin: 1.6rem auto 0; text-align: left; }

/* ===== Grafismo #sec-11 — estructura / cimiento (la arquitectura permanece) ===== */
html.redesign .gfx-struct { stroke: rgba(231, 234, 239, 0.55); stroke-width: 2.4; fill: none; stroke-linecap: round; }
html.redesign .gfx-struct-soft { stroke: rgba(231, 234, 239, 0.2); stroke-width: 1.4; fill: none; }
html.redesign .gfx-float { fill: rgba(231, 234, 239, 0.75); transform-box: fill-box; transform-origin: 50% 50%; animation: gfx-drift 6.5s ease-in-out infinite; }
@keyframes gfx-drift {
  0% { transform: translateY(6px); opacity: 0; }
  25% { opacity: 0.85; }
  75% { opacity: 0.25; }
  100% { transform: translateY(-34px); opacity: 0; }
}

/* Cubo "boceto" (#sec-11): aristas que se dibujan solas en bucle, como un
   plano arquitectónico trazándose; guías de construcción y vértices que laten. */
html.redesign .gfx-cube-svg { animation: none; opacity: 0.5; width: min(1800px, 185vw); }
html.redesign .gfx-cube {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: cube-float 14s ease-in-out infinite;
}
html.redesign .gfx-cube__guide {
  stroke: rgba(200, 214, 240, 0.12); stroke-width: 1; fill: none;
  stroke-dasharray: 3 7;
}
html.redesign .gfx-cube__edge {
  stroke: rgba(234, 241, 255, 0.5); stroke-width: 1.3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(180, 205, 255, 0.3));
  animation: cube-draw 6s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
html.redesign .gfx-cube__vtx {
  fill: #eaf1ff; transform-box: fill-box; transform-origin: 50% 50%;
  filter: drop-shadow(0 0 5px rgba(190, 210, 255, 0.6));
  animation: cube-vtx 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
/* dibuja la arista, la mantiene y la retrae (loop sin salto: 1 -> 0 -> 1) */
@keyframes cube-draw {
  0%   { stroke-dashoffset: 1; }
  40%  { stroke-dashoffset: 0; }
  86%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}
@keyframes cube-vtx {
  0%, 20%   { opacity: 0; transform: scale(0.4); }
  45%, 80%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(0.4); }
}
@keyframes cube-float {
  0%, 100% { transform: translateY(5px) rotate(-0.8deg); }
  50%      { transform: translateY(-7px) rotate(0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.redesign .gfx-plate, html.redesign .gfx-spine, html.redesign .gfx-piece,
  html.redesign .gfx-orbit, html.redesign .gfx-onode, html.redesign .gfx-float { animation: none; }
  html.redesign .gfx-piece { transform: none; opacity: 1; }
  html.redesign .gfx-spine { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.redesign .gfx-cube { animation: none; }
  html.redesign .gfx-cube__edge { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  html.redesign .gfx-cube__vtx { animation: none; opacity: 1; }
}

/* ===== Grafismo #cierre — anillos que emanan del núcleo (empieza / expande) ===== */
html.redesign .gfx-emit {
  fill: none; stroke: rgba(231, 234, 239, 0.4); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: gfx-emit 4.2s ease-out infinite;
}
@keyframes gfx-emit { 0% { transform: scale(0.18); opacity: 0.85; } 100% { transform: scale(1.5); opacity: 0; } }
/* CTA: grafismo de convergencia atenuado (no compite con el botón) */
html.redesign .scene-gfx--soft .gfx-svg { opacity: 0.34; }
@media (prefers-reduced-motion: reduce) {
  html.redesign .gfx-emit { animation: none; opacity: 0.3; }
}

/* ============================================================
   EJE CONDUCTOR — dos raíles laterales (uno a cada lado) con nodo de
   progreso que desciende (--sp). De cada raíl NACEN haces ("feelers")
   que se extienden hacia el título y vuelven al raíl.
   ============================================================ */
html.redesign .rail {
  position: fixed; top: 0; height: 100vh; width: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(231, 234, 239, 0.20) 0%,
    rgba(231, 234, 239, 0.20) calc(var(--sp, 0) * 100%),
    rgba(231, 234, 239, 0.05) calc(var(--sp, 0) * 100%),
    rgba(231, 234, 239, 0.05) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
html.redesign .rail--l { left: clamp(18px, 6vw, 76px); }
html.redesign .rail--r { right: clamp(18px, 6vw, 76px); }
html.redesign .rail__node {
  position: absolute; left: 50%; top: calc(var(--sp, 0) * 100%);
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--metal); box-shadow: 0 0 14px 2px rgba(231, 234, 239, 0.55);
  animation: spine-pulse 2.4s ease-in-out infinite;
}
@keyframes spine-pulse {
  0%, 100% { box-shadow: 0 0 12px 1px rgba(231, 234, 239, 0.45); transform: scale(1); }
  50% { box-shadow: 0 0 22px 5px rgba(231, 234, 239, 0.7); transform: scale(1.3); }
}
/* haces que nacen del raíl, llegan hacia el título y vuelven */
html.redesign .feeler { position: absolute; height: 2px; width: 0; border-radius: 2px; pointer-events: none; }
html.redesign .rail--l .feeler {
  left: 0;
  background: linear-gradient(to right, rgba(231, 234, 239, 0) 0%, rgba(231, 234, 239, 0.06) 28%, rgba(231, 234, 239, 0.5) 100%);
  animation: feel 6.5s ease-in-out infinite;
}
html.redesign .rail--r .feeler {
  right: 0;
  background: linear-gradient(to left, rgba(231, 234, 239, 0) 0%, rgba(231, 234, 239, 0.06) 28%, rgba(231, 234, 239, 0.5) 100%);
  animation: feel 6.5s ease-in-out infinite;
}
/* punta luminosa en el extremo interior del haz */
html.redesign .feeler::after {
  content: ""; position: absolute; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--metal);
  box-shadow: 0 0 12px 3px rgba(231, 234, 239, 0.6);
}
html.redesign .rail--l .feeler::after { right: -2px; }
html.redesign .rail--r .feeler::after { left: -2px; }
@keyframes feel {
  0% { width: 0; opacity: 0; }
  16% { opacity: 0.9; }
  46% { width: 40vw; opacity: 0.8; }   /* extendido hacia el título */
  60% { opacity: 0.5; }
  100% { width: 0; opacity: 0; }        /* vuelve al raíl */
}
/* flujo vertical descendente en cada raíl: la "corriente" del sistema */
html.redesign .rail::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translate(-50%, -24vh);
  width: 2px; height: 22vh; border-radius: 2px;
  background: linear-gradient(to bottom, transparent, rgba(231, 234, 239, 0.5), transparent);
  animation: rail-flow 7s linear infinite;
}
html.redesign .rail--r::before { animation-delay: 3.5s; }
@keyframes rail-flow {
  0% { transform: translate(-50%, -24vh); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(-50%, 100vh); opacity: 0; }
}
/* estela (cometa) por encima del nodo que desciende */
html.redesign .rail__node::before {
  content: ""; position: absolute; left: 50%; bottom: 50%; transform: translateX(-50%);
  width: 2px; height: 9vh; border-radius: 2px;
  background: linear-gradient(to top, rgba(231, 234, 239, 0.55), transparent);
}
@media (prefers-reduced-motion: reduce) {
  html.redesign .rail__node { animation: none; }
  html.redesign .feeler { animation: none; opacity: 0; }
  html.redesign .rail::before { animation: none; opacity: 0; }
}

/* ============================================================
   Legibilidad + contraste (texto pequeño y tarjetas)
   ============================================================ */
/* texto pequeño (pie) más legible sobre vídeo/grafismos */
html.redesign .pie {
  color: #bcc1c9;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.5);
}
/* tarjetas (#sec-5): panel oscuro sólido + texto más claro + más aire */
html.redesign .cards { gap: clamp(1.4rem, 2.4vw, 2.4rem); }
html.redesign .card {
  background: linear-gradient(180deg, rgba(13, 15, 19, 0.78), rgba(9, 11, 15, 0.66));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border-color: var(--line-strong);
  padding: clamp(1.8rem, 2.8vw, 2.6rem) clamp(1.5rem, 2.2vw, 2rem);
}
html.redesign .card h3 { color: #fff; }
html.redesign .card p { color: #c7ccd4; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
html.redesign .card .card__foot { color: #fff; border-top-color: var(--line-strong); }
/* tarjetas dentro de la coreografía 1-a-1: origen centrado, sin transición que arrastre el inline */
html.redesign .sec:not(.post) .cards > .card {
  transform-origin: center center; will-change: opacity, transform, filter; transition: none;
}

/* #sec-5: cada tarjeta a ANCHO COMPLETO, apiladas y muy separadas → se ven una a una al bajar */
/* #sec-5 SLIDESHOW fijado: cada bloque a ancho completo, apilado, uno a uno */
html.redesign #sec-5 { min-height: 340vh; }
html.redesign .sec__wrap.deck {
  display: block; position: sticky; top: 0; min-height: 100vh;
  max-width: min(1240px, 94vw); margin: 0 auto;
}
html.redesign .deck-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transform-origin: center center;
  opacity: 0; /* pre-JS: ocultas hasta que el slideshow (JS) las controle -> evita ver las slides apiladas al cargar */
  will-change: opacity, transform, filter;
}
html.redesign .deck-slide .card { width: 100%; max-width: min(1100px, 100%); margin: 0 auto; text-align: left; }
html.redesign .deck-intro { max-width: min(900px, 100%); }
@media (prefers-reduced-motion: reduce) {
  html.redesign #sec-5, html.redesign #sec-1, html.redesign #sec-2, html.redesign #sec-3, html.redesign #sec-4 { min-height: auto; }
  html.redesign .sec__wrap.deck { position: static; min-height: 0; }
  html.redesign .deck-slide { position: static; opacity: 1 !important; transform: none !important; filter: none !important; margin-bottom: clamp(2rem, 5vh, 5rem); }
}

/* ============================================================
   Deck de TEXTO (sec-1..4): título principal -> remate -> pie,
   cada bloque ocupa el CENTRO NOBLE uno a uno (zoom in/out).
   El pie pequeño gana presencia central (mejor legibilidad).
   ============================================================ */
html.redesign #sec-1, html.redesign #sec-2, html.redesign #sec-3, html.redesign #sec-4 { min-height: 190vh; }

/* ============================================================
   Fondo: cuadrícula animada para las secciones negras tras el vídeo.
   Siempre presente (oculta), aparece al terminar el vídeo (video-done).
   ============================================================ */
html.redesign .grid {
  display: block; z-index: 1; opacity: 0;
  transition: opacity 1.2s var(--ease);
  background-image:
    linear-gradient(rgba(231, 234, 239, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 234, 239, 0.05) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(135% 105% at 50% 45%, #000 28%, transparent 86%);
  mask-image: radial-gradient(135% 105% at 50% 45%, #000 28%, transparent 86%);
  animation: grid-pan 16s linear infinite;
}
html.redesign.video-done .grid { opacity: 0.72; }
@keyframes grid-pan {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 62px, 62px 0; }
}

/* Líneas que se ILUMINAN: mismas líneas (más brillantes, azuladas) reveladas
   por un foco de luz que recorre la rejilla. */
html.redesign .grid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(188, 212, 255, 0.9) 1.4px, transparent 1.4px),
    linear-gradient(90deg, rgba(188, 212, 255, 0.9) 1.4px, transparent 1.4px);
  background-size: 62px 62px;
  background-position: inherit;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.65) 48%, transparent 78%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.65) 48%, transparent 78%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 95% 95%; mask-size: 95% 95%;
  filter: drop-shadow(0 0 12px rgba(150, 190, 255, 0.8));
  opacity: 0; transition: opacity 1.4s var(--ease);
  animation: grid-spot 17s ease-in-out infinite, grid-glow-pulse 4.5s ease-in-out infinite;
}
/* Nodos (intersecciones) que parpadean bajo un segundo foco. */
html.redesign .grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(214, 230, 255, 1) 2px, transparent 2.8px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 64%);
  mask-image: radial-gradient(circle, #000 0%, transparent 64%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 70% 70%; mask-size: 70% 70%;
  filter: drop-shadow(0 0 10px rgba(170, 200, 255, 0.95));
  opacity: 0; transition: opacity 1.4s var(--ease);
  animation: grid-spot2 13s ease-in-out infinite, grid-glow-pulse2 3.4s ease-in-out infinite;
}
html.redesign.video-done .grid::after,
html.redesign.video-done .grid::before { opacity: 1; }
/* latido de intensidad: el brillo "respira" mientras el foco recorre la rejilla */
@keyframes grid-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(150, 190, 255, 0.45)); }
  50%      { filter: drop-shadow(0 0 22px rgba(180, 210, 255, 1)); }
}
@keyframes grid-glow-pulse2 {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(170, 200, 255, 0.5)); }
  50%      { filter: drop-shadow(0 0 18px rgba(200, 222, 255, 1)); }
}
@keyframes grid-spot {
  0%   { -webkit-mask-position: 8% 18%;  mask-position: 8% 18%; }
  25%  { -webkit-mask-position: 82% 28%; mask-position: 82% 28%; }
  50%  { -webkit-mask-position: 64% 82%; mask-position: 64% 82%; }
  75%  { -webkit-mask-position: 22% 66%; mask-position: 22% 66%; }
  100% { -webkit-mask-position: 8% 18%;  mask-position: 8% 18%; }
}
@keyframes grid-spot2 {
  0%   { -webkit-mask-position: 78% 70%; mask-position: 78% 70%; }
  33%  { -webkit-mask-position: 18% 40%; mask-position: 18% 40%; }
  66%  { -webkit-mask-position: 54% 12%; mask-position: 54% 12%; }
  100% { -webkit-mask-position: 78% 70%; mask-position: 78% 70%; }
}
@media (prefers-reduced-motion: reduce) {
  html.redesign .grid,
  html.redesign .grid::after,
  html.redesign .grid::before { animation: none; }
}
html.redesign .sec__wrap.deck--text { max-width: min(940px, 90vw); }
html.redesign .deck--text .deck-slide { text-align: center; }
html.redesign .deck-slide .pie {
  font-size: clamp(1.2rem, 2.1vw, 1.7rem); max-width: 30ch; color: #d2d6dd;
  margin: 0 auto; line-height: 1.45; border-top: none; padding-top: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
html.redesign .deck-slide .remate { max-width: 24ch; margin: 0 auto; }

/* ---------- Sopa de letras (sección 01): términos flotantes que reaccionan
   al ratón con parallax por profundidad. Fondo persistente del deck, detrás
   de los slides y sin capturar el puntero. ---------- */
html.redesign #sec-1 .word-soup {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: visible;
}
html.redesign #sec-1 .deck-slide { z-index: 1; }
html.redesign .soup-word {
  position: absolute;
  transform: translate(-50%, -50%) translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--rot, 0deg));
  /* Tipografía brush/grafiti (Rock Salt) para todos, en mayúsculas. */
  font-family: "Rock Salt", cursive;
  font-weight: 400; font-style: normal; letter-spacing: 0.01em;
  font-size: 1.6rem; /* mismo tamaño = mismo grosor de trazo en todas */
  text-transform: uppercase;
  white-space: nowrap; line-height: 1.25;
  padding: 0.12em 0.1em; /* aire para ascendentes/descendentes del brush */
  background: linear-gradient(120deg, #aeb4be 0%, #eef1f5 50%, #c9d6e6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: blur(1.3px) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  html.redesign .soup-word { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
}

/* ============================================================
   #sec-5 — Tres capas en 3D: pila de paneles flotantes (CSS avanzado).
   Entrada escalonada al activarse el slide; respiración + barrido de luz
   continuos; columna de energía que une las capas; hover que eleva.
   ============================================================ */
/* Recorrido de scroll suficiente para repartir las tres cartas. */
html.redesign .sec--deal { min-height: 300vh; }
/* El título es un overlay superior (fuera del flujo): así la baraja queda
   centrada en el viewport, y el título se desvanece/sube con el scroll (JS). */
/* Fase A: el título queda centrado en pantalla (luego el JS lo desvanece). */
html.redesign #sec-5 .deal-head {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(calc(-50% + var(--headY, 0px)));
  text-align: center; z-index: 4; pointer-events: none;
  opacity: 0; /* pre-JS: el reparto (JS) la enciende -> evita el flash al cargar */
  will-change: opacity, transform;
}
html.redesign #sec-5 .deal-head .hero-lead { margin-top: 0.6rem; }
/* Fase B: el logo de Eskailet (las tres líneas) aparece centrado. */
html.redesign #sec-5 .deal-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + var(--logoY, 0px))) scale(var(--logoS, 1));
  z-index: 4; opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}
html.redesign #sec-5 .deal-logo img {
  height: clamp(120px, 22vh, 210px); width: auto; display: block;
  filter: drop-shadow(0 0 34px rgba(190, 210, 255, 0.28));
}
html.redesign #sec-5 .layer-stack {
  position: relative;
  width: min(680px, 86vw);
  height: 720px;
  margin: 0 auto; /* centrada en el viewport fijado */
}
/* Diagramas esquemáticos que representan cada capa (workflow / carpeta / hub). */
/* Altura fija del diagrama => todas las tarjetas miden lo mismo => huecos equidistantes */
html.redesign #sec-5 .layer__viz { height: 50px; margin: 0.2rem auto 0.85rem; text-align: center; line-height: 0; }
html.redesign #sec-5 .viz { display: inline-block; height: 100%; width: auto; max-width: 100%; vertical-align: middle; }
html.redesign #sec-5 .viz-box { stroke: rgba(231, 234, 239, 0.5); stroke-width: 1.4; fill: rgba(231, 234, 239, 0.05); }
html.redesign #sec-5 .viz-core { stroke: rgba(231, 234, 239, 0.78); stroke-width: 1.6; fill: rgba(231, 234, 239, 0.08); }
html.redesign #sec-5 .viz-arrow { stroke: rgba(231, 234, 239, 0.6); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
html.redesign #sec-5 .viz-link {
  stroke: rgba(231, 234, 239, 0.42); stroke-width: 1.4; fill: none; stroke-linecap: round;
  stroke-dasharray: 4 5; animation: viz-flow 2.6s linear infinite;
}
@keyframes viz-flow { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) {
  html.redesign #sec-5 .viz-link { animation: none; stroke-dasharray: none; }
}
html.redesign #sec-5 .layer-stack__spine {
  position: absolute; left: 50%; top: 8%; bottom: 8%; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(231,234,239,0.5) 18%, rgba(231,234,239,0.5) 82%, transparent);
  background-size: 100% 220%;
  filter: drop-shadow(0 0 8px rgba(190,210,255,0.55));
  opacity: 0.0;
  animation: spine-flow 3.6s linear infinite;
  transition: opacity 0.8s var(--ease) 0.1s;
}
@keyframes spine-flow { 0% { background-position: 0 120%; } 100% { background-position: 0 -120%; } }

html.redesign #sec-5 .layer-stack__inner,
html.redesign #sec-5 .layer-stack {
  transform-style: preserve-3d;
}
html.redesign #sec-5 .layer {
  position: absolute; left: 50%; top: 50%;
  width: min(560px, 82vw);
  transform: translate(-50%, -50%) translateY(var(--ty, 0px)); /* rectas, sin giro */
  opacity: 0; /* el reparto por scroll (JS) controla opacidad y posición */
  will-change: transform, opacity;
}
html.redesign #sec-5 .layer__card {
  position: relative;
  text-align: center; /* texto centrado */
  padding: 1.3rem 1.6rem 1.4rem;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  /* fondo totalmente opaco: no se ve nada por detrás */
  /* --ca = opacidad del fondo: 1 = opaca (apiladas), ~0.6 = cristal (repartidas).
     La controla el reparto por scroll (JS). */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012) 60%),
    rgba(13,16,22, var(--ca, 1));
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 44px 90px -42px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.14);
  overflow: hidden;
  /* posición/opacidad las controla el reparto por scroll en .layer (JS);
     aquí solo la transición del hover. */
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.4s var(--ease);
}
/* barrido de luz metálico que cruza cada panel */
html.redesign #sec-5 .layer__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.16) 50%, transparent 62%);
  background-size: 280% 100%;
  background-position: 180% 0;
  animation: layer-sheen 6.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes layer-sheen { 0%, 100% { background-position: 180% 0; } 55% { background-position: -80% 0; } }

html.redesign #sec-5 .layer__num {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em;
  color: var(--silver-2); opacity: 0.7; margin-bottom: 0.35rem;
}
html.redesign #sec-5 .layer__title {
  margin: 0 0 0.4rem; font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 700; line-height: 1.15;
  background: var(--metal-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.redesign #sec-5 .layer__desc {
  margin: 0 auto; font-size: 0.92rem !important; line-height: 1.5; color: var(--text-2); max-width: 44ch;
}

/* Respiración 3D del conjunto (continua) */
html.redesign #sec-5 .layer-stack {
  animation: stack-breathe 11s ease-in-out infinite alternate;
}
@keyframes stack-breathe {
  from { perspective-origin: 46% 36%; }
  to   { perspective-origin: 54% 40%; }
}

/* Hover: la capa se eleva y se ilumina */
html.redesign #sec-5 .layer__card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255,255,255,0.3);
  box-shadow:
    0 60px 110px -44px rgba(0,0,0,0.95),
    0 0 60px -16px rgba(190,210,255,0.28),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

@media (prefers-reduced-motion: reduce) {
  html.redesign #sec-5 .layer-stack { height: auto; perspective: none; animation: none; display: flex; flex-direction: column; gap: 1rem; }
  html.redesign #sec-5 .layer { position: static; width: 100%; transform: none; }
  html.redesign #sec-5 .layer__card { opacity: 1 !important; transform: none !important; transition: none; }
  html.redesign #sec-5 .layer__card::after { animation: none; }
  html.redesign #sec-5 .layer-stack__spine { display: none; }
  html.redesign .sec--deal { min-height: 100vh; }
  html.redesign #sec-5 .deal-head { position: static; transform: none; opacity: 1 !important; margin-bottom: 1.5rem; }
  html.redesign #sec-5 .deal-logo { display: none; }
}

/* ============================================================
   Tarjetas (#sec-5): jerarquía del título + halo en el marco
   ============================================================ */
html.redesign .card__num {
  display: block; font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 800;
  letter-spacing: 0.02em; line-height: 1; margin-bottom: 0.5rem;
  background: var(--metal-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; opacity: 0.55;
}
html.redesign .card h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 700; color: #fff;
  letter-spacing: -0.02em; line-height: 1.05; margin: 0.1rem 0 1.1rem;
}
html.redesign .deck-slide .card {
  position: relative;
  animation: card-halo 5s ease-in-out infinite;
}
html.redesign .deck-slide .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(150% 100% at 50% -12%, rgba(231, 234, 239, 0.10), transparent 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
@keyframes card-halo {
  0%, 100% { box-shadow: 0 0 0 1px var(--line-strong), 0 50px 120px -50px rgba(0, 0, 0, 0.9), 0 0 60px -16px rgba(231, 234, 239, 0.08); }
  50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 50px 120px -50px rgba(0, 0, 0, 0.9), 0 0 95px -8px rgba(231, 234, 239, 0.17); }
}
@media (prefers-reduced-motion: reduce) { html.redesign .deck-slide .card { animation: none; } }
/* ============================================================
   Juego de luz en los títulos: la palabra destacada (cursiva negrita)
   recibe un barrido de luz metálico continuo.
   ============================================================ */
html.redesign .accent {
  background: linear-gradient(100deg, #aeb4be 0%, #e9edf2 38%, #ffffff 50%, #e9edf2 62%, #aeb4be 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: accent-shine 7s ease-in-out infinite;
}
@keyframes accent-shine { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { html.redesign .accent { animation: none; background-position: 50% 0; } }

/* Brillo plateado "de verdad" SOLO en lo destacado (.accent): metal pulido con
   un destello especular que recorre las letras como la luz sobre la plata. */
html.redesign .accent {
  background-image: linear-gradient(100deg,
    #aab0b9 0%, #d6dae0 30%, #ffffff 48%, #ffffff 52%, #d6dae0 70%, #aab0b9 100%);
  background-size: 280% 100%;
  animation: silver-glint 7.5s ease-in-out infinite;
  /* el clip de texto recorta el degradado a la caja de la línea; con interlineado
     ajustado, la parte alta de la cursiva (p. ej. la "í") se quedaba sin relleno.
     Un padding vertical agranda el área del degradado para cubrir los ascendentes
     SIN alterar el interlineado (la caja en línea no empuja las líneas vecinas). */
  padding: 0.16em 0 0.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@keyframes silver-glint {
  0%   { background-position: 180% 0; }
  55%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.redesign .accent { animation: none; background-position: 50% 0; }
}

/* Subrayado tipo brush "estelar": trazo orgánico con destellos y leve glow.
   Va detrás del texto (el .accent tiene relleno transparente clip-text). */
/* El brush va como FONDO de la palabra (no ::after), con box-decoration-break:
   clone, así se reparte por cada línea y queda centrado bajo el texto incluso
   cuando hay salto de línea. El degradado metálico (.accent) va anidado dentro
   para no chocar con este fondo. */
.brush-underline {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 44' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23c2cf6e'/%3E%3Cstop offset='0.5' stop-color='%23eef3c2'/%3E%3Cstop offset='1' stop-color='%23d8e88a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6,27 C60,15 120,31 175,21 C220,13 270,29 314,19 C300,31 240,25 180,31 C120,37 60,31 6,31 Z' fill='url(%23g)' opacity='0.95'/%3E%3Cpath d='M40,25 q60,-6 120,2' stroke='%23f2f7d0' stroke-width='1.2' fill='none' opacity='0.5' stroke-linecap='round'/%3E%3Ccircle cx='300' cy='8' r='1.6' fill='%23f2f7d0'/%3E%3Ccircle cx='285' cy='12' r='0.9' fill='%23d8e88a'/%3E%3Ccircle cx='18' cy='11' r='1.1' fill='%23f2f7d0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 0.34em;   /* ancho 0 = oculto; crece a 100% al "dibujarse" */
  padding-bottom: 0.16em;
  transition: background-size 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Disparadores del dibujado, ligados al scroll. */
.deck-slide.slide-active .brush-underline,
.reveal.in .brush-underline,
.brush-underline.brush-in {
  background-size: 100% 0.34em;
}
@media (prefers-reduced-motion: reduce) {
  .brush-underline { background-size: 100% 0.34em; transition: none; }
}

/* En los TITULARES grandes el trazo debe quedar al MISMO nivel visual que en los
   subtítulos (.remate). El interlineado ajustado (0.95) acerca el "bottom" a la
   base; compensamos con un pequeño padding inferior para igualar el hueco. */
html.redesign .titular .brush-underline,
html.redesign .titular.brush-underline {
  padding-bottom: 0.14em;
  background-position: left bottom;
  background-size: 0% 0.34em;
}
html.redesign .titular .brush-underline.brush-in,
html.redesign .titular.brush-underline.brush-in,
html.redesign .titular.reveal.in .brush-underline,
html.redesign .deck-slide.slide-active .titular .brush-underline {
  background-size: 100% 0.34em;
}
@media (prefers-reduced-motion: reduce) {
  html.redesign .titular .brush-underline { background-size: 100% 0.34em; }
}

/* Post-vídeo: que el TÍTULO lidere (más zoom + blur, entra primero).
   El estado inicial SOLO mientras no está revelado (:not(.in)); al revelarse,
   .reveal.in restaura transform/filter y queda nítido. */
html.redesign .sec.post .titular.reveal { transition-delay: 0.05s; }
html.redesign .sec.post .titular.reveal:not(.in) {
  transform: translateY(58px) scale(0.62);
  filter: blur(20px);
}

/* tarjetas dentro de la coreografía (#sec-5): llenan el ancho */
html.redesign .beat .cards { width: 100%; margin-top: clamp(1.6rem, 3vw, 2.6rem); }

/* ============================================================
   Navegador de scroll por secciones: una PIEZA DE PUZZLE recorre un raíl
   con una marca por sección; la sección activa se resalta y al pasar el
   ratón muestra su nombre (click = ir a la sección). Feedback gráfico del
   punto en el que estás dentro de la página.
   ============================================================ */
.scrollnav {
  position: fixed; right: clamp(10px, 2vw, 24px); top: 50%;
  transform: translateY(-50%);
  height: min(62vh, 540px); width: 26px; z-index: 65;
  display: none;
}
@media (pointer: fine) and (min-width: 980px) { html.redesign .scrollnav { display: block; } }
.scrollnav__track,
.scrollnav__fill {
  position: absolute; left: 50%; top: 0; width: 2px; transform: translateX(-50%);
  border-radius: 2px;
}
.scrollnav__track { bottom: 0; background: rgba(231, 234, 239, 0.12); }
.scrollnav__fill {
  height: 0;
  background: linear-gradient(180deg, rgba(231, 234, 239, 0.7), rgba(231, 234, 239, 0.25));
}
.scrollnav__tick {
  position: absolute; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(231, 234, 239, 0.22);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.scrollnav__tick:hover { transform: scale(1.45); background: rgba(231, 234, 239, 0.7); }
.scrollnav__tick.is-done { background: rgba(231, 234, 239, 0.5); }
.scrollnav__tick.is-active {
  background: var(--silver); box-shadow: 0 0 10px 2px rgba(231, 234, 239, 0.45);
}
/* etiqueta con el nombre de la sección (al pasar el ratón) */
.scrollnav__tick::after {
  content: attr(data-label);
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-family: "Inter", sans-serif; font-size: 0.7rem; letter-spacing: 0.01em;
  color: var(--text); background: rgba(10, 11, 13, 0.85); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 7px; pointer-events: none;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.scrollnav__tick:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
/* la pieza de puzzle que marca el punto actual */
.scrollnav__piece {
  position: absolute; left: 50%; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e7eaef' d='M50 8c-4 0-7 3-7 7 0 1 .3 2 .6 3 .4 1-.4 2-1.4 2H28c-2 0-4 2-4 4v14c0 1-1 1.7-2 1.3-1-.4-2-.7-3-.7-4 0-7 3-7 7s3 7 7 7c1 0 2-.3 3-.7 1-.4 2 .3 2 1.3v14c0 2 2 4 4 4h14c1 0 1.7 1 1.3 2-.3 1-.6 2-.6 3 0 4 3 7 7 7s7-3 7-7c0-1-.3-2-.6-3-.4-1 .3-2 1.3-2h14c2 0 4-2 4-4V64c0-1 1-1.7 2-1.3 1 .4 2 .7 3 .7 4 0 7-3 7-7s-3-7-7-7c-1 0-2 .3-3 .7-1 .4-2-.3-2-1.3V28c0-2-2-4-4-4H57c-1 0-1.7-1-1.3-2 .3-1 .6-2 .6-3 0-4-3-7-7-7z'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 0 7px rgba(231, 234, 239, 0.6));
  transition: top 0.12s linear;
  animation: piece-pulse 2.6s ease-in-out infinite;
}
@keyframes piece-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(231, 234, 239, 0.45)); }
  50% { filter: drop-shadow(0 0 12px rgba(231, 234, 239, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .scrollnav__piece { animation: none; transition: none; }
}