/* ==========================================================================
   THALYON DATA
   Sistema visual: negro del render + un solo acento incandescente.
   El elemento firma es EL CORCHETE (.brk), calcado del marco abierto que
   rodea la T del logotipo. Nada lleva caja completa: todo se enmarca con
   esquinas sueltas. El corchete solo cierra una vez, en #diagnostico.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · FUENTES
   Servidas locales, subset latino, ejes recortados a lo que usa el sitio.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage';
  src: url('fonts/bricolage-display.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'InterTight';
  src: url('fonts/inter-tight.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains';
  src: url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* Permite interpolar el brazo del corchete cuando cierra */
@property --bl {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 20px;
}

/* --------------------------------------------------------------------------
   2 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  --void:       #08090A;   /* muestreado del fondo del render */
  --carbon:     #121417;
  --graphite:   #1E2227;
  --ember:      #FF7A18;   /* 7.64:1 sobre --void */
  --ember-glow: #E7943A;   /* muestreado de los filamentos del render */
  --ember-dim:  #B8551040;
  --bone:       #EDEDEA;   /* 16.99:1 */
  --ash:        #8A8F96;   /*  6.12:1 */

  --f-disp: 'Bricolage', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'InterTight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-num:  'JetBrains', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --spine-w: 76px;
  --sec-y: clamp(88px, 13vh, 168px);
  --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   3 · BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }

/* El enfasis del copy va en color, no en cursiva — es la convencion que el
   cliente ya usa en su deck (segunda mitad del titular en color de acento). */
em { font-style: normal; color: var(--ember); }

.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

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

/* Foco visible en todo elemento interactivo */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  padding: 12px 20px; background: var(--ember); color: var(--void);
  font-weight: 600; transform: translateY(-200%);
}
.skip:focus { transform: none; }

::selection { background: var(--ember); color: var(--void); }

/* --------------------------------------------------------------------------
   4 · TIPOGRAFIA
   -------------------------------------------------------------------------- */
/* Escala contenida. La presencia la da el aire alrededor del titular, no el
   cuerpo de la letra: a 99 px el hero gritaba, y gritar no se lee premium. */
