/* =========================================================================
   Estilos · Portfolio Charo Fernández / @yalocin
   Mobile-first. Funciona íntegro sin JavaScript.
   Regla cromática 70/20/7/3: 70% blanco y lila en superficies; 20% tinta,
   azul y morado; 7% colores de área en chips; 3% magenta y amarillo,
   reservados al foco, la estrella y un CTA de acento por página.
   ========================================================================= */

/* ---------- Reset breve ---------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Todo desplazamiento por foco o ancla respeta la cabecera pegajosa,
     tenga o no id el elemento enfocado (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    /* sin retardo: con él, lo escalonado quedaría invisible ese instante */
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Las mismas preferencias pueden activarse desde el control del sitio,
   con independencia de la configuración del sistema operativo. */
html[data-a11y-movimiento] {
  scroll-behavior: auto;
}

html[data-a11y-movimiento] *,
html[data-a11y-movimiento] *::before,
html[data-a11y-movimiento] *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}

html[data-a11y-movimiento] .revelable {
  opacity: 1;
  transform: none;
}

html[data-a11y-movimiento] .entidades__pista {
  animation: none !important;
}

/* Sin movimiento la banda queda quieta al inicio: dejarla recorrer a mano
   para poder ver todos los logos, no solo los primeros. */
html[data-a11y-movimiento] .entidades__ventana {
  overflow-x: auto;
}

html[data-a11y-movimiento] .entidades__control {
  display: none;
}

html[data-a11y-texto] {
  font-size: 112.5%;
}

html[data-a11y-contraste] {
  --tinta: #000000;
  --gris-texto: #252525;
  --azul: #00478f;
  --morado: #40377d;
  --magenta: #a80058;
  --borde: #646b75;
  --borde-control: #34383f;
  --fondo-logo: #ffffff;
  --lila: #efedf4;
  --mancha-lila: #e5e0f3;
  --mancha-azul: #dce9f5;
  --mancha-amarilla: #fff0a8;
  --fantasma: #d3cfde;
  --sombra-suave: 0 2px 12px rgba(0, 0, 0, 0.18);
  --sombra-alzada: 0 6px 24px rgba(0, 0, 0, 0.28);
}

/* Transición suave entre páginas (multipágina que se siente aplicación).
   Los navegadores sin View Transitions la ignoran sin más. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* El texto seleccionado también es de la marca */
::selection {
  background: var(--amarillo-estrella);
  color: var(--tinta);
}

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

input,
button,
textarea,
select {
  font: inherit;
}

/* ---------- Base ---------- */

body {
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* el contenido lo escribe una editora: ninguna palabra kilométrica
     (una URL pegada, una errata) debe poder desbordar la página */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titular);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); font-weight: 600; }
h3 { font-size: var(--texto-l); font-weight: 600; }

p,
li {
  max-width: var(--ancho-prosa);
}

a {
  color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.3s ease, text-decoration-thickness 0.3s ease;
}

a:hover {
  color: var(--morado);
  text-decoration-thickness: 2px;
}

/* Anclas visibles bajo la cabecera pegajosa (WCAG 2.4.11) */
:target,
[id] {
  scroll-margin-top: calc(var(--alto-cabecera) + 1rem);
}

/* ---------- Foco visible: doble anillo magenta + blanco ---------- */

:focus-visible {
  outline: 3px solid var(--foco-exterior);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--foco-interior);
  border-radius: var(--radio-s);
}

/* ---------- Saltar al contenido ---------- */

.saltar {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-2);
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  background: var(--tinta);
  color: var(--blanco);
  border-radius: var(--radio-s);
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Respaldo primero: en navegadores sin color-mix() la cabecera nunca
     puede quedar transparente sobre el contenido */
  background: rgba(255, 255, 255, 0.92);
  background: color-mix(in srgb, var(--blanco) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__interior {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding: var(--esp-2) var(--esp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  text-decoration: none;
  color: var(--tinta);
  min-height: var(--objetivo-minimo);
}

.marca img {
  width: 8.75rem;
  height: auto;
}

.marca__nombre {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
}

.marca__alias {
  display: block;
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--magenta);
}

.navegacion ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

.navegacion a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-minimo);
  padding: var(--esp-2) var(--esp-3);
  text-decoration: none;
  color: var(--tinta);
  font-size: var(--texto-s);
  font-weight: 500;
  border-radius: var(--radio-s);
}

.navegacion a:hover {
  background: var(--lila);
  color: var(--azul);
}

.navegacion a[aria-current="page"] {
  color: var(--morado);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--morado);
  border-radius: var(--radio-s) var(--radio-s) 0 0;
}

.navegacion a.navegacion__contacto {
  background: var(--degradado-primario);
  color: var(--blanco);
  font-weight: 600;
  padding-inline: var(--esp-4);
  border-radius: 999px;
}

.navegacion a.navegacion__contacto:hover {
  filter: brightness(1.08);
}

/* ---------- Menú desplegable en móvil ----------
   En escritorio el <details> es transparente: el botón se oculta y la lista
   se ve siempre (regla base .navegacion ul). En móvil, el botón pliega y
   despliega la lista. La visibilidad se decide por CSS de autor —no por el
   ocultado nativo de <details>, que difiere entre navegadores. */
.menu__boton {
  display: none;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--objetivo-minimo);
  padding: var(--esp-2) var(--esp-3);
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-s);
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radio-s);
}

.menu__boton::-webkit-details-marker { display: none; }

.menu__boton:hover {
  background: var(--lila);
  color: var(--azul);
}

/* Icono hamburguesa dibujado con CSS; se cruza en X al abrir (cambio
   instantáneo, sin animación, para no molestar con movimiento). */
.menu__icono {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu__icono::before,
.menu__icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.menu__icono::before { top: -6px; }
.menu__icono::after { top: 6px; }

.menu[open] .menu__icono { background: transparent; }
.menu[open] .menu__icono::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu__icono::after { top: 0; transform: rotate(-45deg); }

@media (min-width: 48em) {
  /* En escritorio no hay plegado: se oculta el botón y la lista se ve
     siempre, aunque el <details> esté cerrado. Se neutraliza el ocultado
     nativo del contenido cerrado (incluido ::details-content de Chromium). */
  .menu > summary { display: none; }
  .navegacion .menu > ul { display: flex !important; }
}

.menu::details-content {
  content-visibility: visible;
}

@media (max-width: 47.999em) {
  .menu__boton { display: flex; }

  /* Plegada: lista oculta. Desplegada: columna a lo ancho de su fila. */
  .navegacion .menu:not([open]) > ul { display: none; }

  .navegacion .menu[open] > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--esp-1);
    padding: var(--esp-1);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio-s);
  }

  .navegacion .menu[open] > ul li { width: 100%; }

  .navegacion .menu[open] > ul a {
    width: 100%;
    padding-block: var(--esp-3);
  }
}

/* Agrupa las redes sociales y el selector de idioma para que se muevan y
   envuelvan como una unidad, siempre juntos y alineados a la derecha. */
.cabecera__utiles {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

/* Redes sociales de la cabecera: iconos SVG propios, monocromos y discretos.
   Área de pulsación holgada (36px, por encima del mínimo AA de 24px) con el
   icono más pequeño dentro, para que resulten sutiles sin perder accesibilidad. */
.redes-cabecera {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-1);
}

.redes-cabecera__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  color: var(--tinta);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.redes-cabecera__enlace:hover {
  color: var(--magenta);
  background: var(--lila);
}

.red-icono {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

/* Selector de idioma (ES / EN): control compacto con los dos idiomas. El
   actual es una pastilla rellena no interactiva (aria-current) y el otro, el
   enlace de cambio a la misma página. Sin JS ni cookies. */
.cambio-idioma {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-1);
}

