/* ===== tokens.css ===== */
/* ==========================================================================
   Memoria institucional UFV 2025–2026 — Tokens de diseño
   --------------------------------------------------------------------------
   Fuente de verdad: valores inline de `design-src/UFV Memoria Landing.dc.html`
   (mapeados en `specs/ufv-memoria-landing/design-map.md` §2).

   Este fichero es el DUEÑO ÚNICO de los tokens: ningún `block.css` declara
   valores mágicos. Si falta un token, se añade aquí.

   Todo cuelga de `#ufv-memoria-2526` para no filtrar nada al sitio anfitrión
   (constitución IV). Las at-rules de nivel superior (@font-face, @keyframes)
   no pueden colgar de un id: van prefijadas con `ufvm-` para no colisionar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tipografías auto-alojadas (decisión U12: cero peticiones externas, RGPD,
   y renderizado determinista para el pixel-perfect).
   Bodoni Moda se retira: el diseño la cargaba pero no la usa (desviación h).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/playfair-display-400.woff2') format('woff2');
}
/* Sin @font-face itálico para Playfair, a propósito.
   El diseño de origen pide a Google `Playfair+Display:wght@400;500` — SIN el eje
   `ital` —, así que su "transformar" en cursiva es una itálica SINTÉTICA: el
   navegador inclina la redonda. Declarar aquí un fichero itálico haría que el
   navegador lo usara en vez de sintetizar, y el resultado dejaría de coincidir
   con el origen. Es el mismo criterio de fidelidad que en el resto. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/hanken-grotesk-variable.woff2') format('woff2');
}
/* Manrope la usan los gráficos dentro de su Shadow DOM. El Shadow DOM hereda
   las @font-face del documento pero no puede declararlas: por eso vive aquí. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/manrope-variable.woff2') format('woff2');
}

#ufv-memoria-2526 {
  /* ======================================================================
     1. COLORES — BASE Y ESTRUCTURA
     ====================================================================== */
  --ufvm-navy: #04162E;              /* fondo global, fin de gradientes, halo de foco */
  --ufvm-crema: #F4EFE6;             /* texto por defecto sobre secciones oscuras */
  --ufvm-tinta: #001A33;             /* texto sobre fondos claros */
  --ufvm-blanco: #FFFFFF;
  --ufvm-azul: #3B6BF5;              /* acento primario */
  --ufvm-coral: #F94C63;             /* acento secundario */

  /* ======================================================================
     2. COLORES — HERO
     ====================================================================== */
  --ufvm-hero-g1: #1A56C4;
  --ufvm-hero-g2: #0C2F73;
  --ufvm-hero-g3: #061C40;
  --ufvm-hero-sub: #D4E0F2;          /* subtítulo */

  /* ======================================================================
     3. COLORES — #cifras
     ====================================================================== */
  --ufvm-cifras-pill-txt: #E7EDF7;   /* texto pill "Alumnado" */
  --ufvm-cifras-sec: #AFC1DA;        /* texto secundario tarjeta alumnado */
  --ufvm-cifras-leyenda: #C6D2E4;
  --ufvm-cifras-pill-emp: #A81026;   /* texto pill "Empleabilidad" */
  --ufvm-cifras-coral-txt: #2E0409;  /* texto dentro de tarjeta coral */
  --ufvm-cifras-aro: #7FA6FF;        /* borde punto "Postgrado" */
  --ufvm-cifras-anillo-pista: rgba(255, 255, 255, 0.42); /* arco de fondo del donut */
  --ufvm-cifras-label: #3D5877;
  --ufvm-barra-az-1: #7FA3D8;
  --ufvm-barra-az-2: #5C89CE;
  --ufvm-barra-az-3: #3B6BF5;
  --ufvm-barra-co-1: #F2A3AF;
  --ufvm-barra-co-2: #F87B8E;
  --ufvm-barra-co-3: #F94C63;

  /* ======================================================================
     4. COLORES — #cita
     ====================================================================== */
  --ufvm-cita-fondo: #D3E5FB;
  --ufvm-cita-autor: #47617F;
  --ufvm-cita-btn-borde: #9BBDE8;
  --ufvm-cita-btn-txt: #2A56C8;

  /* ======================================================================
     5. COLORES — #ecosistema y #hitos
     ====================================================================== */
  --ufvm-tab-inactiva-borde: #A9C4EC;
  --ufvm-hito-fondo: #F4F7FE;
  --ufvm-hito-num: #4E6079;
  --ufvm-hito-ante: #47617F;
  --ufvm-hito-svg-tinta: #0A1B33;
  --ufvm-sup: #2A56C8;               /* superíndice "er" */
  --ufvm-flecha-borde: #C3D2EA;
  --ufvm-flecha-txt: #24499F;
  /* Separación entre tarjetas del carril de hitos. Vive aquí porque la lee
     también el JS del carrusel (paso = ancho de tarjeta + gap): si estuviera
     duplicada en CSS y en JS, un cambio de diseño desincronizaría el avance. */
  --ufvm-hito-gap: 24px;

  /* ======================================================================
     6. COLORES — #informe
     ====================================================================== */
  --ufvm-informe-cuerpo: #C6D5EA;
  --ufvm-informe-num: #8FA7C9;
  --ufvm-informe-tag-txt: #DCE7F7;
  --ufvm-informe-stat-label: #A8BCD8;

  /* ======================================================================
     7. COLORES — #memoria, nav y modales
     ====================================================================== */
  --ufvm-portada-marco: #0B1E45;
  --ufvm-nav-fondo: #0A2C63;
  --ufvm-modal-cuerpo: #3E5068;
  --ufvm-modal-borde: #E7ECF3;
  --ufvm-video-play-bg: #F2F4F8;
  --ufvm-video-track: #E4E8EF;
  --ufvm-video-play-mini: #2C4EE8;
  --ufvm-video-play-mini-hov: #1F3ECB;
  --ufvm-video-transcript: #10305F;
  --ufvm-switch-on: #1B62F0;
  --ufvm-switch-off-track: #D8DFE9;
  --ufvm-switch-off-borde: #8290A5;
  --ufvm-panel-footer: #F7FAFF;
  --ufvm-modal-meta: #4E6079;        /* "Tiempo de lectura", epígrafe de capítulo */
  --ufvm-modal-sec: #5A6B82;         /* cargo del rector, lead y resumen del panel */
  --ufvm-cerrar-bg: #EEF1F6;         /* botón ✕ de la carta */
  --ufvm-cerrar-bg-hover: #E1E7F0;
  --ufvm-cerrar-txt: #46586F;
  --ufvm-ctrl-borde: #C4CCD9;        /* borde de los controles del reproductor */
  --ufvm-ctrl-hover-bg: #EEF3FE;
  --ufvm-popover-borde: #D7DEEA;     /* popover de volumen */
  --ufvm-panel-fila-borde: #EDF1F7;  /* separador entre capítulos */
  --ufvm-panel-fila-hover: #FAFCFF;
  --ufvm-panel-sep: #D6DEEA;         /* barrita entre "Seleccionar"/"Deseleccionar" */

  /* ======================================================================
     8. ESTADOS E INTERACCIÓN (hover / active)
     ====================================================================== */
  --ufvm-coral-hover: #E23A51;       /* "Leer carta" */
  /* "Ver video". El origen usa #C3DAF6, que con el texto #2A56C8 da 4,498:1 —
     justo por debajo del 4,5:1 que exige WCAG AA. Se aclara el fondo del hover
     lo mínimo para llegar a 4,55:1, en vez de tocar el azul del texto, que es
     color de marca y está visible siempre. Desviación autorizada por a11y. */
  --ufvm-cita-btn-hover: #C5DBF7;
  --ufvm-descarga: #D33F54;
  --ufvm-descarga-hover: #BE3448;
  --ufvm-flecha-hover-bg: #EEF3FE;
  --ufvm-tab-hover-bg: #EEF3FE;      /* pestaña inactiva del ecosistema (desviación g) */
  --ufvm-pill-alumnos-bg: #EEF3FE;
  --ufvm-pill-alumnos-txt: #24499F;

  /* ======================================================================
     9. ALFAS Y VELOS
     ====================================================================== */
  --ufvm-borde-tarjeta: rgba(255, 255, 255, 0.2);
  --ufvm-velo-suave: rgba(255, 255, 255, 0.12);   /* pill de dimensión */
  --ufvm-velo-borde: rgba(255, 255, 255, 0.16);   /* borde-izq de stat */
  --ufvm-velo-hover: rgba(255, 255, 255, 0.28);   /* hover de link de nav */
  --ufvm-velo-pill: rgba(255, 255, 255, 0.14);    /* pill "Alumnado" */
  --ufvm-scrim: rgba(3, 9, 20, 0.66);             /* velo de la carta */
  --ufvm-anim-btn-bg: rgba(4, 22, 46, 0.55);
  --ufvm-anim-btn-hover: rgba(4, 22, 46, 0.85);
  --ufvm-velo-btn: rgba(255, 255, 255, 0.22);     /* botones sobre el vídeo */
  --ufvm-velo-btn-hover: rgba(255, 255, 255, 0.36);

  /* ======================================================================
     10. GRADIENTES
     ====================================================================== */
  --ufvm-grad-hero: radial-gradient(120% 90% at 50% 45%, #1A56C4 0%, #0C2F73 38%, #061C40 66%, #04162E 100%);
  --ufvm-grad-alumnado: radial-gradient(120% 100% at 85% 5%, #17418C 0%, #0C2551 45%, #061729 100%);
  --ufvm-grad-tarjeta-clara: linear-gradient(160deg, #E4EEFB 0%, #C9DEF8 100%);
  --ufvm-grad-mapa: radial-gradient(130% 110% at 88% 8%, #1B4795 0%, #0D2A5D 42%, #06182F 100%);
  --ufvm-grad-informe: linear-gradient(180deg, #071F44 0%, #04162E 22%, #04162E 100%);
  --ufvm-grad-memoria: radial-gradient(120% 100% at 20% 30%, #0E2F66 0%, #071F44 45%, #04162E 100%);
  --ufvm-grad-video: linear-gradient(160deg, #1B2E7A 0%, #0B1740 45%, #05080F 100%);

  /* ======================================================================
     11. TIPOGRAFÍA
     ====================================================================== */
  --ufvm-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ufvm-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --ufvm-peso-light: 300;
  --ufvm-peso-normal: 400;
  --ufvm-peso-medio: 500;
  --ufvm-peso-semi: 600;
  --ufvm-peso-bold: 700;

  /* Escalas fluidas — valores exactos del origen */
  --ufvm-fs-h1: clamp(46px, 6.6vw, 108px);
  --ufvm-fs-h2: clamp(32px, 4.4vw, 52px);
  --ufvm-fs-h2-dims: clamp(30px, 3.8vw, 46px);
  --ufvm-fs-h3-dim: clamp(24px, 3vw, 38px);
  --ufvm-fs-cita: clamp(28px, 3.6vw, 44px);
  --ufvm-fs-cifra-xl: clamp(54px, 7vw, 88px);
  --ufvm-fs-cifra-l: clamp(42px, 5.4vw, 64px);
  --ufvm-fs-cifra-m: 40px;
  --ufvm-fs-hito: clamp(38px, 3.1vw, 48px);
  /* La cifra de la caja de investigación usa su propia escala en el
     origen: 3.4vw y tope 44px, no la de `big-wide`. */
  --ufvm-fs-patente: clamp(30px, 3.4vw, 44px);
  --ufvm-fs-h4-caja: clamp(26px, 3vw, 38px);
  --ufvm-fs-base: 16px;
  --ufvm-fs-lead: 18px;
  --ufvm-fs-pill: 14px;
  --ufvm-fs-stat: 26px;
  --ufvm-fs-dato: 24px;              /* rejilla de la caja de investigación */
  --ufvm-fs-num-dim: 22px;
  --ufvm-fs-num-hito: 18px;
  --ufvm-fs-ante-hito: 17px;
  --ufvm-fs-flecha: 19px;            /* glifo ← → de los controles del carrusel */
  --ufvm-fs-modal-h3: 27px;
  --ufvm-fs-transcript-h3: 22px;
  --ufvm-fs-carta: 17px;             /* cuerpo de la carta del rector */
  --ufvm-fs-fab: 22px;               /* glifo ☰ / ✕ del nav en móvil */

  /* Interletrado */
  --ufvm-ls-tight: -0.02em;
  --ufvm-ls-xtight: -0.03em;
  --ufvm-ls-cita: -0.015em;
  --ufvm-ls-informe: -0.025em;
  --ufvm-ls-stat: -0.01em;
  --ufvm-ls-modal-h3: -0.01em;
  --ufvm-ls-tag: 0.04em;             /* epígrafe de capítulo del panel */

  /* Interlineado */
  --ufvm-lh-h1: 0.98;
  --ufvm-lh-uno: 1;
  --ufvm-lh-hito: 1.04;
  --ufvm-lh-informe: 1.06;
  --ufvm-lh-dim: 1.1;
  --ufvm-lh-titular: 1.14;
  --ufvm-lh-cita: 1.22;
  --ufvm-lh-ajustado: 1.35;
  --ufvm-lh-medio: 1.45;
  --ufvm-lh-lead: 1.5;
  --ufvm-lh-cuerpo: 1.6;
  --ufvm-lh-carta: 1.62;

  /* ======================================================================
     12. RADIOS
     ====================================================================== */
  --ufvm-r-hero-card: 10px;
  --ufvm-r-foto-dim: 12px;
  --ufvm-r-video: 14px;
  --ufvm-r-tarjeta: 16px;
  --ufvm-r-hito: 18px;
  --ufvm-r-panel: 18px;
  --ufvm-r-caja-claro: 20px;
  --ufvm-r-caja-claro-xl: 22px;
  --ufvm-r-boton: 8px;
  --ufvm-r-descarga: 12px;           /* botón de descarga del panel (origen: 12px) */
  --ufvm-r-foco: 6px;
  --ufvm-r-barra: 2px;               /* mini-barras de #cifras */
  --ufvm-r-pill: 999px;

  /* ======================================================================
     13. SOMBRAS
     ====================================================================== */
  --ufvm-sh-hero-card: 0 15px 44px rgba(2, 10, 26, 0.5);
  --ufvm-sh-boton-hover: 0 14px 34px rgba(0, 0, 0, 0.3);
  --ufvm-sh-portada: 0 40px 90px rgba(0, 0, 0, 0.45);
  --ufvm-sh-nav: 0 18px 46px rgba(4, 22, 46, 0.45);
  --ufvm-sh-carta: -24px 0 70px rgba(4, 22, 46, 0.3);
  --ufvm-sh-video: 0 26px 70px rgba(4, 22, 46, 0.32);
  --ufvm-sh-panel: -18px -10px 60px rgba(4, 22, 46, 0.24);
  --ufvm-sh-nav-movil: 0 18px 46px rgba(4, 22, 46, 0.5);  /* lista desplegada del FAB */
  --ufvm-sh-fab: 0 14px 34px rgba(4, 22, 46, 0.45);
  --ufvm-sh-nav-cta: 0 8px 22px rgba(0, 0, 0, 0.25);      /* hover del CTA del nav */
  --ufvm-sh-popover: 0 16px 38px rgba(4, 22, 46, 0.22);   /* popover de volumen */
  --ufvm-sh-knob: 0 1px 3px rgba(4, 22, 46, 0.25);        /* bolita del conmutador */

  /* ======================================================================
     14. FOCO — par claro/oscuro (desviación f, exigida por FR-017b)
     El origen usa siempre un anillo blanco, invisible sobre las secciones
     claras (#cifras, #ecosistema, #hitos). Se define un par con contraste
     verificable ≥3:1 en ambos fondos.
     ====================================================================== */
  --ufvm-foco-oscuro-outline: #FFFFFF;
  --ufvm-foco-oscuro-halo: 0 0 0 6px #04162E, 0 0 0 9px #FFFFFF;
  --ufvm-foco-claro-outline: #3B6BF5;
  --ufvm-foco-claro-halo: 0 0 0 6px #FFFFFF, 0 0 0 9px #3B6BF5;

  /* ======================================================================
     15. LAYOUT Y ESPACIADO
     ====================================================================== */
  --ufvm-ancho-max: 1280px;
  --ufvm-ancho-max-eco: 1180px;
  --ufvm-padding-x: clamp(20px, 5vw, 40px);
  --ufvm-scroll-margin: 88px;
  --ufvm-nav-h: 88px;                /* alimenta el cálculo del hero */

  /* Anchos de las capas flotantes (valores exactos del origen) */
  --ufvm-w-carta: 548px;
  --ufvm-w-carta-apaisado: 640px;    /* landscape corto */
  --ufvm-w-video: 446px;
  --ufvm-w-video-apaisado: 320px;
  --ufvm-w-transcript: 320px;
  --ufvm-w-panel: 470px;
  --ufvm-h-video-stage: 264px;
  --ufvm-h-video-stage-apaisado: 132px;
  --ufvm-tam-fab: 56px;              /* botón circular del nav en móvil */

  /* Apilado de las capas. El origen los fija así y el orden importa:
     el velo de la carta debe tapar al panel y al vídeo. */
  --ufvm-z-nav: 80;
  --ufvm-z-video: 88;
  --ufvm-z-panel: 90;
  --ufvm-z-scrim: 95;
  --ufvm-z-carta: 96;

  /* ======================================================================
     15b. ESTADO EN TIEMPO DE EJECUCIÓN
     `--ufvm-p` es el progreso de los contadores de #cifras (0→1). Vive aquí,
     y no en el bloque, por dos motivos: es el ÚNICO punto donde se declara su
     valor por defecto y ese valor por defecto es lo que hace que sin JS las
     barras y el anillo se vean COMPLETOS (mejora progresiva, FR-021b).
     `blocks/cifras/block.js` lo baja a 0 y lo anima solo cuando hay JS.
     ====================================================================== */
  --ufvm-p: 1;

  /* ======================================================================
     16. MOVIMIENTO
     ====================================================================== */
  --ufvm-ease-suave: cubic-bezier(0.16, 1, 0.3, 1);
  --ufvm-ease-entrada: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ufvm-ease-hero: cubic-bezier(0.4, 0, 0.2, 1);
  --ufvm-dur-rapida: 200ms;
  --ufvm-dur-sombra: 300ms;          /* box-shadow de los drawers */
  --ufvm-dur-velo: 380ms;            /* velo de la carta */
  --ufvm-dur-nav: 420ms;             /* aparición del nav flotante */
  --ufvm-dur-media: 520ms;
  --ufvm-dur-colapso: 1100ms;
  --ufvm-dur-hero: 1.2s;
}

/* ==========================================================================
   Keyframes — prefijados `ufvm-` porque el espacio de nombres de @keyframes
   es global y se comparte con el documento del cliente.
   ========================================================================== */

@keyframes ufvm-heroIn {
  from { opacity: 0; transform: translateY(24px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ufvm-dimIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* `ufvm-revealIn` se retiró al pasar la entrada a estar conducida por el
   scroll: el desplazamiento de 26px lo pinta ahora `blocks/reveal/block.js`
   fotograma a fotograma, sin keyframes. */
@keyframes ufvm-navIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ufvm-heroText {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ufvm-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes ufvm-ringPulse {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

/* ===== base.css ===== */
/* ==========================================================================
   Memoria institucional UFV 2025–2026 — Base reescopeada
   --------------------------------------------------------------------------
   El diseño de origen declara sus globales sobre `*`, `html`, `body`, `a`, `p`,
   `::selection` y `:focus-visible` a nivel de documento. Aquí TODO cuelga de
   `#ufv-memoria-2526`: la landing se embebe en la web del cliente y no puede
   alterar ni un píxel fuera de su contenedor (constitución IV, garantías G1-G3).

   ⚠️ En particular, la pausa de animación del origen era
      `html[data-anim-paused] * { animation: none !important; ... }`
   que habría detenido las animaciones de TODA la web del cliente. Aquí es
   `#ufv-memoria-2526[data-ufvm-anim-paused]`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor raíz
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 {
  position: relative;
  background: var(--ufvm-navy);
  color: var(--ufvm-crema);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  /* `clip` en lugar de `hidden` para no crear un contenedor de scroll que
     rompa el `position: sticky` del sitio anfitrión. */
  overflow-x: clip;
  /* El origen fuerza el esquema claro para que los controles nativos
     (input range del vídeo) no se inviertan con el modo oscuro del sistema. */
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

/* Reset acotado: solo dentro del contenedor. */
#ufv-memoria-2526,
#ufv-memoria-2526 *,
#ufv-memoria-2526 *::before,
#ufv-memoria-2526 *::after {
  box-sizing: border-box;
}

#ufv-memoria-2526 p {
  margin: 0;
}

/* El atributo `hidden` debe ganar siempre. Sin esto, cualquier regla que fije
   `display` sobre un elemento (o un SVG, cuyo display por defecto es `inline`)
   deja visible algo marcado como oculto: pasó con los dos iconos del botón de
   pausar animaciones, que se veían a la vez. */
#ufv-memoria-2526 [hidden] {
  display: none !important;
}

#ufv-memoria-2526 a {
  color: var(--ufvm-azul);
  text-decoration: none;
}

#ufv-memoria-2526 a:hover {
  text-decoration: underline;
}

#ufv-memoria-2526 ::selection {
  background: var(--ufvm-azul);
  color: var(--ufvm-blanco);
}

/* Los inputs del reproductor no deben heredar el tema oscuro del anfitrión. */
#ufv-memoria-2526 input {
  color-scheme: light;
  background: var(--ufvm-blanco);
}

/* --------------------------------------------------------------------------
   Anclas de sección
   El origen pone `scroll-behavior: smooth` en `html`, lo que afectaría a toda
   la navegación del cliente. Se aplica solo a nuestras anclas.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 section,
#ufv-memoria-2526 header {
  scroll-margin-top: var(--ufvm-scroll-margin);
}

/* --------------------------------------------------------------------------
   Foco visible — par claro/oscuro (desviación f, FR-017b)
   El anillo blanco del origen es invisible sobre las secciones claras.
   Por defecto aplica el par oscuro; las secciones claras lo conmutan.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 :focus-visible {
  outline: 3px solid var(--ufvm-foco-oscuro-outline);
  outline-offset: 0;
  border-radius: var(--ufvm-r-foco);
  box-shadow: var(--ufvm-foco-oscuro-halo);
}

#ufv-memoria-2526 [data-ufvm-fondo='claro'] :focus-visible {
  outline-color: var(--ufvm-foco-claro-outline);
  box-shadow: var(--ufvm-foco-claro-halo);
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#ufv-memoria-2526 .ufvm-skip-link {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--ufvm-r-boton);
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  transition: top 160ms ease-out;
}

#ufv-memoria-2526 .ufvm-skip-link:focus {
  top: 12px;
}

/* --------------------------------------------------------------------------
   Movimiento
   -------------------------------------------------------------------------- */

/* Pausa manual (botón del hero). Solo dentro del contenedor.
   Los otros dos gráficos llevan su propio Shadow DOM: su pausa la inyecta
   anim-toggle vía `adoptedStyleSheets`, porque el CSS del documento no cruza
   esa frontera.

   NO se usa `animation: none`. Hay contenido que declara `opacity: 0` como
   estado inicial y cuenta con que la animación, con `both`, lo suba a 1: el
   gráfico del ecosistema es todo así. Cancelarla lo devuelve a ese estado y
   deja huecos en blanco. Con duración y retardo casi nulos la animación se
   ejecuta igual —llega a su último fotograma— pero sin movimiento perceptible.
   Es la misma técnica que aplica el bloque de `prefers-reduced-motion` de abajo
   y la hoja que anim-toggle inyecta en los Shadow DOM. */
#ufv-memoria-2526[data-ufvm-anim-paused],
#ufv-memoria-2526[data-ufvm-anim-paused] *,
#ufv-memoria-2526[data-ufvm-anim-paused] *::before,
#ufv-memoria-2526[data-ufvm-anim-paused] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Pausar no puede dejar contenido invisible.
   Los elementos que entran animados declaran `opacity: 0` como estado inicial y
   cuentan con que la animación los suba a 1. Al cancelarla con `animation: none`
   ese 0 vuelve a mandar: si alguien pulsaba "Pausar animaciones" durante los
   primeros dos segundos, el titular y los CTA del hero se quedaban en blanco
   para siempre. Al pausar, todo lo que aún estaba entrando pasa a su estado
   final. */
#ufv-memoria-2526[data-ufvm-anim-paused] .ufvm-hero__titulo,
#ufv-memoria-2526[data-ufvm-anim-paused] .ufvm-hero__subtitulo,
#ufv-memoria-2526[data-ufvm-anim-paused] .ufvm-hero .ufvm-cta-row,
#ufv-memoria-2526[data-ufvm-anim-paused] [data-ufvm-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #ufv-memoria-2526,
  #ufv-memoria-2526 *,
  #ufv-memoria-2526 *::before,
  #ufv-memoria-2526 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    /* Anular solo la duración no basta: las entradas del hero llevan retardos
       de hasta 1,95 s con `fill-mode: both`, así que el titular y los CTA se
       quedaban invisibles casi dos segundos justo para quien pidió menos
       movimiento. El retardo también tiene que caer. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
}

/* --------------------------------------------------------------------------
   Mejora progresiva (FR-021b)
   Sin JavaScript el contenido debe leerse completo. Los estados iniciales que
   dependen de JS (reveal en opacidad 0, tarjetas del hero posicionadas) solo
   se aplican cuando `main.js` marca el contenedor con `data-ufvm-js`.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526:not([data-ufvm-js]) [data-ufvm-reveal] {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ===== blocks/boton/block.css ===== */
/* ==========================================================================
   Bloque: boton
   Variantes: --primario (blanco), --secundario (contorno claro),
              --coral ("Leer carta"), --contorno-azul ("Ver video"),
              --descarga (panel de PDF)
   Estados hover/active/disabled: el diseño de origen no define :active ni el
   estado deshabilitado; se derivan del sistema (desviación g, autorizada).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-boton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 0;
  border-radius: var(--ufvm-r-boton);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  /* Sin `line-height`: el origen deja el `normal` del navegador y de ahí sale
     la altura del botón (53px). Fijarlo a 1 lo dejaba en 50px. */
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ufvm-dur-rapida) var(--ufvm-ease-entrada),
    box-shadow var(--ufvm-dur-rapida), background var(--ufvm-dur-rapida),
    border-color var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-boton:hover {
  text-decoration: none;
}

/* --- primario: fondo blanco sobre el hero oscuro --- */
#ufv-memoria-2526 .ufvm-boton--primario {
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-boton--primario:hover {
  box-shadow: var(--ufvm-sh-boton-hover);
  transform: translateY(-2px);
}

#ufv-memoria-2526 .ufvm-boton--primario:active {
  transform: scale(0.98);
}

/* --- secundario: contorno claro sobre oscuro --- */
#ufv-memoria-2526 .ufvm-boton--secundario {
  padding: 16px 26px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-boton--secundario:hover {
  background: var(--ufvm-velo-suave);
}

#ufv-memoria-2526 .ufvm-boton--secundario:active {
  transform: scale(0.98);
}

