/*
 * Estilos base y componentes (docs/design_system.md §12.4).
 * Mobile first. Puntos de quiebre (§11.1): 640 · 768 · 1024 · 1280.
 * Regla de contraste (§12.1): el texto solo usa --ink, --ink-2, --muted, --navy,
 * --green-bendicion, los tonos *-text, o blanco sobre navy. Los colores de unidad
 * (--blue, --orange-oclac, --green-pidel…) son para bordes, iconos y acentos.
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  overflow-wrap: break-word;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 var(--space-4); font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
small, .texto-pequeno { font-size: var(--fs-small); }
.cifra { font-variant-numeric: tabular-nums; }

a { color: var(--blue-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }

:focus-visible, .is-focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.icono { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: middle; }

.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(--space-2); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4); background: var(--navy); color: var(--white);
  border-radius: var(--radius-control); font-weight: 600;
}
.saltar:focus { top: var(--space-2); color: var(--white); }
main:focus { outline: none; }

/* Entrada al bajar (js/revelar.js): la clase solo la pone el script, así que sin JavaScript
   nada queda oculto. Al terminar, el script la quita y el elemento recupera sus transiciones. */
.revelar {
  opacity: 0;
  transition: opacity var(--duracion-entrada) var(--easing-entrada), transform var(--duracion-entrada) var(--easing-entrada);
  transition-delay: calc(var(--escalon, 0) * var(--escalon-entrada));
}
/* Cada bloque entra desde el borde de su lado de la pantalla (el script elige el lado). */
.revelar--izquierda { transform: translateX(calc(-1 * var(--desplazamiento-entrada))); }
.revelar--derecha { transform: translateX(var(--desplazamiento-entrada)); }
.revelar.is-visible { opacity: 1; transform: none; }
/* Mientras entran de lado, los bloques asoman fuera de la pantalla: clip lo recorta sin crear
   una barra de desplazamiento horizontal ni romper los elementos sticky (no es overflow: hidden). */
main { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout ---------- */
.contenedor { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Una lista de cards es una lista para el lector de pantalla, no para el ojo. */
ul.grid, ol.grid { list-style: none; margin: 0; padding: 0; }
.grid > * { grid-column: span 4; }
@media (min-width: 768px) {
  .grid--2 > * { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid--2 > * { grid-column: span 6; }
  .grid--3 > * { grid-column: span 4; }
  .grid--4 > * { grid-column: span 3; }
}
.seccion { padding-block: var(--space-7); }

/* ---------- Banner de aviso ---------- */
.banner-aviso { background: var(--surface); border-bottom: 1px solid var(--line); }
.banner-aviso p { margin: 0; padding-block: var(--space-3); max-width: none; }

/* ---------- Header y menú ---------- */
.header { background: var(--navy); color: var(--white); position: relative; z-index: 20; }
.header__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.header a { color: var(--white); }
/* El alto manda y el ancho sale de la proporción del SVG (1650 × 519). */
.logo-nadbio { display: block; width: auto; height: 36px; }
.header__logo { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.header__acciones { display: flex; align-items: center; gap: var(--space-2); }
.header__icono {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch-min); min-height: var(--touch-min);
  background: none; border: 0; color: var(--white); cursor: pointer; border-radius: var(--radius-control);
  font: inherit;
}
.header__icono:hover { background: var(--navy-hover); }
.header__icono .icono { width: 24px; height: 24px; }

.menu { list-style: none; margin: 0; padding: 0; }
.menu__enlace {
  display: flex; align-items: center; min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3); text-decoration: none; font-weight: 500; border-radius: var(--radius-control);
}
.menu__enlace:hover { background: var(--navy-hover); color: var(--white); }
.menu__enlace[aria-current] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Móvil y tablet (< 1024 px): panel a pantalla completa bajo la barra del header. */
@media (max-width: 1023.98px) {
  .header__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 64px); overflow-y: auto;
    background: var(--navy); padding: var(--space-5) var(--gutter) var(--space-7);
    border-top: 1px solid rgb(255 255 255 / 0.12);
  }
  .header__nav.is-abierto { display: block; }
  .menu__enlace { font-size: 1.125rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); border-radius: 0; }
  .menu__novedades { margin-top: var(--space-6); width: 100%; }
  html.menu-abierto { overflow: hidden; }
}
/* Escritorio: menú en línea, sin botón. */
@media (min-width: 1024px) {
  .header__toggle { display: none; }
  .header__barra { flex-wrap: nowrap; }
  .header__logo { order: 0; }
  .header__nav { display: flex; align-items: center; gap: var(--space-4); order: 1; margin-left: auto; }
  .menu { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .menu__enlace { font-size: 0.9375rem; }
  .header__acciones { order: 2; }
}

/* ---------- Página de sección ---------- */
.logo-unidad { display: block; height: 3.5rem; width: auto; max-width: 100%; margin-bottom: var(--space-4); }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: var(--white); margin-top: var(--space-8); }
.footer a { color: var(--white); }
.footer__columnas { display: grid; gap: var(--space-6); padding-block: var(--space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .footer__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__titulo { color: var(--white); font-size: 1rem; margin-bottom: var(--space-3); }
.footer__logo { margin-bottom: var(--space-4); }
.footer__logo .logo-nadbio { height: 48px; }
.footer__frase { margin-bottom: var(--space-4); max-width: 34ch; }
.footer__lista { list-style: none; margin: 0; padding: 0; }
.footer__lista a { display: inline-flex; align-items: center; min-height: var(--touch-min); overflow-wrap: anywhere; }
.footer__direccion { font-style: normal; margin-bottom: var(--space-3); }
.footer__legal { border-top: 1px solid rgb(255 255 255 / 0.15); font-size: var(--fs-small); }
.footer__legal p { margin: 0; padding-block: var(--space-2); max-width: none; }
.footer__legal .contenedor { padding-block: var(--space-4); }
.footer__legal-barra { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); }
.footer__legal-enlaces { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.footer__legal-enlaces a { display: inline-flex; align-items: center; min-height: var(--touch-min); }

/* ---------- Botón ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-control); border: 2px solid transparent;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.boton--primario { background: var(--navy); color: var(--white); }
.boton--primario:hover, .boton--primario.is-hover { background: var(--navy-hover); color: var(--white); }
.boton--primario:active, .boton--primario.is-activo { background: var(--ink); }
.boton--secundario { background: var(--white); color: var(--navy); border-color: var(--navy); }
.boton--secundario:hover, .boton--secundario.is-hover { background: var(--surface); color: var(--navy-hover); border-color: var(--navy-hover); }
.boton--secundario:active, .boton--secundario.is-activo { background: var(--line); }
/* WhatsApp: verde de La Bendición (7,2:1 con blanco). El verde de marca de WhatsApp no alcanza el contraste. */
.boton--whatsapp { background: var(--green-bendicion); color: var(--white); }
.boton--whatsapp:hover, .boton--whatsapp.is-hover { background: var(--green-bendicion-hover); color: var(--white); }
.boton--sobre-navy { background: var(--white); color: var(--navy); }
.boton--sobre-navy:hover { background: var(--surface); color: var(--navy); }
.boton[disabled], .boton[aria-disabled="true"] { background: var(--line); color: var(--ink-2); border-color: var(--line); cursor: not-allowed; }
.boton[aria-busy="true"] { cursor: progress; }
.boton__spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (max-width: 639.98px) { .boton--ancho-movil { width: 100%; } }

/* ---------- Enlace ---------- */
.enlace-externo .icono { width: 1em; height: 1em; margin-left: 2px; }
.enlace--deshabilitado { color: var(--ink-2); text-decoration: none; cursor: not-allowed; }

/* ---------- Etiqueta de tipo ---------- */
.etiqueta {
  display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 600; background: var(--surface); color: var(--navy); border: 1px solid var(--line);
}

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-5); box-shadow: var(--shadow-sm); height: 100%;
  border-top: 4px solid var(--navy);
}
.card:hover, .card.is-hover { box-shadow: var(--shadow-md); }
.card:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.card__titulo { font-size: var(--fs-h3); margin: 0; }
.card__titulo a { color: var(--navy); text-decoration: none; }
.card__titulo a::after { content: ""; position: absolute; inset: 0; } /* toda la card es clicable */
.card { position: relative; }
.card__titulo a:focus-visible { outline: none; }
.card__texto { margin: 0; color: var(--ink-2); }
.card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink-2); }
.card__meta dt { font-weight: 600; }
.card__meta div { display: flex; gap: var(--space-1); }
.card__meta dd { margin: 0; }
.card__imagen { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.card__imagen img { width: 100%; height: 100%; object-fit: cover; }
.card--deshabilitada { opacity: 1; background: var(--surface); box-shadow: none; }
.card--deshabilitada .card__titulo, .card--deshabilitada .card__titulo a { color: var(--ink-2); }
/* Acento de unidad: solo el borde superior (regla de ecosistema). */
.card--fundacion { border-top-color: var(--blue-fundacion); }
.card--oclac { border-top-color: var(--orange-oclac); }
.card--pidel { border-top-color: var(--green-pidel); }
.card--bendicion { border-top-color: var(--green-bendicion); }
.card--servicios { border-top-color: var(--blue); }
.estado { font-size: var(--fs-small); font-weight: 600; }
.estado--abierto { color: var(--green-text); }
.estado--cerrado { color: var(--ink-2); }

/* ---------- Tarjeta KPI ---------- */
.kpi { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5); background: var(--white); }
.kpi__etiqueta { font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; margin: 0 0 var(--space-2); }
.kpi__valor { font-size: var(--fs-h2); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; margin: 0; line-height: 1.1; }
.kpi__unidad { font-size: 1rem; font-weight: 500; color: var(--ink-2); }
.kpi__variacion { font-size: var(--fs-small); margin: var(--space-2) 0 0; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.kpi__pie { font-size: var(--fs-small); color: var(--muted); margin: var(--space-3) 0 0; }
.kpi--vacio .kpi__valor { color: var(--ink-2); }
/* Mini-línea: un trazo, sin ejes; el valor exacto está en la tarjeta (§5.5). */
.kpi__mini { display: block; width: 100%; height: 32px; margin-top: var(--space-3); overflow: visible; }
.kpi__mini polyline { fill: none; stroke: var(--orange-oclac); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kpi__enlace { margin: var(--space-3) 0 0; font-size: var(--fs-small); }
.kpis { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); }
.observatorio-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-6) var(--space-8); }
.observatorio-home__intro, .metodologia__texto { max-width: var(--measure); }
.metodologia { padding-block: var(--space-6) var(--space-8); }
.metodologia__tipo, .metodologia__usos, .informe__periodo { color: var(--ink-2); }

