/* ==========================================================================
   PRECISO · Base
   Reset, tipografía, layout, componentes y movimiento.
   Todos los valores salen de tokens.css.
   ========================================================================== */

/* ==========================================================================
   1 · Reset
   ========================================================================== */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-light-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); }

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-sm); font-weight: var(--fw-semibold);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

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

/* ==========================================================================
   2 · Tipografía
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--on-light);
  text-wrap: balance;
}

.mega { font-size: var(--fs-mega); line-height: var(--lh-mega); letter-spacing: var(--ls-mega); }
/* Dos escalones por debajo de .mega, para titulares que no caben a 80 px:
   --md para frases de dos oraciones cortas, --long para frases largas. */
.mega--md   { font-size: clamp(2.375rem, 4.8vw, 4rem); line-height: 1.04; }
.mega--long { font-size: clamp(2.125rem, 4.2vw, 3.375rem); line-height: 1.08; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }

p { max-width: var(--measure-wide); text-wrap: pretty; }

.lead { font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: 1.6; color: var(--on-light-soft); max-width: var(--measure-wide); }
.small { font-size: var(--fs-sm); }
.micro { font-size: var(--fs-xs); }
.faint { color: var(--on-light-faint); }

strong, b { font-weight: var(--fw-semibold); color: var(--on-light); }

/* Resaltado tipográfico de marca: trazo amarillo bajo la palabra */
.hl {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-size: 100% .32em;
  background-position: 0 88%;
}
/* Para expresiones de varias palabras: si el salto de línea cae dentro,
   el trazo se parte en dos y queda sucio. */
.hl--whole { white-space: nowrap; }

.eyebrow {
  /* flex-start, no center: cuando la etiqueta ocupa más de una línea el punto
     debe quedarse en la primera, no flotando en mitad del bloque. */
  display: inline-flex; align-items: flex-start; gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-light-faint);
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  /* Centra el punto sobre la primera línea de texto, no sobre la etiqueta entera. */
  margin-top: calc((var(--lh-body) * 1em - 6px) / 2);
  background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}

/* ==========================================================================
   3 · Zonas oscuras
   Se usan como acento, dos veces en toda la página.
   ========================================================================== */

.on-dark { background: var(--ink); color: var(--on-dark-soft); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark .lead { color: var(--on-dark-soft); }
.on-dark .faint { color: var(--on-dark-faint); }
.on-dark .eyebrow { color: var(--on-dark-faint); }
.on-dark strong, .on-dark b { color: var(--on-dark); }
.on-dark .hl { background-image: none; color: var(--brand); }

/* ==========================================================================
   4 · Layout
   ========================================================================== */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--warm { background: var(--paper-warm); }
.section--soft { background: var(--paper-soft); }
/* Azul de separación. No es un color con significado: solo distingue un bloque
   dentro de una serie. Por eso no aparece en gráficos ni en indicadores. */
.section--blue { background: var(--paper-blue); }

.section-head { max-width: var(--measure-wide); margin-bottom: var(--sp-9); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }
.section-head > * + * { margin-top: var(--sp-5); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-7), 5vw, var(--sp-10)); align-items: center; }
.split--wide-left  { grid-template-columns: 1.25fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.25fr; }

.stack > * + * { margin-top: var(--sp-4); }
/* Centrar el texto no basta: los párrafos y titulares llevan max-width,
   así que sin margen automático quedan alineados a la izquierda del bloque. */
.center { text-align: center; }
.center h2, .center p, .center .lead { margin-inline: auto; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-7 { margin-top: var(--sp-7); }
.mt-9 { margin-top: var(--sp-9); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4,
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
}
@media (max-width: 1040px) and (min-width: 901px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   5 · Botones
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border: 1px solid transparent; border-radius: var(--r-full);
  background: var(--brand); color: var(--on-brand);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--brand-bright); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(201, 154, 14, .7); }

.btn--ghost { background: transparent; color: var(--on-light); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--paper-soft); border-color: var(--on-light); box-shadow: none; }
.on-dark .btn--ghost { color: var(--on-dark); border-color: var(--hairline-strong); }
.on-dark .btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--on-dark); }

.btn--sm { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); }

/* Botón oscuro: para cuando el fondo ya es amarillo y el botón de marca
   no destacaría sobre él. */
.btn--ink { background: var(--ink); color: var(--on-dark); }
.btn--ink:hover { background: var(--ink-raised); box-shadow: 0 12px 26px -14px rgba(15, 23, 41, .8); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.center .btn-row, .btn-row.center { justify-content: center; }

.arrow-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); color: var(--on-light); }
.arrow-link svg { transition: transform var(--dur) var(--ease-out); }
.arrow-link:hover svg { transform: translateX(5px); }
.on-dark .arrow-link { color: var(--brand); }

