/* =============================================================================
   KYRION · sitio web — hoja del sitio
   Consume tokens.css, que es una COPIA del DS v3 (design-system-v3/tokens.css)
   que sincroniza _build/empaquetar.js. Los valores se cambian allá, no acá.

   Esta hoja reimplementa a escala de sitio los componentes del software que
   el sitio necesita (botón, badge, cifra, barra segmentada, campo, panel
   claro). No carga components.css del DS: ese archivo está afinado para la
   densidad de la app (13–14 px) y para un sitio había que pisar casi todo.
   Las reglas del DS se respetan igual:
     · la forma dice qué es: pill se toca, rectángulo redondeado contiene;
     · el radio decrece hacia adentro: 32 → 24 → 20 → 16 → 10;
     · el lima es marca, acción y foco — nunca un estado — y se usa con avaricia;
     · el panel claro (#F2F0EA) es una superficie del sistema, no un tema;
     · nunca lima como texto sobre claro (1.17:1).

   Convenciones: BEM en castellano, estados con `is-`, ganchos de JS con
   `data-*`. Nunca se selecciona por id.
   ========================================================================== */

/* =============================================================================
   01 · TOKENS DEL SITIO
   La escala tipográfica del DS es de interfaz (13–22 px): un sitio se lee a
   otra distancia, así que se extiende con clamp().

   Tipografía de MARCA (manual v2.0, hoja 08), por decisión de Rocío el
   20-10-2026: Archivo carga el peso —titulares y cifras en Bold 700 a −0.02 em,
   cuerpo en Medium 500— e IBM Plex Mono va en todo lo que rodea al contenido:
   etiquetas, metadatos y estados, en 400 · 11 px · +0.2 em · caja alta.
   Se pisa acá y no en tokens.css, que es copia del DS del producto (que usa
   Outfit + Manrope: una diferencia sabida entre la marca y el producto).
   ========================================================================== */

:root {
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-cuerpo: 500;
  --fw-titulo: 700;
  --ls-titulo: -0.02em;
  --fs-etq:    11px;
  --ls-etq:    0.2em;

  /* "Contrataciones" en Archivo Bold mide 7.08 veces el cuerpo; la columna
     del texto del hero tiene 597 px a 1440: el tope queda en 84. */
  --fs-hero:   clamp(42px, 5.8vw, 84px);
  --fs-sec:    clamp(32px, 4.2vw, 58px);
  --fs-dato:   clamp(26px, 2.4vw, 34px);
  --fs-h3w:    clamp(19px, 1.55vw, 22px);
  --fs-lead:   clamp(18px, 1.45vw, 21px);
  --fs-texto:  clamp(16px, 1.15vw, 17px);
  --fs-chico:  14px;
  --fs-cifra:  clamp(38px, 4.2vw, 56px);

  /* El aire lateral sale de la misma fórmula en todo el sitio, también dentro
     de los paneles claros (ver .panel-claro): el logo, los títulos y el borde
     de los paneles caen en el mismo x a cualquier ancho. */
  --gutter:      clamp(16px, 3.4vw, 40px);
  --sec-y:       clamp(88px, 10vw, 144px);
  --cabecera-h:  72px;

  --tr-rapida: var(--dur-fast) var(--ease);
  --tr-media:  var(--dur-base) var(--ease);
}

/* con el botón de menú en vez de la cápsula, la cabecera baja a 64 */
@media (max-width: 1099px) {
  :root { --cabecera-h: 64px; }
}

/* =============================================================================
   02 · BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Las anclas caen debajo de la cabecera pegada, no detrás. */
  scroll-padding-top: calc(var(--cabecera-h) + var(--sp-4));
  background: var(--bg-canvas);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--ink);
  font: var(--fw-cuerpo) var(--fs-texto)/1.6 var(--font-ui);
  font-synthesis: none;   /* nunca negritas ni itálicas falsas */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* Los íconos son de trazo. El mapa y el reloj NO: si heredaran este trazo,
   los <rect> de sus patrones tomaban el color del texto —las bandas del mapa
   salían blancas y el rayado del reloj, una trama cruzada— y la punta
   redonda convertía las marcas del reloj en bolitas. */
svg:not(.mapa__svg, .reloj__svg) { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

p, h1, h2, h3, figure, dl, dd, ul, ol { margin: 0; }
/* Sin palabras sueltas al final de un párrafo ("Confidencialidad / total."). */
p, li, dd, td { text-wrap: pretty; }
ul[class], ol[class], nav ul { list-style: none; padding: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--k-brand-400); color: var(--k-dark-950); }

/* El contexto claro también es una preferencia de los controles nativos:
   sin esto, el radio y la barra del textarea salían oscuros sobre hueso. */
.ctx-light { color-scheme: light; }
.ctx-dark  { color-scheme: dark; }

/* Foco: anillo de marca con aire. Sobre el relleno lima el anillo se separa
   con el offset; sobre claro, --focus-ring ya es el verde medio. */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }

/* Fijo y no absoluto: si la página se recarga a mitad de camino (el navegador
   restaura el scroll), un salto absoluto recibía el foco fuera de la pantalla. */
.saltar {
  position: fixed; left: var(--gutter); top: var(--sp-2); z-index: 100;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  background: var(--k-brand-400); color: var(--k-dark-950);
  font-weight: var(--fw-bold); text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--tr-rapida);
}
.saltar:focus-visible { transform: none; outline-color: var(--k-dark-0); }

main:focus { outline: none; }

/* =============================================================================
   03 · TIPOGRAFÍA DE SECCIÓN
   ========================================================================== */

.titulo-sec {
  font: var(--fw-titulo) var(--fs-sec)/1.04 var(--font-display);
  letter-spacing: var(--ls-titulo);
  text-wrap: balance;
  max-width: 24ch;
}

/* Un título de varias frases corta entre frases antes que adentro de una:
   "La velocidad no es la promesa. / La asertividad, sí." y no "…promesa. La /
   asertividad, sí." con el artículo colgando al final de la línea. */
.frase { display: inline-block; }

/* --- Etiquetas de marca: IBM Plex Mono 400 · 11 px · +0.2 em · caja alta.
       Todo lo que rodea al contenido —rótulos, metadatos, estados del
       sistema— va acá. Las reglas de cada componente NO declaran font: si lo
       hicieran, por estar escritas después le ganarían a este rol. ---------- */
.k-badge, .cifra__rotulo,
.evaluador__nota-rotulo, .evaluador__sello,
.banda__nombre, .banda__leyenda, .pasos thead th, .pasos__fase-sub,
.embudo__unidad, .etapa__nombre, .medidor__rotulo, .medicion__rotulos,
.pilar__rotulo, .comp thead th, .leyenda, .audiencia__rotulo, .sc thead th,
.trayectoria__rotulo, .respaldo__rotulo, .contacto__datos dt, .campo__rotulo, .pie__lema,
.hero__ficha-rotulo, .hero__ficha-rol {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-etq);
  line-height: 1.4;
  letter-spacing: var(--ls-etq);
  text-transform: uppercase;
}

.cabeza-sec {
  display: grid;
  gap: var(--sp-6) var(--sp-9);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.cabeza-sec__titulos { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.cabeza-sec--partida { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
.cabeza-sec__bajada {
  font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2);
  max-width: 32ch; justify-self: end; text-wrap: pretty;
}
@media (max-width: 899px) {
  .cabeza-sec--partida { grid-template-columns: minmax(0, 1fr); }
  .cabeza-sec__bajada { justify-self: start; }
}

/* =============================================================================
   04 · COMPONENTES DEL DS, A ESCALA DE SITIO
   ========================================================================== */

/* --- Botón: pill siempre ------------------------------------------------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font: var(--fw-bold) 15px/1 var(--font-ui);
  letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--tr-rapida), border-color var(--tr-rapida),
              color var(--tr-rapida), transform var(--tr-rapida), box-shadow var(--tr-rapida);
}
.k-btn:active { transform: translateY(1px); }
.k-btn svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform var(--tr-media); }
.k-btn:hover svg { transform: translateX(2px); }
.k-btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: 16px; }

.k-btn--primary {
  background: var(--k-brand-400); color: var(--k-dark-950);   /* 14.64:1 — el blanco daría 1.33:1 */
  box-shadow: var(--sh-brand);
}
.k-btn--primary:hover  { background: var(--k-brand-500); }
.k-btn--primary:active { background: var(--k-brand-600); }

.k-btn--secondary { background: var(--bg-tile); border-color: var(--line); color: var(--ink); }
.k-btn--secondary:hover { background: var(--bg-hover); border-color: var(--line-strong); }

/* El oscuro sobre el panel claro: la acción de la card de candidatos. No es
   un segundo primary — esa vista ya tiene el lima de "Iniciar una búsqueda". */
.k-btn--oscuro { background: var(--k-dark-850); border-color: var(--k-dark-600); color: var(--k-dark-0); }
.k-btn--oscuro:hover { background: var(--k-dark-700); }

/* La flecha en un círculo, pegada al borde derecho del pill (el "View my
   work" de la referencia). El aire del círculo al borde es el mismo arriba,
   abajo y a la derecha: 6 px, contando el borde de 1 px del botón. */
.k-btn--circulo { padding-right: 5px; gap: var(--sp-3); }
.k-btn__circulo {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--k-brand-400); color: var(--k-dark-950);
}
.k-btn--lg .k-btn__circulo { width: 40px; height: 40px; }
.k-btn--primary .k-btn__circulo { background: var(--k-dark-950); color: var(--k-brand-400); }
.k-btn__circulo svg { width: 18px; height: 18px; }

/* Acción secundaria como texto con flecha ("Hire me →"): una sola acción
   lima por vista; la otra no compite. */
.k-btn--texto { padding-inline: var(--sp-2); background: transparent; color: var(--ink); }
.k-btn--texto > span {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--tr-rapida);
}
.k-btn--texto:hover > span { text-decoration-color: currentColor; }

/* --- Badge: estado o rótulo del sistema. No se toca: rectángulo de 10 ----- */
.k-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  /* El tracking deja aire después de la última letra: se descuenta del padding
     derecho para que la etiqueta quede centrada en su caja. */
  min-height: 28px; padding: 5px calc(10px - 0.14em) 4px 10px;
  border-radius: var(--r-chip);
  background: var(--bg-hover); color: var(--ink-2);
  letter-spacing: 0.14em; line-height: 1; white-space: nowrap;
}
.k-badge svg { width: 15px; height: 15px; flex: 0 0 auto; }
.k-badge img { width: 20px; height: 18px; flex: 0 0 auto; }
.k-badge--sm { min-height: 22px; padding: 4px calc(8px - 0.14em) 3px 8px; font-size: 10px; }
/* Una sola familia de color en todo el sitio: los verdes de Kyrion. Por
   pedido de Rocío (20-10-2026) los estados —la discrepancia, el contratado,
   el aviso del formulario— también van en verde, no en el semáforo del DS
   del producto. El rojo queda sólo para los errores del formulario. */
.k-badge--marca   { background: var(--accent-wash); color: var(--accent-text); }
.k-badge--neutro  { background: var(--bg-hover); color: var(--ink-2); }
.ctx-light .k-badge--neutro { background: var(--k-light-200); color: var(--k-light-800); }

/* --- Cifra: el numeral manda; la unidad va chica y apagada --------------- */
.cifras {
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--sp-6);
}
.cifras--4 { --n: 4; }
.cifras--3 { --n: 3; }
.cifras--2 { --n: 2; }
/* El valor va abajo y el rótulo arriba: si un rótulo ocupa dos líneas, los
   numerales de la fila siguen en el mismo y. Sin esto "10" caía 18 px más
   abajo que "25" y "3" en cuanto "Años en executive search" se partía. */