/* ---------- Contenedor de gráfico ---------- */
.grafico { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-5); background: var(--white); }
.grafico__titulo { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.grafico__descripcion { color: var(--ink-2); }
.grafico__controles { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.grafico__lienzo { position: relative; min-height: 260px; max-height: 300px; background: var(--surface); border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .grafico__lienzo { min-height: 360px; max-height: none; } }
.grafico__estado { color: var(--ink-2); text-align: center; padding: var(--space-5); margin: 0; }
.grafico__leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0; margin: var(--space-4) 0; font-size: var(--fs-small); }
.grafico__tabla summary { cursor: pointer; font-weight: 600; color: var(--blue-text); min-height: var(--touch-min); display: flex; align-items: center; gap: var(--space-2); }
.grafico__pie { font-size: var(--fs-small); color: var(--muted); margin: var(--space-3) 0 0; }

/* ---------- Tabla de datos ---------- */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-control); }
.tabla { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.tabla caption { text-align: left; font-weight: 600; padding: var(--space-3); color: var(--navy); }
.tabla th, .tabla td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tabla thead th { background: var(--surface); color: var(--navy); }
/* La cabecera puede partirse en dos líneas: si no, «Leche cruda (USD/L)» empuja el valor
   fuera de la pantalla del móvil y hay que desplazar para leer el precio. */
.tabla thead th { white-space: normal; }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla th[scope="row"] { position: sticky; left: 0; background: var(--white); } /* primera columna fija (§11.1) */
.tabla__vacia { padding: var(--space-5); color: var(--ink-2); margin: 0; }
.tabla__nota { display: block; font-size: 0.8125rem; color: var(--ink-2); white-space: normal; }
.tabla__parte { color: var(--ink-2); }
.tabla abbr[title] { text-decoration: none; }

/* ---------- Ficha de indicador (PLAN 5.3) ---------- */
/* minmax(0, 1fr): sin esto, una tabla ancha estira la columna y la página se sale en el móvil. */
.ficha-indicador { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6) var(--space-8); }
.ficha-indicador__tema { font-size: var(--fs-small); font-weight: 600; color: var(--orange-text); margin: 0 0 var(--space-2); }
.ficha-indicador__descripcion { color: var(--ink-2); max-width: var(--measure); }
.ficha-indicador__periodo { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ficha-indicador__periodo a { min-height: var(--touch-min); display: inline-flex; align-items: center; }
.ficha-indicador__periodo a[aria-current] { font-weight: 700; color: var(--navy); text-decoration: none; }
.ficha-indicador__ver-todos { margin-top: var(--space-3); }
.ficha-indicador__metadatos dt { font-weight: 600; color: var(--navy); margin-top: var(--space-3); }
.ficha-indicador__metadatos dd { margin: 0; }
.ficha-indicador__version { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.ficha-indicador__metodologia { max-width: var(--measure); }
/* El contenedor de la ficha no centra: lleva dentro la nota de lectura y el gráfico. */
.grafico__lienzo--ficha { display: block; max-height: none; padding: var(--space-3); margin-bottom: var(--space-3); }
.grafico__area { position: relative; height: 260px; }
@media (min-width: 1024px) { .grafico__area { height: 360px; } }
/* Dentro del área visible del gráfico, sin desplegar nada (D-049 §3). */
.grafico__nota-lectura { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 4px solid var(--orange-oclac); background: var(--white); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.grafico__cita, .grafico__leyenda-texto { font-size: var(--fs-small); color: var(--ink-2); margin: var(--space-3) 0 0; }

/* ---------- Dashboard del Observatorio (PLAN 5.4) ---------- */
.dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-6) var(--space-8); }
.dashboard__cabecera h1 { margin-bottom: var(--space-2); }
.dashboard__intro { color: var(--ink-2); max-width: var(--measure); }
.dashboard__vista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dashboard__resumen { margin: 0; font-weight: 600; color: var(--navy); }
.dashboard__filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-6); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.dashboard__filtros .campo { margin: 0; min-width: min(100%, 18rem); }
.dashboard__filtros-cabecera { flex-basis: 100%; display: flex; justify-content: space-between; align-items: center; }
.dashboard__filtros-titulo { font-size: 1rem; margin: 0; }
.dashboard__grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.dashboard__grupo legend { flex-basis: 100%; padding: 0; margin-bottom: var(--space-1); }
.dashboard__opcion { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); cursor: pointer; }
.dashboard__opcion input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.dashboard__anios { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-end; }
.dashboard__anios .campo__ayuda { flex-basis: 100%; max-width: none; }
/* `.boton` pone su propio display, que le ganaría al atributo hidden. */
.dashboard__abrir[hidden], .dashboard__cerrar[hidden], .dashboard__ver[hidden] { display: none; }
.dashboard__aviso { flex-basis: 100%; }
/* Mientras llega la vista nueva (filtros que se aplican al elegir): se nota que algo pasa. */
.dashboard__resultados.is-cargando { opacity: 0.5; transition: opacity 0.2s; }
.dashboard__anio { display: inline-flex; align-items: center; gap: var(--space-2); }
.dashboard__anio .select { width: auto; }
.dashboard__cerrar { min-height: var(--touch-min); padding: 0 var(--space-3); background: none; border: 1px solid var(--navy); border-radius: var(--radius-control); color: var(--navy); font: inherit; cursor: pointer; }
.dashboard__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); }
.dashboard__nota, .dashboard__ficha { margin: 0; color: var(--ink-2); max-width: var(--measure); }
/* Filtros y resultados: uno debajo del otro; en escritorio, los filtros en una columna a la
   izquierda que se queda a la vista al bajar (sesión de diseño del 28 sep). */
.dashboard__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.dashboard__resultados { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
@media (min-width: 1024px) {
  .dashboard__cuerpo { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; }
  .dashboard__cuerpo .dashboard__filtros { position: sticky; top: var(--space-4); flex-direction: column; align-items: stretch; }
  .dashboard__cuerpo .dashboard__filtros .campo { min-width: 0; }
}
/* El último valor de lo que se está viendo es la respuesta de la página: grande, con el
   acento del Observatorio como borde (regla de ecosistema; nunca como color de texto). */
.dashboard__kpis .kpi { border-left: 4px solid var(--orange-oclac); }
.dashboard__kpis .kpi__valor { font-size: var(--fs-h1); }

/* «Ver más» bajo la tabla corta de /datos/, y la página con todos los reportes: una tabla
   por serie, lado a lado en escritorio (sesión de diseño del 28 sep). */
.grafico__mas { margin: var(--space-4) 0 0; }
.reportes { padding-bottom: var(--space-8); }
.reportes__volver { margin-bottom: var(--space-4); }
.reportes__intro { color: var(--ink-2); }
.reportes__tablas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); margin-top: var(--space-6); }
@media (min-width: 1024px) { .reportes__tablas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; } }
.reportes__titulo { font-size: var(--fs-h3); }
.reportes__informes { margin-top: var(--space-7); }
.reportes__lista-informes { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.reportes__lista-informes a { font-weight: 600; }
.reportes__informe-meta { display: block; font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- /datos/: hero y «Sobre el Observatorio» (sesión de diseño del 28 sep) ---------- */
.pagina-datos main { padding-top: 0; }
/* Navy con texto blanco (16:1). La foto irá detrás, con un velo navy; hasta entonces, navy. */
.datos-hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding-top: var(--space-8); }
.datos-hero__rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; padding-bottom: var(--space-7); }
.datos-hero h1 { color: var(--white); margin-bottom: var(--space-5); }
.datos-hero h1::after { content: ""; display: block; width: 120px; height: 4px; margin-top: var(--space-5); background: var(--orange-oclac); }
.datos-hero__texto p { color: var(--white); font-size: 1.125rem; }
/* La diagonal es decorativa y solo va en escritorio, a la derecha del texto: en el móvil
   quedaría bajo texto blanco, y blanco sobre --blue no llega a 4,5:1. */
