/* Las @font-face viven en fonts.css, enlazado desde el HTML antes que esta
   hoja. Aquí NO se usa @import: encadenaría la descarga. */

/* ==========================================================================
   Therakles — hoja de estilos principal · v1.0
   Escrita a mano. Reemplaza los estilos inline del export de diseño.
   Orden: tokens → reset → utilidades → layout → secciones → responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --ink:          #0D1B3E;
  --navy:         #0A1533;
  --paper:        #EDEDED;
  --cream:        #F3F1EA;
  --lime:         #CBCE38;
  --lime-deep:    #9AA11E;
  /* Solo para los títulos de los accesos rápidos bajo el hero.
     El lima puro es ilegible como texto sobre blanco (1.69 de contraste);
     este es la misma familia oscurecida hasta cumplir AA (5.09). */
  --accent-text:  #6E7314;

  --gray-700: #3A445C;
  --gray-600: #4D576B;
  /* Al pasar el papel de #FBFAF7 a #EDEDED, el gris anterior (#656D7F) caía a
     4.43 y dejaba de cumplir AA para texto normal. Se oscurece lo justo
     manteniendo el matiz: ahora 4.57 sobre el papel nuevo y 4.73 sobre crema. */
  --gray-500: #636B7C;
  --gray-400: #697285;   /* ajustado de #7D8698 → AA 4.63 sobre papel */
  --gray-300: #C3CAD9;
  --gray-200: #D3D9E6;

  --on-navy-dim:    #9AA6BA;
  --on-navy-dimmer: #76819A; /* ajustado de #6B7690 → AA 4.60 sobre navy */

  --line:        rgba(13, 27, 62, 0.08);
  --line-strong: rgba(13, 27, 62, 0.15);

  /* Tipografía */
  --display: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  /* Ancho de la columna de contenido. Lo usan las 13 secciones, así que
     cambiarlo aquí ensancha el sitio entero de forma coherente.
     Las medidas de lectura están topadas por separado en `ch` en cada bloque
     de texto, de modo que ensanchar la columna da aire a las rejillas —equipo,
     pipeline, socios— sin estirar los párrafos. */
  --wrap: 1400px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 9vw, 104px);
  --header-h: 74px;

  /* Radios y sombras */
  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-card:  0 18px 44px -34px rgba(13, 27, 62, 0.45);
  --shadow-lift:  0 26px 50px -26px rgba(13, 27, 62, 0.40);
  --shadow-quick: 0 18px 40px -28px rgba(13, 27, 62, 0.35);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo `hidden` solo vale `display: none` en la hoja del navegador, y
   cualquier regla de autor con `display` la pisa. Como varios componentes son
   flex o grid, `el.hidden = true` no los ocultaba: el formulario seguía a la
   vista debajo del mensaje de enviado. Aquí `hidden` significa oculto y punto.
   Es la misma regla que trae normalize.css, y por el mismo motivo. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
p  { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: inherit; }
ul { list-style: none; }

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

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

/* --------------------------------------------------------------------------
   3. Utilidades
   -------------------------------------------------------------------------- */
/* Rótulo de sección. Un solo cuerpo y un solo tracking para los de todas las
   secciones: los que estaban a 12px (About, Pipeline, Partnering, Team,
   Contact) suben al mismo tamaño que «Our Technology», que es el que el
   cliente tomó como referencia. Antes había tres tamaños distintos en la
   página porque varias reglas de párrafo —más específicas que esta— los
   pisaban; eso ya está corregido y ahora el tamaño se decide solo aquí. */
.eyebrow {
  font-family: var(--mono);
  font-size: clamp(13px, 1.35vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
.eyebrow--lime { color: var(--lime); opacity: 1; }
/* La variante apagada no es un rótulo de sección sino de campo (Mission,
   Vision, Leadership, Board): se queda en el cuerpo pequeño para no competir
   con el titular que tiene al lado. */
.eyebrow--muted { color: var(--gray-500); opacity: 1; font-size: 12px; letter-spacing: 0.14em; }

.h-display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.012em;
}
.h2 { font-size: clamp(28px, 4.4vw, 48px); }
.h3 { font-size: clamp(22px, 3vw, 32px); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff;
  padding: 11px 16px; border-radius: 6px;
  font: 600 14px/1 var(--sans);
  transition: top 0.18s;
}
.skip-link:focus { top: 12px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600;
  padding: 14px 26px; border-radius: var(--r-sm);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn--lime  { background: var(--lime); color: var(--navy); }
.btn--lime:hover  { background: #fff; }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header__logo img { height: 22px; width: auto; }

/* Siete secciones, Contact incluida. La columna se ensanchó a 1400px, así que
   hay sitio de sobra para el punto extra de cuerpo que pidió el cliente. */
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.nav a {
  font-size: 15px; font-weight: 500; color: var(--gray-700);
  white-space: nowrap;
  transition: color 0.18s;
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }

.site-header__actions { display: flex; align-items: center; gap: 10px; }

/* Selector de idioma — visible en header desktop y móvil */
.langs {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
}
.lang {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; line-height: 1;
  padding: 6px 8px; border-radius: 14px;
  color: var(--gray-500);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.lang:hover { color: var(--ink); }
.lang[aria-pressed="true"] { background: var(--ink); color: #fff; }

.burger {
  display: none; flex-direction: column; gap: 4px;
  padding: 10px; margin-right: -10px;
}
.burger span {
  width: 22px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform 0.24s var(--ease), opacity 0.18s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
  display: none; flex-direction: column;
  padding: 6px var(--gutter) 16px;
  border-top: 1px solid var(--line);
  background: rgba(251, 250, 247, 0.98);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  padding: 14px 4px; font-size: 15px; font-weight: 500;
  color: var(--gray-700); border-bottom: 1px solid rgba(13, 27, 62, 0.06);
}
.nav-mobile a:last-child { border-bottom: none; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; background: var(--navy); color: #fff;
  overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.hero__media video {
  width: 100%; height: 100%; object-fit: cover; background: var(--navy);
}
.hero__glow {
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen; pointer-events: none; z-index: -1;
}
.hero__glow--blue {
  right: 2%; top: 20%; width: min(520px, 60vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(120, 200, 255, 0.45) 0%, rgba(60, 140, 220, 0.18) 40%, transparent 70%);
  filter: blur(6px); animation: glowDrift 16s ease-in-out infinite;
}
.hero__glow--lime {
  right: 16%; top: 38%; width: min(300px, 40vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(203, 206, 56, 0.28) 0%, transparent 68%);
  filter: blur(4px); animation: glowDrift 22s ease-in-out infinite reverse;
}
.hero__sweep {
  position: absolute; inset-block: 0; left: 0; width: 22%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(180, 220, 255, 0.14), transparent);
  animation: sweep 11s ease-in-out infinite 3s; pointer-events: none;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8, 17, 45, 0.94) 0%, rgba(8, 17, 45, 0.7) 40%, rgba(8, 17, 45, 0.2) 68%, rgba(10, 21, 51, 0.12) 100%);
}
.hero__inner {
  position: relative; max-width: var(--wrap); margin-inline: auto;
  padding: clamp(72px, 11vw, 120px) var(--gutter) clamp(80px, 12vw, 128px);
}
.hero__kicker {
  font-family: var(--mono); font-size: clamp(12px, 1.15vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--lime); margin-bottom: 28px;
}
.hero h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(36px, 7vw, 78px); line-height: 1.02;
  letter-spacing: -0.02em; max-width: 16ch;
}
.hero h1 em { font-style: italic; color: var(--lime); }
/* Los números másicos van en <sup> real, igual que en el gráfico de pipeline:
   es la notación estándar y así se lee bien con un lector de pantalla. El 0.72
   evita que el superíndice ensanche el interlineado del párrafo. */
.hero__sub sup { font-size: 0.72em; line-height: 0; vertical-align: 0.42em; }
.hero__sub {
  margin-top: 28px; max-width: 52ch;
  font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--gray-200);
}
/* Los cuatro hitos, en una sola línea. Sin cursiva y sin tope de medida: el
   texto nuevo son 91 caracteres y con el tope de 54ch partía en dos.
   Tampoco lleva `nowrap`: en móvil eso provocaría desplazamiento horizontal,
   así que ahí se permite que parta, que es el único sitio donde no cabe. */
.hero__hitos {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.15vw, 15px); line-height: 1.7;
  letter-spacing: 0.02em; color: var(--lime);
}
.hero__ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   6. Quick access
   -------------------------------------------------------------------------- */