.h-xl, .h-lg, .hero__h1 {
  font-family: var(--f-disp);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.hero__h1 {
  font-size: clamp(1.95rem, 4.4vw, 3.75rem);   /* tope 60 px (antes 99) */
  font-stretch: 82%;              /* la voz tensa: solo el hero */
  line-height: 1;
  letter-spacing: -0.015em;       /* en versales, apretar de mas encierra */
  text-transform: uppercase;
}
.hero__h1 .l { display: block; }

.h-xl {
  font-size: clamp(1.65rem, 3.2vw, 2.7rem);    /* tope 43 px (antes 66) */
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  max-width: 19ch;   /* en ch, PERO sobre el propio elemento: se resuelve
                        contra la display, no contra la fuente de cuerpo */
}
.h-lg { font-size: clamp(1.42rem, 2.45vw, 2.2rem); max-width: 22ch; }  /* 35 px */

.eyebrow {
  font-family: var(--f-num);
  font-size: 0.775rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 14px;
}
.sec__n { color: var(--ember); }

.lead {
  font-size: clamp(0.97rem, 1.1vw, 1.06rem);
  color: var(--ash);
  max-width: 60ch;
  margin-top: 24px;
}

.rule {
  border: 0; height: 1px; background: var(--graphite);
  margin: 40px 0; transform-origin: left center;
}

/* Flecha en SVG: ninguna de las tres fuentes trae U+2192 */
.arw {
  width: 1.5em; height: 0.6em; display: inline-block;
  vertical-align: -0.02em; flex: none;
}
.arw path { fill: none; stroke: var(--ember); stroke-width: 1.2; }

/* --------------------------------------------------------------------------
   5 · EL CORCHETE  (elemento firma)
   Un solo pseudo-elemento: borde completo enmascarado a las cuatro esquinas.
   Si el navegador no soporta mask, cae a un borde completo — perfectamente
   presentable.
   -------------------------------------------------------------------------- */
.brk { position: relative; }
.brk::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--graphite);
  pointer-events: none;
  --bl: 20px;
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / var(--bl) var(--bl) no-repeat,
    linear-gradient(#000, #000) 100% 0 / var(--bl) var(--bl) no-repeat,
    linear-gradient(#000, #000) 0 100% / var(--bl) var(--bl) no-repeat,
    linear-gradient(#000, #000) 100% 100% / var(--bl) var(--bl) no-repeat;
  mask:
    linear-gradient(#000, #000) 0 0 / var(--bl) var(--bl) no-repeat,
    linear-gradient(#000, #000) 100% 0 / var(--bl) var(--bl) no-repeat,
    linear-gradient(#000, #000) 0 100% / var(--bl) var(--bl) no-repeat,
    linear-gradient(#000, #000) 100% 100% / var(--bl) var(--bl) no-repeat;
  transition: border-color .35s var(--ease);
}
/* Al pasar el cursor, las esquinas se encienden */
.brk:hover::before, .brk:focus-within::before { border-color: var(--ember); }

/* --------------------------------------------------------------------------
   6 · BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px;
  background: var(--ember); color: var(--void);
  font-family: var(--f-body); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.005em; line-height: 1.2;
  border: 1px solid var(--ember);
  transition: background-color .3s var(--ease), color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.btn:hover { background: transparent; color: var(--ember); box-shadow: 0 0 34px var(--ember-dim); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--graphite); }
.btn--ghost:hover { background: transparent; color: var(--ember); border-color: var(--ember); }
.btn--sm { padding: 11px 20px; font-size: 0.86rem; }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   7 · NAVEGACION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--graphite); }

.nav__in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gut);
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  transition: height .35s var(--ease);
}
.nav.is-stuck .nav__in { height: 60px; }

.nav__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__mark { width: auto; height: 30px; transition: height .35s var(--ease); }
.nav__word { width: auto; height: 13px; opacity: .95; transition: height .35s var(--ease); }
.nav.is-stuck .nav__mark { height: 25px; }
.nav.is-stuck .nav__word { height: 11px; }

.nav__menu ul { display: flex; gap: 26px; }
.nav__menu a {
  font-size: 0.845rem; color: var(--ash);
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav__menu a:hover, .nav__menu a.is-here { color: var(--bone); }
.nav__n { font-family: var(--f-num); font-size: 0.68rem; color: var(--ember); opacity: .75; }

.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--graphite); color: inherit; cursor: pointer;
}
.nav__bars { display: grid; gap: 5px; justify-items: center; }
.nav__bars i { display: block; width: 17px; height: 1px; background: var(--bone); transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav__drawer { display: none; padding: 8px var(--gut) 28px; border-top: 1px solid var(--graphite); }
.nav__drawer ul { display: grid; gap: 2px; margin-bottom: 20px; }
.nav__drawer a { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--graphite); font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   8 · ESPINA DE DATOS
   El lado izquierdo del corchete, extruido a lo largo de toda la pagina.
   -------------------------------------------------------------------------- */
.spine {
  position: fixed; z-index: 90;
  left: 0; top: 0; bottom: 0; width: var(--spine-w);
  pointer-events: none;
}
.spine__rail {
  position: absolute; left: 34px; top: 16vh; bottom: 16vh;
  width: 1px; background: var(--graphite);
}
.spine__fill {
  position: absolute; inset: 0 auto auto 0; width: 1px; height: 0;
  background: linear-gradient(var(--ember-glow), var(--ember));
  box-shadow: 0 0 12px var(--ember-dim);
}
.spine__marks { position: absolute; inset: 16vh 0; }
.spine__marks li {
  position: absolute; left: 20px;
  transform: translateY(-50%);
  font-family: var(--f-num); font-size: 0.63rem; letter-spacing: .06em;
  /* El estado se distingue por color, no por opacidad: bajar la opacidad de
     --ash sobre --void lo tira a ~2.5:1 y reprueba AA. En firme da 6.12:1. */
  color: var(--ash);
  transition: color .4s var(--ease);
}
.spine__marks li b {
  display: block; font-weight: 500;
  padding: 5px 6px;
  background: var(--void);
}
/* Cada numero vive dentro de su propio medio corchete */
.spine__marks li::before {
  content: ''; position: absolute; inset: -1px auto -1px -5px; width: 5px;
  border: 1px solid currentColor; border-right: 0; opacity: 0;
  transition: opacity .4s var(--ease);
}
.spine__marks li.is-here { color: var(--ember); }
.spine__marks li.is-here::before { opacity: 1; }
.spine__marks li.is-past { color: #B9BEC4; }

/* --------------------------------------------------------------------------
   9 · ESTRUCTURA
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--mid { max-width: 940px; }
.sec { padding: var(--sec-y) 0; position: relative; }
/* El ancho lo fija cada titular sobre si mismo (ver .h-lg / .h-xl). Poner
   max-width en ch aqui lo resolveria contra la fuente de cuerpo y estrangularia
   los titulares. */
.sec__head { margin-bottom: clamp(48px, 6vw, 82px); }

@media (min-width: 1100px) {
  main, .foot { padding-left: var(--spine-w); }
}

/* --------------------------------------------------------------------------
   10 · HERO + SECUENCIA
   -------------------------------------------------------------------------- */
/* 520vh: seis tiempos de contenido necesitan aire. Da ~28 px de scroll por
   frame, que es donde el scrub deja de sentirse nervioso. */
.hero__track { height: 520vh; position: relative; }
.hero__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Velo para que el titular se lea sobre el caos del render */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, var(--void) 12%, color-mix(in srgb, var(--void) 84%, transparent) 40%, transparent 72%),
    linear-gradient(to top, var(--void) 3%, transparent 28%);
}

.hero__copy {
  position: absolute; z-index: 3;
  left: 0; right: 0; top: 50%;
  padding: 0 var(--gut);
  max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto;
}
@media (min-width: 1100px) { .hero__copy { padding-left: calc(var(--gut) + var(--spine-w)); } }

.hero__h1 { max-width: 17ch; }
.hero__sub { margin-top: 26px; max-width: 44ch; color: var(--ash); font-size: clamp(0.97rem, 1.15vw, 1.06rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero__hint {
  position: absolute; z-index: 3; left: 50%; bottom: 30px;
  font-family: var(--f-num); font-size: 0.66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ash);
}
.hero__hint span { position: relative; padding-bottom: 26px; display: block; }
.hero__hint span::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 18px;
  background: linear-gradient(var(--ash), transparent);
}

/* ── Cifras al costado ──────────────────────────────────────────────────
   Cada una entra a su lado cuando el render hace algo y se queda: al final
   del tramo las cuatro enmarcan el hub. --y fija su altura en pantalla. */
.beats { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.beat--l, .beat--r {
  position: absolute; top: var(--y);
  width: clamp(200px, 22vw, 310px);
  padding: 16px 18px 18px;
  /* Velo radial sin borde: da legibilidad sobre el render sin que parezca
     una tarjeta pegada encima. El unico marco es el corchete. */
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--void) 92%, transparent) 0%,
    color-mix(in srgb, var(--void) 70%, transparent) 52%,
    transparent 80%);
  text-shadow: 0 1px 14px var(--void);
  display: grid; gap: 7px;
}
/* Sobre imagen, el corchete gris se pierde: aqui va en el acento */
.beat--l::before, .beat--r::before { border-color: color-mix(in srgb, var(--ember) 52%, transparent); }
.beat--l { left: var(--gut); }
.beat--r { right: var(--gut); }
@media (min-width: 1100px) { .beat--l { left: calc(var(--gut) + var(--spine-w)); } }

.beat__v {
  font-size: clamp(1.02rem, 1.6vw, 1.42rem); font-weight: 500; color: var(--ember);
  letter-spacing: -0.02em; line-height: 1.1;
  display: flex; align-items: center; gap: .34em; flex-wrap: wrap;
}
.beat__l { font-size: 0.8rem; color: var(--ash); line-height: 1.45; }

/* ── El motor de los tiempos ────────────────────────────────────────────
   --hp lo escribe el rAF del canvas (0 al entrar al tramo, 1 al salir).
   --o = entrada x salida. Solo con .js: sin JavaScript nada se oculta. */
.js .beat {
  --o: min(
    clamp(0, calc((var(--hp, 0) - var(--a)) / (var(--b) - var(--a))), 1),
    clamp(0, calc((var(--d) - var(--hp, 0)) / (var(--d) - var(--c))), 1)
  );
  opacity: var(--o);
  transform: translateY(calc((1 - var(--o)) * 22px));
  will-change: opacity, transform;
}
.js .hero__copy { transform: translateY(calc(-50% + (1 - var(--o)) * 22px)); }
.js .hero__hint { transform: translateX(-50%); }
/* Sin JS el titular no puede quedar centrado por transform: lo compensamos */
html:not(.js) .hero__copy { transform: translateY(-50%); }

/* ── Hero apilado ───────────────────────────────────────────────────────
   Sin JavaScript no hay scrub, asi que el hero deja de ser una pila de
   capas superpuestas y pasa a flujo normal con todo visible. */
html:not(.js) .hero__track { height: auto; }
html:not(.js) .hero__sticky {
  position: relative; height: auto; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 40px);
}
html:not(.js) .hero__copy { position: relative; top: auto; transform: none; }
html:not(.js) .hero__hint { display: none; }
html:not(.js) .beats {
  position: relative; inset: auto; margin-top: clamp(40px, 6vh, 76px);
  padding: 0 var(--gut) clamp(28px, 5vh, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
}
html:not(.js) .beat--l, html:not(.js) .beat--r {
  position: static; width: auto; top: auto; left: auto; right: auto;
}

/* --------------------------------------------------------------------------
   11 · PROMESA
   -------------------------------------------------------------------------- */
.sec--promesa { text-align: left; }
.sec--promesa .h-xl { max-width: 16ch; }

/* --------------------------------------------------------------------------
   12 · TABLERO
   -------------------------------------------------------------------------- */
.dash { background: var(--carbon); padding: clamp(18px, 2.4vw, 30px); }
.dash__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--graphite);
}
.dash__title { font-family: var(--f-disp); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.dash__range { font-size: 0.73rem; color: var(--ash); letter-spacing: .05em; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--graphite); }
.kpi { background: var(--carbon); padding: 18px 18px 20px; display: grid; gap: 5px; }
.kpi__l { font-size: 0.76rem; color: var(--ash); }
.kpi__v { font-size: clamp(1.05rem, 1.75vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; }
.kpi__d { font-size: 0.74rem; color: var(--ember); }

.dash__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1px; background: var(--graphite); margin-top: 1px; }
.panel { background: var(--carbon); padding: 20px 18px 18px; margin: 0; }
.panel__t { font-size: 0.78rem; color: var(--ash); margin-bottom: 22px; letter-spacing: .02em; }

/* Barras: crecen desde cero, escalonadas */
.bars__row { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 16px); height: 212px; }
.bar-g { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; }
/* Por defecto la barra esta dibujada; solo .js la esconde para animarla */
.bar { display: block; flex: 1; height: var(--h); transform-origin: bottom; }
.bar--in { background: linear-gradient(var(--ember), color-mix(in srgb, var(--ember) 55%, transparent)); }
.bar--out { background: #333B45; }
.bars__x { display: flex; gap: clamp(6px, 1.4vw, 16px); margin-top: 10px; }
.bars__x span { flex: 1; text-align: center; font-size: 0.63rem; color: var(--ash); }
.panel__k { display: flex; gap: 20px; margin-top: 16px; font-size: 0.72rem; color: var(--ash); }
.panel__k span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 9px; height: 9px; flex: none; }
.sw--in, .sw--a { background: var(--ember); }
.sw--out { background: #333B45; }
.sw--b { background: color-mix(in srgb, var(--ember) 70%, var(--carbon)); }
.sw--c { background: color-mix(in srgb, var(--ember) 42%, var(--carbon)); }
.sw--d { background: #39404A; }

/* Dona: se dibuja */
.donut-w { position: relative; display: grid; place-items: center; }
.donut { width: min(190px, 62%); aspect-ratio: 1; transform: rotate(-90deg); }
.donut__bg { fill: none; stroke: var(--graphite); stroke-width: 11; }
.donut__s {
  fill: none; stroke-width: 11; stroke-linecap: butt;
  stroke-dasharray: var(--len) 400;   /* dibujada por defecto */
  stroke-dashoffset: var(--off);
}
.donut__s--a { stroke: var(--ember); }
.donut__s--b { stroke: color-mix(in srgb, var(--ember) 70%, var(--carbon)); }
.donut__s--c { stroke: color-mix(in srgb, var(--ember) 42%, var(--carbon)); }
.donut__s--d { stroke: #39404A; }
.donut__c {
  position: absolute; font-size: clamp(1rem, 1.5vw, 1.22rem); font-weight: 500;
  letter-spacing: -0.02em;
}
.legend { margin-top: 20px; display: grid; gap: 9px; font-size: 0.75rem; color: var(--ash); }
.legend li { display: flex; align-items: center; gap: 9px; }
.legend b { margin-left: auto; color: var(--bone); font-weight: 500; }

.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--graphite); margin-top: 1px; }
.mini li { background: var(--carbon); padding: 16px 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mini__l { font-size: 0.76rem; color: var(--ash); }
.mini__v { font-size: 1.02rem; font-weight: 500; }

/* Cuatro puntos numerados bajo el tablero */
.pts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: clamp(48px, 6vw, 78px); }
.pt { border-top: 1px solid var(--graphite); padding-top: 20px; }
.pt__n { font-size: 0.72rem; color: var(--ember); }
.pt__t { font-family: var(--f-disp); font-size: 1.06rem; font-weight: 700; margin: 12px 0 9px; letter-spacing: -0.012em; }
.pt__d { font-size: 0.9rem; color: var(--ash); line-height: 1.6; }

/* --------------------------------------------------------------------------
   13 · EL PROBLEMA — la unica seccion con el ritmo roto
   -------------------------------------------------------------------------- */
.sec--prob { background: linear-gradient(var(--void), #0B0C0E 45%, var(--void)); }
.prob__head { margin-bottom: clamp(44px, 6vw, 76px); }
.prob__head .h-lg { max-width: 24ch; }
.prob { display: grid; gap: 6px; }
.prob__i {
  padding: 20px 24px 22px;
  border-left: 1px solid var(--graphite);
  /* alineaciones irregulares: cada bloque entra distinto */
  margin-left: calc(var(--o) * clamp(0px, 3.6vw, 62px));
  max-width: calc(66ch - var(--o) * 4ch);
}
.prob__i h3 { font-family: var(--f-disp); font-size: clamp(1.1rem, 1.9vw, 1.42rem); font-weight: 700; margin: 0 0 7px; letter-spacing: -0.015em; }
.prob__i p { color: var(--ash); font-size: 0.95rem; }
.prob__i:nth-child(even) { border-left-color: var(--ember-dim); }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--graphite); margin-top: clamp(52px, 6vw, 84px); }
.vs__c { background: var(--void); padding: 26px 28px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.95rem; color: var(--ash); }
.vs__c b { font-weight: 600; font-size: 1.06rem; }
.vs__c--bad b { color: var(--ash); }
.vs__c--bad .arw path { stroke: var(--ash); }
.vs__c--good { background: var(--carbon); }
.vs__c--good b { color: var(--ember); }

/* --------------------------------------------------------------------------
   14 · LA SOLUCION — hub radial
   Contenedor de proporcion fija: las lineas del SVG y las tarjetas comparten
   el mismo sistema de coordenadas, asi no hace falta medir nada con JS.
   -------------------------------------------------------------------------- */
.hub { position: relative; aspect-ratio: 1000 / 620; margin: 0 auto; max-width: 1000px; }
.hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Dibujadas por defecto. El estado "sin dibujar" vive dentro del @supports,
   para que en un navegador sin linea de tiempo de scroll las conexiones se
   vean en vez de desaparecer para siempre. */
.hub__wires path {
  fill: none; stroke: var(--ember); stroke-width: 1.5;
  opacity: .85;
  vector-effect: non-scaling-stroke;
}

.hub__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 21%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--ember) 18%, var(--carbon)) 0%, var(--carbon) 72%);
  border: 1px solid var(--ember);
  box-shadow: 0 0 38px var(--ember-dim), inset 0 0 28px var(--ember-dim);
}
.hub__ring {
  position: absolute; inset: 11%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ember) 45%, transparent);
}
.hub__ct {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(0.72rem, 1.55vw, 1.05rem); line-height: 1.15;
  letter-spacing: -0.01em; padding: 0 6px;
}

