/* ==========================================================================
   Refugios climáticos · web del proyecto
   Identidad del cartel: DM Sans, sol, sombra y reglas negras sobre azul claro.
   Paleta del proyecto: azul oscuro, azul medio, azul claro y amarillo. Los
   colores que solo están en el cartel salen de su CMYK (perfil Coated FOGRA39).
   ========================================================================== */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --papel: #ffffff;
  --tinta: #0d0d0d;
  --texto: #1d1d1b;      /* K100 */
  --texto-suave: #4a4a48;
  --sol: #f0c54e;        /* paleta del proyecto */
  --sombra: #8ec9ef;     /* C47 M7 Y0 K0, la sombra del cartel */
  --cielo: #e1ecf6;      /* C14 M4 Y2 K0, el fondo del cartel */
  --azul: #1e407e;       /* paleta del proyecto */
  --azul-medio: #5f88c4; /* paleta del proyecto */
  --azul-claro: #b6cee5; /* paleta del proyecto */
  --rojo: #d4412b;       /* solo para los errores del formulario */
  --gris: #f1f2f4;       /* fondo del pie */

  --lateral: 0px;
  --barra: 3.75rem;
  --ancho: 1320px;
  --margen: min(8vw, 94px);
  --contenido: calc(min(100vw - var(--lateral), var(--ancho)) - 2 * var(--margen));

  /* Espaciado: entre secciones y, dentro de cada una, pequeño, medio y grande */
  --hueco: clamp(4.5rem, 9vw, 8rem);
  --aire-s: clamp(1.5rem, 3vw, 2.25rem);
  --aire-m: clamp(2.5rem, 5vw, 4rem);
  --aire-l: clamp(3.5rem, 7vw, 6rem);

  /* Los cuatro tamaños del sistema tipográfico.
     El titular se calcula para que «REFUGIO CLIMÁTICO», la línea más larga,
     quepa en el ancho de la columna. */
  --t-titular: min(calc(var(--contenido) / 10.02 * 0.97), 6.25rem);
  --t-destacado: clamp(1.2rem, 1rem + 0.75vw, 1.6rem);
  --t-texto: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-etiqueta: 0.8125rem;
  --regla: max(2px, 0.05em);

  /* Curvas: llegada (expo), suave (quint) y cortinas (ida y vuelta) */
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --cortina: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 64rem) {
  :root {
    --lateral: 4.75rem;
    --barra: 0px;
  }
}

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

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

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

/* Scroll suave con Lenis */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  padding-top: var(--barra);
  padding-left: var(--lateral);
  background: var(--papel);
  color: var(--texto);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-kerning: normal;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

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

p,
h1,
h2,
h3,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 3px solid var(--foco, var(--tinta));
  outline-offset: 3px;
}

[tabindex="-1"]:focus {
  outline: none;
}

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