/* Documentos legales: una medida de lectura cómoda y ritmo editorial. */
.section > .prose {
  max-width: var(--container-narrow);
  padding-bottom: var(--sp-10);
}
.prose > .arrow-link {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--brand);
}
.prose > .eyebrow { display: flex; margin-bottom: var(--sp-4); }
.prose > h1 { max-width: var(--measure-wide); margin-bottom: var(--sp-5); }
.prose > .lead {
  max-width: var(--measure-wide);
  margin-bottom: clamp(var(--sp-8), 7vw, var(--sp-10));
  padding-bottom: clamp(var(--sp-8), 7vw, var(--sp-10));
  border-bottom: 1px solid var(--rule);
}
.prose > h2 {
  max-width: var(--measure-wide);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
}
.prose > h2:not(:first-of-type) { padding-top: var(--sp-8); border-top: 1px solid var(--rule); }
.prose > p + p { margin-top: var(--sp-4); }
.prose > ul {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-left: var(--sp-5);
  max-width: var(--measure-wide);
}
.prose > li { position: relative; }
.prose > ul > li::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-5)); top: .68em;
  width: .375rem; height: .375rem; border-radius: var(--r-full); background: var(--brand);
}
.prose code { padding: .1em .35em; border-radius: var(--r-sm); background: var(--paper-soft); color: var(--on-light); font-size: .9em; }
.prose p a { color: var(--on-light); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: var(--brand-deep); text-decoration-thickness: .1em; text-underline-offset: .15em; }
.prose p a:hover { color: var(--brand-deep); }

@media (max-width: 760px) {
  .section > .prose { padding-bottom: var(--sp-8); }
  .prose > .arrow-link { margin-bottom: var(--sp-7); }
  .prose > .lead { margin-bottom: var(--sp-8); padding-bottom: var(--sp-8); }
  .prose > h2, .prose > h2:not(:first-of-type) { margin-top: var(--sp-7); padding-top: var(--sp-7); }
}

/* ==========================================================================
   6 · Superficies
   ========================================================================== */

.panel {
  position: relative;
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.panel > * + * { margin-top: var(--sp-3); }
.panel p { font-size: var(--fs-sm); }
.panel--hover:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-card); transform: translateY(-3px); }

/* Tarjetas de los dos análisis: cada una en el tinte de su color semántico,
   el mismo que las representa en todos los gráficos de la web. */
.panel--tint-abs { background: var(--abs-soft); border-color: transparent; }
.panel--tint-pre { background: var(--pre-soft); border-color: transparent; }

/* El nombre del análisis, grande y en su color: es lo que permite distinguir
   las dos tarjetas de un vistazo, sin tener que leerlas. */
.analysis__name {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
}
.panel--tint-abs .analysis__name { color: var(--abs-ink); }
.panel--tint-pre .analysis__name { color: var(--pre-ink); }

/* Cabecera de una sección de análisis. Mismo criterio que .analysis__name: el
   nombre del análisis, grande y en su color, es lo que permite saber de cuál de
   los dos se está hablando sin leer nada más. El titular descriptivo pasa a
   segundo plano. Aquí el color SÍ representa un dato — de qué análisis se
   trata — que es su único uso permitido. */
.section-head--analysis .section-head__name {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  line-height: 1.05;
}
.section-head__name--abs { color: var(--abs-ink); }
.section-head__name--pre { color: var(--pre); }

.section-head--analysis h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--on-light-soft);
}
.on-dark .section-head--analysis h2 { color: var(--on-dark-soft); }

/* La imagen del premio. Es la única fotografía del sitio, así que se trata
   como un documento —encajada en la tarjeta, sin recortes ni efectos— y no
   como decoración. */
/* Enlace dentro de un texto pequeño: mismo subrayado dorado que los enlaces
   de los textos largos, para que se vea que se puede pinchar. */
.stat__label a {
  color: var(--on-light); font-weight: var(--fw-semibold);
  text-decoration: underline; text-decoration-color: var(--brand-deep);
  text-decoration-thickness: .1em; text-underline-offset: .15em;
}
.stat__label a:hover { color: var(--brand-deep); }

.award { margin: 0; }
.award__img {
  display: block; width: 100%; height: auto;
  margin-top: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
}
.panel--award .award__img { margin-top: var(--sp-4); }

.on-dark .panel { background: var(--ink-raised); border-color: var(--hairline); }
.on-dark .panel p { color: var(--on-dark-soft); }

.panel__eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--on-light-faint);
}

/* ==========================================================================
   7 · Cabecera
   ========================================================================== */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--rule);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); min-height: 4.75rem; }

/* El logotipo es una pieza indivisible: el símbolo no funciona suelto y el
   nombre tampoco (brandbook, «El NO isotipo»). Por eso ya no hay un .brand__mark
   y un .brand__name separados, sino un único SVG. Altura mínima permitida por
   el brandbook: 32px — de ahí que no baje de 2rem en ningún tamaño de pantalla. */
.brand { display: inline-flex; align-items: center; color: var(--on-light); }
.brand__logo { height: 2.5rem; width: auto; }
.footer .brand__logo { height: 3.25rem; }
.on-dark .brand, .footer .brand { color: var(--on-dark); }

.nav { display: flex; align-items: center; gap: var(--sp-7); }
.nav__link {
  position: relative; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--on-light-soft); transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--on-light); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--sp-4); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: transparent; border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm); cursor: pointer;
}
.nav-toggle__bar { display: block; width: 1.125rem; height: 1.5px; background: var(--on-light); position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--on-light); }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top:  6px; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .nav[hidden] { display: none; }
  .nav__link { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); }
  .nav__link::after { display: none; }
  .nav .btn { display: inline-flex; margin-top: var(--sp-5); }
}
@media (min-width: 921px) {
  .nav[hidden] { display: flex; }
  .nav .btn { display: none; }
}
@media (max-width: 560px) { .header__actions .btn { display: none; } }

