/* ==========================================================================
   ATLAS Molecular Pharma — sistema de diseño (tema WordPress)
   Dirección: editorial sobrio. Aire, jerarquía tipográfica clara,
   imagen científica como apoyo del argumento, nunca como decoración.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Marca (extraídos del logotipo oficial) */
  --orange:      var(--wp--preset--color--orange, #FE3C00);
  --orange-deep: var(--wp--preset--color--orange-deep, #D63200);
  --sage:        var(--wp--preset--color--sage, #B0D6CB);
  --sage-deep:   var(--wp--preset--color--sage-deep, #7FB7A9);
  --sage-mid:    var(--wp--preset--color--sage-mid, #A9CEC4);
  --sage-pale:   var(--wp--preset--color--sage-pale, #CDE4DD);

  /* Tinta y superficies. Los grises llevan matiz verde para que el salvia
     del logotipo mande en toda la página, no solo en los acentos. */
  --ink:    var(--wp--preset--color--ink, #16201B);
  --ink-2:  var(--wp--preset--color--ink-2, #4E5C55);
  --ink-3:  var(--wp--preset--color--ink-3, #6A7774); /* contraste AA (4.6:1) sobre blanco para textos pequeños */
  --paper:  var(--wp--preset--color--paper, #FFFFFF);
  --paper-2:var(--wp--preset--color--paper-2, #F0F6F3);
  --paper-3:var(--wp--preset--color--paper-3, #E2EFE9);
  --line:   var(--wp--preset--color--line, #DCE8E3);
  --line-2: var(--wp--preset--color--line-2, #C6D8D1);

  /* Tipografía */
  --display: var(--wp--preset--font-family--display);
  --text: var(--wp--preset--font-family--text);
  --serif: var(--wp--preset--font-family--serif);

  /* Superficie oscura: verde profundo derivado del salvia, no negro.
     Da el contraste que necesitan los bloques de énfasis sin salirse de marca. */
  --dark:      var(--wp--preset--color--dark, #16352C);
  --dark-2:    var(--wp--preset--color--dark-2, #1E453A);
  --on-dark:   rgba(255, 255, 255, 0.76);
  --on-dark-3: rgba(176, 214, 203, 0.72);

  /* Escala fluida */
  --fs-hero:  clamp(2.15rem, 1.4rem + 2.5vw, 3.35rem);
  --fs-h1:    clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem);
  --fs-h2:    clamp(1.7rem, 1.25rem + 1.7vw, 2.6rem);
  --fs-h3:    clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  --fs-lead:  clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body:  clamp(1rem, 0.96rem + 0.16vw, 1.08rem);
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;

  /* Ritmo vertical */
  --section:  clamp(4rem, 2.75rem + 5vw, 7rem); /* reducido a petición del cliente (03/11/2026) */
  --gutter:   clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);

  /* Medidas */
  --wide:   1240px;
  --normal: 1080px;
  --narrow: 46rem; /* ~68 caracteres: medida óptima de lectura */
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.13;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

strong { font-weight: 600; }

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

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

/* --- 3. Layout ----------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--normal));
  margin-inline: auto;
}
.wrap--wide   { width: min(100% - (var(--gutter) * 2), var(--wide)); }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--narrow)); }

.section { padding-block: var(--section); }
.section--tint { background: var(--paper-2); }
/* Dos secciones blancas seguidas no necesitan el doble de aire: sin cambio de
   fondo, ese hueco se leía como un final de página (p. ej. Pipeline → cierre). */
.section:not(.section--tint):not(.section--sage) + .section:not(.section--tint):not(.section--sage):not(.section--tight-top) {
  padding-top: calc(var(--section) * 0.5);
}
/* Los anclas (News & Media) no quedan tapados por la cabecera fija. */
section[id] { scroll-margin-top: 4.5rem; }
.section--sage { background: var(--paper-3); }
.section--rule { border-top: 1px solid var(--line); }

/* Etiqueta de sección: número de orden + título en versalitas.
   El número da estructura de índice y ancla la retícula. */
.eyebrow {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--sage);
  max-width: 5.5rem;
}
.eyebrow--light { color: var(--on-dark-3); }
.eyebrow--light::after { background: var(--sage-deep); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 38rem;
}

.section__title {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
}

/* Encabezado de sección a dos columnas: enunciado a la izquierda,
   contexto a la derecha. Evita el título suelto sobre un vacío. */
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem);
}
.section__head .section__title { margin-bottom: 0; }
.section__head p {
  color: var(--ink-2);
  max-width: 34rem;
  margin: 0;
}
@media (max-width: 860px) {
  .section__head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
}

.prose { max-width: var(--narrow); }
.prose p { color: var(--ink-2); }

/* --- 4. Botones y enlaces ------------------------------------------------ */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.btn:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn:active { transform: translateY(1px); }
.btn .arw { transition: transform 0.22s ease; }
.btn:hover .arw { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Enlace de texto con flecha, para cierres de sección */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.22s ease;
}
.link:hover { border-bottom-color: var(--orange); }
.link .arw { transition: transform 0.22s ease; }
.link:hover .arw { transform: translateX(3px); }

/* --- 5. Cabecera --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 74px;
}
.brand { display: block; flex: none; }
.brand img { width: 132px; }

/* Navegación: ver sección 15 (bloque de navegación de WordPress). */

/* Evita que un término con guion se parta al final de línea ("ultra-rare"). */
.nowrap { white-space: nowrap; }

/* --- 6. Hero ------------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
/* En portátiles el ancho es de escritorio pero el alto no llega a 900px, así
   que el hero se comía la pantalla entera y el H1 quedaba cortado. El ajuste
   fino por dispositivo llega en la fase responsive; esto es el mínimo para que
   el titular quepa. */
@media (min-width: 900px) and (max-height: 920px) {
  .hero { padding-block: 2.75rem 3.25rem; }
  .hero h1 { font-size: clamp(2rem, 0.9rem + 2.05vw, 2.9rem); max-width: 19ch; }
  .hero__sub { margin-bottom: 1.9rem; }
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -0.026em;
  line-height: 1.1;
  margin-bottom: 1.6rem;
  max-width: 17ch;
}
.hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 33rem;
  margin-bottom: 2.4rem;
}
.hero__figure { position: relative; }
.hero__figure img { width: 100%; }
.hero__caption {
  margin-top: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 26rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--sage);
}

/* --- 6 bis. Banda de cifras ---------------------------------------------
   Da densidad y sirve de cierre al hero sin añadir texto corrido. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  border-top: 1px solid var(--line);
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.stat { padding: 1.75rem 1.5rem 0 0; position: relative; }
.stat + .stat { padding-left: 1.75rem; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 1.75rem; bottom: 0.4rem;
  width: 1px;
  background: var(--line);
}
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}
.stat--lead .stat__num { color: var(--orange); }
.stat__label {
  display: block;
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--ink-3);
  max-width: 13rem;
}

/* --- 6 ter. Bloque narrativo a sangre (fotografía + testimonio) ----------
   Rompe el ritmo claro de la página y da la dimensión humana de la
   enfermedad, que ningún diagrama transmite. */
.story {
  background: var(--dark);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.story__media { position: relative; min-height: 26rem; overflow: hidden; }
.story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.story__body {
  padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.75rem, 1rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story__body h2 {
  font-size: var(--fs-h2);
  color: #fff;
  margin-bottom: 1.6rem;
  max-width: 20ch;
}
.story__body p { color: var(--on-dark); max-width: 34rem; }
.story__credit {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--on-dark-3);
  max-width: 30rem;
}

/* Cita destacada: misma tipografía que los títulos (el cliente pidió quitar la serif, 03/11/2026) */
.quote {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.95rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: #fff;
  margin: 0 0 1.75rem;
  max-width: 22ch;
}
.quote--ink { color: var(--ink); }

/* --- 6 quater. Entradas al hacer scroll ---------------------------------
   Las clases las activa el script; sin JS todo se ve desde el principio. */
.js .reveal,
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: var(--rd, 0s);
}
.js .reveal.is-in,
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Los botones van envueltos en un <span> para poder animarlos. Si el span
   queda inline, el transform no se le aplica y el observador mide mal su
   caja: según la altura de la ventana el botón se quedaba invisible. */
.js span[data-reveal] { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- 7. Pipeline (barras nativas, responsive y accesibles) --------------- */
/* El gráfico necesita un ancho mínimo para ser legible. En pantallas estrechas
   se desplaza dentro de su propia caja en lugar de romper el ancho de la página. */
.pipeline-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.pipeline { --cols: 5; }
.pipeline__head {
  display: grid;
  grid-template-columns: var(--labelw, 9.5rem) repeat(var(--cols), minmax(0, 1fr));
  gap: 0;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.pipeline__phase {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  text-align: center;
  padding-inline: 0.25rem;
}
.pipeline__rows { position: relative; }
/* Rejilla vertical de fases, dibujada como fondo para no ensuciar el marcado */
.pipeline__rows::before {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--labelw, 9.5rem);
  background-image: repeating-linear-gradient(
    to right,
    var(--line) 0 1px,
    transparent 1px calc(100% / var(--cols))
  );
  background-position: right top;
  pointer-events: none;
}
.pipeline__row {
  display: grid;
  grid-template-columns: var(--labelw, 9.5rem) 1fr;
  align-items: center;
  gap: 0;
  padding-block: 1.15rem;
  position: relative;
}
.pipeline__label { padding-right: 1.1rem; text-align: right; }
.pipeline__code {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: block;
}
.pipeline__ind {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-3);
  display: block;
}
.pipeline__track { position: relative; height: 30px; }
.pipeline__bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--w);
  background: var(--c, var(--sage-mid));
  border-radius: 0 1px 1px 0;
  transform-origin: left center;
}
/* La clase la añade el script: sin JS las barras se ven completas desde el
   principio, y con JS crecen cuando el gráfico entra en pantalla. */
.pipeline--anim .pipeline__bar {
  transform: scaleX(0);
  transition: transform 0.85s cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: var(--d, 0s);
}
.pipeline--anim.is-visible .pipeline__bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .pipeline--anim .pipeline__bar { transform: none; transition: none; }
}
.pipeline__row--lead .pipeline__code { color: var(--orange); }
.pipeline__stage {
  position: absolute;
  top: 50%;
  left: calc(var(--w) + 0.7rem);
  transform: translateY(-50%);
  font-size: 0.74rem;
  color: var(--ink-3);
  white-space: nowrap;
}
.pipeline__foot {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-3);
}

/* --- 8. Argumentos (3 bloques, sin bullets) ------------------------------ */
.args {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: 3.5rem;
  counter-reset: arg;
}
.arg {
  border-top: 1px solid var(--line-2);
  padding-top: 1.5rem;
  counter-increment: arg;
  position: relative;
}
/* Filete de acento que se extiende al pasar por encima: gesto mínimo,
   suficiente para que el bloque se sienta vivo. */
.arg::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 3rem; height: 2px;
  background: var(--sage-deep);
  transition: width 0.45s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.arg:hover::before { width: 100%; }
.arg__num {
  display: block;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.1rem;
}
.arg h3 { font-size: var(--fs-h3); margin-bottom: 0.85rem; line-height: 1.25; }
.arg p { color: var(--ink-2); margin: 0; }

/* --- 9. Bloque destacado ATL-001 ----------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
/* Los renders científicos vienen con fondo blanco. Sobre superficies tintadas
   se enmarcan como lámina para que el blanco se lea como decisión y no como
   un recorte mal hecho. */
.feature__media {
  position: relative;
  background: var(--paper);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  border: 1px solid var(--line);
}
.feature__media img { width: 100%; }
.feature h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; max-width: 18ch; }
.feature__body { color: var(--ink-2); max-width: 36rem; }

/* Distintivos regulatorios */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.9rem 0 2.2rem;
  padding: 0;
  list-style: none;
}
/* Todos los distintivos pesan lo mismo: ninguno se destaca sobre los demás. */
.badges li {
  font-family: var(--display);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.42em 0.9em;
  border: 1px solid var(--sage-deep);
  border-radius: 2px;
  color: var(--ink-2);
  background: var(--paper);
}

/* --- 10. Datos clave ----------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0;
}
.facts > div { background: var(--paper); padding: 1.5rem 1.4rem; }
.facts--stack { grid-template-columns: 1fr; }
.facts--stack > div { padding: 1.05rem 1.3rem; }
.facts--stack dt { margin-bottom: 0.28rem; }
.facts--stack dd { font-size: 1.05rem; }
.facts dt {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

/* --- 11. Página de activo: cabecera, índice lateral y secciones ---------- */
.asset-hero__title {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 1.5rem;
}
.asset-hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34rem;
  margin-bottom: 1.1rem;
}
.asset-hero__claim {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 30rem;
  margin: 0 0 1.9rem;
}
/* Cabecera de activo: argumento a la izquierda, ficha técnica a la derecha.
   El hueco se llena con datos útiles, no con decoración. */
.asset-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

/* La cabecera de ATL-001 y el arranque del cuerpo: antes iban en estilos
   inline, y así no se podían afinar por tamaño de pantalla. */
.hero--asset { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--tight-top { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* En portátil la cabecera llenaba la pantalla entera y parecía que la página
   se acababa ahí. Comprimida, el índice y el primer epígrafe ya asoman y se ve
   que hay más abajo. */
@media (min-width: 900px) and (max-height: 920px) {
  .hero--asset { padding-top: 2.5rem; padding-bottom: 2rem; }
  .section--tight-top { padding-top: 2rem; }
  .asset-hero__title { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.4rem); margin-bottom: 1.1rem; }
  .asset-hero__claim { margin-bottom: 1.3rem; }
  .facts--stack > div { padding: 0.85rem 1.3rem; }
}

.asset-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.toc { position: sticky; top: 105px; }
.toc__title {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  padding: 0.62rem 0 0.62rem 2.6rem;
  position: relative;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--line);
  margin-left: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  font-size: 0.8rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--ink); border-left-color: var(--sage-deep); }
.toc a.is-active { color: var(--orange); border-left-color: var(--orange); }
.toc a.is-active::before { color: var(--orange); }

.asset-section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem); }
.asset-section + .asset-section { border-top: 1px solid var(--line); }
/* El número acompaña al titular, en la misma línea de lectura que el índice */
.asset-section > h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1.6rem;
  scroll-margin-top: 110px;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
}
.asset-section > h2::before {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--sage-deep);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.asset-section .prose { max-width: 46rem; }

