/* ==========================================================
   THE INNER BLUEPRINT : design system
   Blueprint architecture language. Navy ground, gold accent.
   Mobile first. No decorative color outside the token set.
   ========================================================== */

:root {
  /* color tokens: derived from official logo files (brand-source/) */
  --ink-950: #0E1026;   /* page ground, from logo outline navy darkened */
  --ink-900: #171A38;   /* panels, cards */
  --ink-800: #212348;   /* logo outline navy, raised panels */
  --line:    #383D6B;   /* drafting lines, borders */
  --line-soft: rgba(122, 132, 205, 0.14); /* background grid */
  --paper:   #EFF1FA;   /* primary text, cool white */
  --muted:   #A3ABCF;   /* secondary text */
  --gold:    #F0B018;   /* official brand gold from logo: CTAs and key marks only */
  --gold-strong: #F7C23A;
  --blue-vivid: #0060E0; /* blueprint paper blue from podcast art: graphics only, never body UI */

  /* type tokens */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* scale */
  --text-xs: 0.6875rem;                          /* etiquetas mono */
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;                        /* 17px */
  --text-lg: clamp(1.15rem, 1.5vw, 1.4rem);
  --text-xl: clamp(1.35rem, 1.9vw, 1.75rem);
  --text-2xl: clamp(2rem, 3.6vw, 3.4rem);
  --text-3xl: clamp(2.6rem, 6.8vw, 5.6rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(4rem, 7vw, 6rem);
  --space-6: clamp(6.5rem, 11vw, 10rem);
  --space-7: clamp(4.5rem, 7vw, 6.5rem);         /* seccion comprimida */

  /* escalera de superficies: la profundidad en oscuro se hace subiendo de
     tono, no con sombras */
  --surf-1: #151833;
  --surf-2: #1C2042;
  --line-2: #4A5090;
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);

  --measure: 65ch;
  --radius: 2px; /* drafting language: near-square corners */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--paper);
  background-color: var(--ink-950);
  -webkit-font-smoothing: antialiased;
}

/* blueprint grid as fixed parallax layer (JS drives --scrolly) */
/* dos niveles de retícula, con máscara: sin máscara una trama uniforme se lee
   como papel tapiz y aplana todo lo que va encima */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0;
  top: -15%; bottom: -15%;
  z-index: -1;
  background-image:
    linear-gradient(rgba(122, 132, 205, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 132, 205, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(122, 132, 205, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 132, 205, 0.055) 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
  -webkit-mask-image: radial-gradient(130% 70% at 50% 0%, #000 22%, transparent 78%);
          mask-image: radial-gradient(130% 70% at 50% 0%, #000 22%, transparent 78%);
  transform: translateY(calc(var(--scrolly, 0) * -0.06px));
  will-change: transform;
  pointer-events: none;
}

/* grano fino sobre todo: rompe los planos de color, evita el bandeado de los
   degradados navy y hace que la pantalla se lea como emulsión, no como CSS */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  body::before { transform: none; }
}

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

/* solo para lectores de pantalla: nombra un grupo sin cambiar el diseno */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
  color: var(--paper);
}

/* EL SUELO DEL INTERLINEADO: 0.98, y no es un gusto, es una medida.
   Leidas del propio archivo de Archivo Bold: la g baja 0.188 em por debajo
   de la linea base y la h sube 0.723 em por encima. Suman 0.911 em, asi que
   CUALQUIER titular de dos lineas con interlineado menor que eso hace que la
   g de una linea choque con la t de la siguiente. Es lo que pasaba: habia
   titulares a 0.82 y 0.86, con solapes de hasta 7 px medidos.
   A 0.98 quedan 0.069 em de aire (6 px en un titular de 90) : sigue siendo
   compacto y editorial, pero nada se toca. Si alguien vuelve a bajarlo,
   este es el numero que no se puede cruzar.

   El tracking, en cambio, se cierra a medida que crece el cuerpo: a 90 px el
   espaciado por defecto separa las letras y el titular se deshace. */
h1 {
  font-size: var(--text-3xl);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 15ch;
  margin-left: -0.045em;        /* cuelga el lateral de la O fuera de la retícula */
}
h2 {
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
h3 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.015em; }

p {
  max-width: var(--measure);
  color: var(--muted);
  text-wrap: pretty;
}
.lede, .founder-card p:first-of-type { color: var(--paper); }

a { color: inherit; }

/* drafting annotation label: "SEC 01 / OVERVIEW" */
/* tercer registro tipografico: display, texto y tecnico. Un sistema numerado
   dice "esto es una metodologia documentada", no "esto es una opinion" */
.annot {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E7590;
  display: block;
  margin-bottom: var(--space-2);
}
.annot .annot-n {
  color: var(--gold);
  margin-right: 0.75rem;
}
.annot .annot-n::after {
  content: "/";
  color: #4A5090;
  margin-left: 0.75rem;
}
.annot::before {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--gold);
  margin-bottom: 0.9rem;
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--paper);
  max-width: 46ch;
}

.muted { color: var(--muted); }

/* ---------- layout ---------- */

.wrap {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-5);
  position: relative;
  isolation: isolate;
}

@media (min-width: 48rem) {
  .section { padding-block: var(--space-6); }
  /* una sección de cada tres respira menos: el ritmo constante es la firma
     visual de una plantilla */
  .section:nth-of-type(3n) { padding-block: var(--space-7); }
}

/* un solo foco cálido por sección, siempre descentrado y nunca detrás del
   texto: sin fuente de luz implícita el navy se lee como papel impreso */
.section::before {
  content: "";
  position: absolute;
  inset: -12% 0 auto;
  height: 60%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 52% at 22% 0%, rgba(240, 176, 24, 0.085), transparent 70%);
  filter: blur(56px);
}
.section:nth-of-type(even)::before {
  background: radial-gradient(56% 50% at 80% 0%, rgba(240, 176, 24, 0.06), transparent 70%);
}

/* el aire entre el título de sección y su contenido es lo que convierte al
   título en cabecera de capítulo en vez de en etiqueta */
.mt-3 { margin-top: clamp(2rem, 4vw, 3.25rem) !important; }

/* dimension-line divider between sections */
.dim-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dim-line::before,
.dim-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- corner registration marks ---------- */

.reg {
  position: relative;
}
/* el span de esquinas no participa del layout: solo ancla sus marcas */
.reg > .reg-b {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.reg::before,
.reg::after,
.reg > .reg-b::before,
.reg > .reg-b::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(240, 176, 24, 0.42);
  border-style: solid;
  border-width: 0;
}
.reg::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.reg::after  { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.reg > .reg-b::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.reg > .reg-b::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- las dos puertas ---------- */
/* Un cliente y un coach entran buscando cosas opuestas. En su propia franja,
   cada uno ve la suya en el primer vistazo y el menu principal se queda entero
   para el cliente. */
.doorbar {
  position: relative;
  z-index: 60;
  background: var(--ink-950);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.doorbar ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 1.6rem;
}
.doorbar a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #6E7590;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 220ms ease;
}
.doorbar a:hover,
.doorbar a:focus-visible { color: var(--paper); border-bottom-color: var(--gold); }
.doorbar a[aria-current="page"] { color: var(--gold); }
@media (max-width: 47.99rem) {
  .doorbar ul { justify-content: space-between; gap: 0.75rem; }
  .doorbar a { font-size: 0.625rem; letter-spacing: 0.1em; min-height: 44px; }
}
/* LA FILA DE LOS TRES CAMINOS (feedback de Tara). Sustituye a los dos
   enlaces en mono apagado. Son botones de verdad, compactos, y el primero es
   el solido: es el camino que mas quieren hacer crecer. En movil caben los
   tres en una fila a 390 px porque el cuerpo baja a 0.72 rem; la barra fija
   de abajo hace el resto del trabajo cuando el visitante hace scroll. */
.doorbar--cta { font-family: inherit; letter-spacing: normal; text-transform: none; padding-block: 0.55rem; }
.doorbar--cta ul { justify-content: flex-end; gap: 0.5rem; align-items: center; }
.doorbar--cta .btn {
  min-height: 34px;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  border-bottom: 0;
  border-radius: 2px;
}
.doorbar--cta .btn-solid { color: var(--ink-950); }
.doorbar--cta .btn-solid:hover, .doorbar--cta .btn-solid:focus-visible { color: var(--ink-950); }
.doorbar--cta .btn-line { color: var(--gold); }
.doorbar--cta .btn-line:hover, .doorbar--cta .btn-line:focus-visible { color: var(--ink-950); background: var(--gold); }
.doorbar--cta .btn.is-here { box-shadow: 0 0 0 2px rgba(240, 176, 24, 0.35); }
@media (max-width: 47.99rem) {
  .doorbar--cta ul { justify-content: stretch; gap: 0.4rem; }
  .doorbar--cta li { flex: 1 1 0; min-width: 0; }
  .doorbar--cta .btn { width: 100%; min-height: 40px; padding: 0.35rem 0.4rem; font-size: 0.72rem; letter-spacing: 0; white-space: nowrap; }
}

/* ---------- header / nav ---------- */


.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 24, 46, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 0.9rem;
}

/* The brand mark is the real logo: the fitted icon plus the drawn lettering.
   It is never retyped in a system font. */
.brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* one image, so the gap between symbol and lettering and their relative size
   are the client's own, not something re-tuned in CSS */
.brand .brand-lockup {
  height: 34px;
  width: auto;
  flex: none;
}
@media (min-width: 40rem) {
  .brand .brand-lockup { height: 42px; }
}
.site-footer .brand .brand-lockup { height: 46px; }
.footer-lockup img {
  width: min(280px, 70vw);
  height: auto;
  margin-bottom: 0.8rem;
}

.nav-toggle {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  padding: 0.5rem 0.9rem;
  min-height: 44px;      /* area tactil: el boton del menu es lo primero que se toca */
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.nav-links {
  display: none;
  list-style: none;
  gap: 1.4rem;
}
.nav-links a {
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--muted);
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--paper); border-bottom-color: var(--gold); }
.nav-links a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--gold); }

/* mobile menu open state */
.nav-open .nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.nav-open .nav-links a {
  display: block;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 60rem) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  transition: background-color 160ms ease, color 160ms ease;
}
.btn:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 3px; }

/* el barrido dorado: un cambio instantaneo de color se lee barato, una curva
   de 420ms se lee maquinada */
@media (prefers-reduced-motion: no-preference) {
  .btn-line { position: relative; overflow: hidden; z-index: 0; transition: color 0.35s ease; }
  .btn-line::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .btn-line:hover { background: transparent; color: var(--ink-950); }
  .btn-line:hover::before { transform: scaleX(1); }

  /* el subrayado se dibuja en vez de aparecer */
  main p a, .stack-2 a {
    text-decoration: none;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 1px;
    box-shadow: inset 0 -1px 0 rgba(240, 176, 24, 0.35);
    transition: background-size 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  }
  main p a:hover, .stack-2 a:hover { background-size: 100% 1px; color: var(--paper); }

  /* luz que sigue al puntero: el efecto caro mas barato que existe */
  .cta-card, .panel, .book-card, .founder-card, .step-list li, .form-aside {
    position: relative;
    overflow: hidden;
  }
  .cta-card::after, .panel::after, .book-card::after,
  .founder-card::after, .step-list li::after, .form-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
                rgba(240, 176, 24, 0.07), transparent 62%);
  }
  .cta-card:hover::after, .panel:hover::after, .book-card:hover::after,
  .founder-card:hover::after, .step-list li:hover::after, .form-aside:hover::after { opacity: 1; }
}

.btn-solid {
  background: var(--gold);
  color: var(--ink-950);
}
.btn-solid:hover { background: var(--gold-strong); }

.btn-line {
  background: transparent;
  color: var(--gold);
}
.btn-line:hover { background: rgba(198, 161, 75, 0.12); }

/* ---------- hero ---------- */

.hero {
  padding-block: var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .hero { padding-block: var(--space-6); }
}

.hero .tagline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.hero h1 { max-width: 20ch; margin-bottom: var(--space-3); }

.hero .lede { margin-bottom: 0; }

.hero .hero-grid { margin-bottom: var(--space-4); }

/* ---------- home: one continuous path stage ---------- */

.path-stage {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 34%, rgba(64, 72, 142, 0.2), transparent 34%),
    linear-gradient(180deg, var(--ink-950), #11142f 68%, var(--ink-950));
}
.path-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(93, 103, 171, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 103, 171, 0.18) 1px, transparent 1px);
  background-size: 4.25rem 4.25rem;
  mask-image: linear-gradient(90deg, transparent 22%, #000 62%);
}
.path-stage .wrap {
  width: min(calc(100% - 2rem), 90rem);
  max-width: 90rem;
}
.path-stage__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(26rem, 0.88fr);
  align-items: stretch;
  padding-block: clamp(2rem, 4.5vw, 4.75rem);
}
.path-stage__media {
  position: relative;
  min-height: clamp(34rem, 48vw, 42rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px rgba(255,255,255,0.05);
}
.path-stage__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 57%;
}
.path-stage__media figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  width: min(70%, 25rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.03;
}
.path-stage__media figcaption::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 0.8rem;
  background: var(--gold);
}
.path-stage__content {
  position: relative;
  z-index: 3;
  align-self: center;
  margin-left: -3rem;
  padding: clamp(2rem, 4vw, 4rem);
  border-block: 1px solid var(--line);
  background: rgba(23, 26, 56, 0.96);
  box-shadow: -1.25rem 1.25rem 0 rgba(8, 10, 29, 0.5);
}
.path-stage__eyebrow {
  margin-bottom: 0.65rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.path-stage__content h2 {
  max-width: 8ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(2.7rem, 5vw, 5rem);
  line-height: 0.98;
}
.path-routes {
  border-bottom: 1px solid var(--line);
}
.path-route {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--paper);
  text-decoration: none;
  background-image: linear-gradient(90deg, rgba(240, 176, 24, 0.09), transparent 72%);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: color 180ms ease, background-size 320ms ease, border-color 180ms ease;
}
.path-route:hover,
.path-route:focus-visible {
  border-color: var(--gold);
  background-size: 100% 100%;
}
.path-route__num {
  padding-top: 0.2rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}
/* El camino principal: el fondo dorado que los demas solo ensenan al pasar el
   raton, aqui esta encendido en reposo a media intensidad; el titulo sube un
   punto; y una etiqueta mono al lado del titulo lo nombra. Ninguna de las tres
   cosas es un grito. Juntas, se ve primero. */