.node { position: absolute; width: 25%; padding: 15px 17px; background: var(--void); }
.node h3 { font-family: var(--f-disp); font-size: clamp(0.8rem, 1.35vw, 1.02rem); font-weight: 700; margin: 0 0 6px; letter-spacing: -0.012em; }
.node p { font-size: clamp(0.68rem, 0.95vw, 0.83rem); color: var(--ash); line-height: 1.5; }
/* posiciones espejo de los extremos de las lineas del SVG */
.node--tl { left: 8.0%;  top: 4%; }
.node--tr { right: 8.0%; top: 4%; }
.node--ml { left: 0;     top: 50%; transform: translateY(-50%); }
.node--mr { right: 0;    top: 50%; transform: translateY(-50%); }
.node--bl { left: 8.0%;  bottom: 4%; }
.node--br { right: 8.0%; bottom: 4%; }

.closer {
  text-align: center; margin-top: clamp(48px, 6vw, 76px);
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(1.05rem, 1.85vw, 1.5rem); letter-spacing: -0.015em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   15 · SERVICIOS
   -------------------------------------------------------------------------- */
/* 196px deja entrar las cinco tarjetas en una sola fila a 1240px de ancho */
.svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.svc { padding: 26px 24px 28px; background: var(--carbon); }
.svc__n { font-size: 0.72rem; color: var(--ember); }
/* min-height: los titulos de una y de dos lineas dejan las listas alineadas */
.svc__t { font-family: var(--f-disp); font-size: clamp(1.05rem, 1.5vw, 1.24rem); font-weight: 700; margin: 13px 0 18px; letter-spacing: -0.015em; min-height: 2.4em; }
.svc__l { display: grid; gap: 9px; font-size: 0.855rem; color: var(--ash); }
.svc__l li { padding-left: 15px; position: relative; line-height: 1.5; }
.svc__l li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 1px; background: var(--ember); }

