/* ==========================================================================
   ETHOS MEDIA — V1
   0. Tokens · 1. Reset · 2. Tipografía · 3. Utilidades · 4. Header
   5. Hero · 6. Galería · 7. Agenda · 8. Footer · 9. Responsive · 10. Motion
   ========================================================================== */

/* ── 0. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Color */
  --ink:        #06101F;
  --ink-soft:   #0B1633;
  --surface:    #101C33;
  --text:       #E8E6E1;
  --muted:      #8695AB;
  --accent:     #FF7E87;
  --accent-2:   #FFC9A0;
  --accent-3:   #D0719A;
  --line:       rgba(232, 230, 225, .12);
  --line-soft:  rgba(232, 230, 225, .06);

  /* Tipografía */
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans:  "Instrument Sans", ui-sans-serif, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  /* No hay cuarta familia. El acento del titular dejó de ser un cambio de
     fuente el 08/09/2026: ver la sección del acento más abajo. */

  --step--1: clamp(.82rem, .78rem + .2vw, .94rem);
  --step-0:  clamp(1.05rem, .98rem + .32vw, 1.22rem);
  --step-1:  clamp(1.28rem, 1.14rem + .62vw, 1.62rem);
  --step-2:  clamp(1.7rem, 1.44rem + 1.2vw, 2.45rem);
  --step-3:  clamp(2.25rem, 1.75rem + 2.3vw, 3.9rem);
  --step-4:  clamp(2.9rem, 2.05rem + 3.9vw, 5.6rem);

  /* Espaciado */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s6: 1.5rem;  --s8: 2rem;    --s12: 3rem;   --s16: 4rem;
  --s24: 6rem;   --s32: 8rem;

  --container: 78rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 14px;

  /* Motion */
  --dur-fast: 180ms;
  --dur-base: 380ms;
  --dur-slow: 900ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ── 1. RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

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

::selection { background: var(--accent); color: var(--ink); }

.skip {
  position: absolute; left: var(--s4); top: -4rem; z-index: 100;
  background: var(--accent); color: var(--ink);
  padding: var(--s3) var(--s6); border-radius: 999px; font-weight: 600;
  transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: var(--s4); }

/* ── 2. TIPOGRAFÍA ─────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }

/* Acentos de texto — V2 (2026-08-17).
   El coral queda RESERVADO para el CTA de agendar. El énfasis del texto se
   hace con la forma de la letra, no con el color: cambio de familia, de eje
   y de inclinación. Es más difícil de calibrar y mucho más señorial, y
   obliga a que la jerarquía funcione por tipografía y no por un truco. */
.rico em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.09em;      /* la cursiva serif pesa ópticamente menos */
  letter-spacing: .004em; /* respira: la itálica junta demasiado */
  color: var(--text);     /* mismo color: el contraste es de forma */
}
/* Instrument Serif solo existe en peso 400: pedirle 500 producía negrita
   sintética, que en un serif de contraste fino se ve deforme. El énfasis se
   hace con la SANS en peso real, que además contrasta de verdad dentro de las
   citas, donde el párrafo ya es serif. */
.rico strong {
  font-family: var(--sans);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.005em;
  color: var(--text);
}
/* Cifra suelta: monoespaciada sobre fondo tenue con filete inferior */
.rico b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .9em;
  color: var(--text);
  letter-spacing: .01em;
  padding: .1em .38em;
  border-radius: 4px;
  background: rgba(232, 230, 225, .07);
  box-shadow: inset 0 -1px 0 rgba(232, 230, 225, .22);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: var(--s3);
}

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 126, 135, .16);
}

/* ── 3. UTILIDADES ─────────────────────────────────────────────────────── */
/* El ritmo vertical se lleva con padding-block único: dos secciones seguidas
   sumaban antes más de 250 px de aire y el bloque de agenda quedaba a la
   deriva respecto a los testimonios. */
.section {
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
  scroll-margin-top: 5rem; /* compensa el header fijo al saltar por ancla */
}

/* La agenda arranca antes: sumando el padding inferior de los testimonios,
   el salto entre las dos secciones llegaba a 12 rem. */