.path-route--lead { background-size: 100% 100%; background-image: linear-gradient(90deg, rgba(240, 176, 24, 0.07), transparent 72%); border-top-color: rgba(240, 176, 24, 0.45); }
.path-route--lead:hover, .path-route--lead:focus-visible { background-image: linear-gradient(90deg, rgba(240, 176, 24, 0.13), transparent 72%); }
.path-route--lead .path-route__copy strong { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }
.path-route__tag {
  justify-self: start;
  margin-bottom: 0.1rem;
  padding: 0.18em 0.55em;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.path-route__copy { display: grid; gap: 0.35rem; }
.path-route__copy strong {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.05;
}
.path-route__copy > span {
  max-width: 42ch;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.path-route__arrow {
  display: grid;
  width: 2.1rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 1rem;
  transition: border-color 180ms ease, color 180ms ease;
}
.path-route:hover .path-route__arrow,
.path-route:focus-visible .path-route__arrow { border-color: var(--gold); color: var(--paper); }
.program-ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.program-ledger > div {
  min-width: 0;
  padding: 1rem 0.75rem 0 0;
}
.program-ledger > div + div {
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
}
/* LA CIFRA MANDA, Y ANTES NO MANDABA (feedback de Kaitlin).
   Ella leyo esta tira como "las etiquetas estan pero los numeros no". Los
   numeros estaban: medidos en el servidor, opacidad 1, color #EFF1FA. El
   problema es que pesaban lo mismo que cualquier otro texto claro de la
   pagina, asi que a 1.15 rem y en gris papel la fila entera se leia como un
   pie de foto y la cifra desaparecia dentro de su propia etiqueta.
   Una tira de datos funciona por contraste entre los dos renglones: el de
   arriba es el dato y tiene que gritar, el de abajo lo nombra y tiene que
   callarse. Aqui el de arriba pasa a dorado y sube de cuerpo; el de abajo ya
   estaba bien. Y el interlineado sube a 1.1 porque "Daily" lleva una y, y la
   y baja 0.188 em: con line-height 1 rozaba la etiqueta de debajo. */
.program-ledger dt {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.program-ledger dd {
  margin-top: 0.4rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- home: blueprint transformation chapter ---------- */

.home-overview {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 17% 55%, rgba(54, 63, 131, 0.22), transparent 28%),
    var(--ink-950);
}
/* LA ARMONIA DE ESTA SECCION, que no la tenia (feedback de Isnel).
   Medido antes de tocar nada, a 1440: el titular empezaba en y=200 y la
   columna de texto en y=507, o sea 307 px mas abajo sin ninguna razon; y la
   orbita terminaba en y=1370 cuando el texto acababa en y=1063, otros 307 px
   colgando. Con align-items:center cada columna se centraba por su cuenta y
   no habia una sola linea comun entre las dos: por eso "no habia armonia".

   Ahora hay DOS anclas de verdad:
     - arriba, el titular y el primer parrafo arrancan en la misma linea
     - la columna de texto se separa con su regla dorada a una distancia fija
   y la orbita se dimensiona para no descolgarse del bloque de texto. */
.overview-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
.overview-map {
  position: relative;
  min-width: 0;
}
/* 8ch partia el titular en cinco lineas y dejaba "chose" sola en una de
   ellas. A 11ch caben tres o cuatro lineas parejas y el bloque deja de
   parecer una columna rota. */
.overview-map h2 {
  max-width: 11ch;
  font-size: clamp(3.2rem, 6.4vw, 6rem);
  line-height: 0.98;
}
.blueprint-loop {
  position: relative;
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 1.35rem rgba(33, 35, 72, 0.2), 0 0 0 1.4rem rgba(86, 95, 161, 0.18);
}
.blueprint-loop::before,
.blueprint-loop::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.blueprint-loop::before {
  inset: 13%;
  border: 1px dashed rgba(163, 171, 207, 0.46);
  border-radius: 50%;
}
.blueprint-loop::after {
  top: 50%;
  left: -5%;
  width: 110%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.blueprint-loop__center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 38%;
  aspect-ratio: 1;
  place-content: center;
  transform: translate(-50%, -50%);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background: var(--ink-900);
  box-shadow: 0 0 3rem rgba(240, 176, 24, 0.1);
}
.blueprint-loop__center span {
  display: block;
  margin-top: 0.35rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.blueprint-loop ol { list-style: none; }
.blueprint-loop li {
  position: absolute;
  z-index: 3;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1;
}
.blueprint-loop li span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.blueprint-loop li:nth-child(1) { top: 0.75rem; left: 50%; transform: translateX(-50%); text-align: center; }
.blueprint-loop li:nth-child(2) { top: 50%; right: -0.6rem; transform: translateY(-50%); }
.blueprint-loop li:nth-child(3) { bottom: 0.75rem; left: 50%; transform: translateX(-50%); text-align: center; }
.blueprint-loop li:nth-child(4) { top: 50%; left: -0.6rem; transform: translateY(-50%); text-align: right; }
/* El texto arranca en la misma linea que el titular. El desplazamiento de
   arriba es OPTICO, no arbitrario: la primera linea del titular deja un hueco
   sobre las mayusculas (el interlineado por encima de la altura de caja), y
   sin compensarlo el parrafo parece empezar mas alto que el titular aunque
   los dos empiecen en el mismo pixel. */
.overview-copy {
  padding-top: 0.55rem;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--gold);
}
.overview-copy .lede { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }

@media (min-width: 60.01rem) {
  .path-stage__media { align-self: center; height: min(42rem, 75vh); min-height: 0; }
}
@media (max-width: 60rem) {
  .path-stage__grid { grid-template-columns: 1fr; padding-bottom: 0; }
  .path-stage__media { min-height: clamp(20rem, 68vw, 34rem); }
  .path-stage__media figcaption { bottom: 5rem; }
  .path-stage__content {
    width: min(calc(100% - 2rem), 46rem);
    margin: -3rem auto 0;
    padding: clamp(1.5rem, 5vw, 3rem);
    box-shadow: 0 -1rem 0 rgba(8, 10, 29, 0.42);
  }
  .overview-stage { grid-template-columns: 1fr; gap: clamp(3rem, 8vw, 5rem); }
  .overview-map { width: min(100%, 38rem); margin-inline: auto; }
  .overview-copy { width: min(100%, 42rem); margin-inline: auto; }
}
@media (max-width: 35rem) {
  .path-stage .wrap { width: 100%; }
  .path-stage__media { min-height: 72vw; border-inline: 0; }
  .path-stage__media figcaption { bottom: 1.25rem; width: min(82%, 20rem); }
  .path-stage__content { width: calc(100% - 1.5rem); margin-top: -1.5rem; }
  .path-route { grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: 0.7rem; }
  .path-route__copy > span { font-size: 0.79rem; }
  .program-ledger { grid-template-columns: repeat(2, 1fr); }
  .program-ledger > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .program-ledger > div:nth-child(n+3) { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
  .overview-copy { padding-left: 1.25rem; }
  .blueprint-loop { width: calc(100% - 1rem); margin-inline: auto; }
}

/* ---------- content blocks ---------- */

.split {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 52rem) {
  /* reticula real de 12 columnas: dos columnas iguales no cuestan nada y por
     eso no significan nada. El titulo ocupa 1-5 y queda fijo mientras el
     argumento pasa por 6-12, con desfase vertical para que se lea como pliego
     editorial y no como tabla */
  .split {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .split > :first-child {
    grid-column: 1 / 6;
    position: sticky;
    top: 7rem;
  }
  .split > :nth-child(2) {
    grid-column: 6 / 13;
    padding-top: clamp(0.5rem, 3vw, 2.75rem);
  }
}

.panel {
  border: 1px solid var(--line);
  background: var(--surf-1);
  box-shadow: var(--edge);
  padding: var(--space-3);
}

.step-list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  counter-reset: step;
}
.step-list li {
  border: 1px solid var(--line);
  background: var(--surf-1);
  box-shadow: var(--edge);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
}
.step-list .step-num {
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: var(--text-sm);
  border: 1px solid var(--line);
  padding: 0.2rem 0.5rem;
}
.step-list h3 { font-size: var(--text-base); margin-bottom: 0.3rem; }
.step-list p { font-size: var(--text-sm); color: var(--muted); }
/* on a wide screen the step reads across the card like a spec line:
   number, name, description. No card is left half empty. */
@media (min-width: 62rem) {
  .step-list li > div {
    display: grid;
    /* 13rem eran 208 px y "Masterminds", a 36 px, mide 216: la palabra se
       salia 8 px de su columna y ademas partia el titulo en tres lineas
       ("Masterminds" / "and" / "coaching"). La columna crece hasta caber la
       palabra mas larga, sin pasar de 17rem para que la descripcion de al
       lado no se estreche. */
    grid-template-columns: minmax(13rem, max-content) 1fr;
    gap: var(--space-3);
    align-items: baseline;
  }
  .step-list li > div h3 { max-width: 17rem; }
  .step-list li > div h3 { margin-bottom: 0; }
  .step-list li > div p { max-width: none; }
}

/* founders */
.founder-card {
  border: 1px solid var(--line);
  background: var(--surf-1);
  box-shadow: var(--edge);
  padding: var(--space-3);
}
/* real photography of the founders, graded into the navy so it belongs to the
   page instead of sitting in it */
.founder-photo {
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  margin-bottom: var(--space-3);
}
.founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  filter: saturate(0.86) contrast(1.06) brightness(0.97);
}
.founder-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,16,38,0.05), rgba(14,16,38,0.55));
}
/* the founders read as two full width plates, not two cramped columns:
   the portrait needs room or it stops being a portrait */
.founder-grid { display: grid; gap: var(--space-3); }
@media (min-width: 52rem) {
  .founder-card {
    display: grid;
    grid-template-columns: 16rem 1fr;
    column-gap: var(--space-4);
    align-items: start;
    align-content: start;      /* dos fichas con distinto numero de parrafos
                                  deben espaciar igual, no repartir el sobrante */
    padding: var(--space-4);
  }
  .founder-card > h3 { margin-block: 0.35rem 0.85rem; }
  .founder-card > p + p { margin-top: 0.9rem; }
  .founder-photo { margin-bottom: 0; grid-row: 1 / span 4; max-width: none; }
  .founder-card > .role,
  .founder-card > h3,
  .founder-card > p { grid-column: 2; }
  .founder-card > h3 { margin-top: 0.2rem; }
}
.founder-card .role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--space-1);
}
.founder-card p { font-size: var(--text-sm); color: var(--muted); }
.founder-card p + p { margin-top: 0.6rem; }

/* ---------- FAQ ---------- */

.faq-list { display: grid; gap: var(--space-1); max-width: var(--measure); }
.faq-list details {
  border: 1px solid var(--line);
  background: var(--ink-900);
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--gold);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq-list .faq-a {
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ---------- final CTA band ---------- */

.cta-band {
  border-top: 1px solid var(--line);
  background: var(--ink-900);
  text-align: center;
}
.cta-band .wrap { display: grid; justify-items: center; gap: var(--space-3); }
.cta-band p { margin-inline: auto; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
}
.footer-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 48rem) {
  /* el pie es ahora el mapa completo del sitio: cuatro columnas, no tres, o la
     ultima se cae debajo de la marca */
  .footer-grid { grid-template-columns: 1.7fr repeat(3, 1fr); align-items: start; }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.site-footer h3 {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-1);
}
.site-footer ul { list-style: none; display: grid; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--paper); }
/* footer links are a real touch target on a phone, not a 16px line of text */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (min-width: 48rem) {
  .site-footer ul { gap: 0.4rem; }
  .site-footer li a { min-height: 0; }
}
.footer-legal {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* linea de cota: una sola por pagina, bajo el titular */
.dim-rule {
  position: relative;
  height: 1px;
  background: var(--gold);
  margin-block: clamp(2rem, 4vw, 3rem) 0;
  max-width: 22rem;
}
.dim-rule::before,
.dim-rule::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--gold);
}
.dim-rule::before { left: 0; }
.dim-rule::after  { right: 0; }
.dim-rule span {
  position: absolute;
  left: 0;
  top: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E7590;
}

/* ---------- subpage hero ---------- */

.page-hero {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { max-width: 22ch; margin-bottom: var(--space-2); }
.page-hero .lede { max-width: 58ch; }

/* ---------- forms ---------- */

.form {
  display: grid;
  gap: var(--space-2);
  max-width: 40rem;
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
  padding: 0.8rem 0.9rem;
  width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.form .btn { justify-self: start; }
.form-note {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* form section: the application never sits alone in half a page */
.form-layout { display: grid; gap: var(--space-4); }
.form-layout .form { max-width: 40rem; }
.form-aside { border: 1px solid var(--line); background: var(--ink-900); padding: var(--space-3); }
.form-aside h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.form-aside ol { list-style: none; display: grid; gap: var(--space-2); }
.form-aside ol li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.6rem; align-items: start; }
.form-aside .n {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--gold);
  border: 1px solid var(--line); padding: 0.15rem 0; text-align: center;
}
.form-aside p { font-size: var(--text-sm); color: var(--muted); max-width: none; }
@media (min-width: 62rem) {
  .form-layout { grid-template-columns: 1fr 0.62fr; align-items: start; }
  .form-layout .form { max-width: none; }
  .form-aside { position: sticky; top: 6.5rem; }
}

.contact-details {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin-block: var(--space-2) 0;
}
.contact-details li { display: grid; gap: 0.15rem; }
.contact-details .k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E7590;
}
.contact-details a, .contact-details li > span:last-child {
  font-size: var(--text-sm);
  color: var(--paper);
  text-decoration: none;
}
.contact-details a:hover { color: var(--gold); }
.form-aside .mt-aside { margin-top: var(--space-3); }

.footer-contact {
  list-style: none;
  display: grid;
  gap: 0.35rem;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}
.footer-contact a { color: var(--muted); text-decoration: none; }
.footer-contact a:hover { color: var(--paper); }
@media (max-width: 47.99rem) {
  .footer-contact li { min-height: 44px; display: flex; align-items: center; }
  .footer-contact a { display: flex; align-items: center; min-height: 44px; width: 100%; }
  .contact-details a { display: flex; align-items: center; min-height: 44px; }
}

/* ---------- navigation: four doors instead of eight ---------- */

/* align-items solo en horizontal: en el menu movil la lista es una columna y
   centrarlo dejaba todos los enlaces flotando en el medio */
@media (min-width: 60rem) {
  .nav-links { align-items: center; }
}

/* en escritorio el logo ES el enlace a inicio, asi que el texto sobra */
@media (min-width: 60rem) {
  .nav-home { display: none; }
}

.nav-trigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid transparent;
}
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"],
.nav-trigger[data-current="page"] { color: var(--paper); border-bottom-color: var(--gold); }
.nav-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nav-caret {
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 220ms ease;
}
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(-135deg) translate(-3px, -3px); }

.has-menu { position: relative; }

/* panel de escritorio: cada puerta lleva su propia linea de explicacion, para
   que el menu decida por el usuario en vez de darle tres palabras sueltas */
.mega {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(52rem, 90vw);
  background: var(--surf-1);
  border: 1px solid var(--line);
  box-shadow: var(--edge), 0 30px 70px -40px rgba(0, 0, 0, 0.95);
  padding: var(--space-3);
}
.mega[hidden] { display: none; }
.mega-list { list-style: none; display: grid; gap: 0.75rem; }
@media (min-width: 60rem) {
  .mega-list { grid-template-columns: repeat(3, 1fr); }
}
.mega-list a {
  display: grid;
  gap: 0.4rem;
  padding: var(--space-2);
  text-decoration: none;
  border: 1px solid transparent;
  height: 100%;
  align-content: start;
}
.mega-list a:hover,
.mega-list a:focus-visible {
  background: var(--surf-2);
  border-color: rgba(240, 176, 24, 0.4);
  outline: none;
}
.mm-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--paper);
  letter-spacing: -0.01em;
}
.mm-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
  max-width: 30ch;
}

/* .nav-links a gana por especificidad al .btn-solid, asi que el boton se queda
   con el color apagado del menu. Se devuelve aqui de forma explicita. */
.nav-links .btn {
  padding: 0.6rem 1.15rem;
  font-size: var(--text-sm);
  border-bottom: 0;
}
.nav-links .btn-solid { color: var(--ink-950); }
.nav-links .btn-solid:hover { color: var(--ink-950); border-bottom: 0; }

/* "estas aqui" dentro del panel: marca lateral, no un subrayado a lo ancho */
.mega-list a[aria-current="page"] {
  border-color: var(--line);
  border-left: 2px solid var(--gold);
  background: var(--surf-2);
}

/* movil: el panel se convierte en acordeon dentro del menu desplegado */
@media (max-width: 59.99rem) {
  .nav-open .nav-links { padding-bottom: var(--space-3); }
  .nav-open .nav-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .mega {
    position: static;
    transform: none;
    width: auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.4rem 0 0.8rem 0.9rem;
  }
  /* .nav-open .nav-links a impone display:block y aplasta titulo y descripcion
     en la misma linea. Aqui se recupera la pila. */
  .nav-open .nav-links .mega-list a {
    display: grid;
    gap: 0.3rem;
    text-align: left;
    padding: 0.75rem 0 0.75rem 0.9rem;
    border-left: 1px solid var(--line);
    border-bottom: 0;
    min-height: 0;
  }
  .nav-open .nav-links .mega-list a[aria-current="page"] { border-left-color: var(--gold); }
  .mm-desc { max-width: none; }
  .mega-list a:hover, .mega-list a:focus-visible { background: transparent; border-color: var(--gold); }
  .nav-cta { margin-top: var(--space-2); }
  .nav-cta .btn { display: block; text-align: center; }
  .nav-open .nav-links > li > a { min-height: 44px; display: flex; align-items: center; }
}

/* ---------- section index: toda la pagina de un vistazo ---------- */

.page-index {
  border-block: 1px solid var(--line);
  background: rgba(21, 24, 51, 0.6);
  padding-block: 0.9rem;
}
.page-index .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.6rem;
}
.page-index__lead {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E7590;
  flex: none;
}
.page-index ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.page-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 34px;
  text-decoration: none;
  color: var(--paper);
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, color 220ms ease;
}
.page-index a:hover, .page-index a:focus-visible { border-bottom-color: var(--gold); }
.page-index a.is-here { border-bottom-color: var(--gold); }
.page-index a.is-here .pi-t { color: var(--gold); }
.page-index .pi-n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--gold);
}
@media (max-width: 47.99rem) {
  .page-index .wrap { gap: 0.6rem 1rem; }
  .page-index a { min-height: 40px; }
}

/* el ancla no debe quedar debajo de la cabecera fija */
.section[id] { scroll-margin-top: 8rem; }

/* ---------- coach directory ---------- */



.coach-grid {
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 40rem) { .coach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .coach-grid { grid-template-columns: repeat(3, 1fr); } }

/* Con un solo coach una rejilla de tres deja dos huecos y la ficha se ve
   abandonada. Sola se presenta como lamina ancha; en cuanto llegue la segunda,
   la rejilla vuelve por si misma. */
@media (min-width: 52rem) {
  .coach-card:only-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 20rem 1fr;
    column-gap: var(--space-4);
    align-items: start;
    align-content: start;
    padding: var(--space-4);
  }
  .coach-card:only-child .coach-photo { grid-row: 1 / span 4; margin-bottom: 0; }
  .coach-card:only-child .niche,
  .coach-card:only-child h3,
  .coach-card:only-child p,
  .coach-card:only-child .coach-links { grid-column: 2; }
  .coach-card:only-child h3 { margin-block: 0.2rem 0.7rem; }
  .coach-card:only-child .coach-links { margin-top: var(--space-2); }
}

.coach-card {
  border: 1px solid var(--line);
  background: var(--surf-1);
  box-shadow: var(--edge);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
/* El retrato manda en una ficha de directorio: es lo que hace que el visitante
   elija. Un sello de 96 px no deja ver a nadie. */
.coach-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 0.3rem;
}
.coach-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* la gradacion vive aqui, no dentro del JPG: si el cliente la quiere mas
     natural se cambia una linea y no hay que reprocesar fotos. Los coaches
     llegaran con fondos de todo tipo, asi que la ficha los iguala */
  filter: saturate(0.72) contrast(1.08) brightness(0.94);
}
.coach-photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--ink-800);
  mix-blend-mode: color;
  opacity: 0.22;   /* mas y la piel se vuelve azul: la persona debe seguir siendo persona */
}
.coach-photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(14,16,38,0.08), rgba(14,16,38,0.6));
}
/* La vida de la ficha de un coach vive AQUI, no en GSAP. El giro 3D que
   llevaban antes hacia temblar los retratos y se quito por feedback directo.
   En su lugar, el gesto clasico de directorio: al posar el puntero, el
   retrato hace un zoom lento dentro de su marco (el marco ya recorta con
   overflow:hidden) y la ficha se enciende con el borde dorado. Es CSS puro:
   ningun estilo en linea de GSAP puede pisarlo, y en tactil no hay brincos. */
