/* =============================================================================
   GRANDES RETOS · Sistema visual público
   =============================================================================

   Concepto: «cielo y nubes». Fondo claro, azules de altitud, blanco de nube y
   un naranja de sol para lo que hay que pulsar. Fotografía grande y a sangre;
   el texto entra encima de ella según se baja.

   Por qué claro y no oscuro: el público son paracaidistas mirando el móvil al
   sol, muchas veces en una zona de salto. Una página casi negra pide brillo
   máximo y aun así se ve mal; y para un proyecto que todavía tiene que
   convencer, el fondo claro se lee como formal y el negro como nocturno.

   El color con más peso es el de las fotos: cielo azul. La interfaz lo
   acompaña en vez de competir con él, y por eso casi todo es blanco, azul
   humo y una sola nota cálida.

   Este fichero NO se carga en el back. El back usa Atlantis (Bootstrap 4 +
   jQuery); aquí no hay ni framework ni una sola dependencia externa.

   Todo va bajo `.gr` para que nunca colisione con el tema del back.

   Tipografía: tres familias alojadas en /public/fonts. Ver el bloque siguiente.

   CONTRASTE. Los grises están elegidos con la fórmula WCAG contra blanco, no a
   ojo: `--muted` da 5.1:1 y `--muted-fuerte` 8.6:1. Si alguien los aclara
   «porque queda más fino», el texto secundario deja de ser legible al sol, que
   es justo donde se va a leer esto. La misma razón vale para `--ambar`
   (5.2:1): es un naranja quemado y no un naranja alegre porque el alegre no
   pasa el contraste sobre blanco.
   ========================================================================== */

/* =============================================================================
   Tipografía
   =============================================================================
   Servidas desde /public/fonts, nunca desde una CDN: una petición externa menos,
   cero debate de cookies y nada que falle si Google se cae. Son SIL Open Font
   License, así que alojarlas es legítimo.

   - Anton para lo que tiene que gritar: la marca del hero y los titulares sobre
     foto. Un solo peso, altísimo contraste, hecho para leerse de lejos.
   - Barlow Condensed 700 para los titulares de sección: condensada como Anton
     pero legible en minúscula, que es donde Anton se cansa.
   - Barlow 400/600 para el cuerpo. Es la familia hermana, así que la página
     tiene una sola voz en vez de dos que se llevan mal.
   - JetBrains Mono 500 para las etiquetas de instrumento.

   `font-display: swap` a propósito: primero el texto con la fuente del sistema
   y luego la buena. Nadie se queda mirando un hueco en blanco.
   ========================================================================== */