.cambio-idioma__enlace,
.cambio-idioma__actual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  border-radius: 999px;
}

.cambio-idioma__enlace {
  text-decoration: none;
  color: var(--azul);
  border: 1px solid var(--borde-control);
}

.cambio-idioma__enlace:hover {
  background: var(--lila);
  border-color: var(--azul);
  color: var(--morado);
}

.cambio-idioma__actual {
  background: var(--morado);
  color: var(--blanco);
  border: 1px solid var(--morado);
}

@media (max-width: 47.999em) {
  .cabecera__interior {
    padding-block: var(--esp-1);
    gap: var(--esp-1);
  }

  .marca img {
    width: 7.5rem;
  }

  .navegacion {
    flex-basis: 100%;
    order: 1;                 /* el menú baja a su propia fila… */
  }

  /* …y las redes + el selector quedan arriba a la derecha, junto a la marca.
     Si no caben en la misma línea que la marca, envuelven juntos a la
     siguiente, sin desbordar. */
  .cabecera__utiles {
    margin-inline-start: auto;
  }

  .navegacion ul {
    gap: 0;
  }

  .navegacion a {
    padding-inline: var(--esp-2);
    font-size: 0.8125rem;
  }

  .navegacion a.navegacion__contacto {
    padding-inline: var(--esp-2);
  }
}

@media (min-width: 48em) {
  .cabecera__interior {
    flex-wrap: nowrap;
  }

  /* La marca queda a la izquierda; el menú y el selector se agrupan a la
     derecha (el menú se empuja con margen automático). */
  .navegacion {
    margin-inline-start: auto;
  }
}

/* ---------- Estructura de página ---------- */

main {
  flex: 1;
}

.seccion {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding: var(--esp-7) var(--esp-4);
}

.seccion--suave {
  background: var(--lila);
  max-width: none;
  /* separador orgánico: las dos orillas de la banda son curvas suaves y
     asimétricas (lenguaje Georamium), no cortes rectos. Los radios
     horizontales generosos con alturas pequeñas dan un arco ancho que
     nunca invade el contenido (el relleno vertical es mayor). */
  border-radius: 55% 45% 48% 52% / 2.75rem 1.75rem 1.5rem 2.5rem;
}

/* Variante de imagen destacada: reutiliza el amarillo de marca y el mismo
   lenguaje de separadores orgánicos de la portada. */
.seccion--media-amarilla-organica {
  position: relative;
  z-index: 1;
  isolation: isolate;
  max-width: none;
  padding-inline: 0;
  background: var(--amarillo-estrella-fondo);
}

.seccion--media-amarilla-organica::before,
.seccion--media-amarilla-organica::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 2.85rem;
  background: var(--amarillo-estrella-fondo);
  pointer-events: none;
}

.seccion--media-amarilla-organica::before {
  top: -2.75rem;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.seccion--media-amarilla-organica::after {
  bottom: -2.75rem;
  border-radius: 0 0 48% 52% / 0 0 100% 100%;
}

.seccion--media-amarilla-organica > .seccion__interior {
  position: relative;
  z-index: 1;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.seccion--proyectos {
  position: relative;
  z-index: 1;
  background: var(--amarillo-estrella-fondo);
  max-width: none;
  border-radius: 48% 52% 0 0 / 2.25rem 1.75rem 0 0;
}

/* El amarillo se prolonga hacia «Claves»: la curva queda en el sentido
   contrario al arco anterior, sin ampliar el ancho de la página. */
.seccion--proyectos::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -3rem;
  width: 100%;
  height: 3.05rem;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: var(--amarillo-estrella-fondo);
  pointer-events: none;
}

.seccion--cabecera-proyectos .seccion__cabecera {
  margin-bottom: 0;
}

#lineas {
  position: relative;
  z-index: 1;
}

.seccion--proyectos + .seccion--suave {
  position: relative;
  z-index: 0;
  isolation: isolate;
  margin-top: 0;
  padding-top: 1.5rem;
  border-radius: 0 0 48% 52% / 0 0 1.5rem 2.5rem;
}

.seccion--proyectos > .seccion__interior,
.seccion--suave > .seccion__interior {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
}

.seccion__cabecera {
  margin-bottom: var(--esp-6);
  position: relative;
  isolation: isolate; /* el texto fantasma (z-index -1) no escapa de aquí */
}

/* Acción secundaria en la cabecera de sección (p. ej. «Ver temas de formación»
   en los formatos de servicios). Solo separación; el botón trae su color. */
.seccion__acciones {
  margin-top: var(--esp-4);
}