.cifra { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
.cifra__rotulo { color: var(--ink-3); text-wrap: balance; }
.cifra__valor {
  display: flex; align-items: baseline; gap: 6px;
  font: var(--fw-titulo) var(--fs-cifra)/0.9 var(--font-display);
  letter-spacing: var(--ls-titulo);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cifra__unidad {
  font: var(--fw-medium) clamp(15px, 1.2vw, 18px)/1 var(--font-ui);
  letter-spacing: 0; color: var(--ink-3);
}
/* Un signo (el + de 25+) no es una unidad: a tamaño de unidad y en la línea
   de base se leía como un punto. Va arriba, como exponente, y apagado. */
.cifra__signo {
  align-self: flex-start;
  font: var(--fw-medium) 0.5em/1 var(--font-display);
  letter-spacing: 0; color: var(--ink-3);
  margin: 0.04em 0 0 -2px;
}
@media (max-width: 899px) {
  .cifras--4 { --n: 2; row-gap: var(--sp-8); }
}

/* --- Marcador: lo que todavía no existe (correo, teléfonos, URLs) --------- */
.marcador {
  display: inline-block;
  padding: 2px 8px; border-radius: 6px;
  border: 1px dashed var(--line-strong);
  font: var(--fw-medium) 13px/1.5 var(--font-mono);
  color: var(--ink-2); letter-spacing: 0.02em;
}

/* --- La regla del logo: franjas que se disuelven hacia la izquierda y
       terminan en un tramo sólido. Es el subrayado de la palabra clave. ----
   La forma es la del maestro, pieza por pieza: la escribe _build/regla.js
   (no se edita a mano). Las franjas se ensanchan de a poco hacia la derecha
   (2,22 › 3,33 › 4,44 u) y el último hueco es la mitad de los otros: entran
   al tramo sólido sin corte. */
.regla {
  position: relative; white-space: nowrap;
  --regla-forma: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20414%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200h2.22v1h-2.22zM4.44%200h2.22v1h-2.22zM8.88%200h3.33v1h-3.33zM14.43%200h3.33v1h-3.33zM19.98%200h3.33v1h-3.33zM25.53%200h3.33v1h-3.33zM31.08%200h3.33v1h-3.33zM36.63%200h3.33v1h-3.33zM42.18%200h3.33v1h-3.33zM47.73%200h3.33v1h-3.33zM53.28%200h3.33v1h-3.33zM58.83%200h3.33v1h-3.33zM64.38%200h3.33v1h-3.33zM69.93%200h3.33v1h-3.33zM75.47%200h3.33v1h-3.33zM81.02%200h3.33v1h-3.33zM86.57%200h3.33v1h-3.33zM92.12%200h3.33v1h-3.33zM97.67%200h3.33v1h-3.33zM103.22%200h3.33v1h-3.33zM108.77%200h3.33v1h-3.33zM114.32%200h3.33v1h-3.33zM119.87%200h3.33v1h-3.33zM125.42%200h3.33v1h-3.33zM130.97%200h3.33v1h-3.33zM136.52%200h3.33v1h-3.33zM142.07%200h3.33v1h-3.33zM147.62%200h3.33v1h-3.33zM153.17%200h3.33v1h-3.33zM158.72%200h3.33v1h-3.33zM164.27%200h3.33v1h-3.33zM169.82%200h3.33v1h-3.33zM175.37%200h3.33v1h-3.33zM180.92%200h3.33v1h-3.33zM186.47%200h3.33v1h-3.33zM192.02%200h3.33v1h-3.33zM197.57%200h3.33v1h-3.33zM203.12%200h3.33v1h-3.33zM208.67%200h3.33v1h-3.33zM214.21%200h3.33v1h-3.33zM219.76%200h3.33v1h-3.33zM225.31%200h3.33v1h-3.33zM230.86%200h3.33v1h-3.33zM236.41%200h3.33v1h-3.33zM241.96%200h3.33v1h-3.33zM247.51%200h3.33v1h-3.33zM253.06%200h4.44v1h-4.44zM259.72%200h4.44v1h-4.44zM266.38%200h4.44v1h-4.44zM273.04%200h4.44v1h-4.44zM278.59%200h135.41v1h-135.41z%22%2F%3E%3C%2Fsvg%3E");
}
/* Debajo de los descendentes: en Archivo la "g" baja 0.19 em de la línea de
   base y el área de la letra termina en 0.22. Con bottom: 0.05em la barra
   quedaba entre 0.09 y 0.17 em y la cola de la "g" de "ciegas" la cruzaba.
   Ahora arranca a 0.26 em, con aire.
   El color es el degradé de la regla del maestro (manual, hoja 04): arranca
   transparente y pasa por los dos verdes del logo hasta el lima. */
.regla::after {
  content: ""; position: absolute; left: 0.02em; right: 0.06em; bottom: -0.12em;
  height: 0.075em; min-height: 4px;
  background: linear-gradient(90deg, rgb(17 87 8 / 0) 3.37%, var(--k-brand-800) 24.04%, var(--k-brand-700) 45.19%, var(--k-brand-400));
  -webkit-mask: var(--regla-forma) 0 0 / 100% 100% no-repeat;
          mask: var(--regla-forma) 0 0 / 100% 100% no-repeat;
}
/* Sobre el panel claro, lima a una tinta (pedido de Rocío: "del color de
   Kyrion"): el degradé pasa a ser sólo de opacidad, como las versiones a una
   tinta del manual. El verde profundo del maestro, sobre el hueso, pesaría
   más a la izquierda que el tramo sólido. */
.ctx-light .regla::after {
  background: linear-gradient(90deg, rgb(165 245 65 / 0) 3.37%, rgb(165 245 65 / 0.35) 24.04%, rgb(165 245 65 / 0.7) 45.19%, var(--k-brand-400));
}

/* --- La foto pasa a color al pasar el mouse (pedido de Rocío) --------------
   Encima del duotono va una capa en color, transparente: es el mismo duotono
   más el croma de la foto (_build/imagenes.js y persona-hero.js), así que al
   fundirse no cambia la luz, sólo entra el color. Con el teclado aparece con
   el foco visible. En pantallas táctiles no hay hover: el <source> con
   media="(hover: none)" le da un GIF de 1 px y la foto en color no se baja.
   El <picture> no arma caja: la capa se ubica igual que la foto de abajo. */
.foto-color { display: contents; }
.foto-color__img { opacity: 0; transition: opacity 420ms var(--ease-out); }
@media (hover: hover) {
  .pilar:hover .foto-color__img,
  .audiencia:hover .foto-color__img,
  .equipo__retrato:hover .foto-color__img { opacity: 1; }
}
.audiencia:has(:focus-visible) .foto-color__img { opacity: 1; }
/* Las personas de "Tres evaluadores" no pasan a color: se quedan en el verde
   de su seda (pedido de Rocío, 21-10-2026). */

/* =============================================================================
   05 · CABECERA
   (la franja de borrador salió el 22-10-2026, con la versión final)
   ========================================================================== */

.cabecera {
  position: sticky; top: 0; z-index: 50;
}
/* El vidrio va en un pseudo-elemento y NO en la cabecera: un backdrop-filter
   en la cabecera la vuelve el bloque contenedor de todo lo `position: fixed`
   de adentro, y el menú de teléfono se medía contra sus 64 px de alto en vez
   de contra la pantalla — abría, pero sin fondo, con los links flotando sobre
   el hero. */
.cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(11 13 7 / 0.92);   /* a .86 sobre los paneles claros el vidrio quedaba gris */
  -webkit-backdrop-filter: saturate(140%) blur(16px);
          backdrop-filter: saturate(140%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transition: opacity var(--tr-media);
  pointer-events: none;
}
.cabecera.is-pegada::before,
.cabecera.is-abierta::before { opacity: 1; }
.cabecera__barra {
  height: var(--cabecera-h);
  display: flex; align-items: center; gap: var(--sp-6);
}
.cabecera__logo { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; border-radius: var(--r-chip); }
/* El logo completo, con la regla y TALENT SEARCH REWIRED (pedido de Rocío),
   del alto de los botones de la cabecera: 44 px (165 de ancho). Con los 240 px
   que pide el manual como mínimo del lockup con slogan medía 64 y le ganaba a
   todo ("que no sea tan grande, proporcionado con lo demás"). A este tamaño la
   caja alta del slogan queda en 4,6 px (el manual pide 6,5): nítido en
   pantallas de alta densidad, chico en un monitor común. Se centra la caja
   entera, como una pieza. En celular no entra y va el wordmark solo, a 24 px
   de alto: el globo queda arriba del mínimo de 20 del manual. */
.cabecera__lockup { display: block; width: 165px; height: auto; }
.cabecera__wordmark { display: none; height: 24px; width: auto; }
@media (max-width: 599px) {
  .cabecera__lockup { display: none; }
  .cabecera__wordmark { display: block; }
}

.nav { margin-inline: auto; }
/* La cápsula clara del nav del software (k-flexnav): las secciones en hueso,
   la actual en lima. Peso fijo en todas: si la actual pasara a 700, el ancho
   cambiaría con el scroll y la cápsula bailaría. */
.nav__capsula {
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: var(--r-pill);
  background: var(--k-light-100);
}
.nav__link {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  color: var(--k-light-800); text-decoration: none;
  font: var(--fw-semi) var(--fs-chico)/1 var(--font-ui);
  transition: background var(--tr-rapida), color var(--tr-rapida);
}
.nav__link:hover { background: var(--k-light-200); color: var(--k-light-900); }
.nav__link[aria-current="true"] { background: var(--k-brand-400); color: var(--k-dark-950); }
.nav__link:focus-visible { outline-color: var(--k-brand-700); outline-offset: 2px; }

.cabecera__acciones { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }

/* Idioma: el seleccionado en hueso y no en lima. La cabecera ya tiene dos
   lima (la sección actual y el CTA); un tercero le quita peso a los dos. */
.idioma {
  display: inline-flex; gap: 2px; padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-tile);
  box-shadow: inset 0 0 0 1px var(--line);
}
.idioma__opcion {
  min-width: 40px; height: 36px; padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3);
  font: var(--fw-medium) 12px/1 var(--font-mono); letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--tr-rapida), color var(--tr-rapida);
}
.idioma__opcion:hover { color: var(--ink); }
.idioma__opcion[aria-pressed="true"] { background: var(--k-dark-0); color: var(--k-dark-950); }

.cabecera__menu {
  display: none; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg-tile); color: var(--ink);
  font: var(--fw-semi) var(--fs-chico)/1 var(--font-ui);
  cursor: pointer;
}
.cabecera__menu svg { width: 20px; height: 20px; }

/* Menú de teléfono y tableta */
.menu-movil {
  position: fixed; inset: var(--cabecera-h) 0 0 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-6) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom));
  background: var(--bg-canvas);
  overflow-y: auto;
}
.menu-movil[hidden] { display: none; }
.menu-movil__nav ul { list-style: none; margin: 0; padding: 0; }
.menu-movil__nav a {
  display: flex; align-items: center; min-height: 64px;
  border-bottom: 1px solid var(--line);
  font: var(--fw-titulo) clamp(28px, 7vw, 40px)/1 var(--font-display);
  letter-spacing: var(--ls-titulo); text-decoration: none; color: var(--ink);
}
.menu-movil__nav a:active { color: var(--accent-text); }
.menu-movil__acciones { display: grid; gap: var(--sp-3); }
.is-menu-abierto { overflow: hidden; }

/* El nav expandido mide ~460 px y con el logo completo (165), idioma y CTA la
   cabecera pide ~1040: debajo de 1100 pasa a botón de menú en vez de partirse
   en dos filas. A 1100 entre logo y cápsula quedan ~40 px. */
@media (max-width: 1099px) {
  .nav, .cabecera__cta { display: none; }
  .cabecera__acciones { margin-left: auto; }
  .cabecera__menu { display: inline-flex; }
}
@media (min-width: 1100px) {
  .menu-movil { display: none !important; }
}
@media (max-width: 380px) {
  .cabecera__wordmark { height: 21px; }
  .cabecera__barra { gap: var(--sp-3); }
  .cabecera__menu span { display: none; }
  .cabecera__menu { padding: 0; width: 44px; justify-content: center; }
}

/* =============================================================================
   06 · HERO
   La composición de la referencia —retrato recortado delante de un círculo
   grande, la cabeza saliendo por arriba— hecha con el globo del logo en vez de
   un disco de color. La persona "pisa" el filete de marca que abre las cifras:
   la foto se corta justo ahí, y el corte se lee como piso y no como un borde.
   ========================================================================== */

/* Abajo, aire antes de la escena del reloj: su haz de luz arrancaba pegado a
   los números de las cifras (pedido de Rocío: "más espaciado arriba y abajo"). */
/* overflow-x: clip: la persona es más ancha que su caja (sentada en un sillón)
   y en teléfono sangra contra el borde; clip y no hidden, para no crear un
   contenedor de scroll. */
.hero { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 96px); overflow-x: clip; }
.hero__grid {
  --hero-gap: clamp(32px, 6vw, 86px);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--hero-gap);
  align-items: center;
}
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-7); padding-block: var(--sp-6); }
.hero__kicker { margin-bottom: calc(-1 * var(--sp-2)); }
.hero__titulo {
  font: var(--fw-titulo) var(--fs-hero)/0.96 var(--font-display);
  letter-spacing: var(--ls-titulo);
}
/* "que funcionan." no se separa: la palabra subrayada no queda sola. */
.hero__linea { white-space: nowrap; }
/* La palabra clave en lima, con la regla del logo debajo: el acento de la
   referencia, con el gesto de la marca. Lima sobre carbón: 14.6:1. */
.hero__acento { color: var(--accent-text); }
.hero__bajada { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 31ch; text-wrap: pretty; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }

/* --- El lado visual --------------------------------------------------------
   Todo en porcentajes de una caja de proporción fija (597 × 660): el centro
   de la elipse del globo cae sobre la cara a cualquier ancho. La elipse tiene
   su centro al 57.4% del dibujo del globo, que va pegado a la derecha, así
   que cae en 100% − 42.6% × ancho-del-globo. La persona se corre a la
   izquierda lo que mide la mitad de su cara dentro de su propio ancho.
   Cambiar de foto es cambiar las tres variables de la persona (salen de
   _build/persona-hero.json), no las cuentas. */
/* Contenedor: el panel se compacta según el tamaño REAL de la caja, que
   depende del ancho y también del alto de la ventana (a 1366 × 768 mide lo
   mismo que a 1024). Con media queries por ancho, 1366 quedaba afuera. */
.hero__lado { position: relative; align-self: end; container-type: inline-size; }
/* El hero entero —con la fila de cifras— entra en la primera pantalla: a
   1440 × 900 la caja de 660 dejaba los números cortados contra el borde. El
   alto sale de la ventana (menos cabecera, aviso y cifras: ~324 px) y el ancho
   de ese alto, sin pasarse nunca de la columna. */
@media (min-width: 1024px) {
  .hero__lado {
    justify-self: end;
    width: min(calc((100cqw - var(--hero-gap)) / 2), calc(clamp(440px, 100vh - 324px, 660px) * 597 / 660));
    width: min(calc((100cqw - var(--hero-gap)) / 2), calc(clamp(440px, 100svh - 324px, 660px) * 597 / 660));
  }
}
.hero__visual {
  --persona-alto: 1.04;           /* alto del recorte sobre el alto de la caja */
  --persona-aspecto: 0.6683;      /* ancho / alto del recorte                  */
  --persona-cara: 0.48;         /* centro de la cara, en fracción de su ancho */
  --globo-ancho: 1.25;
  /* Corre el globo y la persona juntos, en % del ancho de la caja (positivo,
     a la izquierda): deja lugar para la ficha al lado de la cabeza sin
     despegar la cara del centro del globo. Con la ejecutiva, el pelo suelto
     llega a los hombros y la ficha quedaba a 9 px. */
  --desvio: 5%;
  position: relative; isolation: isolate;
  aspect-ratio: 597 / 660;
  /* Recorta sólo el borde de abajo: la cabeza, la ficha y la disolución del
     globo pueden salir por arriba y por los costados. */
  clip-path: inset(-50% -50% 0 -50%);
}
.hero__globo {
  position: absolute; z-index: -1;
  right: var(--desvio); top: 11.4%;
  width: calc(var(--globo-ancho) * 100%); height: auto; max-width: none;
  pointer-events: none;
}
/* 110.553% = 660 / 597: pasa el alto de la persona a fracción del ancho */
.hero__persona {
  position: absolute; top: 0.5%;
  left: calc(100% - var(--desvio) - var(--globo-ancho) * 42.6% - var(--persona-cara) * var(--persona-alto) * var(--persona-aspecto) * 110.553%);
  width: auto; height: calc(var(--persona-alto) * 100%); max-width: none;
}

/* Ficha flotante: el resultado del proceso —la persona correcta, 1 de 150—
   con el estado en el verde de "ok" del semáforo del DS (no en lima: el lima
   nunca es un estado). */
.hero__ficha {
  position: absolute; right: -5%; top: 15%;
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 172px;
  /* "SEGUIMIENTO A 12 MESES" sin cortar mide 200 px y la ficha llegaba al pelo:
     con tope, el rótulo pasa a dos líneas */
  max-width: 184px;
  padding: var(--sp-4) var(--sp-5) var(--sp-4);
  border-radius: var(--r-tile);
  background: var(--k-dark-850);
  box-shadow: var(--sh-xl), inset 0 0 0 1px rgb(237 240 230 / 0.05);
}
.hero__ficha-cifra {
  display: flex; align-items: baseline; gap: 4px;
  font: var(--fw-titulo) 40px/0.9 var(--font-display); letter-spacing: var(--ls-titulo);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.hero__ficha-de { font: var(--fw-medium) 0.45em/1 var(--font-ui); letter-spacing: 0; color: var(--ink-3); }
.hero__ficha-rotulo { color: var(--ink-3); margin-top: var(--sp-2); }
.hero__ficha-estado {
  align-self: stretch;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.hero__ficha-rol { color: var(--ink-3); font-size: 10px; letter-spacing: 0.14em; margin-top: var(--sp-2); }

/* --- Fragmento de producto: el aviso de discrepancia ----------------------
   En chico, como una notificación del software: el estado, el criterio y las
   tres notas. La versión anterior —un panel con tres barras de diez tramos y
   la frase de la regla— ocupaba un tercio del lado visual, le tapaba medio
   cuerpo a la persona y le peleaba al título (Rocío: "molesto, ocupa mucho
   espacio"). La frase queda para el lector de pantalla; el método la explica.
   Vidrio esmerilado: sobre las bandas del globo y la persona se lee igual. */
.aviso {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 14px;
  border-radius: var(--r-tile);
  background: rgb(20 23 15 / 0.84);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--sh-xl), inset 0 0 0 1px rgb(237 240 230 / 0.07);
  color: var(--ink);
}
.aviso__estado {
  display: flex; align-items: center; gap: 6px;
  font: 400 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
}
.aviso__estado svg { width: 14px; height: 14px; flex: 0 0 auto; }
.aviso__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.aviso__criterio { font: var(--fw-titulo) 15px/1.2 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.aviso__notas { display: flex; align-items: center; gap: var(--sp-3); }
.aviso__nota { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.aviso__nota svg { width: 15px; height: 15px; }
.aviso__nota img { width: 16px; height: 14px; }
.aviso__nota b { font: var(--fw-titulo) 17px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
/* la nota que no coincide, en lima: es la de Kyrion */
.aviso__nota--kyrion b { color: var(--accent-text); }

/* Abajo a la izquierda, asomado al hueco entre columnas: tapa el apoyabrazos,
   nunca la cara (el e2e lo mide en ocho tamaños). */
.hero__panel { position: absolute; z-index: 1; left: -14%; bottom: 8%; width: max-content; }

/* --- Cifras del hero, con el filete de marca de 4 px (k-panel--marca).
       Sin margen arriba: es el piso sobre el que está parada la persona. --- */
.hero__cifras {
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 4px solid transparent;
  border-image: var(--grad-brand) 1;
}

/* Escritorio chico (hasta 1439, que incluye los 1366 × 768 de tantas
   notebooks): la caja baja a ~450 px y llega al borde del contenido, así que
   la ficha no puede salir a la derecha. Va más chica y el globo y la persona
   se corren a la izquierda (sobre el hueco entre columnas, donde el globo se
   disuelve) hasta dejarle lugar al lado de la cabeza. Bajada al costado del
   brazo quedaba en fila con el aviso, a 15 px. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero__visual { --desvio: 14%; }
  /* 162 y no 150: el sello "CONTRATADO" mide 123 px y adentro quedaban 118 */
  .hero__ficha { right: -6%; min-width: 0; max-width: 162px; padding: var(--sp-3) var(--sp-4); }
  .hero__ficha-cifra { font-size: 32px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__ficha { right: -2%; }
}
/* Apilado: la caja del visual no puede tomar todo el ancho (a 760 mediría
   840 de alto). Y el globo vuelve al 100%: a 125% se salía de la pantalla. */
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }
  .hero__lado { width: min(100%, 520px); justify-self: center; }
  .hero__visual { --globo-ancho: 1; }
  .hero__panel { left: -8%; bottom: 7%; }
  /* afuera de la caja, sobre el margen (la caja va centrada y sobra a los
     costados): con -10% quedaba a 3 px de la cabeza */
  .hero__ficha { right: -16%; }
}
/* En angosto no hay margen afuera: la ficha pasa arriba a la izquierda, sobre
   la parte del globo que se disuelve. A la derecha le tapaba media cara. */
@media (max-width: 759px) {
  /* el globo más chico corre la cara a la derecha y le deja lugar a la ficha,
     que acá va a la izquierda. Sin corrimiento: corrido a la derecha, el globo
     quedaba a 5 px del borde de la pantalla. */
  .hero__visual { --globo-ancho: 0.82; --desvio: 0%; }
  .hero__ficha { right: auto; left: 0; top: 6%; }
  .hero__panel { left: 0; bottom: 5%; }
}
@media (max-width: 599px) {
  .hero__acciones { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: 100%; }
  .hero__acciones .k-btn--primary { width: 100%; justify-content: space-between; padding-left: var(--sp-6); }
  /* Más ancha llega a la cara (la cabeza arranca en el 38% de la caja). El
     sello "CONTRATADO" medía 123 px y adentro hay 104: en teléfono va sin el
     tilde y con menos tracking (la palabra sola dice el estado). */
  .hero__ficha { min-width: 0; max-width: min(132px, 36%); padding: var(--sp-3) 14px; }
  .hero__ficha-cifra { font-size: 28px; }
  .hero__ficha .k-badge { font-size: 10px; letter-spacing: 0.06em; padding: 4px 6px; }
  .hero__ficha .k-badge svg { display: none; }
  /* el aviso, un poco más justo: en una caja de 358 px pasaba el 12% */
  .aviso { padding: 10px 12px 11px; gap: 6px; }
  .aviso__fila { gap: var(--sp-4); }
  .aviso__criterio { font-size: 14px; }
  .aviso__notas { gap: 10px; }
  .aviso__nota b { font-size: 16px; }
}

/* =============================================================================
   07 · EL PROBLEMA — la escena del reloj
   Composición de la referencia de Rocío (un objeto iluminado sobre un
   pedestal, el título en un marco, rótulos conectados por líneas) con el
   lenguaje de Kyrion: el objeto es un reloj de un año y el arco rayado son
   los meses que se pierden: lima los tres seguros, el verde medio del logo
   los que pueden sumarse. Es el mismo rayado de la brecha del panel del hero:
   en todo el sitio, verde sólido es lo que hay y verde rayado lo que se pierde.

   En escritorio la escena es un lienzo de proporción fija (1280 × 780) y todo
   se ubica en porcentajes: las líneas llegan siempre al borde del reloj. Los
   textos escalan con el ancho del lienzo (cqw). Debajo de 1024 se apila.
   ========================================================================== */

.problema { position: relative; padding-block: var(--sec-y); overflow: clip; }

/* Haz de luz desde arriba: lo que hace que el reloj sea un objeto en escena
   y no un gráfico apoyado en la página. */
/* El haz aparece de a poco: arranca transparente y recién a 140 px del borde
   de la sección toma fuerza, así no se pega a lo que queda arriba. */
.problema__luz {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 140px);
          mask: linear-gradient(180deg, transparent 0, #000 140px);
  background:
    radial-gradient(ellipse 34% 46% at 50% 6%, rgb(237 240 230 / 0.07), transparent 72%),
    radial-gradient(ellipse 22% 24% at 50% 62%, rgb(165 245 65 / 0.07), transparent 70%);
}
.problema__luz::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(760px, 70%); height: 78%;
  translate: -50% 0;
  background: linear-gradient(180deg, rgb(237 240 230 / 0.055), transparent 85%);
  clip-path: polygon(40% 0, 60% 0, 82% 100%, 18% 100%);
  filter: blur(22px);
}

.problema__escena {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1280 / 780;
}

/* --- El título, en un marco de visor -------------------------------------- */
/* La base del marco es fija (22% del lienzo, donde nace la línea al reloj) y
   el marco crece hacia ARRIBA: en inglés el título ocupa tres líneas y con
   alto fijo se salía del marco. */
.problema__marco {
  position: absolute; left: 20%; right: 20%; bottom: 78%; min-height: 22%;
  display: grid; place-items: center;
  padding: var(--sp-7) var(--sp-6);
  --esq: 16px;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) left top / var(--esq) 1.5px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) left top / 1.5px var(--esq) no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right top / var(--esq) 1.5px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right top / 1.5px var(--esq) no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) left bottom / var(--esq) 1.5px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) left bottom / 1.5px var(--esq) no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right bottom / var(--esq) 1.5px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) right bottom / 1.5px var(--esq) no-repeat;
  box-shadow: inset 0 0 0 1px rgb(237 240 230 / 0.05);
}
.problema__titulo {
  font: var(--fw-cuerpo) clamp(30px, 4cqw, 52px)/1.06 var(--font-display);
  letter-spacing: var(--ls-titulo);
  text-align: center; text-wrap: balance;
  color: var(--ink-2);
}
.problema__enfasis { display: inline-block; font-weight: var(--fw-titulo); color: var(--ink); }