/* --- coral: "Leer carta" --- */
#ufv-memoria-2526 .ufvm-boton--coral {
  gap: 9px;
  padding: 13px 22px;
  background: var(--ufvm-coral);
  color: var(--ufvm-cifras-coral-txt);
}

#ufv-memoria-2526 .ufvm-boton--coral:hover {
  background: var(--ufvm-coral-hover);
}

#ufv-memoria-2526 .ufvm-boton--coral:active {
  transform: scale(0.98);
}

/* --- contorno azul: "Ver video" --- */
#ufv-memoria-2526 .ufvm-boton--fantasma {
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid var(--ufvm-cita-btn-borde);
  background: transparent;
  color: var(--ufvm-cita-btn-txt);
}

#ufv-memoria-2526 .ufvm-boton--fantasma:hover {
  background: var(--ufvm-cita-btn-hover);
}

#ufv-memoria-2526 .ufvm-boton--fantasma:active {
  transform: scale(0.98);
}

/* --- descarga: acción principal del panel de capítulos --- */
#ufv-memoria-2526 .ufvm-boton--descarga {
  justify-content: center;
  width: 100%;
  background: var(--ufvm-descarga);
  color: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-boton--descarga:hover:not(:disabled) {
  background: var(--ufvm-descarga-hover);
}