.marco {
  width: min(100%, var(--ancho));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* --------------------------------------------------------------------------
   Sistema tipográfico: cuatro estilos y ninguno más.
   Las piezas de abajo no cambian tamaño, peso, interlineado ni espaciado;
   solo color y colocación. Quedan fuera el mapa y el sello de la UE,
   que son gráficos.
   -------------------------------------------------------------------------- */

/* 1 · Titular: títulos de sección. Cada línea se apoya en su regla,
   a la misma distancia que en el título del cartel */
.titular {
  font-size: var(--t-titular);
  font-weight: 700;
  line-height: 0.83;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* 2 · Destacado: lemas, beneficios, actividades, menú, títulos de panel y cierre */
.lema,
.firma,
.cierre,
.banda__lema,
.beneficios,
.actividad__nombre,
.menu__lista a,
.panel__titulo {
  font-size: var(--t-destacado);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}

/* 3 · Texto: todo lo que se lee */
body,
.campo input,
.campo select,
.campo textarea {
  font-size: var(--t-texto);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
}

/* 4 · Etiqueta: botones, enlaces de acción, pies, fechas y rótulos */
.antetitulo,
.boton,
.enlace-flecha,
.tesela__pie,
.actividad__fecha,
.campo:not(.campo--casilla) label,
.pie__titulo,
.pie__barra-dentro,
.situacion__texto h3,
.panel__cuerpo h3,
.menu__titulo,
.menu__cartel strong,
.mapa figcaption,
.lateral__marca {
  font-size: var(--t-etiqueta);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* El texto pequeño de apoyo usa el estilo de texto, en un tono más suave */
.nota,
.formulario__info {
  color: var(--texto-suave);
}

/* Única excepción: el aviso legal del pie, a tamaño de etiqueta y en redonda */
.pie__legal {
  color: var(--texto-suave);
  font-size: var(--t-etiqueta);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Piezas comunes
   -------------------------------------------------------------------------- */

/* Iconos Phosphor */
.icono {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
}

.antetitulo {
  margin: 0;
  color: var(--tinta);
}

/* Titular con reglas, como el título del cartel: primera línea a la izquierda,
   segunda a la derecha, cada una apoyada en su regla de lado a lado */
.titular {
  margin-bottom: var(--aire-m);
  color: var(--tinta);
}

.titular > span {
  position: relative;
  display: block;
  padding-bottom: var(--regla);
}

.titular > span::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--regla);
  background: currentColor;
  transform-origin: left center;
}

.titular > span > span {
  display: inline-block;
}

.titular > span + span {
  margin-top: 0.21em;
  text-align: right;
}

.lema {
  color: var(--tinta);
}

.cuerpo {
  max-width: 36rem;
}

.cuerpo p + p {
  margin-top: 1em;
}

/* Términos que abren su ficha: subrayado azul por debajo del texto y un +
   volado, el mismo signo que llevan las piezas del mosaico que abren esas fichas */
.termino {
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.termino::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.76em;
  bottom: -0.06em;
  height: 0.2em;
  background: var(--azul-medio);
  transform-origin: left center;
  transition: background-color 0.35s var(--suave);
}

/* El + engordado con un trazo para que se lea bien a tamaño volado */
.termino__mas {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.06em;
  vertical-align: 0.32em;
  fill: var(--tinta);
  stroke: var(--tinta);
  stroke-width: 14px;
  transition: rotate 0.5s var(--expo);
}

.termino:hover::after,
.termino:focus-visible::after,
.termino:active::after {
  background: var(--tinta);
}

.termino:hover .termino__mas,
.termino:focus-visible .termino__mas {
  rotate: 90deg;
}

/* El término y la coma que lo sigue no se separan al cortar la línea */
.sin-corte {
  white-space: nowrap;
}

/* Dos columnas como el pie del cartel: lema a la izquierda, texto a la derecha */
.dos-columnas {
  display: grid;
  gap: var(--aire-s) 6%;
}

@media (min-width: 46rem) {
  .dos-columnas {
    grid-template-columns: minmax(0, 34fr) minmax(0, 60fr);
  }
}

/* Entradilla en una sola columna, para variar el ritmo entre secciones */
.entradilla {
  display: grid;
  gap: 1.1rem;
  max-width: 44rem;
}

.botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

/* Botones rectos, como las reglas del cartel */
.boton {
  --boton-color: var(--tinta);
  --boton-texto: var(--papel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.75em 1.6em;
  border: 2px solid var(--boton-color);
  border-radius: 0;
  background: transparent;
  color: var(--boton-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--suave), color 0.3s var(--suave), transform 0.2s var(--suave);
}

.boton:hover {
  background: var(--boton-color);
  color: var(--boton-texto);
}

.boton:active {
  transform: scale(0.97);
}

.boton--lleno {
  background: var(--boton-color);
  color: var(--boton-texto);
}

.boton--lleno:hover {
  background: var(--papel);
  color: var(--boton-color);
}

.boton .icono {
  width: 1.1rem;
  height: 1.1rem;
}

/* Enlaces de acción: texto con su regla y una flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0 0.35em;
  border: 0;
  border-bottom: 2px solid currentColor;
  background: none;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.enlace-flecha .icono {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 0.45s var(--expo);
}

.enlace-flecha:hover .icono {
  transform: translateX(4px);
}

.enlace-flecha[href="#que-es"]:hover .icono {
  transform: translateY(3px);
}

.enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  margin-top: 1.75rem;
}

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 0.3s var(--suave), transform 0.2s var(--suave);
}

.boton-icono:hover {
  background: var(--sol);
}

.boton-icono:active {
  transform: scale(0.94);
}

.enlace {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Botonera: barra superior en móvil, barra lateral en escritorio
   -------------------------------------------------------------------------- */

.lateral {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--barra);
  padding-inline: 0.5rem 0.25rem;
  background: var(--papel);
  border-bottom: 2px solid var(--tinta);
}

.lateral__marca {
  order: -1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  padding: 0.5rem;
  color: var(--tinta);
  text-decoration: none;
}

.lateral__sol {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--sol);
}

.lateral__acciones {
  display: flex;
  align-items: center;
}

.lateral__red {
  display: none;
}

.lateral__menu {
  order: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

/* Hamburguesa con dos reglas, como las del título */
.hamburguesa {
  display: grid;
  gap: 6px;
  width: 26px;
}

.hamburguesa span {
  display: block;
  height: 2.5px;
  background: currentColor;
  transition: width 0.4s var(--expo);
}

.hamburguesa span:first-child {
  width: 100%;
}

.hamburguesa span:last-child {
  width: 62%;
}

.lateral__menu:hover .hamburguesa span:last-child {
  width: 100%;
}

.lateral__progreso {
  position: absolute;
  inset: auto 0 -2px;
  height: 2px;
  background: var(--sol);
  transform: scaleX(var(--progreso, 0));
  transform-origin: left center;
}

/* Escritorio: barra lateral limpia, menú arriba y accesos abajo */
@media (min-width: 64rem) {
  .lateral {
    inset: 0 auto 0 0;
    flex-direction: column;
    justify-content: space-between;
    width: var(--lateral);
    height: auto;
    padding: 1.1rem 0 1rem;
    border-bottom: 0;
    border-right: 2px solid var(--tinta);
  }

  .lateral__menu {
    order: 0;
  }

  .lateral__marca {
    display: none;
  }

  .lateral__acciones {
    flex-direction: column;
    gap: 0.15rem;
  }

  .lateral__red {
    display: inline-grid;
  }

  .lateral__progreso {
    inset: 0 -2px 0 auto;
    width: 2px;
    height: auto;
    transform: scaleY(var(--progreso, 0));
    transform-origin: center top;
  }
}

/* --------------------------------------------------------------------------
   Portada: el cartel a toda la altura de la pantalla y su texto debajo
   -------------------------------------------------------------------------- */

.portada {
  /* En pantallas anchas el cartel ocupa todo el alto; en el móvil, todo el ancho */
  --cartel-ancho: min(100%, calc((100svh - var(--barra)) * 0.9621));
}

.cartel {
  position: relative;
  isolation: isolate;
  width: var(--cartel-ancho);
  margin-inline: auto;
  aspect-ratio: 1190.55 / 1237.42;
}

/* El fondo azul claro del cartel llega hasta los bordes de la pantalla */
.cartel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: -1;
  width: calc(100vw - var(--lateral));
  translate: -50% 0;
  background: var(--cielo);
}

.cartel__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cartel__ilustracion {
  position: absolute;
  left: 14.765%;
  top: 37.32%;
  width: 70.471%;
  height: auto;
}

.sol {
  fill: var(--sol);
}

.sombra {
  fill: var(--sombra);
}

/* El título del cartel es parte de la ilustración: conserva su medida */
.titulo__linea {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 140px;
  font-weight: 700;
  fill: var(--tinta);
}

.titulo__regla {
  stroke: var(--tinta);
  stroke-width: 7;
}

/* El texto del cartel, con su mismo ancho y sus márgenes.
   Va por delante: la sombra del cartel, al alargarse, pasa por debajo. */
.presentacion {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--aire-s) 6%;
  width: var(--cartel-ancho);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem) calc(var(--cartel-ancho) * 0.0808) var(--hueco);
}