.quick {
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter); transform: translateY(-44px);
}
.quick__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.quick__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 26px 22px 24px; box-shadow: var(--shadow-quick);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.quick__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.quick__title {
  font-family: var(--display); font-size: clamp(22px, 1.9vw, 26px); margin-bottom: 10px;
  color: var(--accent-text);
}
.quick__desc { font-size: 14px; line-height: 1.5; color: var(--gray-600); }

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */
.about { max-width: var(--wrap); margin-inline: auto; padding: clamp(56px, 8vw, 96px) var(--gutter) 40px; }
/* Encabezado a todo el ancho. El titular tiene que caber en una línea: son 57
   caracteres, y a 46px pedirían unos 1240px. Como la columna útil son 1320,
   entra — pero justo, así que el cuerpo se ata al ancho disponible con `vw`
   y `text-wrap: nowrap` queda descartado para no desbordar en pantallas
   menores, donde sí debe partir. */
.about__head { margin-bottom: clamp(36px, 5vw, 56px); }
.about__head .eyebrow { display: block; margin-bottom: 20px; }
.about__head h2 {
  font-size: clamp(26px, 3.3vw, 46px); line-height: 1.08;
  max-width: 34ch;
}
@media (min-width: 1200px) {
  /* En desktop se suelta el límite de medida para que el título ocupe todo el
     ancho y entre en una línea. No se usa `white-space: nowrap`: el título en
     EN entra con ~120px de holgura, pero los de ES/DE/PT son un 30-50% más
     largos y nowrap provocaría desborde horizontal. Sin nowrap, EN queda en
     una línea (lo pedido) y los demás idiomas parten en dos con normalidad. */
  .about__head h2 { max-width: none; }
}

.about__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: start; }
/* Tope de medida: a 1400px de columna esta caja llegaría a ~700px, que a 17px
   son unos 80 caracteres por línea. Por encima de ~75 el ojo pierde el salto
   de renglón. Solo actúa en pantallas grandes. */
.about__text { max-width: 68ch; }
.about__lead { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.7; color: var(--gray-700); }

/* Misión arriba y visión abajo, apiladas en la columna izquierda. Ya no
   cuelgan del titular, así que no necesitan margen superior: la rejilla las
   alinea con el primer párrafo de la derecha. */
.mv { display: grid; grid-template-columns: 1fr; gap: 26px; }
.mv__item { border-left: 2px solid var(--lime); padding-left: 20px; }
.mv__item .eyebrow--muted { display: block; margin-bottom: 10px; }
/* `:not(.eyebrow)` porque este selector, más específico que `.eyebrow`,
   también alcanzaba a los rótulos «Mission» y «Vision» y les imponía su
   cuerpo: eran los últimos que quedaban del mismo defecto. */
.mv__item p:not(.eyebrow) { font-size: 15px; line-height: 1.6; color: var(--gray-700); }

/* --------------------------------------------------------------------------
   8. Science
   -------------------------------------------------------------------------- */
.science { background: var(--navy); color: #fff; margin-top: 64px; }
.science__inner {
  --tech-gap: clamp(28px, 3.4vw, 48px);
  max-width: var(--wrap); margin-inline: auto; padding: var(--section-y) var(--gutter);
}
/* El intro vive dentro de la columna de texto, así que su ancho lo marca la
   columna. El tope solo actúa cuando la sección se apila en móvil, donde la
   columna pasa a ser todo el ancho y el párrafo necesita medida de lectura. */
.science__intro { max-width: 760px; }
/* El rótulo es un <h2> por semántica, no por tamaño: se mantiene el cuerpo de
   eyebrow. Por eso aquí no hay ninguna regla de font-size para h2. */
.science__intro .eyebrow--lime { display: block; margin-bottom: 22px; }

.science__intro p { margin-top: 0; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.7; color: var(--gray-300); }

/* --- Diferenciadores y animación, a dos columnas --------------------------
   Las fichas a la izquierda y el diagrama a la derecha; la nota de propiedad
   intelectual centrada debajo, cerrando la sección. Por debajo de 1024px se
   apila: cuatro fichas de acordeón y un video de 16:9 en media columna cada
   uno no dan una lectura cómoda.
   -------------------------------------------------------------------------- */
.tech {
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px);
  align-items: start;
}
@media (min-width: 1024px) {
  .tech { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--tech-gap); }
  /* El video se centra contra la columna de texto COMPLETA —intro, acordeón y
     propiedad intelectual—, no contra el bloque que tenga al lado. Con la
     rejilla alineada arriba quedaba a la altura del acordeón, y como el texto
     empieza más arriba, a la vista caía hacia abajo. */
  .science__figure { align-self: center; }
}
/* Columna de texto: los tres bloques con un ritmo propio. El intro ya no va
   suelto encima de la rejilla, así que la separación que antes daba el
   margen superior de .tech la da ahora este hueco. */