/* Las imágenes acompañan, no interrumpen: nunca a plena columna. */
.figure { margin: 2.5rem 0 0; max-width: 30rem; }
.figure img { width: 100%; }
/* Formatos verticales: aún más contenidos. Con espacio suficiente la foto va
   en su propia columna, junto al texto al que acompaña, y no debajo con un
   hueco en blanco al lado; si no cabe, va después del texto alineada a la
   izquierda, como el resto de figuras. */
.figure--side { max-width: 15rem; margin-top: 2rem; }
.figure--side img { display: block; }
@media (min-width: 1150px), (min-width: 700px) and (max-width: 980px) {
  .asset-section:has(> .figure--side) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    column-gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);
    align-items: start;
  }
  .asset-section:has(> .figure--side) > h2 { grid-column: 1 / -1; }
  .asset-section:has(> .figure--side) > .prose { grid-column: 1; grid-row: 2; max-width: none; }
  .asset-section > .figure--side { grid-column: 2; grid-row: 2; max-width: none; margin: 0.35rem 0 0; }
}
@media (min-width: 700px) and (max-width: 980px) {
  .asset-section:has(> .figure--side) { grid-template-columns: minmax(0, 1fr) 12rem; }
}

/* Cita/afirmación destacada dentro de texto largo */
.pull {
  margin: 2.5rem 0 0;
  padding: 1.6rem 0 1.6rem 1.75rem;
  border-left: 2px solid var(--orange);
  font-family: var(--display);
  font-size: clamp(1.22rem, 1.05rem + 0.75vw, 1.6rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.004em;
  color: var(--ink);
}

/* Línea de tiempo: la primera columna es siempre un año, sin excepciones.
   El eje vertical y los nodos dan la lectura cronológica. */
.milestones {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6rem;
  max-width: 46rem;
  position: relative;
}
.milestones::before {
  content: "";
  position: absolute;
  left: 0.31rem; top: 0.9rem; bottom: 0.9rem;
  width: 2px;
  background: var(--sage);
}
.milestones li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.5rem;
  padding: 1.15rem 0;
  align-items: baseline;
  position: relative;
}
.milestones li + li { border-top: 1px solid var(--line); }
.milestones li::before {
  content: "";
  position: absolute;
  left: -1.6rem; top: 1.55rem;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  background: var(--sage-deep);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px var(--sage);
}
.milestones .yr {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.milestones .ms { color: var(--ink-2); }

/* Hitos que comparten una aclaración común: el fondo los agrupa para que la
   nota final se lea referida solo a ellos. */
.ms-grouped { background: var(--paper-2); padding-inline: 1.1rem; }
.milestones li.ms-grouped + li.ms-grouped { border-top-color: var(--line-2); }
.ms-grouped--first { border-radius: 3px 3px 0 0; }
.ms-grouped--note {
  border-radius: 0 0 3px 3px;
  padding-bottom: 1.3rem;
}
.ms-grouped--note::before { display: none; }
.ms-grouped--note .ms {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-3);
}