@media (min-width: 1024px) {
  .datos-hero::before { content: ""; position: absolute; inset: 0 0 0 55%; background: var(--blue); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
  .datos-hero__rejilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-8); }
}
.datos-hero__cinta { position: relative; z-index: 1; list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.datos-hero__dato { padding: var(--space-2) var(--space-4); border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--orange-text); color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.datos-hero__dato--fecha { background: var(--white); color: var(--navy); }
/* En el móvil la cinta se apila: cada dato, una pastilla entera, y la cinta separada del borde. */
@media (max-width: 639.98px) {
  .datos-hero__cinta { padding-bottom: var(--space-5); gap: var(--space-2); }
  .datos-hero__dato { border-radius: var(--radius-control); }
}

.datos-sobre { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .datos-sobre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
/* Hueco para la foto que llegará después. */
.datos-sobre__imagen { aspect-ratio: 4 / 3; background: var(--line); border-radius: var(--radius-card); }
.datos-sobre__foto { display: block; width: 100%; height: auto; object-fit: cover; }
.datos-sobre__antetitulo { margin-bottom: var(--space-1); font-weight: 600; color: var(--ink-2); }
.datos-sobre__texto p:not([class]) { color: var(--ink-2); }
.datos-sobre__aliados-titulo { font-size: 1rem; margin: var(--space-5) 0 var(--space-3); }
.datos-sobre__aliados { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.datos-sobre__aliados img { height: 56px; width: auto; max-width: 120px; object-fit: contain; }
.datos-sobre__aliados a { display: inline-flex; min-height: var(--touch-min); align-items: center; }

/* /datos/: las tarjetas destacadas cambian la vista del dashboard de la misma página. */
.observatorio-home .dashboard { padding-block: 0; scroll-margin-top: var(--space-4); }
.observatorio-home__subtitulo { margin-bottom: var(--space-4); }
.observatorio-home__destacados > li.is-actual .kpi { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
/* Hoja inferior del móvil: los filtros suben desde abajo (js/dashboard.js). */
.hoja-inferior { width: 100%; max-width: none; max-height: 85vh; margin: auto 0 0; padding: 0; border: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--surface); overflow-y: auto; }
.hoja-inferior::backdrop { background: rgb(15 23 42 / 0.5); }
.hoja-inferior .dashboard__filtros { border: 0; border-radius: 0; flex-direction: column; align-items: stretch; }
.hoja-inferior .dashboard__ver { width: 100%; }

/* ---------- Migas de pan ---------- */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: 0; margin: var(--space-4) 0; font-size: var(--fs-small); }
.migas li { display: inline-flex; align-items: center; gap: var(--space-1); }
.migas li + li::before { content: "/"; color: var(--muted); margin-right: var(--space-1); }
.migas [aria-current] { color: var(--ink-2); }

/* ---------- Sub-navegación ---------- */
.subnav { border-bottom: 1px solid var(--line); }
.subnav ul { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.subnav a { display: flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-3); white-space: nowrap; text-decoration: none; color: var(--ink-2); font-weight: 500; border-bottom: 3px solid transparent; }
.subnav a:hover { color: var(--navy); }
.subnav a[aria-current] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 700; }

/* ---------- Paginación ---------- */
.paginacion ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-5) 0; }
.paginacion a, .paginacion span { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: var(--touch-min); min-height: var(--touch-min); padding: 0 var(--space-3); border-radius: var(--radius-control); border: 1px solid var(--line); text-decoration: none; }
.paginacion a { color: var(--navy); }
.paginacion a:hover { background: var(--surface); }
.paginacion [aria-current] { background: var(--navy); color: var(--white); border-color: var(--navy); font-weight: 700; }
.paginacion [aria-disabled="true"] { color: var(--ink-2); background: var(--surface); }

/* ---------- Formulario y buscador ---------- */
.campo { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); max-width: 40rem; }
.campo__label { font-weight: 600; color: var(--ink); }
.campo__requerido { color: var(--orange-text); }
.campo__ayuda { font-size: var(--fs-small); color: var(--ink-2); margin: 0; }
.campo__error { font-size: var(--fs-small); color: var(--orange-text); font-weight: 600; margin: 0; display: flex; gap: var(--space-1); align-items: flex-start; }
.input, .select {
  font: inherit; color: var(--ink); background: var(--white);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink-2); border-radius: var(--radius-control); width: 100%;
}
.input:hover, .select:hover { border-color: var(--navy); }
.input:disabled, .select:disabled { background: var(--surface); color: var(--ink-2); border-color: var(--line); cursor: not-allowed; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border: 2px solid var(--orange-text); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--touch-min); padding-top: var(--space-2); }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); flex-shrink: 0; }
.check input:disabled + span { color: var(--ink-2); }
.buscador { display: flex; gap: var(--space-2); max-width: 40rem; }
.buscador .input { flex: 1; min-width: 0; }
.buscador--header .input { border-color: var(--white); }

/* ---------- Aviso ---------- */
.aviso { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-control); border: 1px solid; border-left-width: 4px; margin-bottom: var(--space-4); }
.aviso p { margin: 0; }
.aviso .icono { width: 24px; height: 24px; }
.aviso--info { background: var(--surface); border-color: var(--blue); color: var(--ink); }
.aviso--info .icono { color: var(--blue-text); }
.aviso--exito { background: var(--surface); border-color: var(--green-pidel); color: var(--ink); }
.aviso--exito .icono { color: var(--green-text); }
.aviso--error { background: var(--surface); border-color: var(--orange-oclac); color: var(--ink); }
.aviso--error .icono { color: var(--orange-text); }

/* ---------- Galería y lightbox ---------- */
.galeria { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0; margin: 0; }
@media (min-width: 768px) { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galeria a { display: block; border-radius: var(--radius-control); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgb(15 23 42 / 0.92); }
.lightbox__cuerpo { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: var(--space-8) var(--space-4) var(--space-4); gap: var(--space-3); }
.lightbox__imagen { max-height: 75vh; width: auto; }
.lightbox__pie { color: var(--white); margin: 0; text-align: center; }
.lightbox__boton { position: absolute; background: var(--white); color: var(--navy); border: 0; border-radius: var(--radius-pill); min-width: var(--touch-min); min-height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox__cerrar { top: var(--space-4); right: var(--space-4); }
.lightbox__anterior { left: var(--space-2); top: 50%; }
.lightbox__siguiente { right: var(--space-2); top: 50%; }

/* ---------- Video con carga diferida ---------- */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--navy); border-radius: var(--radius-card); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__portada { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--white); background: var(--navy); border: 0; cursor: pointer; font: inherit; text-decoration: none; padding: var(--space-4); text-align: center; }
.video__portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.video__play { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--white); color: var(--navy); }
.video__play .icono { width: 28px; height: 28px; }
.video__titulo { position: relative; font-weight: 600; }

/* ---------- Finca La Bendición (4.6; diseño del 28 sep) ----------
   El verde de la unidad (--green-bendicion, 7,2:1) es texto de títulos y fondo de bandas;
   el lima solo pinta barras y bordes decorativos o va sobre navy (§12.1). */
.pagina-finca main { padding-top: 0; }
.pagina-finca main h2 { color: var(--green-bendicion); }
.finca-texto > p, .finca-texto .rich-text p { max-width: var(--measure); }
.finca-intro { color: var(--ink-2); font-size: 1.125rem; }

/* Hero: la foto de la finca a sangre, con el nombre abajo sobre un velo verde. */
.finca-hero { position: relative; display: grid; align-items: end; min-height: min(88vh, 44rem); color: var(--white); background: var(--green-bendicion); overflow: hidden; }
.finca-hero--sin-foto { min-height: auto; padding-top: var(--space-8); }
.finca-hero picture, .finca-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finca-hero:not(.finca-hero--sin-foto)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--green-bendicion) 92%, transparent) 0%, color-mix(in srgb, var(--green-bendicion) 55%, transparent) 38%, transparent 70%);
}
.finca-hero__texto { position: relative; z-index: 1; padding-block: var(--space-8) var(--space-7); }
.finca-hero h1 { color: var(--white); max-width: 14ch; margin-bottom: var(--space-3); }
/* El sello real de la certificación (3 oct), con el año al lado: el sello no lo dice. */
.finca-hero__sello { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: var(--fs-small); font-weight: 600; }
.finca-hero__logo { width: 88px; height: 88px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.35)); }
@media (min-width: 768px) { .finca-hero__logo { width: 120px; height: 120px; } }
.finca-hero__lema { margin: 0; font-size: 1.125rem; font-weight: 500; }
.finca-hero__lugar { margin: var(--space-1) 0 0; font-size: var(--fs-small); }

/* La banda de cifras: la tierra de la finca. La barra muestra qué parte de las 420 ha es pasto
   y cuánta arena tiene el suelo; el texto ya lo dice, la barra solo lo hace ver. */
.finca-numeros { background: var(--green-bendicion); color: var(--white); padding-block: var(--space-7) var(--space-8); }
.pagina-finca .finca-numeros h2 { color: var(--white); margin-bottom: var(--space-6); }
.finca-numeros__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.finca-cifra { border-top: 1px solid color-mix(in srgb, var(--white) 35%, transparent); padding-top: var(--space-4); }
.finca-cifra--tierra { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .finca-numeros__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .finca-cifra--tierra { grid-column: span 2; }
}
.finca-cifra p { margin: 0; max-width: none; }
.finca-cifra__valor { font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; }
.finca-cifra__etiqueta { margin-top: var(--space-2) !important; font-weight: 500; }
.barra { display: block; width: 100%; height: 12px; margin-top: var(--space-4); border-radius: var(--radius-pill); overflow: hidden; }
.barra__fondo { fill: color-mix(in srgb, var(--white) 22%, transparent); }
.barra__parte { fill: var(--lime-bendicion); }
.barra__parte--arena { fill: var(--white); }
.barra__leyenda { margin-top: var(--space-2) !important; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); }
.barra__marca { width: 12px; height: 12px; border-radius: 2px; background: var(--lime-bendicion); }