/* --------------------------------------------------------------------------
   16 · METODOLOGIA — linea horizontal que avanza con el scroll
   -------------------------------------------------------------------------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 30px); }
.steps__line { position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--graphite); }
.steps__line i { display: block; height: 100%; background: var(--ember); transform-origin: left center; box-shadow: 0 0 14px var(--ember-dim); }
.step { padding-top: 40px; position: relative; }
.step::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 11px; height: 11px;
  background: var(--void); border: 1px solid var(--ember); border-radius: 50%;
}
.step__n { font-size: 0.72rem; color: var(--ember); }
.step h3 { font-family: var(--f-disp); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; margin: 10px 0 9px; letter-spacing: -0.015em; }
.step p { font-size: 0.875rem; color: var(--ash); line-height: 1.6; }

/* --------------------------------------------------------------------------
   17 · BENEFICIOS
   -------------------------------------------------------------------------- */
.bens { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.ben { padding: 28px 26px 30px; }
.ben__n { font-size: 0.72rem; color: var(--ember); }
.ben h3 { font-family: var(--f-disp); font-size: clamp(1.05rem, 1.5vw, 1.22rem); font-weight: 700; margin: 13px 0 10px; letter-spacing: -0.015em; }
.ben p { font-size: 0.895rem; color: var(--ash); line-height: 1.6; }

/* --------------------------------------------------------------------------
   18 · DIAGNOSTICO — el corchete cierra
   -------------------------------------------------------------------------- */
.diag { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 60px); padding: clamp(28px, 4vw, 52px); }
.diag__l { display: grid; gap: 24px; align-content: start; }
.diag__l li { padding-left: 22px; position: relative; }
.diag__l li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 10px; height: 1px; background: var(--ember); }
.diag__l h3 { font-family: var(--f-disp); font-size: 1.04rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.012em; }
.diag__l p { font-size: 0.885rem; color: var(--ash); line-height: 1.55; }