.coach-photo img {
  transition: filter 400ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .coach-card:hover .coach-photo img,
  .coach-card:focus-within .coach-photo img {
    transform: scale(1.07);
    filter: saturate(0.95) contrast(1.05) brightness(1.02);
  }
  /* el borde dorado va en el MARCO del retrato, no en la tarjeta: en el
     directorio (.coach-atlas) la tarjeta es transparente y sin borde, asi que
     un borde ahi no existe. El marco si lo tiene siempre. */
  .coach-card .coach-photo { transition: border-color 320ms ease, box-shadow 320ms ease; }
  .coach-card:hover .coach-photo,
  .coach-card:focus-within .coach-photo {
    border-color: rgba(240, 176, 24, 0.6);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  }
  .coach-card:hover .coach-photo::after { opacity: 0.75; }
  .coach-photo::after { transition: opacity 400ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .coach-photo img { transition: filter 400ms ease; }
  .coach-card:hover .coach-photo img { transform: none; }
}
.coach-card h3 { font-size: var(--text-lg); }
.coach-card .niche {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.coach-card p { font-size: var(--text-sm); color: var(--muted); }
.coach-card .coach-links {
  margin-top: auto;
  display: flex;
  gap: 1rem;
  font-size: var(--text-sm);
}
.coach-card .coach-links a { color: var(--paper); }
@media (max-width: 47.99rem) {
  /* area tactil en movil */
  .coach-card .coach-links { gap: 1.4rem; }
  .coach-card .coach-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Cada ficha lleva su propio boton. En toda la categoria (EOS, Scaling Up,
   Proctor Gallagher) el directorio termina empujando a un formulario central:
   el visitante nunca llega a la persona que eligio, y el coach que paga la
   licencia no recibe el contacto. Aqui el boton va directo a esa persona. */
.coach-cta {
  margin-top: auto;
  padding-top: var(--space-2);
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}
.coach-cta .btn { padding: 0.7rem 1.3rem; }
.coach-cta .coach-links { margin-top: 0; }

/* ---------- resources ---------- */

.platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.platform-links a {
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
}
.platform-links a:hover,
.platform-links a:focus-visible { background: rgba(240, 176, 24, 0.12); }

.book-list { display: grid; gap: var(--space-2); }
@media (min-width: 48rem) { .book-list { grid-template-columns: repeat(3, 1fr); } }
.book-card {
  border: 1px solid var(--line);
  background: var(--surf-1);
  box-shadow: var(--edge);
  padding: var(--space-3);
}
.book-card .author {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.4rem;
}
.book-card h3 { font-size: var(--text-base); margin-bottom: 0.5rem; }
.book-card p { font-size: var(--text-sm); color: var(--muted); }

.podcast-row {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}
@media (min-width: 48rem) { .podcast-row { grid-template-columns: 268px 1fr; } }
/* The cover is the client's own podcast artwork on blueprint blue. It is never
   recoloured to match the page: it is framed like a plate, with a navy mount
   and registration marks, so the colour shift reads as artwork on display. */
.podcast-cover {
  padding: 14px;
  background: var(--ink-900);
  border: 1px solid var(--line);
}
.podcast-cover img { display: block; width: 100%; height: auto; }

/* ---------- path flow (upsell) ---------- */

.path-flow {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  counter-reset: pathstep;
}
@media (min-width: 48rem) { .path-flow { grid-template-columns: repeat(3, 1fr); } }
.path-flow li {
  border: 1px solid var(--line);
  background: var(--ink-900);
  padding: var(--space-3);
  position: relative;
}
.path-flow li.current { border-color: var(--gold); }
.path-flow .path-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.5rem;
}
.path-flow h3 { font-size: var(--text-base); margin-bottom: 0.4rem; }
.path-flow p { font-size: var(--text-sm); color: var(--muted); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* page-load sequence: hero children rise in, staggered */
  .hero .tagline, .hero h1, .hero .lede, .hero .cta-grid,
  .page-hero .annot, .page-hero h1, .page-hero .lede {
    opacity: 0;
    transform: translateY(16px);
    animation: rise-in 0.7s ease forwards;
  }
  .hero h1, .page-hero h1 { animation-delay: 0.12s; }
  .hero .lede, .page-hero .lede { animation-delay: 0.24s; }
  .hero .cta-grid { animation-delay: 0.36s; }

  /* Revelado al hacer scroll (la clase la pone main.js).
     RED DE SEGURIDAD EN CSS, y es lo importante de este bloque: cada elemento
     lleva una animacion que a los 2.2 segundos lo deja visible pase lo que
     pase. Sin ella, el sitio esconde su propio contenido y depende de que un
     observador de JavaScript no se equivoque nunca. Se equivoca: en un
     deslizamiento rapido en movil, al llegar por un ancla, o en un movil lento,
     un elemento puede entrar y salir del viewport dentro del mismo fotograma y
     no reportarse jamas. Perder una animacion no es nada. Dejar un parrafo
     invisible es perder el contenido. */
  .reveal {
    opacity: 0;
    /* 34 y no 16: con 16 px la cosa ya estaba casi en su sitio y el ojo
       registraba un parpadeo de opacidad en vez de una entrada. La curva es
       de salida larga, que es la que hace que algo "aterrice" en lugar de
       frenar en seco. */
    transform: translateY(34px);
    /* Curva con rebote corto: pasa de largo un 5 por ciento y vuelve. Es la
       diferencia entre "aparece" y "entra". */
    transition: opacity 0.5s cubic-bezier(0.34, 1.36, 0.64, 1),
                transform 0.58s cubic-bezier(0.34, 1.36, 0.64, 1);
    animation: reveal-failsafe 0.01s linear 2.2s forwards;
  }
  .reveal.in {
    opacity: 1;
    transform: none;
    animation: none;
  }
  @keyframes reveal-failsafe {
    to { opacity: 1; transform: none; clip-path: none; }
  }

  /* los titulares no se desvanecen: suben desde detras de una mascara, como si
     ya estuvieran ahi y la pagina los descubriera */
  h2.reveal, .page-hero h1, .hero h1 {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 102% 0);
    transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    animation: reveal-failsafe 0.01s linear 2.2s forwards;
  }
  h2.reveal.in { clip-path: inset(0 0 -12% 0); }
  .hero h1, .page-hero h1 { animation: none; clip-path: inset(0 0 -12% 0); }

  /* drafting line draws itself when revealed */
  .dim-line::before, .dim-line::after { transform: scaleX(0); transition: transform 0.9s ease; }
  .dim-line::before { transform-origin: left; }
  .dim-line::after { transform-origin: right; }
  .dim-line.in::before, .dim-line.in::after { transform: scaleX(1); }

  .cta-card, .panel, .coach-card, .book-card { transition: border-color 160ms ease, background-color 160ms ease; }
}

@keyframes rise-in {
  to { opacity: 1; transform: none; }
}

/* ---------- scroll progress (gold dimension line) ---------- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress .sp-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold);
}

/* header hides scrolling down, returns scrolling up */
.site-header { transition: transform 0.3s ease; }
.site-header.header-hidden { transform: translateY(-100%); }

/* ---------- hero layout with self-drawing blueprint motif ---------- */

.hero-grid { display: grid; gap: var(--space-4); }
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
}

.bp-motif {
  width: 100%;
  /* 480 y no 460: el lienzo ahora lleva el margen de la hoja de papel, asi que
     el simbolo ocupa el 85 por ciento del ancho en vez del 89. Subir el maximo
     lo devuelve al mismo tamano en pantalla que tenia antes. */
  max-width: 480px;
  margin-inline: auto;
  display: block;
}
/* CUIDADO: aqui solo va la animacion. La pintura (fill, stroke, linecap) vive
   en el propio SVG como atributos de presentacion. Una regla CSS gana siempre
   a un atributo de presentacion, asi que un stroke-linecap aqui pisaria el
   remate PLANO de los dos palitos superiores y les devolveria el redondeado,
   que asoma dentro de la abertura del corazon. */
.bp-motif .draw {
  stroke-dasharray: 120 240;
  stroke-dashoffset: 120;
  animation: bp-draw 1.1s ease forwards;
}
/* round end cap of the two upper ticks: their line is flat capped on purpose,
   so the tick can meet the heart lobe without poking into the opening */
.bp-motif .cap {
  fill: var(--gold);
  stroke: none;
  opacity: 0;
  animation: bp-cap 0.35s ease forwards;
}
@keyframes bp-cap {
  to { opacity: 1; }
}
.bp-motif .guide {
  fill: none;
  stroke: rgba(122, 132, 205, 0.35);
  stroke-width: 1;
  stroke-dasharray: 120 240;
  stroke-dashoffset: 120;
  animation: bp-draw 1.6s ease forwards;
}
@keyframes bp-draw {
  to { stroke-dashoffset: 10; }
}
@media (prefers-reduced-motion: no-preference) {
  .bp-motif { animation: bp-float 7s ease-in-out 3s infinite alternate; }
}
@keyframes bp-float {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-motif .draw, .bp-motif .guide { animation: none; stroke-dashoffset: 10; }
  .bp-motif .cap { animation: none; opacity: 1; }
}

/* ---------- editorial photography ---------- */

.media {
  position: relative;
  border: 1px solid var(--line);
  background: var(--ink-900);
  overflow: hidden;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Photography remains physically stable on hover. Emphasis comes from overlays and line color, not zoom. */
.media-45  { aspect-ratio: 4 / 5; }
.media-169 { aspect-ratio: 16 / 9; }
.media-wide { aspect-ratio: 2880 / 1234; }
.media figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.7rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: linear-gradient(transparent, rgba(14, 16, 38, 0.92));
}

/* ---------- fotografia humana editorial ----------
   Las caras son fotografia real con licencia. El tratamiento vive en CSS:
   overlay, encuadre y contraste. Los JPG no se retocan ni se recolorean. */
.human-scene {
  --scene-x: 50%;
  --scene-y: 50%;
  isolation: isolate;
  border-color: var(--edge);
}
.human-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 16, 38, 0.72) 0%, rgba(14, 16, 38, 0.16) 46%, rgba(14, 16, 38, 0.28) 100%),
    linear-gradient(0deg, rgba(14, 16, 38, 0.82) 0%, rgba(14, 16, 38, 0.04) 58%);
}
.human-scene img {
  object-position: var(--scene-x) var(--scene-y);
  filter: saturate(0.72) contrast(1.08) brightness(0.84);
}
.human-scene figcaption {
  right: auto;
  z-index: 2;
  width: min(82%, 38rem);
  padding: clamp(1.1rem, 2.4vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--paper);
  background: none;
}
.human-scene figcaption::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-bottom: 0.75rem;
  background: var(--gold);
}
.human-scene--community {
  --scene-y: 57%;
}
.human-scene--community img {
  filter: saturate(0.48) contrast(1.12) brightness(0.7);
}
.human-scene--collaboration { --scene-y: 52%; }
.human-scene--conversation { --scene-y: 49%; }
.human-scene--facilitation { --scene-y: 48%; }
.human-scene--study { --scene-x: 50%; --scene-y: 42%; }
.human-scene--podcast { --scene-y: 43%; }
.human-scene--contact { --scene-y: 47%; }

@media (max-width: 47.99rem) {
  .human-scene::before {
    background:
      linear-gradient(0deg, rgba(14, 16, 38, 0.86) 0%, rgba(14, 16, 38, 0.12) 62%),
      linear-gradient(90deg, rgba(14, 16, 38, 0.28), transparent 68%);
  }
  .human-scene figcaption {
    width: min(90%, 31rem);
    padding: 1.15rem 1.25rem;
    font-size: clamp(1.05rem, 5.3vw, 1.45rem);
  }
}

/* feature row: portrait photograph beside the prose.
   The image column is capped so the portrait never balloons on wide screens. */
.feature {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.feature-media { max-width: 27rem; width: 100%; }
@media (min-width: 52rem) {
  .feature {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .feature > .feature-media { grid-column: 1 / 6; max-width: none; }
  .feature > div { grid-column: 6 / 13; padding-top: clamp(1rem, 4vw, 3.5rem); }
  .feature.feature-rev > .feature-media { grid-column: 8 / 13; order: 2; }
  .feature.feature-rev > div { grid-column: 1 / 8; padding-top: clamp(1rem, 4vw, 3.5rem); }
}

/* showcase: full width landscape band, never cropped out of its native ratio */
.showcase { margin-block: var(--space-2); }
.showcase.portrait { max-width: 27rem; margin-inline: auto; }

/* a section that carries a photographic background */
.cta-band.has-photo { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.cta-band.has-photo .photo-bg { position: absolute; inset: 0; z-index: 0; }
.cta-band.has-photo .photo-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.cta-band.has-photo .photo-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(14, 16, 38, 0.45), rgba(14, 16, 38, 0.75));
}
.cta-band.has-photo .wrap { position: relative; z-index: 1; }

/* ---------- video embeds ---------- */

.video-facade {
  appearance: none;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: var(--surf-1);
  border: 1px solid var(--line);
  box-shadow: var(--edge);
  color: var(--paper);
  text-align: center;
  padding: var(--space-3);
}
.video-facade:hover { background: var(--surf-2); border-color: rgba(240, 176, 24, 0.4); }
.video-facade:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.video-facade__play {
  width: 74px;
  height: 74px;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  margin-bottom: 0.4rem;
  transition: background-color 300ms ease;
}
.video-facade__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 17px solid var(--gold);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 5px;
  transition: border-left-color 300ms ease;
}
.video-facade:hover .video-facade__play { background: var(--gold); }
.video-facade:hover .video-facade__play::after { border-left-color: var(--ink-950); }
.video-facade__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
}
.video-facade__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E7590;
}
.mt-1 { margin-top: var(--space-2); }



.video-embed {
  width: 100%;
}
.video-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  display: block;
}

/* ---------- utilities ---------- */

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.center { text-align: center; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--ink-950);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ==========================================================
   CAPA 2: EXPERIENCIA MOVIL Y COREOGRAFIA
   Feedback de David: en el telefono el sitio se siente basico.
   Todo lo de aqui esta escrito movil primero. Nada de esto puede
   dejar contenido invisible: las reglas que ocultan algo siempre
   van dentro de .has-motion, que solo se activa cuando el motor
   de animacion ya esta vivo y ha confirmado que puede terminar.
   ========================================================== */

/* ---------- ritmo movil ----------
   En un telefono de 812 px de alto, 64 px arriba y 64 px abajo mas un
   separador dejan un cuarto de pantalla vacia con una etiqueta diminuta en
   medio. En el escritorio eso es aire; en el movil es una pagina que parece
   sin terminar. */
@media (max-width: 47.99rem) {
  :root {
    --space-5: 3.25rem;
    --space-6: 3.25rem;
    --space-7: 3.25rem;
    /* mas contraste entre titular y texto: en movil la jerarquia es lo unico
       que separa un articulo de un volcado de parrafos */
    --text-2xl: 2.25rem;
    --text-3xl: 2.75rem;
    --text-xl: 1.35rem;
  }
  h1 { line-height: 0.98; }
  h2 { line-height: 1.06; max-width: 16ch; }
  .lede { font-size: 1.0625rem; line-height: 1.55; }
  /* el separador de cota ocupaba una franja entera para decir dos palabras */
  .dim-line { font-size: 0.625rem; letter-spacing: 0.16em; }
  .annot::before { width: 2.5rem; margin-bottom: 0.6rem; }
}

/* ---------- sangrado completo en movil ----------
   Una fotografia que toca los dos bordes de la pantalla es la senal de
   calidad mas barata que existe en un telefono, y es justo lo que no habia:
   todo vivia dentro del mismo carril de 20 px de margen. */
@media (max-width: 47.99rem) {
  .bleed-m {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: none;
    border-inline: 0;
  }
  .showcase.bleed-m .media,
  .bleed-m .media { border-inline: 0; }
  /* una banda de 2.33:1 en un telefono de 375 px mide 160 px de alto: es una
     rendija, no una fotografia. En vertical la banda se abre a 3:2 */
  .showcase.media-wide { aspect-ratio: 3 / 2; }
  .showcase figcaption { padding: 0.7rem 1.25rem; }
}

/* ---------- hero ---------- */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-3);
}
/* TRES CAMINOS, NO DOS (feedback de Kaitlin).
   "Become a Licensed Coach" es el objetivo numero uno del negocio y vivia solo
   en la barra de utilidades de arriba, que en el movil es la primera cosa que
   el pulgar deja atras. Ahora los tres caminos del programa estan en la
   portada, en el mismo sitio, antes del primer scroll.
   En movil van uno por linea a ancho completo: tres botones repartidos en una
   fila de 390 px se parten en pedazos de distinto tamano y el mas largo, que
   es justamente el que importa, queda de ultimo y a medias. Apilados se leen
   como una lista de opciones, que es lo que son. */
.hero-actions .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
@media (min-width: 30rem) {
  .hero-actions .btn { flex: 0 0 auto; }
}

.bp-stage { position: relative; }