.agenda { padding-top: clamp(1.5rem, 3vw, 2.75rem); }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: .85em 1.6em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: 999px;
  font-size: var(--step-0); font-weight: 600; letter-spacing: -.01em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { --btn-bg: var(--accent); --btn-fg: #2A0A10; --btn-bd: var(--accent); }
.btn--solid:hover { --btn-bg: #FF949B; --btn-bd: #FF949B; }

.btn--ghost:hover { --btn-bd: rgba(232,230,225,.34); --btn-bg: rgba(232,230,225,.04); }

.btn--quiet { --btn-bd: transparent; --btn-fg: var(--muted); padding-inline: .6em; }
.btn--quiet:hover { --btn-fg: var(--text); }

.btn[disabled] { opacity: .5; pointer-events: none; }

/* ── 4. HEADER ─────────────────────────────────────────────────────────── */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--gutter);
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              padding var(--dur-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head[data-stuck] {
  background: rgba(6, 16, 31, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  padding-block: var(--s3);
}

/* CTA de la barra en coral sólido: es el mismo CTA que el del hero, así que
   repetirlo idéntico refuerza en vez de competir. Con halo suave para que
   destaque sobre el fondo casi negro de la barra. */
.site-head__cta {
  padding: .62em 1.35em;
  font-size: var(--step--1);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(255, 126, 135, .45);
  animation: cta-latido 3.6s var(--ease-io) infinite;
}
.site-head__cta:hover { animation-play-state: paused; }

@keyframes cta-latido {
  0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(255, 126, 135, .40); }
  86%           { box-shadow: 0 0 0 7px rgba(255, 126, 135, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-head__cta { animation: none; }
}

/* Ticker de cifras. Ocupa el hueco que dejó el logo de la barra: en el punto
   de máxima exposición de la página va prueba, no identidad repetida. */
.ticker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* Sitio para el logotipo, solo cuando el logotipo existe. Con transición
     para que la cinta se aparte en lugar de dar un salto. */
  padding-left: 0;
  transition: padding-left var(--dur-base) var(--ease);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent);
}
.site-head[data-con-logo] .ticker { padding-left: 104px; }
@media (max-width: 640px) {
  .site-head[data-con-logo] .ticker { padding-left: 78px; }
}

.ticker__track {
  display: flex; align-items: center;
  width: max-content;
  will-change: transform;
}
.ticker__item {
  display: inline-flex; align-items: center; gap: var(--s4);
  padding-right: var(--s4);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
}
.ticker__item::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .75;
}
.ticker__item b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.16em;
  letter-spacing: 0;
  color: var(--text);
}

/* ── 5. HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center;
  padding: calc(var(--s24) + var(--s8)) var(--gutter) var(--s16);
  overflow: hidden;
  isolation: isolate;
}

/* Campo de puntos — atmósfera de fondo */
.hero__field {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
}

/* Grano — SVG feTurbulence, sin JS ni imagen externa */
.hero__grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Halo cálido detrás del título */
.hero::before {
  content: ""; position: absolute; z-index: -2;
  inset: 12% -20% auto 50%;
  translate: -50% 0;
  width: min(120rem, 140vw); aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 126, 135, .16) 0%,
    rgba(208, 113, 154, .08) 34%,
    transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  width: 100%; max-width: var(--container);
  margin-inline: auto;
}


/* Escenario del logotipo en partículas. Ocupa la mitad superior del hero;
   el canvas es transparente y se compone sobre el campo y el halo. */
/* El escenario ya NO contiene el canvas: solo reserva el hueco donde se
   formará el logotipo. Con una sola palabra (proporción 4,2:1 en vez de
   8,2:1) las letras salen casi al doble de alto para el mismo ancho. */
.hero__stage {
  position: relative;
  width: 100%;
  height: clamp(230px, 40vh, 470px);
  margin-bottom: clamp(var(--s4), 3vh, var(--s8));
}

/* Canvas a sangre sobre todo el hero: el cursor responde en cualquier punto
   y las partículas tienen todo el alto para dispersarse. */
.hero__particles {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;   /* no debe robar clics al CTA ni al texto */
}
/* El contenido del hero va por encima de las partículas */
.hero__inner, .hero__stage, .hero__scroll { position: relative; z-index: 2; }

/* Fallback sin WebGL: el logotipo tal cual, centrado.
   Se controla con una clase en el escenario, no con el atributo [hidden]:
   una regla de autor sobre el elemento gana al [hidden] del navegador y el
   fallback acababa pintándose ENCIMA de las partículas. */
.hero__logo-fallback { display: none; }

.hero__stage[data-fallback] .hero__particles { display: none; }
.hero__stage[data-fallback] .hero__logo-fallback {
  display: block;
  position: absolute; inset: 0; margin: auto;
  max-width: min(82%, 1500px); height: auto;
  object-fit: contain;
  animation: reveal var(--dur-slow) var(--ease) both;
}