/* --- deshabilitado (derivado del sistema) --- */
#ufv-memoria-2526 .ufvm-boton:disabled,
#ufv-memoria-2526 .ufvm-boton[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- cargando: mientras se compone el PDF --- */
#ufv-memoria-2526 .ufvm-boton[data-ufvm-cargando] {
  cursor: progress;
}

#ufv-memoria-2526 .ufvm-boton__spinner {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--ufvm-r-pill);
  animation: ufvm-girar 700ms linear infinite;
}

@keyframes ufvm-girar {
  to { transform: rotate(360deg); }
}

/* ===== blocks/boton-icono/block.css ===== */
/* ==========================================================================
   Átomo: boton-icono — botón circular de 48×48 con un solo glifo.
   Lo usan los controles anterior/siguiente del carrusel de `#hitos`.

   El estado "no se puede avanzar más" se expresa con `aria-disabled`, NO con
   `disabled`: un botón deshabilitado pierde el foco del teclado en cuanto se
   llega al extremo, y el usuario se queda sin punto de referencia. Con
   `aria-disabled` el botón sigue siendo enfocable y solo ignora la pulsación.

   Valores exactos del origen (design-map §3.5).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-boton-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ufvm-flecha-borde);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-flecha-txt);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-flecha);
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida) var(--ufvm-ease-entrada),
    border-color var(--ufvm-dur-rapida), transform var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-boton-icono:hover:not([aria-disabled='true']) {
  border-color: var(--ufvm-azul);
  background: var(--ufvm-flecha-hover-bg);
  transform: scale(1.06);
}

#ufv-memoria-2526 .ufvm-boton-icono:active:not([aria-disabled='true']) {
  transform: scale(0.96);
}

#ufv-memoria-2526 .ufvm-boton-icono[aria-disabled='true'] {
  opacity: 0.45;
  cursor: default;
}

/* ===== blocks/pill/block.css ===== */
/* ==========================================================================
   Bloque: pill — etiqueta redondeada.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-pill {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--ufvm-r-pill);
  font-size: var(--ufvm-fs-pill);
  font-weight: var(--ufvm-peso-semi);
}

/* Sobre la tarjeta de alumnado (fondo oscuro translúcido) */
#ufv-memoria-2526 .ufvm-pill--velo {
  background: var(--ufvm-velo-pill);
  color: var(--ufvm-cifras-pill-txt);
}

/* Sobre la tarjeta coral */
#ufv-memoria-2526 .ufvm-pill--blanca {
  background: var(--ufvm-blanco);
  color: var(--ufvm-cifras-pill-emp);
}

/* Caja "Nuestros alumnos" */
#ufv-memoria-2526 .ufvm-pill--azul-claro {
  background: var(--ufvm-pill-alumnos-bg);
  color: var(--ufvm-pill-alumnos-txt);
}

/* Etiqueta de dimensión, sobre fondo oscuro */
#ufv-memoria-2526 .ufvm-pill--translucida {
  padding: 6px 14px;
  background: var(--ufvm-velo-suave);
  font-weight: var(--ufvm-peso-normal);
  color: var(--ufvm-informe-tag-txt);
}

/* ===== blocks/tab-pill/block.css ===== */
/* ==========================================================================
   Átomo: tab-pill — pestaña con forma de píldora.
   Lo usa el tablist de `#ecosistema`. El estado visual se deriva de
   `aria-selected`, no de una clase modificadora: así el estado accesible y el
   estado visual no pueden divergir (si el JS olvidara el ARIA, se vería).

   Valores exactos del origen (design-map §3.4).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-tab-pill {
  flex: 1 1 260px;
  max-width: 340px;
  padding: 12px 26px;
  border: 1px solid var(--ufvm-tab-inactiva-borde);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-cita-btn-txt);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida), color var(--ufvm-dur-rapida),
    border-color var(--ufvm-dur-rapida);
}

/* --- activa: azul sólido --- */
#ufv-memoria-2526 .ufvm-tab-pill[aria-selected='true'] {
  border-color: var(--ufvm-azul);
  background: var(--ufvm-azul);
  color: var(--ufvm-blanco);
}

/* --- hover/active: el origen declara `transition: all 200ms` pero no define
       los estados; se derivan del sistema (desviación g, misma que en boton). --- */
#ufv-memoria-2526 .ufvm-tab-pill:hover:not([aria-selected='true']) {
  border-color: var(--ufvm-azul);
  background: var(--ufvm-tab-hover-bg);
}

#ufv-memoria-2526 .ufvm-tab-pill:active {
  transform: scale(0.98);
}

/* --- Reflow (WCAG 1.4.10) ------------------------------------------------
   El origen fija `white-space: nowrap`: en 320 px de ancho, o al 200 % de
   zoom, "Proyectos de investigación" se sale de la píldora. Por debajo del
   breakpoint móvil se permite el salto de línea.
   ------------------------------------------------------------------------ */
@media (max-width: 47.5em) {
  #ufv-memoria-2526 .ufvm-tab-pill {
    white-space: normal;
  }
}

#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-tab-pill {
  white-space: normal;
}

/* ===== blocks/seccion-titulo/block.css ===== */
/* ==========================================================================
   Bloque: seccion-titulo — h2 de sección.
   El h2 de #informe usa otro interlineado e interletrado que el resto, así que
   lleva modificador propio (no es el mismo componente).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-seccion-titulo {
  margin: 0;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h2);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-seccion-titulo--oscuro {
  color: var(--ufvm-crema);
}

#ufv-memoria-2526 .ufvm-seccion-titulo--informe {
  line-height: var(--ufvm-lh-informe);
  letter-spacing: var(--ufvm-ls-informe);
  color: var(--ufvm-crema);
}

#ufv-memoria-2526 .ufvm-seccion-titulo--titular {
  max-width: 620px;
  line-height: var(--ufvm-lh-titular);
}

/* ===== blocks/caja-panel/block.css ===== */
/* ==========================================================================
   Bloque: caja-panel — caja con borde azul.
   Dos radios distintos según la sección: no son la misma variante.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-caja-panel {
  border: 1px solid var(--ufvm-azul);
}

/* #cifras — "Nuestros alumnos 2025-2026" */
#ufv-memoria-2526 .ufvm-caja-panel--claro {
  padding: 34px;
  border-radius: var(--ufvm-r-caja-claro);
  background: var(--ufvm-blanco);
}

/* #informe — "Generar conocimiento con propósito" */
#ufv-memoria-2526 .ufvm-caja-panel--claro-xl {
  padding: clamp(32px, 4vw, 56px);
  border-radius: var(--ufvm-r-caja-claro-xl);
}

/* ===== blocks/stat-list/block.css ===== */
/* ==========================================================================
   Bloque: stat-list — rejilla de estadísticas con separador a la izquierda.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-stat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 0;
}

#ufv-memoria-2526 .ufvm-stat-list__item {
  padding: clamp(20px, 2vw, 30px) 26px;
  border-left: 1px solid var(--ufvm-velo-borde);
}

#ufv-memoria-2526 .ufvm-stat-list__valor {
  font-size: var(--ufvm-fs-stat);
  font-weight: var(--ufvm-peso-normal);
  letter-spacing: var(--ufvm-ls-stat);
  color: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-stat-list__etiqueta {
  margin-top: 5px;
  font-size: var(--ufvm-fs-base);
  color: var(--ufvm-informe-stat-label);
}

/* Procedencia del dato, al pie de su etiqueta. Va más pequeña y más apagada
   para que no compita con la cifra, pero conserva contraste suficiente: el
   color de la etiqueta sobre el azul del bloque ya cumple AA, y aquí solo baja
   el tamaño. */
#ufv-memoria-2526 .ufvm-stat-list__fuente {
  display: block;
  margin-top: 4px;
  max-width: 26ch;
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0.85;
}

@media (max-width: 56.25em) {
  #ufv-memoria-2526 .ufvm-stat-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }
  #ufv-memoria-2526 .ufvm-stat-list__item {
    padding-left: 18px;
    padding-right: 0;
  }
}

/* ===== blocks/image-slot-wrapper/block.css ===== */
/* ==========================================================================
   Bloque: image-slot-wrapper
   Sustituye al <image-slot> del origen por un <img> (desviación d autorizada):
   el componente original dependía de un sidecar de 383 KB que además pisaba el
   atributo src y fallaba en silencio. Replica `object-fit` (atributo `fit`) y
   `border-radius` (atributo `shape`/`radius`).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-imagen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#ufv-memoria-2526 .ufvm-imagen--contain {
  object-fit: contain;
}

#ufv-memoria-2526 .ufvm-imagen--redondeada {
  border-radius: var(--ufvm-r-foto-dim);
}

/* ===== blocks/reveal/block.css ===== */
/* ==========================================================================
   Bloque: reveal — entrada al asomar en pantalla, conducida por el scroll.

   La entrada la pinta JS fotograma a fotograma (opacidad y desplazamiento en
   estilos en línea), así que aquí no hay animación ni transición: solo el
   estado inicial y el final. Una transición pelearía con los valores que JS
   escribe en cada fotograma y haría el movimiento pastoso.

   El estado inicial (opacidad 0) solo se aplica con JS activo, para que sin JS
   el contenido se lea entero (FR-021b).
   ========================================================================== */

#ufv-memoria-2526[data-ufvm-js] [data-ufvm-reveal] {
  opacity: 0;
}

#ufv-memoria-2526[data-ufvm-js] [data-ufvm-reveal][data-ufvm-visible] {
  opacity: 1;
  transform: none;
}

/* ===== blocks/hero-card/block.css ===== */
/* ==========================================================================
   Bloque: hero-card
   Tarjeta 3D del hero. Anida `image-slot-wrapper`. Su posición la calcula el
   JS del hero (algoritmo portado del origen); aquí solo va lo estático.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-hero-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(104px, 12.6vmin, 190px);
  height: clamp(138px, 16.7vmin, 252px);
  border: 1px solid var(--ufvm-borde-tarjeta);
  border-radius: var(--ufvm-r-hero-card);
  overflow: hidden;
  box-shadow: var(--ufvm-sh-hero-card);
  transform: translate(-50%, -50%) translate3d(0, 0, 0) rotateY(0deg);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--ufvm-dur-hero) var(--ufvm-ease-hero);
}

/* Sin JS las tarjetas no se colocan: se ocultan para no amontonarse en el
   centro y tapar el titular (el contenido sigue siendo legible, FR-021b). */
#ufv-memoria-2526:not([data-ufvm-js]) .ufvm-hero-card {
  display: none;
}

/* ===== blocks/cta-row/block.css ===== */
/* ==========================================================================
   Bloque: cta-row — fila de acciones. En móvil pasa a columna a ancho completo.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-cta-row {
  position: relative;
  display: flex;
  gap: 14px;
}

@media (max-width: 47.5em) {
  #ufv-memoria-2526 .ufvm-cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #ufv-memoria-2526 .ufvm-cta-row > a,
  #ufv-memoria-2526 .ufvm-cta-row > button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-cta-row {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-cta-row > a,
#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-cta-row > button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ===== blocks/stat-card/block.css ===== */
/* ==========================================================================
   Bloque: stat-card — tarjeta de cifra destacada de #cifras.
   Variantes: --alumnado (gradiente azul), --empleabilidad (coral + anillo),
              --empresas y --horas (gradiente claro + mini-bars).
   Valores exactos del origen (líneas 146-201; design-map §3.2).

   El elemento que ANIMA (barra de reparto, anillo) escala con `--ufvm-p`, el
   progreso del contador. Su valor por defecto es 1 (tokens.css): sin JS la
   tarjeta se ve ya en su estado final.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--ufvm-r-tarjeta);
}

/* --------------------------------------------------------------------------
   Variantes de tarjeta
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-stat-card--alumnado {
  min-height: 500px;
  padding: 34px;
  background: var(--ufvm-grad-alumnado);
}

/* La única que reparte en fila: texto a la izquierda, anillo a la derecha. */
#ufv-memoria-2526 .ufvm-stat-card--empleabilidad {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 30px 34px;
  background: var(--ufvm-coral);
}