/* --- El reloj --------------------------------------------------------------- */
.reloj { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.reloj__cuerpo {
  position: absolute; left: 35%; width: 30%; top: 29.38%; aspect-ratio: 1;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgb(237 240 230 / 0.06), transparent 46%),
    radial-gradient(circle at 50% 40%, var(--k-dark-800) 0%, var(--k-dark-900) 58%, var(--k-dark-950) 100%);
  box-shadow:
    inset 0 2px 0 rgb(237 240 230 / 0.10),
    inset 0 -24px 48px rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(237 240 230 / 0.07),
    0 0 0 11px var(--k-dark-850),
    0 0 0 12px rgb(237 240 230 / 0.09),
    0 -2px 0 12px rgb(237 240 230 / 0.06),
    0 44px 80px -20px rgb(0 0 0 / 0.95),
    0 0 140px -20px rgb(165 245 65 / 0.12);
}
.reloj__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.reloj__minutos { stroke: rgb(237 240 230 / 0.16); }
.reloj__horas   { stroke: rgb(237 240 230 / 0.42); }
.reloj__canal   { stroke: var(--k-dark-700); }
.reloj__cara    { stroke: rgb(237 240 230 / 0.06); }
.reloj__meses text {
  font: 400 11px var(--font-mono); letter-spacing: 0.1em;
  fill: var(--ink-3); text-anchor: middle; dominant-baseline: central;
}

/* El barrido: el punto recorre los meses y la estela queda detrás. En
   reposo (y con movimiento reducido) queda en 6 meses: el dato completo. */
.reloj__barrido { position: absolute; inset: 0; border-radius: 50%; rotate: 180deg; }
.reloj__estela {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 270deg, rgb(165 245 65 / 0.30) 359deg, transparent 360deg);
  /* closest-side: 100% es el radio. Sin eso el 100% era la distancia a la
     esquina de la caja y la estela caía afuera del anillo. Anillo: 135–155
     de 200 → 67.5–77.5%. */
  -webkit-mask: radial-gradient(circle closest-side, transparent 66.5%, #000 67.5%, #000 77.5%, transparent 78.5%);
          mask: radial-gradient(circle closest-side, transparent 66.5%, #000 67.5%, #000 77.5%, transparent 78.5%);
}
.reloj__punto {
  position: absolute; left: 50%; top: 13.75%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--k-dark-0);
  box-shadow: 0 0 0 4px rgb(165 245 65 / 0.30), 0 0 18px 4px rgb(165 245 65 / 0.50);
}
.reloj__centro {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.reloj__num {
  font: var(--fw-titulo) clamp(40px, 5cqw, 64px)/0.9 var(--font-display);
  letter-spacing: var(--ls-titulo); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.reloj__unidad {
  font: 400 var(--fs-etq)/1 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase;
  color: var(--ink-3); margin-right: calc(-1 * var(--ls-etq));
}

/* El pedestal: un disco con espesor, la tapa iluminada desde arriba y el
   canto con el rayado del logo. */
.reloj__pedestal { position: absolute; left: 26%; width: 48%; top: 71%; aspect-ratio: 4.2 / 1; z-index: 1; }
.reloj__base, .reloj__tapa { position: absolute; left: 0; right: 0; border-radius: 50%; }
.reloj__base {
  top: 18%; bottom: 0;
  background:
    repeating-linear-gradient(180deg, rgb(165 245 65 / 0.14) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--k-dark-850), var(--k-dark-950));
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
          mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.reloj__tapa {
  top: 0; height: 64%;
  background:
    radial-gradient(ellipse 30% 46% at 50% 44%, rgb(165 245 65 / 0.10), transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 35%, var(--k-dark-700), var(--k-dark-850) 70%);
  box-shadow:
    inset 0 1px 0 rgb(237 240 230 / 0.10),
    inset 0 -1.5px 0 rgb(165 245 65 / 0.55),
    0 10px 30px -8px rgb(0 0 0 / 0.8);
}
.reloj__pie {
  position: absolute; left: 25%; right: 25%; top: 92%;
  text-align: center; text-wrap: balance;
  font-size: clamp(16px, 1.45cqw, 19px); line-height: 1.45; color: var(--ink-2);
}

/* --- Las llamadas ----------------------------------------------------------- */
.llamada { position: absolute; display: flex; flex-direction: column; gap: var(--sp-3); }
.llamada--izq {
  left: 0; width: 24%; top: 54%; translate: 0 -50%;
  padding: var(--sp-5);
  border-radius: var(--r-card);
  background: rgb(20 23 15 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(237 240 230 / 0.07), var(--sh-lg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.llamada--der { left: 76%; right: 0; top: calc(41% - 14px); gap: var(--sp-4); }
.llamada__titulo { font: var(--fw-titulo) clamp(17px, 1.55cqw, 21px)/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.llamada__texto { font-size: clamp(14px, 1.2cqw, 16px); line-height: 1.5; color: var(--ink-2); }
.llamada__remate { font: var(--fw-semi) clamp(18px, 1.72cqw, 23px)/1.32 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.llamada__etq { font: 400 var(--fs-etq)/1.4 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase; color: var(--ink-3); }

/* El paso a paso que vuelve a cero, sincronizado con el reloj */
.reinicio { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.reinicio__barra {
  position: relative; display: block; height: 8px;
  background: var(--k-dark-700);
  /* diez tramos con hueco: la máscara corta el canal y el relleno a la vez */
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
}
.reinicio__relleno { position: absolute; inset: 0 auto 0 0; width: 10%; background: var(--accent-mark); }
/* Sólo los extremos: diez números de 9 px quedaban debajo del mínimo de
   13 px del manual. */
.reinicio__nums { display: flex; justify-content: space-between; }
.reinicio__nums b { font: 400 var(--fs-etq)/1 var(--font-mono); letter-spacing: 0.1em; color: var(--ink-3); }

/* ¿Cuál te tocó? — el foco salta entre los tres consultores. Son tres caras
   (pedido de Rocío, 21-10-2026), en el duotono de las personas del sitio:
   salen de _build/avatares.js. El filete de 1 px va encima de la foto. */
.sorteo { position: relative; display: flex; gap: 10px; }
.sorteo__persona {
  position: relative; overflow: hidden;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--k-dark-800);
}
.sorteo__persona img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sorteo__persona::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(237 240 230 / 0.08); }
.sorteo__foco {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: var(--r-full);
  box-shadow: 0 0 0 2px var(--k-dark-0), 0 0 16px rgb(237 240 230 / 0.25);
  translate: 54px 0;
}

.problema__cta { position: absolute; left: 76%; top: 76%; }

/* --- Las líneas que conectan los rótulos con el reloj ----------------------- */
.problema__linea { position: absolute; pointer-events: none; background: rgb(237 240 230 / 0.22); }
.problema__linea::before, .problema__linea::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-dark-0); box-shadow: 0 0 10px rgb(237 240 230 / 0.6);
}
/* Los extremos mezclan % y px: el reloj escala con el lienzo pero su bisel
   mide 12 px fijos (14 arriba, por el brillo). Sólo en %, a 1024 las líneas
   quedaban a 5 px del borde. Derecha: el punto a las 2 del reloj, a 30°:
   x = 50% + 15%·cos30 + 12px·cos30 · y = 54% − 24.62%·sen30 − 12px·sen30. */
.problema__linea--titulo { left: 50%; width: 1px; top: 22%; height: calc(7.38% - 14px); }
.problema__linea--titulo::before { left: -3px; top: -3px; }
.problema__linea--titulo::after  { left: -3px; bottom: -3px; }
.problema__linea--izq { left: 24%; width: calc(11% - 12px); top: 54%; height: 1px; }
.problema__linea--izq::before { left: -3px; top: -3px; }
.problema__linea--izq::after  { right: -3px; top: -3px; }
.problema__linea--der { left: calc(62.99% + 10.4px); width: calc(11.21% - 10.4px); top: calc(41.69% - 6px); height: 1px; }
.problema__linea--der::before { left: -3px; top: -3px; }
.problema__linea--der::after  { right: -3px; top: -3px; }

/* --- Movimiento: siete segundos, todo sincronizado --------------------------
   0 → 42%: el punto recorre los 6 meses y el paso a paso llega al 08.
   68 → 82%: los dos vuelven a cero. El rayado NO se borra: el tiempo perdido
   queda perdido. Sólo corre mientras la escena se ve (site.js). */
.reloj__barrido  { animation: k-reloj-barrido 7s var(--ease) infinite; }
.reloj__estela   { animation: k-reloj-estela 7s linear infinite; }
.reinicio__relleno { animation: k-reinicio 7s var(--ease) infinite; }
.sorteo__foco    { animation: k-sorteo 4.2s var(--ease-out) infinite; }
.js .problema:not(.is-en-vista) :is(.reloj__barrido, .reloj__estela, .reinicio__relleno, .sorteo__foco) {
  animation-play-state: paused;
}
@keyframes k-reloj-barrido {
  0%   { rotate: 0deg; }
  42%  { rotate: 180deg; }
  68%  { rotate: 180deg; }
  82%  { rotate: 0deg; }
  100% { rotate: 0deg; }
}
@keyframes k-reloj-estela {
  0%, 2%   { opacity: 0; }
  8%, 66%  { opacity: 1; }
  70%, 100%{ opacity: 0; }
}
@keyframes k-reinicio {
  0%   { width: 10%; }
  42%  { width: 80%; }
  68%  { width: 80%; }
  73%  { width: 10%; }
  100% { width: 10%; }
}
@keyframes k-sorteo {
  0%, 26%   { translate: 0 0; }
  33%, 59%  { translate: 54px 0; }
  66%, 92%  { translate: 108px 0; }
  100%      { translate: 0 0; }
}

/* --- Apilado: debajo de 1024 no hay ancho para una escena ------------------ */
@media (max-width: 1023px) {
  .problema__escena {
    aspect-ratio: auto;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-8);
  }
  .problema__marco, .reloj, .reloj__cuerpo, .reloj__pedestal, .reloj__pie,
  .llamada, .problema__cta { position: relative; inset: auto; left: auto; right: auto; top: auto; translate: none; }
  .problema__marco { width: 100%; max-width: 620px; bottom: auto; min-height: 0; padding: var(--sp-7) var(--sp-6); }
  .reloj { display: grid; justify-items: center; width: 100%; }
  .reloj__cuerpo { width: min(340px, 78%); }
  .reloj__pedestal { width: min(460px, 100%); margin-top: -13%; }
  .reloj__pie { margin-top: var(--sp-5); max-width: 32ch; }
  .reloj__num { font-size: clamp(44px, 12cqw, 64px); }
  .llamada--izq { width: 100%; max-width: 420px; }
  .llamada--der { width: 100%; max-width: 420px; align-items: center; text-align: center; }
  .problema__linea { display: none; }
}

/* =============================================================================
   08 · PANEL CLARO — la inversión del DS
   Mismo borde lateral que .wrap: el padding resta el aire del shell para que
   el contenido caiga en el mismo x que el resto de la página.
   ========================================================================== */

.panel-claro {
  margin-inline: var(--shell-pad);
  border-radius: var(--r-shell);
  padding-block: var(--sec-y);
  padding-inline: calc(max(var(--gutter), (100% - var(--content-max)) / 2) - var(--shell-pad));
}

/* =============================================================================
   09 · EL MÉTODO — las tres miradas, en tarjetas que se expanden
   La referencia de Rocío: título grande a la izquierda, la regla y el botón a
   la derecha, y abajo tarjetas altas de tela satinada; una abierta con su
   contenido, las otras angostas con el nombre en vertical. Se abre una por
   vez, con clic, Enter/Espacio o las flechas (site.js).
   ========================================================================== */

.metodo__cabeza {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--sp-6) var(--sp-9); align-items: end;
  margin-bottom: clamp(40px, 4.5vw, 64px);
}
.metodo__titulos { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
/* Dos líneas: "Tres evaluadores. / A ciegas. Una sola vara." */
.metodo__titulo { max-width: none; }
/* La regla va en lima también sobre el panel claro (pedido de Rocío): es un
   trazo decorativo, no texto ni un dato, así que no le toca el 1.17:1 que
   prohíbe el lima como texto sobre claro. */
.metodo__lado { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.metodo__regla { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
/* Apilado, la regla y el botón usan el ancho que hay: a 1024 quedaban en un
   tercio de la página, con media columna vacía al lado */
@media (max-width: 1099px) {
  .metodo__lado { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-8); }
  .metodo__regla { max-width: 52ch; }
}
.metodo__umbral {
  display: inline-flex; align-items: baseline; gap: 2px; vertical-align: baseline;
  font: var(--fw-titulo) 1.5em/1 var(--font-display); letter-spacing: var(--ls-titulo); color: var(--ink);
}
/* "≥" va dibujado: no está en el set latino de Archivo que sirve Google Fonts */
.ciegas__simbolo { display: inline-flex; color: var(--ink-3); }
.ciegas__simbolo svg { width: 0.5em; height: 0.5em; stroke-width: 2.5; }

.ciegas__accion { display: none; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.js .ciegas__accion { display: flex; }
.ciegas__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-chico); color: var(--ink-2); max-width: 34ch; }
.ciegas__estado:empty { display: none; }

/* --- Las tarjetas ------------------------------------------------------------ */
.evaluadores {
  --cerrada: clamp(124px, 11.5vw, 168px);
  display: flex; gap: var(--sp-3);
  height: clamp(480px, 40vw, 580px);
}
.eval {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 var(--cerrada); min-width: 0;
  border-radius: var(--r-panel);
  color: var(--k-dark-0);
  box-shadow: var(--sh-lg);
  transition: flex-grow 560ms var(--ease-out);
}
.eval.is-abierta { flex-grow: 1; }
/* El color de fondo es el promedio de la tela en la zona del texto: es lo que
   mide el e2e para el contraste, y lo que se ve si la imagen no carga. */
.eval--kyrion    { background-color: var(--k-dark-850); }
.eval--consultor { background-color: #155F07; }
.eval--cliente   { background-color: #0B3A05; }
.eval__seda { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Sombra arriba a la izquierda: el texto nunca cae sobre un brillo de la tela */
.eval::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(165deg, rgb(4 12 2 / 0.62) 0%, rgb(4 12 2 / 0.25) 38%, transparent 62%);
}

/* El botón es la cabecera de la tarjeta. Cerrada, toma toda la tarjeta. */
.eval__cabeza { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; }
.eval__boton {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; text-align: left;
  border-radius: var(--r-panel);
}
.eval__boton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.eval.is-abierta .eval__boton { cursor: default; }
.eval.is-abierta .eval__boton::after { content: none; }
.eval:not(.is-abierta) .eval__cabeza { inset: 0; }
.eval:not(.is-abierta) .eval__boton { width: 100%; height: 100%; align-items: flex-start; }
.eval__boton:focus-visible { outline: 2px solid var(--k-brand-400); outline-offset: -4px; }
.eval__num { font: 400 12px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--k-brand-400); }
.eval__rol {
  font: 400 var(--fs-etq)/1 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase;
  color: var(--k-dark-0);
}
/* Cerrada: el nombre en vertical, de abajo hacia arriba (como la referencia) */
.eval__vertical {
  position: absolute; left: var(--sp-6); bottom: 76px;
  writing-mode: vertical-rl; rotate: 180deg;
  font: var(--fw-titulo) clamp(26px, 2.3vw, 34px)/1 var(--font-display); letter-spacing: var(--ls-titulo);
  color: var(--k-dark-0); white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease);
}
.eval.is-abierta .eval__vertical { opacity: 0; }
.eval:not(.is-abierta) .eval__rol { opacity: 0; }

/* El contenido: el texto arriba, el widget abajo. Cerrada se esconde (y sale
   del árbol de accesibilidad con visibility). */
.eval__cuerpo {
  position: absolute; z-index: 2;
  left: var(--sp-6); top: 72px; bottom: var(--sp-6);
  width: min(380px, 46%);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
  transition: opacity 320ms var(--ease) 160ms, visibility 0s linear 0s;
}
.eval:not(.is-abierta) .eval__cuerpo {
  opacity: 0; visibility: hidden;
  transition: opacity 120ms var(--ease), visibility 0s linear 120ms;
}
.eval__texto { display: flex; flex-direction: column; gap: var(--sp-3); }
.eval__titulo { font: var(--fw-titulo) clamp(26px, 2.5vw, 34px)/1.08 var(--font-display); letter-spacing: var(--ls-titulo); text-wrap: balance; }
.eval__desc { font-size: var(--fs-texto); line-height: 1.5; color: var(--k-dark-100); max-width: 30ch; }

/* El widget: una pieza de interfaz, como en la referencia. Blanco: la
   elevación del sistema. */
.eval__widget {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-tile);
  background: var(--k-light-0); color: var(--k-light-900);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6);
  max-width: 320px;
}
.eval__widget-etq { font: 400 var(--fs-etq)/1.3 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase; color: var(--k-light-600); }
.eval__lineas { display: flex; flex-direction: column; gap: 7px; }
.eval__lineas i { display: block; height: 8px; border-radius: var(--r-pill); background: var(--k-light-200); }
.eval__lineas i:nth-child(1) { width: 92%; }
.eval__lineas i:nth-child(3) { width: 64%; }
/* la cita: el tramo que respalda la nota */
.eval__lineas i.es-cita { width: 100%; background: linear-gradient(90deg, var(--k-light-200) 0 26%, var(--k-brand-wash) 26% 78%, var(--k-light-200) 78%); box-shadow: inset 0 0 0 1px var(--k-brand-700); }
.eval__lineas--registro i:nth-child(2) { width: 76%; }
.eval__lineas i.es-check { width: 100%; background: linear-gradient(90deg, var(--k-brand-700) 0 12px, var(--k-light-200) 12px); }
.eval__panel { display: flex; gap: 6px; }
.eval__panel i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--k-light-200); color: var(--k-light-800);
}
.eval__panel svg { width: 16px; height: 16px; }