/* Bloque de cierre / contacto */
.closer {
  background: var(--dark);
  color: #fff;
  padding: clamp(2.75rem, 2rem + 3vw, 4.25rem) clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
.closer h2 { font-size: var(--fs-h2); margin-bottom: 1.1rem; color: #fff; max-width: 24ch; }
/* Cuando el cierre es solo titular + botón, el botón necesita más aire. */
.closer h2 + .btn { margin-top: 0.9rem; }
.closer p { color: var(--on-dark); max-width: 34rem; }
.closer .btn--ghost { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.closer .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* --- 11 bis. Páginas interiores: cabecera y subnavegación --------------- */
.page-hero { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.page-hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem);
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}
/* Las tres páginas de About se recorren en horizontal sin volver al menú. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  border-bottom: 1px solid var(--line);
}
.subnav a {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.6rem 0 0.75rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--orange); }

/* Título a la izquierda, texto a la derecha: la misma lógica que en Science. */
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}
.intro-split .section__title { margin-bottom: 0; }
.lead-p, .prose .lead-p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink);
}

/* --- Mission & Vision ----------------------------------------------------- */
.mv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.mv__item {
  background: var(--paper);
  border-top: 3px solid var(--sage-deep);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.mv__label {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.1rem;
}
.mv__text {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

/* --- Team ----------------------------------------------------------------- */
.team__title {
  font-size: var(--fs-h2);
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}
/* Leadership y Core Team son dos bloques de la misma lista: entre ellos, menos
   aire que entre secciones distintas. */
.section:has(.team):has(+ .section .team) { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.section:has(.team) + .section:has(.team) { padding-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.25rem, 1.5rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}
/* Retratos contenidos y en blanco y negro: los originales llegan con fondos,
   luz y resoluciones muy distintos, y así la cuadrícula se lee como un equipo. */
.person__photo {
  display: block;
  width: 100%; /* mismo ancho que el texto de la ficha (petición del cliente, 03/11/2026) */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 1.15rem;
  background: var(--paper-3);
}
.person__head {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.person__name { font-size: 1.25rem; letter-spacing: -0.012em; margin: 0 0 0.2rem; }
.person__role {
  font-family: var(--display);
  font-size: 0.92rem;
  color: var(--orange-deep); /* el naranja puro no llega al contraste AA en texto pequeño */
  margin: 0;
}
.person__li { flex: none; color: var(--ink-3); line-height: 0; padding: 0.3rem 0.2rem; transition: color 0.2s; }
.person__li:hover { color: var(--ink); }
.person__li svg { width: 18px; height: 18px; fill: currentColor; }
.person__bio { font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* --- Investors and Funding ------------------------------------------------ */
.logos {
  list-style: none;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.logos li {
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.5rem;
  min-height: 8.5rem;
}
.logos img { max-width: 100%; max-height: calc(3.2rem * var(--s, 1)); width: auto; height: auto; }
/* Cada logo trae su propio aire alrededor; esto los iguala a ojo. */
.logos img[src*="kereon"] { --s: 1.9; }
.logos img[src*="spri"] { --s: 1.45; }
.logos img[src*="didi"]  { --s: 1.25; }

.funds { margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); border-top: 1px solid var(--line-2); }
.fund {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 2vw, 3rem);
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line-2);
  align-items: start;
}
.fund__logo {
  background: var(--paper);
  padding: 1rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
}
.fund__logo img { max-width: 100%; max-height: 4rem; width: auto; height: auto; }
.fund__text p { font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 50rem; }
.fund__text p + p { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-2); }
.fund__text strong { color: var(--ink); font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .intro-split, .mv { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fund { grid-template-columns: 1fr; }
  .fund__logo { justify-content: flex-start; max-width: 18rem; }
}
@media (max-width: 560px) {
  .team { grid-template-columns: 1fr; }
}

/* --- 11 ter. Resto de páginas interiores --------------------------------- */
.page-hero--rule { border-bottom: 1px solid var(--line); }
.page-hero--rule h1 { margin-bottom: 0; }
.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46rem;
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
}

/* Science */
.chassys-logo { display: block; width: 100%; max-width: 13rem; height: auto; margin-top: 1.75rem; }
/* Diagrama del proceso (imagen del cliente) con el logo encima, a la izquierda.
   En pantallas estrechas se desplaza en horizontal para que el texto se lea. */
.chassys-logo--process { max-width: 11rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.process-figure { margin: 1.25rem 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.process-figure img { width: 100%; min-width: 680px; height: auto; }
.modalities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
}
.modality { background: var(--paper); padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.modality__level {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
}
.modality h3 { font-size: 1.2rem; line-height: 1.25; margin-bottom: 0.8rem; }
.modality p:last-child { font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); margin: 0; }
/* La columna de ATLAS se distingue sin gritar: filete naranja y fondo salvia. */
.modality--ours { background: var(--paper-3); box-shadow: inset 0 3px 0 var(--orange); }
.modality--ours .modality__level { color: var(--orange); }

.process {
  list-style: none;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr) 2.2rem minmax(0, 1fr) 2.2rem minmax(0, 1fr) 2.2rem minmax(0, 1fr);
  align-items: stretch;
  padding-bottom: 4.5rem;
}
.process__stage {
  background: var(--paper-2);
  border-top: 3px solid var(--orange);
  padding: 1.25rem 1.1rem 1.4rem;
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.process__num { font-family: var(--display); font-size: 0.85rem; color: var(--orange); font-variant-numeric: tabular-nums; }
.process__name { font-family: var(--display); font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; }
/* Salida de cada etapa: va en la junta entre dos tarjetas, como en el original. */
.process__gate { position: relative; display: flex; align-items: center; justify-content: center; }
.process__gate::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--sage-deep);
}
.process__gate span {
  position: absolute;
  z-index: 1;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  width: 8.5rem;
  text-align: center;
  background: var(--sage-pale);
  color: var(--dark);
  font-family: var(--display);
  font-size: 0.78rem;
  line-height: 1.3;
  padding: 0.4rem 0.55rem;
  border-radius: 2px;
}
/* Una muesca une la etiqueta con la junta entre etapas. */
.process__gate span::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  height: 0.9rem; border-left: 1px solid var(--sage-deep);
}