.seccion__cabecera .antetitulo {
  font-size: var(--texto-s);
  font-weight: 600;
  color: var(--morado);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Flecha editorial delante del antetítulo. El texto alternativo vacío
   (sintaxis con barra) la oculta a los lectores de pantalla; los
   navegadores que no la entienden omiten la flecha y no pasa nada. */
.seccion__cabecera .antetitulo::before {
  content: "› " / "";
}

/* Texto fantasma: palabra decorativa gigante tras la cabecera, al estilo
   editorial. Confinada a una franja de 1em sobre el antetítulo/título
   (los únicos textos que puede tocar: tinta y morado, pares verificados
   en el build) y recortada a la caja: no puede desbordar la página.
   Solo en pantallas anchas; en móvil quitaría más que da. */
.fantasma {
  display: none;
}

@media (min-width: 48em) {
  .fantasma {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: -0.35em;
    height: 1em;
    z-index: -1;
    overflow: hidden;
    font-family: var(--fuente-titular);
    font-weight: 700;
    font-size: clamp(4rem, 8.5vw, 6.75rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: right;
    color: var(--fantasma);
    pointer-events: none;
    user-select: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate; /* las manchas (z-index -1) quedan tras el contenido */
  padding-block: var(--esp-8) var(--esp-7);
}

.hero__contenido {
  min-width: 0;
}

.hero__visual {
  width: min(100%, 30rem);
  margin: var(--esp-6) auto 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 46% 54% 48% 52% / 42% 44% 56% 58%;
  background: var(--lila);
  box-shadow: 0 1.25rem 3rem rgba(31, 42, 68, 0.14);
}

.hero__visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.hero__visual--foco-arriba img { object-position: center top; }
.hero__visual--foco-abajo img { object-position: center bottom; }
.hero__visual--foco-izquierda img { object-position: left center; }
.hero__visual--foco-derecha img { object-position: right center; }

@media (prefers-reduced-motion: no-preference) {
  .hero__visual--zoom img {
    transition: transform 0.55s ease;
  }

  .hero__visual--zoom:hover img {
    transform: scale(1.035);
  }
}

@media (min-width: 56em) {
  .hero--con-imagen {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(18rem, 4fr);
    align-items: center;
    gap: clamp(var(--esp-6), 5vw, var(--esp-8));
  }

  .hero--con-imagen .hero__visual {
    margin: 0;
    justify-self: end;
  }
}

/* Manchas orgánicas de color, estáticas y muy claras, detrás del titular
   (lenguaje Georamium: degradados suaves y formas redondeadas). Sus dos
   tintes están en pares_de_uso: todo texto del hero cumple AA encima. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* los fundidos terminan DENTRO de la caja: sin aristas en los bordes */
  background:
    radial-gradient(30rem 14rem at 68% 22%, var(--mancha-lila) 0%, transparent 50%),
    radial-gradient(24rem 12rem at 16% 74%, var(--mancha-azul) 0%, transparent 50%);
}

/* Entrada única al cargar la página: fundido con leve ascenso, escalonado.
   Es una animación de una sola pasada (<1 s, WCAG 2.2.2 no aplica) y con
   «reducir movimiento» el bloque global la deja en instantánea. En
   navegadores sin @keyframes, el contenido simplemente se ve. */
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.hero .antetitulo,
.hero h1,
.hero .entradilla,
.hero .hero__acciones {
  animation: aparecer 0.55s ease-out backwards;
}

.hero h1 {
  animation-delay: 0.07s;
}

.hero .entradilla {
  animation-delay: 0.14s;
}

.hero .hero__acciones {
  animation-delay: 0.21s;
}

/* La misma entrada cuando una portada a pantalla abre la página */
main > .portada:first-child .portada__contenido > * {
  animation: aparecer 0.55s ease-out backwards;
}

.hero h1 {
  max-width: 22ch;
}

/* Acento del titular: *frase* en el JSON → serif itálica con degradado.
   El respaldo (morado plano) cubre navegadores sin background-clip. */
.hero h1 em {
  font-family: var(--fuente-cita);
  font-style: italic;
  font-weight: 600;
  color: var(--morado);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em {
    background: var(--degradado-primario);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Estrella flotante: solo en pantallas anchas (en estrechas taparía el
   texto) y siempre a su tamaño nativo de 110 px, nunca ampliada. */
.hero__estrella {
  display: none;
}

@media (min-width: 64em) {
  .hero__estrella {
    display: block;
    position: absolute;
    right: clamp(1rem, 6vw, 5rem);
    top: 7rem;
    /* fija, con una levísima inclinación de la referencia de marca; sin
       animación: el movimiento perpetuo chocaba con la WCAG 2.2.2 y con
       la petición expresa de la autora */
    transform: rotate(-2deg);
  }
}

.hero .entradilla {
  margin-top: var(--esp-5);
  font-size: var(--texto-l);
  font-weight: 400;
  line-height: 1.45;
  color: var(--gris-texto);
  max-width: 36ch;
}

.hero__acciones {
  margin-top: var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--objetivo-minimo);
  padding: var(--esp-3) var(--esp-5);
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-s);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease,
    background-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .boton:hover {
    transform: translateY(-2px);
  }
}

.boton--primario {
  background: var(--degradado-primario);
  color: var(--blanco);
}

.boton--primario:hover {
  filter: brightness(1.08);
  color: var(--blanco);
}

.boton--secundario {
  background: var(--blanco);
  border-color: var(--morado);
  color: var(--morado);
}

.boton--secundario:hover {
  background: var(--lila);
  color: var(--morado);
}

.boton--acento {
  background: var(--magenta);
  color: var(--blanco);
}

.boton--acento:hover {
  filter: brightness(1.1);
  color: var(--blanco);
}

.boton--silencioso {
  background: transparent;
  color: var(--azul);
  padding-inline: var(--esp-3);
}

/* ---------- Tarjetas ---------- */

.tarjetas {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding: 0;
  list-style: none;
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-suave);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-width: 0;
  overflow-wrap: break-word;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta:hover,
.tarjeta:focus-within {
  box-shadow: var(--sombra-alzada);
  transform: translateY(-4px);
}

.tarjeta__franja {
  height: 6px;
  border-radius: 999px;
  margin-bottom: var(--esp-2);
  background: var(--degradado-primario);
  max-width: 4.5rem;
  transition: max-width 0.35s ease;
}

/* al entrar en la tarjeta, la franja se extiende con su color */
.tarjeta:hover .tarjeta__franja,
.tarjeta:focus-within .tarjeta__franja {
  max-width: 100%;
}

.tarjeta h3 a {
  color: var(--tinta);
  text-decoration: none;
}

.tarjeta h3 a:hover {
  color: var(--azul);
  text-decoration: underline;
}

.tarjeta p {
  color: var(--gris-texto);
  font-size: var(--texto-s);
}

.tarjeta .tarjeta__enlace {
  margin-top: auto;
  font-weight: 600;
  font-size: var(--texto-s);
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: var(--objetivo-minimo);
}

.tarjeta__enlace span {
  transition: transform 0.2s ease;
}

.tarjeta__enlace:hover span,
.tarjeta__enlace:focus-visible span {
  transform: translateX(0.25rem);
}

/* ---------- Constelación de proyectos ----------
   Variante del bloque de tarjetas: la estrella preside la rejilla y unas
   líneas discontinuas bajan en abanico hasta cada tarjeta; la línea de la
   tarjeta bajo el cursor (o con foco) se enciende con su color,
   dibujándose desde la estrella (stroke-dashoffset sobre pathLength=100).
   Sin JavaScript. Sin :has() las líneas quedan discontinuas y ya está.
   Solo en pantallas anchas: debajo de 64em las tarjetas se apilan y las
   curvas no apuntarían a nada. */

.constelacion__estrella,
.constelacion__lineas {
  display: none;
}

@media (min-width: 64em) {
  .constelacion__estrella {
    display: block;
    margin-inline: auto;
  }

  .constelacion__lineas {
    display: block;
    width: 100%;
    height: 6.5rem;
  }

  /* la rejilla fija una columna por tarjeta para que cada curva
     desemboque exactamente en la suya */
  .constelacion--2 .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .constelacion--3 .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .constelacion--4 .tarjetas { grid-template-columns: repeat(4, 1fr); }
  .constelacion--5 .tarjetas { grid-template-columns: repeat(5, 1fr); }
  .constelacion--6 .tarjetas { grid-template-columns: repeat(6, 1fr); }
}

.constelacion__base,
.constelacion__viva {
  fill: none;
  stroke-width: 2;
}

.constelacion__base {
  stroke: var(--borde-control);
  stroke-opacity: 0.45;
  stroke-dasharray: 2 2.5;
}

.constelacion__viva {
  stroke: var(--morado);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.45s ease-in-out;
}

.constelacion:has(.tarjeta:nth-child(1):is(:hover, :focus-within)) .constelacion__lineas g:nth-child(1) .constelacion__viva,
.constelacion:has(.tarjeta:nth-child(2):is(:hover, :focus-within)) .constelacion__lineas g:nth-child(2) .constelacion__viva,
.constelacion:has(.tarjeta:nth-child(3):is(:hover, :focus-within)) .constelacion__lineas g:nth-child(3) .constelacion__viva,
.constelacion:has(.tarjeta:nth-child(4):is(:hover, :focus-within)) .constelacion__lineas g:nth-child(4) .constelacion__viva,
.constelacion:has(.tarjeta:nth-child(5):is(:hover, :focus-within)) .constelacion__lineas g:nth-child(5) .constelacion__viva,
.constelacion:has(.tarjeta:nth-child(6):is(:hover, :focus-within)) .constelacion__lineas g:nth-child(6) .constelacion__viva {
  stroke-dashoffset: 0;
}

/* ---------- Chips y etiquetas ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0.125rem var(--esp-3);
  border-radius: 999px;
  font-size: var(--texto-xs);
  font-weight: 600;
  background: var(--lila);
  color: var(--tinta);
  border: 1px solid var(--borde);
}

.chip::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--chip-color, var(--morado));
}

.chip--ponencia { --chip-color: var(--area-3); }
.chip--taller { --chip-color: var(--area-1); }
.chip--formacion { --chip-color: var(--area-2); }
.chip--podcast { --chip-color: var(--area-6); }
.chip--prensa { --chip-color: var(--area-4); }
.chip--publicacion { --chip-color: var(--area-5); }
.chip--video { --chip-color: var(--area-6); }
.chip--comunidad { --chip-color: var(--recurso); }
.chip--otro { --chip-color: var(--gris-texto); }

.chip--aviso {
  background: var(--blanco);
  border: 1px dashed var(--borde-control);
  color: var(--recurso-ink);
  font-style: italic;
}

.chip--aviso::before {
  background: var(--recurso);
}

/* ---------- Bloque de valores ---------- */

.valores {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  list-style: none;
  padding: 0;
}

.valores h3 {
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.valores h3::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--valor-color, var(--morado));
}

.valores li:nth-child(1) h3::before { background: var(--area-3); }
.valores li:nth-child(2) h3::before { background: var(--area-2); }
.valores li:nth-child(3) h3::before { background: var(--area-5); }
.valores li:nth-child(4) h3::before { background: var(--area-4); }

.valores p {
  font-size: var(--texto-s);
  color: var(--gris-texto);
  margin-top: var(--esp-2);
}

/* ---------- Bloque de cita ---------- */

.cita {
  background: var(--lila);
  border-radius: var(--radio-tarjeta);
  padding: var(--esp-6) var(--esp-5);
  max-width: var(--ancho-prosa);
  margin-inline: auto;
}

.cita blockquote {
  font-family: var(--fuente-cita);
  font-style: italic;
  font-size: var(--texto-l);
  line-height: 1.5;
  color: var(--tinta);
}

.cita figcaption {
  margin-top: var(--esp-4);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-s);
  color: var(--gris-texto);
}