.evaluador__nota {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 44px; padding-top: var(--sp-3);
  border-top: 1px solid var(--k-light-300);
}
.evaluador__nota-rotulo { color: var(--k-light-600); }
.evaluador__valor {
  font: var(--fw-titulo) 34px/1 var(--font-display); letter-spacing: var(--ls-titulo);
  font-variant-numeric: tabular-nums; color: var(--k-light-900);
}
.evaluador__sello { display: none; align-items: center; gap: var(--sp-2); color: var(--k-light-600); margin-right: calc(-1 * var(--ls-etq)); }
.evaluador__sello svg { width: 16px; height: 16px; }

/* Con JS la demo arranca sellada; sin JS las notas se ven y el botón no está. */
.js .ciegas:not(.is-abierta) .evaluador__valor { display: none; }
.js .ciegas:not(.is-abierta) .evaluador__sello { display: inline-flex; }
.ciegas.is-abierta .evaluador__valor { animation: k-revelar var(--dur-slow) var(--ease-out) both; }
@keyframes k-revelar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* El protagonista de cada tarjeta, a la derecha. Cerrada no se ve. */
.eval__objeto {
  position: absolute; z-index: 1; pointer-events: none;
  transition: opacity 320ms var(--ease) 140ms, translate 560ms var(--ease-out);
}
.eval:not(.is-abierta) .eval__objeto { opacity: 0; translate: 24px 0; transition: opacity 120ms var(--ease), translate 560ms var(--ease-out); }
/* Nunca más ancha que la mitad de la tarjeta: con el cliente cortado en la
   cadera la foto es más ancha y a 94% de alto llegaba al texto. contain la
   achica dentro de esa caja, apoyada abajo a la derecha. */
.eval__objeto--persona { right: 3%; bottom: 0; height: 94%; width: auto; max-width: 52%; object-fit: contain; object-position: 100% 100%; }
/* Metida en la escena (Rocío: "que no parezca una foto png adelante de un
   fondo"; 22-10: "que sean grises pero que se mimeticen con el fondo… dales
   sombra atrás"). La persona viene en gris, con el negro de la tela y la luz
   de recorte del verde de la seda (persona-hero.js, ENTORNOS). Acá, la sombra,
   en tres capas: de contacto (suave: corta y oscura dibujaba un contorno), media
   (hacia la izquierda: la luz de la tela viene de arriba a la derecha) y
   ambiente (ancha, alrededor: la tela, cerca del cuerpo, recibe menos luz). */
.eval__objeto--persona {
  filter:
    drop-shadow(-6px 4px 12px rgb(0 5 0 / 0.3))
    drop-shadow(-26px 16px 28px rgb(0 5 0 / 0.5))
    drop-shadow(0 6px 72px rgb(0 5 0 / 0.5));
}
/* Encima de la persona y debajo del texto: el pie de la tarjeta en penumbra
   (el cuerpo sale de la oscuridad en vez de cortarse contra el borde), un velo
   del verde de la tela al 6% (la luz del lugar, sin teñir: la persona sigue
   gris) y el mismo grano fotográfico, muy leve, sobre la tela y la persona,
   para que sean una sola foto. Sólo con la tarjeta abierta, al ritmo de la
   persona. */
.eval--consultor::after, .eval--cliente::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 -0.06'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    linear-gradient(to top, rgb(2 8 1 / 0.78) 0%, rgb(2 8 1 / 0.42) 16%, rgb(2 8 1 / 0) 42%),
    linear-gradient(rgb(18 80 8 / 0.06), rgb(18 80 8 / 0.06));
  opacity: 0; transition: opacity 320ms var(--ease) 140ms;
}
.eval--consultor.is-abierta::after, .eval--cliente.is-abierta::after { opacity: 1; }
/* El cliente, más grande y más abajo (Rocío, 21-10: "ampliar tamaño de imagen
   y bajar un poco"): 110% del alto de la tarjeta, con el 21% debajo del borde
   (la tarjeta recorta). La coronilla baja del 6 al 11% y el corte cae debajo
   de los brazos cruzados. Por debajo de 1280 la tarjeta es más angosta: un
   poco menos de aumento, para que no llegue al widget. */
.eval--cliente .eval__objeto--persona { height: 110%; bottom: -21%; }
@media (max-width: 1279px) {
  .eval--cliente .eval__objeto--persona { height: 104%; bottom: -16%; right: 1%; }
}
/* Entre 900 y 1099 la tarjeta es angosta: ninguna persona pasa del 44% del
   ancho, así no queda debajo del widget (a 900 la consultora se metía 30 px). */
@media (max-width: 1099px) {
  .eval__objeto--persona { max-width: 44%; }
  .eval--cliente .eval__objeto--persona { height: 100%; bottom: -12%; }
}
/* El globo, grande y metido en la esquina de abajo a la derecha (pedidos de
   Rocío: "muchísimo más grande y abajo a la derecha", "menos grande", "más a
   la derecha"). El corte se mide en el globo y no en la tarjeta, así es el
   mismo en todos los anchos, y cada borde pasa lejos de una banda: un borde
   que roza una banda se lee como error. Por la derecha, 13%: las cuatro
   bandas del medio terminan en el borde con todo su alto (la curva de la 2 y
   la 5 arranca en el 87,5%) y la de arriba conserva su curva entera, que es
   la que lo hace leer como globo. Por abajo, 11%: la banda 6 queda afuera y la
   5 a 15 px del borde (con 13% quedaba a 6 px). El lado que queda debajo del
   texto es el que se disuelve: el texto se sigue leyendo. */
.eval__objeto--globo {
  right: 0; bottom: 0; height: 78%; aspect-ratio: 223 / 202;
  filter: drop-shadow(0 0 48px rgb(165 245 65 / 0.24));
}
.eval__objeto--globo img { width: 100%; height: 100%; transform: translate(13%, 11%); }

/* La nota de la tarjeta cerrada: el candado, o el número cuando se abren */
.eval__chip {
  position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: 2;
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  background: rgb(4 12 2 / 0.55); box-shadow: inset 0 0 0 1px rgb(237 240 230 / 0.16);
  color: var(--k-dark-0);
  transition: opacity var(--dur-base) var(--ease);
}
.eval__chip svg { width: 18px; height: 18px; }
.eval__chip b { display: none; font: var(--fw-titulo) 20px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ciegas.is-abierta .eval__chip svg, html:not(.js) .eval__chip svg { display: none; }
.ciegas.is-abierta .eval__chip b, html:not(.js) .eval__chip b { display: inline; }
.eval.is-abierta .eval__chip { opacity: 0; }
@media (hover: hover) {
  .eval:not(.is-abierta):hover { box-shadow: var(--sh-lg), inset 0 0 0 2px rgb(165 245 65 / 0.5); }
}

/* Una sola frase, la promesa (pedido de Rocío). Eran dos principios lado a lado. */
.principios {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-9);
  margin-top: clamp(56px, 6vw, 88px);
}
.principio { font: var(--fw-semi) clamp(24px, 2.6vw, 34px)/1.25 var(--font-display); letter-spacing: -0.01em; text-wrap: pretty; }
/* Cada frase arranca su línea: así no queda "We" colgando al final de la
   primera ("…infallibility. We / promise traceability."). */
.principio__no, .principio__si { display: inline-block; }
.principio__no { color: var(--ink-3); }
.principio__si { color: var(--ink); }

