/* Estilos de la web de AEVAC. Todos los colores salen de tokens.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--e-6);
}

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: var(--interlineado);
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-titular);
  line-height: var(--interlineado-titular);
  font-weight: 600;
  margin: 0 0 var(--e-4);
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3, .h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); font-family: var(--f-texto); }

p, ul, ol, dl, blockquote, figure { margin: 0 0 var(--e-4); }
figure + h2, figure + section { margin-top: var(--e-6); }
p, li, dd { max-width: var(--medida); }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--e-2); }

a {
  color: var(--c-tecno);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--c-tecno-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: var(--foco-grosor) solid var(--foco, var(--c-foco));
  outline-offset: 3px;
  border-radius: 2px;
}

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

.saltar {
  position: absolute;
  left: var(--e-4);
  top: -10rem;
  z-index: 100;
  background: var(--c-superficie);
  color: var(--c-tecno);
  padding: var(--e-3) var(--e-4);
  border: var(--linea-informativa) solid var(--c-tecno);
  border-radius: var(--radio);
  font-weight: 700;
}
.saltar:focus { top: var(--e-4); }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}
/* Columna de lectura alineada con el titular de la página. Línea más corta que en el resto de la web. */
.estrecho > * { max-width: 48rem; }
.estrecho, .articulo { --medida: 56ch; }
.estrecho > :is(p, ul, ol) { max-width: var(--medida); }
/* Desde 1024 px, migas, titular y columna de lectura se centran juntos como un bloque, en vez de dejar
   la mitad derecha vacía. Las bandas y rejillas que vienen después siguen usando todo el ancho. */
@media (min-width: 64rem) {
  body:has(.contenedor.estrecho) .migas,
  .cabecera-pagina:has(+ .contenedor.estrecho),
  .contenedor.estrecho { max-width: calc(44rem + 2 * var(--margen)); }
  body:has(.articulo) .migas { max-width: calc(44rem + 2 * var(--margen)); }
  .articulo { margin-inline: auto; }
}

/* Bandas y secciones */
.seccion { padding-block: var(--e-8); }
.seccion--compacta { padding-block: var(--e-7); }
.banda-calida { background: var(--c-superficie-2); }
.banda-marino {
  background: var(--c-marino);
  color: var(--c-sobre-marino);
  --foco: var(--c-acento-sobre-marino);
}
.banda-marino a { color: var(--c-acento-sobre-marino); }
.banda-marino a:hover { color: var(--c-sobre-marino); }
.banda-marino .entradilla, .banda-marino .suave { color: var(--c-sobre-marino-suave); }

.antetitulo {
  display: block;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  margin-bottom: var(--e-3);
}
.banda-marino .antetitulo { color: var(--c-sobre-marino-suave); }

.entradilla { font-size: var(--t-l); color: var(--c-texto-suave); max-width: 60ch; }
.suave { color: var(--c-texto-suave); }
.cabecera-seccion { margin-bottom: var(--e-6); max-width: 60ch; }

/* Cabecera del sitio */
.cabecera {
  background: var(--c-fondo);
  border-bottom: var(--linea) solid var(--c-metal);
  position: relative;
  z-index: 20;
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 4.5rem;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  color: var(--c-logo);
  text-decoration: none;
  min-height: var(--objetivo-min);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 1.375rem;
}
.logo:hover { color: var(--c-logo); }
.logo .logo__img--oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo__img--claro { display: none; }
  :root:not([data-theme="light"]) .logo .logo__img--oscuro { display: block; }
}
:root[data-theme="dark"] .logo .logo__img--claro { display: none; }
:root[data-theme="dark"] .logo .logo__img--oscuro { display: block; }
.logo__img { display: block; height: 2.25rem; width: auto; max-width: none; flex: none; }
.pie__logo { margin-bottom: var(--e-6); }
.pie__logo .logo { max-width: 100%; }
.pie__logo .logo__img { width: 25rem; max-width: 100%; min-width: 0; flex: 0 1 auto; height: auto; }

.menu-boton {
  display: none;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--objetivo-min);
  min-width: var(--objetivo-min);
  padding: var(--e-2) var(--e-4);
  background: var(--c-superficie);
  color: var(--c-texto);
  border: var(--linea-informativa) solid var(--c-borde);
  border-radius: var(--radio);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.menu-boton svg { width: 1.25rem; height: 1.25rem; }