.cita figcaption img {
  width: 1.75rem;
}

/* ---------- Prosa (Sobre mí) ---------- */

.prosa > * + * {
  margin-top: var(--esp-4);
}

.prosa h2 {
  margin-top: var(--esp-7);
}

.prosa ul {
  padding-left: 1.25rem;
}

.prosa .fuente {
  font-size: var(--texto-xs);
  color: var(--gris-texto);
}

/* ---------- Archivo de trayectoria ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  padding: 0;
  list-style: none;
  margin-bottom: var(--esp-5);
}

.filtros a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-minimo); /* 44px: es el control más pulsado en móvil */
  padding: var(--esp-1) var(--esp-4);
  border-radius: 999px;
  border: 1px solid var(--borde-control);
  background: var(--blanco);
  color: var(--tinta);
  font-size: var(--texto-s);
  font-weight: 500;
  text-decoration: none;
}

.filtros a:hover {
  border-color: var(--morado);
  color: var(--morado);
}

.filtros a[aria-current="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
  font-weight: 600;
}

.trayectoria {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-4);
}

.registro {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--esp-4) var(--esp-5);
  background: var(--blanco);
  min-width: 0;
  /* los extractos traen URLs literales de los Excel: hay que poder partirlas */
  overflow-wrap: anywhere;
}

.registro__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  font-size: var(--texto-xs);
  color: var(--gris-texto);
  margin-bottom: var(--esp-2);
}

.registro h3,
.registro h4 {
  font-size: 1.125rem;
  line-height: 1.35;
}

/* ---------- Línea temporal por años ----------
   El archivo agrupa los registros por año: el año es un gran hito al
   margen (pegajoso mientras se recorre su grupo) y una línea con puntos
   une los registros. En pantallas estrechas, el año encabeza el grupo
   y la línea sobra. Decoración pura: la semántica es h3 año → h4 registro. */

.linea-temporal {
  display: grid;
  gap: var(--esp-7);
}

.linea-temporal__grupo {
  display: grid;
  gap: var(--esp-4);
  align-items: start;
}

.linea-temporal__anio {
  font-size: var(--texto-xl);
  line-height: 1;
  color: var(--morado);
  font-variant-numeric: tabular-nums;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .linea-temporal__anio {
    background: var(--degradado-primario);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (min-width: 48em) {
  .linea-temporal__grupo {
    grid-template-columns: 7rem 1fr;
  }

  .linea-temporal__anio {
    position: sticky;
    top: calc(var(--alto-cabecera) + 1rem);
  }

  .linea-temporal .trayectoria {
    border-left: 2px solid var(--borde);
    padding-left: var(--esp-5);
  }

  .linea-temporal .registro {
    position: relative;
  }

  /* el punto de cada registro, centrado sobre la línea */
  .linea-temporal .registro::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--esp-5) - 8px);
    top: 1.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--morado);
    box-shadow: 0 0 0 3px var(--blanco);
  }
}

.registro__detalle {
  margin-top: var(--esp-2);
  font-size: var(--texto-s);
  color: var(--gris-texto);
}

.registro__pie {
  margin-top: var(--esp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  font-size: var(--texto-s);
}

.registro__nota-fuente {
  font-size: var(--texto-xs);
  color: var(--gris-texto);
  font-style: italic;
}

/* ---------- Fichas de conferencia ---------- */

.fichas {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  list-style: none;
  padding: 0;
}

/* Líneas de trabajo: agrupan los temas bajo un encabezado con filete fino. */
.fichas-grupo + .fichas-grupo {
  margin-top: var(--esp-6);
}

.fichas-grupo__titulo {
  font-size: var(--texto-l);
  font-weight: 700;
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--borde);
}

.fichas-grupo__intro {
  color: var(--gris-texto);
  max-width: var(--ancho-prosa);
  margin: var(--esp-2) 0;
}

/* Puente hacia la evidencia: enlace discreto de cada línea a sus proyectos. */
.fichas-grupo__enlace {
  margin: 0 0 var(--esp-4);
  font-size: var(--texto-s);
}

.fichas-grupo__enlace a {
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
}

.fichas-grupo__enlace a::after { content: " \2192"; }

.fichas-grupo__enlace a:hover { text-decoration: underline; }

.fichas-grupo__titulo + .fichas,
.fichas-grupo__intro + .fichas {
  margin-top: var(--esp-4);
}

.ficha {
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: var(--esp-5);
  background: var(--blanco);
  box-shadow: var(--sombra-suave);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-width: 0;
  overflow-wrap: break-word;
}

.ficha__area {
  height: 6px;
  max-width: 4.5rem;
  border-radius: 999px;
  background: var(--ficha-color, var(--morado));
}

/* Fichas editoriales de los temas de Ponencias: alternan los dos fondos
   principales de la marca y convierten la sigla en elemento gráfico. */
.ficha--tema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  padding: var(--esp-6) var(--esp-5) var(--esp-5) calc(var(--esp-5) + 0.45rem);
  background: var(--mancha-azul);
  box-shadow: inset 0.45rem 0 0 var(--ficha-ink, var(--azul-estrella)), var(--sombra-suave);
}

.fichas .ficha--tema:nth-child(even) {
  background: var(--mancha-amarilla);
}

.ficha--tema > :not(.ficha__sigla) {
  position: relative;
  z-index: 1;
}

.ficha__sigla {
  position: absolute;
  z-index: 0;
  top: -0.12em;
  right: 0.12em;
  max-width: none;
  color: var(--ficha-ink, var(--azul-estrella));
  opacity: 0.15;
  font-family: var(--fuente-titular);
  font-size: clamp(4.75rem, 4rem + 3vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.08em;
  white-space: nowrap;
  user-select: none;
}

/* La letra va en un pseudo-elemento (no como texto real) para que la marca
   de agua decorativa no la evalúen las herramientas de contraste. */
.ficha__sigla::after { content: attr(data-sigla); }

.ficha--tema .ficha__area {
  width: 3.5rem;
  height: 0.3rem;
  background: var(--ficha-ink, var(--azul-estrella));
}

.ficha--tema h4 {
  max-width: 85%;
  font-size: var(--texto-l);
  font-weight: 600;
}

.ficha--tema p {
  line-height: 1.55;
}

.ficha dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-1) var(--esp-3);
  font-size: var(--texto-s);
}

.ficha dt {
  font-weight: 600;
  color: var(--gris-texto);
}

.ficha dd {
  margin: 0;
}

.ficha__pie {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}