/* la pista de scroll: una linea de cota que se llena, no una flecha animada */
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6E7590;
  margin-top: var(--space-3);
  max-width: none;
}
.scroll-cue__rail {
  position: relative;
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue__rail::after { animation: cue-run 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
}
@keyframes cue-run {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(250%); }
  100% { transform: translateX(250%); }
}

/* ---------- barra de accion fija en movil ----------
   Las dos puertas del negocio siempre a un pulgar de distancia. Aparece
   pasado el hero para no competir con la llamada principal. */
.thumbbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.thumbbar.is-up { transform: none; }
.thumbbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ink-900);
  color: var(--paper);
}
.thumbbar a.is-primary { background: var(--gold); color: var(--ink-950); font-weight: 500; }
/* TRES CAMINOS SIEMPRE A MANO (feedback de Tara): la barra deja de ser solo
   de movil. En movil sigue siendo la franja de abajo, ahora con tres celdas.
   En escritorio se convierte en un muelle flotante centrado abajo, con los
   tres botones en una pastilla. Aparece pasado el hero y se queda hasta el
   pie: cuando algo del contenido convence, el boton esta ahi. */
.thumbbar { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 48rem) {
  .thumbbar {
    left: 50%; right: auto; bottom: 1.25rem;
    transform: translate(-50%, 140%);
    grid-auto-flow: column; grid-template-columns: none;
    gap: 0.4rem;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(17, 20, 47, 0.92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  }
  .thumbbar.is-up { transform: translate(-50%, 0); }
  .thumbbar a {
    min-height: 40px;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--paper);
    transition: background-color 160ms ease, color 160ms ease;
  }
  .thumbbar a:hover, .thumbbar a:focus-visible { background: rgba(240, 176, 24, 0.14); color: var(--gold); }
  .thumbbar a.is-primary { background: var(--gold); color: var(--ink-950); }
  .thumbbar a.is-primary:hover { background: var(--gold); color: var(--ink-950); }
}
@media (prefers-reduced-motion: reduce) { .thumbbar { transition: none; } }

/* ---------- parallax ----------
   El desplazamiento lo escribe GSAP en la transformada. Aqui solo se prepara
   la caja para que la imagen sobresalga y tenga recorrido que mostrar. */
.px-frame { overflow: hidden; }
.has-motion .px-frame > img,
.has-motion .px-frame .media img { will-change: transform; }

/* ---------- titulares por lineas ----------
   Solo se ocultan cuando el motor esta vivo. Sin .has-motion el titular es
   texto normal y visible, que es exactamente lo que debe pasar si el
   JavaScript no carga. */
.has-motion .split-line { overflow: hidden; display: block; }
.has-motion .split-line > div { will-change: transform; }

/* ---------- contadores ---------- */
.count { font-variant-numeric: tabular-nums; }

/* ---------- el bloque fijado del metodo ----------
   Las tres fases dejan de ser tres tarjetas apiladas y pasan a ser una sola
   escena que avanza con el dedo. Sin JavaScript siguen siendo tres tarjetas
   apiladas y se leen igual de bien. */
.has-motion .pinstage { position: relative; }
.has-motion .pinstage__viewport {
  /* la cabecera fija se lleva su parte: sin descontarla la escena queda
     centrada respecto a la ventana y no respecto a lo que se ve */
  min-height: calc(100svh - 5rem);
  display: grid;
  align-content: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.has-motion .pinstage__track { position: relative; }
.has-motion .pinstage__track > li {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
}
.has-motion .pinstage__track > li:first-child { position: relative; opacity: 1; }
.pinstage__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* tres tramos iguales: es una barra de progreso */
  gap: 0.5rem;
  align-items: center;
}
.pinstage__rail span {
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.pinstage__rail span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--gold);
}
/* sin motor de animacion el carril no significa nada, asi que no se muestra */
.pinstage__rail { display: none; }
.has-motion .pinstage__rail { display: grid; }

/* ---------- densidad movil: tres arreglos concretos ----------
   Los tres nacen de mirar la portada en un telefono de 375 px y contar cuanto
   se ve de contenido real por pantalla. */
@media (max-width: 47.99rem) {
  /* 1. El indice de seccion ocupaba tres filas antes de que el lector tenga
     ningun motivo para navegar. Pasa a ser una sola fila que se arrastra con
     el dedo, que es como se navega en un telefono. */
  .page-index .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .page-index .wrap::-webkit-scrollbar { display: none; }
  .page-index ul { flex-wrap: nowrap; }
  .page-index li { flex: none; }
  .page-index__lead { display: none; }

  /* 2. Las tres cifras de credibilidad se leen de un vistazo cuando estan una
     al lado de otra. Apiladas son tres pantallazos de nada. */
  .cred-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .cred-cell { padding: var(--space-2) 0.5rem; }
  .cred-cell .cred-big { font-size: 1.0625rem; line-height: 1.15; }
  .cred-cell .cred-label { font-size: 0.5625rem; letter-spacing: 0.08em; }

  /* 3. La barra fija de acciones tapa el final de la pagina. El pie recupera
     ese alto para que la ultima linea legal no quede debajo. */
  .site-footer { padding-bottom: calc(var(--space-4) + 56px); }
}

/* el carril del indice se arrastra: hay que decirlo. Un degradado en el borde
   derecho es la unica senal que se entiende sin explicar nada */
@media (max-width: 47.99rem) {
  .page-index { position: relative; }
  .page-index::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 3rem;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ink-950));
  }
}

/* ---------- el motivo: un solo motor ----------
   Una animacion CSS gana en la cascada a un estilo en linea, asi que bp-float
   pisaba la transformada que GSAP escribe para el parallax y los dos planos se
   peleaban. Cuando el motor esta vivo, el motivo es suyo entero: el trazado y
   el desplazamiento salen de la misma linea de tiempo y van coordinados.
   Sin motor, las animaciones CSS de siempre siguen ahi intactas. */
.has-motion .bp-motif,
.has-motion .bp-motif .draw,
.has-motion .bp-motif .guide,
.has-motion .bp-motif .cap { animation: none !important; }

@media (max-width: 47.99rem) {
  /* 350 con el margen nuevo equivale a los 330 de antes de simbolo util */
  .bp-motif { max-width: 350px; }
}

/* ---------- la escena fijada en pantalla ancha ----------
   Apilada funciona en un telefono. En 1440 px una sola tarjeta baja y estrecha
   dentro de una pantalla entera se lee como un error, no como una escena. La
   composicion pasa a dos columnas: a la izquierda la tesis y el carril de
   progreso, que se quedan quietos; a la derecha la fase, que cambia. Es lo
   unico que se mueve, y por eso se mira. */
@media (min-width: 62rem) {
  .has-motion .pinstage__viewport {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: var(--space-2);
    align-content: center;
  }
  .has-motion .pinstage__viewport > .annot { grid-column: 1; grid-row: 1; }
  .has-motion .pinstage__viewport > h2 { grid-column: 1; grid-row: 2; }
  .has-motion .pinstage__viewport > .lede { grid-column: 1; grid-row: 3; }
  .has-motion .pinstage__viewport > .pinstage__rail {
    grid-column: 1; grid-row: 4; margin-top: var(--space-3);
  }
  .has-motion .pinstage__track {
    grid-column: 2; grid-row: 1 / 5; align-self: center; margin-top: 0;
  }
  /* la fase ocupa el sitio que le corresponde: es el sujeto de la escena */
  .has-motion .pinstage__track > li {
    padding: clamp(2rem, 3.2vw, 3.25rem);
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-content: center;
  }
  .has-motion .pinstage__track > li > div {
    display: block;
  }
  .has-motion .pinstage__track .step-num {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    border: 0;
    padding: 0;
    letter-spacing: -0.03em;
  }
  .has-motion .pinstage__track h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
  }
  .has-motion .pinstage__track p {
    font-size: var(--text-lg);
    line-height: 1.5;
    max-width: 38ch;
  }
}

/* ==========================================================
   MENU MOVIL: hoja completa
   El panel anterior era translucido y solo cubria hasta donde llegaban sus
   enlaces, asi que el titular del hero se leia POR DEBAJO del menu. Un menu
   que deja ver lo que hay detras no parece una capa, parece un fallo de
   pintado. Ahora es una hoja opaca de pantalla completa, con la tipografia
   de display y las dos puertas del negocio abajo.
   ========================================================== */
@media (max-width: 59.99rem) {
  .nav-open .nav-links {
    position: fixed;
    left: 0; right: 0;
    top: var(--header-h, 5.5rem);
    bottom: 0;
    background: var(--ink-950);
    border-bottom: 0;
    padding: var(--space-3) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0));
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0;
  }
  /* la retícula tambien dentro del menu: sigue siendo la misma superficie */
  .nav-open .nav-links::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(122, 132, 205, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(122, 132, 205, 0.07) 1px, transparent 1px);
    background-size: 48px 48px, 48px 48px;
  }
  .nav-open .nav-links > li { border-bottom: 1px solid var(--line-soft); }
  .nav-open .nav-links > li:last-child { border-bottom: 0; }

  .nav-open .nav-links > li > a,
  .nav-open .nav-links .nav-trigger {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--paper);
    padding-block: 1.05rem;
    border-bottom: 0;
    width: 100%;
    text-align: left;
  }
  .nav-open .nav-links .nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-open .nav-links > li > a[aria-current="page"] { color: var(--gold); }

  /* el submenu deja de ser una lista de enlaces sueltos: cada opcion lleva su
     linea de descripcion, que es lo que hace elegible una eleccion */
  .nav-open .mega { padding-bottom: var(--space-2); }
  .nav-open .mega-list { display: grid; gap: 0.6rem; list-style: none; }
  .nav-open .mega-list a {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    background: var(--surf-1);
    border: 1px solid var(--line);
    box-shadow: var(--edge);
    text-decoration: none;
  }
  .nav-open .mega-list .mm-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--text-base); color: var(--paper); letter-spacing: -0.01em;
  }
  .nav-open .mega-list .mm-desc {
    font-size: var(--text-sm); color: var(--muted); line-height: 1.45;
  }

  /* la llamada a la accion se despega del listado y cierra la hoja */
  .nav-open .nav-links .nav-cta { margin-top: var(--space-3); border-bottom: 0; }
  .nav-open .nav-links .nav-cta .btn {
    display: block;
    font-size: var(--text-base);
    padding-block: 1rem;
  }

  /* con el menu abierto la pagina de debajo no se mueve */
  .nav-locked, .nav-locked body { overflow: hidden; }
}

/* el boton dice lo que va a hacer */
.nav-open .nav-toggle { border-color: var(--gold); color: var(--gold); }

/* OJO, esto cuesta media hora si no se sabe: backdrop-filter en un ANTECESOR
   convierte a ese antecesor en el bloque contenedor de sus descendientes con
   position: fixed. Con el filtro puesto, la hoja del menu media su top y su
   bottom contra la cabecera, no contra la ventana, y se quedaba en 64 px de
   alto. Mientras el menu esta abierto la cabecera no necesita desenfoque:
   detras de ella no hay nada que se vea. */
.site-header.nav-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* la llamada a la accion del menu sigue siendo un boton, no un enlace mas:
   texto centrado y tinta oscura sobre el dorado */
@media (max-width: 59.99rem) {
  .nav-open .nav-links .nav-cta > a.btn {
    color: var(--ink-950);
    text-align: center;
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
  }
  /* las dos puertas del negocio cierran la hoja: es la decision que el
     visitante ha venido a tomar, y arriba solo cabe en letra diminuta */
  .nav-doors {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.5rem;
    list-style: none;
  }
  .nav-open .nav-links .nav-doors a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0.6rem 1rem;
    text-decoration: none;
    background: var(--surf-1);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
  }
  .nav-open .nav-links .nav-doors a::after { content: "\2192"; color: var(--gold); }
}
@media (min-width: 60rem) { .nav-doors { display: none; } }

/* ---------- la mesa de dibujo ----------
   El andamiaje esta oculto POR DEFECTO, no solo cuando hay motor de animacion.
   La secuencia lo enciende para construir y lo apaga entero al terminar, asi
   que el estado en reposo es el mismo por los dos caminos: la marca dorada
   limpia sobre el navy, sin una sola linea auxiliar detras. Eso es lo aprobado
   y eso es lo que se queda en pantalla.

   Se hace desde CSS y no desde JavaScript para que no haya un fotograma con
   todo visible antes de que arranque la secuencia. */
.bp-motif .bp-paper,
.bp-motif .bp-guides,
.bp-motif .g-cross,
.bp-motif .g-compass,
.bp-motif .g-dim,
.bp-motif .g-lobe { opacity: 0; }

/* el simbolo nunca lleva transicion de color ni filtro: el oro es exacto */
.bp-motif .bp-art { filter: none; }

/* ==========================================================
   LA PORTADA OCUPA LA PRIMERA PANTALLA
   Medido antes de tocar nada: en 1440x900 los botones del hero acababan en
   936 px, o sea 36 px POR DEBAJO del corte, y en 1280x800 a 89 px. El bloque
   medía 1250 px de alto metido en una ventana de 900, con 158 px de aire
   arriba y otros 158 abajo. Asi no hay nada que centrar: hay un bloque que
   desborda y empieza demasiado abajo.

   La portada pasa a medir una pantalla y su contenido se centra dentro. El
   aire deja de ser una cantidad fija y pasa a ser lo que sobre, que es lo
   unico que se comporta igual en un portatil de 13 y en un monitor de 27.
   ========================================================== */
@media (min-width: 48rem) {
  .hero { padding-block: var(--space-4) var(--space-5); }
}

@media (min-width: 60rem) {
  /* Aire minimo bajo la cabecera. Sin el, en una ventana baja (1280x800) el
     rotulo arranca pegado al borde del menu y la portada se lee apretada,
     que es el defecto contrario al que veniamos a arreglar. */
  .hero { padding-block: var(--space-3) var(--space-5); }
  /* 7.5rem es la altura de la cabecera mas la franja de las dos puertas.
     svh y no vh: en el movil vh cuenta la barra del navegador que luego se
     esconde, y la primera pantalla acaba midiendo mas que la pantalla. */
  .hero > .wrap > .hero-grid {
    /* 7.5rem = cabecera + franja de las dos puertas. 4.25rem = la pista de
       scroll, que tiene que caber DENTRO de la primera pantalla: una senal de
       "sigue bajando" cortada por el borde inferior dice lo contrario de lo
       que pretende. */
    min-height: calc(100vh - 7.5rem - 4.25rem - 3rem);
    min-height: calc(100svh - 7.5rem - 4.25rem - 3rem);
    align-content: center;
    margin-bottom: var(--space-2);
  }
  .hero .scroll-cue { margin-top: var(--space-2); }
}

/* ---------- coach sin retrato todavia ----------
   Un coach puede entrar en el directorio antes de que llegue su foto. La
   alternativa habitual, una silueta gris de archivo, se lee como un error.
   Esto es un monograma sobre la retícula de plano del sitio: ocupa el mismo
   sitio que el retrato, mantiene la fila alineada y se lee como una decision,
   no como una ausencia. En cuanto exista el archivo, el generador pone la foto
   y esto desaparece solo. */
.coach-photo--mark {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(122, 132, 205, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 132, 205, 0.10) 1px, transparent 1px),
    var(--ink-900);
  background-size: 28px 28px, 28px 28px, auto;
}
.coach-photo--mark::before,
.coach-photo--mark::after { content: none; }
.coach-monogram {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 7vw, 4rem);
  letter-spacing: -0.04em;
  color: var(--gold);
  line-height: 1;
}

/* ==========================================================
   SIN ROTULOS DE SECCION
   Se retiraron los "SEC 01 / MESSAGE" y las lineas de cota "GRID A / AUDIENCE".
   De aquel sistema lo unico que aportaba ritmo visual era la linea dorada corta
   sobre el titular, asi que esa se conserva, ahora como elemento de diseno puro
   dibujado desde el CSS y sin texto que la acompane.

   Se aplica solo al primer titular de cada seccion: sobre un H2 que va a mitad
   de una seccion la linea no ancla nada, solo repite.
   ========================================================== */
.section h2::before,
.cta-band h2::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--gold);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.cta-band h2::before { margin-inline: auto; }   /* la banda va centrada */

/* El titular ya no lleva un rotulo encima que lo separe del borde superior de
   la seccion, asi que recupera ese aire por su cuenta. */
.section > .wrap > h2:first-child,
.section > .wrap > div > h2:first-child { margin-top: 0; }

/* ==========================================================
   DISTRIBUCION: HUECOS Y TAMANO DE IMAGEN
   Feedback de David: "muchos espacios en blancos y otras imagenes muy grandes".
   Medido en las 8 paginas a 1440x900 antes de tocar nada:

     - entre dos secciones habia 317 px de navy vacio (160 arriba + 160 abajo)
     - las bandas fotograficas median hasta 970 px de alto en una ventana de
       900: la imagen era MAS ALTA que la pantalla, asi que no se veia una
       fotografia, se veia una pared

   Una banda tiene que ser una banda. Y el aire entre secciones tiene que
   separar, no interrumpir.
   ========================================================== */
:root {
  --space-6: clamp(4rem, 6.5vw, 6rem);     /* era hasta 160px */
  --space-7: clamp(3rem, 5vw, 4.5rem);     /* seccion comprimida */
}

/* La banda fotografica se recorta a una franja. La imagen sigue siendo la misma
   y no se deforma: el marco es mas bajo y object-fit: cover se encarga. */
@media (min-width: 48rem) {
  .showcase { max-height: 52vh; }
}
/* En vertical el problema es el contrario, asi que se deja como esta: una
   banda de 3:2 en un telefono mide 250 px y eso ya es una franja. */