.nav-principal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
}
.nav-principal li + li { margin-top: 0; }
.nav-principal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-min);
  padding: var(--e-2) var(--e-3);
  color: var(--c-texto);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.nav-principal a:hover { color: var(--c-tecno); border-bottom-color: var(--c-metal); }
.nav-principal a[aria-current="page"] { border-bottom-color: var(--c-acento); color: var(--c-tecno); }
.nav-principal .nav-cta { margin-left: var(--e-3); }

.js .menu-boton { display: none; }

.nav-principal a { white-space: nowrap; }
@media (min-width: 75rem) and (max-width: 89.99rem) {
  .nav-principal a { padding-inline: var(--e-2); }
}
/* Con espaciado de texto ampliado (WCAG 1.4.12) el menú pasa a dos líneas en vez de salirse de la pantalla. */
.nav-principal { min-width: 0; }
.nav-principal ul { justify-content: flex-end; }

@media (max-width: 74.99rem) {
  .js .menu-boton { display: inline-flex; }
  .js .nav-principal { display: none; }
  .js .nav-principal.abierto {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--c-fondo);
    border-bottom: var(--linea-informativa) solid var(--c-borde);
    padding: var(--e-4) var(--margen) var(--e-6);
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
  }
  .nav-principal ul { flex-direction: column; align-items: stretch; }
  .nav-principal a { width: 100%; border-bottom: var(--linea) solid var(--c-metal); }
  .nav-principal a[aria-current="page"] { border-left: 4px solid var(--c-acento); border-bottom-color: var(--c-metal); padding-left: var(--e-3); }
  .nav-principal .nav-cta { margin: var(--e-4) 0 0; }
  .nav-principal .nav-cta a { border-bottom: 0; }
  .cabecera__fila { flex-wrap: wrap; }
  html:not(.js) .nav-principal { width: 100%; padding-bottom: var(--e-4); }
}

/* Botones */
.boton, .nav-principal .nav-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--objetivo-min);
  padding: var(--e-2) var(--e-5);
  border-radius: var(--radio);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: var(--linea-informativa) solid var(--c-tecno);
  background: var(--c-tecno);
  color: var(--c-sobre-tecno);
  transition: background-color var(--dur-corta) var(--curva), color var(--dur-corta) var(--curva);
}
.boton:hover, .nav-principal .nav-cta a:hover {
  background: var(--c-tecno-hover);
  border-color: var(--c-tecno-hover);
  color: var(--c-sobre-tecno);
  text-decoration: underline;
}
.boton--secundario { background: transparent; color: var(--c-tecno); }
.boton--secundario:hover { background: var(--c-superficie); color: var(--c-tecno-hover); }
.banda-marino .boton, .hero .boton {
  background: var(--c-sobre-marino);
  border-color: var(--c-sobre-marino);
  color: var(--c-marino);
}
.banda-marino .boton:hover, .hero .boton:hover { background: var(--c-sobre-marino-suave); border-color: var(--c-sobre-marino-suave); color: var(--c-marino); }
.banda-marino .boton--secundario, .hero .boton--secundario {
  background: transparent;
  color: var(--c-sobre-marino);
  border-color: var(--c-sobre-marino);
}
.banda-marino .boton--secundario:hover, .hero .boton--secundario:hover { background: var(--c-marino); color: var(--c-sobre-marino); }
.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