/* ==========================================================================
   8 · Hero
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  /* Poco aire arriba a propósito: la cabecera ya separa, y cada píxel de más
     empuja los botones por debajo del pliegue en portátiles de 800 px. */
  padding-block: clamp(var(--sp-5), 3.5vw, var(--sp-8)) var(--section-y);
  background:
    radial-gradient(60rem 32rem at 88% -10%, var(--brand-soft), transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
}
.hero__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(var(--sp-7), 5vw, var(--sp-10)); align-items: center; }
.hero__lead { margin-top: var(--sp-6); max-width: var(--measure); }
.hero .btn-row { margin-top: var(--sp-8); }
.hero__note { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--on-light-faint); }

/* Garantías del hero: el mismo tic en todas para que se lean como una lista
   verificada de un vistazo. Iconos distintos por punto añadirían ruido a 16 px. */
.trustline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
}
.trustline li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--on-light-soft);
}
.trustline svg { flex-shrink: 0; }
.trustline circle { fill: var(--brand); }
.trustline path { stroke: var(--on-brand); }
.on-dark .trustline li { color: var(--on-dark-soft); }

@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   9 · Bloque de dato: absentismo + presentismo
   El visual que sostiene el argumento de que los dos suman.
   ========================================================================== */

.figure {
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
}
.figure__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--rule); }
.figure__title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--on-light); }
.figure__tag {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-light-faint); border: 1px solid var(--rule-strong); border-radius: var(--r-full);
  padding: .2rem var(--sp-3); white-space: nowrap;
}

.figure__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.figure__cell { padding: var(--sp-5); border-radius: var(--r-md); }
.figure__cell--abs { background: var(--abs-soft); }
.figure__cell--pre { background: var(--pre-soft); }
.figure__cell-tag {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-light-faint);
}
/* El nombre del análisis es lo primero que hay que poder leer: va a tamaño
   de titular, no de etiqueta. */
.figure__cell-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}
.figure__cell--abs .figure__cell-name { color: var(--abs-ink); }
.figure__cell--pre .figure__cell-name { color: var(--pre-ink); }
.figure__cell-note { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--on-light-soft); }

.figure__bar { display: flex; height: 12px; margin-top: var(--sp-5); border-radius: var(--r-full); overflow: hidden; background: var(--paper-soft); }
.figure__seg { height: 100%; width: 0; transition: width 1.1s var(--ease-out); }
.figure__seg--abs { background: var(--abs); }
.figure__seg--pre { background: var(--pre); }

.figure__sum {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--rule);
}
.figure__sum-label { font-size: var(--fs-sm); color: var(--on-light-faint); }
.figure__sum-value { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--on-light); }

@media (max-width: 520px) { .figure__pair { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Flujo del hero: de dónde salen los datos y en qué se convierten.
   Usa solo el amarillo de marca: el verde y el coral quedan reservados para
   donde de verdad significan algo, que es comparar absentismo y presentismo.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   La tarjeta de la cifra
   Manda un solo dato —el impacto anual— y las tres filas de abajo lo sostienen.
   El amarillo aparece únicamente en el símbolo de moneda y en la etiqueta de la
   cifra, como acento de marca; nunca pintando el dato en sí.
   -------------------------------------------------------------------------- */
.calc__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}

.calc__figure {
  display: flex; align-items: flex-start; gap: .06em;
  margin-block: var(--sp-5) var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.6vw, 4.25rem);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-mega); line-height: 1;
  color: var(--on-light);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.calc__cur { font-size: .4em; line-height: 1; color: var(--brand-deep); }

.calc__label {
  display: block;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--brand-deep);
}

/* Las separaciones cruzan la tarjeta entera, no solo la columna de texto. */
.calc__rows { margin: var(--sp-6) calc(var(--sp-6) * -1) calc(var(--sp-6) * -1); }
.calc__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--rule);
}
.calc__row dt { font-size: var(--fs-sm); color: var(--on-light-soft); }
.calc__row dd {
  font-family: var(--font-display); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); color: var(--on-light);
  font-variant-numeric: tabular-nums; text-align: right;
}

.calc__sources { margin-top: var(--sp-5); }

.flow__label {
  display: block; margin-bottom: var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-light-faint);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips li {
  font-size: var(--fs-sm); color: var(--on-light-soft);
  background: var(--paper-soft); border: 1px solid var(--rule);
  border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
}

.flow__arrow {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-block: var(--sp-5);
  font-size: var(--fs-xs); color: var(--on-light-faint);
}
.flow__arrow::before, .flow__arrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* PRUEBA: verde salud en lugar del amarillo de marca. Se reutiliza el verde
   que ya existe en el sistema en vez de introducir un segundo tono. */
.flow__out {
  padding: var(--sp-5);
  background: var(--abs-soft);
  border: 1px solid var(--abs);
  border-radius: var(--r-lg);
}
.flow__figure {
  display: block; margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: var(--fw-bold);
  line-height: 1; letter-spacing: var(--ls-heading);
  color: var(--on-light); font-variant-numeric: tabular-nums;
}
.flow__note { display: block; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--on-light-faint); }

/* ==========================================================================
   10 · Confían en Preciso · carrusel continuo
   ========================================================================== */