/* ---------- el facade del video ----------
   Era una caja navy vacia de 683 px de alto con un boton de play en el centro:
   el mayor hueco muerto del sitio despues de la escena fijada. Ahora muestra
   una conversacion real con licencia, dentro del reproductor que ya existia.
   La portada azul del cliente se conserva intacta en el bloque superior. */
.video-facade { position: relative; overflow: hidden; isolation: isolate; }
.video-facade__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.82) contrast(1.06) brightness(0.82);
}
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(14, 16, 38, 0.10), rgba(14, 16, 38, 0.42)),
    linear-gradient(rgba(14, 16, 38, 0.18), rgba(14, 16, 38, 0.58));
}
.video-facade > :not(.video-facade__scene) { position: relative; z-index: 2; }

/* y la misma disciplina de altura que las bandas: un reproductor no ocupa una
   pantalla entera */
@media (min-width: 48rem) {
  .video-facade { max-height: 52vh; }
}


/* ---------- home index: integrated into the path stage ---------- */
.page-index[data-variant="embedded"] {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding-block: 0.7rem;
  background: transparent;
}
.page-index[data-variant="embedded"] .wrap {
  width: min(calc(100% - 2rem), 90rem);
  max-width: 90rem;
}
.page-index[data-variant="embedded"] .page-index__lead { color: var(--gold); }
.page-index[data-variant="embedded"] a {
  min-height: 30px;
  color: var(--muted);
  font-size: 0.75rem;
}
.page-index[data-variant="embedded"] a:hover,
.page-index[data-variant="embedded"] a:focus-visible,
.page-index[data-variant="embedded"] a.is-here { color: var(--paper); }
@media (max-width: 47.99rem) {
  .page-index[data-variant="embedded"]::after { background: linear-gradient(90deg, transparent, #11142f); }
  .page-index[data-variant="embedded"] .wrap { width: 100%; padding-inline: 1rem; }
}


/* ---------- about the program: method ledger ---------- */
.program-definition {
  background:
    radial-gradient(circle at 19% 48%, rgba(61, 70, 143, 0.2), transparent 26%),
    var(--ink-950);
}
.program-definition__mark {
  display: grid;
  width: min(100%, 18rem);
  margin-top: clamp(2rem, 5vw, 4.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.program-definition__mark strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 9rem);
  font-weight: 700;
  line-height: 0.78;
}
.program-definition__mark span {
  margin-top: 0.75rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.program-principles {
  position: relative;
  overflow: clip;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(33, 35, 72, 0.9), rgba(18, 21, 48, 0.92)),
    var(--ink-900);
}
.program-principles::after {
  content: "95";
  position: absolute;
  top: -0.22em;
  right: -0.05em;
  color: rgba(127, 139, 214, 0.055);
  font-family: var(--font-display);
  font-size: clamp(18rem, 42vw, 42rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.chapter-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.chapter-heading > p {
  grid-column: 1 / 4;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chapter-heading > h2 { grid-column: 4 / 12; font-size: clamp(2.7rem, 6vw, 5.75rem); line-height: 0.98; }
.principle-ledger {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line);
}
.principle-entry {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.8fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.principle-entry__mark {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 0.9;
}
.principle-entry--lead { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.principle-entry--lead .principle-entry__mark { font-size: clamp(5rem, 12vw, 10rem); line-height: 0.72; }
.principle-entry h3 { margin-bottom: 0.75rem; font-size: clamp(1.35rem, 2.6vw, 2.1rem); }
.principle-entry p { max-width: 60ch; color: var(--muted); }
.method-ledger {
  gap: 0;
  border-top: 1px solid var(--line);
}
.method-ledger > li {
  grid-template-columns: clamp(3.8rem, 8vw, 7rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 3rem) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}
.method-ledger > li .reg-b { display: none; }
.method-ledger .step-num {
  color: rgba(240, 176, 24, 0.9);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.25rem);
  font-weight: 700;
  line-height: 0.8;
}
.method-ledger h3 { margin-bottom: 0.65rem; font-size: clamp(1.35rem, 2.8vw, 2.25rem); }
.method-ledger p { max-width: 66ch; color: var(--muted); }
.program-outcome {
  overflow: clip;
  border-block: 1px solid var(--line);
  background: #11142f;
}
.outcome-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(28rem, 0.92fr);
  align-items: center;
}
.outcome-spread__media {
  position: relative;
  min-height: clamp(34rem, 48vw, 42rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.outcome-spread__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}
.outcome-spread__media figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  width: min(76%, 28rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.05;
}
.outcome-spread__media figcaption::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 0.8rem;
  background: var(--gold);
}
.outcome-spread__copy {
  position: relative;
  z-index: 3;
  margin-left: -4rem;
  padding: clamp(2rem, 4vw, 4rem);
  border-block: 1px solid var(--line);
  background: rgba(23, 26, 56, 0.97);
  box-shadow: -1rem 1rem 0 rgba(8, 10, 29, 0.42);
}
.outcome-spread__copy h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 0.98; }
.outcome-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}
.outcome-areas > div { padding-block: 1rem; }
.outcome-areas > div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.outcome-areas dt { color: var(--paper); font-family: var(--font-display); font-weight: 700; }
.outcome-areas dd { margin-top: 0.35rem; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
@media (max-width: 60rem) {
  .outcome-spread { grid-template-columns: 1fr; }
  .outcome-spread__media { min-height: clamp(22rem, 68vw, 34rem); }
  .outcome-spread__media figcaption { bottom: 4.5rem; }
  .outcome-spread__copy { width: min(calc(100% - 2rem), 46rem); margin: -3rem auto 0; }
}
@media (max-width: 47.99rem) {
  .chapter-heading { display: block; }
  .chapter-heading > p { margin-bottom: 0.75rem; }
  .principle-entry { grid-template-columns: 1fr; gap: 0.85rem; }
  .principle-entry--lead .principle-entry__mark { font-size: 5rem; }
  .outcome-spread__media figcaption { bottom: 2rem; }
  .outcome-spread__copy { width: calc(100% - 1.5rem); margin-top: -1.5rem; padding: 1.5rem; }
  .outcome-areas { grid-template-columns: 1fr; }
  .outcome-areas > div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}


/* ---------- creators: connected founder spread ---------- */
.creator-profile {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 45%, rgba(57, 66, 137, 0.24), transparent 28%),
    var(--ink-950);
}
.creator-profile--kait {
  background:
    radial-gradient(circle at 82% 45%, rgba(57, 66, 137, 0.24), transparent 28%),
    #11142f;
}
@media (min-width: 52rem) {
  .creator-profile .feature {
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
  }
  .creator-profile--shawn .creator-portrait { grid-column: 1 / 7; }
  .creator-profile--shawn .feature > div { grid-column: 6 / 13; }
  .creator-profile--kait .creator-portrait { grid-column: 7 / 13; grid-row: 1; }
  .creator-profile--kait .feature > div { grid-column: 1 / 8; grid-row: 1; }
}
.creator-portrait {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  border: 0;
  background: var(--ink-900);
  box-shadow: 1.25rem 1.25rem 0 rgba(33, 35, 72, 0.72);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 14% 100%, 0 100%);
}
.creator-profile--kait .creator-portrait {
  box-shadow: -1.25rem 1.25rem 0 rgba(33, 35, 72, 0.72);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}
.creator-profile .feature > div {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 4rem);
  border-block: 1px solid var(--line);
  background: rgba(14, 16, 38, 0.94);
}
.creator-profile h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 0.98; }
.creator-profile .lede { font-size: clamp(1.2rem, 2.2vw, 1.65rem); }
.creator-lineage {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(14, 16, 38, 0.98) 0 46%, rgba(20, 23, 52, 0.78) 72%, rgba(14, 16, 38, 0.94)),
    var(--ink-950);
}
.creator-lineage .feature-media {
  max-width: 24rem;
  justify-self: end;
  transform: rotate(1.25deg);
}
.creator-lineage h2 { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 0.98; }
.creator-manifesto {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 68% 48%, rgba(240, 176, 24, 0.08), transparent 26%),
    linear-gradient(135deg, #171a38, var(--ink-950) 64%);
}
.creator-manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(92, 102, 168, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 102, 168, 0.18) 1px, transparent 1px);
  background-size: 5rem 5rem;
}
.creator-manifesto .split { position: relative; z-index: 1; }
.creator-manifesto h2 { font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.98; }
.creator-manifesto__line {
  max-width: 24ch;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--gold);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
}
@media (max-width: 51.99rem) {
  .creator-profile .creator-portrait { width: min(100%, 32rem); margin-inline: auto; }
  .creator-profile .feature > div { margin-top: -2rem; margin-inline: 0.75rem; }
  .creator-profile--kait .feature > div { order: 2; }
  .creator-profile--kait .creator-portrait { order: 1; }
  .creator-lineage .feature-media { width: min(78%, 24rem); margin-inline: auto; transform: rotate(0.75deg); }
}
@media (max-width: 35rem) {
  .creator-profile .wrap { width: 100%; }
  .creator-profile .creator-portrait { width: 100%; }
  .creator-profile .feature > div { margin-inline: 0.75rem; padding: 1.5rem; }
  .creator-portrait { clip-path: polygon(0 0, 100% 0, 100% 94%, 12% 100%, 0 100%); }
}


/* ---------- licensed coach: facilitation field ---------- */
.license-fit {
  background:
    radial-gradient(circle at 18% 48%, rgba(61, 70, 143, 0.2), transparent 25%),
    var(--ink-950);
}
.license-field {
  position: relative;
  overflow: clip;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 76% 42%, rgba(240, 176, 24, 0.07), transparent 24%),
    #11142f;
}
.license-field__heading {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.license-field__heading > p {
  grid-column: 1 / 4;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.license-field__heading > h2 { grid-column: 4 / 12; font-size: clamp(2.7rem, 6vw, 5.7rem); line-height: 0.98; }
.license-field__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(27rem, 0.92fr);
  align-items: center;
}
.license-field__media {
  position: relative;
  min-height: clamp(34rem, 48vw, 42rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.license-field__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}
.license-field__media figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  width: min(74%, 26rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.05;
}
.license-field__media figcaption::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 0.8rem;
  background: var(--gold);
}
.license-benefits {
  position: relative;
  z-index: 3;
  margin-left: -4rem;
  padding: clamp(1.5rem, 3.5vw, 3.25rem);
  border-block: 1px solid var(--line);
  background: rgba(23, 26, 56, 0.97);
  box-shadow: -1rem 1rem 0 rgba(8, 10, 29, 0.42);
}
.license-benefits article {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--line);
}
.license-benefits article:last-child { border-bottom: 1px solid var(--line); }
.license-benefits article > span {
  grid-row: 1 / 3;
  padding-top: 0.2rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}
.license-benefits h3 { font-size: clamp(1.2rem, 2.3vw, 1.75rem); }
.license-benefits p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.license-timeline {
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
}
.license-timeline::before {
  content: "";
  position: absolute;
  top: clamp(3.3rem, 6vw, 5rem);
  left: 3%;
  right: 3%;
  height: 1px;
  background: var(--line);
}
.license-timeline > li {
  position: relative;
  z-index: 1;
  display: block;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.license-timeline > li + li { border-left: 1px solid var(--line); }
.license-timeline > li .reg-b { display: none; }
.license-timeline .step-num {
  display: grid;
  width: clamp(3.2rem, 6vw, 4.8rem);
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  background: var(--ink-950);
}
.license-timeline > li > div { display: block; }
.license-timeline h3 { margin-bottom: 0.65rem; }
.license-timeline p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.license-apply {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 20%, rgba(57, 66, 137, 0.22), transparent 24%),
    #11142f;
}
.license-apply .form-aside {
  border: 0;
  border-left: 1px solid var(--gold);
  background: transparent;
  box-shadow: none;
}
@media (max-width: 60rem) {
  .license-field__grid { grid-template-columns: 1fr; }
  .license-field__media { min-height: clamp(24rem, 72vw, 38rem); }
  .license-field__media figcaption { bottom: 4.5rem; }
  .license-benefits { width: min(calc(100% - 2rem), 46rem); margin: -3rem auto 0; }
  .license-timeline { grid-template-columns: repeat(2, 1fr); }
  .license-timeline > li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .license-timeline > li:nth-child(4) { border-top: 1px solid var(--line); }
  .license-timeline::before { display: none; }
}
@media (max-width: 47.99rem) {
  .license-field__heading { display: block; }
  .license-field__heading > p { margin-bottom: 0.75rem; }
  .license-field__media figcaption { bottom: 2rem; }
  .license-benefits { width: calc(100% - 1.5rem); margin-top: -1.5rem; padding: 1.25rem; }
  .license-timeline { grid-template-columns: 1fr; }
  .license-timeline > li + li { border-top: 1px solid var(--line); border-left: 0; }
  .license-timeline > li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 1rem; }
  .license-timeline .step-num { grid-row: 1 / 3; width: 3.25rem; margin: 0; }
  .license-timeline h3 { align-self: end; }
  .license-apply .form-aside { border-top: 1px solid var(--gold); border-left: 0; }
}


/* ---------- self study: daily practice spine ---------- */
.study-practice {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 22% 38%, rgba(240, 176, 24, 0.07), transparent 22%),
    #11142f;
}
.study-practice__grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
}
.study-practice__media {
  position: relative;
  min-height: clamp(34rem, 48vw, 42rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.study-practice__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.study-practice__media figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 2.25rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  width: min(76%, 22rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.05;
}
.study-practice__media figcaption::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 0.8rem;
  background: var(--gold);
}
.study-practice__content {
  position: relative;
  z-index: 3;
  margin-left: -2.5rem;
  padding: clamp(2rem, 4vw, 4rem);
  border-block: 1px solid var(--line);
  background: rgba(23, 26, 56, 0.97);
  box-shadow: -1rem 1rem 0 rgba(8, 10, 29, 0.42);
}
.study-practice__content > h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); font-size: clamp(3rem, 6vw, 5.8rem); line-height: 0.98; }
.study-elements { border-bottom: 1px solid var(--line); }
.study-elements article {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.3rem 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}
.study-elements article > span {
  grid-row: 1 / 3;
  padding-top: 0.18rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}
.study-elements h3 { font-size: clamp(1.15rem, 2vw, 1.55rem); }

/* EL DISTINTIVO DE LO QUE TODAVIA NO EXISTE. Peticion del cliente: AI Shawn
   se anuncia pero aun no esta disponible, y no puede leerse como algo que ya
   se entrega. El sello va PEGADO al nombre, no al final del parrafo, para que
   nadie lea el titulo sin la salvedad. Contorno dorado y no relleno: avisa
   sin competir con los botones, que son los que si llevan oro macizo. */