#ufv-memoria-2526 .ufvm-stat-card--empresas,
#ufv-memoria-2526 .ufvm-stat-card--horas {
  padding: 28px;
  background: var(--ufvm-grad-tarjeta-clara);
}

/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-stat-card__cifra {
  font-weight: var(--ufvm-peso-normal);
  line-height: var(--ufvm-lh-uno);
}

#ufv-memoria-2526 .ufvm-stat-card__cifra--xl {
  margin-top: 26px;
  font-size: var(--ufvm-fs-cifra-xl);
  letter-spacing: var(--ufvm-ls-xtight);
  color: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-stat-card__cifra--l {
  margin-top: 22px;
  font-size: var(--ufvm-fs-cifra-l);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-stat-card__cifra--m {
  font-size: var(--ufvm-fs-cifra-m);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-stat-card__texto {
  font-size: var(--ufvm-fs-base);
}

#ufv-memoria-2526 .ufvm-stat-card__texto--sobre-oscuro {
  margin-top: 14px;
  color: var(--ufvm-cifras-sec);
}

#ufv-memoria-2526 .ufvm-stat-card__texto--sobre-coral {
  margin-top: 10px;
  max-width: 330px;
  line-height: var(--ufvm-lh-medio);
  color: var(--ufvm-cifras-coral-txt);
}

#ufv-memoria-2526 .ufvm-stat-card__texto--sobre-claro {
  margin-top: 8px;
  color: var(--ufvm-cifras-label);
}

/* --------------------------------------------------------------------------
   Barra de reparto Grado / Postgrado (solo --alumnado)
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-stat-card__barra {
  display: flex;
  gap: 5px;
  height: 9px;
}

#ufv-memoria-2526 .ufvm-stat-card__barra-tramo--grado {
  flex: 72;
}

#ufv-memoria-2526 .ufvm-stat-card__barra-tramo--postgrado {
  flex: 28;
}

#ufv-memoria-2526 .ufvm-stat-card__barra-relleno {
  display: block;
  height: 9px;
  border-radius: var(--ufvm-r-pill);
  transform-origin: left center;
  transform: scaleX(var(--ufvm-p));
}

#ufv-memoria-2526 .ufvm-stat-card__barra-relleno--grado {
  background: var(--ufvm-coral);
}

/* Aro hueco: el borde es parte de los 9px, de ahí el border-box. */
#ufv-memoria-2526 .ufvm-stat-card__barra-relleno--postgrado {
  box-sizing: border-box;
  border: 1.5px solid var(--ufvm-cifras-aro);
  background: transparent;
}

#ufv-memoria-2526 .ufvm-stat-card__leyenda {
  display: flex;
  gap: 22px;
  margin-top: 14px;
  font-size: var(--ufvm-fs-pill);
  color: var(--ufvm-cifras-leyenda);
}

#ufv-memoria-2526 .ufvm-stat-card__leyenda-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

#ufv-memoria-2526 .ufvm-stat-card__punto {
  border-radius: var(--ufvm-r-pill);
}

#ufv-memoria-2526 .ufvm-stat-card__punto--grado {
  width: 8px;
  height: 8px;
  background: var(--ufvm-coral);
}

#ufv-memoria-2526 .ufvm-stat-card__punto--postgrado {
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--ufvm-cifras-aro);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Anillo de empleabilidad (solo --empleabilidad)
   El giro de -90° pone el inicio del arco a las 12 en punto. El avance lo
   escribe `block.js` en `stroke-dashoffset` (282.7 → 33.9), no el CSS: es un
   atributo de presentación SVG y así se conserva el valor final en el marcado.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-stat-card__anillo {
  flex: none;
  transform: rotate(-90deg);
}

#ufv-memoria-2526 .ufvm-stat-card__anillo-pista {
  stroke: var(--ufvm-cifras-anillo-pista);
}

#ufv-memoria-2526 .ufvm-stat-card__anillo-arco {
  stroke: var(--ufvm-blanco);
}

/* --------------------------------------------------------------------------
   Responsive
   A <520px el anillo y el texto dejan de caber en fila: la tarjeta coral pasa
   a columna. El origen no lo contempla (a esa anchura ya solapaban), así que
   es una corrección de reflujo, no una desviación de diseño.
   -------------------------------------------------------------------------- */

/* ===== blocks/mini-bars/block.css ===== */
/* ==========================================================================
   Bloque: mini-bars — mini gráfico de 6 barras que acompaña a una cifra.
   Usos: stat-card--empresas (azul) y stat-card--horas (coral).
   Valores exactos del origen (líneas 180-201 y `growBars`, línea 1220).

   Las alturas van aquí y no en el marcado (`nth-child`) para que el HTML no
   lleve medidas: el bloque es el dueño de su geometría.

   Todo el grupo escala en vertical con `--ufvm-p`, el progreso del contador
   (por defecto 1: sin JS las barras se ven completas).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  margin-top: 32px;
  transform-origin: bottom;
  transform: scaleY(var(--ufvm-p));
}

#ufv-memoria-2526 .ufvm-mini-bars__barra {
  width: 5px;
  border-radius: var(--ufvm-r-barra);
}

/* --- Empresas colaboradoras: 26/42/34/62/78/100 % --- */
#ufv-memoria-2526 .ufvm-mini-bars--azul .ufvm-mini-bars__barra:nth-child(1) { height: 26%; background: var(--ufvm-barra-az-1); }
#ufv-memoria-2526 .ufvm-mini-bars--azul .ufvm-mini-bars__barra:nth-child(2) { height: 42%; background: var(--ufvm-barra-az-1); }
#ufv-memoria-2526 .ufvm-mini-bars--azul .ufvm-mini-bars__barra:nth-child(3) { height: 34%; background: var(--ufvm-barra-az-1); }
#ufv-memoria-2526 .ufvm-mini-bars--azul .ufvm-mini-bars__barra:nth-child(4) { height: 62%; background: var(--ufvm-barra-az-2); }
#ufv-memoria-2526 .ufvm-mini-bars--azul .ufvm-mini-bars__barra:nth-child(5) { height: 78%; background: var(--ufvm-barra-az-3); }
#ufv-memoria-2526 .ufvm-mini-bars--azul .ufvm-mini-bars__barra:nth-child(6) { height: 100%; background: var(--ufvm-barra-az-3); }

/* --- Horas de compromiso social: 22/38/30/56/74/100 % --- */
#ufv-memoria-2526 .ufvm-mini-bars--coral .ufvm-mini-bars__barra:nth-child(1) { height: 22%; background: var(--ufvm-barra-co-1); }
#ufv-memoria-2526 .ufvm-mini-bars--coral .ufvm-mini-bars__barra:nth-child(2) { height: 38%; background: var(--ufvm-barra-co-1); }
#ufv-memoria-2526 .ufvm-mini-bars--coral .ufvm-mini-bars__barra:nth-child(3) { height: 30%; background: var(--ufvm-barra-co-1); }
#ufv-memoria-2526 .ufvm-mini-bars--coral .ufvm-mini-bars__barra:nth-child(4) { height: 56%; background: var(--ufvm-barra-co-2); }
#ufv-memoria-2526 .ufvm-mini-bars--coral .ufvm-mini-bars__barra:nth-child(5) { height: 74%; background: var(--ufvm-barra-co-3); }
#ufv-memoria-2526 .ufvm-mini-bars--coral .ufvm-mini-bars__barra:nth-child(6) { height: 100%; background: var(--ufvm-barra-co-3); }

/* ===== blocks/hito-card/block.css ===== */
/* ==========================================================================
   Molécula: hito-card — tarjeta del carrusel de `#hitos`.
   Número, antetítulo (o texto posterior), titular azul y un SVG decorativo
   anclado arriba-derecha. Valores exactos del origen (design-map §3.5, §7.4).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-hito-card {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  width: min(74vw, 700px);
  min-height: 400px;
  padding: 40px 44px;
  border-radius: var(--ufvm-r-hito);
  background: var(--ufvm-hito-fondo);
  scroll-snap-align: start;
  transition: transform var(--ufvm-dur-rapida) var(--ufvm-ease-entrada);
}

#ufv-memoria-2526 .ufvm-hito-card__numero {
  font-size: var(--ufvm-fs-num-hito);
  color: var(--ufvm-hito-num);
}

#ufv-memoria-2526 .ufvm-hito-card__cuerpo {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: 68%;
}

/* El SVG está fuera del flujo: el `max-width: 68%` del cuerpo es justamente el
   hueco que le deja libre a la derecha. `width: auto` conserva la proporción
   de cada icono, que no comparten relación de aspecto. */
#ufv-memoria-2526 .ufvm-hito-card__svg {
  position: absolute;
  top: 26px;
  right: 30px;
  width: auto;
  max-height: 200px;
}

#ufv-memoria-2526 .ufvm-hito-card__ante,
#ufv-memoria-2526 .ufvm-hito-card__post {
  font-size: var(--ufvm-fs-ante-hito);
  color: var(--ufvm-hito-ante);
}

#ufv-memoria-2526 .ufvm-hito-card__post {
  margin-top: 16px;
}

#ufv-memoria-2526 .ufvm-hito-card__titular {
  /* Serif: el titular del hito es una frase, no un dato numérico. Mismo
     criterio que el diseño aplica al dato de las dimensiones 5 y 7. */
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-hito);
  line-height: var(--ufvm-lh-hito);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-azul);
}

/* Solo separa del antetítulo cuando lo hay: los hitos 05 y 06 abren con el
   titular y no llevan ese margen superior. */
#ufv-memoria-2526 .ufvm-hito-card__ante + .ufvm-hito-card__titular {
  margin-top: 10px;
}

#ufv-memoria-2526 .ufvm-hito-card__sup {
  font-size: 0.5em;
  color: var(--ufvm-sup);
}

/* --- Foco -----------------------------------------------------------------
   Las tarjetas son enfocables para que el carril se pueda recorrer con el
   teclado. El carril recorta en vertical (`overflow-x: auto` convierte también
   el eje Y en desplazable), así que el anillo se dibuja hacia dentro: con el
   halo exterior por defecto quedaría cortado arriba y abajo.
   -------------------------------------------------------------------------- */
#ufv-memoria-2526 .ufvm-hito-card:focus-visible {
  outline-offset: -3px;
  /* Mismo sándwich azul/blanco/azul que `--ufvm-foco-claro-halo`, pero hacia
     dentro. El primer box-shadow se pinta encima del segundo. */
  box-shadow: inset 0 0 0 6px var(--ufvm-blanco),
    inset 0 0 0 9px var(--ufvm-foco-claro-outline);
}

/* ===== blocks/dimension-row/block.css ===== */
/* ==========================================================================
   Bloque: dimension-row — fila del acordeón de las 7 dimensiones.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-dimension-row {
  border-bottom: 1px solid var(--ufvm-blanco);
}

/* En el origen la fila abierta lleva el azul SOLO en su borde superior; el
   inferior se queda en la hairline clara común a todo el acordeón. Pintar
   también el de abajo dejaba una regla azul gruesa sobre la fila siguiente. */
#ufv-memoria-2526 .ufvm-dimension-row--abierta {
  border-top: 1px solid var(--ufvm-azul);
}

/* --- Cabecera: el h3 solo aporta semántica, el botón es quien recibe foco --- */
#ufv-memoria-2526 .ufvm-dimension-row__cabecera {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

#ufv-memoria-2526 .ufvm-dimension-row__disparador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 32px;
  align-items: start;
  width: 100%;
  padding: 34px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  /* Los botones no heredan el color: sin esto el disparador se queda en el
     negro del navegador y cualquier texto que no fije el suyo saldría negro
     sobre el fondo oscuro de la sección. */
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#ufv-memoria-2526 .ufvm-dimension-row__numero {
  flex: none;
  width: 40px;
  font-size: var(--ufvm-fs-num-dim);
  color: var(--ufvm-informe-num);
}

/* Número y nombre comparten la columna izquierda, como en el origen. */
#ufv-memoria-2526 .ufvm-dimension-row__identidad {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 24px);
  min-width: 0;
}

#ufv-memoria-2526 .ufvm-dimension-row__nombre {
  min-width: 0;
}

#ufv-memoria-2526 .ufvm-dimension-row__titulo {
  display: block;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h3-dim);
  line-height: var(--ufvm-lh-dim);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-crema);
  overflow-wrap: break-word;
}

#ufv-memoria-2526 .ufvm-dimension-row__identidad .ufvm-pill {
  margin-top: 12px;
}

#ufv-memoria-2526 .ufvm-dimension-row__resumen {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

#ufv-memoria-2526 .ufvm-dimension-row__lead {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ufvm-fs-lead);
  line-height: var(--ufvm-lh-lead);
  color: var(--ufvm-informe-cuerpo);
}

/* --- Flecha ▼ / ▲ --- */
#ufv-memoria-2526 .ufvm-dimension-row__flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-velo-suave);
  color: var(--ufvm-blanco);
  transition: background var(--ufvm-dur-rapida), transform var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-dimension-row__flecha::before {
  content: '↓';
  font-size: 18px;
  line-height: 1;
}