.trust { padding-block: var(--section-y-tight); border-block: 1px solid var(--rule); background: var(--paper); }
.trust__label {
  /* max-width:none anula el límite de medida de los párrafos, que era lo
     que impedía que este rótulo quedara centrado en el contenedor. */
  max-width: none; text-align: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-light-faint); margin-bottom: var(--sp-6);
}

/* La máscara difumina los extremos para que la entrada y la salida no corten */
.marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* La pista contiene la lista de logotipos DOS veces: al desplazar el 50%
   el bucle empalma sin salto visible.
   El ancho se deriva de dos variables para no tener que recalcular a mano
   si cambia el número de logotipos. */
.marquee {
  --marquee-count: 7;    /* logotipos distintos */
  --marquee-visible: 3;  /* cuántos se ven a la vez */
}
.marquee__track {
  display: flex;
  width: calc(var(--marquee-count) * 2 / var(--marquee-visible) * 100%);
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__item {
  display: flex; align-items: center; justify-content: center;
  width: calc(100% / (var(--marquee-count) * 2));
  flex-shrink: 0;
  padding-inline: var(--sp-3);
}

/* Cada logotipo va en una cápsula de la misma medida: es lo que iguala
   ópticamente marcas con proporciones y calidades muy distintas. */
.logo-chip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 6rem;
  padding: var(--sp-4) var(--sp-5);
  /* Fondo blanco a propósito: varios logotipos llegan como PNG sin
     transparencia y sobre gris se verían como un recuadro recortado. */
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
}
.logo-chip:hover { border-color: var(--rule-strong); }
.logo-chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Excepción óptica: algunos logotipos llegan en lienzo cuadrado con el
   dibujo ocupando solo una franja central. Al ajustarlos por altura se verían
   diminutos, así que se amplían y la cápsula recorta el aire sobrante. */
.logo-chip--tight { overflow: hidden; }
.logo-chip--tight img { transform: scale(2.8); }

/* En pantallas estrechas caben dos sin apelotonarse */
@media (max-width: 700px) {
  .marquee { --marquee-visible: 2; }
}

/* ==========================================================================
   11 · Progresión absentismo ↔ presentismo
   ========================================================================== */

.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-top: var(--sp-9); }
.chain__step { position: relative; }
.chain__track { position: relative; height: 2px; margin-bottom: var(--sp-5); background: var(--hairline); border-radius: var(--r-full); }
.chain__track::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-full);
  background: var(--step-color, var(--on-dark-faint));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--ease-out);
}
.is-visible .chain__track::after { transform: scaleX(1); }
.chain__step:nth-child(1) .chain__track::after { transition-delay: .05s; }
.chain__step:nth-child(2) .chain__track::after { transition-delay: .25s; }
.chain__step:nth-child(3) .chain__track::after { transition-delay: .45s; }
.chain__step:nth-child(4) .chain__track::after { transition-delay: .65s; }

.chain__phase {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--step-color, var(--on-dark-faint)); margin-bottom: var(--sp-3);
}
.chain__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.chain__step p { font-size: var(--fs-sm); color: var(--on-dark-soft); }

@media (max-width: 900px) { .chain { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ==========================================================================
   12 · Metodología
   ========================================================================== */

.method__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(var(--sp-7), 6vw, var(--sp-10)); align-items: start; }
.method__sticky { position: sticky; top: 7rem; }
.method__steps { display: grid; gap: var(--sp-4); }

.method__step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease-out);
}
.method__step:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-card); }
.method__index {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 50%;
  background: var(--brand-soft); border: 1px solid var(--brand);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--on-light);
}
.method__step h3 { margin-bottom: var(--sp-2); }
.method__step p { font-size: var(--fs-sm); }

.method__seal { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); padding: var(--sp-5); border: 1px dashed var(--rule-strong); border-radius: var(--r-lg); }
.method__seal p { font-size: var(--fs-xs); color: var(--on-light-faint); margin: 0; }

@media (max-width: 900px) {
  .method__grid { grid-template-columns: 1fr; }
  .method__sticky { position: static; }
}

/* ==========================================================================
   13 · Propuesta de valor destacada
   Dos piezas grandes (euros y foco) y el resto de apoyo.
   ========================================================================== */

.value { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.value__major {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 19rem; padding: var(--sp-7);
  border-radius: var(--r-xl); border: 1px solid var(--rule);
}
.value__major--euros { background: linear-gradient(150deg, var(--brand-soft), var(--paper) 70%); border-color: var(--brand); }
.value__major--foco  { background: linear-gradient(150deg, var(--paper-soft), var(--paper) 70%); }
.value__icon { width: 2.75rem; height: 2.75rem; color: var(--on-light); }
.value__major h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); margin-top: var(--sp-6); }
.value__major p { margin-top: var(--sp-3); }

.value__minor { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

@media (max-width: 900px) {
  .value, .value__minor { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14 · Caso real
   ========================================================================== */

.case {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  align-items: center;
  padding: clamp(var(--sp-6), 4vw, var(--sp-9));
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}
.case__tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--pre-ink); background: var(--pre-soft);
  border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
}
.case__value {
  display: block; margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem); font-weight: var(--fw-bold);
  line-height: 1; letter-spacing: var(--ls-mega); color: var(--on-light);
  font-variant-numeric: tabular-nums;
}
.case__caption { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--on-light-faint); }