/* ---------- Formulario ---------- */

.formulario {
  max-width: var(--ancho-prosa);
  display: grid;
  gap: var(--esp-5);
}

.llamada-contacto {
  max-width: 48rem;
  padding: var(--esp-6);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--lila);
}

.llamada-contacto .boton {
  margin-top: var(--esp-5);
}

/* Formulario de contacto: envío por servidor (publico/enviar-contacto.php).
   Funciona con y sin JavaScript, así que se muestra siempre. */
.contacto-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-4);
  max-width: 48rem;
  margin-bottom: var(--esp-6);
}

.contacto-form .campo--ancho,
.contacto-form__nota,
.contacto-form .aviso-envio,
.contacto-form button {
  grid-column: 1 / -1;
}

.contacto-form__nota {
  margin: 0;
  font-size: var(--texto-s);
  color: var(--gris-texto);
}

.contacto-form button {
  justify-self: start;
}

@media (max-width: 40em) {
  .contacto-form {
    grid-template-columns: 1fr;
  }
}

.campo {
  display: grid;
  gap: var(--esp-2);
}

.campo label {
  font-weight: 600;
  font-size: var(--texto-s);
}

.campo .ayuda {
  font-size: var(--texto-xs);
  color: var(--gris-texto);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--objetivo-minimo);
  padding: var(--esp-3) var(--esp-4);
  border: 1.5px solid var(--borde-control);
  border-radius: var(--radio-m);
  background: var(--blanco);
  color: var(--tinta);
}

.campo textarea {
  min-height: 8rem;
  resize: vertical;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--tinta);
}

/* El color de placeholder por defecto del navegador no garantiza AA */
.campo ::placeholder {
  color: var(--gris-texto);
  opacity: 1;
}

.campo .error {
  display: none;
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--magenta);
}

.campo input:user-invalid,
.campo select:user-invalid,
.campo textarea:user-invalid {
  border-color: var(--magenta);
}

.campo input:user-invalid ~ .error,
.campo select:user-invalid ~ .error,
.campo textarea:user-invalid ~ .error {
  display: block;
}

.campo--consentimiento {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.campo--consentimiento input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin-top: 0.2rem;
  accent-color: var(--morado);
}

.campo--consentimiento label {
  font-weight: 400;
  font-size: var(--texto-s);
}

.campo--consentimiento .error {
  grid-column: 1 / -1;
}

/* honeypot: fuera de la vista, pero disponible para robots */
.campo--tarta {
  position: absolute !important;
  left: -9999px !important;
}

fieldset {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: var(--esp-5);
  display: grid;
  gap: var(--esp-4);
}

legend {
  font-family: var(--fuente-titular);
  font-weight: 600;
  padding-inline: var(--esp-2);
}

.aviso-envio {
  border: 1px solid var(--borde);
  border-left: 4px solid var(--recurso);
  border-radius: var(--radio-s);
  background: var(--lila);
  padding: var(--esp-4) var(--esp-5);
  font-size: var(--texto-s);
}

/* Aviso de error del envío: mismo bloque, acento magenta. */
.aviso-envio--error {
  border-left-color: var(--magenta);
}

[hidden] {
  display: none !important;
}

/* ---------- Preferencias de accesibilidad ---------- */

.accesibilidad__lanzador {
  position: fixed;
  left: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 80;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--tinta);
  background: var(--blanco);
  box-shadow: var(--sombra-alzada);
  cursor: pointer;
}

.accesibilidad__lanzador:hover {
  color: var(--morado);
  border-color: var(--morado);
}

.accesibilidad__panel {
  width: min(calc(100% - 2rem), 24rem);
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1.5rem;
  color: var(--tinta);
  background: var(--blanco);
  box-shadow: 0 1.5rem 4rem rgba(31, 42, 68, 0.3);
  overflow: auto;
}

.accesibilidad__panel:not([open]) {
  display: none;
}

.accesibilidad__panel::backdrop {
  background: rgba(31, 42, 68, 0.62);
  backdrop-filter: blur(3px);
}

.accesibilidad__contenido {
  padding: var(--esp-5);
}

.accesibilidad__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-bottom: var(--esp-5);
}

.accesibilidad__cabecera h2 {
  font-family: var(--fuente-texto);
  font-size: 1.5rem;
  font-weight: 500;
}

.accesibilidad__cerrar {
  flex: none;
  width: var(--objetivo-minimo);
  height: var(--objetivo-minimo);
  border: 0;
  border-radius: 50%;
  color: var(--gris-texto);
  background: transparent;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.accesibilidad__cerrar:hover {
  color: var(--tinta);
  background: var(--lila);
}

.accesibilidad__opciones {
  display: grid;
  gap: var(--esp-5);
}

.accesibilidad__opcion {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-3);
  cursor: pointer;
}

.accesibilidad__opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.accesibilidad__interruptor {
  position: relative;
  width: 3rem;
  height: 1.75rem;
  margin-top: 0.125rem;
  border: 2px solid var(--borde-control);
  border-radius: 999px;
  background: var(--borde);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.accesibilidad__interruptor::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  top: 0.125rem;
  left: 0.125rem;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 1px 3px rgba(31, 42, 68, 0.35);
  transition: transform 0.2s ease;
}

.accesibilidad__opcion input:checked + .accesibilidad__interruptor {
  border-color: var(--morado);
  background: var(--morado);
}

.accesibilidad__opcion input:checked + .accesibilidad__interruptor::after {
  transform: translateX(1.25rem);
}

.accesibilidad__opcion input:focus-visible + .accesibilidad__interruptor {
  outline: 3px solid var(--foco-exterior);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--foco-interior);
}

.accesibilidad__opcion strong,
.accesibilidad__opcion small {
  display: block;
}

.accesibilidad__opcion strong {
  font-family: var(--fuente-titular);
  font-size: 1rem;
  line-height: 1.35;
}

.accesibilidad__opcion small {
  margin-top: var(--esp-1);
  color: var(--gris-texto);
  font-size: var(--texto-s);
  line-height: 1.45;
}

.accesibilidad__restablecer {
  width: 100%;
  min-height: var(--objetivo-minimo);
  margin-top: var(--esp-6);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borde-control);
  border-radius: 999px;
  color: var(--gris-texto);
  background: var(--blanco);
  font-family: var(--fuente-titular);
  font-weight: 600;
  cursor: pointer;
}

.accesibilidad__restablecer:hover {
  border-color: var(--morado);
  color: var(--morado);
}

@media (max-width: 30em) {
  .accesibilidad__contenido {
    padding: var(--esp-4);
  }

  .accesibilidad__lanzador {
    left: var(--esp-3);
    bottom: var(--esp-3);
  }
}

/* ---------- Portada: sección con imagen o vídeo de fondo ----------
   El velo (rgba tinta al 0.72) está verificado en el build contra el
   peor caso posible (imagen blanca): si se cambia la opacidad aquí, hay
   que cambiar VELO_PORTADA_OPACIDAD en plantillas/lib.php, y viceversa. */

.portada {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--esp-8) var(--esp-4);
  text-align: center;
}

.portada--grande {
  min-height: min(75vh, 40rem);
}

.portada--banda {
  min-height: 18rem;
}

.portada__medio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.portada--foco-arriba .portada__medio { object-position: center top; }
.portada--foco-abajo .portada__medio { object-position: center bottom; }
.portada--foco-izquierda .portada__medio { object-position: left center; }
.portada--foco-derecha .portada__medio { object-position: right center; }

@media (prefers-reduced-motion: no-preference) {
  .portada--efecto-zoom .portada__medio {
    transition: transform 0.5s ease;
  }

  .portada--efecto-zoom:is(:hover, :focus-within) .portada__medio {
    transform: scale(1.035);
  }
}