/* ¿Qué es? con la ficha al lado (debajo en el móvil). */
.finca-que-es { display: grid; gap: var(--space-6); padding-block: var(--space-8); }
@media (min-width: 1024px) {
  .finca-que-es { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: auto 1fr; gap: var(--space-6) var(--space-8); align-items: start; }
  .finca-que-es > .finca-texto { grid-row: 1 / span 2; }
  .finca-que-es__foto { grid-column: 2; }
}
.finca-ficha { background: var(--surface); border-top: 4px solid var(--green-bendicion); border-radius: var(--radius-card); padding: var(--space-5); }
.pagina-finca .finca-ficha__titulo { font-size: var(--fs-h3); }
.finca-ficha__lista { margin: 0; display: grid; gap: var(--space-3); }
.finca-ficha__lista dt { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.finca-ficha__lista dd { margin: 0; color: var(--ink); }

/* La 1.ª foto, bajo la ficha de «¿Qué es?» (3 oct): a lo ancho de la pantalla se veía borrosa. */
.finca-que-es__foto { margin: 0; }
.finca-que-es__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.finca-que-es__foto figcaption { font-size: var(--fs-small); color: var(--ink-2); padding-top: var(--space-2); }
/* El video, después de presentar la finca; sin enlace, el hueco gris donde irá. */
.finca-video { padding-bottom: var(--space-8); }
.finca-video__hueco { aspect-ratio: 16 / 9; background: var(--line); border-radius: var(--radius-card); }

/* Principios: filas con el nombre a la izquierda y qué significa a la derecha; no van
   numerados porque no son pasos. */
.finca-principios__lista { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.finca-principio { display: grid; gap: var(--space-2); padding-block: var(--space-5); border-top: 1px solid var(--line); }
.finca-principio:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .finca-principio { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); } }
.finca-principio__titulo { font-size: 1.25rem; color: var(--green-bendicion); margin: 0; }
.finca-principio p { margin: 0; color: var(--ink-2); }

/* Texto con foto al lado. */
.finca-dividida { padding-block: var(--space-8); }
.finca-dividida__rejilla { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) { .finca-dividida--con-foto .finca-dividida__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } }
.finca-dividida__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
@media (max-width: 1023px) { .finca-dividida__foto { aspect-ratio: 4 / 3; } }

/* Suelo y agua: los indicadores evaluados, en lista de dos columnas. */
.finca-suelo { background: var(--surface); padding-block: var(--space-8); }
.finca-suelo__rejilla { display: grid; gap: var(--space-5); }
/* En escritorio el cierre va bajo la intro, a la izquierda, y los indicadores ocupan la derecha
   de arriba abajo: así no queda un hueco bajo la intro. En el móvil, el orden del texto. */
@media (min-width: 1024px) {
  .finca-suelo__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-8); }
  .finca-suelo__rejilla .finca-indicadores { grid-column: 2; grid-row: 1 / span 2; }
  .finca-suelo__cierre { grid-column: 1; grid-row: 2; }
}
.finca-indicadores, .finca-lista { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2) var(--space-5); }
.finca-indicadores { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); align-self: center; }
.finca-indicadores li { padding: var(--space-3) var(--space-4); background: var(--white); border-left: 4px solid var(--green-bendicion); border-radius: var(--radius-control); font-weight: 600; color: var(--ink); }
.finca-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.finca-lista li { position: relative; padding-left: var(--space-5); }
.finca-lista li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--green-bendicion); }

/* Agricultura e investigación, una debajo de la otra: lado a lado, la lista de investigación
   dejaba un hueco grande bajo agricultura. La lista se reparte a lo ancho. */
.finca-dos { display: grid; gap: var(--space-8); }

/* Certificación: el sello es texto (no el logotipo del certificador) y repite lo que dice
   el párrafo, así que el lector de pantalla se lo salta. */
.finca-certificacion { display: grid; gap: var(--space-6); padding-block: var(--space-8); align-items: center; }
@media (min-width: 768px) { .finca-certificacion { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); } }
.finca-certificacion__sello {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 13rem; aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
  border: 3px solid var(--green-bendicion); box-shadow: inset 0 0 0 8px var(--white), inset 0 0 0 10px var(--lime-bendicion);
  color: var(--green-bendicion); padding: var(--space-5);
}
.finca-certificacion__nombre { font-weight: 700; line-height: 1.2; }
.finca-certificacion__anio { font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; margin-block: var(--space-1); }
.finca-certificacion__alcance { font-size: var(--fs-small); font-weight: 600; }
.finca-certificacion__resultado { font-weight: 600; color: var(--ink); padding-left: var(--space-4); border-left: 4px solid var(--lime-bendicion); }

/* Laboratorio vivo: el ciclo del modelo NADBIO, en navy porque es el del ecosistema. Los
   pasos van numerados porque son una secuencia. */
.finca-laboratorio { background: var(--navy); color: var(--white); padding-block: var(--space-8); }
.pagina-finca .finca-laboratorio h2 { color: var(--white); }
.finca-laboratorio .finca-intro { color: var(--white); }
.finca-ciclo { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: none; }
.finca-ciclo__paso { position: relative; display: flex; align-items: center; gap: var(--space-4); font-size: 1.25rem; font-weight: 700; }
.finca-ciclo__numero { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--lime-bendicion); color: var(--navy); font-size: 1rem; }
/* La línea que une los pasos: vertical en el móvil, horizontal desde 1024 px. */
.finca-ciclo__paso:not(:last-child)::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.75rem; width: 2px; height: var(--space-4); background: var(--lime-bendicion); }
@media (min-width: 1024px) {
  .finca-ciclo { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
  .finca-ciclo__paso { flex-direction: column; align-items: flex-start; font-size: 1.0625rem; }
  .finca-ciclo__paso:not(:last-child)::after { left: 3.25rem; top: calc(1.375rem - 1px); width: calc(100% - 3.5rem + var(--space-3)); height: 2px; }
}
.finca-laboratorio__texto p { max-width: var(--measure); }

/* Filosofía: cierra la página sobre una foto, con el bucle que vuelve a empezar. */
.finca-filosofia { position: relative; background: var(--green-bendicion); color: var(--white); padding-block: var(--space-9); overflow: hidden; }
.finca-filosofia__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finca-filosofia--con-foto::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--green-bendicion) 84%, transparent); }
.finca-filosofia__texto { position: relative; z-index: 1; }
.pagina-finca .finca-filosofia h2 { color: var(--white); }
.finca-bucle { list-style: none; margin: var(--space-6) 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.finca-bucle li { position: relative; padding: var(--space-2) var(--space-4); border: 2px solid var(--lime-bendicion); border-radius: var(--radius-pill); font-weight: 700; }
/* La flecha entre pasos es decoración: el orden ya lo da la lista ordenada. */
.finca-bucle li:not(:last-child)::after { content: "→" / ""; position: absolute; right: calc(-1 * var(--space-5)); top: 50%; transform: translateY(-50%); font-weight: 400; }
.finca-filosofia__cierre { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; max-width: 22ch; margin-top: var(--space-7); }

/* ---------- Ajustes de D-039 §6 ---------- */
/* El h1 no va pegado al header; el Home no lo necesita porque abre con el hero. */
main { padding-top: var(--space-6); }
.pagina-home main { padding-top: 0; }
/* La card es flex en columna: sin esto, la etiqueta se estira a todo el ancho. */
.card > .etiqueta { align-self: flex-start; }

/* ---------- Cuerpo en bloques ---------- */
article.contenedor > section { margin-top: var(--space-6); }
.cuerpo__figura { margin: 0 0 var(--space-5); }
.cuerpo__figura figcaption, .cita figcaption { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--space-2); }
.cita { margin: 0 0 var(--space-5); padding-left: var(--space-5); border-left: 4px solid var(--blue); }
.cita blockquote { margin: 0; font-size: 1.125rem; }
.tabla-cuerpo table { border-collapse: collapse; width: 100%; }
.tabla-cuerpo th, .tabla-cuerpo td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; }
.tabla-cuerpo thead th { background: var(--surface); }

/* ---------- Home (4.7; estructura de la maqueta, sesión de diseño del 28 sep) ---------- */
html:has(.pagina-home) { scroll-behavior: smooth; }
.seccion__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }

/* Hero: claro. Con foto de fondo, un velo del mismo gris claro la aclara donde está el texto
   (entero en el móvil, de izquierda a derecha en escritorio), y el texto sigue en navy. */
.hero { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--space-7) var(--space-8); }
.hero--con-foto { position: relative; overflow: hidden; }
.hero__fondo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero--con-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--surface) 86%, transparent); }
@media (min-width: 1024px) {
  .hero--con-foto { padding-block: var(--space-9); }
  .hero--con-foto::before { background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, transparent) 38%, color-mix(in srgb, var(--surface) 30%, transparent) 72%, transparent 100%); }
}
.hero--con-foto > .contenedor { position: relative; z-index: 2; }
.hero__antetitulo {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-control);
  font-size: var(--fs-small); font-weight: 700; color: var(--navy);
}
.hero__antetitulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.hero h1 { text-transform: uppercase; line-height: 1.05; margin-bottom: var(--space-5); }
.hero__marca { display: block; color: var(--navy); }
/* --blue-text y no --blue: ningún color de unidad se usa como color de texto (test_frontend). */
.hero__frase { display: block; color: var(--blue-text); }
.hero__subtitulo { font-size: 1.125rem; color: var(--ink-2); }
.hero__boton { margin-top: var(--space-3); }
/* CA-01: en 360 × 640 el hero tiene que caber en la primera pantalla. */
@media (max-width: 639.98px) {
  .hero { padding-block: var(--space-5) var(--space-6); }
  .hero__antetitulo, .hero h1 { margin-bottom: var(--space-4); }
  .hero__antetitulo { font-size: 0.75rem; padding: var(--space-1) var(--space-3); }
  .hero__subtitulo { font-size: var(--fs-body); line-height: 1.5; }
  .hero__boton { margin-top: 0; }
}