/* Oculto visualmente pero legible por lectores de pantalla y buscadores */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hero__tagline {
  font-family: var(--serif);
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -.015em;
  max-width: 22ch;
  margin-bottom: var(--s4);
}
/* ── EL ACENTO DEL TITULAR (v3, 08/09/2026) ──────────────────────────────
   Hasta hoy el acento cambiaba de familia: una grotesca condensada maciza en
   caja alta (ver docs/DECISIONES.md). Pat la rechazó con estas palabras: «que sea una fuente que
   fluya con el resto, que simplemente parezca una negrita pero del mismo
   tamaño y grosor similar, porque si no parece que lo queremos gritar».
   Instrument Serif no tiene negrita (solo 400) y pedirle 700 produce un
   trazo sintético sucio, así que la única negrita posible es de LUZ:

     · el `em` es exactamente la misma letra que su titular (se hereda todo);
     · el titular baja al 70 % y el `em` se queda al 100 %.

   El 70 % sobre --ink da 7,79:1 de contraste (WCAG 2.1), por encima de AAA,
   así que el titular apagado sigue siendo texto de primera y no un gris.

   El `:has(em)` no es decoración: hoy los cuatro titulares llevan acento,
   pero en cuanto se escriba uno sin `<em>` en content.js quedaría apagado
   entero y sin motivo. El titular solo cede luz si hay algo a lo que cedérsela.
   Se comparó contra itálica sola y contra itálica + luz el 08/09; Yvan eligió
   solo luz. Comparativa en docs/comparativas/comparativa-acento-sutil.html */
.hero__tagline:has(em) { color: rgba(232, 230, 225, .70); }
.hero__tagline em {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: none;
  line-height: inherit;
  color: var(--text);
}

.hero__lede {
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: clamp(var(--s6), 3vh, var(--s8));
}
/* El énfasis lo gobierna .rico: itálica serif sin color, igual que en el
   resto de la página. El coral está reservado al CTA. */

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

.hero__scroll {
  position: absolute; left: 50%; bottom: var(--s6); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.hero__scroll-line {
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: drop 2.4s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%   { scale: 1 0; opacity: 0; }
  40%  { scale: 1 1; opacity: 1; }
  100% { scale: 1 1; opacity: 0; transform: translateY(1rem); }
}

/* ── 5b. BARRA DE MARCAS ────────────────────────────────────────────────
   Marquee infinito. La velocidad reacciona al scroll: al bajar acelera y al
   parar vuelve a su deriva base. Es lo que hace que la página se sienta viva.
   ─────────────────────────────────────────────────────────────────────── */
/* La banda se hunde: fondo más oscuro que la página y logos encendidos en
   blanco puro. Se lee como una hendidura, no como un bloque pegado encima. */
.marquee-sec {
  padding: clamp(var(--s8), 5vw, var(--s12)) 0;
  background: #030812;
  box-shadow:
    inset 0 14px 24px -14px rgba(0, 0, 0, .9),
    inset 0 -14px 24px -14px rgba(0, 0, 0, .9);
  border-block: 1px solid rgba(0, 0, 0, .5);
  overflow: hidden;
}
.marquee-sec__head {
  display: flex; justify-content: center;
  margin-bottom: var(--s8);
  padding-inline: var(--gutter);
  text-align: center;
}

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  /* Difuminado en los extremos: la tira nace y muere sin corte seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center;
  gap: clamp(var(--s6), 3.5vw, var(--s12));
  flex: 0 0 auto;
  padding-right: clamp(var(--s6), 3.5vw, var(--s12));
  will-change: transform;
}
.marquee__item {
  flex: 0 0 auto;
  /* 38 px deja ~10 marcas en pantalla a 1440. Más alto y solo se ven 6, que
     es justo lo contrario de lo que la barra tiene que transmitir. */
  height: 38px; width: auto;
  /* Blanco puro sobre el hueco oscuro: los logos son la única luz de la banda */
  opacity: .82;
  filter: grayscale(1) brightness(1.35);
  transition: opacity var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.marquee:hover .marquee__item { opacity: .5; }
.marquee__item:hover { opacity: 1; filter: grayscale(0) brightness(1.1); }

@media (max-width: 640px) { .marquee__item { height: 34px; } }

/* ── 6. GALERÍA DE TESTIMONIOS ─────────────────────────────────────────── */
.sec-head { margin-bottom: clamp(var(--s6), 4vw, var(--s12)); max-width: 44ch; }
.sec-head__eyebrow { margin-bottom: var(--s4); }
.sec-head__title { font-family: var(--serif); font-size: var(--step-4); margin-bottom: var(--s4); }
/* Los titulares de sección usan la MISMA mecánica que el hero: misma letra,
   el titular al 70 % y la palabra al 100 %. Un solo sistema de énfasis en
   toda la página en lugar de dos. Se limita a .sec-head__title a propósito:
   dentro de las citas de los testimonios el <em> sigue siendo itálica serif,
   porque ahí el énfasis es la voz del cliente, no un golpe de titular.
   El `:has(em)` evita apagar un titular que no tenga palabra destacada. */
.sec-head__title:has(em) { color: rgba(232, 230, 225, .70); }
.sec-head__title em {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: none;
  line-height: inherit;
  color: var(--text);
}
.sec-head__lede { color: var(--muted); max-width: 52ch; }

/* ── EL PROBLEMA ──────────────────────────────────────────────────────────
   Un bloque de lectura, no de escaneo. Columna estrecha (la medida de una
   carta) y un párrafo por línea con aire entre ellos: la cadencia de
   pabloandre.com. El titular reutiliza .sec-head y su acento de luz; aquí
   no hay tarjetas ni iconos a propósito.
   En SANS, igual que .slide__cita y por el mismo motivo: el énfasis de dentro
   (<strong>) es sans 600 e Instrument Serif no tiene negrita. Serif + negrita
   sans es el choque que ya se corrigió en los testimonios. */
/* Columna CENTRADA, a diferencia del resto de la página. Es lo que hace
   pabloandre.com y lo que pidió Yvan: con el texto a la izquierda quedaba
   media pantalla vacía a la derecha. El desalineado con las demás secciones
   es deliberado: marca este bloque como una pausa de lectura, no como una
   sección más. */
.problema { padding-top: clamp(2rem, 4vw, 3.5rem); text-align: center; }
/* .sec-head tiene max-width: sin centrar TAMBIÉN el contenedor, el título se
   centraba dentro de una caja pegada a la izquierda y salía a medias. */
.problema .sec-head { margin-bottom: var(--s6); margin-inline: auto; }
.problema .sec-head__title { margin-inline: auto; }
.problema__texto {
  max-width: 44ch;
  margin-inline: auto;
  font-family: var(--sans);
  font-size: var(--step-1);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--text);
}
.problema__texto p { margin: 0 0 var(--s6); }
.problema__texto p:last-child { margin-bottom: 0; }
/* La frase de una sola línea que abre («Casi siempre es lo mismo.») y el
   nombre del método pesan más si se les deja solos: el margen extra hace de
   pausa, como el silencio antes de una frase importante. */