.tech__col { display: grid; align-content: start; gap: clamp(34px, 5vw, 56px); }
/* El cliente pidió destacar esta pregunta al nivel del rótulo "Our Technology":
   mismo lima y mismo cuerpo de eyebrow (que ya subió de 12px al clamp 13-15px).
   Sigue siendo un rótulo en monoespaciada, no un titular, para no competir con
   el encabezado de la sección. */
.tech__cards .tech__pregunta { display: block; margin-bottom: 22px; }

/* Vive dentro de la columna de diferenciadores, así que no lleva medida propia:
   la marca la columna. Sin línea divisoria ni centrado. */
.tech__ip { margin-top: clamp(26px, 3.4vw, 38px); }
.tech__ip .tech__ip-label { display: block; margin-bottom: 18px; }
.tech__ip > p:last-child {
  margin-top: 0; font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.7; color: var(--gray-300);
}

/* Variante oscura del acordeón de Partnering. Solo cambian colores y bordes:
   la mecánica de apertura, el chevron y el módulo de JS son los mismos. */
.modalities--dark .modality {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.modalities--dark .modality:hover,
.modalities--dark .modality[data-open="true"] {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--lime);
  box-shadow: 0 24px 50px -40px rgba(0, 0, 0, 0.9);
}
.modalities--dark .modality h3 { color: #F2F4F8; }
.modalities--dark .modality__panel p { color: var(--gray-300); }
.modalities--dark .modality__chev {
  border-right-color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.modalities--dark .modality sup { font-size: 0.75em; }

/* La figura vive dentro de la sección oscura y la ilustración ya trae su propio
   fondo de laboratorio. Un marco blanco la haría parecer pegada encima, así que
   el panel es oscuro y translúcido — el mismo lenguaje que las tarjetas Dx/Tx y
   que las fichas de la columna de al lado. */
.science__figure {
  margin: 0 0 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px; padding: clamp(10px, 1.6vw, 16px);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.6);
}
.science__figure img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* --- Reproductor del explicativo ------------------------------------------
   El video ya no es una ilustración que se reproduce sola: es una pieza que el
   visitante decide ver. Los mandos los pone el navegador (`controls`), así que
   aquí solo hace falta encajarlo en el marco de la figura y reservar su alto
   por proporción, para que el póster no provoque un salto al cargar.
   -------------------------------------------------------------------------- */
.science__player {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #060C1E;   /* evita el destello blanco mientras carga el póster */
}
/* El marco translúcido de la figura sobra cuando dentro va una caja negra con
   sus propios mandos: se ciñe al video. */
.science__figure--player { padding: clamp(8px, 1.2vw, 12px); }

.science__figure figcaption {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--gray-300); margin-top: 14px; text-align: center;
  padding-inline: 8px;
}

/* --------------------------------------------------------------------------
   9. Pipeline
   -------------------------------------------------------------------------- */
.pipeline { max-width: var(--wrap); margin-inline: auto; padding: var(--section-y) var(--gutter); }
.pipeline__head { margin-bottom: clamp(28px, 4vw, 40px); }
.pipeline__head .eyebrow { display: block; margin-bottom: 20px; }
/* Sin `nowrap`: los cuatro idiomas entran en una línea por medida propia desde
   ~1200px (el alemán es el más largo, con 15px de holgura) y por debajo de eso
   se parten con normalidad en vez de desbordar. */
.pipeline__head h2 { max-width: none; }
/* Misma escala que la bajada de About y del intro de Technology. */
.pipeline__intro {
  margin-top: 22px; max-width: 68ch;
  font-size: clamp(16px, 1.8vw, 18px); line-height: 1.7; color: var(--gray-700);
}

/* --- Gráfico de pipeline -------------------------------------------------
   Antes era una tabla que en móvil se rompía en seis tarjetas con sombra, y
   la sección se leía como seis bloques sueltos. Ahora es un gráfico: las
   cuatro líneas verticales de etapa atraviesan las seis filas sin cortarse,
   y eso lo unifica en un objeto único a cualquier ancho.

   Se conserva la semántica de tabla con role="table"/"row"/"cell", porque el
   contenido sigue siendo tabular para quien lo escucha con un lector.

   Reparto de columnas: programa · aplicación · indicación · gráfico. Solo el
   gráfico lleva rejilla; el texto nunca se superpone a las líneas.
   ---------------------------------------------------------------------- */
.plchart {
  --pl-cols: 132px 150px minmax(0, 1fr) minmax(0, 2.3fr);
  --pl-gap: 24px;
  --pl-bar-h: 7px;
  --pl-pad: 17px;   /* padding vertical de fila; la rejilla lo desborda para unirse con la fila vecina */
  margin-top: 44px;
}

.plchart__head {
  display: grid; grid-template-columns: var(--pl-cols); gap: var(--pl-gap);
  align-items: end; padding-bottom: 12px;
  border-bottom: 1px solid rgba(13, 27, 62, 0.1);
}
.plchart__h,
.plchart__scale span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-400);
}
/* Toda la fila de cabecera centrada: los tres encabezados de datos y las
   cuatro etapas. Los datos de debajo siguen a la izquierda, que es como se
   leen nombres e indicaciones. */
.plchart__h { text-align: center; }
/* Cada etiqueta de etapa ocupa una banda del 25% */
.plchart__scale { display: grid; grid-template-columns: repeat(4, 1fr); }
/* hyphens:auto para que el alemán largo ("Wirkstofffindung") parta en vez de
   invadir la banda vecina; funciona porque <html lang> se actualiza al cambiar
   de idioma. */
.plchart__scale span {
  letter-spacing: 0.06em; text-align: center; padding-inline: 4px;
  hyphens: auto; overflow-wrap: break-word; line-height: 1.25;
}

.plchart__body { padding-top: 4px; }

.plrow {
  display: grid; grid-template-columns: var(--pl-cols); gap: var(--pl-gap);
  align-items: center; padding-block: var(--pl-pad);
}
.plrow__id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plrow__name { font-family: var(--mono); font-weight: 500; font-size: 15px; }

/* Columna «Application»: isótopo + modalidad, en el color del programa.
   El número másico va en <sup> real, no como texto plano: es la notación
   estándar y así se lee correctamente con un lector de pantalla. */
.plrow__app { font-family: var(--mono); font-size: 13.5px; line-height: 1.4; }
.plrow__app sup { font-size: 0.78em; }

.plrow__ind { font-size: 15px; line-height: 1.45; color: var(--gray-700); }

/* La celda del gráfico se estira a todo el alto de la fila para que las
   líneas de rejilla de filas contiguas se toquen y formen una línea continua. */