.case__rows { display: grid; gap: var(--sp-5); }
.case__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.case__row-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--on-light); }
.case__row-value { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--on-light); font-variant-numeric: tabular-nums; }
.case__meter { height: 10px; border-radius: var(--r-full); background: var(--paper-soft); overflow: hidden; }
.case__meter > span { display: block; height: 100%; width: 0; border-radius: var(--r-full); background: var(--pre); transition: width 1.1s var(--ease-out); }
.case__meter--abs > span { background: var(--abs); }

@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }

/* ==========================================================================
   14b · Ficha de factor: el detalle detrás de una sola cifra
   ========================================================================== */

.deepdive {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  padding: clamp(var(--sp-6), 4vw, var(--sp-9));
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}

.deepdive__figure {
  display: block; margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 4.25rem); font-weight: var(--fw-bold);
  line-height: 1; letter-spacing: var(--ls-mega); color: var(--on-light);
  font-variant-numeric: tabular-nums;
}
.deepdive__unit { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--on-light-faint); }

.deepdive__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4); margin-top: var(--sp-7);
  padding-top: var(--sp-6); border-top: 1px solid var(--rule);
}
.deepdive__stat b {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--on-light);
  font-variant-numeric: tabular-nums;
}
.deepdive__stat span { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--on-light-faint); }

.deepdive__block + .deepdive__block { margin-top: var(--sp-7); }
.deepdive__block h4 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-light-faint); margin-bottom: var(--sp-4);
}

/* Etiquetas de las dimensiones por las que se puede desglosar la cifra */
.dims { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dims li {
  font-size: var(--fs-sm); color: var(--on-light-soft);
  background: var(--paper-soft); border: 1px solid var(--rule);
  border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
}

.deepdive__note {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm); color: var(--on-light-faint);
}

/* Gráfico de columnas: evolución mes a mes del coste de un factor */
.chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 11rem; margin-top: var(--sp-5); }
/* min-width:0 es imprescindible: sin él, la anchura mínima de las doce
   etiquetas impone el ancho de toda la ficha y la desborda en móvil. */
.chart__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); height: 100%; }
.chart__bar {
  width: 100%; margin-top: auto; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg, var(--pre), var(--pre-soft));
  height: 0; transition: height 1s var(--ease-out);
}
.chart__col:nth-child(2) .chart__bar  { transition-delay: .04s; }
.chart__col:nth-child(3) .chart__bar  { transition-delay: .08s; }
.chart__col:nth-child(4) .chart__bar  { transition-delay: .12s; }
.chart__col:nth-child(5) .chart__bar  { transition-delay: .16s; }
.chart__col:nth-child(6) .chart__bar  { transition-delay: .20s; }
.chart__col:nth-child(7) .chart__bar  { transition-delay: .24s; }
.chart__col:nth-child(8) .chart__bar  { transition-delay: .28s; }
.chart__col:nth-child(9) .chart__bar  { transition-delay: .32s; }
.chart__col:nth-child(10) .chart__bar { transition-delay: .36s; }
.chart__col:nth-child(11) .chart__bar { transition-delay: .40s; }
.chart__col:nth-child(12) .chart__bar { transition-delay: .44s; }
.chart__label { font-size: .625rem; letter-spacing: .04em; color: var(--on-light-faint); text-transform: uppercase; }

.chart__scale {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rule);
  font-size: var(--fs-xs); color: var(--on-light-faint);
}
.chart__scale b { color: var(--on-light); font-weight: var(--fw-semibold); }

/* En pantallas estrechas las doce columnas siguen cabiendo apretando
   separación y rótulo, en lugar de recurrir a scroll horizontal. */
@media (max-width: 640px) {
  .chart { gap: 3px; height: 9rem; }
  .chart__col { gap: var(--sp-1); }
  .chart__label { font-size: .5625rem; }
  .chart__scale { flex-direction: column; gap: var(--sp-2); }
}

/* Desglose: lista de filas con nombre, cifra secundaria y medidor */
.breakdown > li + li { margin-top: var(--sp-5); }
.breakdown__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.breakdown__name { font-size: var(--fs-sm); color: var(--on-light); font-weight: var(--fw-medium); }
.breakdown__value { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--on-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* El cierre de la tarjeta de resumen. Cada análisis va en su color: aquí el
   color no adorna, identifica de cuál de los dos se habla, que es justo para
   lo que existe. De paso, enseña el código de color al que acaba de llegar. */
.figure__claim {
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-semibold); line-height: 1.3;
  color: var(--on-light); text-wrap: balance; max-width: none;
}
.figure__claim-pre { color: var(--pre-ink); }
.figure__claim-abs { color: var(--abs-ink); }

/* --------------------------------------------------------------------------
   Caso 2 · El mes devuelto y los cuatro pasos
   El dato de aquí no es de salud: son días de trabajo administrativo. Por eso
   el acento es el amarillo de marca y no el coral ni el verde, que están
   reservados a presentismo y absentismo.
   -------------------------------------------------------------------------- */
.figure--dark {
  background: var(--ink); border-color: var(--ink-raised); color: var(--on-dark);
  padding: var(--sp-7);
}
.figure__tag--dark { color: var(--on-dark-faint); border-color: var(--hairline-strong); }

.mesx__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.mesx__title {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-semibold); color: var(--on-dark); letter-spacing: var(--ls-heading);
}
.mesx__title span { color: var(--brand); }