@font-face {
  font-family: "GR Anton";
  src: url("/fonts/anton-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GR Condensed";
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GR Texto";
  src: url("/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GR Texto";
  src: url("/fonts/barlow-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GR Mono";
  src: url("/fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.gr {
  /* --- Cielo ------------------------------------------------------------ */
  /* De la estratosfera al suelo: el azul se va aclarando hasta la nube. */
  --cielo-hondo: #0a2a44;
  --cielo-medio: #10557f;
  --cielo: #1a73b8;
  --cielo-claro: #cfe3f5;
  --bruma: #eef4fa;
  --nube: #ffffff;

  /* --- Superficies ------------------------------------------------------ */
  /* Nombres heredados: `--void` es la superficie base y `--panel` la tarjeta. */
  --void: var(--bruma);
  --panel: var(--nube);
  --panel-hi: #f6fafd;
  --linea: rgba(10, 42, 68, 0.1);
  --linea-fuerte: rgba(10, 42, 68, 0.2);

  /* --- Tinta ------------------------------------------------------------ */
  --texto: #0d2436;
  --muted: #56718a;        /* 5.1:1 sobre blanco */
  --muted-fuerte: #2d4759; /* 8.6:1 sobre blanco */

  /* Sol: lo que hay que pulsar y lo que está en marcha. La única nota cálida. */
  --ambar: #c2410c;        /* 5.2:1 sobre blanco */
  --ambar-vivo: #ea580c;   /* solo sobre azul oscuro o foto */
  --ambar-tenue: rgba(194, 65, 12, 0.1);

  /* Verde: confirmado, cerrado, correcto. */
  --live: #0f7a4f;
  --live-tenue: rgba(15, 122, 79, 0.1);

  /* Rojo SOLO para errores de formulario. Nunca decorativo. */
  --error: #c1121f;
  --error-tenue: rgba(193, 18, 31, 0.08);

  /* --- Tipografía ------------------------------------------------------- */
  --grito: "GR Anton", "Haettenschweiler", "Arial Narrow Bold", Impact, sans-serif;
  --display: "GR Condensed", "Barlow Condensed", "Archivo Narrow",
    "Arial Narrow", system-ui, sans-serif;
  --mono: "GR Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;
  --texto-familia: "GR Texto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* --- Ritmo ------------------------------------------------------------ */
  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 2px rgba(10, 42, 68, 0.06), 0 8px 24px rgba(10, 42, 68, 0.06);
  --sombra-alta: 0 2px 4px rgba(10, 42, 68, 0.08), 0 18px 48px rgba(10, 42, 68, 0.12);
  --easing: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  background: var(--bruma);
  color: var(--texto);
  font-family: var(--texto-familia);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.gr img,
.gr svg {
  max-width: 100%;
  height: auto;
}

/* El atributo `hidden` tiene que ganar SIEMPRE.
   El `[hidden]{display:none}` del navegador vive en su hoja de usuario, que pierde
   contra cualquier regla de autor. Como `.gr-campo` declara `display:flex`, un campo
   con `hidden` se seguía viendo: el «¿Cuál?» de la federación salía siempre, tanto en
   el formulario público como en la ficha, y el JavaScript que lo esconde no hacía nada
   visible. Sin error, claro: solo un campo de más pidiendo algo que no toca. */
.gr [hidden] {
  display: none !important;
}

/* =============================================================================
   Tipos
   ========================================================================== */

/* Etiqueta: mono, mayúsculas, muy espaciada. */
.gr-etiqueta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Cifra grande. tabular-nums para que no baile al cambiar de valor. */
.gr-cifra {
  font-family: var(--grito);
  font-weight: 400;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--cielo-hondo);
}

.gr-titulo {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: var(--cielo-hondo);
  text-wrap: balance;
}

.gr-subtitulo {
  color: var(--muted-fuerte);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  max-width: 58ch;
  margin: 0 0 1.5rem;
}

.gr-nota {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* =============================================================================
   Estructura
   ========================================================================== */

.gr-contenedor {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.gr-seccion {
  padding-block: clamp(3rem, 9vw, 6.5rem);
  background: var(--bruma);
}

/* Alternancia de fondos en vez de líneas divisorias: más limpio y hace que la
   página se lea como capas de aire, no como una tabla. */
.gr-seccion--nube { background: var(--nube); }

.gr-seccion--cielo {
  background: linear-gradient(180deg, var(--cielo-hondo) 0%, var(--cielo-medio) 100%);
  color: #eaf3fb;
}

.gr-seccion--cielo .gr-titulo { color: #fff; }
.gr-seccion--cielo .gr-subtitulo { color: rgba(234, 243, 251, 0.86); }
.gr-seccion--cielo .gr-nota { color: rgba(234, 243, 251, 0.7); }
.gr-seccion--cielo .gr-etiqueta,
.gr-seccion--cielo .gr-seccion__marca { color: rgba(234, 243, 251, 0.62); }
.gr-seccion--cielo .gr-seccion__marca::after { background: rgba(234, 243, 251, 0.2); }

/* Marca de sección: «01 / QUÉ ES ESTO». */
.gr-seccion__marca {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.gr-seccion__marca::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

/* =============================================================================
   Estado (píldora)
   ========================================================================== */

.gr-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--ambar-tenue);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  background: var(--ambar-tenue);
}

.gr-estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: gr-latido 4s ease-in-out infinite;
}

.gr-estado--live {
  color: var(--live);
  background: var(--live-tenue);
  border-color: var(--live-tenue);
}

@keyframes gr-latido {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* =============================================================================
   Lecturas (fila de datos)
   ========================================================================== */

.gr-lecturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.gr-lectura {
  background: var(--panel);
  padding: 1.1rem 1.2rem;
}

.gr-lectura__valor {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--cielo-hondo);
}

.gr-lectura__valor--ambar { color: var(--ambar); }
.gr-lectura__valor--live { color: var(--live); }

.gr-lectura__etiqueta {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.35rem;
}

/* Sobre foto: cristal esmerilado en vez de tarjetas opacas, para que el cielo
   siga viéndose por debajo. */
.gr-lecturas--sobre-foto {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.gr-lecturas--sobre-foto .gr-lectura {
  background: rgba(10, 42, 68, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.gr-lecturas--sobre-foto .gr-lectura__valor { color: #fff; }
.gr-lecturas--sobre-foto .gr-lectura__etiqueta { color: rgba(255, 255, 255, 0.78); }

/* =============================================================================
   FORMULARIO
   =============================================================================
   Prioridad absoluta: que se rellene fácil desde el móvil, con una mano, en el
   sofá. La mitad del tráfico va a llegar por el grupo de WhatsApp.

   Reglas que no se negocian:
   - font-size 16px en todo input: por debajo, iOS hace zoom al enfocar y saca
     al usuario de contexto.
   - altura mínima 52px: objetivo táctil cómodo.
   - la etiqueta SIEMPRE visible; nunca solo placeholder, que desaparece justo
     cuando hace falta.
   - foco muy visible: se rellena a saltos, y hay que saber siempre dónde estás.
   ========================================================================== */

.gr-form {
  display: grid;
  gap: 1.75rem;
}

.gr-campos {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .gr-campos--2 { grid-template-columns: 1fr 1fr; }
  .gr-campos--3 { grid-template-columns: repeat(3, 1fr); }

  /* Dos campos lado a lado y solo uno con línea de ayuda dejaban las cajas a
     distinta altura, lo que se lee como un descuadre. El control se pega abajo
     y el hueco se lo queda la ayuda. */
  .gr-campos--2 > .gr-campo > .gr-input,
  .gr-campos--2 > .gr-campo > .gr-select,
  .gr-campos--3 > .gr-campo > .gr-input,
  .gr-campos--3 > .gr-campo > .gr-select {
    margin-top: auto;
  }
}

.gr-campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.gr-campo__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-fuerte);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.gr-campo__obligatorio {
  color: var(--ambar);
  font-size: 0.9em;
}

.gr-campo__ayuda {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

.gr-input,
.gr-select,
.gr-textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--nube);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.15s var(--easing), box-shadow 0.15s var(--easing);
  appearance: none;
}

.gr-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

/* Los campos numéricos se leen mejor en cifra grande. */
.gr-input--cifra {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--cielo-hondo);
}

.gr-input::placeholder,
.gr-textarea::placeholder {
  color: rgba(86, 113, 138, 0.7);
}

.gr-input:hover,
.gr-select:hover,
.gr-textarea:hover {
  border-color: rgba(10, 42, 68, 0.35);
}

.gr-input:focus,
.gr-select:focus,
.gr-textarea:focus {
  outline: none;
  border-color: var(--cielo);
  box-shadow: 0 0 0 3px rgba(26, 115, 184, 0.18);
}

/* Flecha del select, dibujada para no depender de la nativa. */
.gr-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* --- Estado de error ---------------------------------------------------- */

.gr-input[aria-invalid="true"],
.gr-select[aria-invalid="true"],
.gr-textarea[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-tenue);
}

.gr-campo__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--error);
  line-height: 1.4;
}

.gr-campo__error::before {
  content: "!";
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
  display: grid;
  place-items: center;
  margin-top: 0.15em;
  font-weight: 700;
}

/* =============================================================================
   Opciones: tarjetas en vez de radios diminutos
   =============================================================================
   Un radio nativo mide 13px. Con guantes, en el móvil, es imposible. Estas
   tarjetas ocupan toda la fila y el <input> real sigue ahí, oculto pero
   funcional, para que el teclado y los lectores de pantalla funcionen igual.
   ========================================================================== */

.gr-opciones {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .gr-opciones--2 { grid-template-columns: 1fr 1fr; }
  .gr-opciones--3 { grid-template-columns: repeat(3, 1fr); }
}

.gr-opcion {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.9rem 1rem;
  background: var(--nube);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: border-color 0.15s var(--easing), background 0.15s var(--easing),
    box-shadow 0.15s var(--easing);
}

.gr-opcion:hover {
  border-color: var(--cielo);
  box-shadow: var(--sombra);
}

.gr-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.gr-opcion__marca {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.15s var(--easing), background 0.15s var(--easing);
}

.gr-opcion__marca::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cielo);
  transform: scale(0);
  transition: transform 0.18s var(--easing);
}

/* Casilla (checkbox): cuadrada, para que se distinga de una opción única. */
.gr-opcion--check .gr-opcion__marca {
  border-radius: var(--radio-chico);
}

.gr-opcion--check .gr-opcion__marca::after {
  border-radius: 0;
  width: 11px;
  height: 6px;
  background: none;
  /* La marca se dibuja sobre el relleno azul, así que va en blanco. */
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  margin-top: -3px;
}

.gr-opcion input:checked ~ .gr-opcion__marca {
  border-color: var(--cielo);
}

.gr-opcion--check input:checked ~ .gr-opcion__marca {
  background: var(--cielo);
}

.gr-opcion input:checked ~ .gr-opcion__marca::after {
  transform: scale(1);
}

.gr-opcion--check input:checked ~ .gr-opcion__marca::after {
  transform: rotate(-45deg) scale(1);
}

.gr-opcion:has(input:checked) {
  border-color: var(--cielo);
  background: rgba(26, 115, 184, 0.06);
}

/* Foco por teclado: el input está oculto, así que lo marca la tarjeta. */
.gr-opcion:has(input:focus-visible) {
  outline: 2px solid var(--cielo);
  outline-offset: 2px;
}

.gr-opcion__texto {
  color: var(--muted-fuerte);
  font-size: 0.95rem;
  line-height: 1.45;
}

.gr-opcion__texto strong {
  display: block;
  color: var(--texto);
  font-weight: 600;
}

.gr-opcion__texto small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.83rem;
  color: var(--muted);
}