.plrow__bar { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

.plrow__grid {
  position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--pl-pad)); height: calc(100% + 2 * var(--pl-pad));
  width: 100%;
  /* Las líneas de x=0 y x=100 caen justo en el borde: sin esto el navegador
     recorta la mitad del trazo y se ven a medio grosor. */
  overflow: visible;
}
.plrow__grid line {
  stroke: rgba(13, 27, 62, 0.11); stroke-width: 1;
  vector-effect: non-scaling-stroke;   /* la línea no engorda al estirar el viewBox */
}
/* La primera y la última marcan el inicio y el final de la carrera */
.plrow__grid line:first-child,
.plrow__grid line:last-child { stroke: rgba(13, 27, 62, 0.18); }

.plrow__rail {
  position: absolute; left: 0; right: 0; height: var(--pl-bar-h);
  top: 50%; transform: translateY(-50%);
  background: rgba(13, 27, 62, 0.06); border-radius: 5px;
}
.plrow__fill {
  position: absolute; left: 0; height: var(--pl-bar-h);
  top: 50%; transform: translateY(-50%);
  width: 0; border-radius: 5px;
}
/* --- Un color por programa ------------------------------------------------
   El color ya no distingue Dx de Tx: distingue la modalidad, como en el
   esquema del cliente — naranja para PET, azul para la terapia con Lu-177,
   verde para SPECT.

   Los tonos son algo más oscuros que los del esquema porque aquí el color no
   se queda en la barra: también tiñe el texto de la columna «Application», y
   el texto pequeño necesita 4.5:1 sobre el papel. Los del esquema rondan 3.0
   —suficiente para una barra, insuficiente para una palabra—. Estos tres dan
   ~4.9 y siguen siendo inequívocamente naranja, azul y verde.

   El lima puro #CBCE38, que usaba el esquema anterior, da 1.62 sobre papel y
   no servía ni siquiera como barra.
   ------------------------------------------------------------------------ */
.plrow--pet     { --pl-color: #C2410C; }   /* 18F  · PET      · 4.93 sobre papel */
.plrow--therapy { --pl-color: #1D6FB8; }   /* 177Lu · Therapy · 4.95 */
.plrow--spect   { --pl-color: #3F7A2E; }   /* 99mTc · SPECT   · 4.97 */

.plrow__fill { background: var(--pl-color); }
.plrow__app  { color: var(--pl-color); }

/* Marca del extremo: es lo que el ojo lee como "hasta aquí llegó" */
.plrow__cap {
  position: absolute; left: 0; top: 50%;
  width: 13px; height: 13px; border-radius: 50%;
  margin-left: -6.5px; transform: translateY(-50%) scale(0.3);
  opacity: 0; box-shadow: 0 0 0 3px var(--paper);
}
.plrow__cap { background: var(--pl-color); }

.plrow__stage {
  position: absolute; top: 50%; margin-top: 14px; left: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--gray-500); white-space: nowrap;
}

/* --- Entrada: las barras se dibujan al llegar la sección -------------------
   Se cuelga del data-reveal que ya usa todo el sitio, así que no hace falta
   JavaScript nuevo. --i es el índice de fila y escalona la salida. -------- */
.plchart .plrow__fill,
.plchart .plrow__cap,
.plchart .plrow__stage,
.plchart .plrow__grid line { transition-property: width, opacity, transform; }
.plchart .plrow__stage { opacity: 0; }
.plchart .plrow__grid line { opacity: 0; transition: opacity 0.5s var(--ease); }

.plchart.is-visible .plrow__grid line { opacity: 1; transition-delay: 0.15s; }
.plchart.is-visible .plrow__fill {
  width: var(--p);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.25s + var(--i) * 0.09s);
}
.plchart.is-visible .plrow__cap {
  left: var(--p); opacity: 1; transform: translateY(-50%) scale(1);
  transition: opacity 0.35s var(--ease), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), left 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.25s + var(--i) * 0.09s + 0.55s);
}
.plchart.is-visible .plrow__stage {
  left: var(--p); opacity: 1;
  transition: opacity 0.4s var(--ease), left 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.25s + var(--i) * 0.09s + 0.6s);
}
/* Nota para cuando lleguen los datos reales: con los valores actuales el
   máximo es 44%, así que la etiqueta de etapa cabe de sobra a su derecha. Si
   algún programa pasa de ~70%, habrá que anclarla por el borde derecho
   (translateX(-100%)) para que no se salga de la columna. */

/* Sin JavaScript el gráfico se muestra completo en vez de quedar en cero.
   Aquí no es una animación que se pierde: son los datos. */