.soon {
  display: inline-block;
  margin-left: 0.55em;
  padding: 0.18em 0.6em;
  transform: translateY(-0.18em);
  border: 1px solid rgba(240, 176, 24, 0.55);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.study-elements p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.study-method {
  background:
    radial-gradient(circle at 17% 52%, rgba(57, 66, 137, 0.22), transparent 24%),
    var(--ink-950);
}
.study-method__mark {
  display: grid;
  width: min(100%, 18rem);
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.study-method__mark strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 9rem);
  font-weight: 700;
  line-height: 0.78;
}
.study-method__mark span {
  margin-top: 0.75rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.study-road {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(33, 35, 72, 0.86), rgba(14, 16, 38, 0.98)),
    var(--ink-950);
}
.study-road .path-flow {
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
}
.study-road .path-flow::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--line) 38%, var(--line));
}
.study-road .path-flow li {
  position: relative;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border: 0;
  background: transparent;
}
.study-road .path-flow li + li { border-left: 1px solid var(--line); }
.study-road .path-flow li::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: clamp(1rem, 3vw, 2.5rem);
  width: 0.75rem;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink-950);
}
.study-road .path-flow li.current { border-color: transparent; }
.study-road .path-flow li.current::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 0.35rem rgba(240, 176, 24, 0.1); }
.study-road .path-flow h3 { font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
@media (max-width: 60rem) {
  .study-practice__grid { grid-template-columns: 1fr; }
  .study-practice__media { width: min(100%, 38rem); min-height: clamp(32rem, 100vw, 40rem); margin-inline: auto; }
  .study-practice__media figcaption { bottom: 4rem; }
  .study-practice__content { width: min(calc(100% - 2rem), 46rem); margin: -2.5rem auto 0; }
}
@media (max-width: 47.99rem) {
  .study-practice__grid { width: 100%; }
  .study-practice__media { width: 100%; min-height: 128vw; border-inline: 0; }
  .study-practice__media figcaption { bottom: 2rem; }
  .study-practice__content { width: calc(100% - 1.5rem); margin-top: -1.5rem; padding: 1.5rem; }
  .study-road .path-flow { grid-template-columns: 1fr; }
  .study-road .path-flow::before { top: 0; bottom: 0; left: 1.35rem; right: auto; width: 1px; height: auto; background: linear-gradient(var(--gold), var(--line) 38%, var(--line)); }
  .study-road .path-flow li { padding: 1.5rem 1rem 1.5rem 3.25rem; }
  .study-road .path-flow li + li { border-top: 1px solid var(--line); border-left: 0; }
  .study-road .path-flow li::before { top: 1.75rem; left: 1rem; }
}


/* ---------- resources: broadcast and reading chapter ---------- */
.broadcast-stage {
  position: relative;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 28%, rgba(0, 96, 224, 0.13), transparent 24%),
    linear-gradient(145deg, #11142f, var(--ink-950) 68%);
}
.broadcast-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.broadcast-layout > h2 {
  grid-column: 1 / 8;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.98;
}
.broadcast-intro {
  grid-column: 1 / 7;
  display: grid;
  grid-template-columns: minmax(9rem, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.broadcast-intro .podcast-cover {
  width: 100%;
  max-width: none;
  transform: rotate(-1.5deg);
  box-shadow: 1rem 1rem 0 rgba(0, 96, 224, 0.13);
}
.broadcast-intro .platform-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.broadcast-player {
  grid-column: 7 / 13;
  align-self: end;
  margin-top: clamp(2rem, 7vw, 7rem);
}
.broadcast-player .video-facade { min-height: clamp(22rem, 38vw, 34rem); }
.resource-notes {
  background:
    radial-gradient(circle at 18% 52%, rgba(57, 66, 137, 0.21), transparent 24%),
    var(--ink-950);
}
.resource-notes h2 { font-size: clamp(3rem, 6vw, 5.6rem); line-height: 0.98; }
.reading-stage {
  overflow: clip;
  border-block: 1px solid var(--line);
  background: #11142f;
}
.reading-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.reading-stage__media {
  position: sticky;
  top: 7rem;
  min-height: clamp(32rem, 44vw, 40rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.reading-stage__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(0.72) contrast(1.08) brightness(0.78);
}
.reading-stage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 16, 38, 0.86), transparent 64%);
}
.reading-stage__media figcaption {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.05;
}
.reading-stage__media figcaption::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 0.8rem;
  background: var(--gold);
}
.reading-stage__content h2 { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.98; }
.reading-list {
  display: block;
  border-bottom: 1px solid var(--line);
}
.reading-list .book-card {
  display: grid;
  grid-template-columns: minmax(7rem, 0.55fr) minmax(12rem, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}
.reading-list .book-card .reg-b { display: none; }
.reading-list .author {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reading-list h3 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); }
.reading-list p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
@media (max-width: 64rem) {
  .broadcast-layout > h2 { grid-column: 1 / 13; }
  .broadcast-intro { grid-column: 1 / 13; }
  .broadcast-player { grid-column: 1 / 13; margin-top: 1rem; }
}
@media (max-width: 52rem) {
  .reading-layout { grid-template-columns: 1fr; }
  .reading-stage__media { position: relative; top: auto; width: min(100%, 34rem); min-height: clamp(28rem, 100vw, 38rem); margin-inline: auto; }
}
@media (max-width: 47.99rem) {
  .broadcast-layout { display: block; }
  .broadcast-intro { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .broadcast-intro .stack-2 > p:not(.lede) { display: none; }
  .broadcast-player .video-facade { min-height: 18rem; }
  .reading-stage__content h2 { margin-top: 0.5rem; }
  .reading-list .book-card { grid-template-columns: 1fr; gap: 0.55rem; }
}
@media (max-width: 30rem) {
  .broadcast-intro { grid-template-columns: 1fr; }
  .broadcast-intro .podcast-cover { width: min(68%, 13rem); }
}


/* ---------- contact: conversation desk ---------- */
.contact-desk {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 30%, rgba(57, 66, 137, 0.24), transparent 24%),
    #11142f;
}
.contact-desk > .wrap > h2 { max-width: 12ch; font-size: clamp(3rem, 7vw, 6.3rem); line-height: 0.98; }
.contact-desk__grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-desk__grid > div:first-child {
  position: sticky;
  top: 7rem;
}
.contact-desk__aside {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ink-900);
  box-shadow: 1rem 1rem 0 rgba(8, 10, 29, 0.44);
}
.contact-desk__media {
  position: relative;
  min-height: clamp(22rem, 34vw, 31rem);
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.contact-desk__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 47%;
}
.contact-desk__media figcaption {
  position: absolute;
  z-index: 2;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.05;
}
.contact-desk__media figcaption::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 0.8rem;
  background: var(--gold);
}
.contact-desk__details { padding: clamp(1.5rem, 3.5vw, 3rem); }
.contact-desk__details .contact-details { border-bottom: 1px solid var(--line); }
.contact-desk__details ol li { border-top: 1px solid var(--line); }
.contact-call {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 25% 50%, rgba(240, 176, 24, 0.07), transparent 22%),
    var(--ink-950);
}
.contact-call h2 { font-size: clamp(3rem, 7vw, 6.2rem); line-height: 0.98; }
.contact-call .lede { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
@media (max-width: 60rem) {
  .contact-desk__grid { grid-template-columns: 1fr; }
  .contact-desk__grid > div:first-child { position: relative; top: auto; }
  .contact-desk__aside { width: min(100%, 42rem); margin-inline: auto; }
}
@media (max-width: 35rem) {
  .contact-desk > .wrap { width: 100%; }
  .contact-desk > .wrap > h2,
  .contact-desk__grid > div:first-child { margin-inline: 1rem; }
  .contact-desk__aside { border-inline: 0; box-shadow: none; }
}


/* ---------- find a coach: relationship stage and coach atlas ---------- */
.coach-intro-stage {
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 42%, rgba(57, 66, 137, 0.23), transparent 24%),
    #11142f;
}
.coach-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
.coach-intro-copy {
  position: relative;
  z-index: 3;
  margin-right: -3rem;
  padding: clamp(2rem, 4vw, 4rem);
  border-block: 1px solid var(--line);
  background: rgba(23, 26, 56, 0.97);
  box-shadow: 1rem 1rem 0 rgba(8, 10, 29, 0.42);
}
.coach-intro-copy h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 0.98; }
.coach-intro-media {
  position: relative;
  min-height: clamp(34rem, 48vw, 42rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.coach-intro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 49%;
}
.coach-intro-media figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
}
.coach-intro-media figcaption::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-bottom: 0.8rem;
  background: var(--gold);
}
.coach-process {
  background:
    radial-gradient(circle at 16% 50%, rgba(57, 66, 137, 0.2), transparent 22%),
    var(--ink-950);
}
.coach-process__steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
}
.coach-process__steps > li {
  display: block;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.coach-process__steps > li + li { border-left: 1px solid var(--line); }
.coach-process__steps .reg-b { display: none; }
.coach-process__steps .step-num {
  display: block;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.72;
}
.coach-process__steps h3 { margin-bottom: 0.65rem; font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.coach-process__steps p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.coach-atlas {
  position: relative;
  overflow: clip;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 18%, rgba(240, 176, 24, 0.055), transparent 22%),
    linear-gradient(150deg, #11142f, var(--ink-950) 64%);
}
.coach-atlas > .wrap > h2 { font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 0.98; }
.coach-atlas > .wrap > .lede { max-width: 58ch; margin-left: auto; }
.coach-atlas .coach-grid {
  counter-reset: coach;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
/* FOTOS MAS PEQUENAS (feedback de Tara: "images are way too big"). Antes
   cada tarjeta ocupaba la mitad del ancho (6 de 12 columnas) con un
   escalonado enorme, y a 1440 px cada retrato media 600 px de alto: la
   pagina era un desfile de caras gigantes. Ahora tres por fila en escritorio
   (4 de 12), dos en tableta, una en movil, con un escalonado corto que
   conserva el ritmo sin exagerar. El srcset ya estaba pensado para 21 rem de
   ancho, asi que las fotos no pierden nitidez: por fin se sirven al tamano
   para el que se recortaron. */
.coach-atlas .coach-card {
  counter-increment: coach;
  position: relative;
  grid-column: span 4;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.coach-atlas .coach-grid { gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.coach-atlas .coach-card:nth-child(3n+2) { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 63.99rem) {
  .coach-atlas .coach-card { grid-column: span 6; }
  .coach-atlas .coach-card:nth-child(3n+2) { margin-top: 0; }
  .coach-atlas .coach-card:nth-child(even) { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (max-width: 39.99rem) {
  .coach-atlas .coach-card, .coach-atlas .coach-card:nth-child(even) { grid-column: span 12; margin-top: 0; }
}
.coach-atlas .coach-card::before {
  content: counter(coach, decimal-leading-zero);
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: grid;
  width: clamp(3rem, 5vw, 4.5rem);
  aspect-ratio: 1;
  place-items: center;
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  background: var(--gold);
}
.coach-atlas .coach-card .reg-b { display: none; }
.coach-atlas .coach-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-900);
  box-shadow: 1rem 1rem 0 rgba(33, 35, 72, 0.62);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 10% 100%, 0 100%);
}
.coach-atlas .coach-card:nth-child(even) .coach-photo {
  box-shadow: -1rem 1rem 0 rgba(33, 35, 72, 0.62);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%);
}
.coach-atlas .coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-atlas .coach-photo--mark { display: grid; place-items: center; }
.coach-atlas .coach-card .niche {
  display: block;
  max-width: 46ch;
  margin-bottom: 0.7rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.coach-atlas .coach-card h3 { margin-bottom: 1rem; font-size: clamp(2.1rem, 4.5vw, 4rem); line-height: 1.1; }
.coach-atlas .coach-card > p { max-width: 62ch; color: var(--muted); line-height: 1.65; }
.coach-atlas .coach-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.coach-atlas .coach-links { margin-left: auto; }
.coach-fit {
  background:
    radial-gradient(circle at 18% 50%, rgba(57, 66, 137, 0.2), transparent 24%),
    var(--ink-950);
}
@media (max-width: 60rem) {
  .coach-intro-layout { grid-template-columns: 1fr; }
  .coach-intro-copy { width: min(calc(100% - 2rem), 46rem); margin: 0 auto -3rem; }
  .coach-intro-media { min-height: clamp(24rem, 72vw, 38rem); }
  .coach-intro-media figcaption { bottom: 4.5rem; }
}
@media (max-width: 47.99rem) {
  .coach-intro-copy { width: calc(100% - 1.5rem); margin-bottom: -1.5rem; padding: 1.5rem; }
  .coach-intro-media { min-height: 74vw; }
  .coach-intro-media figcaption { bottom: 1.5rem; }
  .coach-process__steps { grid-template-columns: 1fr; }
  .coach-process__steps > li + li { border-top: 1px solid var(--line); border-left: 0; }
  .coach-atlas .coach-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; }
  .coach-atlas .coach-card { grid-column: 1; }
  .coach-atlas .coach-card:nth-child(even) { margin-top: 0; }
  .coach-atlas .coach-card h3 { font-size: clamp(2.3rem, 12vw, 3.6rem); }
  .coach-atlas .coach-links { width: 100%; margin-left: 0; }
}


/* ---------- shared editorial transitions ---------- */
.page-index:not([data-variant="embedded"]) {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  padding-block: 0.65rem;
  background: var(--ink-950);
}
.page-index:not([data-variant="embedded"]) .page-index__lead { color: var(--gold); }
.page-index:not([data-variant="embedded"]) a { color: var(--muted); font-size: 0.76rem; }
.page-index:not([data-variant="embedded"]) a:hover,
.page-index:not([data-variant="embedded"]) a:focus-visible,
.page-index:not([data-variant="embedded"]) a.is-here { color: var(--paper); }
.cta-band {
  position: relative;
  overflow: clip;
  border-block: 1px solid var(--line);
  text-align: left;
  background:
    radial-gradient(circle at 80% 40%, rgba(240, 176, 24, 0.08), transparent 22%),
    linear-gradient(135deg, #171a38, var(--ink-950) 68%);
}
.cta-band::before {
  content: "";
  position: absolute;
  width: clamp(18rem, 42vw, 40rem);
  aspect-ratio: 1;
  right: clamp(-12rem, -10vw, -4rem);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(240, 176, 24, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(57, 66, 137, 0.07), 0 0 0 8rem rgba(57, 66, 137, 0.045);
  pointer-events: none;
}
.cta-band .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  justify-items: start;
}
.cta-band h2 { max-width: 15ch; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 0.98; }
.cta-band h2::before { margin-inline: 0; }
.cta-band p { max-width: 58ch; margin: 0; }
.cta-band .btn { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.cta-band.has-photo::before { border-color: rgba(240, 176, 24, 0.28); }
@media (max-width: 47.99rem) {
  .cta-band .wrap { grid-template-columns: 1fr; }
  .cta-band .btn { grid-column: 1; grid-row: auto; }
}


/* ==========================================================
   ROUND 3 - SOFT IMMERSION
   Native scroll, compact chapter rhythm and contextual motion hooks.
   The logo, hero sequence and pinned symbol choreography remain untouched.
   ========================================================== */

/* A chapter should end close to its content. Individual immersive scenes can
   earn more room, but generic nth-child spacing no longer decides that. */
@media (min-width: 48rem) {
  .section,
  .section:nth-of-type(3n) {
    padding-block: clamp(3.5rem, 5vw, 4.75rem);
  }
}

.chapter-kicker {
  margin-bottom: 0.9rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- home: audience ledger ---------- */
.home-audience {
  overflow: clip;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(127,139,214,0.08) 50%, transparent 50.1%),
    radial-gradient(circle at 72% 28%, rgba(57,66,137,0.2), transparent 32%),
    var(--ink-950);
}
.home-audience::after {
  content: "02";
  position: absolute;
  right: -0.04em;
  bottom: -0.28em;
  z-index: -1;
  color: rgba(127,139,214,0.045);
  font-family: var(--font-display);
  font-size: clamp(15rem, 34vw, 34rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.audience-stage {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.audience-stage__heading .lede {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.audience-ledger {
  border-bottom: 1px solid var(--line);
}
.audience-ledger p {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.audience-ledger p > span {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}
.audience-ledger strong {
  display: inline;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.05em;
}
.audience-boundary {
  max-width: 50rem;
  margin: 0;
  padding: 1.15rem 0 1.15rem clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--gold);
  color: var(--paper);
  font-size: var(--text-sm);
}
@media (min-width: 52rem) {
  .audience-stage { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .audience-stage__heading { grid-column: 1 / 6; }
  .audience-ledger { grid-column: 6 / 13; }
  .audience-boundary { grid-column: 4 / 11; }
}

/* ---------- home: the three-part rebuild ----------
   All three steps remain in document flow. Scroll only changes emphasis, never
   visibility or position, so readable copy cannot crossfade over readable copy. */
.home-method {
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(33,35,72,0.16) 0 1px, transparent 1px) 0 0 / 16.666% 100%,
    radial-gradient(circle at 18% 42%, rgba(240,176,24,0.06), transparent 28%),
    #0c0e24;
}
.method-story {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.method-story__anchor {
  position: relative;
  align-self: start;
}
.method-story__anchor .lede {
  max-width: 30rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.method-story__meter {
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  max-width: 22rem;
  margin-top: clamp(2rem, 5vw, 4rem);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}
.method-story__current { color: var(--gold); }
.method-story__line {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}
.method-story__line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--method-progress, 0%);
  background: var(--gold);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.method-story__steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.method-story__steps > li {
  display: grid;
  grid-template-columns: clamp(3.5rem, 7vw, 5.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-content: center;
  min-height: clamp(15rem, 42vh, 21rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(240,176,24,0.08), transparent 68%) 0 0 / var(--method-wash, 0%) 100% no-repeat,
    rgba(23,26,56,0.58);
  box-shadow: inset 3px 0 0 var(--method-edge, transparent);
  transition: border-color 360ms ease, background-size 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 360ms ease;
}
.method-story__steps > li.is-current {
  --method-wash: 100%;
  --method-edge: var(--gold);
  border-color: rgba(240,176,24,0.46);
}
.method-story__steps .step-num {
  color: var(--gold);
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: 0.82;
}
.method-story__steps h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
}
.method-story__steps p { max-width: 48rem; color: var(--muted); }
@media (min-width: 52rem) {
  .method-story { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .method-story__anchor { grid-column: 1 / 6; position: sticky; top: 7rem; }
  .method-story__steps { grid-column: 6 / 13; }
}
@media (max-width: 51.99rem) {
  .method-story__steps > li { min-height: 0; }
}

/* At tablet width the route panel overlaps the bottom of the photograph. Keep
   the caption at the top so it cannot collide with the panel eyebrow. */
@media (min-width: 35.01rem) and (max-width: 60rem) {
  .path-stage__media figcaption {
    top: clamp(1.25rem, 4vw, 2rem);
    bottom: auto;
    width: min(62%, 22rem);
  }
}

.home-principle { padding-top: clamp(3rem, 5vw, 4.5rem); }


/* ---------- creators: one continuous human story ---------- */
.creator-profile::after,
.creator-lineage::after,
.creator-manifesto::after {
  content: attr(data-chapter);
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  top: clamp(1rem, 3vw, 2.5rem);
  z-index: 0;
  color: rgba(127,139,214,0.06);
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 700;
  line-height: 0.8;
  pointer-events: none;
}
.creator-profile .feature,
.creator-lineage .feature,
.creator-manifesto .split { position: relative; z-index: 1; }
.creator-profile .feature > div {
  background: linear-gradient(135deg, rgba(20,23,52,0.96), rgba(14,16,38,0.9));
  box-shadow: 0 2rem 5rem rgba(4,5,16,0.34);
}
.creator-portrait {
  box-shadow: 0 2rem 5rem rgba(4,5,16,0.28);
}
.creator-profile--kait .creator-portrait { box-shadow: 0 2rem 5rem rgba(4,5,16,0.28); }
@media (min-width: 52rem) {
  /* The round-two Shawn spread omitted grid-row: 1 on both children. That
     created two implicit rows and separated his face from his story. */
  .creator-profile--shawn .creator-portrait,
  .creator-profile--shawn .feature > div { grid-row: 1; }
  .creator-lineage .feature > div { padding-top: 1rem; }
  .creator-manifesto .split { align-items: center; }
  .creator-manifesto .split > :first-child { position: static; }
  .creator-manifesto .split > :nth-child(2) { padding-top: 0; }
}
.creator-manifesto__line {
  padding: 1rem 0 1rem clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--gold);
}


/* ---------- shared chapter continuity ----------
   The line occupies the existing wrap margin. It adds orientation without
   adding height, cards or another decorative asset. */
.section[data-chapter] > .wrap { position: relative; }
@media (min-width: 80rem) {
  .section[data-chapter] > .wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.5rem;
    width: 1px;
    pointer-events: none;
    background:
      linear-gradient(var(--gold), var(--gold)) 0 0 / 100% var(--chapter-progress, 0%) no-repeat,
      var(--line);
  }
}

/* The self-study opening was the only static desktop chapter with more than
   120 px of unused internal space. Reduce the portrait frame and panel padding
   while preserving the full person, notebook and four content entries. */
@media (min-width: 60.01rem) {
  .study-practice__media { min-height: clamp(28rem, 42vw, 36rem); }
  .study-practice__content { padding: clamp(1.75rem, 3vw, 3rem); }
  .study-practice__content > h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .study-elements article { padding-block: 1rem; }
}


/* ---------- soft scroll interface ---------- */
.scroll-meter {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1100;
  height: 2px;
  overflow: hidden;
  background: rgba(127,139,214,0.14);
  pointer-events: none;
}
.scroll-meter > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold), #ffd56a);
  will-change: transform;
}
.chapter-compass {
  display: none;
}
@media (min-width: 86rem) {
  .chapter-compass {
    position: fixed;
    top: 50%;
    left: max(1rem, calc((100vw - 72rem) / 2 - 4.5rem));
    z-index: 8;
    display: grid;
    grid-template-rows: auto 3.5rem auto;
    justify-items: center;
    gap: 0.6rem;
    transform: translateY(-50%);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    pointer-events: none;
  }
  .chapter-compass__current { color: var(--gold); }
  .chapter-compass i {
    position: relative;
    width: 1px;
    height: 100%;
    overflow: hidden;
    background: var(--line);
  }
  .chapter-compass i::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(calc(-100% + var(--chapter-progress, 0%)));
    background: var(--gold);
  }
}
.page-index a.is-current {
  color: var(--paper);
  box-shadow: inset 0 -1px 0 var(--gold);
}
.section[data-chapter] {
  --chapter-progress: 0%;
}

/* Photographs breathe through light and colour only. Their geometry never
   scales on entry, so the response feels soft rather than like a card hover. */
.has-motion .human-scene img,
.has-motion .creator-portrait img,
.has-motion .outcome-spread__media img,
.has-motion .reading-stage__media img {
  filter: saturate(0.86) brightness(0.9);
  transition: filter 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.has-motion .human-scene.is-in-view img,
.has-motion .creator-portrait.is-in-view img,
.has-motion .outcome-spread__media.is-in-view img,
.has-motion .reading-stage__media.is-in-view img {
  filter: saturate(1) brightness(1);
}
.has-motion .human-scene,
.has-motion .creator-portrait,
.has-motion .outcome-spread__media,
.has-motion .reading-stage__media {
  transition: border-color 900ms ease, box-shadow 1100ms ease;
}
.has-motion .human-scene.is-in-view,
.has-motion .creator-portrait.is-in-view,
.has-motion .outcome-spread__media.is-in-view,
.has-motion .reading-stage__media.is-in-view {
  border-color: rgba(240,176,24,0.34);
  box-shadow: 0 1.75rem 4.5rem rgba(4,5,16,0.25);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-meter,
  .chapter-compass { display: none !important; }
  .human-scene img,
  .creator-portrait img,
  .outcome-spread__media img,
  .reading-stage__media img { filter: none !important; transition: none !important; }
}


/* The global wide-screen step rule reserves a 13 rem title column. Inside the
   three-column coach process that minimum exceeds the available cell width at
   1024 px and pushes the third step outside the viewport. Keep each compact
   process cell in its intended vertical reading order. */
@media (min-width: 62rem) {
  .coach-process__steps > li > div { display: block; }
}

/* ==========================================================================
   CAPA DE PROFUNDIDAD DE LA PORTADA
   --------------------------------------------------------------------------
   El feedback fue que el sitio se ve "2D" y sin vida. Las causas medidas eran
   cinco: nada tapa a nada, el parallax es de un solo plano y de amplitud
   invisible, no hay un solo pixel que se mueva solo, no hay luz direccional y
   el navy es plano de arriba abajo.

   Esto ataca las cinco en el hero, que es donde se juzga el sitio. Son cuatro
   planos reales, cada uno a una velocidad distinta:

     plano 4  texto y botones      -6 %   (el mas cercano al ojo despues del simbolo)
     plano 3  el simbolo dorado   -16 %   (ya existia)
     plano 2  atmosfera            +6 %
     plano 1  la placa de video   +11 %   (el mas lejano: se queda atras)

   La separacion total pasa de 16 % a 27 %, que ya es suficiente para que el
   ojo lea dos distancias distintas en vez de una lamina.

   El video NO es obligatorio: mientras no exista el archivo, la placa muestra
   el poster y todo lo demas funciona igual. Por eso el <video> va vacio de
   <source> hasta que el material del podcast este comprimido.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* Perspectiva de verdad. Hasta ahora los "planos" se movian a velocidades
     distintas pero seguian estando todos a la misma distancia: eso es parallax,
     no profundidad. Con perspective + translateZ el navegador calcula el
     escorzo real, asi que un plano lejano se mueve menos PORQUE esta lejos, no
     porque le hayamos puesto otro numero a mano. */
  perspective: 1200px;
  perspective-origin: 62% 38%;
}
.hero > .wrap { position: relative; z-index: 2; }

.hero-depth {
  transform-style: preserve-3d;
  position: absolute;
  /* Se desborda por los cuatro lados. Por arriba y por abajo para que el
     parallax no descubra el borde de la placa, y por los lados porque al
     inclinar la escena con el puntero el giro asoma el canto: a 6 grados y
     1200 px de perspectiva, el borde se desplaza unos 75 px en una ventana de
     1440, o sea un 5 %. Con 8 % sobra. */
  inset: -16% -8%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-plate {
  position: absolute;
  inset: 0;
  background: var(--ink-950) center / cover no-repeat;
  will-change: transform;
}

.hero-video {
  position: absolute;
  /* El encuadre no se centra: se coloca. En la toma, Shawn esta en el TERCIO
     IZQUIERDO del cuadro y el otro en el derecho. Centrado, el que caia en la
     zona despejada del velo era el otro, y el protagonista tiene que ser
     Shawn.

     Recortar el video para moverlo no servia: con la ventana pegada al borde
     izquierdo del original, para llevar a Shawn al 72 % hay que cerrar tanto el
     encuadre que se queda en un primer plano de su cara con la cocina llena de
     armarios blancos (probado y descartado, se veia peor).

     Y sacar al segundo de cuadro tampoco: la escena vale precisamente porque
     se ve a Shawn EXPLICANDOLE algo a alguien. Sin el otro es un senor solo en
     una cocina.

     Los dos estan separados un 45 % del ancho del cuadro, y la franja libre de
     texto va del 48 % al 100 %, o sea 52 %. Caben los dos justos. Con el video
     al 95 % de ancho arrancando en el 27 %, Shawn cae en el 54 % (justo a la
     derecha del texto y a la izquierda del simbolo) y el otro en el 96 %. El
     hueco de la izquierda queda debajo del titular, donde el velo es casi
     opaco de todas formas. */
  /* La placa se desborda un 16 % por arriba y por abajo para que el parallax
     no descubra su canto. Efecto secundario que costo tres pruebas: el borde
     superior del VIDEO quedaba fuera de pantalla, y como la cabeza de Shawn
     vive en el cuarto de arriba del cuadro, se veia un torso sin cara. El
     video se mete 8 % por dentro de la placa: sigue habiendo margen de sobra
     para el parallax y la cabeza entra en cuadro. */
  /* El video cubre la placa ENTERA. La version anterior lo metia por dentro
     (23 % arriba y abajo) para encuadrar a dos personas, y eso dejaba su canto
     superior dentro del hero: al inclinar la escena con el puntero, ese canto
     giraba y se veia como una raya torcida cruzando la pantalla. Con el fondo
     abstracto ya no hay a quien encuadrar, asi que se cubre todo y no hay
     ningun borde que pueda asomar. */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Y ademas hay que anclar ARRIBA. Al ensanchar el video, "cover" recorta por
     vertical desde el centro y la primera victima era la cabeza de Shawn, que
     vive en el cuarto superior del cuadro: quedaba un torso sin cara. */
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.1s ease;
  /* graduado a la paleta: se le quita saturacion alegre y se hunde en el navy.
     El grado fino se hace en el archivo con ffmpeg; esto es solo el asiento. */
  filter: saturate(0.66) contrast(1.04) brightness(0.98);
}
/* 0.85 y no 0.5. A 0.5, con el velo encima, el video se intuia y poco mas, y
   el sentido de meterlo era que se vea. El contraste del texto no se sostiene
   con la opacidad del video sino con el velo, que sigue cerrado debajo del
   titular y se retira solo en la mitad derecha, donde no hay texto. */
.hero-video.is-live { opacity: 0.85; }

/* La luz va ENCIMA del velo, no debajo. Debajo la tapaba el propio velo y el
   navy volvia a quedar plano. En una composicion oscura la luz se comporta
   como una lampara en la sala: esta delante de todo menos del contenido. El
   simbolo dorado vive en .wrap con z-index 2, o sea POR ENCIMA de esta capa,
   asi que el oro #F0B018 no recibe ni un tono de esta luz. */
.hero-atmos {
  position: absolute;
  inset: -18% -12%;
  will-change: transform;
  background:
    radial-gradient(42% 38% at 66% 24%, rgba(240, 176, 24, 0.22), transparent 68%),
    radial-gradient(56% 50% at 10% 92%, rgba(90, 100, 190, 0.30), transparent 70%),
    radial-gradient(80% 34% at 50% -6%, rgba(160, 176, 255, 0.10), transparent 72%);
}

/* el velo: garantiza el contraste del texto pase lo que pase por detras, y
   funde el hero con la seccion siguiente en lugar de cortarlo a cuchillo */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    /* La caida es mas corta y mas a la izquierda que antes: el texto termina en
       el 44 % y a partir de ahi hay que despejar rapido, porque ahora hay una
       persona en el 54 % que tiene que leerse. */
    linear-gradient(90deg, var(--ink-950) 0%, rgba(14, 16, 38, 0.9) 30%,
                    rgba(14, 16, 38, 0.62) 44%, rgba(14, 16, 38, 0.2) 58%,
                    rgba(14, 16, 38, 0.1) 100%),
    linear-gradient(180deg, rgba(14, 16, 38, 0.6) 0%, transparent 24%, rgba(14, 16, 38, 0.82) 100%);
}

/* En pantallas estrechas el texto ocupa todo el ancho, asi que el velo tiene
   que ser plano y mas cerrado o el titular pierde contraste sobre el video. */
@media (max-width: 47.9375rem) {
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(14, 16, 38, 0.78) 0%, rgba(14, 16, 38, 0.66) 42%, rgba(14, 16, 38, 0.92) 100%);
  }
  /* En movil el texto ocupa todo el ancho, asi que aqui el video se ve MENOS
     que en escritorio a proposito: no hay ninguna franja libre de texto donde
     dejarlo respirar. 0.6 es lo maximo que aguanta manteniendo el titular por
     encima de la norma de contraste, medido. */
  .hero-video.is-live { opacity: 0.6; }
}

/* Profundidad de campo en la entrada de las fotos. El desenfoque SOLO vive
   durante la entrada y se retira: filter: blur() atado al scroll continuo
   hunde el rendimiento en movil. */
.has-motion .depth-in { will-change: transform, opacity, filter; }

/* Quien pide menos movimiento no ve el video, pero tampoco se queda con un
   rectangulo navy vacio: se le pone el fotograma fijo. Ocultar el <video> a
   secas cumplia la regla y empeoraba la pagina. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-atmos { display: none; }
  .hero-plate { background-image: url("../assets/img/hero-poster.jpg"); }
}

/* El escenario del simbolo se desplaza con el puntero. SOLO desplazamiento:
   ni escala ni rotacion ni una gota de color. La regla 2 del cliente dice que
   el logo no se modifica, no se estira y no se redibuja, y una rotacion en
   perspectiva lo estira de hecho aunque el CSS lo llame transform. Ademas, en
   reposo el desplazamiento es exactamente 0, asi que la quinta puerta sigue
   midiendo el simbolo en su sitio exacto. */
.bp-stage { will-change: transform; }

/* El texto del hero se estrecha para dejarle sitio a la escena. Termina en el
   44 % del ancho en vez del 47 %, que es lo que hacia falta para que la figura
   de Shawn (al 54 %) no naciera pegada a la ultima palabra. */
@media (min-width: 60rem) {
  .hero .lede { max-width: 46ch; }
  .hero h1 { max-width: 17ch; }
}

/* La perspectiva vive en la rejilla, no en la tarjeta: asi todas las tarjetas
   de una fila comparten punto de fuga y giran como si estuvieran sobre la misma
   mesa. Puesta en cada tarjeta, cada una tendria el suyo y el efecto se lee
   como un error. */
/* La perspectiva vive fuera del media query de hover a proposito: el giro por
   scroll tiene que existir tambien en movil, que es donde no hay puntero. Lo
   que si es solo de raton es la inclinacion al pasar por encima. */
/* La perspectiva va en el CONTENEDOR de cada grupo, nunca en cada tarjeta ni
   en la seccion entera. En cada tarjeta, cada una tendria su punto de fuga y se
   lee como un error. En la seccion entera, el navegador convierte la seccion en
   bloque contenedor de los elementos fijos, y eso rompe la escena fijada de la
   portada. Aqui, cada fila comparte fuga y nada mas cambia. */
.cta-grid, .path-flow, .book-list, .path-routes, .coach-grid,
.step-list, .faq-list, .founder-grid, .form-layout { perspective: 1000px; }
.path-route, .step-list li, .faq-list details, .book-card, .coach-card,
.founder-card, .cred-cell, .podcast-row, .panel, .path-flow li,
.cta-grid > *, .cta-card, .stat, .form .field { transform-style: preserve-3d; }

/* La celosia va POR ENCIMA del velo y por debajo del contenido: si va debajo
   del velo se apaga junto con el video y deja de leerse, que es justo lo que
   pasaba con la luz de atmosfera antes de subirla. */
.hero-lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hero-lattice { display: none; }
}

/* ------------------------------------------------------------ el teaser --
   La banda del video oficial en la portada. Regla de la banda: el fotograma
   de portada y un play dorado, y el sonido solo cuando alguien lo pide. El
   marco es el mismo lenguaje del resto del sitio: linea fina, sombra honda,
   nada de bordes redondeados de reproductor generico. */
.teaser-band .wrap { max-width: 68rem; }
.teaser-band__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.teaser-frame {
  position: relative;
  margin-top: var(--space-3);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.teaser-video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* EL FALLO DEL PLAY QUE NO SE QUITABA: display:grid de abajo le gana al
   estilo de navegador del atributo [hidden], asi que el boton seguia pintado
   encima del video y tapaba los controles: no se podia pausar. La regla
   explicita de aqui devuelve a [hidden] su autoridad. */
.teaser-play[hidden] { display: none; }
.teaser-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-950);
  background: linear-gradient(180deg, rgba(14, 16, 38, 0.05), rgba(14, 16, 38, 0.42));
}
.teaser-play svg {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  margin-left: 4px;   /* centrado optico del triangulo, regla 8 del cliente */
}
.teaser-play__ring {
  grid-area: 1 / 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(240, 176, 24, 0.45);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .teaser-play:hover .teaser-play__ring,
  .teaser-play:focus-visible .teaser-play__ring { transform: scale(1.12); }
}
.has-motion .teaser-play__ring { animation: teaser-pulse 2.6s ease-out infinite; }
@keyframes teaser-pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 176, 24, 0.45); }
  70% { box-shadow: 0 0 0 26px rgba(240, 176, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 176, 24, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .teaser-play__ring { animation: none; }
}

/* LA GALAXIA EN TODO EL RECORRIDO. El lienzo nace dentro del hero (asi lo
   trae el HTML y asi lo ven el modo sin JavaScript y las puertas), pero
   lattice.js lo muda al body y le pone esta clase: pasa a ser una capa FIJA
   que acompana todo el scroll, con los puntos reaccionando al puntero en
   cualquier parte de la pagina. Va en z-index 1: por encima de los fondos de
   las secciones (si no, cada fondo opaco la taparia, que es exactamente el
   fallo que ya nos comimos con la atmosfera) y por debajo de la cabecera
   (z 50). Es puro pixel decorativo: pointer-events fuera. */
.page-lattice {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* La celosia en las paginas interiores. El hero de dentro es mas bajo y no
   lleva video, asi que aqui la capa solo contiene el lienzo y se recorta al
   propio hero. */
.page-hero { position: relative; isolation: isolate; overflow: clip; }
.page-hero > .wrap { position: relative; z-index: 2; }
.hero-depth--page { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Los botones: el relleno entra desde la izquierda al pasar por encima, en vez
   de un cambio de color plano. Solo transform, o sea gratis para la GPU. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.34, 1.36, 0.64, 1);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn-line:hover, .btn-line:focus-visible { color: var(--ink-950); border-color: var(--gold-strong); }
.btn:active { transform: translateY(1px) scale(0.985); }

/* ==========================================================================
   UNA SOLA SINTONIA: vida en reposo para TODAS las secciones
   --------------------------------------------------------------------------
   El diagnostico del cliente era exacto: todo el movimiento del sitio era de
   ENTRADA. La pieza entraba, y a partir de ahi la seccion quedaba muerta. La
   portada tenia atmosfera propia y el resto no, asi que el sitio se leia como
   una portada viva seguida de siete carteles.

   Esto le da a cada seccion la misma respiracion que tiene el hero:
   1. una luz lenta que deriva sola (animacion CSS, solo transform)
   2. amarrada ademas al scroll desde motion.js, para que el fondo se mueva
      a distinta velocidad que el contenido (paralaje de capas)
   3. hovers con halo dorado en todas las tarjetas, para que responder al
      cursor no sea privilegio de la portada
   ========================================================================== */
main section { position: relative; isolation: isolate; }

/* EL FALLO QUE HIZO INVISIBLE TODO ESTO, y no era el navegador del cliente.
   La capa de atmosfera iba con z-index: -1 dentro de una seccion con
   isolation: isolate. En esa combinacion el navegador la pinta POR DEBAJO del
   fondo de la propia seccion, y las secciones de Manus tienen fondo opaco
   propio (rgb(14,16,38)): la luz y el numeral existian en el DOM, median
   256 px, y estaban tapados por el fondo de su propio contenedor.

   La solucion no es subir la capa por encima del texto (con z-index: 0 se
   pintaria ENCIMA del contenido en flujo), sino elevar el contenido: la capa
   se queda en 0 y todo lo que lleva contenido pasa a 1. Los cuatro tipos de
   hijo que existen en las 8 paginas estan contados uno a uno abajo. */
main section > .wrap,
main section > .page-index,
main section > .photo-bg { position: relative; z-index: 1; }
/* .hero-depth NO entra en la regla de arriba: ya es position:absolute con
   inset:0 (es el telon de fondo del hero). Forzarle position:relative lo
   colapso a ALTURA CERO y con el murieron el video, el velo y la celosia
   que viven dentro. Solo necesita el z-index; su position no se toca. */
main section > .hero-depth { z-index: 1; }

/* Dos capas a proposito: la de fuera RECORTA y la de dentro se mueve. Si se
   anima la caja directamente, el navegador cuenta el desbordamiento visual del
   transform como area de scroll y aparece una barra horizontal de 120 px que
   no lleva a nada. Paso, y lo cazo la comprobacion de ancho: la caja se queda
   quieta y recorta, y lo que deriva vive dentro. */
.section-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.section-glow > i {
  position: absolute;
  inset: -14%;
  display: block;
  /* La primera version llevaba la luz al 5 por ciento de alfa y en una foto
     fija no existia: el cliente mando dos capturas identicas y tenia razon.
     La regla de trabajo es que la atmosfera tiene que verse EN UNA CAPTURA,
     no solo en movimiento. Tres focos mas la trama de plano tecnico, que es
     la textura de la marca: una pagina que se llama Blueprint tiene que
     tener papel de plano debajo, no navy liso. */
  background:
    radial-gradient(46% 40% at 78% 16%, rgba(240, 176, 24, 0.13), transparent 68%),
    radial-gradient(54% 48% at 10% 88%, rgba(95, 108, 205, 0.30), transparent 70%),
    radial-gradient(70% 45% at 45% 110%, rgba(56, 61, 107, 0.5), transparent 74%),
    repeating-linear-gradient(90deg, rgba(122, 132, 205, 0.055) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(122, 132, 205, 0.055) 0 1px, transparent 1px 88px);
  will-change: transform;
  animation: glow-drift 26s ease-in-out infinite alternate;
}

/* El numeral fantasma del capitulo: un 01/02/03 gigante detras del contenido,
   como el folio de un plano. Las paginas de los creadores ya lo tenian y era
   de las pocas cosas con presencia en reposo: ahora lo tienen todos los
   capitulos, inyectado por el motor y con su propio paralaje. */
.section-ghost {
  position: absolute;
  right: clamp(1rem, 5vw, 5rem);
  top: clamp(0.5rem, 3vw, 2.5rem);
  z-index: 0;
  pointer-events: none;
  color: rgba(127, 139, 214, 0.09);
  font-family: var(--font-display);
  font-size: clamp(7rem, 16vw, 15rem);
  font-weight: 700;
  line-height: 0.8;
  user-select: none;
}
/* la deriva alterna de lado por seccion, para que dos seguidas no respiren
   en fase, que se nota y parece un patron de fondo repetido */
main section:nth-of-type(even) .section-glow > i { animation-duration: 33s; animation-direction: alternate-reverse; }

@keyframes glow-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.12); }
}