/* Barra de pasos 01–05: pegada arriba al bajar; js/home.js marca los pasos ya recorridos. */
.pasos { position: sticky; top: 0; z-index: 10; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pasos__lista { list-style: none; margin: 0 auto; padding-block: var(--space-2); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pasos__item { position: relative; }
/* La línea que une un paso con el anterior; decorativa. */
.pasos__item + .pasos__item::before { content: ""; position: absolute; top: calc(var(--space-2) + 17px); right: 50%; width: 100%; height: 2px; background: var(--line); }
.pasos__item.is-hecho::before { background: var(--navy); }
.pasos__enlace { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-height: var(--touch-min); padding-top: var(--space-2); text-decoration: none; color: var(--ink-2); }
.pasos__numero {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); font-weight: 700;
}
.pasos__nombre { font-size: var(--fs-small); font-weight: 600; }
.pasos__item.is-hecho .pasos__enlace { color: var(--navy); }
.pasos__item.is-hecho .pasos__numero { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pasos__enlace:hover .pasos__numero { border-color: var(--navy); }
/* En el móvil no caben los cinco nombres: se ven los números y el nombre queda para el lector de pantalla. */
@media (max-width: 639.98px) {
  .pasos__nombre { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Bloques del ecosistema */
.home-bloque { padding-block: var(--space-8); scroll-margin-top: 72px; }
/* Regla de ecosistema (§12.1): el color de cada unidad solo como acento de su bloque —
   bordes, nunca texto ni fondo de texto (D-006). --acento es un alias, no un color nuevo. */
.home-bloque--formacion { --acento: var(--blue-fundacion); }
.home-bloque--datos { --acento: var(--orange-oclac); }
.home-bloque--campo { --acento: var(--green-bendicion); }
.home-bloque--tecnologia { --acento: var(--green-pidel); }
.home-bloque--implementacion { --acento: var(--blue); }
.home-bloque--datos, .home-bloque--tecnologia { background: var(--surface); }
.home-bloque__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
@media (min-width: 1024px) {
  .home-bloque__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .home-bloque--datos .home-bloque__medio { order: -1; }
  .home-bloque--campo .home-bloque__texto { grid-column: 1 / -1; }
  /* Datos sin tarjetas KPI publicadas: el texto no se queda en media página. */
  .home-bloque__rejilla:not(:has(.home-bloque__medio)) { grid-template-columns: minmax(0, 1fr); }
}
.home-bloque__titulo { font-size: var(--fs-h1); text-transform: uppercase; margin-bottom: var(--space-2); }
.home-bloque__subtitulo { font-size: var(--fs-h3); font-weight: 700; color: var(--blue-text); }
.home-bloque__texto > p:not([class]) { color: var(--ink-2); }
.home-bloque__cita { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--acento, var(--navy)); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--surface); }
.home-bloque--datos .home-bloque__cita, .home-bloque--tecnologia .home-bloque__cita { background: var(--white); }
.home-bloque__cita p { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.home-bloque__puntos { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.home-bloque__puntos li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink-2); }
.home-bloque__puntos .icono { color: var(--blue-text); margin-top: 3px; }
.home-bloque__boton { margin-top: var(--space-3); }

/* La foto del bloque, a sangre dentro del marco, con el pie encima. Sin foto, el hueco gris. */
.home-bloque__imagen--con-foto { position: relative; overflow: hidden; }
.home-bloque__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-bloque--implementacion .home-bloque__foto { object-position: center 62%; }
.home-bloque__imagen--con-foto .home-bloque__pie { position: relative; z-index: 1; }
.home-bloque__imagen {
  margin: 0; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: var(--space-4);
  background: var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}
/* Cuadrada solo en escritorio, al lado del texto; en el móvil no ocupa una pantalla entera. */
@media (min-width: 1024px) { .home-bloque__imagen { aspect-ratio: 1 / 1; } }
.home-bloque__pie { width: 100%; padding: var(--space-4) var(--space-5); background: var(--white); border-left: 4px solid var(--acento, var(--navy)); border-radius: var(--radius-control); box-shadow: var(--shadow-md); font-size: var(--fs-small); color: var(--ink-2); }
.home-bloque__pie strong { display: block; font-size: 1.0625rem; color: var(--navy); margin-bottom: var(--space-1); }

/* Las tarjetas KPI ya son cajas: el panel no las mete en otra. */
.home-bloque__panel-titulo { font-size: var(--fs-h3); font-weight: 700; color: var(--navy); }
.home-bloque__panel .kpis { margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* En el móvil, una fila que se desliza: se ve una tarjeta y el borde de la siguiente.
   Igual en la portada y en /datos/, donde las tarjetas no deben empujar el gráfico. */
@media (max-width: 639.98px) {
  .home-bloque__panel .kpis, .observatorio-home__destacados {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px var(--space-2);
  }
  .home-bloque__panel .kpis > li, .observatorio-home__destacados > li { scroll-snap-align: start; }
}

.home-bloque__tarjetas { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .home-bloque__tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-bloque__tarjeta { padding: var(--space-5); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--acento, var(--navy)); border-radius: var(--radius-card); }
.home-bloque__tarjeta h3, .home-bloque__etapa h3 { font-size: 1.125rem; margin-bottom: var(--space-2); }
.home-bloque__tarjeta p, .home-bloque__etapa p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* Las etapas son un proceso: una línea con un punto por etapa, sin cajas ni números (los
   números ya son de la barra de pasos). Vertical hasta 1280 px; en fila, con sitio para
   «Acompañamiento» sin partir la palabra. La línea y los puntos son decorativos. */
.home-bloque__etapas { list-style: none; margin: var(--space-8) auto 0; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.home-bloque__etapa { position: relative; padding-left: var(--space-6); max-width: var(--measure); }
.home-bloque__etapa::before {
  content: ""; position: absolute; left: 0; top: 6px; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--acento, var(--navy)); box-shadow: 0 0 0 4px var(--white);
}
.home-bloque__etapa:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: calc(-1 * var(--space-5)); width: 2px; background: var(--line); }
@media (min-width: 1280px) {
  .home-bloque__etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-bloque__etapa { padding: var(--space-6) var(--space-3) 0 0; }
  .home-bloque__etapa::before { top: 0; }
  .home-bloque__etapa:not(:last-child)::after { left: 12px; top: 5px; bottom: auto; right: calc(-1 * var(--space-5)); width: auto; height: 2px; }
}

/* Impacto real */
.impacto { background: var(--surface); text-align: center; }
.impacto__titulo { font-size: var(--fs-h1); text-transform: uppercase; margin-bottom: var(--space-3); }
.impacto__intro { margin: 0 auto var(--space-7); color: var(--ink-2); font-size: 1.125rem; }
/* Las cifras sin caja: el número es lo que pesa. Separadas por una línea fina,
   horizontal en el móvil y vertical en fila; cuantas haya en el panel, en una sola fila. */
.cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cifras__tarjeta { padding: var(--space-5) var(--space-4); }
.cifras__tarjeta + .cifras__tarjeta { border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .cifras { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .cifras__tarjeta + .cifras__tarjeta { border-top: 0; border-left: 1px solid var(--line); }
}
.cifras__valor { display: block; font-size: var(--fs-h1); font-weight: 700; color: var(--navy); line-height: 1.1; margin-bottom: var(--space-2); }
.cifras__etiqueta { display: block; font-weight: 600; color: var(--ink-2); }
.cifras__corte { display: block; margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-2); }
.sello { margin-top: var(--space-5); font-weight: 600; color: var(--navy); }
.impacto .sello { margin-inline: auto; }

/* ---------- /formacion/ en torno a los cursos (sesión de diseño del 28 sep) ---------- */
.pagina-formacion main { padding-top: 0; }
.formacion-sin-cursos { padding-block: var(--space-7) 0; }
.formacion-pie { padding-block: 0 var(--space-8); }

/* Carruseles (js/carrusel.js). Sin JavaScript: una fila con scroll-snap que se desliza. */
.carrusel__pista {
  list-style: none; margin: 0; padding: 0 0 var(--space-3);
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.carrusel__diapositiva { scroll-snap-align: start; min-width: 0; }
.carrusel__controles { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.carrusel__controles[hidden] { display: none; }
.carrusel__posicion { margin: 0; min-width: 4.5em; text-align: center; font-weight: 600; color: var(--ink-2); }
.carrusel__boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch-min); height: var(--touch-min); padding: 0;
  border: 1px solid var(--navy); border-radius: var(--radius-pill); background: var(--white); color: var(--navy); cursor: pointer;
  transition: background-color 0.2s, transform 0.2s var(--easing-entrada);
}
.carrusel__boton:hover { background: var(--navy); color: var(--white); }
.carrusel__boton:active { transform: scale(0.94); }
.carrusel__boton[disabled] { border-color: var(--line); color: var(--ink-2); background: var(--white); cursor: default; transform: none; }
.carrusel__boton[data-carrusel-anterior] .icono { transform: scaleX(-1); }

/* El de los afiches, con JavaScript: los cursos apilados en la misma celda; el actual entra
   con un fundido y un desplazamiento corto desde el lado hacia el que se avanza. */
.carrusel--apilado .carrusel__pista { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: hidden; padding: 0; }
.carrusel--apilado .carrusel__diapositiva { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.carrusel--apilado .carrusel__diapositiva.is-actual { visibility: visible; opacity: 1; }
.carrusel--apilado .is-entra-derecha { animation: carrusel-entra var(--duracion-carrusel) var(--easing-entrada) both; --desde: var(--desplazamiento-carrusel); }
.carrusel--apilado .is-entra-izquierda { animation: carrusel-entra var(--duracion-carrusel) var(--easing-entrada) both; --desde: calc(-1 * var(--desplazamiento-carrusel)); }
.carrusel--apilado .is-sale-izquierda { animation: carrusel-sale var(--duracion-carrusel) var(--easing-entrada) both; --hacia: calc(-1 * var(--desplazamiento-carrusel)); }
.carrusel--apilado .is-sale-derecha { animation: carrusel-sale var(--duracion-carrusel) var(--easing-entrada) both; --hacia: var(--desplazamiento-carrusel); }
.carrusel--quieto .carrusel__diapositiva { animation: none !important; }
@keyframes carrusel-entra {
  from { opacity: 0; transform: translateX(var(--desde)) scale(0.98); visibility: visible; }
  to { opacity: 1; transform: none; visibility: visible; }
}
@keyframes carrusel-sale {
  from { opacity: 1; transform: none; visibility: visible; }
  to { opacity: 0; transform: translateX(var(--hacia)) scale(0.98); visibility: hidden; }
}

/* Cabecera de cursos: panel con el título a la izquierda (arriba en el móvil) y el afiche. */
.cursos-hero {
  padding-block: var(--space-7);
  background: var(--surface);
  background: linear-gradient(100deg, color-mix(in srgb, var(--blue) 42%, var(--white)) 0%, color-mix(in srgb, var(--blue) 12%, var(--white)) 45%, var(--white) 100%);
}
.cursos-hero__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.cursos-hero__panel { text-align: center; }
.cursos-hero__titulo { font-size: var(--fs-h1); font-weight: 500; letter-spacing: 0.12em; line-height: 1.25; margin-bottom: var(--space-4); }
.cursos-hero__subtitulo { margin: 0 auto var(--space-5); color: var(--ink-2); }
.cursos-hero__ver { min-width: 12rem; background: transparent; color: var(--navy); border: 1px solid var(--navy); border-radius: var(--radius-pill); }
.cursos-hero__ver:hover { background: var(--navy); color: var(--white); }
@media (min-width: 1024px) {
  .cursos-hero { padding-block: var(--space-8); }
  .cursos-hero__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); }
  .cursos-hero__titulo { font-size: clamp(2.5rem, 1.2rem + 2.6vw, 3.5rem); }
}

/* El afiche: la imagen destacada del curso entera (contain: un afiche lleva texto y no se
   recorta). Sin imagen, los datos del curso en blanco sobre navy. */
.afiche {
  display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-md); text-decoration: none;
}
.afiche__imagen { width: 100%; height: 100%; object-fit: contain; }
.afiche__texto {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3);
  height: 100%; padding: var(--space-6); background: var(--navy); color: var(--white);
}
.afiche__modalidad { align-self: flex-start; padding: 2px var(--space-3); border: 1px solid var(--white); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600; }
.afiche__titulo { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; }
.afiche__dato { font-weight: 500; }
.afiche:hover .afiche__titulo { text-decoration: underline; }