.problema__texto p:first-child { margin-bottom: var(--s8); }
/* Las tres cosas que ya probó (agencia, mentoría, lanzamiento) van seguidas,
   con menos aire entre ellas: se leen como una enumeración, no como tres
   párrafos sueltos. */
.problema__texto p:nth-child(3),
.problema__texto p:nth-child(4) { margin-bottom: var(--s3); }
.problema__texto p:nth-last-child(2) { margin-top: var(--s8); }
/* El cierre en sans 600: cambia de voz para que se lea como conclusión y
   no como un párrafo más. Mismo mecanismo que .rico strong. */
.problema__texto p:last-child {
  font-weight: 600;
  letter-spacing: -.01em;
}

@media (max-width: 640px) {
  .problema__texto { font-size: var(--step-0); line-height: 1.45; }
  /* En móvil, a la izquierda. El centrado funciona en escritorio porque la
     columna flota en medio de mucho espacio; en una pantalla estrecha el
     texto centrado deja los renglones dentados y cansa. Pedido por Yvan. */
  .problema { text-align: left; }
  .problema .sec-head,
  .problema .sec-head__title,
  .problema__texto { margin-inline: 0; }
}

.gallery { position: relative; }

.gallery__stage {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--ink-soft));
  overflow: hidden;
}

.slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--s6), 4vw, var(--s12));
  padding: clamp(var(--s6), 4vw, var(--s12));
  align-items: center;
}
.slide[hidden] { display: none; }

/* Ficha del cliente */
.slide__figure { font-family: var(--serif); line-height: .95; }
/* La cifra ya no lleva degradado coral: manda por tamaño y por familia.
   Un dato de 5 rem en serif no necesita color para ser lo primero que se lee. */
.slide__cifra {
  display: block;
  font-size: clamp(3rem, 7vw, 5.2rem);
  letter-spacing: -.03em;
  color: var(--text);
}

/* Testimonio sin cifra: en su lugar va una frase corta del propio cliente.
   Va en cursiva y algo más pequeña para que no se confunda con un dato. */
.slide__cifra--frase {
  font-style: italic;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.05;
}
.slide__detalle {
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: .06em; color: var(--muted);
  margin-top: var(--s3); line-height: 1.5;
}

/* La cita va en SANS desde el 2026-08-23. Antes era Instrument Serif, pero el
   énfasis de dentro (<strong>, que marca las cifras) se pinta en sans 600 y el
   choque serif + negrita sans se veía mal. No había arreglo por el otro lado:
   Instrument Serif solo existe en peso 400, así que ponerle negrita real es
   imposible y la sintética se deforma. Con toda la cita en sans, el énfasis
   encaja solo. */