/* Pipeline */
.section--chart { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.programs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.program {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 1rem + 3vw, 4.5rem);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom: 1px solid var(--line);
  padding-left: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}
.program__code { font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--sage-deep); margin-bottom: 0.4rem; }
.program__name { font-size: var(--fs-h3, 1.6rem); line-height: 1.2; margin-bottom: 1rem; max-width: 22ch; }
.program__stage { font-family: var(--display); font-size: 0.95rem; color: var(--ink); margin: 0; }
.program__stage span {
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 0.5rem;
}
.program__body p { color: var(--ink-2); line-height: 1.65; }
.program__body .link { margin-top: 0.5rem; display: inline-flex; }
.program--lead .program__code { color: var(--orange); }
.program--lead { box-shadow: inset 3px 0 0 var(--orange); }

/* News & Media */
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.news-card { background: var(--paper); padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); position: relative; display: flex; flex-direction: column; transition: background 0.2s; }
.news-card:hover { background: var(--paper-2); }
.news-card__meta { font-family: var(--display); font-size: 0.85rem; color: var(--ink-3); margin-bottom: 0.9rem; }
.news-card__title { font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.9rem; }
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__excerpt { font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 1.25rem; }
.news-card__more { margin-top: auto; color: var(--orange); font-size: 1.2rem; text-decoration: none; }
.press { list-style: none; margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.press__item a {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line-2);
  color: inherit;
  text-decoration: none;
}
.press__outlet { font-family: var(--display); font-size: 0.9rem; color: var(--ink-3); }
.press__title { font-family: var(--display); font-size: 1.15rem; line-height: 1.35; }
.press__date { font-size: 0.85rem; color: var(--ink-3); white-space: nowrap; }
.press__item a:hover .press__title { color: var(--orange); }