.mesx__par {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-7); margin-top: var(--sp-7);
}
/* La separación entre los dos momentos solo existe cuando van uno al lado del
   otro; apilados, una línea vertical no separa nada. */
@media (min-width: 60rem) {
  .mesx__lado + .mesx__lado { padding-left: var(--sp-7); border-left: 1px solid var(--hairline); }
}

.mesx__tag {
  display: block; margin-bottom: var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-dark-faint);
}
.mesx__tag--pre { color: var(--pre); }

.mesx__n { display: flex; align-items: baseline; gap: var(--sp-3); max-width: none; }
.mesx__n b {
  font-family: var(--font-display); font-size: clamp(3rem, 5.6vw, 4.25rem);
  font-weight: var(--fw-semibold); line-height: .9; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.mesx__n .mesx__cero { color: var(--on-dark); }
.mesx__n span { font-size: var(--fs-sm); color: var(--on-dark-soft); }

.mes { display: grid; grid-template-columns: repeat(22, 1fr); gap: 4px; margin-top: var(--sp-5); }
.mes__d { aspect-ratio: 1; border-radius: 3px; background: var(--ink-raised); }
.mes__d--on { background: var(--brand); }
.mesx__pie { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--on-dark-soft); max-width: none; }
.mesx__pie strong { color: var(--on-dark); }

/* Cada fila se compara sola, para no tener que mirar dos tarjetas a la vez. */
.cmp { margin-top: var(--sp-7); }
.cmp__row {
  display: grid; grid-template-columns: 1fr auto 2.5rem auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid var(--hairline);
}
.cmp__k { font-size: var(--fs-sm); color: var(--on-dark-soft); }
.cmp__antes {
  font-size: var(--fs-sm); color: var(--on-dark-faint); text-align: right;
  text-decoration: line-through; text-decoration-color: var(--on-dark-faint);
}
.cmp__guion { height: 2px; background: var(--brand); border-radius: 2px; }
.cmp__despues {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--on-dark); text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 40rem) {
  .cmp__row { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
  .cmp__guion { display: none; }
  .cmp__antes, .cmp__despues { grid-column: 2; }
}

/* Los cuatro pasos. El número y la línea dorada son lo que los encadena: sin
   la línea son cuatro columnas sueltas, con ella son una secuencia. */
.pasos__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.pasos__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-6); margin-top: var(--sp-7); list-style: none;
}
.pasos__n {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--r-full);
  background: var(--ink); color: var(--on-dark);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.pasos__p { position: relative; }
.pasos__p::after {
  content: ""; position: absolute; left: 2.75rem; right: 0; top: 1rem;
  height: 2px; background: var(--brand);
}
.pasos__t { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--on-light); }
.pasos__d { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--on-light-soft); max-width: none; }

.pasos__cambio {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-5);
  background: var(--pre-soft); border: 1px solid var(--pre);
  border-radius: var(--r-md); font-size: var(--fs-sm); max-width: none;
}
.pasos__cambio-k {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--pre-ink);
}
.pasos__cambio s { color: var(--on-light-faint); }
.pasos__cambio-f { color: var(--pre-ink); }
.pasos__cambio b { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--on-light); }

.breakdown__meter { height: 8px; border-radius: var(--r-full); background: var(--paper-soft); overflow: hidden; }
.breakdown__meter > span { display: block; height: 100%; width: 0; border-radius: var(--r-full); background: var(--pre); transition: width 1s var(--ease-out); }
/* Verde SOLO cuando la fila representa absentismo. Para «el resto», gris: si
   se pinta de verde dentro de un gráfico de presentismo, el color está diciendo
   lo contrario de lo que pone la etiqueta. */
.breakdown__meter--abs > span { background: var(--abs); }
.breakdown__meter--resto > span { background: var(--on-light-faint); }
.breakdown__sub { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--on-light-faint); }

/* Lista de credenciales, con el triángulo del logotipo como viñeta */
.checks > li {
  position: relative; padding-left: var(--sp-6);
  font-size: var(--fs-sm); color: var(--on-light-soft);
}
.checks > li + li { margin-top: var(--sp-3); }
.checks > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 0; height: 0;
  border-left: .55em solid var(--brand);
  border-top: .34em solid transparent;
  border-bottom: .34em solid transparent;
}

/* Pares clave-valor para magnitudes sueltas */
.keyvals > li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.keyvals > li + li { border-top: 1px solid var(--rule); }
.keyvals dt, .keyvals__k { font-size: var(--fs-sm); color: var(--on-light-soft); }
.keyvals__v { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--on-light); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Aviso de dato ilustrativo */
.disclaimer {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-6); padding: var(--sp-5);
  border: 1px dashed var(--rule-strong); border-radius: var(--r-lg);
  font-size: var(--fs-xs); color: var(--on-light-faint);
}
.disclaimer p { margin: 0; font-size: var(--fs-xs); }

@media (max-width: 900px) {
  .deepdive { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .deepdive__stats { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ==========================================================================
   15 · Cifras
   ========================================================================== */

.stat__value {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: var(--fw-bold);
  line-height: 1; letter-spacing: var(--ls-mega);
  color: var(--on-light); font-variant-numeric: tabular-nums;
}
.on-dark .stat__value { color: var(--on-dark); }
.stat__label { display: block; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--on-light-faint); }
.on-dark .stat__label { color: var(--on-dark-faint); }

.feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-5); align-items: stretch; }
.feature__main { display: flex; flex-direction: column; }
.feature__side { display: grid; gap: var(--sp-5); }
.feature__side .panel { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }

/* ==========================================================================
   15a · Llamada intermedia
   Barra estrecha para romper el recorrido sin repetir el peso del cierre.
   ========================================================================== */

.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6)) clamp(var(--sp-5), 3vw, var(--sp-7));
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: var(--r-xl);
}
.cta-strip__text { max-width: 40rem; }
.cta-strip__text strong {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-bold); color: var(--on-light);
}
.cta-strip p { margin: 0; font-size: var(--fs-sm); }
.cta-strip .btn { flex-shrink: 0; }

@media (max-width: 700px) { .cta-strip { flex-direction: column; align-items: stretch; } }

/* ==========================================================================
   15b · Reserva de diagnóstico
   ========================================================================== */

.booking { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .booking { grid-template-columns: 1fr; } }

.booking__aside, .booking__main {
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl);
}
.booking__aside { box-shadow: none; }
.booking__main { box-shadow: var(--shadow-card); }

.booking__meta { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.booking__meta div { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.booking__meta svg { flex-shrink: 0; color: var(--on-light-faint); }

/* Indicador de paso */
/* flex-wrap es lo que impide que los tres pasos impongan su ancho a toda
   la tarjeta de reserva en pantallas estrechas. */
.steps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); row-gap: var(--sp-4); margin-bottom: var(--sp-6); }
.steps-bar li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--on-light-faint); }
.steps-bar li + li::before { content: ""; width: 1.5rem; height: 1px; background: var(--rule-strong); margin-right: var(--sp-2); }
.steps-bar__dot {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--rule-strong); font-size: .6875rem; font-weight: var(--fw-semibold);
}
.steps-bar li[aria-current="step"] { color: var(--on-light); font-weight: var(--fw-semibold); }
.steps-bar li[aria-current="step"] .steps-bar__dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.steps-bar li[data-done="true"] .steps-bar__dot { background: var(--abs); border-color: var(--abs); color: #fff; }

/* En muy estrecho los conectores estorban más de lo que aportan */
@media (max-width: 480px) {
  .steps-bar li + li::before { display: none; }
}

/* Calendario */
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.calendar__month { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--on-light); text-transform: capitalize; }
.calendar__nav { display: flex; gap: var(--sp-2); }
.calendar__nav button {
  width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  color: var(--on-light); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.calendar__nav button:hover:not([disabled]) { border-color: var(--on-light); }
.calendar__nav button[disabled] { opacity: .3; cursor: default; }

.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); }
.calendar__wd { text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--on-light-faint); padding-bottom: var(--sp-2); }

.calendar__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--on-light-faint);
  font-variant-numeric: tabular-nums; cursor: default;
}
.calendar__day--available {
  border-color: var(--rule-strong); color: var(--on-light);
  font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.calendar__day--available:hover { background: var(--brand-soft); border-color: var(--brand); }
.calendar__day[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.calendar__day--empty { border: 0; }

.calendar__legend { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--on-light-faint); }

/* Franjas horarias */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.slot {
  padding: var(--sp-3) var(--sp-2);
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  color: var(--on-light); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.slot:hover { border-color: var(--on-light); }
.slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

/* Formulario */
.field + .field { margin-top: var(--sp-5); }
.field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--on-light); margin-bottom: var(--sp-2); }
.field input {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--paper); color: var(--on-light);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:hover { border-color: var(--on-light-faint); }
.field__error { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--pre-ink); }
.field input[aria-invalid="true"] { border-color: var(--pre-ink); }

.booking__foot { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-6); }
.link-btn { background: none; border: 0; padding: 0; color: var(--on-light-faint); font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--on-light); }

.field--consent { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-5); }
.field--consent input { width: 1rem; height: 1rem; margin-top: .2rem; }
.field--consent label { margin: 0; font-weight: var(--fw-regular); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Confirmación */
/* El panel recibe el foco por programa para que un lector de pantalla anuncie
   la confirmación. Como no es un elemento interactivo ni se llega a él con el
   tabulador, el anillo de foco sobraría. */
.confirm { text-align: center; }
.confirm:focus, .confirm:focus-visible { outline: none; }
.confirm__icon {
  width: 3.5rem; height: 3.5rem; margin: 0 auto var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--abs-soft); color: var(--abs-ink);
}
.confirm h2 { margin-bottom: var(--sp-3); }
.confirm p { margin-inline: auto; }

.summary { margin: var(--sp-7) auto 0; max-width: 24rem; text-align: left; }
.summary > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); }
.summary > li + li { border-top: 1px solid var(--rule); }
.summary__k { font-size: var(--fs-sm); color: var(--on-light-faint); }
.summary__v { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--on-light); text-align: right; }

/* ==========================================================================
   16 · Acordeón
   ========================================================================== */

.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-6) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium);
  color: var(--on-light); transition: color var(--dur-fast) var(--ease);
}
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { color: var(--brand-deep); }
.accordion__sign { position: relative; flex-shrink: 0; width: 1.5rem; height: 1.5rem; }
.accordion__sign::before, .accordion__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: currentColor; border-radius: var(--r-full);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.accordion__sign::before { width: 1.125rem; height: 2px; }
.accordion__sign::after  { width: 2px; height: 1.125rem; }
.accordion__item[open] .accordion__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion__a { padding-bottom: var(--sp-6); }