.slide__cita {
  font-family: var(--sans);
  font-size: var(--step-1);
  line-height: 1.5;          /* la sans pesa más a igual cuerpo: más aire */
  letter-spacing: -.012em;
  margin: var(--s6) 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--accent);
}
/* Y la cursiva también. `.rico em` es cursiva SERIF: dentro de una cita ya en
   sans habría reproducido exactamente el mismo choque que acabamos de quitar,
   solo que con la cursiva en vez de con la negrita. */
.slide__cita em {
  font-family: var(--sans);
  font-style: italic;
  font-size: 1em;
  letter-spacing: -.008em;
}

/* Etiqueta de relación. Todas las fichas comparten galería, pero no todas
   son de clientes: hay quien formó a Patric y gente a la que formó él.
   Se marca en cada ficha en lugar de esconderlo, y va en mono con filete
   porque es un dato de catalogación, no un titular. La lleva TODA ficha,
   también las de cliente: si solo la llevaran las tres excepciones, se
   leerían como una nota a pie, no como un sistema. */
.slide__relacion {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: .3em .7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.slide__persona { display: flex; flex-direction: column; gap: 2px; }
.slide__nombre { font-weight: 600; letter-spacing: -.01em; }
.slide__rol { font-size: var(--step--1); color: var(--muted); }
/* Contexto: se distingue por familia y caja, no por color */
.slide__contexto {
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--muted); margin-top: var(--s2);
  text-transform: uppercase; letter-spacing: .1em;
}

/* Enlace al perfil del cliente. Convierte la cifra en algo comprobable:
   deja de ser una afirmación nuestra y pasa a ser la de alguien localizable.
   Ninguna de las seis webs de la competencia lo hace. */
.slide__perfil {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.slide__perfil svg { width: 15px; height: 15px; flex: 0 0 auto; }
.slide__perfil:hover { color: var(--text); border-bottom-color: var(--accent); }

/* Reproductor */
.player {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line-soft);
}
.player__media, .player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover;
}
/* El vídeo va en `contain`: varios testimonios están grabados en vertical y
   con `cover` se les corta media cara al reproducir. */
.player video.player__media { object-fit: contain; background: #030812; }

/* Los pósters se generan ya recortados a 16/10, el mismo ratio que .player
   (ver tools/posters-16-10.py), así que aquí `cover` no recorta nada y no
   hace falta compensar con object-position. Antes había un `center 22%`
   global que era un compromiso imposible: servía para los verticales de
   móvil y descuadraba los apaisados, o al revés. El encuadre de cada cara
   se decide al generar la imagen, no en CSS. */
.player__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

/* Estado sin póster: bloque de dato, mejor que un hueco gris */
/* Estado sin póster: la ficha se ancla abajo para no competir con el play */
.player__fallback {
  position: absolute; inset: 0;
  display: grid; align-content: end; justify-items: start; gap: var(--s1);
  padding: var(--s6);
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,126,135,.14), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--ink));
}
.player__fallback-empresa {
  font-family: var(--serif); font-size: var(--step-2); letter-spacing: -.02em;
}
.player__fallback-nota {
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* CRÍTICO: `display: grid` de una regla de clase GANA al `[hidden]{display:none}`
   del navegador, así que sin esta línea el botón nunca se ocultaba al montar el
   vídeo. Y como cubre todo el reproductor (inset:0, z-index:2), interceptaba
   los clics y dejaba inalcanzables los controles nativos: no se podía pausar.
   Un solo fallo, dos síntomas. Mismo patrón que ya pasó con el logo del hero.
   Regla: si una clase declara `display` y el JS le pone `hidden`, hace falta
   su `[hidden]` explícito. */
.player__play[hidden] { display: none; }

.player__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center;
  width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}