.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31, 42, 68, 0.72); /* = velo verificado */
  z-index: 1;
}

.portada__contenido {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  color: var(--blanco);
}

.portada__contenido .antetitulo {
  color: var(--blanco);
}

.portada__contenido h1,
.portada__contenido h2 {
  color: var(--blanco);
  font-size: var(--texto-2xl);
}

.portada__texto {
  margin-top: var(--esp-4);
  font-size: var(--texto-l);
  line-height: 1.5;
  margin-inline: auto;
}

.portada__acciones {
  margin-top: var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  justify-content: center;
}

/* sobre el velo, el secundario pasa a blanco para no desaparecer */
.portada .boton--secundario {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}

.portada .boton--secundario:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--blanco);
}

.portada__pausa {
  position: absolute;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 3;
  min-width: var(--objetivo-minimo);
  min-height: var(--objetivo-minimo);
  border-radius: 999px;
  border: 2px solid var(--blanco);
  background: rgba(31, 42, 68, 0.72);
  color: var(--blanco);
  font-size: 1rem;
  cursor: pointer;
}

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

.pie {
  margin-top: var(--esp-8);
  background: var(--tinta);
  color: var(--blanco);
  /* la orilla superior del pie, con la misma curva orgánica de la banda */
  border-radius: 45% 55% 0 0 / 2.25rem 3rem 0 0;
}

.pie__interior {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding: var(--esp-7) var(--esp-4);
  display: grid;
  gap: var(--esp-6);
}

.pie h2 {
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.pie a {
  color: var(--blanco);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.pie a:hover {
  color: var(--amarillo-estrella);
}

.pie ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
}

.pie ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-minimo);
  font-size: var(--texto-xs);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.76);
  text-decoration: none;
}

.pie__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.pie__marca img {
  width: 8.75rem;
  height: auto;
  filter: brightness(0) invert(1);
}

.pie__legal {
  font-size: var(--texto-xs);
  color: rgba(255, 255, 255, 0.75);
}

.pie__legal a {
  color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 48em) {
  .pie__interior {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .pie ul a {
    min-height: 2rem;
  }
}

/* ---------- Guía de estilos ---------- */

.muestra-color {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  overflow: hidden;
}

.muestra-color__bloque {
  height: 4.5rem;
}

.muestra-color figcaption {
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--texto-xs);
}

.tabla-contraste {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--texto-s);
}

.tabla-contraste caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: var(--esp-3);
}

.tabla-contraste th,
.tabla-contraste td {
  border: 1px solid var(--borde);
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
}

.tabla-contraste th {
  background: var(--lila);
}

.desbordable {
  overflow-x: auto;
}

/* ---------- Tarjetas y fichas con imagen de fondo ----------
   Cualquier tarjeta o ficha puede llevar una foto a sangre (campo
   «Imagen de fondo» de su fila en el panel): el aspecto editorial de
   prodigiosovolcan.com. El velo es EXACTAMENTE el de las portadas
   (rgba tinta al 0.72 = VELO_PORTADA_OPACIDAD, verificado en el build
   contra imagen blanca) y TODO el texto pasa a blanco: ningún gris
   sobre foto. Los chips conservan su propio fondo. */

.carta-foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
}

.carta-foto__medio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.carta-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31, 42, 68, 0.72); /* = velo verificado */
  z-index: -1;
}

.carta-foto,
.carta-foto h3,
.carta-foto p,
.carta-foto dt,
.carta-foto dd,
.carta-foto .registro__nota-fuente {
  color: var(--blanco);
}

/* TODO enlace sobre la foto es blanco: el azul no cumple sobre el velo */
.carta-foto a:not(.boton) {
  color: var(--blanco);
}

.carta-foto a:not(.boton):hover {
  color: var(--blanco);
  text-decoration: underline;
}

/* sobre el velo, los botones de borde pasan a blanco (como en portada) */
.carta-foto .boton--secundario {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}

.carta-foto .boton--secundario:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--blanco);
}

.carta-foto .boton--silencioso,
.carta-foto .boton--silencioso:hover {
  color: var(--blanco);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .carta-foto .carta-foto__medio {
    transition: transform 0.5s ease;
  }

  .carta-foto:is(:hover, :focus-within) .carta-foto__medio {
    transform: scale(1.045);
  }
}

/* ---------- Revelado al hacer scroll ----------
   Las dos clases las pone revelado.js, y SOLO tras comprobar que hay
   IntersectionObserver y que nadie pidió movimiento reducido. Sin
   JavaScript estas reglas no se aplican a nada: la página se ve entera
   desde el primer píxel. Cada elemento se revela una única vez. */

.revelable {
  opacity: 0;
  transform: translateY(1rem);
}

.revelable.revelado {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

/* ---------- Imagen de contenido accesible ---------- */

.media-enriquecida {
  margin-inline: auto;
}

/* ---------- Trayectoria profesional visual ---------- */

.hitos-visuales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hito-visual {
  display: grid;
  grid-template-columns: minmax(8.5rem, 38%) minmax(0, 1fr);
  min-height: 11rem;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
  box-shadow: var(--sombra-suave);
}

.hito-visual__imagen {
  width: 100%;
  height: 100%;
  min-height: 11rem;
  object-fit: cover;
}

.hito-visual__contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5);
}

.hito-visual__texto {
  margin: 0;
  color: var(--tinta);
  font-size: var(--texto-s);
  line-height: 1.5;
}

.hito-visual__enlace {
  font-size: var(--texto-xs);
  font-weight: 700;
  line-height: 1.35;
}

.hitos-visuales__nota {
  max-width: 52rem;
  color: var(--gris-texto);
  font-size: var(--texto-xs);
  line-height: 1.45;
}