#ufv-memoria-2526 .ufvm-dimension-row--abierta .ufvm-dimension-row__flecha::before {
  content: '↑';
}

#ufv-memoria-2526 .ufvm-dimension-row__disparador:hover .ufvm-dimension-row__flecha {
  background: var(--ufvm-blanco);
  color: var(--ufvm-pill-alumnos-txt);
  transform: scale(1.08);
}

/* --- Panel --- */
#ufv-memoria-2526 .ufvm-dimension-row__panel {
  overflow: hidden;
}

#ufv-memoria-2526[data-ufvm-js] .ufvm-dimension-row__panel {
  max-height: 0;
  opacity: 0;
  transition: max-height 660ms var(--ufvm-ease-suave), opacity 400ms ease;
}

#ufv-memoria-2526[data-ufvm-js] .ufvm-dimension-row--abierta .ufvm-dimension-row__panel {
  max-height: none;
  opacity: 1;
}

#ufv-memoria-2526 .ufvm-dimension-row__contenido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 32px;
  align-items: start;
  padding: 4px 0 0;
}

#ufv-memoria-2526 .ufvm-dimension-row__texto {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* El origen fijaba esta columna en 376px para que acompañase a la foto. Ese
   alto fijo era el que marcaba la altura de la fila, y en las dimensiones con
   menos texto dejaba un vacío grande antes de la tira de cifras: medido a
   1440, hasta 253px en la séptima. Ahora manda el contenido, y el suelo lo
   pone la foto, que es lo que da a la fila una altura pareja entre unas
   dimensiones y otras. */

#ufv-memoria-2526 .ufvm-dimension-row__parrafo {
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-cuerpo);
  color: var(--ufvm-informe-cuerpo);
}

/* La foto tiene su propia proporción (594x382 en el origen): estirarla a la
   altura de la columna de texto cambiaba el encuadre y añadía 132px.

   Su alto baja de 382px a 300: la foto era el elemento más alto de la fila y
   marcaba la altura, de modo que en las dimensiones con menos texto quedaba un
   hueco grande antes de la tira de cifras. Medido a 1440: el texto real va de
   322px (dimensión 1, tres párrafos) a 225 (la 7, dos), así que el vacío bajo
   él llegaba a 253px. Con 300 la fila se acorta y las cifras suben en las
   siete. Es lo máximo que se puede recortar sin que la foto quede por debajo
   del texto más largo. */
#ufv-memoria-2526 .ufvm-dimension-row__foto {
  align-self: start;
  aspect-ratio: 594 / 382;
  max-height: 300px;
  border-radius: var(--ufvm-r-foto-dim);
  overflow: hidden;
}

#ufv-memoria-2526 .ufvm-dimension-row .ufvm-stat-list {
  /* El origen separaba la tira hasta 96px. Se recorta a 72: era el resto del
     vacío que quedaba en todas las dimensiones una vez ajustadas la foto y la
     columna de texto. */
  margin-top: clamp(48px, 5vw, 72px);
  /* Cierra el panel, como el contenedor del origen: sin esto la tira quedaba
     pegada a la regla de la fila siguiente. Va como margen, no como relleno,
     para que el hueco quede FUERA de la caja de la tira. */
  margin-bottom: 46px;
}

/* --- Responsive --- */
@media (max-width: 56.25em) {
  #ufv-memoria-2526 .ufvm-dimension-row__disparador,
  #ufv-memoria-2526 .ufvm-dimension-row__contenido {
    grid-template-columns: minmax(0, 1fr);
  }
  #ufv-memoria-2526 .ufvm-dimension-row__disparador {
    row-gap: 14px;
    padding: 26px 0;
  }
  #ufv-memoria-2526 .ufvm-dimension-row__lead {
    font-size: var(--ufvm-fs-base);
  }
  #ufv-memoria-2526 .ufvm-dimension-row__foto {
    align-self: auto;
    height: clamp(200px, 44vw, 300px);
    min-height: 0;
  }
}

#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-dimension-row__disparador,
#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-dimension-row__contenido {
  grid-template-columns: minmax(0, 1fr);
}

/* ===== blocks/modal-base/block.css ===== */
/* ==========================================================================
   Bloque: modal-base — armazón común de las TRES capas flotantes
   (carta del rector, tarjeta de vídeo y panel "Personaliza tu memoria").

   Aquí vive solo lo que comparten: posicionamiento fijo, el par de estados
   oculto/visible con la transición de entrada de 520ms y el velo.

   ⚠️ Desde el ciclo 001-a11y-audit (decisión del usuario, spec-r01) las TRES
   capas son diálogos modales conductuales: atrapan el foco, inertizan el
   fondo y bloquean el scroll (todo en `js/teclado.js`). La diferencia VISUAL
   se conserva fiel al diseño: solo la carta lleva velo (y conserva su cierre
   por clic en él); vídeo y panel no añaden velo ni ningún cambio visual.
   Por eso el velo (`.ufvm-velo`) es un elemento aparte y solo lo usa la carta.

   `visibility` se conmuta con retardo 0s/520ms para que la capa cerrada quede
   fuera del orden de tabulación en cuanto termina de salir, sin cortar la
   animación de salida (con `display:none` no habría transición).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Capa flotante
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-capa {
  position: fixed;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
  transition:
    transform var(--ufvm-dur-media) var(--ufvm-ease-entrada),
    box-shadow var(--ufvm-dur-sombra) ease,
    visibility 0s linear var(--ufvm-dur-media);
}

/* Ojo: aquí NO se toca `transform`. La posición cerrada la fija cada capa (la
   carta entra un 101%, el vídeo un 100%+60px) con la misma especificidad y más
   abajo en la cascada, así que un `translateX(0)` puesto aquí perdería siempre.
   Cada bloque declara su estado abierto en `.ufvm-<bloque>.ufvm-capa--visible`. */
#ufv-memoria-2526 .ufvm-capa--visible {
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--ufvm-dur-media) var(--ufvm-ease-entrada),
    box-shadow var(--ufvm-dur-sombra) ease,
    visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   Velo — exclusivo de la carta
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-velo {
  position: fixed;
  inset: 0;
  z-index: var(--ufvm-z-scrim);
  background: var(--ufvm-scrim);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity var(--ufvm-dur-velo) ease-out;
}

#ufv-memoria-2526 .ufvm-velo--visible {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Piezas compartidas por carta y panel
   -------------------------------------------------------------------------- */

/* Titular Playfair 27px de "Carta del Rector" y "Personaliza tu memoria". */
#ufv-memoria-2526 .ufvm-capa__titulo {
  margin: 0;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-modal-h3);
  letter-spacing: var(--ufvm-ls-modal-h3);
  color: var(--ufvm-tinta);
}


/* --------------------------------------------------------------------------
   Embebida sin scroll propio (iframe al alto del contenido)
   --------------------------------------------------------------------------
   `position: fixed` se resuelve contra el viewport del iframe, que mide lo que
   mida el iframe entero: el diálogo se abría al principio de la memoria, muy
   lejos de donde el usuario estaba leyendo, y sin forma de enterarse. Pasan a
   posicionarse en el documento, y `teclado.js` los coloca a la altura del
   control que los abrió. */

#ufv-memoria-2526[data-ufvm-embebido] .ufvm-capa,
#ufv-memoria-2526[data-ufvm-embebido] .ufvm-velo {
  position: absolute;
}

/* ===== blocks/hero/block.css ===== */
/* ==========================================================================
   Bloque: hero — portada de la memoria.
   Valores exactos del origen (design-map §2.2, §2.3).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(84px, 12vh, 120px) 40px clamp(112px, 16vh, 150px);
  overflow: hidden;
  perspective: 1200px;
  background: var(--ufvm-grad-hero);
}

#ufv-memoria-2526 .ufvm-hero__fotos {
  position: absolute;
  inset: 0;
}

#ufv-memoria-2526 .ufvm-hero__titulo {
  position: relative;
  margin: 0;
  width: fit-content;
  max-width: min(1000px, 62vw);
  text-align: center;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h1);
  line-height: var(--ufvm-lh-h1);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-blanco);
  text-wrap: balance;
}

#ufv-memoria-2526 .ufvm-hero__titulo em {
  font-style: italic;
}

#ufv-memoria-2526 .ufvm-hero__subtitulo {
  position: relative;
  margin: clamp(16px, 3vh, 34px) 0 0;
  width: fit-content;
  max-width: 520px;
  text-align: center;
  font-size: var(--ufvm-fs-lead);
  line-height: var(--ufvm-lh-lead);
  color: var(--ufvm-hero-sub);
}

#ufv-memoria-2526 .ufvm-hero .ufvm-cta-row {
  margin-top: clamp(24px, 6vh, 72px);
}

/* --- Entrada escalonada del texto (solo con JS) --- */
#ufv-memoria-2526[data-ufvm-js] .ufvm-hero__titulo {
  opacity: 0;
  animation: ufvm-heroText 1.4s var(--ufvm-ease-suave) 1.45s both;
}

#ufv-memoria-2526[data-ufvm-js] .ufvm-hero__subtitulo {
  opacity: 0;
  animation: ufvm-heroText 1.2s var(--ufvm-ease-suave) 1.75s both;
}

#ufv-memoria-2526[data-ufvm-js] .ufvm-hero .ufvm-cta-row {
  opacity: 0;
  animation: ufvm-heroText 1.2s var(--ufvm-ease-suave) 1.95s both;
}

/* --- Landscape de poca altura --- */
@media (orientation: landscape) and (max-height: 35em) {
  #ufv-memoria-2526 .ufvm-hero {
    min-height: 0;
    padding-top: 72px;
    padding-bottom: 84px;
  }
  #ufv-memoria-2526 .ufvm-hero__titulo {
    font-size: clamp(30px, 5.4vw, 46px);
    max-width: 74vw;
  }
}

/* ===== blocks/cifras/block.css ===== */
/* ==========================================================================
   Bloque: cifras — sección "Un año en cifras".
   Valores exactos del origen (`#cifras`, líneas 142-212; design-map §3.2).

   Este fichero solo describe el ESQUELETO de la sección. El aspecto de las
   piezas vive en sus propios bloques (`stat-card`, `mini-bars`, `pill`,
   `caja-panel`, `seccion-titulo`), que se reutilizan en otras secciones.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-cifras {
  padding: 96px var(--ufvm-padding-x) 110px;
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-cifras__interior {
  max-width: var(--ufvm-ancho-max);
  margin: 0 auto;
}

#ufv-memoria-2526 .ufvm-cifras__titulo {
  margin: 0 0 44px;
}

/* Rejilla principal: la tarjeta de alumnado y la columna derecha comparten
   ancho mientras quepan 380px; por debajo caen a una sola columna. */
#ufv-memoria-2526 .ufvm-cifras__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px;
}

/* `auto 1fr`: la tarjeta de empleabilidad ocupa lo que necesita y el dúo de
   tarjetas claras estira hasta igualar la altura de la tarjeta de alumnado. */
#ufv-memoria-2526 .ufvm-cifras__columna {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
}

#ufv-memoria-2526 .ufvm-cifras__duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px;
}

#ufv-memoria-2526 .ufvm-cifras__caja {
  margin-top: 24px;
}

#ufv-memoria-2526 .ufvm-cifras__grafico {
  margin-top: 26px;
}

/* --- Landscape de poca altura: el origen recorta el padding de toda sección --- */
@media (orientation: landscape) and (max-height: 35em) {
  #ufv-memoria-2526 .ufvm-cifras {
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

/* ===== blocks/cita-rector/block.css ===== */
/* ==========================================================================
   Bloque: cita-rector — carta del rector sobre fondo azul claro.
   Valores exactos del origen (`#cita`, líneas 213-235; design-map §3.3).

   Del origen se descarta una sola declaración: `height: 0%` en la sección, un
   residuo del editor de diseño que resuelve a `auto` y no pinta nada.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-cita-rector {
  position: relative;
  padding: 0 var(--ufvm-padding-x);
  background: var(--ufvm-cita-fondo);
  color: var(--ufvm-tinta);
}

/* `align-items: end` es lo que apoya el retrato sobre la línea de base de la
   columna de texto: el recorte del rector "se sienta" en el borde inferior. */
#ufv-memoria-2526 .ufvm-cita-rector__interior {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: end;
  gap: 40px;
  width: 100%;
  max-width: var(--ufvm-ancho-max);
  margin: 0 auto;
}

/* La altura fija es la del diseño: reserva el hueco exacto que ocupa el
   retrato a su lado. Deja de aplicarse en cuanto la rejilla cae a 1 columna. */
#ufv-memoria-2526 .ufvm-cita-rector__columna {
  width: 621px;
  height: 625px;
  max-width: 100%;
  padding: clamp(60px, 9vw, 110px) 0 clamp(60px, 9vw, 130px);
}

#ufv-memoria-2526 .ufvm-cita-rector__figura {
  margin: 0;
}

#ufv-memoria-2526 .ufvm-cita-rector__cita {
  margin: 0;
  max-width: 596px;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-cita);
  line-height: var(--ufvm-lh-cita);
  letter-spacing: var(--ufvm-ls-cita);
  text-wrap: pretty;
}

#ufv-memoria-2526 .ufvm-cita-rector__resalte {
  color: var(--ufvm-azul);
}