.player__play:hover { background: rgba(6,16,31,.32); }
.player__play-ring {
  display: grid; place-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(6,16,31,.55);
  border: 1px solid rgba(232,230,225,.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.player__play:hover .player__play-ring { transform: scale(1.08); background: var(--accent); }
.player__play-ring svg { width: 22px; height: 22px; translate: 2px 0; }
.player__play:hover .player__play-ring svg path { fill: #2A0A10; }

.player__dur {
  position: absolute; right: var(--s3); bottom: var(--s3); z-index: 2;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  padding: .3em .6em; border-radius: 6px;
  background: rgba(6,16,31,.7); color: var(--text);
}

/* Controles */
.gallery__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-top: var(--s4); flex-wrap: wrap;
}
.gallery__count { font-family: var(--mono); font-size: var(--step--1); color: var(--muted); letter-spacing: .1em; }
.gallery__count b { color: var(--text); font-weight: 500; }

.gallery__nav { display: flex; gap: var(--s2); }
.iconbtn {
  width: 46px; height: 46px; display: grid; place-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.iconbtn:hover { border-color: var(--accent); background: rgba(255,126,135,.1); transform: translateY(-2px); }
.iconbtn svg { width: 16px; height: 16px; }

.gallery__dots { display: flex; gap: var(--s2); flex-wrap: wrap; }
.gallery__dot {
  width: 26px; height: 3px; border-radius: 2px; padding: 0;
  border: 0; background: var(--line); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease);
}
.gallery__dot[aria-current="true"] { background: var(--accent); width: 42px; }

/* ── 7. AGENDA ─────────────────────────────────────────────────────────── */
/* WhatsApp es el camino primario (decisión de Yvan, 2026-08-15): es el canal
   nativo del B2B español y el formulario cualifica antes de gastar 45 min de
   Pat. Calendly sigue disponible, pero no compite: dos puertas del mismo
   tamaño obligan al visitante a decidir por cuál entrar, y ahí se pierde. */
.agenda__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(var(--s6), 4vw, var(--s10, 2.5rem));
  align-items: start;
}

/* Tarjeta primaria: borde vivo y fondo algo más alto */
.card--primaria {
  border-color: rgba(255, 126, 135, .28);
  background: linear-gradient(180deg, rgba(255,126,135,.06), var(--ink-soft) 45%);
}

/* Tarjeta secundaria: presente, pero un escalón por debajo */
.card--secundaria { background: transparent; }
.card--secundaria .card__title { font-size: var(--step-1); color: var(--muted); }
.card--secundaria .calendly { opacity: .92; }

.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--ink-soft));
  padding: clamp(var(--s6), 3vw, var(--s8));
}
.card__title { font-family: var(--serif); font-size: var(--step-2); margin-bottom: var(--s2); }
.card__help { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--s6); }

.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field__control {
  width: 100%; padding: .8em 1em;
  background: rgba(6,16,31,.55);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field__control::placeholder { color: rgba(134,149,171,.6); }
.field__control:hover { border-color: rgba(232,230,225,.24); }
.field__control:focus-visible { border-color: var(--accent); outline-offset: 1px; }
textarea.field__control { resize: vertical; min-height: 6.5em; }
select.field__control { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238695AB' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: 12px;
  padding-right: 2.6em;
}
select.field__control option { background: var(--ink-soft); color: var(--text); }

.field__error { font-size: var(--step--1); color: var(--accent); min-height: 0; }
.field[data-invalid] .field__control { border-color: var(--accent); }

.form__submit { width: 100%; margin-top: var(--s2); }
.btn__icon { display: inline-flex; }
.btn__icon svg { width: 1.15em; height: 1.15em; }
.form__note { font-size: var(--step--1); color: var(--muted); margin-top: var(--s4); text-align: center; }

.calendly { min-height: 640px; position: relative; }
.calendly__frame { width: 100%; min-height: 640px; border: 0; border-radius: 10px; }
.calendly__loading {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* ── 8. FOOTER ─────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, rgba(11, 22, 51, .5));
  padding: clamp(var(--s12), 8vw, var(--s24)) var(--gutter) var(--s8);
}
.site-foot__grid {
  max-width: var(--container); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s8), 5vw, var(--s16));
  padding-bottom: clamp(var(--s8), 5vw, var(--s12));
  border-bottom: 1px solid var(--line-soft);
}
.site-foot__col--marca { max-width: 34ch; }
.site-foot__logo { height: 25px; width: auto; opacity: .9; margin-bottom: var(--s4); }
.site-foot__claim { font-family: var(--serif); font-size: var(--step-1); margin-bottom: var(--s3); }
.site-foot__titulo {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s4);
}
.site-foot__lista { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.site-foot__lista a,
.site-foot__enlace {
  font-size: var(--step--1); color: var(--text);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-foot__lista a:hover,
.site-foot__enlace:hover { color: var(--muted); border-bottom-color: var(--line); }
.site-foot__enlace {
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0 0 1px; cursor: pointer; text-align: left; font-family: inherit;
}

.site-foot__base {
  max-width: var(--container); margin-inline: auto;
  padding-top: var(--s6);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s8);
  justify-content: space-between;
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--muted); opacity: .72;
}