/* =============================================================================
   Botones
   ========================================================================== */

.gr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0.9rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s var(--easing), background 0.15s var(--easing),
    border-color 0.15s var(--easing), box-shadow 0.15s var(--easing);
}

.gr-btn:active { transform: translateY(1px); }

.gr-btn--principal {
  background: var(--ambar);
  color: #fff;
  box-shadow: 0 2px 6px rgba(194, 65, 12, 0.25), 0 10px 24px rgba(194, 65, 12, 0.18);
}

.gr-btn--principal:hover {
  background: #a83709;
  box-shadow: 0 4px 10px rgba(194, 65, 12, 0.3), 0 14px 32px rgba(194, 65, 12, 0.22);
}

.gr-btn--fantasma {
  background: transparent;
  border-color: var(--linea-fuerte);
  color: var(--cielo-hondo);
}

.gr-btn--fantasma:hover {
  border-color: var(--cielo);
  color: var(--cielo);
  background: rgba(26, 115, 184, 0.05);
}

/* Sobre foto o sobre azul: blanco translúcido. */
.gr-btn--claro {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gr-btn--claro:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
}

.gr-btn:focus-visible {
  outline: 2px solid var(--cielo-hondo);
  outline-offset: 3px;
}

.gr-btn--claro:focus-visible { outline-color: #fff; }

.gr-btn[disabled],
.gr-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.gr-btn--ancho { width: 100%; }

/* =============================================================================
   Panel «TU LECTURA» — el instrumento que se mueve mientras rellenas
   ========================================================================== */

.gr-lectura-viva {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--nube);
  box-shadow: var(--sombra);
  padding: 1.35rem;
}

@media (min-width: 1024px) {
  .gr-lectura-viva {
    position: sticky;
    top: 5rem;
  }
}

.gr-lectura-viva__estado {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0.5rem 0;
  color: var(--muted);
  transition: color 0.25s var(--easing);
}

.gr-lectura-viva__estado[data-estado="compatible"] { color: var(--live); }
.gr-lectura-viva__estado[data-estado="corto"] { color: var(--ambar); }
.gr-lectura-viva__estado[data-estado="entrenar"] { color: var(--cielo); }

/* Barra de progreso. */
.gr-barra {
  height: 6px;
  background: var(--cielo-claro);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.9rem 0 0.5rem;
}

.gr-barra__relleno {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cielo), var(--ambar-vivo));
  transition: width 0.6s var(--easing), background 0.3s var(--easing);
}

.gr-barra__relleno[data-lleno="1"] { background: var(--live); }

/* =============================================================================
   Pasos del formulario (mejora progresiva: sin JS se ven todos)
   ========================================================================== */

.gr-pasos {
  display: flex;
  gap: 1px;
  background: var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--sombra);
}

.gr-paso {
  flex: 1;
  background: var(--panel);
  padding: 0.75rem 0.6rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--easing), background 0.2s var(--easing);
}

.gr-paso[aria-current="step"] {
  color: var(--cielo);
  background: var(--panel-hi);
  box-shadow: inset 0 -3px 0 var(--cielo);
}

.gr-paso__n {
  display: block;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: inherit;
}

/* =============================================================================
   Accesibilidad y movimiento
   ========================================================================== */

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

/* El honeypot: invisible para las personas, apetecible para los bots. */
.gr-trampa {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gr *,
  .gr *::before,
  .gr *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Impresión: alguien imprimirá su ficha. Que se lea. */
@media print {
  .gr { background: #fff; color: #000; }
  .gr-btn,
  .gr-pasos,
  .gr-panorama,
  .gr-barra-fija { display: none; }
}

/* =============================================================================
   LANDING
   =============================================================================

   La identidad ya existía antes que esta web: Marino y Leticia venían usando
   «INTENTO / RÉCORD / NACIONAL» apilado en rojo y amarillo sobre una foto del
   A400M. Aquí se reconstruye en HTML y CSS en vez de servir el PNG, para que sea
   nítido en cualquier pantalla, escale en el móvil y se pueda leer y traducir.

   Rojo y amarillo son de la marca y viven SOLO en el titular del hero, encima
   de la foto. En el resto de la página el color funcional es el azul de cielo
   y el naranja de sol; si la bandera baja al cuerpo se come la interfaz.
   ========================================================================== */

.gr {
  --rojo: #f5333f;
  --amarillo: #ffe14d;
}

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

.gr-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* Capas del hero, TODAS positivas.
   Con z-index negativo la foto se colaba por detrás del fondo del <body>: al declarar
   un background en <html>, el del <body> deja de propagarse al lienzo y pasa a pintarse
   a su propia altura, tapando cualquier hijo con z-index negativo. Apilar hacia arriba
   (foto 0 · velo 1 · contenido 2) no depende de ese detalle. */
.gr-hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gr-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* El velo es AZUL, no negro, y solo en la mitad de abajo: la foto es un cielo y
   apagarlo entero la convierte en una foto nocturna. Arriba se deja limpio para
   que el cielo siga siendo cielo; abajo se hunde hacia el azul de altitud, que
   es donde va el texto. */
.gr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 42, 68, 0.32) 0%,
      rgba(10, 42, 68, 0.06) 28%,
      rgba(10, 42, 68, 0.55) 68%,
      rgba(10, 42, 68, 0.88) 100%);
}