@media (min-width: 46rem) {
  .presentacion {
    grid-template-columns: minmax(0, 34fr) minmax(0, 60fr);
  }
}

.presentacion__texto .firma {
  margin-top: 1.2em;
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.seccion {
  padding-block: var(--hueco);
  scroll-margin-top: var(--barra);
}

/* Por qué importan: banda azul oscuro, texto a lo ancho */
.banda {
  --foco: var(--papel);
  padding-block: var(--hueco);
  background: var(--azul);
  color: var(--azul-claro);
  scroll-margin-top: var(--barra);
}

.banda .titular {
  color: var(--papel);
}

.banda__lema {
  max-width: 30em;
  color: var(--papel);
}

.banda__texto {
  display: grid;
  gap: 1em 6%;
  margin-top: var(--aire-s);
}

@media (min-width: 46rem) {
  .banda__texto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Beneficios: uno por línea y se van marcando al ritmo del scroll */
.beneficios {
  display: grid;
  justify-items: start;
  gap: 0.55em;
  margin-top: var(--aire-l);
  color: var(--papel);
}

.beneficios li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.beneficios__check {
  flex: none;
  width: 1em;
  height: 1em;
  fill: var(--sol);
}

/* Dónde encontrarlos: mosaico con fragmentos de la ilustración */
.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a a"
    "b d"
    "b e";
  grid-auto-rows: minmax(13rem, auto);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: var(--aire-l);
}

@media (min-width: 60rem) {
  .mosaico {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "a a b"
      "d e b";
    grid-template-rows: repeat(2, clamp(15rem, 22vw, 20rem));
  }
}

.tesela {
  position: relative;
  overflow: hidden;
}

.tesela--a { grid-area: a; --fondo: var(--sombra); --encuadre: 40% 30%; }
.tesela--b { grid-area: b; --fondo: var(--sol); --encuadre: 30% 50%; }
.tesela--d { grid-area: d; --fondo: var(--sol); --encuadre: 50% 30%; }
.tesela--e { grid-area: e; --fondo: var(--sombra); --encuadre: 40% 40%; }

.tesela__boton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}