/* Hero */
.hero {
  position: relative;
  color: var(--c-sobre-marino);
  background-color: var(--c-marino);
  --foco: var(--c-acento-sobre-marino);
  isolation: isolate;
  overflow: hidden;
}
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--capa-foto-degradado);
}
.hero__contenido { padding-block: clamp(4rem, 10vw, 9rem); max-width: 48rem; }
.hero__claim {
  font-size: var(--t-claim);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--c-sobre-marino);
  margin-bottom: var(--e-5);
  text-wrap: balance;
}
/* Desde tableta el lema puede salir de la columna de 48rem para caber en una sola línea; nunca pasa del ancho útil. */
@media (min-width: 40rem) {
  .hero__claim { width: max-content; max-width: calc(100vw - 2 * var(--margen)); }
}
.hero__claim-item { white-space: nowrap; }
.hero__claim-sep { color: var(--c-acento-sobre-marino); margin-inline: 0.15em; }
/* Móvil: un tramo por línea. El punto medio sigue en el texto (se lee igual) pero no se pinta. */
@media (max-width: 39.99rem) {
  .hero__claim { letter-spacing: 0.05em; }
  .hero__claim-item { display: block; white-space: normal; }
  .hero__claim-sep {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.hero h1 { font-size: var(--t-hero); margin-bottom: var(--e-5); }
.hero__sub { font-size: var(--t-l); color: var(--c-sobre-marino-suave); max-width: 40rem; }
.hero__pie {
  font-size: var(--t-xs);
  color: var(--c-sobre-marino-suave);
  margin: var(--e-6) 0 0;
  max-width: 40rem;
}
.hero a { color: var(--c-acento-sobre-marino); }

.cabecera-pagina { padding-block: var(--e-7) var(--e-6); }
.cabecera-pagina h1 { max-width: 22ch; }
.cabecera-pagina .entradilla { margin-bottom: 0; }

/* Migas */
.migas { font-size: var(--t-xs); padding-top: var(--e-5); }
.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.migas li + li { margin-top: 0; }
.migas li + li::before { content: "/"; margin-right: var(--e-2); color: var(--c-texto-suave); }
.migas a { display: inline-block; padding-block: var(--e-1); }
/* En móvil las migas son navegación y se tocan con el dedo: 44 px de alto como el resto del menú */
@media (max-width: 47.99rem) {
  .migas ol { align-items: center; row-gap: 0; }
  .migas a { display: inline-flex; align-items: center; min-height: var(--objetivo-min); }
}

/* Rejillas */
.rejilla {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.rejilla > li { margin: 0; }
.rejilla--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
/* Primera tarjeta más grande: la rejilla tiene jerarquía, no seis piezas iguales */
@media (min-width: 48rem) {
  .rejilla--destacada { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--destacada > li:first-child { grid-column: span 2; grid-row: span 2; }
  .rejilla--destacada > li:first-child h3 { font-size: var(--t-xl); }
  .rejilla--destacada > li:first-child .foto { flex: 1; display: flex; }
  .rejilla--destacada > li:first-child .tarjeta__cuerpo { flex: none; }
  .rejilla--destacada > li:first-child .foto img { height: 100%; min-height: 18rem; aspect-ratio: auto; }
}
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
/* Tableta: dos columnas fijas. Si sobra una tarjeta, ocupa la fila entera en vez de quedarse sola a la
   izquierda, y si lleva foto se coloca en horizontal (foto a un lado, texto al otro). */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .rejilla:not([class*="rejilla--"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla:not([class*="rejilla--"]) > li:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
  .rejilla:not([class*="rejilla--"]) > li:last-child:nth-child(odd):not(:first-child) > .tarjeta:has(> .foto) { flex-direction: row; }
  .rejilla:not([class*="rejilla--"]) > li:last-child:nth-child(odd):not(:first-child) > .tarjeta > .foto { flex: 0 0 50%; }
  .rejilla:not([class*="rejilla--"]) > li:last-child:nth-child(odd):not(:first-child) > .tarjeta > .foto img { height: 100%; aspect-ratio: auto; object-fit: cover; }
}
/* Rejilla de cuatro (junta directiva): 2 + 2 en tableta, 4 en fila en escritorio; nunca 3 + 1 */
@media (min-width: 40rem) and (max-width: 74.99rem) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dos-columnas { display: grid; gap: var(--e-7); grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .dos-columnas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .dos-columnas--invertida { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* Tarjetas */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-superficie);
  border: var(--linea) solid var(--c-metal);
  border-radius: var(--radio-l);
  overflow: hidden;
  transition: border-color var(--dur-corta) var(--curva);
}
.tarjeta__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); flex: 1; }
.tarjeta__cuerpo > * { margin: 0; }
.tarjeta :is(h2, h3, h4) { font-size: var(--t-l); }
.tarjeta :is(h2, h3, h4) a { color: var(--c-texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tarjeta :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; }
.tarjeta :is(h2, h3, h4) a:hover { color: var(--c-tecno); text-decoration-thickness: 2px; }
.tarjeta:hover { border-color: var(--c-borde); }
.tarjeta:focus-within { outline: var(--foco-grosor) solid var(--foco, var(--c-foco)); outline-offset: 3px; }
.tarjeta:focus-within a:focus-visible { outline: none; }
.tarjeta__meta { font-size: var(--t-xs); color: var(--c-texto-suave); }
.tarjeta__pie { margin-top: auto !important; padding-top: var(--e-3); font-size: var(--t-xs); color: var(--c-texto-suave); }
.tarjeta--area .icono { width: 2.5rem; height: 2.5rem; color: var(--c-tecno); }

/* Etiquetas */
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.etiquetas li + li { margin-top: 0; }
.etiquetas + figure, .etiquetas + .foto { margin-top: var(--e-6); }
.etiqueta {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 0.125rem var(--e-2);
  border: var(--linea) solid var(--c-borde);
  border-radius: 999px;
  color: var(--c-texto);
  background: var(--c-superficie);
}
.estado { font-weight: 700; }
.estado::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em; border: 2px solid currentColor; border-radius: 50%; vertical-align: 0.05em; }
.estado--activo::before { background: currentColor; }

/* Imágenes, fotos y marcadores */
.foto { margin: 0; }
.foto img, .marcador { width: 100%; aspect-ratio: var(--proporcion, 3 / 2); object-fit: cover; background: var(--c-marcador); }
.foto figcaption { font-size: var(--t-xs); color: var(--c-texto-suave); padding-top: var(--e-2); max-width: var(--medida); }
.foto figcaption .credito { display: block; }
.marcador {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: var(--e-4);
  color: var(--c-marcador-texto);
  border: var(--linea-informativa) dashed var(--c-borde);
  font-size: var(--t-xs);
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(107, 116, 128, 0.12) 18px 19px);
}
.marcador__etiqueta {
  align-self: flex-start;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-marcador);
  padding: 0 var(--e-1);
}
.marcador p { margin: 0; max-width: 46ch; background: var(--c-marcador); }
.tarjeta .foto img, .tarjeta .marcador { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }

/* Cifras */
.cifras { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); list-style: none; padding: 0; margin: 0; }
/* Que la última fila de cifras no quede coja: cinco cifras en una fila, seis en dos filas de tres */
@media (min-width: 75rem) {
  .cifras:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .cifras:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cifras li { margin: 0; border-top: var(--linea-informativa) solid var(--c-acento); padding-top: var(--e-4); }
.banda-marino .cifras li { border-top-color: var(--c-acento-sobre-marino); }
.cifra__valor { display: block; font-family: var(--f-titular); font-size: var(--t-xxl); font-weight: 600; line-height: 1.1; }
.cifra__etiqueta { display: block; margin-top: var(--e-2); }
.cifra__fuente { display: block; font-size: var(--t-xs); margin-top: var(--e-2); }
details.cifra__fuente summary { cursor: pointer; min-height: var(--objetivo-min); display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 0.2em; }
details.cifra__fuente p { margin: var(--e-1) 0 0; overflow-wrap: anywhere; }
.banda-marino details.cifra__fuente summary { color: var(--c-sobre-marino-suave); }
.cifra--pendiente .cifra__valor { font-size: var(--t-l); font-family: var(--f-texto); }

.pendiente {
  display: inline;
  background: var(--c-pendiente-fondo);
  color: var(--c-pendiente);
  font-weight: 700;
  padding: 0 0.3em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.aviso-pendiente {
  background: var(--c-pendiente-fondo);
  color: var(--c-texto);
  border-left: 4px solid var(--c-pendiente);
  padding: var(--e-4);
  border-radius: var(--radio);
  max-width: var(--medida);
  margin-bottom: var(--e-5);
}
.aviso-pendiente strong { color: var(--c-pendiente); }
/* Encima de un formulario, el aviso mide lo mismo que los campos */
.dos-columnas > div > .aviso-pendiente { max-width: 40rem; }
.dos-columnas > div > .aviso { max-width: 40rem; margin-bottom: var(--e-5); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* El pie de una imagen dentro de una tarjeta no toca el borde */
.tarjeta .foto figcaption { padding: var(--e-2) var(--e-4) 0; }
/* En la lista de la red, «· País» no se separa del nombre ni empieza una línea él solo */
.lista-org .tarjeta__meta { white-space: nowrap; }
.aviso {
  background: var(--c-superficie);
  border: var(--linea) solid var(--c-borde);
  border-left: 4px solid var(--c-tecno);
  padding: var(--e-4);
  border-radius: var(--radio);
  max-width: var(--medida);
}
.ejemplo-marca {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-pendiente);
  background: var(--c-pendiente-fondo);
  padding: 0.125rem var(--e-2);
  border-radius: 3px;
}

/* Fuentes */
.fuente { font-size: var(--t-xs); color: var(--c-texto-suave); }
.fuente a { color: var(--c-tecno); }
details.fuentes { margin-top: var(--e-5); font-size: var(--t-xs); color: var(--c-texto-suave); max-width: var(--medida); }
details.fuentes li { margin-block: var(--e-2); }
details.fuentes li a { display: inline-block; min-height: 1.5rem; padding-block: 0.25rem; }
details.fuentes summary { cursor: pointer; min-height: var(--objetivo-min); display: flex; align-items: center; font-weight: 700; color: var(--c-tecno); }

/* Listas de definición (fichas) */
.ficha-datos { display: grid; grid-template-columns: 1fr; gap: 0; border-top: var(--linea) solid var(--c-metal); margin: 0 0 var(--e-6); }
.ficha-datos > div { display: grid; grid-template-columns: 1fr; gap: var(--e-1); padding: var(--e-3) 0; border-bottom: var(--linea) solid var(--c-metal); }
@media (min-width: 40rem) { .ficha-datos > div { grid-template-columns: 12rem 1fr; gap: var(--e-4); } }
.ficha-datos dt { font-weight: 700; }
.ficha-datos dd { margin: 0; }

/* Filtros */
.filtros {
  border: var(--linea) solid var(--c-metal);
  border-radius: var(--radio-l);
  padding: var(--e-5);
  margin: 0 0 var(--e-5);
  background: var(--c-superficie);
}
.filtros legend { font-weight: 700; padding: 0 var(--e-2); font-family: var(--f-titular); font-size: var(--t-l); }
.filtros__grupo { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--objetivo-min);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3);
  border: var(--linea-informativa) solid var(--c-borde);
  border-radius: 999px;
  cursor: pointer;
  background: var(--c-superficie);
  font-weight: 600;
}
.opcion input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-tecno); flex: none; }
.opcion:has(input:checked) { border-color: var(--c-tecno); background: var(--c-superficie-2); box-shadow: inset 0 0 0 1px var(--c-tecno); }
.opcion:has(input:focus-visible) { outline: var(--foco-grosor) solid var(--foco, var(--c-foco)); outline-offset: 3px; }
.opcion input:focus-visible { outline: none; }
.opcion__cuenta { font-weight: 400; color: var(--c-texto-suave); }
.resultado-estado { font-weight: 700; margin: 0 0 var(--e-5); min-height: 1.6em; }
.vacio { padding: var(--e-6); border: var(--linea-informativa) dashed var(--c-borde); border-radius: var(--radio-l); text-align: center; }
.vacio p { margin-inline: auto; }