.diag__p { background: var(--carbon); padding: clamp(24px, 3vw, 34px); align-self: start; }
.diag__price {
  font-family: var(--f-num); font-size: clamp(1.75rem, 3.1vw, 2.4rem);
  font-weight: 700; color: var(--ember); letter-spacing: -0.035em; line-height: 1;
  white-space: nowrap;   /* "$2,500" y "MXN" no se separan nunca */
}
.diag__price span { font-size: 0.36em; letter-spacing: .04em; color: var(--ash); margin-left: 8px; }
.diag__note { font-size: 0.83rem; color: var(--ash); margin-top: 12px; }
.diag__inc { display: grid; gap: 9px; margin: 24px 0 28px; padding-top: 22px; border-top: 1px solid var(--graphite); font-size: 0.85rem; color: var(--ash); }
.diag__inc li { padding-left: 16px; position: relative; }
.diag__inc li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 1px; background: var(--ember); }

/* --------------------------------------------------------------------------
   19 · CIERRE
   -------------------------------------------------------------------------- */
.sec--fin { padding-bottom: clamp(72px, 9vh, 120px); }
.h-fin { text-transform: none; font-stretch: 92%; letter-spacing: -0.03em; line-height: 1.04; }
.h-fin .l { display: block; }
.fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(48px, 6vw, 72px); }
.fin__i a { display: grid; gap: 6px; padding: 26px 24px 28px; }
.fin__t {
  font-family: var(--f-disp); font-size: 1.08rem; font-weight: 700;
  letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px;
}
.fin__d { font-size: 0.83rem; color: var(--ash); }
.fin__i:hover .fin__t { color: var(--ember); }
.arw--go { transition: transform .3s var(--ease); }
.fin__i:hover .arw--go, .fin__i:focus-within .arw--go { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   20 · FOOTER
   -------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--graphite); padding: clamp(52px, 7vh, 88px) 0 40px; }