.article { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--section); }
.article__back { font-family: var(--display); font-size: 0.92rem; color: var(--ink-2); text-decoration: none; }
.article__back:hover { color: var(--orange); }
.article__meta { font-family: var(--display); font-size: 0.9rem; color: var(--ink-3); margin: 2.25rem 0 0.9rem; }
.article__title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 2.25rem; }

/* Partnering: dos públicos, dos tonos. */
.pblocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: stretch; }
.pblock { border: 1px solid var(--line); padding: clamp(1.75rem, 1.25rem + 2vw, 3rem); display: flex; flex-direction: column; }
.pblock .btn { margin-top: auto; align-self: flex-start; }
.pblock .prose { margin-bottom: 2rem; }
.pblock__lead { font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.35; letter-spacing: -0.012em; margin: 0.5rem 0 1.4rem; }
.pblock--patients { background: var(--paper-3); border-color: var(--paper-3); }
.pblock__title { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.3; margin: 0.5rem 0 1.1rem; }
.pblock__sub { font-size: 1.1rem; margin: 0 0 0.8rem; }
.btn--ghost-dark { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: #fff; }

/* Contact */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; }
.contact__item { background: var(--paper); padding: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.contact__item dt {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem;
}
.contact__item dd { margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.4; letter-spacing: -0.012em; }
.contact__item dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.contact__item dd a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.contact__item--main { background: var(--paper-3); }
.contact__item--main dt { color: var(--ink-2); } /* sobre verde, el gris claro no llega al contraste AA */

/* Legales */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.35rem; margin: 2.5rem 0 0.9rem; }
.legal h3 { font-size: 1.1rem; margin: 1.75rem 0 0.6rem; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.7; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1.25rem; }
.legal li { margin-bottom: 0.6rem; }
.legal li strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); }
.legal__dl { margin: 0 0 1.25rem; border-top: 1px solid var(--line); }
.legal__dl div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.legal__dl dt { font-family: var(--display); color: var(--ink-3); font-size: 0.9rem; }
.legal__dl dd { margin: 0; color: var(--ink); }