@media (max-width: 900px) {
  .site-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__col--marca { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 520px) {
  .site-foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .site-foot__base { flex-direction: column; }
}

/* ── 8b. CONSENTIMIENTO DE COOKIES ─────────────────────────────────────── */
.cookies {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  padding: var(--gutter);
  animation: ck-entra .5s var(--ease) both;
}
@keyframes ck-entra { from { opacity: 0; translate: 0 20px; } }

.cookies__caja {
  max-width: 46rem; margin-inline: auto;
  background: rgba(11, 22, 51, .96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(var(--s6), 3vw, var(--s8));
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8);
}
.cookies__titulo { font-family: var(--serif); font-size: var(--step-1); margin-bottom: var(--s3); }
.cookies__texto { font-size: var(--step--1); line-height: 1.6; color: var(--muted); margin-bottom: var(--s6); }
.cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.cookies__acciones .btn { font-size: var(--step--1); padding: .7em 1.3em; }

/* Marcador donde iría un embed bloqueado por falta de consentimiento */
.bloqueado {
  display: grid; place-content: center; gap: var(--s4);
  text-align: center; padding: var(--s8);
  min-height: 320px;
  border: 1px dashed var(--line); border-radius: 10px;
  background: rgba(6, 16, 31, .4);
}
.bloqueado__texto { font-size: var(--step--1); color: var(--muted); max-width: 40ch; }

@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }

/* ── 9. RESPONSIVE ─────────────────────────────────────────────────────── */

/* Tablet: el slide y la agenda pasan a una columna antes que el resto */
@media (max-width: 960px) {
  .slide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }
  /* El vídeo primero: es el argumento, no el acompañamiento */
  .slide__body  { order: 2; }
  .slide .player { order: 1; }

  .agenda__grid { grid-template-columns: minmax(0, 1fr); }
  /* En una columna Calendly necesita más alto, o aparece un scroll interno
     dentro del iframe y el usuario acaba con doble scroll. */
  .calendly, .calendly__frame { min-height: 840px; }
}

@media (max-width: 640px) {
  .site-head__cta { display: none; }
  .hero { padding-top: calc(var(--s16) + var(--s8)); }
  .hero__actions { gap: var(--s3); }
  .hero__actions .btn--solid { flex: 1 1 100%; }
  .hero__scroll { display: none; }

  /* Con el lockup apilado el escenario necesita más alto que ancho */
  .hero__stage { height: clamp(240px, 38vh, 360px); }


  .player { aspect-ratio: 4 / 3; }
  .slide__cita { font-size: var(--step-0); }

  .gallery__bar { justify-content: center; }
  .gallery__count { order: 1; width: 100%; text-align: center; }
  .gallery__dots  { order: 3; justify-content: center; width: 100%; }
  .gallery__nav   { order: 2; }
  .iconbtn { width: 52px; height: 52px; } /* área táctil ≥ 44px */
}

/* Móvil pequeño (360px): sin desbordes ni recortes */
@media (max-width: 400px) {
  .slide__cifra { font-size: clamp(2.4rem, 13vw, 3rem); }
  .gallery__dot { width: 20px; }
  .gallery__dot[aria-current="true"] { width: 32px; }
}

/* ── 10. MOTION ────────────────────────────────────────────────────────── */

/* Entrada del hero: se dispara con el reloj, no con el scroll */
.reveal {
  opacity: 0;
  translate: 0 1.25rem;
  filter: blur(6px);
  animation: reveal var(--dur-slow) var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal {
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* Revelado al entrar en viewport. El observador añade [data-seen]. */
[data-rise] {
  opacity: 0;
  translate: 0 2.5rem;
  transition:
    opacity  .9s var(--ease) var(--rd, 0ms),
    translate .9s var(--ease) var(--rd, 0ms),
    filter   .9s var(--ease) var(--rd, 0ms);
  filter: blur(4px);
}
[data-rise][data-seen] { opacity: 1; translate: 0 0; filter: blur(0); }



/* Cifras de la galería: cuentan al entrar */
.slide__cifra { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; translate: none; filter: none; transition: none; }
}

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

/* ══════════════════════════════════════════════════════════════════════════
   11. COREOGRAFÍA DEL HERO AL HACER SCROLL  (V2, 2026-08-17)
   ETHOS se disuelve y el bloque de texto crece para ocupar su sitio. Todo
   ligado a la posición del scroll, sin anclar la página: el usuario nunca
   pierde el control del scroll.
   ══════════════════════════════════════════════════════════════════════════ */

.hero__inner {
  will-change: transform, opacity;
}

/* Logotipo de la barra. Entra cuando el del hero empieza a irse. */
/* FUERA DEL FLUJO a propósito. Antes era un elemento flex invisible que
   igualmente ocupaba su ancho, así que al cargar la página se veía un agujero
   a la izquierda de la cinta, como si faltara algo. Ahora la cinta arranca
   pegada al borde y se ve entera; el logo entra por encima cuando el ETHOS de
   partículas empieza a disolverse.
   El centrado va por top/bottom + flex y NO por translate, porque translate lo
   usa la animación de entrada y pisarlo rompería el desplazamiento. */
.site-head__logo {
  position: absolute;
  left: var(--gutter);
  top: 0; bottom: 0;
  z-index: 2;
  display: flex; align-items: center;
  opacity: 0;
  translate: 0 -6px;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease);
}
.site-head__logo[data-visible] { opacity: 1; translate: 0 0; pointer-events: auto; }
.site-head__logo img { height: 20px; width: auto; display: block; }
.site-head__logo:hover { opacity: .78; }