.foot__top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; }
.foot__brand img { width: 108px; height: auto; }
.foot__tag { font-size: 0.68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ash); margin-top: 16px; }
.foot__nav ul { display: grid; gap: 11px; }
.foot__nav a { font-size: 0.9rem; color: var(--ash); }
.foot__nav a:hover { color: var(--ember); }
.foot__me { display: grid; gap: 7px; font-size: 0.88rem; color: var(--ash); }
.foot__me b { color: var(--bone); font-weight: 600; }
.foot__me a:hover { color: var(--ember); }
.foot__bot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ash); }
.foot__motto em { color: var(--ember); }

/* ==========================================================================
   21 · MOVIMIENTO
   Regla general: linea de tiempo nativa de CSS, 0 KB de JavaScript.
   JS solo para el scrub del canvas y los contadores.
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wire { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes close-brk { from { --bl: 20px; } to { --bl: 51%; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .u-rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: cover calc(4% + var(--d, 0) * 3.5%) cover calc(30% + var(--d, 0) * 3.5%);
    }

    .u-draw, .rule.u-draw {
      animation: draw-x linear both;
      animation-timeline: view();
      animation-range: cover 6% cover 26%;
    }

    /* Las conexiones del hub se dibujan una por una. El estado inicial
       (sin dibujar) solo existe aqui dentro. */
    .hub__wires { view-timeline-name: --hub; }
    .hub__wires path {
      stroke-dasharray: 1 1; stroke-dashoffset: 1;
      animation: wire linear both;
      animation-timeline: --hub;
      animation-range: cover calc(12% + var(--i) * 5%) cover calc(38% + var(--i) * 5%);
    }

    .node {
      animation: rise linear both;
      animation-timeline: --hub;
      animation-range: cover calc(14% + var(--i) * 5%) cover calc(40% + var(--i) * 5%);
    }

    /* La linea de metodologia avanza con el scroll */
    .steps__line i {
      transform: scaleX(0);
      animation: draw-x linear both;
      animation-timeline: view();
      animation-range: cover 18% cover 68%;
    }
    .step {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: cover calc(14% + var(--i) * 6%) cover calc(40% + var(--i) * 6%);
    }

    /* El corchete cierra: una sola vez en todo el sitio */
    .brk--closed::before {
      animation: close-brk linear both;
      animation-timeline: view();
      animation-range: cover 22% cover 58%;
    }
  }
}