@media (max-width: 1000px) {
  .modalities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: 1fr; grid-auto-flow: row; }
  .process__stage { min-height: 0; flex-direction: row; gap: 1rem; align-items: baseline; justify-content: flex-start; }
  .process__gate { height: 3rem; }
  .process__gate::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid var(--sage-deep); }
  .process { padding-bottom: 0; }
  .process__gate { height: auto; padding-block: 0.9rem; }
  .process__gate span { position: relative; top: auto; left: auto; transform: none; width: auto; }
  .process__gate span::before { display: none; }
}
@media (max-width: 900px) {
  .program, .pblocks, .news-list, .contact { grid-template-columns: 1fr; }
  .press__item a { grid-template-columns: 1fr; gap: 0.35rem; }
}
@media (max-width: 560px) {
  .modalities { grid-template-columns: 1fr; }
  .legal__dl div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* --- 12. Pie de página --------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3.25rem 2.25rem;
  font-size: var(--fs-small);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2.25rem;
}
.site-footer img { width: 118px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}
.social { display: inline-flex; align-items: center; gap: 0.5rem; }
.social svg { width: 17px; height: 17px; fill: currentColor; }

/* --- 14. Adaptación a pantallas pequeñas --------------------------------- */
@media (max-width: 980px) {
  .story { grid-template-columns: 1fr; }
  .story__media { min-height: 20rem; max-height: 26rem; }
  .hero__grid,
  .feature { grid-template-columns: 1fr; }
  .hero__figure { order: -1; max-width: 30rem; }
  .asset-hero { grid-template-columns: 1fr; }
  .asset-hero .facts--stack { max-width: 26rem; }
  .feature__media { max-width: 26rem; }
  .asset-layout { grid-template-columns: 1fr; }
  .toc {
    position: static;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
  }
  .toc ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
  .toc a { font-size: 0.96rem; padding-block: 0.5rem; }
}