/* Filas de cursos por modalidad: tarjetas deslizables; «Ver más» lleva a /formacion/cursos/. */
.fila-cursos__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.fila-cursos__cabecera h2 { margin: 0; }
.fila-cursos__ver {
  display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-4);
  border: 1px solid var(--navy); border-radius: var(--radius-pill); color: var(--navy); font-weight: 600; text-decoration: none;
}
.fila-cursos__ver:hover { background: var(--navy); color: var(--white); }
/* Las mismas cards cuadradas que la cuadrícula: dos y un trozo de la tercera en el móvil (que
   se vea que hay más), tres en tableta, cuatro en escritorio. */
.carrusel--fila .carrusel__pista { grid-auto-columns: 44%; padding: var(--space-1) var(--space-1) var(--space-3); }
.carrusel--fila .carrusel__controles { justify-content: flex-end; margin-top: var(--space-2); }
.carrusel--con-controles .carrusel__pista { scrollbar-width: none; }
.carrusel--con-controles .carrusel__pista::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .carrusel--fila .carrusel__pista { grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3); }
}
@media (min-width: 1024px) {
  .carrusel--fila .carrusel__pista { grid-auto-columns: calc((100% - 3 * var(--space-4)) / 4); }
}

/* ---------- /servicios/ (diseño del 1 oct, prototipo del responsable) ----------
   El azul de Servicios (--blue) solo en bordes y marcas; el texto en navy, ink o --blue-text. */
.pagina-servicios main { padding-top: 0; }
.servicios-hero { padding-block: var(--space-7) var(--space-8); }
.servicios-hero__rejilla { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) { .servicios-hero__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: var(--space-8); } }
.servicios-hero__antetitulo { margin-bottom: var(--space-4); font-size: var(--fs-small); font-weight: 700; color: var(--blue-text); }
.servicios-hero h1 { letter-spacing: -0.02em; margin-bottom: var(--space-5); }
.servicios-hero h1 span { display: block; }
.servicios-hero__intro { font-size: 1.125rem; color: var(--ink-2); margin-bottom: var(--space-5); }
.servicios-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.servicios-hero__figura { margin: 0; }
.servicios-hero__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; border-radius: var(--radius-card); }
@media (min-width: 1024px) { .servicios-hero__foto { aspect-ratio: 6 / 5; } }
.servicios-hero__figura figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-2); }

/* Índice de la página: una franja con los saltos a cada sección. */
.servicios-indice { background: var(--surface); border-block: 1px solid var(--line); }
.servicios-indice ul { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.servicios-indice a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-size: var(--fs-small); font-weight: 600; color: var(--navy); text-decoration: none; }
.servicios-indice a:hover { text-decoration: underline; }
#servicios, #programa, #proceso, #contacto { scroll-margin-top: var(--space-5); }

/* Tarjetas de servicio: borde superior azul, lo que recibirías desplegable y el WhatsApp. */
.servicios-lista__intro { color: var(--ink-2); }
.servicios-filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; }
.servicios-filtros[hidden] { display: none; }
.servicios-filtros button {
  min-height: var(--touch-min); padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
}
.servicios-filtros button:hover { border-color: var(--navy); }
.servicios-filtros button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.servicios-tarjetas { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.servicio-tarjeta { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius-card); }
.servicio-tarjeta[hidden] { display: none; }
.servicio-tarjeta > p { margin: 0; }
.servicio-tarjeta__categoria { font-size: var(--fs-small); font-weight: 600; color: var(--blue-text); }
.servicio-tarjeta__titulo { font-size: 1.125rem; margin: 0; }
.servicio-tarjeta__titulo a { color: var(--navy); text-decoration: none; }
.servicio-tarjeta__titulo a:hover { text-decoration: underline; }
.servicio-tarjeta__texto { color: var(--ink-2); font-size: 0.9375rem; }
.servicio-tarjeta__detalle summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); color: var(--blue-text); font-size: var(--fs-small); font-weight: 600; cursor: pointer; list-style: none; }
/* La flecha de la derecha dice que se despliega: apunta abajo cerrada y arriba abierta. Va en
   lugar del triángulo del navegador. */
.servicio-tarjeta__detalle summary::-webkit-details-marker { display: none; }
.servicio-tarjeta__flecha { width: 1em; height: 1em; transform: rotate(90deg); transition: transform 0.25s var(--easing-entrada); }
.servicio-tarjeta__detalle[open] .servicio-tarjeta__flecha { transform: rotate(-90deg); }
.servicio-tarjeta__detalle ul { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--space-2); font-size: var(--fs-small); color: var(--ink-2); }
/* Al abrir, el texto baja un poco y aparece, en vez de salir de golpe. */
.servicio-tarjeta__detalle[open] ul { animation: desplegar 0.3s var(--easing-entrada); }
@keyframes desplegar {
  from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); }
  to { opacity: 1; transform: none; }
}
.servicio-tarjeta__detalle li { padding-left: var(--space-4); position: relative; }
.servicio-tarjeta__detalle li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.servicio-tarjeta__acciones { margin-top: auto !important; padding-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-small); font-weight: 600; }
.servicio-tarjeta__acciones a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); }
.servicio-tarjeta__whatsapp { color: var(--green-bendicion); }
.servicios-lista__ayuda { margin-top: var(--space-5); }
.servicio-tarjeta__cabeza { display: flex; flex-direction: column; gap: var(--space-3); }
.servicio-tarjeta__cuerpo { display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; }
.servicio-tarjeta__cuerpo > p { margin: 0; }
.servicio-tarjeta__cuerpo[hidden] { display: none; }

/* Desde 640 px, una fila por servicio en vez de tarjetas (diseño del 3 oct, opción A): nombre y
   categoría a la izquierda, resumen en el centro y WhatsApp a la derecha; «Qué recibirías» se
   abre en su sitio, bajo el resumen. Es lo mismo que la lista del móvil, a lo ancho. */
@media (min-width: 640px) {
  .servicios-tarjetas { gap: 0; border-top: 3px solid var(--blue); }
  .servicio-tarjeta {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-6); row-gap: var(--space-1);
    align-items: start; padding: var(--space-4) 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  /* El cuerpo deja de ser una caja: sus partes se colocan en la fila. */
  .servicio-tarjeta__cuerpo { display: contents; }
  .servicio-tarjeta__cabeza { grid-column: 1; gap: var(--space-1); }
  .servicio-tarjeta__cabeza > p { margin: 0; }
  .servicio-tarjeta__texto { grid-column: 1; max-width: var(--measure); }
  .servicio-tarjeta__detalle { grid-column: 1; }
  .servicio-tarjeta__acciones { grid-column: 2; grid-row: 1; margin-top: 0 !important; padding-top: 0; }
  .servicio-tarjeta__detalle summary { min-height: 32px; }
  .servicio-tarjeta__detalle ul { max-width: var(--measure); }
  /* «Ver el servicio» repite el enlace del título; en el móvil se queda, porque allí el título
     abre la fila y no es enlace. */
  .servicio-tarjeta__ver { display: none !important; }
}
/* Escritorio: tres columnas, con el resumen y su desplegable en la del centro. */
@media (min-width: 1024px) {
  .servicio-tarjeta { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto; column-gap: var(--space-7); }
  .servicio-tarjeta__cabeza { grid-row: 1 / span 2; }
  .servicio-tarjeta__texto, .servicio-tarjeta__detalle { grid-column: 2; }
  .servicio-tarjeta__texto { grid-row: 1; }
  .servicio-tarjeta__detalle { grid-row: 2; }
  .servicio-tarjeta__acciones { grid-column: 3; }
  .servicio-tarjeta__titulo { font-size: 1.0625rem; }
}