/* El tablero se arma por piezas: lo dispara un IntersectionObserver (una vez).
   Todo cuelga de .js — si el JavaScript no carga, el tablero se ve entero en
   vez de quedar como una caja vacia. */
@media (prefers-reduced-motion: no-preference) {
  .js .dash .kpi, .js .dash .panel, .js .dash .mini {
    opacity: 0; transform: translateY(16px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--s, 0) * 110ms);
  }
  .dash.is-live .kpi, .dash.is-live .panel, .dash.is-live .mini { opacity: 1; transform: none; }

  .js .dash .bar { transform: scaleY(0); }
  .js .dash .donut__s { stroke-dasharray: 0 400; }
  .dash.is-live .bar { transition: transform .95s var(--ease); }
  .dash.is-live .bar-g:nth-child(1) .bar { transition-delay: .52s; }
  .dash.is-live .bar-g:nth-child(2) .bar { transition-delay: .60s; }
  .dash.is-live .bar-g:nth-child(3) .bar { transition-delay: .68s; }
  .dash.is-live .bar-g:nth-child(4) .bar { transition-delay: .76s; }
  .dash.is-live .bar-g:nth-child(5) .bar { transition-delay: .84s; }
  .dash.is-live .bar-g:nth-child(6) .bar { transition-delay: .92s; }
  .dash.is-live .bar { transform: scaleY(1); }

  .dash .donut__s { transition: stroke-dasharray 1.05s var(--ease); }
  .dash.is-live .donut__s--a { transition-delay: .70s; }
  .dash.is-live .donut__s--b { transition-delay: .86s; }
  .dash.is-live .donut__s--c { transition-delay: 1.00s; }
  .dash.is-live .donut__s--d { transition-delay: 1.12s; }
}
.dash.is-live .donut__s { stroke-dasharray: var(--len) 400; }

/* El bloque de `prefers-reduced-motion` vive al FINAL de la hoja (seccion 23).
   Tiene que ganarle al responsive: si va antes, las reglas de movil lo pisan
   por orden de cascada y el titular acaba encima de las cifras. */

/* ==========================================================================
   22 · RESPONSIVE — real desde 360px.
   En movil el hero se simplifica, no se encoge.
   ========================================================================== */
@media (max-width: 1100px) {
  .spine { display: none; }
}

/* 1100px, no 980: el nav completo pide ~966 px (logo + 6 enlaces + boton) y a
   1024 solo hay ~921 disponibles, asi que el logotipo chocaba con el primer
   enlace. Coincide ademas con el umbral donde aparece la espina. */