@media (scripting: none) {
  .plchart .plrow__fill  { width: var(--p); }
  .plchart .plrow__cap   { left: var(--p); opacity: 1; transform: translateY(-50%) scale(1); }
  .plchart .plrow__stage { left: var(--p); opacity: 1; }
  .plchart .plrow__grid line { opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. Partnering
   -------------------------------------------------------------------------- */
/* Fondo navy, como Technology y News. Con Pipeline en papel entre medio, la
   alternancia claro/oscuro del sitio se mantiene.

   `--section-y` se redefine SOLO dentro de la sección, más apretado que el
   global: el cliente pide que Partnering entre completa en una pantalla, y con
   los tres módulos abiertos por defecto el alto lo marca el contenido, no el
   aire. Al ser una variable, basta este punto para comprimir los cuatro
   bloques (top, ecosistema y sus paddings) de forma coherente. */
.partnering {
  --section-y: clamp(36px, 4.5vw, 44px);
  background: var(--navy); color: #fff;
}
.partnering__top {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.partnering__top .eyebrow { display: block; margin-bottom: 20px; }
.partnering__top h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; }
/* Apunta a la bajada por clase y no con `> div > p`. Ese selector, más
   específico que `.eyebrow`, también alcanzaba al rótulo de la sección y le
   imponía su cuerpo y su color: «PARTNERING» salía a 17px y en gris, mientras
   el de About salía a 12px. El rótulo lima de esta sección tampoco habría
   funcionado por la misma razón. */
.partnering__intro { margin-top: 24px; max-width: 62ch; font-size: 17px; line-height: 1.7; color: var(--gray-300); }
.partnering__top .btn { margin-top: 32px; }

/* --- Modalidades como acordeón -------------------------------------------
   Antes era una rejilla de 5 tarjetas en una columna de 514 px: entraban de a
   dos y la quinta quedaba huérfana a la izquierda. En acordeón el ritmo es
   regular, no hay huecos y la sección ocupa bastante menos alto.
   Se abre al pasar el cursor (solo con puntero fino) y también al hacer clic
   o con teclado, que es lo que vale en táctil y para lectores de pantalla.
   -------------------------------------------------------------------------- */
.modalities { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.modalities--accordion { grid-template-columns: 1fr; gap: 8px; }

.modality { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 24px; }
.modalities--accordion .modality {
  padding: 0; overflow: hidden;
  transition: border-color 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.modalities--accordion .modality:hover,
.modalities--accordion .modality[data-open="true"] {
  border-color: var(--lime); box-shadow: var(--shadow-card);
}

.modality__head {
  width: 100%; display: grid;
  grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 16px 20px; text-align: start; cursor: pointer;
}
/* Solo en Partnering, donde los tres módulos van abiertos y la sección tiene
   que entrar en una pantalla. En Technology se abre uno a la vez y el aire
   original se mantiene. */
.partnering .modality__head { padding-block: 12px; }
.modality h3 { font-family: var(--display); font-size: 18px; line-height: 1.3; }
.modalities--accordion .modality h3 { font-size: 17px; }

/* Chevron: se gira al abrir */
.modality__chev {
  width: 10px; height: 10px; flex: none;
  border-right: 1.5px solid var(--gray-500);
  border-bottom: 1.5px solid var(--gray-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease), border-color 0.24s var(--ease);
}
.modalities--accordion .modality:hover .modality__chev,
.modality[data-open="true"] .modality__chev {
  transform: rotate(-135deg) translate(-3px, -3px);
  border-color: var(--lime);
}

/* El panel anima de 0fr a 1fr: la transición a alto automático sin medir en JS */
.modality__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.36s var(--ease);
}
.modality__panel > div { overflow: hidden; }
.modality__panel p {
  font-size: 13.5px; line-height: 1.6; color: var(--gray-600);
  padding: 0 20px 18px; margin: 0;
}
.modality[data-open="true"] .modality__panel { grid-template-rows: 1fr; }
.partnering .modality__panel p { padding-bottom: 14px; }

.modality p { font-size: 13px; line-height: 1.5; color: var(--gray-600); margin-top: 8px; }

/* Apertura al pasar el cursor, solo donde tiene sentido */
@media (hover: hover) and (pointer: fine) {
  .modalities--accordion .modality:hover .modality__panel { grid-template-rows: 1fr; }
}

/* --- Variante estática (Partnering) --------------------------------------
   Mismo aspecto que un módulo abierto —borde lima incluido, que es el que el
   cliente quiso conservar—, pero sin mecánica: siempre desplegados, sin
   chevron y sin cursor de mano. El hover no necesita neutralizarse porque
   `:hover` y `[data-open="true"]` pintan lo mismo: al estar los tres siempre
   abiertos, pasar el cursor no cambia nada.
   -------------------------------------------------------------------------- */
.modalities--static .modality__head { cursor: default; grid-template-columns: 1fr; }
.modalities--static .modality__panel { grid-template-rows: 1fr; }

.ecosystem { max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gutter) var(--section-y); }
.ecosystem__head { text-align: center; max-width: 560px; margin: 0 auto 20px; }
.ecosystem__head .eyebrow { display: block; margin-bottom: 12px; }
/* Misma razón que arriba: por clase, para no pisar el rótulo. */
.ecosystem__intro { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--gray-300); }

/* Estilos del segmentador de categorías. El bloque ya no está en el HTML; se
   conservan aquí porque son la mitad del trabajo de volver a montarlo. */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.filter {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 9px 18px; border-radius: 20px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.marquee {
  overflow: hidden; padding: 6px 0 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item {
  position: relative;
  flex: 0 0 210px; height: 96px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: #fff;
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.6);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
/* Logo entregado dentro de su propio rectángulo oscuro (caso OVGU). Sobre la
   sección navy la placa y el fondo son casi el mismo tono, así que el borde
   sube de opacidad: es lo único que separa la ficha del fondo. */
.marquee__item--navy { background: var(--navy); border-color: rgba(255, 255, 255, 0.26); }
.marquee__item picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Normalización óptica.
   Los archivos ya vienen recortados a su contenido, pero un logo de 5:1 y uno
   cuadrado no pueden ocupar la misma caja: el apaisado se vería enorme y el
   cuadrado diminuto. Cada uno recibe su propio límite según la proporción.
   El atributo data-ratio lo pone main.js a partir del array ORGS. */
.marquee__item img { object-fit: contain; }
.marquee__item[data-ratio="xwide"]  img { max-width: 86%; max-height: 42%; }
.marquee__item[data-ratio="wide"]   img { max-width: 80%; max-height: 56%; }
.marquee__item[data-ratio="mid"]    img { max-width: 72%; max-height: 66%; }
.marquee__item[data-ratio="square"] img { max-width: 62%; max-height: 74%; }

/* "plaque": el logo no viene sobre transparencia sino dentro de su propio
   rectángulo de color (caso OVGU). Al no tener aire alrededor se lee más
   pequeño que un logotipo suelto de la misma caja, así que necesita ocupar
   bastante más. 50% más grande en lineal que la categoría "wide". */
.marquee__item[data-ratio="plaque"] img { max-width: 92%; max-height: 84%; }

.marquee__item:hover, .marquee__item:focus-visible, .marquee__item.is-active {
  transform: scale(1.06); border-color: var(--lime);
  box-shadow: 0 24px 46px -18px rgba(0, 0, 0, 0.7);
}

/* Indicador de enlace externo: solo aparece al interactuar, para no ensuciar
   el muro de logos en reposo. */
.marquee__ext {
  position: absolute; inset-block-start: 7px; inset-inline-end: 9px;
  font-size: 12px; line-height: 1; color: var(--gray-500);
  opacity: 0; transform: translate(-2px, 2px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.marquee__item:hover .marquee__ext,
.marquee__item:focus-visible .marquee__ext,
.marquee__item.is-active .marquee__ext { opacity: 1; transform: none; color: var(--lime-deep); }
.marquee__item--navy .marquee__ext { color: var(--on-navy-dim); }
.marquee__item--navy:hover .marquee__ext { color: var(--lime); }

/* Sin URL confirmada: se ve igual pero no invita a hacer clic */
.marquee__item:not([href]) { cursor: default; }

/* El `min-height` reserva el sitio de la ficha aunque esté vacía: sin él, el
   riel de logos daría un salto cada vez que el cursor entra y sale. */
.partner-info { max-width: 560px; margin: 14px auto 0; min-height: 68px; text-align: center; padding-inline: 20px; }
.partner-info__body { opacity: 0; transform: translateY(6px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.partner-info.is-active .partner-info__body { opacity: 1; transform: none; }
.partner-info__name { font-family: var(--display); font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.partner-info__country { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-dim); margin-top: 6px; }
.partner-info__blurb { font-size: 14px; line-height: 1.55; color: var(--gray-300); margin-top: 8px; }

/* --------------------------------------------------------------------------
   11. Team
   -------------------------------------------------------------------------- */
.team { max-width: var(--wrap); margin-inline: auto; padding: var(--section-y) var(--gutter); }
.team__intro { max-width: 640px; margin-bottom: 40px; }
.team__intro .eyebrow { display: block; margin-bottom: 20px; }
/* Por clase, no como `.team__intro p`: ese selector también alcanzaba al
   rótulo «TEAM» y lo subía a 17px. Ver la nota en .partnering__intro. */
.team__intro-text { margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--gray-600); }

.team__label { display: block; margin-bottom: 22px; }

/* Cada grupo entra completo en una sola fila: cinco tarjetas en Leadership y
   seis en Board & Advisors. El número lo fija el HTML con --team-cols, así que
   sumar o quitar a alguien es cambiar un dígito, no tocar esta hoja.

   Los tres tramos son explícitos y no dependen de que `auto-fit` acierte:
     <640px   → 2 columnas fijas. Sin biografía la tarjeta es casi solo el
                retrato, y once retratos a ancho completo son una tira
                interminable. Con `auto-fit` bastaba la barra de scroll para
                que a 414px cupiera una sola columna en vez de dos.
     640-1023 → las que quepan; seis en una tablet darían tarjetas de 90px.
     ≥1024px  → el número fijo del HTML, una fila por grupo. */
.team__grid {
  --team-cols: 5;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-bottom: 0;
}
/* `auto-fill` y no `auto-fit`: con auto-fit las pistas vacías se colapsan y una
   fila de dos fichas —el directorio— las estiraría al doble de ancho que las
   del equipo ejecutivo. Con auto-fill la pista se mantiene y la ficha mide lo
   mismo en las tres filas, que es lo que hace que se lean como una unidad. */
@media (min-width: 640px) {
  .team__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
}
@media (min-width: 1024px) {
  .team__grid { grid-template-columns: repeat(var(--team-cols), minmax(0, 1fr)); }
}
/* La separación entre grupos vive en el rótulo siguiente, no en la grilla,
   porque entre la grilla y su panel no debe haber aire. El panel solo existe
   si hay JavaScript; sin él manda el primer selector. */
.team__grid + .team__label,
.team__panel + .team__label { margin-top: clamp(40px, 7vw, 64px); }

.person {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.person__media { aspect-ratio: 4 / 5; overflow: hidden; background: #E9EDF2; }
.person__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.45s var(--ease);
}
/* Blanco y negro que recupera color al acercarse. Además de gustar, disimula
   la disparidad entre retratos tomados en sesiones distintas.
   Sin escalado: cualquier zoom sobre un encuadre 4:5 tan justo recorta la
   cabeza, y el cambio de color ya da suficiente respuesta visual. */
.person:hover .person__media img,
.person:focus-within .person__media img {
  filter: grayscale(0) contrast(1.02);
}
/* La ficha abierta recupera el color y se marca con un filete.
   El filete es tinta, no lima: el lima sobre blanco da 1,68:1 y la norma pide
   3:1 para un indicador gráfico (WCAG 1.4.11). Además el tono enlaza
   visualmente la tarjeta con el panel, que es del mismo azul. El rótulo del
   botón cambia a "Leer menos", así que el color tampoco es el único indicio. */
.person[data-active="true"] { outline: 2px solid var(--ink); outline-offset: -1px; }
.person[data-active="true"] .person__media img { filter: grayscale(0) contrast(1.02); }

.person__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.person__name { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.person__role {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #6E7280; margin-top: 5px;
}
/* Con la biografía en el panel, la tarjeta se queda en retrato, nombre y
   cargo. La breve sigue en el HTML y se ve tal cual si no hay JavaScript;
   solo se oculta cuando el módulo ha marcado el grupo. */
.team__grid[data-enhanced] .person__bio { display: none; }
.person__bio { font-size: 13.5px; line-height: 1.62; color: var(--gray-600); margin-top: 12px; }
/* margin-top:auto alinea el disparador al pie de todas las tarjetas aunque
   los nombres ocupen distinto número de líneas. */
.person__toggle {
  align-self: flex-start; margin-top: auto; padding: 14px 0 3px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink);
  border-bottom: 2px solid var(--lime);
}
.person__toggle:hover { opacity: 0.65; }

/* --- Panel de biografía ---------------------------------------------------
   Va a todo el ancho, justo debajo de la fila. Es el sitio donde el texto
   recupera una medida legible: dentro de una tarjeta de 170px la biografía de
   Andrea Lobos ocuparía más de mil píxeles de alto.
   -------------------------------------------------------------------------- */
/* Celda de la rejilla que ocupa todas las columnas: así el JS puede colocarla
   justo debajo de la fila de la ficha pulsada. La separación la da el gap de
   la rejilla, no un margen. */
.team__panel {
  grid-column: 1 / -1;
  position: relative; padding: 30px 68px 32px 34px;
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.team__panel-name { font-family: var(--display); font-size: clamp(21px, 2.3vw, 27px); line-height: 1.15; }
.team__panel-role {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lime); margin-top: 8px;
}
.team__panel-bio {
  margin-top: 16px; max-width: 68ch;
  font-size: 15px; line-height: 1.72; color: var(--gray-200);
}
.team__panel-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.25s var(--ease);
}
.team__panel-close:hover { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 639px) {
  .team__panel { padding: 26px 22px 28px; }
  .team__panel-close { top: 10px; right: 10px; width: 32px; height: 32px; }
  .team__panel-name { padding-right: 40px; }
}

/* --------------------------------------------------------------------------
   12. News
   -------------------------------------------------------------------------- */
.news { background: var(--navy); color: #fff; }
.news__inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(56px, 8vw, 96px) var(--gutter); }
.news__head { margin-bottom: clamp(36px, 5vw, 52px); }
/* El rótulo es el <h2> de la sección por semántica, no por tamaño: mantiene el
   cuerpo de eyebrow, como en Technology. */
.news__head .eyebrow--lime { display: block; }

/* --- Hitos destacados -----------------------------------------------------
   Tres tarjetas de igual peso. El filete lima superior es lo que las marca
   como destacadas frente al registro compacto de debajo, que va sin relleno.
   -------------------------------------------------------------------------- */
.news__featured {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.mcard {
  display: flex; flex-direction: column;
  padding: 22px 24px 26px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--lime);
}
.mcard__year {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--on-navy-dim);
}
.mcard__star { width: 15px; height: 15px; flex: none; color: var(--lime); }
.mcard__title {
  margin-top: 14px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.22;
}
.mcard__desc { margin-top: 12px; font-size: 15px; line-height: 1.62; color: var(--gray-300); }

/* --- Registro por año -----------------------------------------------------
   Una fila por año con sus hitos en línea. El separador lo pone el CSS entre
   hermanos: una fila de un solo hito no arrastra un punto suelto.
   -------------------------------------------------------------------------- */
.news__log { list-style: none; margin-top: clamp(28px, 4vw, 42px); }
.nlog {
  display: grid; grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px; align-items: baseline;
  padding: 15px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.nlog:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.nlog__year {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em;
  color: var(--lime);
}
.nlog__items { font-size: 15px; line-height: 1.6; color: var(--gray-300); }
/* El separador va en lima, como el año de la fila, y a mayor cuerpo: a 15px el
   punto medio casi desaparecía y los hitos de un mismo año se leían corridos. */
.nlog__items span + span::before {
  content: "\00b7"; margin: 0 12px;
  font-size: 1.5em; line-height: 0; vertical-align: -0.04em;
  color: var(--lime);
}

@media (max-width: 899px) {
  .news__featured { grid-template-columns: 1fr; }
  .mcard__title { font-size: 20px; }
}
@media (max-width: 639px) {
  .nlog { grid-template-columns: 1fr; gap: 6px; }
  .nlog__items span + span::before { margin: 0 8px; }
}

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */
.contact { max-width: var(--wrap); margin-inline: auto; padding: var(--section-y) var(--gutter); }
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
.contact__intro .eyebrow { display: block; margin-bottom: 20px; }
.contact__intro h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; }
/* Idem: por clase, para no pisar el rótulo «CONTACT».
   Los cuerpos de toda la columna suben un escalón a pedido del cliente: los
   datos de contacto son lo que el visitante viene a buscar y estaban a 13-15px,
   más pequeños que cualquier otro texto de la página. */
.contact__intro-text { margin-top: 22px; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.7; color: var(--gray-600); max-width: 42ch; }
.contact__people { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
.contact__person strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 400; }
.contact__person span { display: block; font-family: var(--mono); font-size: 14px; color: var(--gray-500); }
.contact__person a { font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--lime); word-break: break-word; }
/* <address> viene en cursiva por defecto en todos los navegadores; se anula. */
.contact__address { font-style: normal; margin-top: 6px; font-size: 16.5px; line-height: 1.7; color: var(--gray-700); }
.contact__extra {
  padding-top: 22px; border-top: 1px solid rgba(13, 27, 62, 0.1);
  display: flex; gap: 20px; flex-wrap: wrap;
}

/* Enlace social con icono. El icono hereda el color del enlace vía
   `currentColor` en el SVG, así que basta una declaración para los dos. */
.contact__social {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: var(--gray-700);
  transition: color 0.2s var(--ease);
}
/* El bug de LinkedIn no es cuadrado (lleva el ® a la derecha): se fija el
   alto y el ancho se deduce, para no deformarlo. */
.contact__social-icon { height: 20px; width: auto; display: block; flex: none; }
.contact__social-ext { font-size: 12px; color: var(--gray-500); }
.contact__social:hover { color: var(--ink); }
.contact__social:hover .contact__social-ext { color: var(--ink); }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 36px); box-shadow: 0 30px 60px -44px rgba(13, 27, 62, 0.4);
}
.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 7px; }
.form label > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-500);
}
.form input, .form textarea {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 15px; background: var(--paper);
  transition: border-color 0.18s;
}
.form textarea { resize: vertical; min-height: 108px; }
.form input:focus, .form textarea:focus { border-color: var(--lime); outline: none; }
.form [aria-invalid="true"] { border-color: #C0392B; }
.form__error { font-size: 12px; color: #C0392B; }

/* --- Añadidos del formulario activo --------------------------------------- */

/* Trampa para robots. Se saca del flujo en vez de usar display:none porque
   algunos rellenadores automáticos ignoran los campos ocultos con display, y
   la gracia está justamente en que lo rellenen. */
.form__trampa {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* El widget solo ocupa sitio cuando Cloudflare decide mostrarlo; con
   interaction-only lo normal es que quede en cero. */
.form__turnstile:not(:empty) { margin-top: 18px; }

/* Errores de envío: los de campo salen junto a su campo, este es del formulario
   entero y por eso va suelto encima del botón. */
.form__error--envio { display: block; margin: 14px 0 0; }
.form__error--envio:empty { margin: 0; }
.form__error:empty { display: none; }
.form button[type="submit"] {
  margin-top: 4px; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--ink); padding: 14px; border-radius: var(--r-sm);
  transition: background 0.2s, color 0.2s;
}
.form button[type="submit"]:hover { background: var(--lime); color: var(--ink); }
.form__privacy {
  font-size: 12.5px; line-height: 1.55; color: var(--gray-600);
  padding-top: 4px;
}
.form__privacy a {
  color: var(--ink); font-weight: 500;
  border-bottom: 1px solid var(--lime);
  transition: opacity 0.18s;
}
.form__privacy a:hover { opacity: 0.7; }

/* ==========================================================================
   Modal de política de privacidad
   Se abre desde el aviso del formulario y desde el pie. Diálogo modal real:
   atrapa el foco, cierra con Escape y devuelve el foco a quien lo abrió.
   ========================================================================== */
.pv {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.pv__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 12, 30, 0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: pvFade 0.24s var(--ease);
}
.pv__dialog {
  position: relative; z-index: 1;
  width: min(760px, 100%); max-height: min(86vh, 900px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 46px);
  box-shadow: 0 40px 90px -40px rgba(6, 12, 30, 0.7);
  animation: pvRise 0.3s var(--ease);
}
.pv__close {
  position: absolute; inset-block-start: 14px; inset-inline-end: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 24px; line-height: 1; color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, color 0.18s;
}
.pv__close:hover { background: var(--cream); color: var(--ink); }

.pv__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink);
  padding-inline-end: 40px;
}
.pv__body { margin-top: 26px; }
.pv__body h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-500);
  margin-top: 24px; margin-bottom: 8px;
}
.pv__body h3:first-child { margin-top: 0; }
.pv__body p { font-size: 14.5px; line-height: 1.68; color: var(--gray-700); }
/* Domicilio social. <address> es cursiva por defecto; se anula. */
.pv__address { font-style: normal; margin-top: 12px; font-size: 14.5px; line-height: 1.68; color: var(--gray-700); }
.pv__updated {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--gray-500);
}