/* Lista compacta del móvil (servicios.js): una fila por servicio, sin hueco entre filas;
   la fila entera abre el servicio y la flecha dice si está abierto. */
.servicios-tarjetas--compacta { gap: 0; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius-card); overflow: hidden; }
.servicios-tarjetas--compacta .servicio-tarjeta { gap: 0; padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.servicios-tarjetas--compacta .servicio-tarjeta:last-child { border-bottom: 0; }
.servicios-tarjetas--compacta .servicio-tarjeta__cabeza { position: relative; gap: 0; padding: var(--space-2) var(--space-4); }
.servicios-tarjetas--compacta .servicio-tarjeta__categoria { font-size: 0.75rem; margin-bottom: -6px; }
.servicios-tarjetas--compacta .servicio-tarjeta__titulo { font-size: 1rem; }
.servicio-tarjeta__abrir {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
  min-height: var(--touch-min); padding: 0; border: 0; background: none; color: var(--navy);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
/* Toda la fila responde al toque, también la categoría de arriba. */
.servicio-tarjeta__abrir::after { content: ""; position: absolute; inset: 0; }
.servicio-tarjeta__abrir:focus-visible { outline: none; }
.servicio-tarjeta__cabeza:has(.servicio-tarjeta__abrir:focus-visible) { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset) - 3px); }
.servicio-tarjeta__abrir .servicio-tarjeta__flecha { flex-shrink: 0; color: var(--blue-text); }
.servicio-tarjeta__abrir[aria-expanded="true"] .servicio-tarjeta__flecha { transform: rotate(-90deg); }
.servicios-tarjetas--compacta .servicio-tarjeta:has([aria-expanded="true"]) { background: var(--surface); }
.servicios-tarjetas--compacta .servicio-tarjeta__cuerpo { padding: 0 var(--space-4) var(--space-4); animation: desplegar 0.3s var(--easing-entrada); }

/* NADBIO 10-365: una franja gris con el programa y lo que incluye. */
.servicios-programa { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--space-8); }
.servicios-programa__rejilla { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) { .servicios-programa__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
.servicios-programa__antetitulo { margin-bottom: var(--space-2); font-size: var(--fs-small); font-weight: 700; color: var(--blue-text); }
.servicios-programa__titulo { font-size: var(--fs-h1); margin-bottom: var(--space-4); }
.servicios-programa__rejilla p:not([class]) { color: var(--ink-2); margin-bottom: var(--space-5); }
.servicios-programa__entregables { list-style: none; margin: 0; padding: 0; }
.servicios-programa__entregables li { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.servicios-programa__entregables li:first-child { border-top: 1px solid var(--line); }
.servicios-programa__entregables strong { color: var(--navy); font-size: 1.0625rem; }
.servicios-programa__entregables span { color: var(--ink-2); font-size: 0.9375rem; }

/* El proceso: cinco pasos en fila (en columna en el móvil), numerados porque son una secuencia. */
.servicios-proceso { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); }
.servicios-proceso li { padding-left: var(--space-5); border-left: 3px solid var(--blue); }
.servicios-proceso strong { display: block; color: var(--navy); }
.servicios-proceso p { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.servicios-proceso__numero { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--blue-text); }
/* En fila desde 768 px: tres por fila hasta 1280 (con cinco, «Acompañamiento» se parte). */
@media (min-width: 768px) {
  .servicios-proceso { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servicios-proceso li { padding: var(--space-4) 0 0; border-left: 0; border-top: 3px solid var(--blue); }
}
@media (min-width: 1280px) { .servicios-proceso { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Contacto: franja navy; se elige el servicio y se escribe por WhatsApp (RN-06). */
.servicios-contacto { background: var(--navy); color: var(--white); padding-block: var(--space-8); }
.servicios-contacto h2 { color: var(--white); }
.servicios-contacto p { color: var(--white); }
.servicios-contacto__lista { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.servicios-contacto__lista a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); color: var(--white); font-weight: 600; }
.servicios-contacto__elegir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-5); }
.servicios-contacto__elegir label { display: grid; gap: var(--space-2); font-weight: 600; flex: 1 1 18rem; max-width: 32rem; }
/* Barra de contacto pegada abajo, solo en el móvil (servicios.js decide cuándo se ve). Entra
   deslizándose desde el borde de abajo y respeta la zona segura del teléfono. */
.barra-contacto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgb(15 23 42 / 0.08);
  transform: translateY(110%); visibility: hidden;
  transition: transform 0.3s var(--easing-entrada), visibility 0s linear 0.3s;
}
.barra-contacto.is-visible { transform: none; visibility: visible; transition: transform 0.3s var(--easing-entrada), visibility 0s; }
.barra-contacto[hidden] { display: none; }
.barra-contacto__texto { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--navy); }
.barra-contacto__boton { flex-shrink: 0; }
@media (min-width: 768px) { .barra-contacto { display: none; } }
.servicios-contacto__selector { min-height: var(--touch-min); padding: 0 var(--space-3); border: 1px solid var(--white); border-radius: var(--radius-control); background: var(--white); color: var(--navy); font: inherit; }

/* ---------- /formacion/cursos/: cuadrícula de cursos (sesión de diseño del 28 sep) ---------- */
/* Cuadrícula de /formacion/cursos/: cards cuadradas con imagen, título y precio (CA-02).
   Dos por fila en el móvil, para recorrer muchos cursos sin bajar tanto. */
.cuadricula-cursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .cuadricula-cursos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .cuadricula-cursos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card-foto {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s var(--easing-entrada);
}
.card-foto:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-foto:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.card-foto__imagen { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.card-foto__imagen--vacia { display: grid; place-items: center; background: var(--line); color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.card-foto__titulo { font-size: 1rem; line-height: 1.3; margin: 0; padding: var(--space-3) var(--space-3) 0; flex-grow: 1; }
@media (min-width: 768px) { .card-foto__titulo { font-size: 1.0625rem; padding: var(--space-4) var(--space-4) 0; } }
.card-foto__titulo a { color: var(--navy); text-decoration: none; }
/* Toda la card es el enlace (el ::after cubre la card), sin anidar un bloque en un <a>. */
.card-foto__titulo a::after { content: ""; position: absolute; inset: 0; }
.card-foto__titulo a:focus-visible { outline: none; }
.card-foto:hover .card-foto__titulo a { text-decoration: underline; }
.card-foto__precio { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
@media (min-width: 768px) { .card-foto__precio { padding: var(--space-2) var(--space-4) var(--space-4); } }
.card-foto:not(:has(.card-foto__precio)) .card-foto__titulo { padding-bottom: var(--space-3); }

/* ---------- La página de un curso (sesión de diseño del 1 oct) ----------
   Más aire entre las partes: afiche, estado, datos, botón, descripción e instructor. */
.curso__afiche img { display: block; width: 100%; max-width: 800px; height: auto; margin-block: var(--space-5); border-radius: var(--radius-card); }
/* Escritorio: mitad y mitad. El afiche ocupa toda su mitad y queda centrado en alto respecto del texto. */
@media (min-width: 1024px) {
  .curso--con-afiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "afiche cabecera" "afiche info"; grid-template-rows: auto 1fr; column-gap: var(--space-8); }
  .curso--con-afiche .curso__cabecera { grid-area: cabecera; }
  .curso--con-afiche .curso__info { grid-area: info; }
  /* El afiche se separa del borde de la pantalla lo mismo que del texto (el column-gap). */
  .curso--con-afiche .curso__afiche { grid-area: afiche; align-self: center; margin-left: calc((min(100vw, var(--container-max)) - 100vw) / 2 - var(--gutter) + var(--space-8)); }
  .curso--con-afiche .curso__afiche img { max-width: none; margin-block: 0; }
}
.pagina-curso .estado { margin-bottom: var(--space-4); }
.pagina-curso .card__meta { gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.pagina-curso .card__meta div { gap: var(--space-2); }
.pagina-curso .card__meta + p { margin-bottom: var(--space-7); }
.pagina-curso article p, .pagina-curso article li { line-height: 1.7; }
.pagina-curso article p { margin-bottom: var(--space-5); }
.pagina-curso article h2 { margin-top: var(--space-8); margin-bottom: var(--space-5); }
.pagina-curso article ul[role="list"] { padding-left: 0; list-style: none; }
.pagina-curso article ul[role="list"] li + li { margin-top: var(--space-3); }

/* ---------- /nosotros/ (sesión de diseño del 1 oct) ----------
   Navy, el color de NADBIO Group. El momento fuerte es el principio del suelo; lo demás, quieto. */
.pagina-nosotros main { padding-top: 0; }
.nosotros-hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding-block: var(--space-8); }
.nosotros-hero__foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 78%; }
/* Velo navy: entero en el móvil, de izquierda a derecha en escritorio, donde va el texto. */
.nosotros-hero--con-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--navy) 82%, transparent); }
@media (min-width: 1024px) {
  .nosotros-hero { padding-block: var(--space-9); }
  .nosotros-hero--con-foto::before { background: linear-gradient(90deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 88%, transparent) 45%, color-mix(in srgb, var(--navy) 20%, transparent) 100%); }
}
.nosotros-hero__texto { position: relative; z-index: 2; }
.pagina-nosotros .nosotros-hero h1 { color: var(--white); letter-spacing: -0.02em; margin-bottom: var(--space-5); }
.nosotros-hero__entrada { max-width: 46ch; margin: 0; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.5; }
/* La franja de saltos es la de /servicios/; en el móvil se desliza de lado en vez de partirse. */
@media (max-width: 767.98px) {
  .nosotros-indice ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nosotros-indice li { flex-shrink: 0; }
}
#modelo, #historia, #equipo, #certificaciones, #redes { scroll-margin-top: var(--space-5); }