.tesela__imagen {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--fondo);
}

.tesela__imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--encuadre, center);
  transition: transform 1s var(--expo);
}

.tesela__boton:hover .tesela__imagen img,
.tesela__boton:focus-visible .tesela__imagen img {
  transform: scale(1.05);
}

.tesela__boton:focus-visible {
  outline-offset: -3px;
}

.tesela__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.25rem 0.2rem 0;
  background: var(--papel);
  color: var(--tinta);
}

.tesela__pie .icono {
  width: 1rem;
  height: 1rem;
  transition: transform 0.45s var(--expo);
}

.tesela__boton:hover .tesela__pie .icono {
  transform: rotate(90deg);
}

.propuesta {
  max-width: 44rem;
  margin-top: var(--aire-m);
  color: var(--tinta);
}

.propuesta .enlace-flecha {
  margin-left: 0.5em;
  vertical-align: 0.1em;
}

/* El proyecto */
.situacion {
  display: grid;
  gap: var(--aire-m);
  margin-top: var(--aire-l);
}

@media (min-width: 60rem) {
  .situacion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6%;
    align-items: start;
  }
}

.situacion__texto h3 {
  margin-bottom: 1rem;
  color: var(--tinta);
}

.situacion__texto p + p {
  margin-top: 1em;
}

.mapa {
  padding: clamp(1rem, 3vw, 2.25rem);
  background: var(--azul-claro);
}

.mapa svg {
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: "DM Sans", system-ui, sans-serif;
}

.mapa__rio {
  fill: none;
  stroke: var(--papel);
  stroke-width: 9;
  stroke-linecap: round;
}