@media (max-width: 1099px) {
  .metodo__cabeza { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* Debajo de 900 no entran tres tarjetas altas de lado: se apilan, la abierta
   alta con su contenido y las cerradas como barras. Sin protagonista: con el
   texto encima, la persona tapaba el widget. */
@media (max-width: 899px) {
  .evaluadores { flex-direction: column; height: auto; }
  .eval { flex: none; min-height: 88px; }
  .eval.is-abierta { min-height: 0; }
  .eval:not(.is-abierta) .eval__boton { align-items: center; }
  .eval__vertical { display: none; }
  .eval:not(.is-abierta) .eval__rol { opacity: 1; }
  .eval__boton { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
  .eval__cuerpo { position: relative; left: auto; top: auto; bottom: auto; width: auto; padding: 56px var(--sp-5) var(--sp-5); gap: var(--sp-5); }
  .eval:not(.is-abierta) .eval__cuerpo { display: none; }
  .eval__widget { max-width: none; }
  .eval__objeto { display: none; }
  .eval__chip { left: auto; right: var(--sp-5); top: 50%; bottom: auto; translate: 0 -50%; }
  .principios { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   10 · EL PROCESO
   ========================================================================== */

.proceso { padding-block: var(--sec-y); }

/* Banda: los diez pasos como índice visual. Las columnas van 3fr 5fr 2fr para
   que los diez tramos midan lo mismo aunque cada fase tenga distinta cantidad. */
.banda {
  display: grid; grid-template-columns: 3fr 5fr 2fr;
  gap: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}
/* El nombre de la fase se apoya abajo: si uno se parte en dos líneas
   ("Cerrar y asegurar" en un teléfono), los tramos siguen en la misma fila. */
.banda__fase { display: grid; grid-template-rows: 1fr auto auto; gap: var(--sp-3); min-width: 0; }
.banda__nombre { align-self: end; color: var(--ink-2); white-space: nowrap; }
.banda__tramos, .banda__nums { display: grid; grid-template-columns: repeat(var(--pasos), minmax(0, 1fr)); gap: 4px; }
.banda__tramos i { display: block; height: 10px; border-radius: var(--r-pill); background: var(--track); }
.banda__tramos i.es-ciega { background: var(--accent-mark); }
.banda__nums b { font: var(--fw-medium) 11px/1 var(--font-mono); color: var(--ink-3); }
.banda__leyenda {
  grid-column: 1 / -1; justify-self: end;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--ink-3);
  margin-right: calc(-1 * var(--ls-etq));
}
.banda__leyenda i { display: block; width: 20px; height: 10px; border-radius: var(--r-pill); background: var(--accent-mark); }

.pasos-marco {
  background: var(--bg-panel);
  border-radius: var(--r-panel);
  padding: var(--sp-2) clamp(20px, 3vw, 40px) var(--sp-6);
}
.pasos { width: 100%; border-collapse: collapse; }
/* line-height 1 en las tres celdas: con el 1.4 del rol de etiqueta, "PASO"
   (sin ícono) quedaba 1.5 px más abajo que "KYRION" y "CONSULTOR". */
.pasos thead th {
  padding: var(--sp-6) var(--sp-6) var(--sp-4) 0;
  text-align: left; vertical-align: middle; line-height: 1;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.pasos__col-paso { width: 32%; }
.pasos__quien { display: inline-flex; align-items: center; gap: var(--sp-2); line-height: 1; }
.pasos__quien img { width: 20px; height: 18px; }
.pasos__quien svg { width: 18px; height: 18px; }

.pasos__fase th { padding: var(--sp-8) 0 var(--sp-3); text-align: left; }
.pasos tbody:first-of-type .pasos__fase th { padding-top: var(--sp-6); }
.pasos__fase-nombre { font: var(--fw-titulo) 21px/1.2 var(--font-display); letter-spacing: var(--ls-titulo); color: var(--ink); margin-right: var(--sp-3); }
.pasos__fase-sub { color: var(--ink-3); }
.pasos__fase-sub--cifras { letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.pasos tbody tr:not(.pasos__fase) > * {
  padding: var(--sp-5) var(--sp-6) var(--sp-5) 0;
  border-top: 1px solid var(--line);
  vertical-align: top; text-align: left;
  font-size: 15px; line-height: 1.5;
}
.pasos tbody tr:not(.pasos__fase) > td:nth-of-type(1) { color: var(--ink); }
.pasos tbody tr:not(.pasos__fase) > td:nth-of-type(2) { color: var(--ink-2); padding-right: 0; }
/* Número y nombre en la primera línea; el sello, si lo hay, abajo y alineado
   con el nombre (el número cuelga). En grilla y no en flex-wrap para que el
   sello baje siempre, y no sólo en las filas con nombre largo. */
.paso { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--sp-2) var(--sp-3); }
/* El número de paso es un identificador: Plex Mono en lima, como los números
   de sección del manual. */
.paso__num { font: 400 13px/1 var(--font-mono); color: var(--accent-text); min-width: 22px; }
.paso__nombre { font: var(--fw-titulo) 17px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
/* el sello ("Criterio independiente"), debajo del nombre y tan ancho como
   su texto. Más chico que el sello del sistema (Rocío, 21-10: "criterio
   independiente más chico"): 9 px y menos aire, para que acompañe al nombre
   del paso sin competir con él. */
.paso .k-badge { grid-column: 2; justify-self: start; min-height: 18px; padding: 3px calc(6px - 0.12em) 2px 6px; font-size: 9px; letter-spacing: 0.12em; }

/* Debajo de 760 la tabla deja de ser tabla: cada paso es una card con sus
   dos rótulos. El encabezado se oculta a la vista pero sigue en el árbol. */
@media (max-width: 759px) {
  .banda { grid-template-columns: 3fr 5fr 2fr; column-gap: var(--sp-3); }
  .banda__nombre { font-size: 10px; letter-spacing: 0.14em; white-space: normal; }
  .banda__nums b { font-size: 10px; }
  .pasos-marco { padding: var(--sp-2) var(--sp-5) var(--sp-5); }
  .pasos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pasos, .pasos tbody, .pasos tr, .pasos th, .pasos td { display: block; }
  .pasos tbody tr:not(.pasos__fase) {
    display: grid; gap: var(--sp-3);
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--line);
  }
  .pasos tbody tr:not(.pasos__fase) > * { padding: 0; border: 0; }
  .pasos tbody tr:not(.pasos__fase) > td::before {
    content: attr(data-rotulo);
    display: block; margin-bottom: 4px;
    font: 400 var(--fs-etq)/1.4 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase;
    color: var(--ink-3);
  }
  .pasos__fase th { padding: var(--sp-7) 0 var(--sp-2); }
  .pasos__fase-nombre { display: block; margin: 0 0 4px; }
}

/* =============================================================================
   11 · LOS NÚMEROS — embudo y asertividad
   ========================================================================== */

.numeros {
  padding-bottom: var(--sec-y);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.dato {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--r-panel);
  background: var(--bg-panel);
}
.titulo-dato {
  font: var(--fw-titulo) var(--fs-dato)/1.1 var(--font-display);
  letter-spacing: var(--ls-titulo); text-wrap: balance; max-width: 18ch;
}
.dato__bajada { color: var(--ink-2); max-width: 42ch; text-wrap: pretty; }
/* La nota al pie es un metadato: Plex Mono a 12, como las notas del manual. */
.dato__fuente { margin-top: auto; padding-top: var(--sp-2); font: 400 12px/1.6 var(--font-mono); color: var(--ink-3); text-wrap: pretty; }

/* --- Embudo: 150 puntos, uno por perfil ------------------------------------ */
.embudo { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-5); padding-top: var(--sp-4); }
.embudo__puntos {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(4px, 0.55vw, 7px);
}
.embudo__puntos i {
  display: block; aspect-ratio: 1; border-radius: var(--r-full);
  background: var(--k-dark-500);
  transition: opacity var(--tr-media), transform var(--tr-media);
}
.embudo__puntos i[data-n="2"] { background: var(--k-dark-300); }
.embudo__puntos i[data-n="3"] { background: var(--k-dark-100); }
.embudo__puntos i[data-n="4"] { background: var(--k-dark-0); box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 3.5px var(--k-dark-0); }
.embudo__puntos i[data-n="5"] { background: var(--k-brand-400); box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 3.5px var(--k-brand-400); }
/* foco de la leyenda: se apaga lo que NO llegó a esa etapa */
.embudo[data-foco="2"] i:not([data-n="2"], [data-n="3"], [data-n="4"], [data-n="5"]),
.embudo[data-foco="3"] i:not([data-n="3"], [data-n="4"], [data-n="5"]),
.embudo[data-foco="4"] i:not([data-n="4"], [data-n="5"]),
.embudo[data-foco="5"] i:not([data-n="5"]) { opacity: 0.18; }

.embudo__unidad { color: var(--ink-3); margin-top: calc(-1 * var(--sp-2)); }
.embudo__leyenda { display: flex; flex-direction: column; }
.etapa {
  display: grid; grid-template-columns: 14px 52px minmax(0, 1fr); align-items: center; gap: var(--sp-3);
  min-height: 40px; border-top: 1px solid var(--line);
  transition: color var(--tr-rapida);
}
.etapa__punto { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--k-dark-500); justify-self: center; }
.etapa--2 .etapa__punto { background: var(--k-dark-300); }
.etapa--3 .etapa__punto { background: var(--k-dark-100); }
.etapa--4 .etapa__punto { background: var(--k-dark-0); }
.etapa--5 .etapa__punto { background: var(--k-brand-400); }
.etapa__num { font: var(--fw-titulo) 22px/1 var(--font-display); letter-spacing: var(--ls-titulo); text-align: right; font-variant-numeric: tabular-nums; }
.etapa__nombre { color: var(--ink-2); }
.etapa--5 .etapa__num { color: var(--accent-text); }
.etapa--5 .etapa__nombre { color: var(--ink); font-weight: var(--fw-medium); }
@media (hover: hover) {
  .etapa { cursor: default; }
  .etapa:hover .etapa__nombre { color: var(--ink); }
}

/* --- Asertividad ------------------------------------------------------------ */
.medicion { position: relative; height: 44px; margin-top: var(--sp-2); }
.medicion__eje { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--track); }
.medicion__hito {
  position: absolute; top: 0; left: calc(var(--mes) / 12 * 100%);
  width: 16px; height: 16px; margin-left: -8px;
  border-radius: var(--r-full);
  background: var(--bg-panel); box-shadow: inset 0 0 0 2px var(--accent-mark);
}
.medicion__hito--fin { margin-left: -16px; background: var(--accent-mark); }
.medicion__rotulos { position: absolute; left: 0; right: 0; top: 26px; display: flex; justify-content: space-between; color: var(--ink-3); }
.medicion__rotulos b:last-child { margin-right: calc(-1 * var(--ls-etq)); }
.medicion__rotulos b { font-weight: inherit; }
.medicion__rotulos b:first-child { margin-left: calc(1 / 12 * 100% - 8px); }

.asertividad { display: flex; flex-direction: column; gap: var(--sp-6); margin-top: var(--sp-3); }
.medidor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-3) var(--sp-4); }
.medidor__rotulo { color: var(--ink-2); padding-bottom: 6px; }
.medidor__valor {
  display: flex; align-items: baseline; gap: 2px;
  font: var(--fw-titulo) 40px/0.9 var(--font-display); letter-spacing: var(--ls-titulo);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.medidor--kyrion .medidor__valor { font-size: 60px; }
.medidor__valor--tenue { color: var(--ink-3); }
.medidor__signo { font-size: 0.42em; font-weight: var(--fw-medium); letter-spacing: 0; color: var(--ink-3); }
/* "~" a tamaño de unidad y en la base se leía como un signo menos: "-60%". */
.medidor__aprox { align-self: center; font-size: 0.7em; font-weight: var(--fw-medium); color: var(--ink-3); margin-right: 3px; letter-spacing: 0; }
.medidor__canal { grid-column: 1 / -1; display: block; height: 14px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.medidor__relleno { display: block; height: 100%; width: var(--v); border-radius: var(--r-pill); background: var(--accent-mark); }
/* 4.30:1 contra el canal: un gris claro (#9AA08C) daba 2.2:1 y la barra de
   la industria, que es el dato contra el que se compara, casi no se veía. */
.medidor__relleno--neutro { background: var(--ink-3); }

@media (max-width: 899px) {
  .numeros { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   12 · PILARES
   ========================================================================== */

.pilares { padding-bottom: var(--sec-y); }
.pilares__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, auto));
  gap: var(--sp-4);
}
/* Al pasar el mouse las tarjetas con foto se agrandan un poco (pedido de
   Rocío): un 2%, que entra en el hueco de 16 px entre tarjetas sin pisar la
   de al lado. Sólo con mouse —en táctil el hover queda pegado— y nunca con
   movimiento reducido. */
.pilar, .audiencia {
  position: relative;
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pilar:hover, .audiencia:hover { transform: scale(1.02); box-shadow: var(--sh-xl); z-index: 1; }
}
.pilar {
  display: flex; flex-direction: column;
  padding: var(--sp-2);
  border-radius: var(--r-panel);
  background: var(--bg-panel);
}
.pilar--grande { grid-row: span 2; }
/* La caja de la foto da el tamaño; adentro, el duotono y su capa en color,
   una encima de la otra. */
.pilar__foto { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-tile); background: var(--bg-tile); }
.pilar__foto img, .audiencia__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pilar--grande .pilar__foto { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.pilar:not(.pilar--grande) { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.pilar:not(.pilar--grande) .pilar__foto { aspect-ratio: auto; height: 100%; min-height: 220px; }
.pilar__cuerpo { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.pilar--grande .pilar__cuerpo { padding: var(--sp-7) var(--sp-7) var(--sp-6); flex: 0 0 auto; }
.pilar__rotulo { display: flex; align-items: baseline; gap: var(--sp-3); color: var(--ink-3); }
.pilar__num { color: var(--accent-text); }
.pilar__titulo { font: var(--fw-titulo) var(--fs-h3w)/1.2 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.pilar--grande .pilar__titulo { font-size: clamp(24px, 2.4vw, 32px); }
.pilar__texto { color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }

@media (max-width: 1199px) {
  .pilares__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .pilar--grande { grid-row: auto; grid-column: 1 / -1; }
  .pilar--grande .pilar__foto { aspect-ratio: 16 / 8; min-height: 0; }
  .pilar:not(.pilar--grande) { display: flex; }
  .pilar:not(.pilar--grande) .pilar__foto { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
}
@media (max-width: 599px) {
  .pilares__grilla { grid-template-columns: minmax(0, 1fr); }
  .pilar--grande .pilar__foto { aspect-ratio: 3 / 2; }
  .pilar__cuerpo, .pilar--grande .pilar__cuerpo { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
}

/* --- El Scorecard, por dentro ------------------------------------------------
   Las tablas 1 a 3 del contenido que mandó Kyrion (Kyrion_Scorecard_
   Contenido_Web.pdf, 21-10-2026); la 4 y la 5 son de uso comercial y no van
   en la web. Debajo de las tarjetas con foto, que se quedan (pedido de Rocío:
   "lo vuelve más humano y cercano"), y en el mismo mosaico: el hueco entre
   las tarjetas y las tablas es el de la grilla, 16 px, sin rótulo aparte
   (Rocío: "integrar con el scorecard por dentro"; antes iban separadas, con
   "El Scorecard, por dentro" arriba). Mismo lenguaje que la tabla de pasos:
   panel oscuro, rótulos en Plex Mono, filetes de 1 px y, en angosto, una card
   por fila. La escala de la tabla 2 no va en semáforo, como pide el PDF, sino
   en los verdes de Kyrion: rayado lo que no está (como en todo el sitio) y del
   verde medio del logo al lima. */
.scorecard { margin-top: var(--sp-4); display: grid; gap: var(--sp-4); }
/* las mismas columnas que las tarjetas de arriba: en un mosaico, las juntas
   tienen que caer en la misma línea */
.scorecard__par { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-4); }
.sc-panel {
  background: var(--bg-panel);
  border-radius: var(--r-panel);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(12px, 1.6vw, 24px);
}
.sc-panel__cabeza { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.sc-panel__titulo { font: var(--fw-titulo) var(--fs-h3w)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.sc-panel__bajada { color: var(--ink-2); line-height: 1.5; max-width: 62ch; text-wrap: pretty; }

.sc { width: 100%; border-collapse: collapse; }
.sc thead th {
  padding: 0 var(--sp-5) var(--sp-4) 0;
  text-align: left; vertical-align: bottom;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.sc tbody > tr > * {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  vertical-align: top; text-align: left;
  font-size: 15px; font-weight: var(--fw-cuerpo); line-height: 1.5; color: var(--ink-2);
}
.sc tbody > tr + tr > * { border-top: 1px solid var(--line); }
.sc tr > :last-child { padding-right: 0; }
.sc__col-bloque   { width: 21%; }
.sc__col-pregunta { width: 18%; }
.sc__col-define   { width: 15%; }
.sc__col-califica { width: 23%; }
.sc__col-nota     { width: 150px; }
.sc__col-nivel    { width: 130px; }
.sc__col-paso     { width: 28%; }
/* "Califican, a ciegas" entra en una línea */
.sc__col-quien    { width: 36%; }
/* En la tabla el nombre no se puede achicar por debajo de su palabra más
   larga (con minmax(0, 1fr), como en los pasos, "Responsabilidades" se metía
   en la columna de al lado). */
.sc .paso { grid-template-columns: auto 1fr; }
/* el número de bloque no es un paso: va en gris, no en lima */
.paso__num--bloque { color: var(--ink-3); }
.sc .sc__pregunta { color: var(--ink); font-weight: var(--fw-semi); }
.sc .sc__nada { color: var(--ink-3); }
.sc .sc__real { color: var(--accent-text); }

/* La escala: diez tramos con hueco, como el paso a paso del problema; el
   rango de cada nivel se pinta encima. */
.escala { white-space: nowrap; }
.escala__barra, .escala__nota { display: inline-block; vertical-align: middle; }
.escala__barra {
  position: relative; width: 90px; height: 8px; margin-right: var(--sp-3);
  background: var(--k-dark-700);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
}
.escala__barra::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc((var(--desde) - 1) * 10%); width: calc((var(--hasta) - var(--desde) + 1) * 10%);
  background: var(--tramo);
}
.escala__nota { font: var(--fw-semi) 15px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.sc .escala__nivel { font: var(--fw-titulo) 17px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.escala--fuera     { --desde: 1; --hasta: 3;  --tramo: repeating-linear-gradient(135deg, var(--k-brand-700) 0 1.5px, transparent 1.5px 3.5px); }
.escala--no        { --desde: 4; --hasta: 6;  --tramo: var(--k-brand-700); }
.escala--potencial { --desde: 7; --hasta: 8;  --tramo: var(--k-brand-600); }
.escala--rockstar  { --desde: 9; --hasta: 10; --tramo: var(--k-brand-400); }

@media (max-width: 1199px) {
  .scorecard__par { grid-template-columns: minmax(0, 1fr); }
}
/* Cinco columnas no entran debajo de 1100 (a 1024 "Responsabilidades" ya no
   cabía): cada bloque es una card, con la pregunta como bajada y los otros
   tres datos en columnas con su rótulo. */
@media (max-width: 1099px) {
  .sc--bloques thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sc--bloques, .sc--bloques tbody, .sc--bloques tr, .sc--bloques th, .sc--bloques td { display: block; }
  .sc--bloques tbody > tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); padding: var(--sp-5) 0; }
  .sc--bloques tbody > tr:first-child { padding-top: 0; }
  .sc--bloques tbody > tr + tr { border-top: 1px solid var(--line); }
  .sc--bloques tbody > tr > *, .sc--bloques tbody > tr + tr > * { padding: 0; border: 0; }
  .sc--bloques th, .sc--bloques .sc__pregunta { grid-column: 1 / -1; }
  .sc--bloques .sc__pregunta { margin-bottom: var(--sp-1); }
  .sc--bloques td:not(.sc__pregunta)::before {
    content: attr(data-rotulo);
    display: block; margin-bottom: 4px;
    font: 400 var(--fs-etq)/1.4 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase;
    color: var(--ink-3);
  }
}
/* Debajo de 760 las tres tablas son cards, una por fila. */
@media (max-width: 759px) {
  .sc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sc, .sc tbody, .sc tr, .sc th, .sc td { display: block; }
  .sc tbody > tr { display: grid; gap: var(--sp-3); padding: var(--sp-5) 0; }
  .sc tbody > tr:first-child { padding-top: 0; }
  .sc tbody > tr + tr { border-top: 1px solid var(--line); }
  .sc tbody > tr > *, .sc tbody > tr + tr > * { padding: 0; border: 0; }
  .sc--bloques tbody > tr { grid-template-columns: minmax(0, 1fr); }
  .sc--quien td::before {
    content: attr(data-rotulo);
    display: block; margin-bottom: 4px;
    font: 400 var(--fs-etq)/1.4 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase;
    color: var(--ink-3);
  }
  /* la escala: la barra y el nivel en una línea, lo que significa abajo */
  .sc--escala tbody > tr { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-4); }
  .sc--escala .escala { grid-area: 1 / 1; }
  .sc--escala .escala__nivel { grid-area: 1 / 2; }
  .sc--escala td:last-child { grid-column: 1 / -1; }
}

/* =============================================================================
   13 · COMPARACIÓN
   La columna de Kyrion invierte de contexto dentro del panel claro: es la
   misma inversión que la fila seleccionada del listado del software.
   ========================================================================== */

/* Dos frases, dos líneas: con 17ch el título partía en tres y "humano" quedaba solo. */
.comparacion .titulo-sec { max-width: 30ch; }
.comp-marco { margin-top: var(--sp-2); }
.comp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comp col.comp__col-criterio { width: 37%; }
.comp th, .comp td { padding: var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.comp thead th, .comp thead td { padding-top: var(--sp-6); padding-bottom: var(--sp-5); vertical-align: bottom; color: var(--ink-2); }
.comp thead td { border-bottom-color: var(--line); }
.comp tbody th {
  text-align: left; padding-left: 0;
  font: var(--fw-titulo) clamp(17px, 1.6vw, 21px)/1.3 var(--font-display); letter-spacing: -0.01em;
  color: var(--ink);
}
.comp svg { width: 26px; height: 26px; margin-inline: auto; stroke-width: 2; }
.comp__si svg { color: var(--ink); }
/* La cruz es información (dice "no tiene"): 4.87:1, no el gris de adorno. */
.comp__no svg { color: var(--ink-3); }

.comp .comp__kyrion {
  background: var(--k-dark-850);
  color: var(--k-dark-0);
  border-bottom-color: var(--k-dark-600);
}
.comp .comp__kyrion svg { color: var(--k-brand-400); }
.comp thead .comp__kyrion { border-radius: var(--r-card) var(--r-card) 0 0; padding-top: var(--sp-7); }
.comp tbody tr:last-child .comp__kyrion { border-radius: 0 0 var(--r-card) var(--r-card); border-bottom-color: transparent; }
.comp tbody tr:last-child > * { border-bottom-color: transparent; }
.comp__logo { height: 26px; width: auto; margin-inline: auto; }
/* Los títulos de las columnas, como títulos y no como rótulos (pedido de
   Rocío: "títulos más grandes"): del cuerpo de las filas. El logo de Kyrion
   sube a 26 para acompañarlos. */
.comp thead .comp__largo { display: block; font: var(--fw-titulo) clamp(18px, 1.7vw, 22px)/1.2 var(--font-display); letter-spacing: -0.01em; text-transform: none; color: var(--ink); text-wrap: balance; }
.comp__corto { display: none; }

@media (max-width: 759px) {
  .comp th, .comp td { padding: var(--sp-4) var(--sp-2); }
  .comp thead th { font-size: 10px; letter-spacing: 0.14em; }
  .comp tbody th { font-size: 15px; padding-right: var(--sp-3); }
  .comp svg { width: 22px; height: 22px; }
  .comp__largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .comp__corto { display: block; }
  /* los rótulos cortos también como títulos, del tamaño de las filas */
  .comp thead .comp__corto { font: var(--fw-titulo) 15px/1.2 var(--font-display); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
  .comp__logo { display: none; }
  .comp thead .comp__corto--kyrion { color: var(--k-dark-0); }
}

/* =============================================================================
   14 · COBERTURA
   ========================================================================== */

.cobertura {
  padding-block: var(--sec-y);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--sp-9) clamp(40px, 6vw, 96px);
  align-items: center;
}
.cobertura__texto { display: flex; flex-direction: column; gap: var(--sp-8); }
.cobertura__cifras { max-width: 420px; }
.ciudades { columns: 3 140px; column-gap: var(--sp-6); }
.ciudad {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 38px; padding: 6px 0;
  border-top: 1px solid var(--line);
  break-inside: avoid;
  font-size: 15px; color: var(--ink-2);
  transition: color var(--tr-rapida);
}
.ciudad--sede { color: var(--ink); font-weight: var(--fw-titulo); }
.ciudad__sede {
  font: 400 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px calc(6px - 0.14em) 4px 6px; border-radius: 6px;
  background: var(--accent-wash); color: var(--accent-text);
}
.ciudad.is-foco { color: var(--ink); }
.ciudad.is-foco::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--k-brand-400); margin-right: auto; order: 2;
}

.leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); color: var(--ink-3); }
.leyenda__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.leyenda__marca { display: block; flex: 0 0 auto; }
.leyenda__marca--cobertura {
  width: 18px; height: 14px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, var(--k-brand-700) 0 2.5px, transparent 2.5px 4.5px);
}
.leyenda__marca--ciudad { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--k-dark-0); }
.leyenda__marca--sede { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--k-brand-400); box-shadow: 0 0 0 4px rgb(165 245 65 / 0.16); }