/* Hueco gris donde irá cada foto, hasta que llegue (como en la portada y /datos/). */
.nosotros-hueco { background: var(--line); }
.nosotros-texto p { max-width: var(--measure); }
.nosotros-quienes { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-8); }
@media (min-width: 1024px) { .nosotros-quienes--con-foto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; } }
.nosotros-quienes__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.nosotros-principio__intro { margin-top: var(--space-6); font-weight: 600; color: var(--ink-2); }
/* El principio del suelo, grande: es la frase que resume la página. La raya lima es decorativa. */
.nosotros-principio { margin: var(--space-4) 0 var(--space-6); padding-left: var(--space-5); border-left: 6px solid var(--lime-bendicion); }
.nosotros-principio p { margin: 0; max-width: 24ch; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--navy); letter-spacing: -0.01em; }

.nosotros-modelo { background: var(--navy); color: var(--white); padding-block: var(--space-8); }
.pagina-nosotros .nosotros-modelo h2 { color: var(--white); }
.nosotros-modelo__texto p { max-width: var(--measure); }

/* Historia: una línea vertical con un punto por año; en tablet y escritorio, el año a la izquierda. */
.nosotros-historia { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.nosotros-historia__hito { position: relative; padding: 0 0 var(--space-6) var(--space-6); }
.nosotros-historia__hito::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); }
.nosotros-historia__hito:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 1.4rem; bottom: 0.2rem; width: 2px; background: var(--line); }
.nosotros-historia__anio { margin: 0 0 var(--space-1); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--navy); }
.nosotros-historia__texto { margin: 0 0 var(--space-2); max-width: var(--measure); }
@media (min-width: 768px) {
  .nosotros-historia__hito { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: var(--space-7); padding-left: 0; }
  .nosotros-historia__anio { grid-column: 1; grid-row: 1 / span 4; text-align: right; white-space: nowrap; }
  .nosotros-historia__texto { grid-column: 2; }
  .nosotros-historia__hito::before { left: calc(10.5rem + var(--space-7) / 2 - 6px); top: 0.55rem; }
  .nosotros-historia__hito:not(:last-child)::after { left: calc(10.5rem + var(--space-7) / 2 - 1px); top: 1.55rem; }
}

/* Equipo: el presidente con su biografía entera; los demás, en columnas separadas por una raya. */
.nosotros-equipo { background: var(--surface); border-block: 1px solid var(--line); padding-block: var(--space-8); }
.nosotros-presidente { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: 4px solid var(--navy); }
.nosotros-presidente p { max-width: var(--measure); }
@media (min-width: 768px) { .nosotros-presidente--con-foto { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-7); align-items: start; } }
.nosotros-retrato { width: 100%; max-width: 16rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.nosotros-persona__nombre { font-size: 1.25rem; margin-bottom: var(--space-1); }
.nosotros-presidente .nosotros-persona__nombre { font-size: var(--fs-h3); }
.nosotros-persona__cargo { margin-bottom: var(--space-4); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.nosotros-personas { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .nosotros-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); } }
@media (min-width: 1024px) { .nosotros-personas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nosotros-persona { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.nosotros-persona .nosotros-retrato { margin-bottom: var(--space-4); }
.nosotros-persona p:last-child { margin-bottom: 0; }

.nosotros-certificaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .nosotros-certificaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nosotros-certificacion { padding: var(--space-5); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius-control); }
.nosotros-certificacion p { margin: 0; }
.nosotros-certificacion .nosotros-certificacion__nombre { margin-block: var(--space-2); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--navy); }
.nosotros-certificacion__titular { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }

.nosotros-redes { margin: 0; display: grid; }
.nosotros-redes > div { padding-block: var(--space-4); border-top: 1px solid var(--line); }
.nosotros-redes > div:last-child { border-bottom: 1px solid var(--line); }
.nosotros-redes dt { font-weight: 700; color: var(--navy); }
.nosotros-redes dd { margin: var(--space-1) 0 0; max-width: var(--measure); color: var(--ink-2); }
@media (min-width: 768px) {
  .nosotros-redes > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
  .nosotros-redes dd { margin: 0; }
}

/* Mensaje institucional: cierra la página en navy, sobre una foto cuando la haya. */
.nosotros-mensaje { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding-block: var(--space-9); }
.nosotros-mensaje__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nosotros-mensaje--con-foto::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--navy) 84%, transparent); }
.nosotros-mensaje__texto { position: relative; z-index: 1; }
.nosotros-mensaje__texto p { max-width: var(--measure); }
.pagina-nosotros .nosotros-mensaje h2 { color: var(--white); max-width: 22ch; margin-bottom: var(--space-6); }
.nosotros-mensaje__cierre { margin-top: var(--space-6); padding-left: var(--space-5); border-left: 6px solid var(--lime-bendicion); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }

/* ---------- /datos/informes/ (sesión de diseño del 2 oct) ----------
   El más reciente destacado y los anteriores en filas: son una serie que solo cambia de año, y
   en tarjetas había que leer tres líneas de título para encontrar la diferencia. */
.informe-reciente { padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--orange-oclac); border-radius: var(--radius-control); }
@media (min-width: 768px) { .informe-reciente { padding: var(--space-6) var(--space-7); } }
.informe-reciente__antetitulo { margin-bottom: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--orange-text); }
.informe-reciente__titulo { font-size: var(--fs-h3); margin-bottom: var(--space-2); max-width: 32ch; }
.informe-reciente__titulo a { color: inherit; text-decoration: none; }
.informe-reciente__titulo a:hover { text-decoration: underline; }
.informe-reciente__meta { color: var(--ink-2); margin-bottom: var(--space-5); }
.informe-reciente__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }

.informes-anteriores__titulo { font-size: var(--fs-h3); margin: var(--space-8) 0 var(--space-4); }
.informes-lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.informes-lista__fila { display: grid; gap: var(--space-1) var(--space-6); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.informes-lista__fila p { margin: 0; max-width: none; }
.informes-lista__anio { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--navy); }
.informes-lista__titulo a { color: var(--navy); font-weight: 600; text-decoration: none; }
.informes-lista__titulo a:hover { text-decoration: underline; }
.informes-lista__periodo { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.informes-lista__descarga { display: flex; align-items: center; gap: var(--space-4); }
.informes-lista__peso { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.informes-lista__descarga a { display: inline-flex; align-items: center; min-height: var(--touch-min); font-weight: 600; }
/* Desde tablet, una fila de verdad: años, título y descarga alineados en columnas. */
@media (min-width: 768px) {
  .informes-lista__fila { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: center; padding-block: var(--space-3); }
  .informes-lista__fila > :only-child, .informes-lista__titulo:first-child { grid-column: 1 / 3; }
}

/* ---------- /formacion/: cifras de impacto e ISO 9001 (sesión de diseño del 3 oct) ----------
   Una franja navy bajo los cursos destacados: tres cifras grandes separadas por rayas finas y,
   a la derecha, la certificación (su logo es blanco: solo va sobre fondo oscuro). */
.formacion-impacto { background: var(--navy); color: var(--white); padding-block: var(--space-7); }
.formacion-impacto__rejilla { display: grid; gap: var(--space-6); align-items: center; }
.formacion-impacto__cifras { list-style: none; margin: 0; padding: 0; display: grid; }
/* Cada cifra con su ícono: a la izquierda en el móvil (una fila por cifra) y encima desde
   tablet, donde las tres comparten fila y la cifra necesita todo el ancho de su columna. */
.formacion-impacto__cifras li { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid rgb(255 255 255 / 0.25); }
.formacion-impacto__icono { width: 56px; height: 56px; flex-shrink: 0; }
.formacion-impacto__texto { display: flex; flex-direction: column; gap: var(--space-1); }
.formacion-impacto__valor { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1.1; }
.formacion-impacto__etiqueta { font-weight: 500; line-height: 1.3; }
.formacion-impacto__iso { display: flex; align-items: center; gap: var(--space-5); }
.formacion-impacto__logo { width: 60px; height: 120px; flex-shrink: 0; }
.formacion-impacto__iso p { margin: 0; max-width: 28ch; }
.formacion-impacto__norma { display: block; font-size: var(--fs-h3); line-height: 1.2; margin-bottom: var(--space-1); }
/* Desde tablet, las tres cifras en fila, cada una con su raya a la izquierda. */
@media (min-width: 768px) {
  .formacion-impacto__cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formacion-impacto__cifras li { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: 0 var(--space-5); border-bottom: 0; border-left: 1px solid rgb(255 255 255 / 0.35); }
  .formacion-impacto__icono { width: 52px; height: 52px; }
}
/* Escritorio: cifras y certificación en la misma fila. */
@media (min-width: 1024px) {
  .formacion-impacto { padding-block: var(--space-8); }
  .formacion-impacto__icono { width: 64px; height: 64px; }
  .formacion-impacto__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); gap: var(--space-6); }
  .formacion-impacto__iso { padding-left: var(--space-6); border-left: 1px solid rgb(255 255 255 / 0.35); gap: var(--space-4); }
  .formacion-impacto__iso p { font-size: var(--fs-small); }
}

/* ---------- Página de componentes (solo desarrollo) ---------- */
.catalogo__aviso { background: var(--surface); border: 1px dashed var(--ink-2); padding: var(--space-4); border-radius: var(--radius-control); }
.catalogo__componente { border-top: 1px solid var(--line); padding-block: var(--space-6); }
.catalogo__estados { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .catalogo__estados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .catalogo__estados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.catalogo__estado > h4 { font-size: var(--fs-small); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.catalogo__na { color: var(--ink-2); font-size: var(--fs-small); font-style: italic; }
/* Simula el foco para verlo sin teclado; el foco real usa :focus-visible. */
.demo-foco :is(a, button, input, select, summary, .tabla-scroll):not([disabled]),
.demo-foco .card { outline: var(--focus-ring); outline-offset: var(--focus-offset); }