@media (max-width: 56rem) {
  .hitos-visuales {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .hito-visual {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }

  .hito-visual__contenido {
    padding: var(--esp-4);
  }
}

/* Variante interactiva de trayectoria. El atributo data-hitos-activo solo
   aparece cuando el script ha inicializado correctamente; sin JavaScript se
   mantiene la cuadrícula completa anterior. */
.hitos-visuales--apilados[data-hitos-activo] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(calc(100% - 3rem), 36rem);
  margin-inline: auto;
  padding: 0 0 var(--esp-7);
  cursor: pointer;
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual {
  --giro-polaroid: -1deg;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--esp-3) var(--esp-3) 0;
  overflow: hidden;
  border-color: var(--borde);
  border-radius: var(--radio-s);
  background: var(--blanco);
  box-shadow: var(--sombra-alzada);
  transform-origin: center center;
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual__imagen {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radio-s) / 2);
  object-fit: cover;
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual__contenido {
  flex: 1;
  min-height: 9rem;
  padding: var(--esp-5) var(--esp-4) var(--esp-6);
  background: var(--blanco);
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual__texto {
  color: var(--tinta);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", var(--fuente-cita);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.01em;
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual__enlace {
  font-family: var(--fuente-texto);
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(2) { --giro-polaroid: 1.35deg; }
.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(3) { --giro-polaroid: -0.65deg; }
.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(4) { --giro-polaroid: 1.75deg; }
.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(5) { --giro-polaroid: -1.45deg; }
.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(6) { --giro-polaroid: 0.8deg; }
.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(7) { --giro-polaroid: -1.8deg; }

.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(3n) .hito-visual__texto {
  transform: rotate(-0.35deg);
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual:nth-child(3n + 2) .hito-visual__texto {
  transform: rotate(0.3deg);
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual[data-hitos-estado="activa"] {
  z-index: 4;
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) rotate(var(--giro-polaroid)) scale(1);
  pointer-events: auto;
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual[data-hitos-estado="siguiente"] {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transform: translate(1.15rem, 1rem) rotate(calc(var(--giro-polaroid) + 2deg)) scale(0.97);
  pointer-events: none;
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual[data-hitos-estado="posterior"] {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: translate(-1rem, 1.9rem) rotate(calc(var(--giro-polaroid) - 2deg)) scale(0.94);
  pointer-events: none;
}

.hitos-visuales--apilados[data-hitos-activo] .hito-visual[data-hitos-estado="oculta"] {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2rem) rotate(var(--giro-polaroid)) scale(0.94);
  pointer-events: none;
}

.hitos-carrusel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
}

.hitos-carrusel__controles[hidden] {
  display: none;
}

.hitos-carrusel__boton {
  display: inline-grid;
  place-items: center;
  width: var(--objetivo-minimo);
  min-width: var(--objetivo-minimo);
  min-height: var(--objetivo-minimo);
  padding: 0;
  border: 2px solid var(--azul);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--azul);
  font: 700 var(--texto-m) / 1 var(--fuente-texto);
  cursor: pointer;
}

.hitos-carrusel__boton:hover {
  background: var(--azul);
  color: var(--blanco);
}

.hitos-carrusel__estado {
  min-width: 4.5rem;
  margin: 0;
  color: var(--gris-texto);
  font-size: var(--texto-s);
  font-weight: 700;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-movimiento]) .hitos-visuales--apilados[data-hitos-activo] .hito-visual {
    transition: transform 0.38s ease, opacity 0.28s ease;
  }
}

@media (max-width: 42rem) {
  .hitos-visuales--apilados[data-hitos-activo] {
    width: min(calc(100% - 2rem), 31rem);
    padding-inline: 0;
  }

  .hitos-visuales--apilados[data-hitos-activo] .hito-visual {
    min-height: 0;
    padding: var(--esp-2) var(--esp-2) 0;
  }

  .hitos-visuales--apilados[data-hitos-activo] .hito-visual__imagen {
    min-height: 0;
  }

  .hitos-visuales--apilados[data-hitos-activo] .hito-visual__contenido {
    min-height: 8.5rem;
    padding: var(--esp-4) var(--esp-3) var(--esp-5);
  }

  .hitos-visuales--apilados[data-hitos-activo] .hito-visual__texto {
    font-size: clamp(1.05rem, 0.96rem + 0.65vw, 1.2rem);
  }
}

.media-enriquecida--contenido {
  max-width: 48rem;
}

.media-enriquecida--amplio {
  max-width: 68rem;
}

.media-enriquecida--completo {
  max-width: none;
}

.media-enriquecida__marco {
  display: block;
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  background: var(--lila);
}

.media-enriquecida img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.media-enriquecida--panorama img {
  aspect-ratio: 16 / 7;
}

.media-enriquecida--cuadrada img {
  aspect-ratio: 1;
}

.media-enriquecida--vertical img {
  aspect-ratio: 4 / 5;
}

.media-enriquecida--foco-arriba img { object-position: center top; }
.media-enriquecida--foco-abajo img { object-position: center bottom; }
.media-enriquecida--foco-izquierda img { object-position: left center; }
.media-enriquecida--foco-derecha img { object-position: right center; }

.media-enriquecida figcaption {
  display: grid;
  gap: var(--esp-1);
  padding-block: var(--esp-3);
  color: var(--gris-texto);
  font-size: var(--texto-s);
}

.media-enriquecida figcaption small {
  font-size: var(--texto-xs);
}

@media (prefers-reduced-motion: no-preference) {
  .media-enriquecida--zoom img {
    transition: transform 0.5s ease;
  }

  .media-enriquecida--zoom:is(:hover, :focus-within) img {
    transform: scale(1.035);
  }
}

/* ---------- Invitación al prompt de una imagen ----------
   Bajo una imagen con campo «prompt»: un botón abre un <dialog> modal con el
   texto del prompt y un botón para copiarlo. La invitación solo aparece con
   JavaScript (la abre prompt-media.js); sin él, la imagen queda completa y el
   <dialog> nunca se muestra. Reutiliza los tokens del diálogo de fichas. */

.prompt-media__invitacion {
  display: none;
  margin: var(--esp-4) 0 0;
  text-align: center;
}

.js .prompt-media__invitacion {
  display: block;
}

.prompt-media__dialogo {
  /* margin auto explícito: el reset global anularía el centrado del diálogo */
  margin: auto;
  border: 0;
  border-radius: var(--radio-tarjeta);
  padding: 0;
  max-width: min(40rem, calc(100vw - 2rem));
  width: 100%;
  max-height: min(85vh, 44rem);
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 24px 70px rgba(10, 16, 32, 0.5);
}

.prompt-media__dialogo::backdrop {
  background: rgba(15, 22, 41, 0.72);
}

.prompt-media__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--borde);
}

.prompt-media__titulo {
  margin: 0;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--texto-l);
  color: var(--tinta);
}

.prompt-media__cerrar {
  flex: none;
  width: var(--objetivo-minimo);
  height: var(--objetivo-minimo);
  border: 1.5px solid var(--borde-control);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.prompt-media__ayuda {
  margin: 0;
  padding: var(--esp-4) var(--esp-5) 0;
  color: var(--gris-texto);
  font-size: var(--texto-s);
}

.prompt-media__texto {
  margin: var(--esp-3) var(--esp-5) 0;
  padding: var(--esp-4);
  max-height: 42vh;
  overflow: auto;
  background: var(--lila);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-s);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt-media__acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin: 0;
  padding: var(--esp-4) var(--esp-5) var(--esp-5);
}

.prompt-media__aviso {
  color: var(--tinta);
  font-size: var(--texto-s);
  font-weight: 600;
}

/* ---------- Entidades en movimiento ----------
   Referencia de ritmo: banda de clientes de Erretres. La animación solo
   existe con JS y sin «reducir movimiento»; sin JS queda una lista horizontal
   desplazable. El segundo grupo es una copia visual oculta a lectores. */

.seccion--entidades {
  max-width: none;
  padding-inline: 0;
}

.entidades__cabecera,
.entidades__controles {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.entidades__controles {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(-1 * var(--esp-4));
  margin-bottom: var(--esp-4);
}

.entidades__control {
  min-height: var(--objetivo-minimo);
  padding-block: var(--esp-2);
}

.entidades__ventana {
  overflow-x: auto;
  padding-block: var(--esp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--borde-control) transparent;
}

.entidades__pista {
  display: flex;
  width: max-content;
}

.entidades__lista {
  display: flex;
  flex: none;
  gap: var(--esp-3);
  margin: 0;
  padding: 0 var(--esp-3) 0 0;
  list-style: none;
}

.entidades__lista[aria-hidden="true"] {
  display: none;
}

.entidades__tarjeta {
  flex: 0 0 clamp(11.5rem, 22vw, 17.5rem);
  height: 9.375rem;
  display: grid;
  place-items: center;
  padding: var(--esp-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--fondo-logo);
}

.entidades__tarjeta img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes entidades-fluir {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .entidades__ventana {
    overflow-x: hidden;
  }

  .js .entidades__lista[aria-hidden="true"] {
    display: flex;
  }

  .js .entidades__pista {
    animation: entidades-fluir 340s linear infinite;
  }

  .js .entidades--lento .entidades__pista { animation-duration: 420s; }
  .js .entidades--agil .entidades__pista { animation-duration: 260s; }

  .js .entidades--pausada .entidades__pista,
  .js .entidades:is(:hover, :focus-within) .entidades__pista {
    animation-play-state: paused;
  }

  /* Al pausar con el botón, la banda deja de fluir y se puede recorrer a mano
     (rueda, dedo o teclado). entidades.js convierte el desplazamiento
     congelado de la animación en scroll real para que no dé un salto. */
  .js .entidades--pausada .entidades__ventana {
    overflow-x: auto;
  }
}

@media (max-width: 47.999em) {
  .entidades__tarjeta {
    height: 7.5rem;
    padding: var(--esp-4);
  }

  .entidades__controles {
    justify-content: flex-start;
    margin-top: calc(-1 * var(--esp-3));
  }
}

/* ---------- Banda de cifras ----------
   Números grandes calculados por el generador desde los datos reales
   (nunca escritos a mano). El degradado de texto tiene los dos extremos
   verificados; el respaldo morado cubre navegadores sin background-clip. */

.cifras {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-5) var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  text-align: center;
}