/* ==========================================================================
   17 · Cierre: los meses sin medir
   ========================================================================== */

.closing { background: var(--ink-deep); text-align: center; overflow: hidden; }
.closing h2, .closing p { margin-inline: auto; }

.closing__year {
  display: block; margin: var(--sp-9) auto var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* Doce casillas = doce meses. Cada una lleva su abreviatura visible para que
   se lea como un calendario y no como una barra de progreso. */
.closing__months {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-2); margin: 0 auto; max-width: 44rem;
}
.closing__month {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1);
  aspect-ratio: 3 / 4; border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .03);
  font-size: var(--fs-xs); color: var(--on-dark-faint);
  transition: background var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease);
}
.closing__month b { font-weight: var(--fw-semibold); font-size: .6875rem; letter-spacing: .02em; }
.closing__month i { font-style: normal; font-size: 1rem; line-height: 1; }

/* Los meses medidos se encienden al entrar en pantalla, de izquierda a derecha */
.is-visible .closing__month--filled {
  background: var(--brand); border-color: var(--brand); color: var(--ink);
}
.closing__month--filled:nth-child(1) { transition-delay: .05s; }
.closing__month--filled:nth-child(2) { transition-delay: .12s; }
.closing__month--filled:nth-child(3) { transition-delay: .19s; }
.closing__month--filled:nth-child(4) { transition-delay: .26s; }
.closing__month--filled:nth-child(5) { transition-delay: .33s; }
.closing__month--filled:nth-child(6) { transition-delay: .40s; }

.closing__legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-5); margin-top: var(--sp-6);
  font-size: var(--fs-xs); color: var(--on-dark-faint);
}
.closing__legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.closing__key { width: .875rem; height: .875rem; border-radius: 3px; border: 1px solid var(--hairline); }
.closing__key--filled { background: var(--brand); border-color: var(--brand); }

.closing__caption { margin: var(--sp-7) auto 0; font-size: var(--fs-lead); color: var(--on-dark-soft); max-width: 34rem; }

@media (max-width: 760px) {
  .closing__months { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 420px) {
  .closing__months { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   18 · Pie
   ========================================================================== */

/* Banda previa al pie: recoge el contenido de proveedores y de contacto,
   que dejan de ser páginas del menú principal para no restar foco al
   cliente final ni repartir el SEO. */
.prefooter { background: var(--ink-deep); border-top: 1px solid var(--hairline); padding-block: var(--sp-9); }
.prefooter__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(var(--sp-7), 5vw, var(--sp-10)); align-items: start; }
.prefooter h2 { font-size: var(--fs-h3); color: var(--on-dark); }
.prefooter h3 { font-size: var(--fs-body); color: var(--on-dark); }
.prefooter p { color: var(--on-dark-soft); font-size: var(--fs-sm); }
.prefooter .eyebrow { color: var(--on-dark-faint); }
.prefooter .arrow-link { color: var(--brand); }

.prefooter__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
.prefooter__point { padding-top: var(--sp-4); border-top: 2px solid var(--hairline-strong); }
.prefooter__point h3 { margin-bottom: var(--sp-2); }
.prefooter__point p { font-size: var(--fs-xs); }

.contact-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.contact-list a, .contact-list span { display: block; color: var(--on-dark-soft); font-size: var(--fs-sm); }
.contact-list a:hover { color: var(--brand); }
.contact-list dt {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-dark-faint); margin-bottom: var(--sp-1);
}

@media (max-width: 900px) {
  .prefooter__grid { grid-template-columns: 1fr; }
  .prefooter__points { grid-template-columns: 1fr; }
}

/* Banderas de los países donde opera Preciso */
.flag { display: inline-block; width: 1.125rem; height: .75rem; border-radius: 2px; flex-shrink: 0; }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--on-dark-soft); }
.where span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer__where-label {
  margin-top: var(--sp-6); margin-bottom: var(--sp-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--on-dark-faint);
}

.footer { background: var(--ink); color: var(--on-dark-soft); padding-block: var(--sp-10) var(--sp-6); font-size: var(--fs-sm); }
.footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-7); padding-bottom: var(--sp-8); }
.footer__pitch { max-width: 22rem; color: var(--on-dark-faint); font-size: var(--fs-sm); margin-top: var(--sp-5); }
.footer h4 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: var(--sp-4);
}
.footer__link { display: block; color: var(--on-dark-soft); padding-block: var(--sp-2); transition: color var(--dur-fast) var(--ease); }
.footer__link:hover { color: var(--brand); }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs); color: var(--on-dark-faint);
}
.footer__base a:hover { color: var(--brand); }

@media (max-width: 860px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__cols { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ==========================================================================
   19 · Movimiento
   ========================================================================== */

.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .08s; }
.reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; }
.reveal-4 { transition-delay: .32s; }

/* Sin JS nada queda invisible ni vacío */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .figure__seg--abs, .no-js .figure__seg--pre { width: 50%; }
.no-js .chain__track::after { transform: scaleX(1); }
.no-js .case__meter > span { width: 60%; }
.no-js .breakdown__meter > span { width: 60%; }
.no-js .chart__bar { height: 70%; }

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