/* La transición al fondo claro la hace una silueta de nubes recortada, no un
   degradado: un `linear-gradient` entre dos colores deja una banda lechosa que se
   ve exactamente como lo que es, una transición de CSS. Ver `_nubes.svg.twig`. */
.gr-nubes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;          /* -1px: sin esto queda una raya de fondo por redondeo */
  width: 100%;
  height: clamp(40px, 5.2vw, 74px);
  z-index: 2;
  display: block;
  pointer-events: none;
  color: var(--bruma);   /* el color de la sección que viene debajo */
}

.gr-hero__contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(2rem, 6vw, 4rem) clamp(5.5rem, 11vw, 9rem);
  color: #fff;
}

.gr-hero__contenido .gr-etiqueta { color: rgba(255, 255, 255, 0.82); }
.gr-hero__contenido .gr-nota { color: rgba(255, 255, 255, 0.78); }

/* Flecha de «sigue bajando»: la página es larga y hay que decirlo. */
.gr-hero__seguir {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 2;
  translate: -50% 0;
  width: 26px;
  height: 26px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  rotate: 45deg;
  animation: gr-bajar 2.4s ease-in-out infinite;
}

@keyframes gr-bajar {
  0%, 100% { transform: translateY(-4px); opacity: 0.35; }
  50% { transform: translateY(4px); opacity: 0.9; }
}

/* --- El logotipo tipográfico ------------------------------------------- */

.gr-marca {
  display: grid;
  gap: 0;
  margin: 0 0 1.25rem;
  line-height: 0.82;
  font-family: var(--grito);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  /* Se ajusta al ancho disponible sin desbordar nunca en móvil. */
  font-size: clamp(3.2rem, 15vw, 9rem);
  text-shadow: 0 2px 30px rgba(10, 42, 68, 0.45);
}

.gr-marca span { display: block; }
.gr-marca__1 { color: var(--rojo); }
.gr-marca__2 { color: var(--amarillo); }
.gr-marca__3 { color: var(--rojo); }

.gr-marca__anyo {
  font-family: var(--mono);
  font-size: clamp(0.75rem, 2.2vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.5em;
  color: #fff;
  margin-top: 0.7rem;
  text-shadow: none;
}

/* --- Créditos de foto: obligatorios, discretos ------------------------- */

.gr-credito {
  position: absolute;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  z-index: 3;
}

/* =============================================================================
   PANORAMA — foto a sangre con un mensaje que aparece al llegar
   =============================================================================
   Es el motor del recorrido: se baja, entra una foto grande a pantalla casi
   completa, y encima aparece una sola frase. Nada más. Una idea por pantalla.

   `background-attachment: fixed` NO se usa: en iOS no funciona y en Android
   provoca tirones. El efecto de profundidad se hace escalando la imagen muy
   poco al entrar, que es barato y se ve igual de bien.
   ========================================================================== */

.gr-panorama {
  position: relative;
  min-height: clamp(420px, 78vh, 720px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--cielo-hondo);
}

.gr-panorama__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gr-panorama__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--easing);
}

/* La foto entra un pelín ampliada y se asienta al llegar. Ese 8 % es todo el
   efecto: no hay parallax ni `background-attachment: fixed`, que en iOS no
   funciona y en Android da tirones. */
@media (prefers-reduced-motion: no-preference) {
  .gr-js .gr-panorama__foto img { transform: scale(1.08); }
  .gr-js .gr-panorama.gr-visible .gr-panorama__foto img { transform: scale(1); }
}

.gr-panorama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(10, 42, 68, 0.82) 0%,
    rgba(10, 42, 68, 0.55) 42%,
    rgba(10, 42, 68, 0.15) 100%
  );
}

/* Más velo, para las fotos claras y para los panoramas que llevan texto pequeño
   además del titular. El del cierre es el caso: un cielo gris y un prado verde
   claro, con la letra pequeña de RGPD encima. Con el velo normal se lee mal, y
   ese texto es justo el que no puede quedar decorativo. */
.gr-panorama--denso::before {
  background: linear-gradient(
    100deg,
    rgba(10, 42, 68, 0.93) 0%,
    rgba(10, 42, 68, 0.8) 45%,
    rgba(10, 42, 68, 0.35) 100%
  );
}

.gr-panorama--denso .gr-nota { color: rgba(255, 255, 255, 0.88); }

/* Variante para fotos donde el sujeto está a la izquierda. */
.gr-panorama--derecha::before {
  background: linear-gradient(
    260deg,
    rgba(10, 42, 68, 0.82) 0%,
    rgba(10, 42, 68, 0.55) 42%,
    rgba(10, 42, 68, 0.15) 100%
  );
}

.gr-panorama__contenido {
  position: relative;
  z-index: 2;
  color: #fff;
  padding-block: clamp(3rem, 8vw, 5rem);
}

.gr-panorama--derecha .gr-panorama__contenido { text-align: right; }
.gr-panorama--derecha .gr-panorama__texto { margin-left: auto; }

.gr-panorama__texto { max-width: 46ch; }

.gr-panorama__titulo {
  font-family: var(--grito);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 8vw, 5rem);
  margin: 0 0 1rem;
  text-shadow: 0 2px 24px rgba(10, 42, 68, 0.4);
  text-wrap: balance;
}

.gr-panorama__cuerpo {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

.gr-panorama .gr-etiqueta { color: rgba(255, 255, 255, 0.75); }
.gr-panorama .gr-credito { color: rgba(255, 255, 255, 0.4); }

/* ------------------------------------------------- Barra de instrumentos --- */

.gr-barra-fija {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linea);
}

