/* Chile, país con vocación oceánica
   Paleta y convenciones tomadas de la carta náutica:
   papel frío, tierra en ante, aguas someras en azul pálido, sobreimpresión magenta. */

:root {
  --papel: #ffffff;
  --papel-2: #f2f7fb;
  --tinta: #0a2540;
  --tinta-suave: #445a70;
  --linea: #c9d6e2;
  --somero: #cfe9f7;
  --tierra: #f6d68a;
  --magenta: #c2188b;
  --abismo: #1757d6;
  --kelp: #0a7d4d;
  --turquesa: #007d77; /* Valparaíso y el límite de la zona económica exclusiva en el mapa */

  --eje: var(--tinta);

  --titular: "Archivo", "Arial Narrow", Arial, sans-serif; /* menús, botones y rótulos */
  --display: "Fraunces", "Literata", Georgia, serif; /* titulares */
  --texto: "Literata", Georgia, "Times New Roman", serif;

  --ancho: 76rem;
  --margen: clamp(1rem, 4vw, 2.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

/* Fondo de página: curvas batimétricas, como el relieve submarino de una carta.
   Va fijo detrás del contenido y se aclara hacia abajo para no competir con el texto. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
    url("../img/fondo-batimetria.svg") center / cover no-repeat,
    var(--papel);
}

/* Idiomas: cada texto existe dos veces y se muestra según <html data-lang> */
html[data-lang="es"] [data-l="en"],
html[data-lang="en"] [data-l="es"] { display: none !important; }

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

a { color: inherit; text-decoration-color: #2ee6d6; text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
a:hover { color: var(--magenta); }
/* Chile y el BBNJ: enlaces del texto con subrayado magenta y turquesa neón al pasar el cursor */
.pagina-bbnj main a:not([class]) { text-decoration-color: var(--magenta); }
.pagina-bbnj main a:not([class]):hover, .pagina-bbnj main a:not([class]):focus-visible { color: #2ee6d6; }

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

/* Pautas de interfaz: anclas que no quedan tapadas, toque sin retardo, cifras alineadas */
[id] { scroll-margin-top: 1.5rem; }
a, button, summary, select, label, .m-toque, .m-toque-linea { touch-action: manipulation; }
a, button, summary { -webkit-tap-highlight-color: rgba(194, 24, 139, 0.15); }
.ficha-lado, .etapas li::before, .ruta li a::before, .linea-tiempo time { font-variant-numeric: tabular-nums; }

::selection { background: var(--somero); color: var(--tinta); }
.bloque-tinta ::selection, .etapa ::selection, .especie ::selection { background: var(--papel); color: var(--tinta); }
html { caret-color: var(--magenta); accent-color: var(--abismo); scrollbar-color: #9fb6c2 var(--papel-2); }

.saltar {
  position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--papel);
  padding: 0.6rem 1rem; z-index: 20;
}
.saltar:focus { left: 0; }

.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* ---------- Tipografía ---------- */

/* Titulares en Fraunces: una serif de trazo suave, con el aire de las cartelas grabadas
   de las cartas antiguas. El tamaño óptico se ajusta solo: fina en grande, firme en chico. */
h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 560; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
h3 { font-size: 1.4rem; line-height: 1.18; letter-spacing: -0.01em; }
h4 { font-family: var(--titular); font-stretch: 88%; font-weight: 700; font-size: 1.1rem; line-height: 1.2; letter-spacing: -0.012em; margin: 0; }

p { margin: 0 0 1.1em; max-width: 68ch; }
/* Texto justificado en todos los anchos, también en el teléfono (pedido del 08-10-2026);
   la división de palabras al final de línea reduce los huecos en columnas angostas */
main p, main li, .pie p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.sondeo-cota, .conteo, .estado, .ficha-lado { text-align: left; }
/* Los títulos de las fichas no se justifican: quedan con huecos entre palabras */
main li h3, main li h4 { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.entrada { font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.5; max-width: 56ch; }

/* En las cartas, los nombres de agua van en cursiva. Aquí también: datos, fechas, notas. */
.agua { font-style: italic; color: var(--tinta-suave); }
.nota { font-size: 0.92rem; font-style: italic; color: var(--tinta-suave); max-width: 68ch; }

ul.simple { padding-left: 1.1em; margin: 0 0 1.1em; max-width: 66ch; }
ul.simple li { margin-bottom: 0.45em; }
ul.simple li::marker { color: var(--eje); }

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

.cabecera { background: var(--papel); position: relative; z-index: 10; }
.cabecera-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 1.1rem 0.7rem;
}
.marca {
  font-family: var(--titular); font-stretch: 78%; font-weight: 700; font-size: 1.3rem;
  line-height: 1.1; text-decoration: none; letter-spacing: -0.01em;
}
.marca:hover { color: var(--tinta); }
.marca, .pie-grilla > div:first-child h4 { text-transform: uppercase; letter-spacing: 0.02em; }
.marca em { font-family: var(--texto); font-weight: 400; font-style: italic; font-stretch: 100%; }

.idioma { display: flex; gap: 0.15rem; flex: none; }
.idioma button, .menu-boton {
  font: 600 0.9rem/1 var(--titular); font-stretch: 90%;
  background: none; color: var(--tinta); border: 1px solid transparent;
  padding: 0.45rem 0.6rem; cursor: pointer; border-radius: 2px;
}
.idioma button[aria-pressed="true"] { border-color: var(--tinta); }
.idioma button:hover { border-color: var(--magenta); }

.nav { border-top: 1px solid var(--linea); }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0;
}
.nav a {
  display: block; padding: 0.7rem 0; text-decoration: none;
  font: 500 0.98rem/1.2 var(--titular); font-stretch: 90%;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--tinta); border-bottom-color: var(--linea); }
.nav a[aria-current="page"] { border-bottom-color: #2ee6d6; }
.nav .separa { margin-left: auto; }
/* Las tres secciones temáticas van como fichas con borde del color de su eje; la página actual se rellena de turquesa neón */
.nav a.nav-eje {
  margin-block: 0.4rem; padding: calc(0.42rem - 2px) calc(0.85rem - 2px); border: 2px solid var(--eje); border-radius: 999px;
  font-weight: 600; color: var(--tinta); background: #fff;
  transition: background-color 0.15s, color 0.15s;
}
.nav a.nav-eje:hover, .nav a.nav-eje:focus-visible, .nav a.nav-eje[aria-current="page"] { background: #2ee6d6; color: var(--tinta); }
.nav li:has(> a.nav-eje) + li:has(> a.nav-eje) { margin-left: -0.9rem; }
.menu-boton { display: none; border-color: var(--tinta); }

/* Marco graduado de la carta: se usa una vez arriba y una abajo */
.marco { display: none; }

@media (max-width: 860px) {
  .idioma button, .menu-boton { min-height: 44px; padding-inline: 0.75rem; }
  /* los botones de idioma van más chicos que «Menú», que es el principal en el teléfono */
  .idioma button[data-idioma] { min-height: 34px; padding: 0.3rem 0.45rem; font-size: 0.78rem; align-self: center; }
  .idioma { align-items: center; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
  .menu-boton { display: inline-block; }
  .copiar-cita { min-height: 40px; }
}
/* En pantallas muy angostas los botones bajan a una segunda fila en vez de desbordar */
@media (max-width: 372px) { .cabecera-fila { flex-wrap: wrap; row-gap: 0.3rem; } }
@media (max-width: 860px) {
  .nav ul { display: none; flex-direction: column; padding-block: 0.4rem; }
  .nav.abierto ul { display: flex; }
  .nav .separa { margin-left: 0; }
  .nav a { padding: 0.65rem 0; border-bottom-width: 0; border-left: 3px solid transparent; padding-left: 0.7rem; }
  .nav a[aria-current="page"] { border-left-color: #2ee6d6; }
  .nav a.nav-eje { align-self: flex-start; min-height: 40px; padding: calc(0.42rem - 2px) calc(0.95rem - 2px); border: 2px solid var(--eje); margin-block: 0.3rem; }
  .nav li:has(> a.nav-eje) { display: flex; }
  .nav li:has(> a.nav-eje) + li:has(> a.nav-eje) { margin-left: 0; }
}

/* ---------- Bloques ---------- */

main { display: block; }
.bloque { padding-block: clamp(3.2rem, 7vw, 6rem); }
.bloque + .bloque { border-top: 0; }
.bloque-tinta { background: var(--tinta); color: var(--papel); border-top: 0 !important; }
.bloque-tinta .agua, .bloque-tinta .nota { color: #b9c9d4; }
.bloque-tinta a:hover { color: #ff9bdc; }
.bloque-somero { background: var(--papel-2); }

.titulo-bloque { margin-bottom: 1.6rem; }
.titulo-bloque p { margin-top: 0.8rem; color: var(--tinta-suave); }
/* Artículo largo: una sola columna de lectura */
.articulo { background: var(--papel-2); padding: clamp(1.2rem, 4vw, 2.8rem); max-width: calc(46rem + 2 * clamp(1.2rem, 4vw, 2.8rem)); }
.articulo > * { max-width: 46rem; }
.articulo > :last-child { margin-bottom: 0; }
/* Recuadro celeste que envuelve solo un bloque de texto */
.caja-texto { background: var(--papel-2); padding: clamp(1rem, 3vw, 1.8rem); }
.caja-texto > :last-child { margin-bottom: 0; }
.caja-suelta { margin-bottom: 1.6rem; }
.caja-suelta > p:nth-last-child(2) { margin-bottom: 0; } /* el último párrafo visible, cuando va en dos idiomas */
.articulo h3 { margin: 2.2rem 0 0.7rem; }
.articulo p { margin-bottom: 1rem; }
.articulo .entrada { max-width: 46rem; }
.referencias { font-size: 0.95rem; line-height: 1.5; color: var(--tinta-suave); }
.referencias li { margin-bottom: 0.5rem; overflow-wrap: anywhere; text-align: left; }

.dos { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dos-desigual { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 860px) { .dos, .dos-desigual { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Portada: una hoja de carta náutica ---------- */

.portada { padding-block: clamp(1rem, 2.5vw, 2rem) 0; }
.portada .contenedor { max-width: 92rem; }
.hoja { border: 1px solid var(--linea); background: #ffffff; }
.hoja-carta { position: relative; }
.mapa { margin: 0; }
.mapa svg { width: 100%; height: auto; }

/* El titular va en el Pacífico abierto, como la cartela de una carta */
.cartela {
  position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 43%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.2rem, 3vw, 3rem);
}
.cartela h1 { font-size: clamp(2rem, 3.75vw, 3.6rem); margin-bottom: 1.1rem; }
.cartela .entrada { font-size: clamp(1.05rem, 1.45vw, 1.3rem); max-width: 34ch; margin: 0; }

.leyenda {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--linea);
}
.leyenda-item {
  display: flex; gap: 0.75rem; align-items: center; text-decoration: none;
  padding: 0.7rem clamp(0.8rem, 1.4vw, 1.2rem); border-bottom: 1px solid var(--linea);
  font-size: 0.88rem; line-height: 1.3; color: var(--tinta-suave);
}
.leyenda-item svg { width: 2.6rem; flex: none; }
.leyenda-item strong { display: block; font: 600 1rem/1.2 var(--display); letter-spacing: -0.005em; color: var(--tinta); }
.leyenda-item:hover { background: var(--papel-2); color: var(--tinta-suave); }
.leyenda-item:hover strong { color: var(--eje); text-decoration: underline; text-underline-offset: 0.15em; }
.leyenda-cifra { grid-column: 1 / -1; margin: 0; padding: 0.8rem clamp(0.8rem, 1.4vw, 1.2rem); font-size: 0.95rem; line-height: 1.4; max-width: none; text-align: left !important; }
.leyenda-cifra strong { font-family: var(--titular); font-stretch: 80%; font-size: 1.08rem; }

@media (max-width: 1180px) { .leyenda { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .leyenda { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .cartela { position: static; width: auto; padding: 1.4rem 1.1rem 0.4rem; }
  .cartela h1 { font-size: clamp(2.1rem, 8.4vw, 2.9rem); }
  .cartela .entrada { max-width: none; font-size: 1.15rem; }
}

/* Capas del mapa */
.m-zee-borde { fill: none; stroke: var(--turquesa); stroke-width: 3.5; stroke-dasharray: 10 7; }
.m-zee { fill: var(--somero); }
/* Zonas marítimas: una sola familia de azules, de más intenso junto a la costa a blanco en alta mar */
.m-ai { fill: #5b93c7; stroke: none; }
.m-mt { fill: #8cc3ea; stroke: none; }
.m-zc { fill: none; stroke: var(--abismo); stroke-width: 1; stroke-dasharray: 1 3; }
.m-altamar { fill: #fff; stroke: var(--linea); stroke-width: 1; }
.m-lazona { stroke: var(--abismo); stroke-width: 2; stroke-dasharray: 1 4; stroke-linecap: round; }
.m-t-alta { font-style: italic; font-size: 22px; fill: var(--tinta-suave); letter-spacing: 0.12em; }
.m-amp { stroke: var(--kelp); stroke-width: 1.2; }
.m-vecinos { fill: #eef1f4; stroke: var(--linea); stroke-width: 1; stroke-linejoin: round; } /* resto de Sudamérica */
.m-antartica { fill: #f4f7fa; stroke: var(--tinta-suave); stroke-width: 1.1; stroke-linejoin: round; }
.m-tca { fill: none; stroke: var(--tinta); stroke-width: 1.4; stroke-dasharray: 8 5; }           /* Territorio Chileno Antártico */
.m-d1 { stroke: var(--kelp); stroke-width: 1.4; stroke-dasharray: 5 4; fill-opacity: 0.55; }      /* AMP propuesta: borde discontinuo */
.m-t-tca { font-style: italic; font-size: 18px; fill: var(--tinta); }
.m-amcp { fill: rgba(10, 125, 77, 0.13); stroke: var(--kelp); stroke-width: 1.2; stroke-dasharray: 3 4; } /* área de múltiples usos */
.m-amp-borde { stroke: var(--kelp); stroke-width: 1.2; }
.m-trama-linea { stroke: var(--kelp); stroke-width: 2.2; opacity: 0.6; }
/* Parques aprobados en 2026, aún sin vigencia: trama más abierta y en sentido contrario, sin borde propio */
.m-pend { stroke: none; }
.m-trama-pend { stroke: var(--kelp); stroke-width: 2.2; opacity: 0.75; stroke-dasharray: 5 3; }
.m-tierra { fill: var(--tierra); stroke: var(--tinta); stroke-width: 1.3; stroke-linejoin: round; }
.m-grat { stroke: var(--linea); stroke-width: 1; opacity: 0.7; }
.m-fosa { fill: none; stroke: var(--abismo); stroke-width: 2; }
.m-dorsal { fill: none; stroke: var(--abismo); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.m-monte { fill: var(--abismo); }
.m-isla { fill: var(--tinta); }
.m-luz { fill: var(--turquesa); }
.m-luz-halo { fill: none; stroke: var(--turquesa); stroke-width: 1.5; }
.m-t { font-family: var(--texto); font-size: 19px; fill: var(--tinta); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.m-t-agua { font-style: italic; fill: var(--abismo); stroke-width: 3px; }
.m-t-oceano { font-size: 34px; letter-spacing: 0.4em; stroke: none; opacity: 0.75; }
.m-t-gob { font-style: italic; fill: var(--turquesa); }
.m-t-amp { font-style: italic; fill: var(--kelp); font-size: 16px; }
.m-t-grat { font-family: var(--titular); font-size: 14px; fill: var(--tinta-suave); }
.m-t-luz { font-family: var(--titular); font-weight: 700; font-size: 23px; fill: var(--turquesa); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; }
/* Mapa en pantallas angostas: menos rótulos y más grandes (el tamaño --fs lo calcula sitio.js según el ancho) */
.m-compacto .m-t, .m-compacto .m-t-luz { font-size: var(--fs); stroke-width: 7px; }
.m-compacto .m-t-oceano { letter-spacing: 0.12em; }
.m-compacto .m-t-alta { letter-spacing: 0.06em; }
.m-compacto .m-t-tca { font-size: calc(var(--fs) * 0.86); }
.m-compacto .m-t-grat { font-size: calc(var(--fs) * 0.68); }
/* El faro de Valparaíso: un destello cada pocos segundos */
.m-pulso { transform-box: fill-box; transform-origin: center; animation: pulso 4s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(0.4); opacity: 1; } 55%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-pulso { animation: none; opacity: 0; } html { scroll-behavior: auto; } }

/* ---------- Los tres ejes ordenados por profundidad ---------- */

.sondeo { list-style: none; margin: 0; padding: 0; }
.sondeo > li {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1.5rem;
  border-left: 2px solid var(--tinta); position: relative; padding-bottom: 1.5rem;
}
.sondeo > li:last-child { padding-bottom: 0; }
.sondeo > li::before { content: ""; position: absolute; left: -2px; top: 0.85rem; width: 1.1rem; height: 2px; background: var(--tinta); }
.sondeo-cota { margin: 0; padding: 0.2rem 0 0 1.6rem; font-style: italic; color: var(--tinta-suave); font-size: 1rem; line-height: 1.35; }
.sondeo-fila { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); text-decoration: none; background: var(--papel-2); }
.sondeo-fila img { width: 100%; height: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.sondeo-fila > div { padding: clamp(1rem, 2.5vw, 2rem); border-top: 3px solid var(--eje); display: flex; flex-direction: column; justify-content: center; }
.sondeo-fila h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 0.6rem; }
.sondeo-fila p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--tinta-suave); }
.sondeo-fila:hover { color: var(--tinta); }
.sondeo-fila:hover h3 { color: var(--eje); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
@media (max-width: 860px) {
  .sondeo > li { grid-template-columns: 1fr; padding-left: 1.4rem; }
  .sondeo-cota { padding: 0 0 0.5rem; }
  .sondeo-fila { grid-template-columns: 1fr; }
  /* en una columna la imagen toma su alto propio; con height: 100% invadía el texto de abajo */
  .sondeo-fila img { aspect-ratio: 16 / 9; height: auto; }
  .sondeo-fila > div { background: var(--papel-2); }
}

.e-fondo { --eje: var(--abismo); }
.e-amp { --eje: var(--kelp); }
.e-gob { --eje: var(--magenta); }

/* Etiqueta de eje: un cuadrado de color + nombre */
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0; padding: 0; list-style: none; }
.etiqueta {
  font: 600 0.82rem/1.3 var(--titular); font-stretch: 90%;
  display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;
}
.etiqueta::before { content: ""; width: 0.7em; height: 0.7em; background: var(--eje); flex: none; }

/* ---------- Encabezado de página interior ---------- */

.encabezado { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.encabezado h1 { margin-bottom: 1.1rem; max-width: 18ch; }
.encabezado-eje { border-top: 4px solid var(--eje); }
.foto-ancha { margin: 0; }
.foto-ancha img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.foto-ancha figcaption, .credito { font-size: 0.8rem; font-style: italic; color: var(--tinta-suave); margin-top: 0.35rem; }
@media (max-width: 600px) { .foto-ancha img { aspect-ratio: 3 / 2; } }

.dimension h2 { margin-bottom: 1rem; }
.dimension h2 { display: flex; flex-direction: column-reverse; }
.dimension h2 small { display: block; font: italic 400 1rem/1.3 var(--texto); color: var(--eje); letter-spacing: 0; margin-top: 0.55rem; }

/* ---------- Fichas ---------- */

.fichas { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ficha {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem 1.5rem;
  padding-block: 1.5rem; border-top: 1px solid var(--linea);
}
.ficha:last-child { border-bottom: 1px solid var(--linea); }
/* En Publicaciones, Cursos y Podcast cada ficha va en su propio recuadro celeste */
#lista-biblioteca, #lista-cursos, #lista-podcast { gap: 0.9rem; }
#lista-biblioteca .ficha, #lista-cursos .ficha, #lista-podcast .ficha { background: var(--papel-2); border: 0; padding: clamp(1rem, 3vw, 1.6rem); }
.ficha-lado { font-style: italic; color: var(--tinta-suave); font-size: 1.05rem; padding-top: 0.15rem; }
.ficha h3 { font-size: 1.3rem; margin-bottom: 0.45rem; }
.ficha h3 a { text-decoration: none; }
.ficha h3 a:hover { text-decoration: underline; }
.ficha .ref { font-size: 0.98rem; color: var(--tinta-suave); margin-bottom: 0.6rem; max-width: 72ch; }
.ficha .resumen { font-size: 1.02rem; margin-bottom: 0.8rem; }
.ficha-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.9rem; margin: 0 0 0.8rem; font-size: 0.98rem; }
.ficha dt { color: var(--tinta-suave); font-style: italic; }
.ficha dd { margin: 0; }
@media (max-width: 600px) { .ficha { grid-template-columns: 1fr; } }

.aviso {
  border: 1px solid var(--linea); background: var(--papel-2);
  padding: 0.9rem 1.1rem; font-size: 0.98rem; max-width: 68ch; margin: 0 0 1.5rem;
}
.ejemplo { font: 600 0.78rem/1 var(--titular); font-stretch: 90%; border: 1px solid var(--magenta); color: var(--magenta); padding: 0.25rem 0.45rem; border-radius: 2px; }

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

.boton {
  display: inline-block; font: 600 1rem/1 var(--titular); font-stretch: 90%;
  background: var(--tinta); color: var(--papel); border: 1px solid var(--tinta);
  padding: 0.85rem 1.2rem; text-decoration: none; cursor: pointer; border-radius: 2px;
}
.boton[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.boton:hover { background: #2ee6d6; border-color: #2ee6d6; color: var(--tinta); }
.bloque-tinta .boton { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.bloque-tinta .boton:hover { background: #2ee6d6; border-color: #2ee6d6; color: var(--tinta); }
.enlace-fuerte { font: 600 1rem/1.3 var(--titular); font-stretch: 90%; }
/* Enlace con la forma de las pestañas del menú, en turquesa neón */
.enlace-pildora { display: inline-block; margin: 0.2rem 0.5rem 0.2rem 0; padding: calc(0.6rem - 2px) calc(0.95rem - 2px); border: 2px solid #2ee6d6; border-radius: 1.4rem; background: #fff; color: var(--tinta); text-decoration: none; text-align: left; transition: background-color 0.15s; }
.enlace-pildora:hover, .enlace-pildora:focus-visible { background: #2ee6d6; color: var(--tinta); border-color: #2ee6d6; text-decoration: none; }

.filtros { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; margin-bottom: 1.5rem; }
.campo { display: grid; gap: 0.3rem; }
.campo-clave { flex: 1 1 22rem; max-width: 34rem; }
.campo-clave input { width: 100%; }
.campo label, .campo legend { font: 600 0.9rem/1.2 var(--titular); font-stretch: 90%; padding: 0; }
select, input[type="text"], input[type="email"], textarea {
  font: 1rem/1.4 var(--texto); color: var(--tinta); background: #fff;
  border: 1px solid var(--tinta-suave); border-radius: 2px; padding: 0.6rem 0.7rem; width: 100%;
}
select { min-width: 12rem; }
textarea { min-height: 9rem; resize: vertical; }
.conteo { font-style: italic; color: var(--tinta-suave); margin-bottom: 0.6rem; }

form.contacto { display: grid; gap: 1.1rem; max-width: 36rem; }
fieldset { border: 0; padding: 0; margin: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin-top: 0.4rem; }
.opciones label { font: 400 1rem/1.4 var(--texto); display: inline-flex; gap: 0.45rem; align-items: center; }
.estado { font-size: 0.98rem; margin: 0; }
.estado-error { border: 1px solid var(--magenta); background: #fff; color: var(--magenta); padding: 0.7rem 1rem; margin-top: 0.4rem; text-align: left !important; }
.rotulo { font: 600 0.9rem/1.2 var(--titular); font-stretch: 90%; }
.h-captcha { min-height: 78px; }
.estado-ok { border: 1px solid var(--kelp); background: #fff; color: var(--kelp); padding: 0.8rem 1rem; text-align: left !important; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- BBNJ ---------- */

.estado-actual { border: 1px solid var(--linea); padding: clamp(1.2rem, 3vw, 2rem); background: #fff; }
.estado-actual h2 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.estado-actual dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem; margin: 1.2rem 0 0; }
.estado-actual dt { font: 600 0.95rem/1.4 var(--titular); font-stretch: 90%; }
.estado-actual dd { margin: 0; }
@media (max-width: 600px) { .estado-actual dl { grid-template-columns: 1fr; gap: 0.1rem; } .estado-actual dd { margin-bottom: 0.7rem; } }

.argumentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem clamp(1.5rem, 4vw, 4rem); }
.argumento { border-top: 3px solid var(--magenta); background: var(--papel-2); padding: 0.9rem clamp(1rem, 2.5vw, 1.6rem) 1.3rem; }
.argumento:nth-child(even) { border-top-color: #2ee6d6; }
.argumento h3 { margin-bottom: 0.6rem; }
.argumento p { font-size: 1.04rem; }
.argumento p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .argumentos { grid-template-columns: 1fr; } }

.linea-tiempo { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--papel); margin-left: 0.3rem; }
.linea-tiempo li { position: relative; padding: 0 0 1.5rem 1.6rem; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.2rem 1.2rem; }
.linea-tiempo li::before { content: ""; position: absolute; left: -7px; top: 0.5rem; width: 12px; height: 12px; background: var(--papel); border-radius: 50%; }
.linea-tiempo li.futuro::before { background: var(--tinta); border: 2px solid #2ee6d6; }
.linea-tiempo time { font: 700 1.1rem/1.4 var(--titular); font-stretch: 80%; }
.linea-tiempo p { margin: 0; font-size: 1.02rem; }
@media (max-width: 600px) { .linea-tiempo li { grid-template-columns: 1fr; } }

.franja-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.franja-foto img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; }
.franja-foto .franja-texto { padding: clamp(2rem, 5vw, 4.5rem) var(--margen); align-self: center; max-width: 40rem; }
.franja-foto h2 { margin-bottom: 1rem; }
@media (max-width: 860px) { .franja-foto { grid-template-columns: 1fr; } .franja-foto img { min-height: 0; aspect-ratio: 16 / 9; } }

/* ---------- Quiénes somos ---------- */

.perfil { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.retrato {
  width: 9rem; aspect-ratio: 4 / 5; background: var(--somero); color: var(--abismo);
  display: grid; place-items: center; font: 700 2.6rem/1 var(--titular); font-stretch: 78%;
  object-fit: cover;
}
.perfil h2 { font-size: 1.9rem; margin-bottom: 0.2rem; }
.perfil .rol { font-style: italic; color: var(--tinta-suave); margin-bottom: 0.9rem; }
.perfil p { font-size: 1.04rem; }
@media (max-width: 600px) { .perfil { grid-template-columns: 1fr; } .retrato { width: 7rem; } }

.especie { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; margin: 0 0 1.2rem; background: var(--tinta); color: var(--papel); }
.especie img { width: 100%; height: auto; }
.especie figcaption { padding: 0.8rem 1rem 0.8rem 0; font-size: 0.98rem; line-height: 1.5; }
.especie strong { display: block; font-size: 1.15rem; margin-bottom: 0.25rem; }
.especie .credito { display: block; margin-top: 0.6rem; color: var(--linea); }
.especie .credito a { color: inherit; }
.especie-libro { padding-left: 0.5cm; } /* la portada no parte pegada al borde del recuadro */

/* ---------- Dónde estamos: franja bajo el menú y bloque de etapas ---------- */

.etapa { display: block; background: var(--tinta); color: var(--papel); text-decoration: none; font: 400 0.92rem/1.35 var(--titular); font-stretch: 92%; }
.etapa-fila { display: flex; align-items: center; gap: 0.9rem; padding-block: 0.55rem; }
.etapa:hover { color: #fff; background: #061a2e; }
.etapa strong { font-weight: 700; }
.etapa-puntos { display: flex; align-items: center; gap: 0; flex: none; }
.etapa-puntos i { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid var(--papel); margin-right: 0.9rem; position: relative; }
.etapa-puntos i:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 0.9rem; border-top: 1.5px solid var(--papel); margin-left: 1.5px; opacity: 0.6; }
.etapa-puntos i:last-child { margin-right: 0; }
.etapa-puntos i.hecha { background: var(--papel); }
.etapa-puntos i.actual { background: #2ee6d6; border-color: #2ee6d6; transform: scale(1.35); }

.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: etapa; }
.etapas li { counter-increment: etapa; position: relative; padding: 2.6rem 1.2rem 0 0; border-top: 3px solid var(--linea); font-size: 0.98rem; line-height: 1.45; color: var(--tinta-suave); text-align: left; }
.etapas li::before { content: counter(etapa); position: absolute; top: -1.05rem; left: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--papel); border: 2px solid var(--linea); font: 700 1rem/1 var(--titular); color: var(--tinta-suave); }
.etapas li strong { display: block; font: 600 1.18rem/1.2 var(--display); letter-spacing: -0.01em; color: var(--tinta); margin-bottom: 0.35rem; }
.etapas li.hecha { border-top-color: var(--tinta); }
.etapas li.hecha::before { background: var(--papel); border-color: var(--linea); color: var(--tinta-suave); }
.etapas li.actual { border-top-color: var(--tinta); }
.etapas li.actual::before { background: #2ee6d6; border-color: #2ee6d6; color: var(--tinta); }
.etapas li.actual strong { color: var(--magenta); }
@media (max-width: 860px) {
  .etapas { grid-template-columns: 1fr; }
  .etapas li { border-top: 0; border-left: 3px solid var(--linea); padding: 0 0 1.4rem 2rem; }
  .etapas li::before { top: -0.2rem; left: -1.1rem; }
  .etapas li.hecha { border-left-color: var(--tinta); }
  .etapas li.actual { border-left-color: var(--tinta); }
}

/* ---------- El mapa responde ---------- */

.mapa-info { margin: 0; padding: 0.7rem clamp(0.8rem, 1.6vw, 1.4rem); border-top: 1px solid var(--linea); font-size: 0.98rem; line-height: 1.4; max-width: none; min-height: 2.8rem; text-align: left !important; background: var(--papel-2); }
.mapa-info .enlace-fuerte { margin-left: 0.4rem; white-space: nowrap; }
.m-toque { fill: transparent; stroke: transparent; stroke-width: 2.5; cursor: pointer; pointer-events: all; outline: none; }
.m-toque-linea { fill: none; stroke: transparent; stroke-width: 24; cursor: pointer; pointer-events: stroke; outline: none; stroke-linecap: round; }
.m-toque:hover, .m-toque:focus-visible, .m-toque.activo { stroke: var(--tinta); fill: rgba(10, 37, 64, 0.08); }
.m-toque:focus-visible { stroke: var(--magenta); stroke-width: 4; }
.m-toque-linea:focus-visible { stroke: rgba(194, 24, 139, 0.35); }
.m-toque-linea:hover, .m-toque-linea:focus-visible, .m-toque-linea.activo { stroke: rgba(10, 37, 64, 0.14); }

/* ---------- Mapa: capas, acercamiento y ficha ---------- */

.mapa-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.2rem; padding: 0.55rem clamp(0.8rem, 1.6vw, 1.4rem); border-top: 1px solid var(--linea); }
.mapa-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.mapa-rotulo { font: italic 400 0.92rem/1 var(--texto); color: var(--tinta-suave); margin-right: 0.2rem; }
.mapa-capa, .mapa-zoom { font: 600 0.92rem/1.2 var(--titular); font-stretch: 90%; color: var(--tinta); background: #fff; border: 1px solid var(--linea); border-radius: 999px; min-width: 40px; min-height: 40px; padding: 0.3rem 0.8rem; cursor: pointer; }
.mapa-capa { display: inline-flex; align-items: center; gap: 0.45em; }
.mapa-capa::before { content: ""; width: 0.75em; height: 0.75em; border: 1.5px solid var(--c); background: var(--c); flex: none; }
.mapa-capa[data-capa="amp"] { --c: var(--kelp); }
.mapa-capa[data-capa="zonas"] { --c: #5b93c7; }
.mapa-capa[data-capa="relieve"] { --c: var(--abismo); }
.mapa-capa[aria-pressed="false"] { color: var(--tinta-suave); }
.mapa-capa[aria-pressed="false"]::before { background: transparent; }
.mapa-capa:hover, .mapa-zoom:hover:not(:disabled) { border-color: var(--tinta); }
.mapa-zoom:disabled { color: #8798a8; cursor: default; }
.mapa.sin-amp .c-amp, .mapa.sin-zonas .c-zonas, .mapa.sin-relieve .c-relieve { display: none; }
.mapa svg.m-acercado { touch-action: none; cursor: grab; }
/* Con la carta acercada, el titular deja libre el mapa (en pantallas anchas va encima de él) */
.cartela { transition: opacity 0.15s; }
@media (min-width: 861px) { .hoja-carta.acercada .cartela { opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .cartela { transition: none; } }

.ficha-mapa { position: relative; padding: 0.3rem 3rem 0.3rem 0; }
.ficha-tipo { font: 600 0.85rem/1.2 var(--titular); font-stretch: 90%; color: var(--kelp); margin: 0 0 0.25rem; }
.ficha-mapa h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.ficha-mapa dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.2rem 0.9rem; margin: 0 0 0.6rem; max-width: 70ch; }
.ficha-mapa dl > div { display: contents; }
.ficha-mapa dt { color: var(--tinta-suave); font-style: italic; }
.ficha-mapa dd { margin: 0; }
.ficha-mapa p, .ficha-mapa dd { text-align: left; }
.ficha-mapa p { margin: 0 0 0.5rem; max-width: 70ch; }
.mapa-info .ficha-mapa .enlace-fuerte { margin-left: 0; }
.ficha-cerrar { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta); font: 400 1.4rem/1 var(--titular); cursor: pointer; }
.ficha-cerrar:hover { border-color: var(--tinta); }
@media (max-width: 560px) { .ficha-mapa dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .ficha-mapa dd { margin-bottom: 0.4rem; } }

/* ---------- Elija por dónde empezar ---------- */

.rutas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); }
.ruta img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1rem; }
.ruta h3 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); margin-bottom: 0.5rem; }
.ruta > p { font-size: 1.02rem; line-height: 1.5; color: var(--tinta-suave); margin-bottom: 0.9rem; text-align: left; }
/* Pasos de cada ruta: fichas blancas con el número como marca de sondeo.
   Azul de aguas someras en reposo, magenta (el color de los enlaces) al pasar o enfocar. */
.ruta ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 0.5rem; }
.ruta li { counter-increment: paso; text-align: left; }
.ruta li a {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: center; gap: 0.85rem;
  padding: 0.6rem 0.9rem 0.6rem 0.7rem; background: #fff;
  border: 1px solid var(--linea);
  font: 600 1.05rem/1.3 var(--titular); font-stretch: 90%; text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.ruta li a::before {
  content: counter(paso); width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--somero); color: var(--abismo);
  font: 700 1.05rem/1 var(--titular); transition: background-color 0.15s, color 0.15s;
}
.ruta li a:hover, .ruta li a:focus-visible { color: var(--tinta); border-color: #2ee6d6; background: #e9fcfa; }
.ruta li a:hover::before, .ruta li a:focus-visible::before { background: #2ee6d6; color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .ruta li a, .ruta li a::before { transition: none; } }
@media (max-width: 860px) { .rutas { grid-template-columns: 1fr; } .ruta img { aspect-ratio: 16 / 9; } }

/* ---------- Lo básico en cuatro preguntas ---------- */

.basico { background: var(--papel-2); border-top: 0 !important; margin-top: clamp(2rem, 4vw, 3rem); }
.preguntas details { border-top: 1px solid var(--tinta); }
.preguntas details:last-child { border-bottom: 1px solid var(--tinta); }
.preguntas summary { cursor: pointer; list-style: none; padding: 0.95rem 2.2rem 0.95rem 0; position: relative; font: 600 1.25rem/1.25 var(--display); letter-spacing: -0.01em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.7rem; font: 400 1.7rem/1 var(--titular); color: var(--eje); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas summary:hover { color: var(--eje); }
.preguntas details p { margin: 0 0 1.1rem; font-size: 1.08rem; max-width: 60ch; }

/* ---------- Tablas ---------- */

.tabla-marco { overflow-x: auto; background: #fff; border: 1px solid var(--linea); }
.tabla { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; text-align: left; }
.tabla th, .tabla td { padding: 0.8rem 1rem; vertical-align: top; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla thead th { font: 700 0.92rem/1.25 var(--titular); font-stretch: 90%; background: var(--papel-2); border-bottom: 2px solid var(--eje); white-space: nowrap; }
.tabla tbody th { font: 600 1.08rem/1.25 var(--display); letter-spacing: -0.01em; min-width: 11rem; }
.tabla td { color: var(--tinta-suave); min-width: 4rem; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tinta); }
.tabla td:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--tinta); }
/* Tablas de las áreas marinas protegidas: resumen y lista completa */
.tabla-titulo { margin: 2rem 0 0.8rem; }
.tabla-amp { font-size: 0.95rem; }
.tabla-amp th, .tabla-amp td { padding: 0.5rem 0.8rem; white-space: nowrap; }
.tabla-amp thead th.num { text-align: right; }
.tabla-amp tbody th { font: 600 0.98rem/1.3 var(--titular); font-stretch: 90%; letter-spacing: 0; min-width: 12rem; white-space: normal; }
.tabla-amp tfoot th, .tabla-amp tfoot td { border-top: 2px solid var(--eje); border-bottom: 0; font-weight: 700; color: var(--tinta); }
.tabla-amp td:nth-child(2) { color: var(--tinta-suave); }
.tabla-amp td.num { color: var(--tinta); }
.tabla-permisos td { color: var(--tinta); }
.tabla-permisos td.no { color: var(--tinta-suave); font-style: italic; }
.tabla-permisos tbody th { font: 600 1rem/1.3 var(--titular); font-stretch: 90%; letter-spacing: 0; min-width: 9rem; }
@media (max-width: 860px) { .tabla { font-size: 0.95rem; } .tabla th, .tabla td { padding: 0.65rem 0.75rem; } }

/* ---------- Perfil de las zonas del mar ---------- */

.perfil-zonas { margin: 0 0 2rem; }
.perfil-marco { overflow-x: auto; border: 1px solid var(--linea); background: #fff; }
.perfil-marco svg { display: block; width: 100%; min-width: 44rem; height: auto; }
.p-fondo { fill: #e9eef3; stroke: var(--tinta); stroke-width: 1.5; stroke-linejoin: round; }
.p-tierra { fill: var(--tierra); stroke: var(--tinta); stroke-width: 1.5; stroke-linejoin: round; }
.p-superficie { stroke: var(--tinta); stroke-width: 1.5; }
.p-limite line { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 3 4; }
.p-dist text { font: 600 15px var(--titular); fill: var(--tinta-suave); }
.p-zona text { font: 600 15px var(--display); fill: var(--tinta); }
.p-suelo text { font: italic 400 17px var(--texto); fill: var(--abismo); }
/* Perfil sobre fotografía: el fondo marino y los rótulos se dibujan encima de la imagen */
.pf-fondo { fill: rgba(6, 22, 40, 0.62); }
.pf-perfil { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.pf-lazona { fill: none; stroke: #2ee6d6; stroke-width: 2.4; stroke-dasharray: 1 5; stroke-linecap: round; }
.pf-limite-cielo line { stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 3 4; }
.pf-limite-agua line { stroke: rgba(255, 255, 255, 0.75); stroke-width: 1; stroke-dasharray: 3 4; }
.pf-dist text { font: 700 15px var(--titular); fill: var(--tinta); paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 4px; stroke-linejoin: round; }
.pf-zona text { font: 600 16px var(--display); fill: #fff; paint-order: stroke; stroke: rgba(6, 22, 40, 0.7); stroke-width: 4px; stroke-linejoin: round; }
.pf-suelo text { font: italic 400 17px var(--texto); fill: #cfe9f7; }
/* ---------- Gráfico de avance de las AMP ---------- */
.grafico { margin: 0.4rem 0 1.6rem; }
.grafico-marco { overflow-x: auto; border: 1px solid var(--linea); background: #fff; }
.grafico-marco svg { display: block; width: 100%; min-width: 30rem; height: auto; }
.g-rejilla line { stroke: var(--linea); stroke-width: 1; opacity: 0.6; }
.g-eje { stroke: var(--tinta); stroke-width: 1.2; }
.g-area { fill: var(--kelp); opacity: 0.09; }
.g-linea { fill: none; stroke: var(--kelp); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.g-puntos circle { fill: #fff; stroke: var(--kelp); stroke-width: 2.5; }
/* Tramo y punto de 2026: áreas aprobadas cuyo decreto no se ha publicado */
.g-linea-pend { fill: none; stroke: var(--kelp); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.g-punto-pend { fill: #fff; stroke: var(--kelp); stroke-width: 2.5; stroke-dasharray: 3 3; }
.g-tendencia { stroke: var(--tinta-suave); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.g-tendencia-t, .g-meta-t { font: italic 400 13px var(--texto); fill: var(--tinta-suave); }
.g-meta { stroke: var(--magenta); stroke-width: 1.2; stroke-dasharray: 6 5; }
.g-meta-t { fill: var(--magenta); }
.g-ejes text { font: 500 13px var(--titular); fill: var(--tinta-suave); }
.g-valor text { font: 700 16px var(--titular); fill: var(--kelp); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
/* Cada zona es una fila: nombre y distancia a la izquierda, derechos a la derecha.
   La barra de color sigue la misma familia de azules, de la costa a la alta mar. */
.zonas-grupo { font: 600 0.95rem/1.2 var(--titular); font-stretch: 88%; color: var(--tinta-suave); margin: 2rem 0 0.6rem; }
.zonas-lista { margin: 0; border-bottom: 1px solid var(--linea); }
.zonas-lista > div { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 0.2rem clamp(1.2rem, 4vw, 3rem); align-items: baseline; padding: 0.85rem 0 0.85rem 1rem; border-top: 1px solid var(--linea); border-left: 4px solid var(--z, var(--linea)); }
.zonas-lista dt { font: 600 1.15rem/1.25 var(--display); letter-spacing: -0.01em; }
.zl-dist { display: block; margin-top: 0.15rem; font: italic 400 0.92rem/1.35 var(--texto); letter-spacing: 0; color: var(--tinta-suave); }
.zonas-lista dd { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--tinta-suave); max-width: 58ch; }
@media (max-width: 700px) { .zonas-lista > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Copiar cita ---------- */

.copiar-cita {
  font: 600 0.9rem/1.2 var(--titular); font-stretch: 90%; color: var(--tinta);
  background: none; border: 1px solid var(--linea); border-radius: 2px; padding: 0.4rem 0.7rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.copiar-cita:hover, .copiar-cita:focus-visible { border-color: var(--magenta); color: var(--magenta); }

/* ---------- Impresión: solo el contenido, en tinta ---------- */

@media print {
  body::before, .cabecera, .etapa, .leyenda, .mapa-info, .mapa-controles, .copiar-cita, form.contacto, .filtros, #pie .nota { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .bloque, .encabezado { padding-block: 1.2rem; }
  .bloque-tinta, .especie { background: none !important; color: #000 !important; border: 1px solid #999; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  .ficha, .tabla tr, figure { break-inside: avoid; }
  details > *:not(summary) { display: block !important; }
}

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

.pie { padding-block: 2.5rem 3rem; font-size: 0.98rem; border-top: 1px solid var(--linea); }
.pie-grilla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.pie h4 { margin-bottom: 0.6rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 0.3rem; }
.pie p { color: var(--tinta-suave); max-width: 44ch; }
@media (max-width: 860px) { .pie-grilla { grid-template-columns: 1fr; } }