/* Los hovers. El levantamiento fisico ya lo pone el motor (tilt 3D via GSAP,
   que escribe transform en linea y por eso el transform NO puede vivir aqui:
   una regla CSS de hover perderia siempre contra el estilo en linea). Aqui va
   lo que el motor no toca: luz, borde y el detalle interior. */
@media (hover: hover) and (pointer: fine) {
  .path-route, .step-list li, .book-card, .coach-card, .founder-card,
  .cred-cell, .panel, .podcast-row, .faq-list details {
    transition: box-shadow 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
  }
  .path-route:hover, .step-list li:hover, .book-card:hover, .coach-card:hover,
  .founder-card:hover, .cred-cell:hover, .panel:hover, .podcast-row:hover,
  .faq-list details:hover {
    box-shadow: 0 18px 50px rgba(4, 5, 16, 0.5), 0 0 0 1px rgba(240, 176, 24, 0.28),
                0 0 44px rgba(240, 176, 24, 0.07);
  }
  .path-route .path-route__arrow { transition: transform 0.28s cubic-bezier(0.34, 1.36, 0.64, 1); }
  .path-route:hover .path-route__arrow { transform: translate(4px, -4px); }
  .coach-card img, .book-card img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .coach-card:hover img, .book-card:hover img { transform: scale(1.045); }
}