.gr-barra-fija__interior {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.gr-barra-fija__interior::-webkit-scrollbar { display: none; }

.gr-barra-fija__dato {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.gr-barra-fija__dato b {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cielo-hondo);
  letter-spacing: 0;
}

.gr-barra-fija__cta { margin-left: auto; flex: 0 0 auto; }

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

.gr-dos-columnas {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .gr-dos-columnas { grid-template-columns: 1fr 1fr; }
  .gr-dos-columnas--invertida > :first-child { order: 2; }
}

.gr-figura {
  position: relative;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--cielo-claro);
  box-shadow: var(--sombra-alta);
}

.gr-figura img { display: block; width: 100%; }

.gr-figura figcaption {
  position: absolute;
  right: 0.6rem;
  bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 42, 68, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}

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

.gr-tarjeta {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--nube);
  box-shadow: var(--sombra);
  padding: 1.4rem;
}

.gr-tarjeta--destacada {
  border-color: rgba(194, 65, 12, 0.3);
  box-shadow: var(--sombra), inset 3px 0 0 var(--ambar);
}

/* ------------------------------------------------------------- El listón --- */

.gr-listado-req {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.gr-req {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--nube);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.gr-req__led {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 0.6rem;
  background: var(--muted);
}

.gr-req__led--ok { background: var(--live); box-shadow: 0 0 0 4px var(--live-tenue); }
.gr-req__led--pendiente { background: var(--cielo); box-shadow: 0 0 0 4px rgba(26, 115, 184, 0.14); }
.gr-req__led--tuyo {
  background: var(--ambar);
  box-shadow: 0 0 0 4px var(--ambar-tenue);
  animation: gr-latido 2.5s ease-in-out infinite;
}

.gr-req__texto { flex: 1; min-width: 0; }
.gr-req__texto strong { display: block; color: var(--cielo-hondo); font-weight: 600; }
.gr-req__texto small { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

.gr-req__estado {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.4rem;
}

/* -------------------------------------------------------------- Galería --- */

.gr-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0.75rem;
}

.gr-galeria figure {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.gr-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--easing);
}

@media (hover: hover) {
  .gr-galeria figure:hover img { transform: scale(1.04); }
}

/* ------------------------------------------------- En marcha (el registro) --- */

.gr-log { display: grid; gap: 0.5rem; }