.cobertura__mapa { margin: 0; justify-self: center; width: 100%; max-width: 600px; }
.cobertura__mapa img, .cobertura__mapa svg { width: 100%; height: auto; }
/* El recorte del mapa cortaba en seco a Estados Unidos arriba y a Brasil a la
   derecha: dos rectas que no son de ningún país. Se disuelven, como el globo. */
.cobertura__mapa svg, .cobertura__mapa img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%), linear-gradient(to left, transparent, #000 9%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent, #000 9%), linear-gradient(to left, transparent, #000 9%);
          mask-composite: intersect;
}
.mapa__ciudad, .mapa__sede { transform-box: fill-box; transform-origin: center; transition: transform var(--tr-media), fill var(--tr-media); }
.mapa__ciudad.is-foco { fill: var(--k-brand-400); transform: scale(1.6); }
.mapa__sede.is-foco { transform: scale(1.25); }
@media (hover: hover) {
  .ciudad { cursor: default; }
  .mapa__ciudad, .mapa__sede { cursor: default; }
}

@media (max-width: 899px) {
  .cobertura { grid-template-columns: minmax(0, 1fr); }
  .cobertura__mapa { max-width: 480px; }
}
@media (max-width: 479px) {
  .ciudades { columns: 2; column-gap: var(--sp-4); }
  .ciudad { font-size: 14px; }
}