@media (max-width: 640px) {
  .site-head__logo img { height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner { transform: none !important; }
  .site-head__logo { transition: none; }
}

/* ── 12. BLOQUES DE COPY NUEVOS (V2) ───────────────────────────────────── */

/* Los tres diagnósticos. Cada uno contradice una creencia del prospecto, así
   que van sueltos y con aire, no apretados en una lista con viñetas. */
.diagnosticos {
  list-style: none; padding: 0;
  display: grid; gap: var(--s4);
  margin-bottom: clamp(var(--s8), 5vw, var(--s12));
  max-width: 62ch;
}
.diagnosticos__item {
  position: relative;
  padding-left: var(--s6);
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
}
.diagnosticos__item::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: var(--s3); height: 1px; background: var(--line);
}

/* Qué se lleva de la llamada */
.entregables {
  list-style: none; padding: 0;
  display: grid; gap: var(--s3);
  margin-bottom: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line-soft);
}
.entregables li {
  position: relative; padding-left: var(--s6);
  font-size: var(--step--1); color: var(--muted); line-height: 1.5;
}
.entregables li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 1px; background: var(--muted); opacity: .6;
}

/* Descalificación honesta */
.form__filtro {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}

/* Nota de método de la galería */
/* Nota de método. Es la única sección de la página que explica CÓMO se midió
   lo que se afirma, y ninguna web de la competencia lo hace: no puede ir en
   letra pequeña. Antes iba en monoespaciada, al menor tamaño del sistema, en
   color apagado Y con opacity .8 encima: cuatro capas de silencio sobre el
   argumento más difícil de copiar que tenemos. */
.gallery__metodo {
  margin-top: var(--s12);
  max-width: 40ch;
  padding: var(--s3) 0 var(--s3) var(--s6);
  border-left: 2px solid var(--accent);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--text);
}
/* El remate cierra en el acento de la casa, como los titulares de sección.
   Aquí la letra que se hereda es la SANS, porque el bloque va en sans: «misma
   letra que el titular» significa la del bloque, no la serif de los titulares.
   El salto de línea que tenía antes (display:block) se quitó el 08/09: con la
   palabra ya al mismo cuerpo, el renglón aparte era exactamente lo que Pat
   señaló como «añadir cosas que no añaden». Ahora cierra la frase en línea. */
.gallery__metodo:has(em) { color: rgba(232, 230, 225, .70); }
.gallery__metodo em {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: none;
  line-height: inherit;
  color: var(--text);
}

/* ── 13. PÁGINAS LEGALES ───────────────────────────────────────────────── */
.legal {
  max-width: 46rem; margin-inline: auto;
  padding: calc(var(--s24) + var(--s8)) var(--gutter) var(--s24);
}
.legal__volver {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s8);
}
.legal__volver:hover { color: var(--text); }
.legal__titulo { font-family: var(--serif); font-size: var(--step-4); margin-bottom: var(--s3); }
.legal__fecha {
  font-family: var(--mono); font-size: var(--step--1); color: var(--muted);
  padding-bottom: var(--s8); margin-bottom: var(--s8);
  border-bottom: 1px solid var(--line-soft);
}
.legal h2 {
  font-family: var(--serif); font-size: var(--step-2);
  margin: var(--s12) 0 var(--s4);
}
.legal h3 {
  font-size: var(--step-0); font-weight: 600;
  margin: var(--s6) 0 var(--s2);
}
.legal p, .legal li { color: var(--muted); line-height: 1.7; margin-bottom: var(--s4); }
.legal strong { color: var(--text); font-weight: 600; }
.legal ul { padding-left: var(--s6); margin-bottom: var(--s4); }
.legal li { margin-bottom: var(--s2); }
.legal a { color: var(--text); border-bottom: 1px solid var(--line); }
.legal a:hover { border-bottom-color: var(--accent); }
.legal table {
  width: 100%; border-collapse: collapse; margin-bottom: var(--s6);
  font-size: var(--step--1);
}
.legal th, .legal td {
  text-align: left; padding: var(--s3);
  border-bottom: 1px solid var(--line-soft); color: var(--muted);
}
.legal th { color: var(--text); font-weight: 600; }
.legal__pendiente {
  background: rgba(255, 126, 135, .1);
  border: 1px dashed rgba(255, 126, 135, .4);
  border-radius: 4px; padding: .1em .4em;
  font-family: var(--mono); font-size: .9em; color: var(--accent);
}