.gr-log__linea {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 1.1rem;
  background: var(--nube);
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.gr-log__fecha { color: var(--cielo); white-space: nowrap; letter-spacing: 0.1em; }
.gr-log__texto { color: var(--muted-fuerte); font-family: var(--texto-familia); font-size: 0.94rem; }
.gr-log__estado { color: var(--live); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.gr-log__estado--pendiente { color: var(--ambar); }

@media (max-width: 599px) {
  .gr-log__linea { grid-template-columns: 1fr auto; }
  .gr-log__texto { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- Cierre --- */

.gr-cta-final {
  border-radius: var(--radio);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--cielo-medio), var(--cielo-hondo));
  box-shadow: var(--sombra-alta);
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  color: #fff;
}

.gr-cta-final .gr-titulo { color: #fff; }
.gr-cta-final .gr-subtitulo { color: rgba(255, 255, 255, 0.88); }
.gr-cta-final .gr-nota { color: rgba(255, 255, 255, 0.72); }
.gr-cta-final .gr-etiqueta { color: rgba(255, 255, 255, 0.7); }
.gr-cta-final a:not(.gr-btn) { color: #ffd9a3; }

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

.gr-pie {
  background: var(--cielo-hondo);
  color: rgba(234, 243, 251, 0.75);
  padding-block: clamp(2rem, 5vw, 3rem);
}

.gr-pie .gr-etiqueta { color: rgba(234, 243, 251, 0.6); }
.gr-pie a { color: rgba(234, 243, 251, 0.85); }

/* Aparecer al entrar en pantalla.
   Cuelga de `.gr-js` (la pone un script en línea del <head>) a propósito: si el
   JavaScript no llega, no se esconde nada y la página se lee entera. Ver el comentario
   de `base_landing.html.twig`. Con `reduced-motion` tampoco se esconde. */
@media (prefers-reduced-motion: no-preference) {
  .gr-js .gr-aparece {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
  }
  .gr-js .gr-aparece.gr-visible { opacity: 1; transform: none; }

  /* Escalonado: cuando entran varios hermanos a la vez, que no lo hagan a la
     vez exactamente. Se nota poco y se siente mucho. */
  .gr-js .gr-aparece[data-retardo="1"] { transition-delay: 0.1s; }
  .gr-js .gr-aparece[data-retardo="2"] { transition-delay: 0.2s; }
  .gr-js .gr-aparece[data-retardo="3"] { transition-delay: 0.3s; }
}

/* =============================================================================
   MARCA
   ========================================================================== */

.gr-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.gr-logo svg {
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
}

.gr-logo__texto {
  display: grid;
  line-height: 1;
}

.gr-logo__nombre {
  font-family: var(--grito);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gr-logo__lema {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-top: 0.22rem;
}

/* Sobre foto: la formación en blanco y el punto central en ámbar vivo. */
.gr-logo--claro { color: #fff; --logo-centro: var(--ambar-vivo); }

/* =============================================================================
   FONDO VIVO
   =============================================================================
   Una capa fija detrás de todo con dos manchas de luz que se mueven según se
   baja. Da sensación de estar atravesando aire en vez de pasar diapositivas.

   Se mueve con una variable que el JavaScript actualiza dentro de
   requestAnimationFrame, no con `background-attachment: fixed` ni con un
   `scroll` que reposicione elementos: así el navegador solo recompone capas ya
   pintadas y no hay ni un reflow. Sin JavaScript se queda quieta y no se nota.
   ========================================================================== */

.gr-aire {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  background:
    radial-gradient(60vw 60vw at calc(12% + var(--gr-avance, 0) * 46%) calc(18% + var(--gr-avance, 0) * 22%),
      rgba(26, 115, 184, 0.16), transparent 62%),
    radial-gradient(48vw 48vw at calc(88% - var(--gr-avance, 0) * 40%) calc(78% - var(--gr-avance, 0) * 34%),
      rgba(194, 65, 12, 0.1), transparent 60%);
  transition: opacity 0.6s var(--easing);
}

/* Dentro de las secciones oscuras estorba: allí el color ya lo pone el fondo. */
.gr-seccion,
.gr-panorama,
.gr-hero,
.gr-pie {
  position: relative;
  z-index: 1;
}

/* =============================================================================
   MARCADOR DE SECCIÓN
   =============================================================================
   Antes era una línea de 0,68rem en gris que no veía nadie. Ahora el número va
   en la tipografía de gritar y la línea se dibuja sola al entrar en pantalla.
   ========================================================================== */

.gr-seccion__marca {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cielo);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.gr-seccion__n {
  font-family: var(--grito);
  font-size: 2.1rem;
  line-height: 0.8;
  letter-spacing: 0;
  color: var(--ambar);
}

.gr-seccion__marca::after {
  content: "";
  flex: 1;
  height: 2px;
  background: currentColor;
  opacity: 0.28;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--easing) 0.15s;
}

.gr-js .gr-seccion__marca.gr-visible::after,
.gr-seccion__marca.gr-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .gr-seccion__marca::after { transform: scaleX(1); }
}

.gr-seccion--cielo .gr-seccion__marca { color: #8fc6f0; }
.gr-seccion--cielo .gr-seccion__n { color: var(--ambar-vivo); }

/* =============================================================================
   TEXTO QUE ENTRA POR PARTES
   =============================================================================
   `gr-secuencia` reparte el retardo entre los hijos directos: el titular entra,
   luego la entradilla, luego el botón. Es la diferencia entre «aparece un
   bloque» y «alguien te lo va contando».

   El índice lo pone el JavaScript en `--i`; sin él todos valen 0 y entran a la
   vez, que sigue estando bien.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .gr-js .gr-secuencia > * {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.75s var(--easing) calc(var(--i, 0) * 90ms),
      transform 0.75s var(--easing) calc(var(--i, 0) * 90ms);
  }

  .gr-js .gr-secuencia.gr-visible > * {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================================
   FRASES GRANDES
   ========================================================================== */

.gr-lema {
  font-family: var(--grito);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  margin: 0;
  color: var(--cielo-hondo);
  text-wrap: balance;
}

.gr-lema--claro { color: #fff; text-shadow: 0 2px 28px rgba(10, 42, 68, 0.45); }
.gr-lema em { font-style: normal; color: var(--ambar); }
.gr-lema--claro em { color: #ffb066; }

/* El lema en inglés que da nombre al otro dominio. Va suelto, como una firma. */
.gr-firma {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0;
}

.gr-firma--claro { color: #ffb066; }

/* =============================================================================
   AMPLIAR FOTOS
   ========================================================================== */

.gr-ampliable {
  cursor: zoom-in;
  border: 0;
  padding: 0;
  background: none;
  display: block;
  width: 100%;
  position: relative;
}

.gr-ampliable::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 42, 68, 0);
  transition: background 0.25s var(--easing);
}

@media (hover: hover) {
  .gr-ampliable:hover::after { background: rgba(10, 42, 68, 0.14); }
}

.gr-ampliable:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
}

.gr-visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 3vw, 2.5rem);
  background: rgba(6, 22, 36, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  opacity: 0;
  transition: opacity 0.25s var(--easing);
}

.gr-visor[open] { opacity: 1; }
.gr-visor::backdrop { background: rgba(6, 22, 36, 0.9); }

.gr-visor img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  border-radius: var(--radio);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.gr-visor__pie {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 1rem;
  text-align: center;
}

.gr-visor__cerrar {
  position: absolute;
  top: clamp(0.5rem, 2vw, 1.5rem);
  right: clamp(0.5rem, 2vw, 1.5rem);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.gr-visor__cerrar:hover { background: rgba(255, 255, 255, 0.2); }

/* =============================================================================
   APOYO INSTITUCIONAL
   =============================================================================
   El bloque del Ejército del Aire y del Espacio. El encuadre no es decorativo:
   NO hay ningún acuerdo, y la página tiene que dejarlo dicho sin rodeos a la
   vez que explica que ese apoyo es imprescindible. Por eso el aviso va DENTRO
   de la tarjeta y con el mismo peso visual que el resto, no en letra pequeña
   al pie.
   ========================================================================== */

.gr-apoyo {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.06);
  padding: clamp(1.25rem, 4vw, 2rem);
}

@media (min-width: 760px) {
  .gr-apoyo { grid-template-columns: auto 1fr; gap: 2rem; }
}

.gr-apoyo__escudo {
  margin: 0;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
}

/* El escudo es apaisado (1,43:1), no cuadrado: se dimensiona por ANCHO y se deja
   la altura libre. Con un cuadrado de 132 px el emblema quedaba diminuto y con
   aire a los lados, porque lo que topaba era el alto. */
.gr-apoyo__escudo img {
  width: clamp(150px, 20vw, 210px);
  height: auto;
}

.gr-apoyo__escudo figcaption {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  max-width: 20ch;
  line-height: 1.5;
}

/* Sin escudo, la tarjeta se queda a una sola columna en vez de dejar un hueco con un
   aviso dentro. Un recuadro de puntos diciendo «pendiente» se lee como una web a
   medio hacer, que es justo lo contrario de lo que tiene que transmitir esta página. */
.gr-apoyo--sin-escudo { grid-template-columns: 1fr; }

/* =============================================================================
   LA MANIOBRA
   =============================================================================
   El salto entero contado con el scroll, a pantalla completa.

   La sección mide 600 vh **solo cuando hay JavaScript** (`.gr-maniobra--viva`, que
   pone el propio guion). Sin él se queda a la altura del dibujo: seis pantallas de
   nada sería mucho peor que no tener la animación.

   Dentro va un `sticky` que ocupa la pantalla; mientras esos 600 vh pasan por
   delante, lo que cambia es el dibujo. Eso hace que el usuario controle el ritmo:
   puede pararse en la figura cerrada, o volver atrás a ver la salida.
   ========================================================================== */

.gr-maniobra-seccion {
  position: relative;
  background: var(--cielo-hondo);
}

.gr-js .gr-maniobra-seccion.gr-maniobra--viva { height: 600vh; }
.gr-js .gr-maniobra-seccion.gr-maniobra--quieta { height: auto; }

.gr-maniobra-fija {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 460px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #06203a 0%, #0d4a78 46%, #2b7fbb 80%, #64a6d4 100%);
}

.gr-maniobra--quieta .gr-maniobra-fija { position: relative; height: auto; padding-block: 3rem; }

.gr-maniobra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.gr-maniobra--quieta .gr-maniobra { position: relative; height: auto; }

/* Cada saltador se mueve como un grupo: el círculo de caída libre y la vela
   comparten posición y solo cambia cuál de los dos se ve. */
.gr-salto {
  transform-box: view-box;
  transform-origin: 0 0;
}

.gr-cuerpo { fill: #fff; }
.gr-vela { fill: #fff; opacity: 0; }

/* El horizonte y el suelo van al fondo del todo. El horizonte se ve durante toda la
   caída —es lo que hace que la figura se lea en escorzo y no en planta— y el suelo
   solo aparece cuando ya están cerca. */
.gr-horizonte { opacity: 0.7; }

/* Los anillos de fuera, algo más apagados: da profundidad y deja leer el orden
   de la figura de dentro afuera. */
.gr-salto[data-anillo="3"] .gr-cuerpo,
.gr-salto[data-anillo="3"] .gr-vela { fill: rgba(255, 255, 255, 0.88); }
.gr-salto[data-anillo="4"] .gr-cuerpo,
.gr-salto[data-anillo="4"] .gr-vela { fill: rgba(255, 255, 255, 0.76); }

/* La base en ámbar: es la que cierra primero y sobre la que se monta todo. */
.gr-salto[data-anillo="0"] .gr-cuerpo,
.gr-salto[data-anillo="0"] .gr-vela { fill: var(--ambar-vivo); }

.gr-avion { fill: rgba(255, 255, 255, 0.94); opacity: 0; }
.gr-nube-capa { fill: #fff; }
.gr-suelo { opacity: 0; }

.gr-maniobra__figura,
.gr-avion,
.gr-nube-capa,
.gr-suelo { will-change: transform; }

/* --------------------------------------------------------------- Altímetro --- */
/*
   Un altímetro marca la altura sobre el suelo, y es el instrumento que todo el
   mundo en esta página lleva en la muñeca. Hace de barra de progreso sin parecer
   una barra de progreso, que es justo lo que hacía falta aquí.
*/

.gr-altimetro {
  position: absolute;
  right: clamp(0.75rem, 3vw, 2.5rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  pointer-events: none;
}

.gr-altimetro__escala {
  position: relative;
  width: 2px;
  height: min(46vh, 320px);
  background: rgba(255, 255, 255, 0.22);
  display: grid;
}

/* Las marcas se colocan por su altura real: 20.000 arriba, 0 abajo. */
.gr-altimetro__marca {
  position: absolute;
  right: 12px;
  top: calc((1 - var(--alt) / 20000) * 100%);
  translate: 0 -50%;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}

.gr-altimetro__marca::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.gr-altimetro__aguja {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ambar-vivo);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.28);
  margin-top: -7px;
}

.gr-altimetro__lectura {
  text-align: center;
  color: #fff;
}

.gr-altimetro__lectura b {
  display: block;
  font-family: var(--grito);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gr-altimetro__lectura span {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ----------------------------------------------------------------- Rótulo --- */

.gr-maniobra-rotulo {
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1.5rem, 6vw, 4rem);
  z-index: 3;
  max-width: min(30rem, 62vw);
  color: #fff;
  text-shadow: 0 2px 24px rgba(6, 32, 58, 0.6);
}

.gr-maniobra-rotulo .gr-etiqueta { color: var(--ambar-vivo); }

.gr-maniobra-rotulo__titulo {
  font-family: var(--grito);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 0.95;
  margin: 0.4rem 0 0.6rem;
}

.gr-maniobra-rotulo__texto {
  margin: 0;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 599px) {
  .gr-maniobra-rotulo { max-width: 100%; right: clamp(1rem, 5vw, 4rem); bottom: 1.25rem; }

  /*
     EL ALTÍMETRO EN VERTICAL.

     En horizontal es una regla alta pegada al borde derecho con la lectura debajo.
     En un móvil eso no cabe: la escala se comía media pantalla y la cifra grande
     quedaba encajada contra el borde, pisando el «0» de la escala y saliéndose por
     la derecha.

     Aquí se da la vuelta: la cifra manda y va arriba del todo, y la regla se queda
     como una barra fina a su lado. Se sigue leyendo la altura, que es lo único que
     ese instrumento tiene que contar.
  */
  .gr-altimetro {
    top: 0.75rem;
    right: 0.75rem;
    translate: 0 0;
    grid-auto-flow: column;
    align-items: center;
    justify-items: end;
    gap: 0.55rem;
  }

  .gr-altimetro__escala { height: 22vh; }

  /* Las etiquetas de cada altura sobran en una pantalla de 390 px: la aguja y la
     cifra grande ya dicen dónde estás. */
  .gr-altimetro__marca { display: none; }

  .gr-altimetro__lectura { text-align: right; }
  .gr-altimetro__lectura b { font-size: 1.6rem; }
  .gr-altimetro__lectura span { font-size: 0.5rem; letter-spacing: 0.18em; }

  /* El rótulo se pega DEBAJO de la escena en vez de al fondo de la pantalla: en
     vertical la escena ocupa la mitad de arriba y anclar el texto abajo dejaba un
     vacío azul enorme en medio que parecía un fallo de carga. */
  .gr-maniobra-rotulo {
    top: 58%;
    bottom: auto;
    padding-top: 0;
  }

  .gr-maniobra-rotulo__titulo { font-size: clamp(1.9rem, 10vw, 3rem); }
  .gr-maniobra-rotulo__texto { font-size: 0.95rem; }
}

/* =============================================================================
   EL GRUPO DE WHATSAPP
   ========================================================================== */

.gr-grupo {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .gr-grupo { grid-template-columns: 1fr auto; }
}

.gr-grupo__qr {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  background: var(--nube);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: clamp(1rem, 3vw, 1.5rem);
  max-width: 320px;
  margin-inline: auto;
}

.gr-grupo__qr svg {
  display: block;
  width: min(240px, 60vw);
  height: auto;
}

.gr-grupo__qr .gr-nota {
  text-align: center;
  font-size: 0.82rem;
  max-width: 26ch;
}

/* El verde es el de WhatsApp y aquí sí compensa salirse de la paleta: es el color
   que hace que se reconozca el botón sin leerlo. `#128c7e` y no el verde claro de
   la marca porque el claro con texto blanco no llega al contraste mínimo. */
.gr-btn--whatsapp {
  background: #128c7e;
  color: #fff;
  box-shadow: 0 2px 6px rgba(18, 140, 126, 0.28), 0 10px 24px rgba(18, 140, 126, 0.2);
}

.gr-btn--whatsapp:hover { background: #0f7568; }

/* =============================================================================
   VÍDEO CON CARGA DIFERIDA
   =============================================================================
   La fachada: una imagen nuestra y un botón. El reproductor de YouTube solo
   aparece cuando alguien pulsa. El porqué está en `_video.html.twig`.
   ========================================================================== */

.gr-video {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--cielo-hondo);
  box-shadow: var(--sombra-alta);
  aspect-ratio: 16 / 9;
}

.gr-video__fachada {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
}

.gr-video__fachada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--easing), filter 0.4s var(--easing);
}

.gr-video__fachada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 42, 68, 0.1) 0%, rgba(10, 42, 68, 0.72) 100%);
}

@media (hover: hover) {
  .gr-video__fachada:hover img { transform: scale(1.03); }
}

/* El botón de play. Redondo, ámbar, y grande de verdad: es lo único que hay que
   pulsar en toda la sección. */
.gr-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 2;
  width: clamp(64px, 9vw, 92px);
  height: clamp(64px, 9vw, 92px);
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 6px 24px rgba(10, 42, 68, 0.45);
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--easing), background 0.2s var(--easing);
}