/* =============================================================================
   15 · PARA EMPRESAS · PARA CANDIDATOS
   ========================================================================== */

.audiencias {
  padding-bottom: var(--sec-y);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.audiencia {
  display: flex; flex-direction: column;
  padding: var(--sp-2);
  border-radius: var(--r-panel);
  background: var(--bg-panel);
}
.audiencia--clara { background: var(--k-light-100); }
.audiencia__foto { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-tile); background: var(--bg-tile); }
.audiencia__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-7) var(--sp-6) var(--sp-6); }
.audiencia__rotulo { color: var(--ink-3); }
.audiencia__titulo { font: var(--fw-titulo) var(--fs-dato)/1.1 var(--font-display); letter-spacing: var(--ls-titulo); text-wrap: balance; margin-top: calc(-1 * var(--sp-2)); }
.audiencia__cta { margin-top: auto; }

.lista-check { display: flex; flex-direction: column; gap: var(--sp-3); }
.lista-check li { display: flex; align-items: flex-start; gap: var(--sp-3); line-height: 1.45; }
.lista-check svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--accent-text); stroke-width: 2; }

@media (max-width: 899px) {
  .audiencias { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   16 · EQUIPO + RESPALDO
   ========================================================================== */

.equipo {
  padding-block: var(--sec-y);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-9) clamp(40px, 6vw, 96px);
  align-items: center;
}
/* El fondo blanco de la foto se volvió el hueso del panel en el duotono:
   el retrato queda recortado sin máscara. 5:7 y no 4:5 (Rocío, 22-10:
   "alargar un poco el recuadro"): con la bio larga, el texto mide 780 a 1440
   y el retrato 622. La foto es cuadrada y no tiene más cuerpo abajo: el
   recuadro más alto la amplía un 12% y recorta los costados (Marina ocupa el
   53% del ancho de la foto; queda un 9% de aire a cada lado). */
.equipo__retrato {
  position: relative;
  border-radius: var(--r-panel); overflow: hidden;
  background: var(--k-light-100);
  aspect-ratio: 5 / 7;
}
.equipo__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.equipo__retrato .foto-color__img { position: absolute; inset: 0; }
.equipo__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); min-width: 0; }
.equipo__nombre { font: var(--fw-titulo) clamp(42px, 5vw, 72px)/1 var(--font-display); letter-spacing: var(--ls-titulo); margin-top: calc(-1 * var(--sp-2)); }
.equipo__bio { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
.equipo__cifras { width: 100%; padding-block: var(--sp-6); border-block: 1px solid var(--line); }
.trayectoria { display: flex; flex-direction: column; gap: var(--sp-3); }
.trayectoria__rotulo { color: var(--ink-3); }
/* Los logos (pedido de Rocío, 21-10-2026) en un solo color, el de los textos
   secundarios, y con la misma superficie cada uno: salen de _build/logos.js.
   Ackermann International no tiene logo disponible y queda escrito. */
.trayectoria__lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-7); }
.trayectoria__lista img { display: block; max-width: 100%; height: auto; }
.trayectoria__texto { font: var(--fw-titulo) clamp(17px, 1.5vw, 20px)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink-2); }

/* Al pasar el mouse se corre la flecha, no el logo de LinkedIn */
.equipo__linkedin svg:first-child { transform: none; }

.respaldo {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: var(--sp-5) var(--sp-9);
  padding-block: var(--sp-8) var(--sec-y);
  border-top: 1px solid var(--line);
}
.respaldo__marca { display: flex; align-items: center; gap: var(--sp-4); }
.respaldo__rotulo { color: var(--ink-3); white-space: nowrap; }
/* 56 px (pedido de Rocío: "más grande"; a 32 la bajada "AI Native Business
   Platforms" no se leía). Así acompaña el alto del texto de la derecha. */
.respaldo__marca img { height: 56px; width: auto; }
.respaldo__texto { color: var(--ink-2); max-width: 52ch; justify-self: end; }

@media (max-width: 899px) {
  .equipo { grid-template-columns: minmax(0, 1fr); }
  .equipo__retrato { max-width: 440px; width: 100%; }
  .respaldo { grid-template-columns: minmax(0, 1fr); }
  .respaldo__texto { justify-self: start; }
}
@media (max-width: 599px) {
  .equipo__cifras { --n: 3; gap: var(--sp-4); }
  .equipo__cifras .cifra__rotulo { font-size: 10px; letter-spacing: 0.14em; }
  /* en teléfono el rótulo va arriba: rótulo y logo de lado no entran */
  .respaldo__marca { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .respaldo__marca img { height: 48px; }
}

/* =============================================================================
   17 · CONTACTO
   ========================================================================== */

.contacto { margin-bottom: var(--shell-pad); }
.contacto__grilla {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-9) clamp(40px, 6vw, 96px);
  align-items: start;
}
.contacto__texto { display: flex; flex-direction: column; gap: var(--sp-6); }
.contacto__bajada { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.contacto__datos { display: flex; flex-direction: column; margin-top: var(--sp-4); max-width: 420px; }
.contacto__datos div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 52px; border-top: 1px solid var(--line); }
.contacto__datos div:last-child { border-bottom: 1px solid var(--line); }
.contacto__datos dt { color: var(--ink-3); }
/* 44 px de alto para tocar (el texto solo medía 22: WCAG 2.5.8 pide 24) */
.contacto__dato { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--ink); font-weight: var(--fw-semi); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--tr-rapida); }
.contacto__dato:hover { text-decoration-color: currentColor; }

.formulario {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-panel);
  background: var(--k-light-0);
  box-shadow: var(--sh-md);
}
.perfil { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); container-type: inline-size; }
/* Cada opción mide lo que su texto pide: con dos columnas iguales "Empresa con
   una búsqueda" se partía en dos líneas y "Candidato" sobraba. Cuando no
   entran juntas en una línea, se apilan (por contenedor, no por pantalla:
   el formulario mide distinto a igual ancho de ventana). */
.perfil__opciones {
  display: grid; grid-template-columns: minmax(max-content, 1.35fr) minmax(max-content, 1fr);
  gap: 4px; padding: 4px;
  border-radius: var(--r-pill);
  background: var(--k-light-200);
}
.perfil__opcion { position: relative; display: flex; }
.perfil__opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.perfil__opcion span {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  min-height: 44px; padding: 6px var(--sp-4);
  border-radius: var(--r-pill);
  font: var(--fw-semi) var(--fs-chico)/1.2 var(--font-ui); color: var(--k-light-800);
  transition: background var(--tr-rapida), color var(--tr-rapida);
  pointer-events: none;
}
.perfil__opcion:hover span { color: var(--k-light-900); }
.perfil__opcion input:checked + span { background: var(--k-brand-400); color: var(--k-dark-950); }
.perfil__opcion input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@container (max-width: 359px) {
  .perfil__opciones { grid-template-columns: minmax(0, 1fr); border-radius: var(--r-field); }
  .perfil__opcion span { border-radius: 10px; }
}

.campo { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo__rotulo { color: var(--ink-2); padding: 0; }
.campo__req { color: var(--ink-3); }
.campo__control {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  border: 1px solid var(--k-light-300); border-radius: var(--r-field);
  background: var(--k-light-50); color: var(--ink);
  font: var(--fw-cuerpo) 16px/1.4 var(--font-ui);   /* 16 px: iOS no hace zoom al enfocar */
  transition: border-color var(--tr-rapida), background var(--tr-rapida);
}
.campo__control:hover { border-color: var(--k-light-400); }
.campo__control:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--k-brand-700); background: var(--k-light-0); }
.campo__control--area { min-height: 120px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: 1.5; }
.campo__control[aria-invalid="true"] { border-color: var(--st-error); }
/* Un campo con error enfocado no lleva el anillo verde: verde sobre borde rojo
   dice "bien" y "mal" a la vez. */
.campo__control[aria-invalid="true"]:focus-visible { outline-color: var(--st-error); border-color: var(--st-error); }
.campo__error { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: var(--fw-semi); color: var(--st-error); }
.campo__error[hidden] { display: none; }

.formulario__pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-2); }
.formulario__legal { font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 42ch; }
.formulario__legal a { color: var(--accent-text); font-weight: var(--fw-semi); }
.formulario__req { display: block; }
.formulario__estado {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-field);
  background: var(--accent-wash); color: var(--accent-text);
  font-size: var(--fs-chico); font-weight: var(--fw-semi); line-height: 1.45;
}
.formulario__estado[hidden] { display: none; }
/* si no se pudo enviar: rojo, como los errores de los campos */
.formulario__estado.es-error { background: var(--st-error-bg); color: var(--st-error); }
.formulario__estado a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.formulario__trampa { display: none; }
.formulario__estado svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 899px) {
  .contacto__grilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .formulario { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
  .formulario__pie .k-btn { width: 100%; }
}

/* =============================================================================
   18 · PIE
   ========================================================================== */

.pie { background: var(--bg-deep); padding-block: clamp(56px, 7vw, 96px) var(--sp-8); }
.pie__grilla {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-9) var(--sp-8);
  align-items: start;
}
.pie__marca { display: flex; flex-direction: column; gap: var(--sp-4); }
/* 300 px: el slogan del lockup pide 240 como mínimo (manual, hoja 07). */
.pie__marca img { width: 300px; height: auto; }
.pie__lema { color: var(--ink-3); }
.pie__nav ul { columns: 2; column-gap: var(--sp-6); }
.pie__nav a {
  display: inline-flex; align-items: center; min-height: 36px;
  color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.pie__nav a:hover { color: var(--ink); text-decoration: underline; }
/* Lo legal es metadato: Plex Mono a 12, sin caja alta (se lee como frase). */
.pie__legal { display: flex; flex-direction: column; gap: var(--sp-3); font: 400 12px/1.5 var(--font-mono); color: var(--ink-3); }
.pie__holding { display: flex; align-items: center; gap: var(--sp-3); }
.pie__holding img { height: 26px; width: auto; }
.pie__aviso { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* el aviso de privacidad y los términos: la página legal (22-10-2026) */
.pie__aviso a { color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--tr-rapida); }
.pie__aviso a:hover { text-decoration-color: currentColor; }

@media (max-width: 899px) {
  .pie__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
  .pie__grilla { grid-template-columns: minmax(0, 1fr); }
  .pie__marca img { width: 260px; }
}

/* =============================================================================
   19 · PREFERENCIAS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; }
}

/* =============================================================================
   20 · LA PÁGINA LEGAL (legal.html)
   El aviso de privacidad y los términos de uso (22-10-2026): un texto largo,
   en una columna de lectura, con la cabecera y el pie mínimos.
   ========================================================================== */
.legal-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--cabecera-h); border-bottom: 1px solid var(--line);
}
.legal-cabeza__marca { display: flex; align-items: center; min-height: 44px; border-radius: var(--r-chip); }
.legal-cabeza__marca img { display: block; width: 165px; height: auto; }
.legal { padding-block: clamp(40px, 6vw, 80px); }
.legal__texto { max-width: 68ch; }
.legal__texto h1 { font: var(--fw-titulo) var(--fs-sec)/1.05 var(--font-display); letter-spacing: var(--ls-titulo); text-wrap: balance; }
.legal__fecha { margin-top: var(--sp-4); font: 400 var(--fs-etq)/1.4 var(--font-mono); letter-spacing: var(--ls-etq); text-transform: uppercase; color: var(--ink-3); }
.legal__texto h2 {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--sp-6); border-top: 1px solid var(--line);
  font: var(--fw-titulo) clamp(24px, 2.4vw, 32px)/1.2 var(--font-display); letter-spacing: -0.01em;
  scroll-margin-top: var(--sp-6);
}
.legal__texto p { margin-top: var(--sp-4); font-size: var(--fs-texto); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.legal__texto strong { color: var(--ink); font-weight: var(--fw-semi); }
.legal__texto a { color: var(--accent-text); font-weight: var(--fw-semi); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-pie {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  padding-block: var(--sp-7) var(--sp-9); border-top: 1px solid var(--line);
}
.legal-pie__copy { color: var(--ink-3); font-size: var(--fs-chico); }
@media (max-width: 599px) {
  .legal-cabeza__marca img { width: 139px; }
}