/* Formularios */
.campo { margin-bottom: var(--e-5); max-width: 40rem; }
.campo label, .campo legend { display: block; font-weight: 700; margin-bottom: var(--e-2); }
.campo .ayuda { display: block; font-size: var(--t-xs); color: var(--c-texto-suave); margin: calc(-1 * var(--e-1)) 0 var(--e-2); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="search"], .campo input[type="tel"], .campo select, .campo textarea {
  width: 100%;
  min-height: var(--objetivo-min);
  padding: var(--e-2) var(--e-3);
  font: inherit;
  color: var(--c-texto);
  background: var(--c-superficie);
  border: var(--linea-informativa) solid var(--c-borde);
  border-radius: var(--radio);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-offset: 1px; }
/* Primera capa de información de protección de datos, junto al botón de envío */
.info-datos { max-width: 40rem; margin-bottom: var(--e-5); padding: var(--e-4); background: var(--c-superficie); border: var(--linea) solid var(--c-borde); border-left: 4px solid var(--c-tecno); border-radius: var(--radio); }
.info-datos h2 { font-size: var(--t-l); margin-top: 0; }
.info-datos dt { font-weight: 700; margin-top: var(--e-3); }
.info-datos dd { margin: 0; }
.campo--check { display: flex; gap: var(--e-3); align-items: flex-start; }
.campo--check input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; accent-color: var(--c-tecno); flex: none; }
.campo--check label { font-weight: 400; margin: 0; }
.campo [aria-invalid="true"] { border-color: var(--c-error); border-width: 3px; }
.error-campo { display: flex; gap: var(--e-2); color: var(--c-error); font-weight: 700; margin: var(--e-2) 0 0; }
.error-campo[hidden] { display: none; }
.resumen-errores {
  border: var(--linea-informativa) solid var(--c-error);
  border-left-width: 6px;
  background: var(--c-error-fondo);
  padding: var(--e-5);
  border-radius: var(--radio);
  margin-bottom: var(--e-6);
  max-width: 40rem;
}
.resumen-errores h2 { font-size: var(--t-l); color: var(--c-error); }
.resumen-errores a { color: var(--c-error); font-weight: 700; }
.mensaje-ok { border: var(--linea-informativa) solid var(--c-ok); border-left-width: 6px; background: var(--c-ok-fondo); color: var(--c-texto); padding: var(--e-5); border-radius: var(--radio); max-width: 40rem; }
.mensaje-ok strong { color: var(--c-ok); }
.obligatorio { font-weight: 400; color: var(--c-texto-suave); }