/* El triángulo, dibujado con bordes: un carácter ▶ cambia de forma en cada
   sistema y en algunos sale con el color de emoji. */
.gr-video__play::before {
  content: "";
  border-style: solid;
  border-width: 0.62em 0 0.62em 1.05em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(18px, 2.4vw, 24px);
  margin-left: 0.22em;
}

.gr-video__fachada:hover .gr-video__play,
.gr-video__fachada:focus-visible .gr-video__play {
  transform: scale(1.08);
  background: #a83709;
}

.gr-video__fachada:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
}

.gr-video__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 0.15rem;
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
  color: #fff;
}

.gr-video__pie b {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gr-video__pie small {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

/* Ya pulsado: manda el iframe y sobra todo lo demás. */
.gr-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* La fila del vídeo: el reproductor a la izquierda y el texto al lado. El vídeo
   se lleva algo más de sitio porque es lo que hay que mirar; el texto acompaña.
   A ~60 % del alto de pantalla, que es lo pedido y además evita que en portátiles
   bajos haya que hacer scroll para ver el play. */
.gr-video-fila {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  /* El vídeo se lleva el 60 % del ancho porque es lo que hay que mirar, y porque
     a 16:9 el ancho es lo que manda: con la mitad de la fila se quedaba en un 40 %
     del alto de pantalla en vez del 60 % que se buscaba. */
  .gr-video-fila { grid-template-columns: 1.75fr 1fr; }
}

@media (min-width: 1200px) {
  /* Esta sección respira más ancha que el resto: es la única con un vídeo dentro. */
  .gr-video-seccion .gr-contenedor { max-width: 1440px; }
}

/* Tope de seguridad: por muy ancha que sea la pantalla, el vídeo no puede comerse
   la pantalla entera de alto, o el texto de al lado queda fuera de vista. */
.gr-video { max-height: 62vh; }

/* =============================================================================
   CONMUTADOR DE IDIOMA
   ========================================================================== */

.gr-idiomas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.gr-idioma {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid transparent;
  transition: opacity 0.15s var(--easing), border-color 0.15s var(--easing),
    background 0.15s var(--easing);
}

/* La bandera del idioma que NO está activo se apaga, no se esconde: hay que ver
   que existe la otra opción, que es justo la gracia del conmutador. */
.gr-idioma svg {
  width: 21px;
  height: 14px;
  border-radius: 2px;
  display: block;
  opacity: 0.45;
  transition: opacity 0.15s var(--easing);
  box-shadow: 0 0 0 1px rgba(10, 42, 68, 0.12);
}

.gr-idioma:hover svg { opacity: 0.85; }

.gr-idioma--activo svg { opacity: 1; }

.gr-idioma--activo {
  color: var(--cielo-hondo);
  border-color: var(--linea-fuerte);
  background: var(--nube);
}

.gr-idioma:focus-visible {
  outline: 2px solid var(--cielo);
  outline-offset: 2px;
}

/* Sobre foto (el hero) o sobre azul: los textos en claro. */
.gr-logo--claro ~ .gr-idiomas .gr-idioma,
.gr-hero .gr-idioma { color: rgba(255, 255, 255, 0.7); }

.gr-hero .gr-idioma--activo {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.gr-hero .gr-idioma svg { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }

.gr-pie .gr-idioma { color: rgba(234, 243, 251, 0.7); }
.gr-pie .gr-idioma--activo {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* En móvil, dentro de la barra fija, solo las banderas: el texto ES/EN no cabe. */
@media (max-width: 599px) {
  .gr-barra-fija .gr-idioma span { display: none; }
  .gr-barra-fija .gr-idioma { padding: 0.25rem 0.3rem; }
}

/* =============================================================================
   LA BARRA FIJA EN MÓVIL
   =============================================================================
   Medido en un iPhone de 390 px: el selector de idiomas quedaba en x=401 y el
   botón de apuntarse en x=496 — o sea, los dos FUERA de la pantalla. La barra
   tiene `overflow-x: auto`, así que técnicamente se podían arrastrar, pero eso
   no lo descubre nadie: en la práctica el selector de idioma y la llamada a la
   acción no existían en móvil.

   Se resuelve quitando lo que no se pulsa y encogiendo lo que sí.
   ========================================================================== */

@media (max-width: 640px) {
  /* El scroll lateral deja de hacer falta, y quitarlo evita que la barra se pueda
     arrastrar por accidente al hacer scroll vertical con el pulgar. */
  .gr-barra-fija__interior {
    overflow-x: visible;
    gap: 0.5rem;
  }

  /* El año no se pulsa: fuera. */
  .gr-barra-fija__dato--prescindible { display: none; }

  /* Del logotipo se queda el símbolo. El nombre completo ya está en el hero, a
     dos dedos de aquí. */
  .gr-barra-fija .gr-logo__texto { display: none; }
  .gr-barra-fija .gr-logo svg { width: 2rem; height: 2rem; }

  /* Y el botón empuja al borde derecho, que es donde llega el pulgar. */
  .gr-barra-fija__cta { margin-left: auto !important; }
}

/* Muy estrecho (iPhone SE y similares): el botón se acorta también. */
@media (max-width: 380px) {
  .gr-barra-fija__cta { padding: 0.5rem 0.85rem !important; letter-spacing: 0.06em; }
}