#ufv-memoria-2526 .ufvm-cita-rector__firma {
  margin-top: 44px;
}

#ufv-memoria-2526 .ufvm-cita-rector__autor {
  display: block;
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
}

#ufv-memoria-2526 .ufvm-cita-rector__cargo {
  display: block;
  margin-top: 3px;
  font-size: var(--ufvm-fs-base);
  color: var(--ufvm-cita-autor);
}

#ufv-memoria-2526 .ufvm-cita-rector__acciones {
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Retrato
   El margen negativo hace que el recorte rebase la sección por arriba, que es
   como el diseño lo saca del fondo azul.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-cita-rector__retrato {
  position: relative;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 631px;
  aspect-ratio: 631 / 694;
  margin-top: -60px;
}

/* `inset: 0` + `left: 38px`: el diseño desplaza el recorte hacia la derecha
   dentro de su marco (variante `wide` del origen). */
#ufv-memoria-2526 .ufvm-cita-rector__foto {
  position: absolute;
  inset: 0;
  left: 38px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* ≤64em: el origen cambia aquí a `ufv-rector-movil`, que se centra sin
   desplazamiento. Ese recorte no existe todavía, así que se reutiliza el
   mismo retrato con el encuadre móvil. */
@media (max-width: 64em) {
  #ufv-memoria-2526 .ufvm-cita-rector__foto {
    left: 0;
  }
}

/* ≤900px la rejilla ya está en 1 columna: la caja de texto suelta su tamaño
   fijo para no dejar un hueco vacío bajo la cita. */
@media (max-width: 56.25em) {
  #ufv-memoria-2526 .ufvm-cita-rector__columna {
    width: 100%;
    height: auto;
  }
}

@media (orientation: landscape) and (max-height: 35em) {
  #ufv-memoria-2526 .ufvm-cita-rector__columna {
    height: auto;
  }
}

/* ===== blocks/ecosistema/block.css ===== */
/* ==========================================================================
   Bloque: ecosistema — "El ecosistema investigador" (fondo blanco).

   El estilo del grafico NO esta aqui: vive sin tocar en
   `work/assets/graficos/ecosistema.css`, tal y como lo entrega el cliente. Aqui solo
   queda la caja de la seccion.

   El origen escribe `padding: 100px … 110px` y acto seguido lo pisa con
   `padding-bottom: 40px`; aqui se declara directamente el valor efectivo.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-ecosistema {
  padding: 100px var(--ufvm-padding-x) 40px;
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-ecosistema__interior {
  width: 100%;
  max-width: var(--ufvm-ancho-max-eco);
  margin: 0 auto;
  text-align: center;
}

/* El titular se dibuja dentro del SVG del grafico; este solo existe para los
   lectores de pantalla, asi que hereda el `sr-only`. */
#ufv-memoria-2526 .ufvm-ecosistema__titulo {
  margin: 0;
}

/* --- Landscape de poca altura: mismos recortes de padding que el origen --- */
@media (orientation: landscape) and (max-height: 35em) {
  #ufv-memoria-2526 .ufvm-ecosistema {
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

/* --- La entrada del gráfico espera al scroll --------------------------------
   El gráfico marca su panel con `is-in` nada más cargar y con eso arrancan sus
   animaciones, esté donde esté el scroll: cuando el usuario llega a la sección
   ya han terminado. Aquí se retienen hasta que la sección entra, y `block.js`
   marca `data-ufvm-en-vista` para soltarlas.

   Las clases son las suyas (`.bub-in`, `.bar-clip`…): se nombran desde fuera
   porque su fichero no se modifica.

   El `[data-ufvm-js]` de la raíz es deliberado: sin JavaScript nadie pondría la
   marca y el gráfico se quedaría en blanco para siempre.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526[data-ufvm-js] .ufvm-ecosistema:not([data-ufvm-en-vista]) .panel.is-in .bub-in,
#ufv-memoria-2526[data-ufvm-js] .ufvm-ecosistema:not([data-ufvm-en-vista]) .panel.is-in .bar-clip,
#ufv-memoria-2526[data-ufvm-js] .ufvm-ecosistema:not([data-ufvm-en-vista]) .panel.is-in .hbar-clip,
#ufv-memoria-2526[data-ufvm-js] .ufvm-ecosistema:not([data-ufvm-en-vista]) .panel.is-in .bar-txt,
#ufv-memoria-2526[data-ufvm-js] .ufvm-ecosistema:not([data-ufvm-en-vista]) .panel.is-in .eco-map,
#ufv-memoria-2526[data-ufvm-js] .ufvm-ecosistema:not([data-ufvm-en-vista]) .panel.is-in .eco-caption {
  animation: none !important;
}

/* ===== blocks/hitos/block.css ===== */
/* ==========================================================================
   Bloque: hitos — carrusel de 6 hitos + caja `#mapa` con el gráfico de pilares.
   Valores exactos del origen (design-map §3.5, §4.7).

   El origen escribe `padding: 110px … 90px` y acto seguido lo pisa con
   `padding-top: 0px`; aquí se declara directamente el valor efectivo. La
   sección arranca sin aire porque `#ecosistema`, justo encima, ya lo aporta.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-hitos {
  --ufvm-hitos-pad-inferior: 90px;
  padding: 0 var(--ufvm-padding-x) var(--ufvm-hitos-pad-inferior);
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-hitos__interior {
  max-width: var(--ufvm-ancho-max);
  margin: 0 auto;
}

#ufv-memoria-2526 .ufvm-hitos__titulo {
  margin: 0;
  max-width: 620px;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h2);
  line-height: var(--ufvm-lh-titular);
  letter-spacing: var(--ufvm-ls-tight);
}

/* --- Carril ---------------------------------------------------------------
   El carril sangra hasta los bordes de la ventana (`calc(50% - 50vw)`) para
   que las tarjetas puedan salirse del ancho máximo del interior, como en el
   origen.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-hitos__carril-caja {
  margin: 44px calc(50% - 50vw) 40px;
}

/* --- Despliegue de entrada -------------------------------------------------
   El origen (`#hitos-collapse`) arranca el carril plegado y lo abre cuando la
   sección llega a media pantalla, con las flechas entrando 200ms después. Se
   replican sus curvas y tiempos exactos.

   El estado plegado se declara **solo bajo `[data-ufvm-js]`**: sin JavaScript
   el carril queda abierto y todo el contenido se lee (FR-021b). El estado
   abierto es el de arriba, el natural; el plegado es la excepción.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526[data-ufvm-js] .ufvm-hitos__carril-caja {
  overflow: hidden;
  transition:
    max-height 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    margin 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

#ufv-memoria-2526[data-ufvm-js] .ufvm-hitos__controles {
  transition: opacity 600ms ease-out 200ms;
}

#ufv-memoria-2526 .ufvm-hitos[data-ufvm-plegado] .ufvm-hitos__carril-caja {
  margin: 0 calc(50% - 50vw);
  max-height: 0;
  opacity: 0;
  transform: translateY(28px) scale(0.985);
}

#ufv-memoria-2526 .ufvm-hitos[data-ufvm-plegado] .ufvm-hitos__controles {
  opacity: 0;
}

/* Apertura inmediata: sin transición y sin tope de altura. Lo usa JS cuando el
   usuario ha pedido menos movimiento o ha pulsado el botón de pausa. */
#ufv-memoria-2526 .ufvm-hitos[data-ufvm-sin-transicion] .ufvm-hitos__carril-caja,
#ufv-memoria-2526 .ufvm-hitos[data-ufvm-sin-transicion] .ufvm-hitos__controles {
  transition: none;
}

/* Red de seguridad: pedir menos movimiento no puede dejar el carril plegado y
   por tanto invisible. Misma regla que en base.css para los reveals. */
@media (prefers-reduced-motion: reduce) {
  #ufv-memoria-2526 .ufvm-hitos[data-ufvm-plegado] .ufvm-hitos__carril-caja {
    margin: 44px calc(50% - 50vw) 40px;
    max-height: none;
    opacity: 1;
    transform: none;
  }
  #ufv-memoria-2526 .ufvm-hitos[data-ufvm-plegado] .ufvm-hitos__controles {
    opacity: 1;
  }
}

#ufv-memoria-2526 .ufvm-hitos__carril {
  display: flex;
  gap: var(--ufvm-hito-gap);
  padding: 0 40px 22px;
  overflow-x: auto;
  scroll-padding-left: 40px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* --- Pie: controles + frase de cierre --- */

#ufv-memoria-2526 .ufvm-hitos__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ufvm-hito-gap);
  margin-top: 12px;
}

#ufv-memoria-2526 .ufvm-hitos__controles {
  display: flex;
  align-items: center;
  gap: 12px;
}

#ufv-memoria-2526 .ufvm-hitos__cierre {
  margin: 0;
  max-width: 620px;
  text-align: left;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h2);
  line-height: var(--ufvm-lh-titular);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-tinta);
}

/* --- Mapa: caja de tamaño fijo con el gráfico de pilares --- */

#ufv-memoria-2526 .ufvm-hitos__mapa {
  position: relative;
  /* Sin padding ni alto mínimo: el gráfico llega a los cuatro bordes.

     Traía `padding: 0 40px` y `min-height: 706px`, y como el gráfico del
     cliente pinta su propio fondo, por ese margen asomaba el degradado de la
     caja: una franja azul de 40px a cada lado y, en móvil, 150px por debajo.
     Ahora la caja se ciñe al gráfico y el degradado solo se ve si algún día
     falta. */
  overflow: hidden;
  background: var(--ufvm-grad-mapa);

  /* A sangre: sale del ancho máximo del interior hasta los bordes de la
     ventana, con el mismo recurso que ya usa el carril. Sin esquinas
     redondeadas y absorbiendo el padding inferior de la sección, el degradado
     entronca con el bloque oscuro siguiente sin franja blanca en medio. */
  margin: 90px calc(50% - 50vw) calc(-1 * var(--ufvm-hitos-pad-inferior));
  border-radius: 0;
}



/* --- ≤760px: el pie se apila y la frase se alinea a la derecha --- */
@media (max-width: 47.5em) {
  #ufv-memoria-2526 .ufvm-hitos__pie {
    flex-direction: column;
    align-items: flex-end;
  }
  #ufv-memoria-2526 .ufvm-hitos__cierre {
    text-align: right;
  }
}

#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-hitos__pie {
  flex-direction: column;
  align-items: flex-end;
}
#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-hitos__cierre {
  text-align: right;
}

/* --- Landscape de poca altura: mismos recortes de padding que el origen --- */
@media (orientation: landscape) and (max-height: 35em) {
  #ufv-memoria-2526 .ufvm-hitos {
    --ufvm-hitos-pad-inferior: 56px;
    padding-top: 48px;
  }
}

/* ===== blocks/dimensiones/block.css ===== */
/* ==========================================================================
   Bloque: dimensiones — sección #informe.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-dimensiones {
  padding: 110px var(--ufvm-padding-x) 80px;
  background: var(--ufvm-grad-informe);
}

#ufv-memoria-2526 .ufvm-dimensiones__interior {
  position: relative;
  max-width: var(--ufvm-ancho-max);
  margin: 0 auto;
}

/* --- Intro a dos columnas --- */
#ufv-memoria-2526 .ufvm-dimensiones__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 32px;
  align-items: start;
}

#ufv-memoria-2526 .ufvm-dimensiones__intro-texto {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#ufv-memoria-2526 .ufvm-dimensiones__intro-texto p {
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-cuerpo);
  color: var(--ufvm-informe-cuerpo);
}

#ufv-memoria-2526 .ufvm-dimensiones__intro-texto strong {
  font-weight: var(--ufvm-peso-semi);
  color: var(--ufvm-blanco);
}

/* --- Rótulo "Las 7 dimensiones de la UFV" --- */
#ufv-memoria-2526 .ufvm-dimensiones__rotulo {
  margin: 96px 0 48px;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h2-dims);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-crema);
}

/* --- Lista de dimensiones --- */
#ufv-memoria-2526 .ufvm-dimensiones__lista {
  border-bottom: 1px solid var(--ufvm-blanco);
}

@media (max-width: 56.25em) {
  #ufv-memoria-2526 .ufvm-dimensiones__intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
  }
}

#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-dimensiones__intro {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 26px;
}

/* ==========================================================================
   Caja "Generar conocimiento con propósito" — cierre de la sección #informe.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-investigacion {
  margin: 96px 0 0;
}

#ufv-memoria-2526 .ufvm-investigacion__titulo {
  margin: 0 0 34px;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h4-caja);
  letter-spacing: var(--ufvm-ls-tight);
  color: var(--ufvm-crema);
}

#ufv-memoria-2526 .ufvm-investigacion__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 32px;
  align-items: start;
}

#ufv-memoria-2526 .ufvm-investigacion__texto {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#ufv-memoria-2526 .ufvm-investigacion__lead {
  font-size: var(--ufvm-fs-lead);
  line-height: 1.4;
  color: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-investigacion__parrafo {
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-cuerpo);
  color: var(--ufvm-informe-cuerpo);
}

/* El origen deja aire entre "Primera Patente Europea" y su pie: la cifra ocupa
   una caja de 93px y el pie empieza después, no pegado. */
#ufv-memoria-2526 .ufvm-investigacion__destacado {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#ufv-memoria-2526 .ufvm-investigacion__big {
  max-width: 420px;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-patente);
  line-height: var(--ufvm-lh-informe);
  letter-spacing: var(--ufvm-ls-xtight);
  color: var(--ufvm-azul);
}