.mapa__rio-nombre {
  fill: var(--azul);
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0.06em;
}

.mapa__pueblo circle {
  fill: var(--azul);
}

.mapa__pueblo text {
  fill: var(--azul);
  font-size: 21px;
  font-weight: 600;
}

.mapa__ciudad rect {
  fill: var(--tinta);
}

.mapa__ciudad text {
  fill: var(--tinta);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mapa__punto {
  fill: var(--sol);
  stroke: var(--tinta);
  stroke-width: 3;
}

.mapa__destacado text {
  fill: var(--tinta);
  font-size: 29px;
  font-weight: 700;
}

.mapa__escala path {
  fill: none;
  stroke: var(--azul);
  stroke-width: 2;
}

.mapa__escala text {
  fill: var(--azul);
  font-size: 17px;
  font-weight: 700;
}

.mapa figcaption {
  margin-top: 1rem;
  color: var(--azul);
}

/* Participa: un programa en filas, separadas por reglas como en el cartel */
.programa {
  margin-top: var(--aire-l);
  border-top: 2px solid var(--tinta);
}

.actividad {
  --fondo: var(--sol);
  display: grid;
  gap: 0.8rem 4%;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(0.25rem, 1.5vw, 1.25rem);
  border-bottom: 2px solid var(--tinta);
  color: var(--tinta);
  transition: background-color 0.5s var(--suave), color 0.4s var(--suave);
}

.actividad--sombra { --fondo: var(--sombra); }
.actividad--azul { --fondo: var(--azul); }

@media (min-width: 60rem) {
  .actividad {
    grid-template-columns: minmax(0, 33fr) minmax(0, 40fr) minmax(0, 21fr);
    align-items: baseline;
  }
}

.actividad:hover,
.actividad:focus-within {
  background: var(--fondo);
}

.actividad--azul:hover,
.actividad--azul:focus-within {
  --foco: var(--papel);
  color: var(--papel);
}

.actividad__nombre {
  transition: transform 0.6s var(--expo);
}

.actividad__texto {
  max-width: 30rem;
}

.actividad__accion {
  display: grid;
  justify-items: start;
  gap: 0.7rem;
}

@media (min-width: 60rem) {
  .actividad__accion {
    justify-items: end;
    text-align: right;
  }
}

/* Datos de contacto (pie y panel): icono y texto */
.datos {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.datos li,
.dato {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.datos .icono,
.dato .icono {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3em;
}

/* El correo solo se parte detrás de la arroba */
.datos a,
.dato a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  overflow-wrap: break-word;
}

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

/* El pie, sobre gris claro para separarlo del contenido */
.pie {
  background: var(--gris);
}

.pie__cierre {
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

/* Cierre: la frase del proyecto apoyada en su regla, como la segunda línea
   del título del cartel */
.cierre {
  position: relative;
  padding-bottom: 0.45em;
  color: var(--tinta);
}

.cierre > span {
  display: block;
}

.cierre::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: currentColor;
  transform-origin: left center;
}

@media (min-width: 46rem) {
  .cierre {
    text-align: right;
  }
}

/* Contacto en tres bloques, bajo su rótulo */
.pie__contacto {
  position: relative;
  display: grid;
  gap: 1.75rem 4%;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.pie__titulo {
  grid-column: 1 / -1;
  margin-bottom: -0.6rem;
  color: var(--tinta);
}

@media (min-width: 46rem) {
  .pie__contacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pie__bloque:first-of-type {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .pie__contacto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pie__bloque:first-of-type {
    grid-column: auto;
  }
}

.pie__bloque .boton {
  margin-top: 1.25rem;
}

.dato + .dato {
  margin-top: 0.9rem;
}

/* Línea fina que separa el contacto de los logos, al ancho del contenido */
.pie__contacto::after {
  content: "";
  position: absolute;
  inset: auto var(--margen) 0;
  height: 1px;
  background: rgb(13 13 13 / 0.2);
}

.pie__logos {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 4vw, 3.25rem);
}

.logo {
  width: auto;
  height: 3.25rem;
}

.logo--sello { height: 3.6rem; }
.logo--dipu { height: 2.6rem; }
.logo--npb { height: 3rem; }

.logo-ue {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Sobre fondo de color, la bandera lleva borde blanco de 1/25 de su alto
   (normas de visibilidad de la UE) */
.logo-ue__bandera {
  width: auto;
  height: 2.5rem;
  box-sizing: content-box;
  border: 2px solid var(--papel);
}

/* El texto del emblema europeo sigue las normas de la UE, no las de la web */
.logo-ue__texto {
  color: #003399;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.15;
}

/* Aviso legal: letra pequeña a todo el ancho */
.pie__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.pie__barra {
  --foco: var(--papel);
  background: var(--azul);
  color: var(--papel);
}

.pie__barra-dentro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

/* --------------------------------------------------------------------------
   Menú y paneles
   -------------------------------------------------------------------------- */

html.dialogo-abierto {
  overflow: hidden;
}

dialog {
  padding: 0;
  border: 0;
  color: var(--texto);
}

dialog::backdrop {
  background: rgb(30 64 126 / 0.55);
}

.menu,
.panel {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  max-height: 100%;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu {
  left: 0;
  right: auto;
  width: min(28rem, 100%);
  max-width: 100%;
  padding: 1rem clamp(1.5rem, 4.5vw, 2.5rem) 3rem;
  background: var(--sol);
}

.menu__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.menu__titulo {
  color: var(--tinta);
}

.menu .boton-icono:hover {
  background: var(--papel);
}

/* Todas las entradas alineadas a la izquierda, cada una sobre su regla */
.menu__lista a {
  position: relative;
  display: block;
  padding: 0.8em 0 0.45em;
  color: var(--tinta);
  text-decoration: none;
  transition: padding-left 0.45s var(--expo);
}

.menu__lista a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: currentColor;
}

.menu__lista a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 0.55em;
  height: 0.12em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--expo);
}

.menu__lista a:hover,
.menu__lista a[aria-current="true"] {
  padding-left: 0.85em;
}

.menu__lista a:hover::before,
.menu__lista a[aria-current="true"]::before {
  transform: none;
}

.menu__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
}

.menu__cartel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  border: 2px solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  transition: transform 0.4s var(--expo);
}