@media (max-width: 720px) {
  .stat { padding-right: 1rem; }
  .stat + .stat { padding-left: 1.1rem; }
  .pipeline { --labelw: 6rem; min-width: 33rem; }
  .pipeline__phase { font-size: 0.66rem; letter-spacing: 0.01em; }
  .pipeline__code { font-size: 0.92rem; }
  .pipeline__ind { font-size: 0.7rem; }
  .pipeline__stage { display: none; }
  .pipeline__foot { min-width: 0; }
  .milestones li { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* --- 14. Ajustes de adaptación a pantallas pequeñas ----------------------- */
@media (max-width: 720px) {
  /* La subnavegación de About se desliza en horizontal en vez de partirse. */
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1.5rem; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; flex: none; }
  .page-hero h1 { margin-bottom: 1.25rem; }
  .process__name { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  /* Ficha de equipo compacta: retrato pequeño junto al nombre y bio debajo.
     Con doce personas, el retrato a todo ancho alargaba la página en exceso. */
  .team { gap: 2.25rem; }
  .person { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.1rem; align-items: end; }
  .person__photo { grid-row: 1; margin: 0; max-width: none; }
  .person__head { grid-row: 1; border-bottom: 0; margin: 0; padding: 0; flex-direction: column; gap: 0.35rem; }
  .person__bio { grid-column: 1 / -1; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
  .logos li { min-height: 6.5rem; padding: 1.25rem 1rem; }
  .contact__item dd { font-size: 1.15rem; word-break: break-word; }
  .news-card__title { font-size: 1.2rem; }
}
@media (min-width: 561px) and (max-width: 900px) {
  /* Tablet: la ficha técnica de ATL-001 ocupa el ancho en dos columnas en vez de
     quedarse en una columna estrecha con hueco a la derecha. */
  .asset-hero .facts--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .hero__figure { max-width: 24rem; }
}

/* --- 15. WordPress: adaptación de los bloques al sistema del prototipo ----
   El resto del archivo es el CSS del prototipo. Esta sección traduce el marcado
   que generan los bloques (figure, botones, navegación, consulta de noticias,
   iconos sociales) a los mismos componentes. */

figure { margin: 0; }
/* En el prototipo estas dos figuras conservaban el margen por defecto del
   navegador (1em 40px), y con él se validaron las proporciones. */
.hero__figure, .feature__media { margin: 1em 40px; }
.entry-content { counter-reset: eyebrow; }
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; margin: 0; z-index: 100000;
  background: #fff; color: var(--ink); padding: 0.8rem 1.2rem; left: 0.5rem; top: 0.5rem;
}

/* Rótulos numerados: el número lo da el orden en la página. Si se reordenan
   secciones en el editor, la numeración se recalcula sola. */
.eyebrow::before {
  counter-increment: eyebrow;
  content: counter(eyebrow, decimal-leading-zero);
}
.eyebrow--dash::before { counter-increment: none; content: "—"; }

.asset-layout { counter-reset: asec; }
.asset-section > h2::before {
  counter-increment: asec;
  content: counter(asec, decimal-leading-zero);
}

/* Ajustes que en el prototipo iban en línea */
.is-flush-bottom { margin-bottom: 0 !important; }
.is-flush-top { padding-top: 0 !important; }
.is-spaced-bottom { margin-bottom: 2rem !important; }

/* --- Imágenes: el bloque envuelve la imagen en <figure> -------------------- */
.wp-block-image img { height: auto; }
.story .story__media .wp-block-image { position: static; }
.story .story__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.team .person__photo { overflow: hidden; }
.team .person__photo img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.figure img { width: 100%; }
@media (min-width: 1150px), (min-width: 700px) and (max-width: 980px) {
  .asset-section > .wp-block-image.figure--side { margin: 0.35rem 0 0; }
}
.wp-block-image.chassys-logo img { width: 100%; }
.fund__logo .wp-block-image { display: flex; align-items: center; justify-content: center; }
.fund__logo .wp-block-image img { max-width: 100%; max-height: 4rem; width: auto; }

/* --- Botones ------------------------------------------------------------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--orange);
  border-radius: 2px;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.wp-block-button .wp-block-button__link::after {
  content: "\2192";
  transition: transform 0.22s ease;
}
.wp-block-button .wp-block-button__link:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button .wp-block-button__link:active { transform: translateY(1px); }

.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--line-2);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.closer .wp-block-button.is-style-ghost .wp-block-button__link { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.closer .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #fff; color: var(--ink); border-color: #fff; }

.wp-block-button.is-style-ghost-dark .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.wp-block-button.is-style-ghost-dark .wp-block-button__link:hover { background: var(--ink); color: #fff; }

/* Enlace de texto con flecha */
.wp-block-button.is-style-arrow .wp-block-button__link {
  gap: 0.5em;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--orange);
  font-size: 1rem;
}
.wp-block-button.is-style-arrow .wp-block-button__link:hover { background: none; color: var(--orange); border-bottom-color: var(--orange); }

.closer h2 + .wp-block-buttons { margin-top: 0.9rem; }
.pblock .wp-block-buttons { margin-top: auto; }
.program__body .wp-block-buttons { margin-top: 0.5rem; }

/* --- Cabecera y navegación ----------------------------------------------- */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.brand a { display: block; }
.brand img { width: 132px; height: auto; }

.site-nav { font-family: var(--display); font-size: 0.94rem; }
.site-nav .wp-block-navigation__container { gap: clamp(1rem, 1.6vw, 1.9rem); }
.site-nav .wp-block-navigation-item__content {
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.site-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--ink); }
.site-nav .wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: var(--orange); }
.site-nav .wp-block-navigation__submenu-icon { margin-left: 0.4em; width: 0.6em; height: 0.6em; }
.site-nav .wp-block-navigation__submenu-icon svg { stroke-width: 1.6; }

/* Desplegable de About */
@media (min-width: 861px) {
  .site-nav .has-child .wp-block-navigation__submenu-container {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}
.site-nav .has-child .wp-block-navigation__submenu-container {
  min-width: 13.5rem !important;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 14px 40px -12px rgba(20, 21, 15, 0.16);
}
.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-radius: 2px;
  font-size: 0.92rem;
}
.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--paper-2); }
.site-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content[aria-current="page"] { color: var(--orange); }

/* El desenfoque de la cabecera convierte la cabecera en el marco de los
   elementos fijos, y el menú móvil quedaba encerrado en ella. En pantallas
   pequeñas la cabecera va en blanco liso. */
@media (max-width: 860px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}
.site-header:has(.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Botón de menú: aparece por debajo de 860px (WordPress lo saca a 600px). */
.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-close { color: var(--ink); }
.site-nav .wp-block-navigation__responsive-container-open svg,
.site-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
@media (min-width: 600px) and (max-width: 860px) {
  .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 1.1rem var(--gutter) 2rem;
  background: #fff;
}
.site-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.25rem; align-items: stretch !important; }
.site-nav .is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; align-items: stretch; }
.site-nav .is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch !important; }
.site-nav .is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
}
.site-nav .is-menu-open .has-child .wp-block-navigation__submenu-container {
  position: static;
  transform: none;
  min-width: 0 !important;
  width: 100%;
  align-items: stretch !important;
  padding: 0.25rem 0 0.5rem 1rem !important;
  border: 0;
  box-shadow: none;
}
.site-nav .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.55rem 0;
  border: 0;
  font-size: 0.98rem;
}
.site-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }

/* --- Pie --------------------------------------------------------------------- */
.site-footer__logo img { width: 118px; height: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.site-footer__nav .wp-block-navigation__container { gap: 1.6rem; }
.site-footer__nav .wp-block-navigation-item__content { color: var(--ink-2); }
.site-footer__nav .wp-block-navigation-item__content:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom p { margin: 0; }

/* Iconos de LinkedIn (pie y fichas del equipo) en el color del texto, sin
   fondo de marca. */
.wp-block-social-links.site-footer__social,
.wp-block-social-links.person__li { margin: 0; padding: 0; gap: 0; font-size: 16px; }
.wp-block-social-links.is-style-logos-only.site-footer__social .wp-social-link,
.wp-block-social-links.is-style-logos-only.person__li .wp-social-link {
  background: none; color: var(--ink-3); margin: 0; padding: 0;
}
.wp-block-social-links.site-footer__social .wp-social-link { color: var(--ink-2); }
.wp-block-social-links.site-footer__social .wp-block-social-link-anchor,
.wp-block-social-links.person__li .wp-block-social-link-anchor {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; color: inherit;
}
.wp-block-social-links.site-footer__social .wp-block-social-link-anchor { font-size: var(--fs-small); }
.wp-block-social-links.site-footer__social svg { width: 17px; height: 17px; }
.wp-block-social-links.person__li .wp-block-social-link-anchor { padding: 0.3rem 0.2rem; }
.wp-block-social-links.person__li svg { width: 18px; height: 18px; }
.wp-block-social-links.person__li .wp-social-link:hover,
.wp-block-social-links.site-footer__social .wp-social-link:hover { color: var(--ink); transform: none; }
.wp-block-social-links.site-footer__social .wp-block-social-link-label { margin: 0; }

/* El icono del prototipo es la «in» sola, sin el recuadro del logotipo. */
.wp-block-social-links.site-footer__social svg,
.wp-block-social-links.person__li svg { display: none; }
.wp-block-social-links.site-footer__social .wp-block-social-link-anchor::before,
.wp-block-social-links.person__li .wp-block-social-link-anchor::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-in) center / contain no-repeat;
  mask: var(--icon-in) center / contain no-repeat;
}
.wp-block-social-links.person__li .wp-block-social-link-anchor::before { width: 18px; height: 18px; }
:root {
  --icon-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95C20.4 8.75 21 11 21 14.1V21h-4v-6.1c0-1.45-.03-3.32-2.05-3.32-2.05 0-2.37 1.58-2.37 3.21V21H9z'/%3E%3C/svg%3E");
}
.wp-block-social-links.site-footer__social { align-items: center; }
.wp-block-social-links.site-footer__social .wp-block-social-link-anchor { line-height: 1.4; }
.wp-block-social-links.site-footer__social .wp-social-link .wp-block-social-link-label { font-size: var(--fs-small) !important; line-height: 1.4; }

/* --- Noticias (bloque de consulta) ------------------------------------------- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list > li { display: flex; margin: 0; }
.news-list .news-card { flex: 1 1 auto; }
.news-card__meta,
.article__meta { display: flex; flex-wrap: wrap; gap: 0 0.4em; }
.news-card__meta p,
.article__meta p { margin: 0; }
.meta-location:empty { display: none; }
.meta-location::before { content: "\00B7\00A0"; }
.news-card__excerpt p { margin: 0; }
.news-card__more { display: inline-block; }
.news-pagination { margin-top: 2.5rem; font-family: var(--display); gap: 1rem; }
.news-pagination a { text-decoration: none; }

.article__back-wrap { margin: 0; }
.article__image { margin: 0 0 2.25rem; }
.article__image img { width: 100%; height: auto; }

/* --- Publicaciones científicas ------------------------------------------- */
.pubs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.pubs > li { margin: 0; }
.pub { padding-block: 1.4rem; border-bottom: 1px solid var(--line-2); max-width: 52rem; }
.pub__title { font-size: 1.15rem; line-height: 1.35; margin-bottom: 0.5rem; }
.pub__title a { color: inherit; text-decoration: none; }
.pub__title a:hover { color: var(--orange); }
.pub__authors { font-size: 0.93rem; color: var(--ink-2); margin: 0 0 0.25rem; }
.pub__source { font-family: var(--display); font-size: 0.88rem; color: var(--ink-3); margin: 0; }
.pub__authors:empty, .pub__source:empty { display: none; }

/* --- Aviso de cookies ------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  max-width: 34rem;
  padding: 1.25rem 1.4rem;
  background: var(--dark);
  color: var(--on-dark);
  font-size: 0.9rem;
  line-height: 1.55;
  border-radius: 3px;
  box-shadow: 0 18px 50px -18px rgba(10, 25, 20, 0.45);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { margin: 0 0 1rem; }
.cookie-banner__text a { color: #fff; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-banner__btn {
  font: 500 0.9rem/1 var(--display);
  padding: 0.75em 1.35em;
  background: var(--orange-deep); /* blanco sobre naranja puro no llega al contraste AA */
  color: #fff;
  border: 1px solid var(--orange-deep);
  border-radius: 2px;
  cursor: pointer;
}
.cookie-banner__btn:hover { background: #B52A00; border-color: #B52A00; }
.cookie-banner__btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.32); }
.cookie-banner__btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* --- Editor -------------------------------------------------------------------
   En el editor no hay animaciones ni cabecera fija. */
.editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; }
.editor-styles-wrapper .site-header { position: relative; }