@media (max-width: 1100px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__toggle { display: grid; place-items: center; }
  .nav__drawer { display: block; }
  .nav__drawer[hidden] { display: none; }

  .dash__grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .pts { grid-template-columns: repeat(2, 1fr); }
  .fin { grid-template-columns: 1fr; }
  .diag { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .steps__line { display: none; }
  .foot__top { grid-template-columns: 1fr 1fr; }

  /* El hub se vuelve lista: las lineas radiales no tienen sentido apilado */
  .hub { aspect-ratio: auto; max-width: none; }
  .hub__wires { display: none; }
  /* Sigue siendo `relative`: el anillo interior va posicionado contra el
     nucleo. Con `static` se anclaria a .hub y se convertiria en una elipse
     del tamano de toda la seccion. */
  .hub__core {
    position: relative; left: auto; top: auto; transform: none;
    width: min(180px, 52%); margin: 0 auto clamp(28px, 5vw, 44px);
  }
  .hub__nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .node { position: static; width: auto; transform: none; }
  .node--ml, .node--mr { transform: none; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }

  /* Hero simplificado: no hay costados, asi que las cifras se apilan en una
     rejilla baja sobre el velo y entran una por una igual que en escritorio. */
  .hero__track { height: 400vh; }
  .beats {
    inset: auto 0 0; padding: 0 var(--gut) clamp(18px, 3vh, 30px);
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .beat--l, .beat--r {
    position: static; width: auto; top: auto; left: auto; right: auto;
    padding: 12px 13px 14px;
  }
  .beat__v { font-size: 1rem; }
  .beat__l { font-size: 0.72rem; }
  .hero__scrim {
    background:
      linear-gradient(to bottom, var(--void) 4%, color-mix(in srgb, var(--void) 76%, transparent) 46%, transparent 72%),
      linear-gradient(to top, var(--void) 4%, transparent 34%);
  }
  /* En movil el titular se ancla arriba, no al centro: hay que anular el
     -50% de .js .hero__copy, que gana por especificidad. */
  .hero__copy { position: absolute; inset: 0 0 auto; top: auto; bottom: auto; padding-top: calc(var(--nav-h) + 26px); }
  .js .hero__copy { transform: translateY(calc((1 - var(--o)) * 22px)); }
  .hero__h1 { max-width: none; font-size: clamp(1.7rem, 8.2vw, 2.5rem); }
  .hero__sub { font-size: 0.96rem; margin-top: 20px; }
  .hero__cta { flex-direction: column; align-items: stretch; margin-top: 30px; }
  .hero__cta .btn { width: 100%; }
  /* Se queda: al cargar es lo unico en pantalla y es lo que dice que hay
     que bajar. En movil eso importa mas, no menos. */
  .hero__hint { bottom: 22px; }

  .kpis { grid-template-columns: 1fr; }
  .mini { grid-template-columns: 1fr; }
  .pts { grid-template-columns: 1fr; gap: 26px; }
  .vs { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; gap: 32px; }
  .bars__row { height: 132px; }

  /* En movil el desorden del bloque "problema" se atenua: a 360px de ancho
     los sangrados grandes destrozan la lectura. */
  .prob__i { margin-left: calc(var(--o) * 4px); max-width: none; }
}

@media (max-width: 400px) {
  :root { --gut: 18px; }
  .beat--l, .beat--r { padding: 10px 11px 12px; }
  .beat__v { font-size: 0.92rem; }
  .beat__l { font-size: 0.68rem; line-height: 1.35; }
}

/* --------------------------------------------------------------------------
   Tableta en vertical (iPad y similares, 721-1100 px de ancho).
   Ahi corre la secuencia VERTICAL, asi que las cifras se apilan abajo como en
   telefono en vez de ir a los costados: al centro esta el render, no hueco.
   -------------------------------------------------------------------------- */
@media (orientation: portrait) and (min-width: 721px) and (max-width: 1100px) {
  .beats {
    inset: auto 0 0;
    padding: 0 var(--gut) clamp(24px, 4vh, 44px);
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .beat--l, .beat--r {
    position: static; width: auto; top: auto; left: auto; right: auto;
    padding: 15px 17px 17px;
  }
  .hero__copy {
    position: absolute; inset: 0 0 auto; top: auto; bottom: auto;
    padding-top: calc(var(--nav-h) + 44px);
  }
  .js .hero__copy { transform: translateY(calc((1 - var(--o)) * 22px)); }
  .hero__h1 { max-width: none; }
  /* El velo pasa a vertical: el render ya no deja los costados libres */
  .hero__scrim {
    background:
      linear-gradient(to bottom, var(--void) 6%, color-mix(in srgb, var(--void) 78%, transparent) 44%, transparent 70%),
      linear-gradient(to top, var(--void) 4%, transparent 32%);
  }
}

/* ==========================================================================
   23 · MOVIMIENTO REDUCIDO
   Va al final a proposito: es la anulacion ultima y tiene que ganarle tanto
   al bloque de movimiento como al responsive.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .dash .kpi, .dash .panel, .dash .mini { opacity: 1; transform: none; }
  .dash .bar { transform: scaleY(1); }
  .dash .donut__s { stroke-dasharray: var(--len) 400; }
  .hub__wires path { stroke-dashoffset: 0; }
  .steps__line i { transform: scaleX(1); }

  /* Sin scrub, titular y cifras conviven en pantalla: el hero deja de ser una
     pila de capas superpuestas y pasa a flujo normal, para que no se encimen. */
  .hero__hint { display: none; }
  .hero__track { height: auto; }
  .hero__sticky {
    position: relative; height: auto; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--nav-h) + 40px) 0 0;
  }
  .hero__copy {
    position: relative; inset: auto; top: auto;
    transform: none !important; opacity: 1 !important;
  }
  .beats {
    position: relative; inset: auto;
    margin-top: clamp(40px, 6vh, 76px);
    padding: 0 var(--gut) clamp(28px, 5vh, 56px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
  }
  .beat--l, .beat--r {
    position: static; width: auto; top: auto; left: auto; right: auto;
  }
  .beat { opacity: 1 !important; transform: none !important; }
}