.cifras__numero {
  display: block;
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  line-height: 1.05;
  color: var(--morado);
  font-variant-numeric: tabular-nums; /* el contador no baila al animarse */
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cifras__numero {
    background: var(--degradado-primario);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.cifras__etiqueta {
  display: block;
  margin-top: var(--esp-2);
  margin-inline: auto;
  max-width: 14rem;
  font-size: var(--texto-s);
  color: var(--gris-texto);
}

/* ---------- Mosaico editorial ----------
   Rejilla asimétrica con imagen a sangre: una pieza grande y las demás
   apiladas, titular blanco encima. Reutiliza EXACTAMENTE el velo de las
   portadas (rgba tinta al 0.72 = VELO_PORTADA_OPACIDAD, verificado en el
   build contra imagen blanca): si uno cambia, cambian los dos. */

.mosaico {
  display: grid;
  gap: var(--esp-4);
}

.mosaico__pieza {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 14rem;
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  text-decoration: none;
}

.mosaico__medio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mosaico__pieza::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31, 42, 68, 0.72); /* = velo verificado */
  z-index: 1;
}

.mosaico__contenido {
  position: relative;
  z-index: 2;
  color: var(--blanco);
  padding: var(--esp-5);
}

.mosaico__kicker {
  display: block;
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mosaico__kicker::before {
  content: "› " / "";
}

.mosaico__titulo {
  display: block;
  margin-top: var(--esp-2);
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: var(--texto-xl);
  line-height: 1.15;
  text-wrap: balance;
}

.mosaico__texto {
  margin-top: var(--esp-2);
  font-size: var(--texto-s);
  max-width: 34rem;
}

a.mosaico__pieza:is(:hover, :focus-visible) .mosaico__titulo {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: no-preference) {
  .mosaico__medio {
    transition: transform 0.5s ease;
  }

  a.mosaico__pieza:is(:hover, :focus-visible) .mosaico__medio {
    transform: scale(1.045);
  }
}

@media (min-width: 48em) {
  .mosaico {
    grid-template-columns: 3fr 2fr;
  }

  /* la primera pieza preside; con solo dos, van a la par */
  .mosaico__pieza:first-child {
    grid-row: span 2;
    min-height: 28rem;
  }

  .mosaico--2 .mosaico__pieza:first-child {
    grid-row: auto;
    min-height: 20rem;
  }
}

/* Texto presente para lectores de pantalla pero invisible en pantalla
   (p. ej., la cifra real bajo el contador animado) */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Vídeo incrustado con carga diferida ----------
   La miniatura es una imagen propia; el reproductor externo (YouTube
   sin cookies o Mediateca de EducaMadrid) solo se carga al pulsar
   (video.js). Sin JavaScript, la miniatura enlaza a la fuente. */

.video-marco {
  margin: var(--esp-3) 0 0;
  max-width: 36rem;
}

.video-marco__lienzo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio-m);
  overflow: hidden;
  background: var(--tinta);
}

.video-marco__previa {
  position: absolute;
  inset: 0;
  display: block;
}

.video-marco__previa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Triángulo de play sobre una pastilla de tinta: contraste asegurado
   sobre cualquier miniatura, y el objetivo táctil es el marco entero. */
.video-marco__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.video-marco__play::before {
  content: "";
  grid-area: 1 / 1;
  width: 4.5rem;
  height: 3rem;
  border-radius: var(--radio-m);
  background: var(--tinta);
  opacity: 0.92;
}

.video-marco__play::after {
  content: "";
  grid-area: 1 / 1;
  place-self: center;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent var(--blanco);
  translate: 0.1rem 0;
}

.video-marco__previa:hover .video-marco__play::before,
.video-marco__previa:focus-visible .video-marco__play::before {
  background: var(--morado);
  opacity: 1;
}

.video-marco__lienzo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-marco__aviso {
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--gris-texto);
}

/* ---------- Utilidades ----------
   Evitan atributos style= en las plantillas: la CSP del sitio solo
   permite hojas propias (style-src 'self'), sin estilos en línea. */

.u-mt-2 { margin-top: var(--esp-2); }
.u-mt-3 { margin-top: var(--esp-3); }
.u-mt-4 { margin-top: var(--esp-4); }
.u-mt-6 { margin-top: var(--esp-6); }
.u-mb-2 { margin-bottom: var(--esp-2); }
.u-inline { display: inline-block; vertical-align: middle; }

.rejilla-muestras {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

/* Trazos de la constelación por token de color (decorativos). El recurso
   usa su variante -ink: el amarillo claro no se vería sobre blanco. */
.trazo-azul { stroke: var(--azul); }
.trazo-morado { stroke: var(--morado); }
.trazo-magenta { stroke: var(--magenta); }
.trazo-recurso { stroke: var(--recurso-ink); }
.trazo-area-1 { stroke: var(--area-1); }
.trazo-area-2 { stroke: var(--area-2); }
.trazo-area-3 { stroke: var(--area-3); }
.trazo-area-4 { stroke: var(--area-4); }
.trazo-area-5 { stroke: var(--area-5); }
.trazo-area-6 { stroke: var(--area-6); }

/* Franjas y fichas por token de color (decorativas: el texto acompaña) */
.fondo-azul { background: var(--azul); }
.fondo-morado { background: var(--morado); }
.fondo-magenta { background: var(--magenta); }
.fondo-recurso { background: var(--recurso); }
.fondo-area-1 { background: var(--area-1); }
.fondo-area-2 { background: var(--area-2); }
.fondo-area-3 { background: var(--area-3); }
.fondo-area-4 { background: var(--area-4); }
.fondo-area-5 { background: var(--area-5); }
.fondo-area-6 { background: var(--area-6); }

/* Muestras tipográficas de la guía de estilos */
.muestra-tipo-h1 { font-family: var(--fuente-titular); font-weight: 700; font-size: var(--texto-2xl); }
.muestra-tipo-h2 { font-family: var(--fuente-titular); font-weight: 600; font-size: var(--texto-xl); }
.muestra-tipo-cita { font-family: var(--fuente-cita); font-style: italic; font-size: var(--texto-l); }

.ficha--area-1 { --ficha-color: var(--area-1); --ficha-ink: var(--area-1-ink); }
.ficha--area-2 { --ficha-color: var(--area-2); --ficha-ink: var(--area-2-ink); }
.ficha--area-3 { --ficha-color: var(--area-3); --ficha-ink: var(--area-3-ink); }
.ficha--area-4 { --ficha-color: var(--area-4); --ficha-ink: var(--area-4-ink); }
.ficha--area-5 { --ficha-color: var(--area-5); --ficha-ink: var(--area-5); }
.ficha--area-6 { --ficha-color: var(--area-6); --ficha-ink: var(--area-6-ink); }
.ficha--recurso { --ficha-color: var(--recurso); --ficha-ink: var(--recurso-ink); }