@keyframes pvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pvRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Cuando el modal está abierto, el fondo no se desplaza */
body.pv-open { overflow: hidden; }

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

.form-sent {
  min-height: 360px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.form-sent__check {
  width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.form-sent strong { font-family: var(--display); font-size: 24px; font-weight: 400; }
.form-sent p { font-size: 15px; color: var(--gray-600); max-width: 32ch; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #fff; }
.site-footer__main {
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(48px, 7vw, 72px) var(--gutter) 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px;
}
.site-footer__brand img { height: 22px; width: auto; margin-bottom: 18px; }
.site-footer__brand p { font-size: 14px; line-height: 1.6; color: var(--on-navy-dim); max-width: 34ch; }
.site-footer__social { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__social a { font-size: 13px; color: var(--gray-300); }
.site-footer__social a:hover { color: var(--lime); }
.site-footer h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px;
}
.site-footer nav { display: flex; flex-direction: column; gap: 11px; }
.site-footer nav a, .site-footer__col > div > a { font-size: 14px; color: var(--gray-300); }
.site-footer nav a:hover { color: #fff; }
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site-footer__bar > div {
  max-width: var(--wrap); margin-inline: auto; padding: 20px var(--gutter);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.site-footer__bar span { font-size: 13px; color: var(--on-navy-dimmer); }
.site-footer__bar span:last-child { font-family: var(--mono); font-size: 12px; }

/* --------------------------------------------------------------------------
   15. Animaciones
   -------------------------------------------------------------------------- */
@keyframes glowDrift {
  0%   { transform: translate(-6%, 4%) scale(1); }
  50%  { transform: translate(8%, -6%) scale(1.25); }
  100% { transform: translate(-6%, 4%) scale(1); }
}
@keyframes sweep {
  0%   { transform: translateX(-40%) skewX(-14deg); opacity: 0; }
  45%  { opacity: 0.5; }
  100% { transform: translateX(240%) skewX(-14deg); opacity: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   16. Responsive
   Breakpoints:  ≥1024 desktop (base) · 900 tablet · 640 móvil · 400 móvil S
   ========================================================================== */

/* --- Tablet landscape y menores: colapsa rejillas de dos columnas --------- */
@media (max-width: 1023px) {
  .about__grid,
  .partnering__top,
  .contact__grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 44px); }

  /* En una sola columna el orden queda: titular · misión y visión · párrafos.
     Son declaraciones breves que funcionan como continuación del titular, y
     el detalle viene después. */
}

/* --- Tablet: menú hamburguesa -------------------------------------------
   Umbral en 1023 y no en 899: el selector de idioma ocupa ~130 px del header,
   y la nav en alemán es bastante más larga que en inglés ("Partnerschaften",
   "Technologie"). A 900 px desbordaba en DE. Coincide además con el
   punto en que colapsan las rejillas de dos columnas.
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .nav { display: none; }
  .burger { display: flex; }
}

@media (max-width: 899px) {
  /* El gráfico aguanta las tres columnas hasta aquí; solo se aprietan */
  .plchart { --pl-cols: 108px 118px minmax(0, 0.9fr) minmax(0, 1.9fr); --pl-gap: 14px; }
  .plrow__app { font-size: 12.5px; }
  .plrow__ind { font-size: 14px; }
  .plchart__scale span { font-size: 10px; padding-inline: 2px; }

}

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 639px) {
  :root { --header-h: 64px; }

  /* Contact es una sección más del menú desplegable; arriba solo quedan el
     selector de idioma y la hamburguesa. */
  .site-header__bar { gap: 12px; }
  .langs { gap: 0; padding: 2px; }
  .lang { padding: 6px 7px; font-size: 10.5px; letter-spacing: 0.04em; }

  .hero__glow--blue, .hero__glow--lime, .hero__sweep { display: none; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(8, 17, 45, 0.86) 0%, rgba(8, 17, 45, 0.78) 55%, rgba(10, 21, 51, 0.9) 100%);
  }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }

  .quick { transform: translateY(-28px); }
  .quick__grid { grid-template-columns: 1fr; gap: 14px; }

  .mv { gap: 22px; }

  /* Pipeline: sigue siendo UN gráfico, no seis tarjetas.
     Las columnas de texto se apilan en la izquierda y el gráfico conserva su
     propia columna, de modo que las líneas de etapa siguen recorriendo las
     seis filas de arriba abajo sin cortarse. */
  .plchart {
    --pl-cols: 112px minmax(0, 1fr);
    --pl-gap: 14px;
    --pl-pad: 15px;
    --pl-bar-h: 6px;
    margin-top: 30px;
  }
  .plchart__head { padding-bottom: 8px; }
  .plchart__head .plchart__h { display: none; }
  .plchart__head { grid-template-columns: var(--pl-cols); }
  .plchart__scale { grid-column: 2; height: 84px; align-items: stretch; }
  /* Vertical: aguanta cualquier idioma sin recortarse. "Präklinisch" no cabe
     en los 52px que tocan por banda a 375px de ancho.

     Se leen de ABAJO HACIA ARRIBA, que es la orientación estándar de una
     etiqueta vertical en tipografía occidental — la del lomo de un libro.
     `sideways-lr` haría esto directamente pero solo lo implementa Firefox, así
     que se compone con vertical-rl + giro de 180°, que funciona en todos.

     El giro invierte también los lados, así que los rellenos van al revés de
     como se ven: `padding-top` acaba siendo el margen inferior.

     Para centrar la etiqueta dentro de su banda no sirve `text-align`: con
     escritura vertical ese eje pasa a ser el vertical. Se centra con flex,
     cuyo eje transversal sí es el horizontal aquí. */
  .plchart__scale span {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 10px; letter-spacing: 0.05em; line-height: 1.15;
    display: flex; align-items: center;
    padding: 6px 0 0 0;
  }

  /* Programa, aplicación e indicación se apilan en la columna izquierda; el
     gráfico conserva la suya. Tres filas de texto contra una celda de gráfico
     que las abarca. */
  .plrow {
    grid-template-columns: var(--pl-cols);
    grid-template-areas: "id bar" "app bar" "ind bar";
    align-items: start; row-gap: 3px;
  }
  .plrow__id  { grid-area: id; flex-direction: column; align-items: flex-start; gap: 5px; }
  .plrow__app { grid-area: app; font-size: 11.5px; }
  .plrow__ind { grid-area: ind; font-size: 12.5px; line-height: 1.35; }
  .plrow__bar { grid-area: bar; }
  .plrow__name { font-size: 14px; }
  .plrow__cap { width: 11px; height: 11px; margin-left: -5.5px; }
  .plrow__stage { font-size: 10px; margin-top: 12px; }

  .form__row { grid-template-columns: 1fr; }

  .marquee__item { flex-basis: 170px; height: 84px; }

  .site-footer__main { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* --- Móvil pequeño ------------------------------------------------------- */
@media (max-width: 399px) {
  .person__body { padding: 12px 12px 14px; }
  .person__name { font-size: 15.5px; }
  .site-footer__main { grid-template-columns: 1fr; }
  .filters { gap: 8px; }
  .filter { padding: 8px 14px; font-size: 11px; }
}

/* --- Pantallas anchas ---------------------------------------------------- */
@media (min-width: 1400px) {
  .marquee { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
                     mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
}

/* --- Preferencias de movimiento reducido --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; justify-content: center; flex-wrap: wrap; width: auto; }
}

/* --- Impresión ----------------------------------------------------------- */
@media print {
  .site-header, .hero__media, .marquee, .form-card, .burger { display: none; }
  body { background: #fff; color: #000; }
  .science, .news, .site-footer { background: #fff; color: #000; }
}