.menu__cartel:hover {
  transform: translateY(-3px);
}

.menu__cartel img {
  width: 3rem;
  height: auto;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
}

.menu__cartel strong {
  display: inline-block;
  margin-bottom: 0.2rem;
}

.menu__cartel .icono {
  width: 1.4rem;
  height: 1.4rem;
  margin-left: auto;
}

.redes {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.5rem;
}

.panel {
  left: auto;
  right: 0;
  width: min(40rem, 100%);
  max-width: 100%;
  background: var(--papel);
}

.panel__cabecera {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1.5rem, 5vw, 2.75rem);
  border-bottom: 2px solid var(--tinta);
  background: var(--papel);
}

.panel__imagen {
  aspect-ratio: 16 / 8;
  overflow: hidden;
}

.panel__imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
}

.panel__imagen--sol { background: var(--sol); }
.panel__imagen--sombra { background: var(--sombra); }

.panel__cuerpo {
  padding: clamp(2.25rem, 5vw, 3rem) clamp(1.5rem, 5vw, 2.75rem) 4rem;
}

.panel__cuerpo p + p {
  margin-top: 1em;
}

.panel__titulo {
  margin-bottom: 1.5rem;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--tinta);
  color: var(--tinta);
}

.panel__cuerpo h3 {
  margin: 2.5rem 0 0.9rem;
  color: var(--tinta);
}

.panel__cuerpo .botones,
.panel__cuerpo .enlaces {
  margin-top: 2.5rem;
}

/* Formulario */
.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.5rem;
  margin-top: 2.25rem;
}

.campo {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.4rem;
}

.campo--mitad {
  grid-column: auto;
}