#ufv-memoria-2526 .ufvm-investigacion__big-label {
  max-width: 220px;
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  line-height: var(--ufvm-lh-ajustado);
  color: var(--ufvm-blanco);
}

/* Rejilla de datos: 2 columnas, alineada al pie de la columna izquierda. */
#ufv-memoria-2526 .ufvm-investigacion__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 30px;
  margin-top: 70px;
  align-self: flex-end;
}

#ufv-memoria-2526 .ufvm-investigacion__valor {
  font-size: var(--ufvm-fs-dato);
  color: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-investigacion__etiqueta {
  margin-top: 4px;
  font-size: var(--ufvm-fs-base);
  color: var(--ufvm-informe-stat-label);
}

@media (max-width: 56.25em) {
  #ufv-memoria-2526 .ufvm-investigacion__cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
  #ufv-memoria-2526 .ufvm-investigacion__datos {
    margin-top: 0;
  }
}

#ufv-memoria-2526[data-ufvm-zoom-movil] .ufvm-investigacion__cuerpo {
  grid-template-columns: minmax(0, 1fr);
}

/* ===== blocks/cierre-memoria/block.css ===== */
/* ==========================================================================
   Bloque: cierre-memoria — CTA final `#memoria` sobre gradiente navy.
   Rejilla de dos columnas: texto + marco rotado con la portada.
   Valores exactos del origen (design-map §3.7, §7.7).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-cierre-memoria {
  padding: 130px var(--ufvm-padding-x) 140px;
  background: var(--ufvm-grad-memoria);
}

/* `auto-fit` con `minmax(min(100%, 380px), 1fr)`: dos columnas mientras quepan
   380px cada una y una sola en cuanto no. No hace falta media query. */
#ufv-memoria-2526 .ufvm-cierre-memoria__interior {
  max-width: var(--ufvm-ancho-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 60px;
  align-items: center;
}

#ufv-memoria-2526 .ufvm-cierre-memoria__titulo {
  margin: 0;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-h2);
  line-height: var(--ufvm-lh-informe);
  letter-spacing: var(--ufvm-ls-informe);
  color: var(--ufvm-crema);
}

#ufv-memoria-2526 .ufvm-cierre-memoria__parrafos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
  margin-top: 40px;
}

#ufv-memoria-2526 .ufvm-cierre-memoria__parrafos p {
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-cuerpo);
  color: var(--ufvm-informe-cuerpo);
}

#ufv-memoria-2526 .ufvm-cierre-memoria__acciones {
  margin-top: 42px;
}

#ufv-memoria-2526 .ufvm-cierre-memoria__figura {
  display: flex;
  justify-content: center;
}

/* El marco es lo que se ve rotado: el fondo navy asoma como passe-partout
   mientras la portada carga, y el recorte redondeado se hereda del marco. */
#ufv-memoria-2526 .ufvm-cierre-memoria__marco {
  position: relative;
  width: min(520px, 84vw);
  aspect-ratio: 16 / 9;
  border-radius: var(--ufvm-r-tarjeta);
  overflow: hidden;
  background: var(--ufvm-portada-marco);
  box-shadow: var(--ufvm-sh-portada);
  transform: rotate(7deg);
}

/* --- Landscape de poca altura: mismos recortes de padding que el origen --- */
@media (orientation: landscape) and (max-height: 35em) {
  #ufv-memoria-2526 .ufvm-cierre-memoria {
    padding-top: 48px;
    padding-bottom: 56px;
  }
}

/* ===== blocks/anim-toggle/block.css ===== */
/* ==========================================================================
   Bloque: anim-toggle — pausa/reanuda las animaciones del hero.
   ========================================================================== */

#ufv-memoria-2526 .ufvm-anim-toggle {
  position: absolute;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 26px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-anim-btn-bg);
  color: var(--ufvm-blanco);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-pill);
  font-weight: var(--ufvm-peso-semi);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-anim-toggle:hover {
  background: var(--ufvm-anim-btn-hover);
}

#ufv-memoria-2526 .ufvm-anim-toggle:active {
  transform: scale(0.98);
}

/* Sin JS el botón no haría nada: no se muestra. */
#ufv-memoria-2526:not([data-ufvm-js]) .ufvm-anim-toggle {
  display: none;
}

/* El envoltorio del icono es una caja de línea de 18px y el SVG mide 14, así
   que anclado arriba quedaba 2px por encima del centro del texto. Centrarlo
   dentro de su caja lo alinea sin recurrir a un desplazamiento a ojo. */
#ufv-memoria-2526 .ufvm-anim-toggle__icono {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== blocks/nav-flotante/block.css ===== */
/* ==========================================================================
   Bloque: nav-flotante — píldora inferior centrada con las secciones.

   Valores exactos del origen (`navStyle` / `navListStyle` del `.dc.html`).
   Aparece tras 80px de scroll (`navShown`, lo pone `block.js`) y marca la
   sección visible con fondo blanco + `aria-current`.

   Escritorio: píldora horizontal centrada.
   Móvil (≤47.5em): botón circular 56×56 abajo a la derecha que despliega la
   lista en vertical. En escritorio el botón no se pinta (`display:none`), así
   que tampoco es tabulable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-nav-flotante {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 3vw, 28px);
  z-index: var(--ufvm-z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  /* Oculta también para el teclado y el árbol de accesibilidad (001-a11y-audit,
     H-02): con solo `opacity: 0` sus enlaces seguían recibiendo foco. El
     retardo de `visibility` respeta la transición de salida, como en
     modal-base: la nav desaparece visualmente igual que antes. */
  visibility: hidden;
  transition:
    opacity var(--ufvm-dur-nav) var(--ufvm-ease-entrada),
    transform var(--ufvm-dur-nav) var(--ufvm-ease-entrada),
    visibility 0s linear var(--ufvm-dur-nav);
}

#ufv-memoria-2526 .ufvm-nav-flotante--visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--ufvm-dur-nav) var(--ufvm-ease-entrada),
    transform var(--ufvm-dur-nav) var(--ufvm-ease-entrada),
    visibility 0s linear 0s;
  animation: ufvm-navIn var(--ufvm-dur-nav) var(--ufvm-ease-entrada) both;
}

/* --------------------------------------------------------------------------
   Lista (píldora)
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-nav-flotante__lista {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.6vw, 6px);
  max-width: min(94vw, 980px);
  margin: 0;
  padding: clamp(6px, 1vw, 9px);
  overflow-x: auto;
  list-style: none;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-nav-fondo);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ufvm-sh-nav);
}

#ufv-memoria-2526 .ufvm-nav-flotante__item {
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Enlaces
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-nav-flotante__enlace {
  display: block;
  padding: 13px 22px;
  border-radius: var(--ufvm-r-pill);
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  /* Sin `line-height`: el origen usa el normal del navegador y de ahí salen los
     47px del enlace y los 65px de alto de la píldora. */
  white-space: nowrap;
  color: var(--ufvm-blanco);
  background: transparent;
  transition:
    background var(--ufvm-dur-rapida) var(--ufvm-ease-entrada),
    color var(--ufvm-dur-rapida) var(--ufvm-ease-entrada);
}

#ufv-memoria-2526 .ufvm-nav-flotante__enlace:hover {
  background: var(--ufvm-velo-hover);
  color: var(--ufvm-blanco);
  text-decoration: none;
}

#ufv-memoria-2526 .ufvm-nav-flotante__enlace:active {
  transform: scale(0.97);
}

/* Sección visible. El origen la pinta en blanco sobre el navy de la píldora. */
#ufv-memoria-2526 .ufvm-nav-flotante__enlace[aria-current='true'],
#ufv-memoria-2526 .ufvm-nav-flotante__enlace[aria-current='true']:hover {
  background: var(--ufvm-blanco);
  color: var(--ufvm-nav-fondo);
}

/* --------------------------------------------------------------------------
   CTA de descarga
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-nav-flotante__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;  /* mismo padding que el resto de enlaces del nav */
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  line-height: var(--ufvm-lh-uno);
  white-space: nowrap;
  transition: box-shadow var(--ufvm-dur-rapida) var(--ufvm-ease-entrada);
}

#ufv-memoria-2526 .ufvm-nav-flotante__cta:hover {
  box-shadow: var(--ufvm-sh-nav-cta);
  color: var(--ufvm-tinta);
  text-decoration: none;
}

#ufv-memoria-2526 .ufvm-nav-flotante__cta:active {
  transform: scale(0.97);
}

/* Sobre fondo blanco el anillo blanco por defecto sería invisible: en estas
   dos piezas se conmuta al par claro (base.css, desviación f / FR-017b). */
#ufv-memoria-2526 .ufvm-nav-flotante__cta:focus-visible,
#ufv-memoria-2526 .ufvm-nav-flotante__enlace[aria-current='true']:focus-visible {
  outline-color: var(--ufvm-foco-claro-outline);
  box-shadow: var(--ufvm-foco-claro-halo);
}

/* --------------------------------------------------------------------------
   Botón circular (solo móvil)
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-nav-flotante__fab {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ufvm-tam-fab);
  height: var(--ufvm-tam-fab);
  padding: 0;
  border: 0;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-nav-fondo);
  color: var(--ufvm-blanco);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-fab);
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  box-shadow: var(--ufvm-sh-fab);
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 47.5em) {
  #ufv-memoria-2526 .ufvm-nav-flotante {
    left: auto;
    right: 16px;
    bottom: 18px;
    flex-direction: column-reverse;
    align-items: flex-end;
    transform: none;
  }

  /* `ufvm-navIn` desplaza en X un 50%: solo vale para la píldora centrada. */
  #ufv-memoria-2526 .ufvm-nav-flotante--visible {
    animation: none;
  }

  #ufv-memoria-2526 .ufvm-nav-flotante__fab {
    display: flex;
  }

  #ufv-memoria-2526 .ufvm-nav-flotante__lista {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: min(86vw, 340px);
    max-width: none;
    max-height: 56vh;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: var(--ufvm-r-caja-claro);
    box-shadow: var(--ufvm-sh-nav-movil);
  }

  #ufv-memoria-2526 .ufvm-nav-flotante--abierto .ufvm-nav-flotante__lista {
    display: flex;
  }

  #ufv-memoria-2526 .ufvm-nav-flotante__cta {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Sin JavaScript (FR-021b)
   `navShown` nunca llega, y en móvil el botón no podría desplegar nada: se
   muestra la lista directamente para que la navegación siga sirviendo.
   -------------------------------------------------------------------------- */

#ufv-memoria-2526:not([data-ufvm-js]) .ufvm-nav-flotante {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 47.5em) {
  #ufv-memoria-2526:not([data-ufvm-js]) .ufvm-nav-flotante__fab {
    display: none;
  }

  #ufv-memoria-2526:not([data-ufvm-js]) .ufvm-nav-flotante__lista {
    display: flex;
  }
}

/* ===== blocks/modal-carta/block.css ===== */
/* ==========================================================================
   Bloque: modal-carta — drawer derecho con la carta del rector.

   Extiende `modal-base` (`.ufvm-capa`): de ahí salen el posicionamiento fijo,
   los estados oculto/visible y la transición de 520ms. Aquí solo va lo propio
   del drawer: ancho 548px, altura completa, entrada desde la derecha
   (`translateX(101%) → 0`) y la tipografía de la carta.

   Valores exactos del origen (`letterStyle` del `.dc.html`).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-modal-carta {
  top: 0;
  right: 0;
  z-index: var(--ufvm-z-carta);
  width: var(--ufvm-w-carta);
  max-width: 100vw;
  height: 100vh;
  background: var(--ufvm-blanco);
  transform: translateX(101%);
}

#ufv-memoria-2526 .ufvm-modal-carta.ufvm-capa--visible {
  transform: translateX(0);
  box-shadow: var(--ufvm-sh-carta);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-carta__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: none;
  gap: 20px;
  padding: 28px 30px 20px;
  border-bottom: 1px solid var(--ufvm-modal-borde);
}

#ufv-memoria-2526 .ufvm-modal-carta__meta {
  margin-top: 6px;
  font-size: var(--ufvm-fs-base);
  color: var(--ufvm-modal-meta);
}

#ufv-memoria-2526 .ufvm-modal-carta__cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-cerrar-bg);
  color: var(--ufvm-cerrar-txt);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida) var(--ufvm-ease-entrada);
}

#ufv-memoria-2526 .ufvm-modal-carta__cerrar:hover {
  background: var(--ufvm-cerrar-bg-hover);
}

#ufv-memoria-2526 .ufvm-modal-carta__cerrar:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   Cuerpo
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-carta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 30px 60px;
  overflow-y: auto;
  font-size: var(--ufvm-fs-carta);
  line-height: var(--ufvm-lh-carta);
  color: var(--ufvm-modal-cuerpo);
}

#ufv-memoria-2526 .ufvm-modal-carta__cuerpo strong {
  font-weight: var(--ufvm-peso-semi);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-modal-carta__firma {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--ufvm-modal-borde);
}

#ufv-memoria-2526 .ufvm-modal-carta__firmante {
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-modal-carta__cargo {
  margin-top: 3px;
  font-size: var(--ufvm-fs-base);
  color: var(--ufvm-modal-sec);
}

/* --------------------------------------------------------------------------
   Pantallas apaisadas y bajas (móvil en horizontal)
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 560px) {
  #ufv-memoria-2526 .ufvm-modal-carta {
    width: min(100vw, var(--ufvm-w-carta-apaisado));
  }
}

/* ===== blocks/modal-video/block.css ===== */
/* ==========================================================================
   Bloque: modal-video — tarjeta flotante del reproductor (abajo a la derecha).

   ⚠️ Ver el aviso de `block.html`: la maqueta no es publicable hasta que llegue
   el vídeo real con subtítulos y transcripción (FR-023, WCAG 1.2.1 / 1.2.2).

   NO es una capa modal: no lleva velo, no bloquea el fondo y no atrapa el foco
   (sí cierra con Escape). Extiende `modal-base` (`.ufvm-capa`) solo para el
   posicionamiento fijo y el par oculto/visible.

   Valores exactos del origen (`videoStyle` y los estilos inline del `.dc.html`).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-modal-video {
  right: 28px;
  bottom: 108px;
  z-index: var(--ufvm-z-video);
  /* `row-reverse`: la tarjeta queda a la derecha y la transcripción, a su izquierda. */
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 14px;
  max-width: calc(100vw - 32px);
  transform: translateX(calc(100% + 60px));
}