/* La regla dorada sobre cada titular se DIBUJA al llegar, en vez de estar ya
   puesta. Solo bajo .has-motion: sin motor, la regla esta pintada desde el
   primer fotograma y no depende de nada. */
.has-motion .section h2::before, .has-motion .cta-band h2::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.has-motion .cta-band h2::before { transform-origin: center; }
.has-motion .section h2.rule-in::before, .has-motion .cta-band h2.rule-in::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .section-glow > i { animation: none; }
  .section h2::before, .cta-band h2::before { transform: none !important; }
}

/* ==========================================================================
   BECOME A COACH, RONDA 2 DE KAITLIN: la Trifecta, como ganan los coaches, el
   filtro "es esto para ti" y el descargo. Todo hereda del sistema que ya
   existe (reg, annot, lede, step-list) para que la pagina siga siendo una
   sola pieza y no tres secciones pegadas.
   ========================================================================== */

/* ---------- la Trifecta ---------- */
.trifecta {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 18% 30%, rgba(240, 176, 24, 0.06), transparent 26%),
    var(--ink-950);
}
.trifecta__heading { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.trifecta__heading > p:first-child {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.trifecta__heading h2 { margin-top: 0.75rem; font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: 0.98; max-width: 12ch; }
.trifecta__heading .lede { margin-top: 1.25rem; }
.trifecta__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.trifecta__area {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--ink-900);
}
/* El dibujo del dial. Ocupa el sitio de la imagen que Shawn y Kait mandarian
   si el bloque se queda; no es un adorno, es la palabra "10" hecha plano. */
.trifecta__mark { margin: 0 0 0.75rem; }
.trifecta__mark svg { display: block; width: 7.5rem; height: auto; }
.trifecta__num {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}
.trifecta__area h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; }
.trifecta__area p { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; max-width: 34ch; }
.trifecta__close {
  max-width: 52ch;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 52rem) {
  .trifecta__grid { grid-template-columns: 1fr; }
}

/* ---------- como ganan los coaches ---------- */
.coach-earn { border-block: 1px solid var(--line); background: #11142f; }
.coach-earn__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.coach-earn__copy h2 { margin-top: 0.75rem; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 0.98; max-width: 12ch; }
.coach-earn__copy .lede { margin-top: 1.25rem; max-width: 40ch; }
.coach-earn__streams {
  display: grid;
  gap: 0;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.coach-earn__streams li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.coach-earn__n { padding-top: 0.2rem; color: var(--gold); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; }
.coach-earn__streams h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.15; }
.coach-earn__streams p { margin-top: 0.3rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; max-width: 44ch; }
.coach-earn__diagram { margin: 0; }
.coach-earn__diagram svg { display: block; width: 100%; height: auto; }
@media (max-width: 52rem) {
  .coach-earn__grid { grid-template-columns: 1fr; }
  .coach-earn__diagram { order: -1; max-width: 32rem; }
}

/* ---------- es esto para ti ---------- */
.fit-check__heading { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.fit-check__heading .lede { margin-top: 1rem; }
.fit-check__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
.fit-check__col { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); }
.fit-check__col h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.1; margin-bottom: 1rem; }
.fit-check__col ul { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
.fit-check__col li { position: relative; padding-left: 2rem; color: var(--paper); font-size: var(--text-sm); line-height: 1.55; }
.fit-check__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}
/* LA COLUMNA DEL SI PESA MAS Y ES MAS CALIDA (nota de diseno de Kaitlin): es
   la invitacion. Fondo mas claro, borde dorado, marcas doradas. */
.fit-check__col--yes {
  border: 1px solid rgba(240, 176, 24, 0.55);
  background:
    radial-gradient(circle at 12% 0%, rgba(240, 176, 24, 0.10), transparent 40%),
    var(--ink-900);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.fit-check__col--yes h3 { color: var(--gold); }
.fit-check__col--yes li::before {
  background-color: rgba(240, 176, 24, 0.16);
  border: 1px solid var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.3 2.3L9.5 4' fill='none' stroke='%23F0B018' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* LA COLUMNA DEL NO ES UN FILTRO HONESTO, NO UN REGANO: sin caja, sin rojo,
   texto apagado, marcas grises. Se lee, no se siente. */
.fit-check__col--no { border: 1px solid var(--line); background: transparent; }
.fit-check__col--no h3 { color: var(--muted); }
.fit-check__col--no li { color: var(--muted); }
.fit-check__col--no li::before {
  border: 1px solid rgba(163, 171, 207, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%23A3ABCF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fit-check__close {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
}
.fit-check__close a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* En movil, primero el si, luego el no (nota de diseno de Kaitlin). El orden
   del DOM ya es ese; solo hay que apilar. */
@media (max-width: 52rem) {
  .fit-check__grid { grid-template-columns: 1fr; }
}

/* ---------- formulario: la fila de opciones ---------- */
.field--choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.field--choice legend { padding: 0; margin-bottom: 0.4rem; color: var(--paper); font-size: var(--text-sm); font-weight: 500; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.choice-row label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--paper); font-size: var(--text-sm); cursor: pointer; min-height: 44px; }
.choice-row input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); margin: 0; }

/* ---------- el descargo de ingresos ---------- */
.license-disclaimer {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
  background: var(--ink-950);
}
.license-disclaimer p { max-width: 78ch; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }
.license-disclaimer__k {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Los tres botones amarillos bajo los pasos del camino de Self Study
   (feedback de Tara). Van al final de cada tarjeta, alineados abajo aunque
   los parrafos tengan distinto largo: la tarjeta es una columna y el boton
   se empuja al fondo. */
.path-flow li { display: flex; flex-direction: column; }
.path-flow li > p:last-of-type { margin-bottom: 1.25rem; }
.path-flow__cta { margin-top: auto; align-self: flex-start; }

/* ---------- Self Study: precio y recorrido (entra con el sello de David) ---------- */
.study-offer { border-block: 1px solid var(--line); background: #11142f; }
.study-offer__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.study-offer__price h2 { margin-top: 0.75rem; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 0.98; max-width: 10ch; }
.study-offer__setup, .study-offer__monthly { display: grid; gap: 0.2rem; margin-top: 1.5rem; }
.study-offer__num { color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; }
.study-offer__monthly .study-offer__num { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.study-offer__label { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.study-offer__terms { margin-top: 1.25rem; max-width: 40ch; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.study-offer__price .btn { margin-top: 1.5rem; }
.study-offer__journey { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.study-offer__journey li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; padding-block: 0.95rem; border-bottom: 1px solid var(--line); }
.study-offer__journey span { padding-top: 0.15rem; color: var(--gold); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; }
.study-offer__journey h3 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.15; }
.study-offer__journey p { margin-top: 0.2rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
@media (max-width: 52rem) { .study-offer__grid { grid-template-columns: 1fr; } }


/* ==========================================================
   RONDA ESTETICA (29 sep 2026). Revision de las 9 paginas en
   escritorio y movil. Cada regla dice que arregla.
   ========================================================== */

/* La barra de los tres caminos.
   a) En la pagina del camino SOLIDO el texto desaparecia: la regla vieja
      ".doorbar a[aria-current]" (texto oro) le ganaba en especificidad a
      ".doorbar--cta .btn-solid" (texto navy) y quedaba oro sobre oro.
   b) Los botones de linea no tenian borde inferior: ".doorbar a" pone el
      borde de abajo transparente y ".doorbar--cta .btn" lo quitaba.
   c) En movil el texto quedaba pegado a la izquierda del boton. */
.doorbar--cta a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
}
.doorbar--cta a.btn-solid,
.doorbar--cta a.btn-solid[aria-current="page"] { color: var(--ink-950); }
.doorbar--cta a.btn-line[aria-current="page"] { color: var(--gold); }
.doorbar--cta a.btn-line[aria-current="page"]:hover,
.doorbar--cta a.btn-line[aria-current="page"]:focus-visible { color: var(--ink-950); }

/* El simbolo del hero en movil ocupaba una pantalla entera debajo de los
   botones. Se queda a un tamano que acompana en lugar de interrumpir. */
@media (max-width: 47.99rem) {
  .hero .bp-stage { width: min(64%, 16rem); margin-inline: auto; }
}

/* Home, movil: la tarjeta "Choose your path" sube 1.5 rem sobre la foto y
   tapaba la ultima linea del pie "A community of people doing the same work". */
@media (max-width: 35rem) {
  .path-stage__media figcaption { bottom: 3rem; }
}

/* Directorio de coaches.
   a) Movil: la cuadricula pasa a una columna, pero las tarjetas pares seguian
      pidiendo 12 columnas (regla de mas especificidad) y el navegador creaba
      11 columnas implicitas: tarjetas angostas y la de Kait fuera de pantalla.
   b) Escritorio: nombres a 4 rem partian "Michael Hartley, LCSW" en tres
      lineas y los botones de cada fila quedaban a alturas distintas. Nombre
      mas contenido y la fila de botones anclada al pie de cada tarjeta. */
.coach-atlas .coach-grid { align-items: stretch; }
.coach-atlas .coach-card { display: flex; flex-direction: column; }
.coach-atlas .coach-card h3 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); line-height: 1.06; }
.coach-atlas .coach-card > p { margin-bottom: 1.5rem; }
.coach-atlas .coach-card .coach-cta { margin-top: auto; }
@media (max-width: 47.99rem) {
  .coach-atlas .coach-grid { grid-template-columns: minmax(0, 1fr); }
  .coach-atlas .coach-grid > .coach-card,
  .coach-atlas .coach-grid > .coach-card:nth-child(even),
  .coach-atlas .coach-grid > .coach-card:nth-child(3n+2) { grid-column: 1 / -1; margin-top: 0; }
  .coach-atlas .coach-card h3 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* Banda final de cada pagina: el boton flotaba solo en la esquina derecha,
   lejos del texto que lo pide. Ahora va debajo del texto, y cuando el texto
   ofrece dos caminos, hay dos botones. */
.cta-band .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
.cta-band .btn { grid-column: auto; grid-row: auto; align-self: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
@media (max-width: 35rem) {
  .cta-band__actions .btn { flex: 1 1 100%; }
}

/* FAQ: la lista ocupaba media pantalla y dejaba un hueco a la derecha. */
.faq-list { max-width: 54rem; }

/* Fichas de los creadores en el home: la foto ocupa cuatro filas y el
   sobrante se repartia entre ellas, asi que la ficha de Shawn quedaba
   espaciada y la de Kait apretada. El sobrante va a la ultima fila. */
@media (min-width: 52rem) {
  .founder-card { grid-template-rows: auto auto auto 1fr; }
  .founder-card > p { max-width: 64ch; }
}

/* Formulario de Become a Coach: la pregunta de opciones tenia otra letra y
   otro color que el resto de etiquetas. */
.field--choice legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Contact: el titulo de la seccion salia en cinco lineas gigantes, mas
   grande que el propio titular de la pagina. */
.contact-desk > .wrap > h2 { max-width: 20ch; font-size: clamp(2.2rem, 4.4vw, 3.8rem); }

/* Trifecta: la tarjeta con menos texto repartia su sobrante entre las filas
   y bajaba su titulo respecto a las otras dos. */
.trifecta__area { align-content: start; }

/* Numeros grandes de "How It Works" (Find a Coach y About the Program):
   heredaban el recuadro del numero pequeno de .step-list, y a 5-7 rem los
   digitos se salian por arriba y por abajo del borde. El numero grande no
   necesita caja. */
.method-ledger .step-num,
.coach-process__steps .step-num { border: 0; padding: 0; line-height: 0.9; }