/* Artículo */
.articulo { max-width: 44rem; }
.articulo > * { max-width: var(--medida); }
.articulo h2 { margin-top: var(--e-7); }
.articulo h3 { margin-top: var(--e-6); }
.articulo img { margin-block: var(--e-5); }
.articulo blockquote { border-left: 4px solid var(--c-acento); padding-left: var(--e-5); font-family: var(--f-titular); font-size: var(--t-l); }
.articulo-meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-xs); color: var(--c-texto-suave); margin-bottom: var(--e-6); list-style: none; padding: 0; }
.articulo-meta li + li { margin-top: 0; }

/* Revista (Conocimiento) */
.destacado { display: grid; gap: var(--e-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .destacado { grid-template-columns: 1.2fr 1fr; } }
.destacado h2 { font-size: var(--t-xxl); }

/* Infografías */
.infografia { display: grid; gap: var(--e-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .infografia { grid-template-columns: 1.3fr 1fr; } }
.infografia svg { width: 100%; height: auto; color: var(--c-texto); }
.infografia .trazo { stroke: currentColor; }
.infografia .trazo-acento { stroke: var(--c-acento); }
.infografia .relleno-acento { fill: var(--c-acento); }
.infografia .relleno-fondo { fill: var(--c-superficie); }
.infografia .texto-svg { fill: var(--c-texto); font-family: var(--f-texto); font-size: 18px; font-weight: 700; }
/* En móvil el esquema se pinta a menos de la mitad de su tamaño: se dejan solo los números, más grandes,
   y el nombre de cada pieza se lee en la lista numerada que va justo debajo. */
@media (max-width: 39.99rem) {
  .infografia .texto-svg { font-size: 30px; }
  .infografia .svg-nombre { display: none; }
}
.infografia .texto-svg-suave { fill: var(--c-texto-suave); font-family: var(--f-texto); font-size: 13px; }
.lista-numerada { counter-reset: n; list-style: none; padding: 0; }
.lista-numerada li { counter-increment: n; position: relative; padding-left: 2.75rem; }
.lista-numerada li::before {
  content: counter(n);
  position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: var(--linea-informativa) solid var(--c-acento);
  border-radius: 50%;
  font-weight: 700; font-size: var(--t-xs);
}

/* Red (ecosistema) */
.red svg { display: block; width: 100%; max-width: 45rem; margin: var(--e-5) auto 0; }
.red .nodo-centro { fill: var(--c-marino); }
.red .nodo-centro-texto { fill: var(--c-sobre-marino); font-family: var(--f-texto); font-weight: 800; font-size: 22px; }
.red .arista { stroke: var(--c-metal); stroke-width: 1.5; }
.red a .nodo { fill: var(--c-superficie); stroke: var(--c-borde); stroke-width: 2; }
.red a:hover .nodo, .red a:focus-visible .nodo { stroke: var(--c-tecno); stroke-width: 4; }
.red a { text-decoration: none; }
.red a:focus-visible { outline: none; }
.red .nodo-texto { fill: var(--c-texto); font-family: var(--f-texto); font-size: 18px; font-weight: 700; paint-order: stroke; stroke: var(--c-superficie); stroke-width: 5px; stroke-linejoin: round; }
.red .nodo-cuenta { fill: var(--c-texto-suave); font-family: var(--f-texto); font-size: 17px; font-weight: 700; paint-order: stroke; stroke: var(--c-superficie); stroke-width: 5px; stroke-linejoin: round; }
/* El mapa de la red no se lee a menos de 40rem; en ese ancho los filtros con su cuenta dan la misma información */
@media (max-width: 39.99rem) {
  .solo-ancho { display: none; }
  .filtros { padding: var(--e-4); }
  .opcion { padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2); gap: 0.375rem; }
}
.grupo-org { margin-top: var(--e-7); }
.lista-org { columns: 16rem; column-gap: var(--e-6); list-style: none; padding: 0; }
.lista-org li { break-inside: avoid; margin: 0 0 var(--e-3); }
.lista-org a { display: inline-block; padding-block: var(--e-1); font-weight: 600; }

/* Iconos */
.icono { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icono--grande { width: 3rem; height: 3rem; stroke-width: 1.25; }

/* Pie */
.pie { padding-block: var(--e-8) var(--e-6); }
.pie__rejilla { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pie h2 { font-size: var(--t-m); font-family: var(--f-texto); font-weight: 700; margin-bottom: var(--e-3); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie ul + h2 { margin-top: var(--e-5); }
.pie li + li { margin-top: 0; }
.pie a { display: inline-flex; align-items: center; min-height: var(--objetivo-min); }
.pie__legal { border-top: var(--linea) solid var(--c-sobre-marino-suave); margin-top: var(--e-7); padding-top: var(--e-5); font-size: var(--t-xs); color: var(--c-sobre-marino-suave); }
.pie__legal p { max-width: none; }
.pie__titular { font-family: var(--f-titular); font-size: var(--t-xl); margin-bottom: var(--e-4); }

/* Galería de componentes */
.muestras { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); list-style: none; padding: 0; }
.muestras li { margin: 0; border: var(--linea) solid var(--c-metal); border-radius: var(--radio); overflow: hidden; background: var(--c-superficie); }
.muestra__color { height: 4rem; border-bottom: var(--linea) solid var(--c-metal); }
.muestra__texto { padding: var(--e-3); font-size: var(--t-xs); }
.muestra__texto code { display: block; }
.componente { border: var(--linea) dashed var(--c-metal); border-radius: var(--radio-l); padding: var(--e-5); margin-bottom: var(--e-6); }

code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }

/* Búsqueda */
.resultados-busqueda { list-style: none; padding: 0; }
.resultados-busqueda li { border-bottom: var(--linea) solid var(--c-metal); padding-block: var(--e-4); margin: 0; }
.resultados-busqueda a { font-weight: 700; font-size: var(--t-l); }
.formulario-busqueda { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; }
.formulario-busqueda .campo { flex: 1 1 16rem; margin-bottom: 0; }

/* Entrada suave al hacer scroll (solo si el usuario no pide menos movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .aparece.preparado { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-media) var(--curva), transform var(--dur-media) var(--curva); }
  .aparece.preparado.visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .tarjeta:hover { transform: none; }
}

@media (forced-colors: active) {
  .tarjeta, .opcion, .marcador, .filtros { border: 1px solid CanvasText; }
  .estado::before { forced-color-adjust: auto; }
}

@media print {
  .cabecera, .pie, .menu-boton, .saltar, .filtros { display: none !important; }
  .hero { color: #000; background: none; }
  .hero::before, .hero__foto { display: none; }
}

/* Compartir un artículo */
.compartir { margin-top: var(--e-7); padding-top: var(--e-5); border-top: var(--linea) solid var(--c-borde); }
.articulo .compartir h2 { margin-top: 0; font-size: var(--t-l); }
.compartir__lista { display: flex; flex-wrap: wrap; gap: var(--e-3); list-style: none; padding: 0; margin: var(--e-4) 0 0; }
.compartir__lista li { margin: 0; max-width: 100%; }
.compartir__lista .boton { text-align: left; }
.compartir__nota { margin-top: var(--e-4); font-size: var(--t-s); color: var(--c-texto-suave); }

/* Enlace que ocupa solo su línea o su elemento de lista: objetivo táctil de al menos 24 px de alto. */
main li > a:only-child,
main p > a:only-child { display: inline-block; padding-block: 0.25rem; }

html:not(.js) .solo-js { display: none; }

main ul > li > a:only-child:not([class]) { display: inline-block; min-height: var(--objetivo-min); padding-block: 0.25rem; box-sizing: border-box; }