#ufv-memoria-2526 .ufvm-modal-video.ufvm-capa--visible {
  transform: translateX(0);
}

#ufv-memoria-2526 .ufvm-modal-video__tarjeta {
  position: relative;
  flex: none;
  width: var(--ufvm-w-video);
  max-width: calc(100vw - 32px);
  border-radius: var(--ufvm-r-video);
  background: var(--ufvm-blanco);
  box-shadow: var(--ufvm-sh-video);
}

/* --------------------------------------------------------------------------
   Escenario
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-video__escenario {
  position: relative;
  height: var(--ufvm-h-video-stage);
  overflow: hidden;
  border-radius: var(--ufvm-r-video) var(--ufvm-r-video) 0 0;
  background: var(--ufvm-grad-video);
}

#ufv-memoria-2526 .ufvm-modal-video__acciones {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 10px;
}

#ufv-memoria-2526 .ufvm-modal-video__accion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-velo-btn);
  color: var(--ufvm-blanco);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-modal-video__accion:hover {
  background: var(--ufvm-velo-btn-hover);
}

#ufv-memoria-2526 .ufvm-modal-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-video-play-bg);
  color: var(--ufvm-tinta);
  font-family: var(--ufvm-sans);
  font-size: 24px;
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--ufvm-dur-rapida) var(--ufvm-ease-entrada);
}

#ufv-memoria-2526 .ufvm-modal-video__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

/* --------------------------------------------------------------------------
   Cuerpo
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-video__cuerpo {
  padding: 22px 24px 24px;
  border-radius: 0 0 var(--ufvm-r-video) var(--ufvm-r-video);
  background: var(--ufvm-blanco);
}

#ufv-memoria-2526 .ufvm-modal-video__titulo {
  margin: 0;
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-lead);
  font-weight: var(--ufvm-peso-normal);
  color: var(--ufvm-tinta);
}

/* Barra de progreso — decorativa hasta que exista el vídeo real, pero ya
   expuesta como `progressbar` para que no sea un adorno mudo. */
#ufv-memoria-2526 .ufvm-modal-video__progreso {
  display: flex;
  height: 5px;
  margin-top: 16px;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-video-track);
}

#ufv-memoria-2526 .ufvm-modal-video__avance {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 14%;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-azul);
}

#ufv-memoria-2526 .ufvm-modal-video__punto {
  width: 9px;
  height: 9px;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-azul);
}

/* --------------------------------------------------------------------------
   Controles
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-video__controles {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

#ufv-memoria-2526 .ufvm-modal-video__play-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-video-play-mini);
  color: var(--ufvm-blanco);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-modal-video__play-mini:hover {
  background: var(--ufvm-video-play-mini-hov);
}

#ufv-memoria-2526 .ufvm-modal-video__tiempo {
  font-size: var(--ufvm-fs-base);
  color: var(--ufvm-modal-cuerpo);
}

#ufv-memoria-2526 .ufvm-modal-video__derecha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Volumen
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-video__volumen {
  position: relative;
  display: flex;
}

/* Cerrado se retira del árbol: así tampoco es tabulable ni sin JavaScript. */
#ufv-memoria-2526 .ufvm-modal-video__popover {
  position: absolute;
  left: 50%;
  bottom: 50px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 1px solid var(--ufvm-popover-borde);
  border-radius: var(--ufvm-r-video);
  background: var(--ufvm-blanco);
  box-shadow: var(--ufvm-sh-popover);
  transform: translateX(-50%);
}

#ufv-memoria-2526 .ufvm-modal-video__popover--abierto {
  display: flex;
}

#ufv-memoria-2526 .ufvm-modal-video__rango {
  width: 108px;
  accent-color: var(--ufvm-video-play-mini);
  cursor: pointer;
}

#ufv-memoria-2526 .ufvm-modal-video__mute {
  padding: 6px 12px;
  border: 1px solid var(--ufvm-ctrl-borde);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-pill);
  font-weight: var(--ufvm-peso-semi);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-modal-video__mute:hover {
  background: var(--ufvm-ctrl-hover-bg);
}

#ufv-memoria-2526 .ufvm-modal-video__control {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ufvm-ctrl-borde);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
  cursor: pointer;
  transition:
    background var(--ufvm-dur-rapida) var(--ufvm-ease-entrada),
    border-color var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-modal-video__control:hover {
  border-color: var(--ufvm-azul);
  background: var(--ufvm-ctrl-hover-bg);
}

/* --------------------------------------------------------------------------
   Botón de transcripción
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-video__transcripcion-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ufvm-ctrl-borde);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-video-transcript);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--ufvm-dur-rapida) var(--ufvm-ease-entrada),
    color var(--ufvm-dur-rapida),
    border-color var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-modal-video__transcripcion-btn[aria-expanded='true'] {
  border-color: var(--ufvm-video-transcript);
  background: var(--ufvm-video-transcript);
  color: var(--ufvm-blanco);
}

/* --------------------------------------------------------------------------
   Panel de transcripción
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-modal-video__transcripcion {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 14px);
  display: none;
  width: var(--ufvm-w-transcript);
  max-width: calc(100vw - 32px);
  padding: 22px 24px;
  overflow-y: auto;
  border-radius: var(--ufvm-r-video);
  background: var(--ufvm-blanco);
  box-shadow: var(--ufvm-sh-video);
}

#ufv-memoria-2526 .ufvm-modal-video__transcripcion--abierta {
  display: block;
}

#ufv-memoria-2526 .ufvm-modal-video__transcripcion-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#ufv-memoria-2526 .ufvm-modal-video__transcripcion-titulo {
  margin: 0;
  font-family: var(--ufvm-serif);
  font-weight: var(--ufvm-peso-normal);
  font-size: var(--ufvm-fs-transcript-h3);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-modal-video__transcripcion-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ufvm-ctrl-borde);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-tinta);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-modal-video__transcripcion-cerrar:hover {
  background: var(--ufvm-ctrl-hover-bg);
}

#ufv-memoria-2526 .ufvm-modal-video__transcripcion-texto {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-cuerpo);
  color: var(--ufvm-modal-cuerpo);
}

/* --------------------------------------------------------------------------
   Móvil: la tarjeta ocupa el ancho y la transcripción se superpone a ella
   -------------------------------------------------------------------------- */

@media (max-width: 47.5em) {
  #ufv-memoria-2526 .ufvm-modal-video {
    left: 16px;
    right: 16px;
    bottom: 96px;
    max-width: none;
  }

  #ufv-memoria-2526 .ufvm-modal-video__tarjeta {
    width: 100%;
    max-width: none;
  }

  #ufv-memoria-2526 .ufvm-modal-video__transcripcion {
    inset: 0;
    width: auto;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Pantallas apaisadas y bajas
   -------------------------------------------------------------------------- */

@media (orientation: landscape) and (max-height: 560px) {
  #ufv-memoria-2526 .ufvm-modal-video {
    right: 12px;
    bottom: 84px;
  }

  #ufv-memoria-2526 .ufvm-modal-video__tarjeta {
    width: var(--ufvm-w-video-apaisado);
  }

  #ufv-memoria-2526 .ufvm-modal-video__escenario {
    height: var(--ufvm-h-video-stage-apaisado);
  }
}

/* ===== blocks/panel-personalizar/block.css ===== */
/* ==========================================================================
   Bloque: panel-personalizar — drawer inferior-derecho de selección de capítulos.

   Extiende `modal-base` (`.ufvm-capa`). NO es una capa modal: sin velo, sin
   bloqueo del fondo y sin trampa de foco.

   Valores exactos del origen (`panelStyle`, `trackStyle`, `knobStyle`).
   ========================================================================== */

#ufv-memoria-2526 .ufvm-panel-personalizar {
  right: 0;
  bottom: 0;
  z-index: var(--ufvm-z-panel);
  width: var(--ufvm-w-panel);
  max-width: 100vw;
  max-height: 82vh;
  border-radius: var(--ufvm-r-panel) 0 0 0;
  background: var(--ufvm-blanco);
  transform: translateX(101%);
}

#ufv-memoria-2526 .ufvm-panel-personalizar.ufvm-capa--visible {
  transform: translateX(0);
  box-shadow: var(--ufvm-sh-panel);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-panel-personalizar__cabecera {
  flex: none;
  padding: 26px 28px 18px;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__fila-titulo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ufvm-azul);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  color: var(--ufvm-azul);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-uno);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida) var(--ufvm-ease-entrada);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__cerrar:hover {
  background: var(--ufvm-ctrl-hover-bg);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__lead {
  max-width: 350px;
  margin-top: 12px;
  font-size: var(--ufvm-fs-base);
  line-height: var(--ufvm-lh-medio);
  color: var(--ufvm-modal-sec);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__accion {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ufvm-azul);
  font-family: var(--ufvm-sans);
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  cursor: pointer;
  transition: color var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__accion:hover {
  text-decoration: underline;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__accion--sec {
  color: var(--ufvm-modal-sec);
  font-weight: var(--ufvm-peso-normal);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__accion--sec:hover {
  color: var(--ufvm-tinta);
  text-decoration: none;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__separador {
  width: 1px;
  height: 16px;
  background: var(--ufvm-panel-sep);
}

/* --------------------------------------------------------------------------
   Lista de capítulos
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-panel-personalizar__lista {
  /* `min-height: 0` es lo que permite que este hijo flexible encoja y sea el
     que hace scroll, en vez de desbordar el drawer. */
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border-top: 1px solid var(--ufvm-modal-borde);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__capitulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 28px;
  border-bottom: 1px solid var(--ufvm-panel-fila-borde);
  cursor: pointer;
  transition: background var(--ufvm-dur-rapida);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__capitulo:hover {
  background: var(--ufvm-panel-fila-hover);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__nombre {
  display: block;
  font-size: var(--ufvm-fs-base);
  font-weight: var(--ufvm-peso-semi);
  color: var(--ufvm-tinta);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__epigrafe {
  display: block;
  margin-top: 3px;
  font-size: var(--ufvm-fs-pill);
  letter-spacing: var(--ufvm-ls-tag);
  color: var(--ufvm-modal-meta);
}

/* --------------------------------------------------------------------------
   Conmutador
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-panel-personalizar__track {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  width: 46px;
  height: 26px;
  padding: 3px;
  border: 1px solid var(--ufvm-switch-off-borde);
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-switch-off-track);
  transition: background var(--ufvm-dur-rapida) var(--ufvm-ease-entrada);
}

/* El origen desliza la bolita cambiando la justificación, no con `transform`. */
#ufv-memoria-2526 .ufvm-panel-personalizar__capitulo[aria-checked='true'] .ufvm-panel-personalizar__track {
  justify-content: flex-end;
  border-color: var(--ufvm-switch-on);
  background: var(--ufvm-switch-on);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__knob {
  width: 20px;
  height: 20px;
  border-radius: var(--ufvm-r-pill);
  background: var(--ufvm-blanco);
  box-shadow: var(--ufvm-sh-knob);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

#ufv-memoria-2526 .ufvm-panel-personalizar__pie {
  flex: none;
  padding: 18px 28px 22px;
  border-top: 1px solid var(--ufvm-modal-borde);
  background: var(--ufvm-panel-footer);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__resumen {
  text-align: center;
  font-size: var(--ufvm-fs-base);
  color: var(--ufvm-modal-sec);
}

/* Vacío no ocupa: así el pie conserva la altura de una línea del diseño. */
#ufv-memoria-2526 .ufvm-panel-personalizar__aviso:empty {
  display: none;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__aviso {
  margin-top: 8px;
  text-align: center;
  font-size: var(--ufvm-fs-pill);
  line-height: var(--ufvm-lh-medio);
  color: var(--ufvm-modal-sec);
}

/* Sin mensaje no debe ocupar sitio (ni dejar un hueco bajo el resumen). */
#ufv-memoria-2526 .ufvm-panel-personalizar__aviso:empty {
  display: none;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__descarga {
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  /* El origen redondea este botón a 12px, no a los 8px del átomo. */
  border-radius: var(--ufvm-r-descarga);
}

#ufv-memoria-2526 .ufvm-panel-personalizar__descarga:hover {
  text-decoration: none;
}

#ufv-memoria-2526 .ufvm-panel-personalizar__descarga:not([aria-disabled='true']):active {
  transform: scale(0.98);
}