@media (max-width: 30rem) {
  .campo--mitad {
    grid-column: 1 / -1;
  }
}

.campo label {
  color: var(--tinta);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 2px solid var(--tinta);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
}

.campo select {
  appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230d0d0d'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-position: right 0.1rem center;
  background-repeat: no-repeat;
  background-size: 1.1rem;
}

.campo textarea {
  min-height: 8.5rem;
  padding: 0.75rem 0.85rem;
  border: 2px solid var(--tinta);
  resize: vertical;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

.campo [aria-invalid="true"] {
  border-color: var(--rojo);
}

.campo--casilla {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}

.campo--casilla input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.3rem 0 0;
  accent-color: var(--tinta);
}

.formulario__info {
  grid-column: 1 / -1;
}

.formulario .boton {
  grid-column: 1 / -1;
  justify-self: start;
}

.formulario__estado {
  grid-column: 1 / -1;
  min-height: 1.5em;
  color: var(--tinta);
}

.datos--panel {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--tinta);
}

/* --------------------------------------------------------------------------
   Movimiento (solo si la persona no ha pedido reducirlo)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Entrada del cartel: se trazan las reglas, las líneas del título suben
     desde detrás de su regla, amanece y cae la sombra */
  .js .titulo__regla {
    transform-box: fill-box;
    transform-origin: left center;
    animation: trazo 1.2s var(--cortina) both;
  }

  .js .titulo__regla--2 {
    animation-delay: 0.15s;
  }

  .js .titulo__linea {
    transform-box: fill-box;
    animation: sube 1.2s var(--expo) 0.25s both;
  }

  .js .titulo__linea--2 {
    animation-delay: 0.4s;
  }

  .js .sol {
    animation: amanecer 2.2s var(--expo) 0.3s both;
  }

  .js .sombra {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: despliega 1.5s var(--expo) 1s both;
  }

  /* Aparición al hacer scroll (la activa main.js): sube, se enfoca y aparece */
  .revela [data-reveal]:not(.titular, .cierre) {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(1.5rem);
    transition:
      opacity 0.9s var(--suave),
      filter 0.9s var(--suave),
      transform 1.1s var(--expo);
    transition-delay: calc(var(--i, 0) * 80ms);
  }

  .revela [data-reveal].is-visible:not(.titular, .cierre) {
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* Términos de «Qué es»: al aparecer el párrafo, los subrayados se trazan
     uno detrás de otro, para que se note que se pueden pulsar */
  .revela [data-reveal] .termino::after {
    transform: scaleX(0);
    transition:
      transform 0.9s var(--expo) calc(0.55s + var(--n, 0) * 0.15s),
      background-color 0.35s var(--suave);
  }

  .revela [data-reveal].is-visible .termino::after {
    transform: none;
  }

  /* Cierre: la frase sube desde detrás de su regla, como los titulares */
  .revela .cierre {
    clip-path: inset(-0.5em -0.3em 0 -0.3em);
  }

  .revela .cierre > span {
    transform: translateY(calc(100% + 0.6em));
    transition: transform 1.15s var(--expo) 0.1s;
  }

  .revela .cierre::after {
    transform: scaleX(0);
    transition: transform 1.3s var(--cortina);
  }

  .revela .cierre.is-visible > span,
  .revela .cierre.is-visible::after {
    transform: none;
  }

  /* Titulares: cada línea sube desde detrás de su regla y la regla se traza */
  .revela .titular > span {
    clip-path: inset(-0.45em -0.3em 0 -0.3em);
  }

  .revela .titular > span > span {
    transform: translateY(105%);
    transition: transform 1.15s var(--expo);
  }

  .revela .titular > span + span > span {
    transition-delay: 0.1s;
  }

  .revela .titular > span::after {
    transform: scaleX(0);
    transition: transform 1.3s var(--cortina);
  }

  .revela .titular > span + span::after {
    transition-delay: 0.15s;
  }

  .revela .titular.is-visible > span > span,
  .revela .titular.is-visible > span::after {
    transform: none;
  }

  /* Beneficios: cada uno se ilumina y se marca al ritmo del scroll */
  .revela .beneficios li {
    opacity: 0.14;
    transition: opacity 0.6s var(--suave);
  }

  .revela .beneficios li.is-visible {
    opacity: 1;
  }

  .revela .beneficios__check {
    opacity: 0;
    transform: scale(0.4) rotate(-25deg);
    transition: opacity 0.35s var(--suave) 0.1s, transform 0.7s var(--expo) 0.1s;
  }

  .revela .beneficios li.is-visible .beneficios__check {
    opacity: 1;
    transform: none;
  }

  /* Mosaico: cada pieza se descubre como una cortina. El recorte va en el
     contenido, no en la pieza, para que el detector de aparición la vea entrar. */
  .revela [data-cortina] > * {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.2s var(--cortina);
    transition-delay: calc(var(--i, 0) * 110ms);
  }

  .revela [data-cortina].is-visible > * {
    clip-path: inset(0 0 0 0);
  }

  .revela [data-cortina] .tesela__imagen {
    transform: scale(1.12);
    transition: transform 1.8s var(--expo);
    transition-delay: calc(var(--i, 0) * 110ms);
  }

  .revela [data-cortina].is-visible .tesela__imagen {
    transform: none;
  }

  /* Mapa: Camas y Bollullos aparecen al llegar al esquema */
  .revela .mapa .mapa__punto {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.6);
    transition: opacity 0.6s var(--suave) 0.5s, transform 1s var(--expo) 0.5s;
  }

  .revela .mapa.is-visible .mapa__punto {
    opacity: 1;
    transform: none;
  }

  /* Programa: al pasar por una actividad, su nombre avanza un poco */
  .actividad:hover .actividad__nombre {
    transform: translateX(0.4rem);
  }

  /* Menú y paneles: entran deslizando; salen más discretos */
  .menu[open] {
    animation: entra-izquierda 0.7s var(--expo);
  }

  .panel[open] {
    animation: entra-derecha 0.7s var(--expo);
  }

  dialog[open]::backdrop {
    animation: aparece 0.45s var(--suave);
  }

  .menu.cerrando {
    animation: sale-izquierda 0.32s var(--cortina) forwards;
  }

  .panel.cerrando {
    animation: sale-derecha 0.32s var(--cortina) forwards;
  }

  dialog.cerrando::backdrop {
    animation: desaparece 0.32s var(--suave) forwards;
  }

  .menu[open]:not(.cerrando) .menu__lista li {
    animation: asoma-menu 0.8s var(--expo) both;
  }

  .menu[open] .menu__lista li:nth-child(2) { animation-delay: 0.05s; }
  .menu[open] .menu__lista li:nth-child(3) { animation-delay: 0.1s; }
  .menu[open] .menu__lista li:nth-child(4) { animation-delay: 0.15s; }
  .menu[open] .menu__lista li:nth-child(5) { animation-delay: 0.2s; }
  .menu[open] .menu__lista li:nth-child(6) { animation-delay: 0.25s; }
}

@keyframes trazo {
  from { transform: scaleX(0); }
}

@keyframes sube {
  from { transform: translateY(110%); }
}

@keyframes amanecer {
  from { transform: translateY(470px); }
}

@keyframes despliega {
  from { transform: scaleY(0); }
}

@keyframes entra-izquierda {
  from { transform: translateX(-100%); }
}

@keyframes entra-derecha {
  from { transform: translateX(100%); }
}

@keyframes sale-izquierda {
  to { transform: translateX(-18%); opacity: 0; }
}

@keyframes sale-derecha {
  to { transform: translateX(12%); opacity: 0; }
}

@keyframes aparece {
  from { opacity: 0; }
}

@keyframes desaparece {
  to { opacity: 0; }
}

@keyframes asoma-menu {
  from { opacity: 0; transform: translateX(-1.5rem); }
}

/* Red de seguridad: sin movimiento si la persona lo ha pedido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}