/*
    GR-LANDING.CSS · RECONSTRUIDO TRAS UN BORRADO ACCIDENTAL EL 21/08/2026

    Esta es la capa específica de Red Bull Aces: hero, formulario y adaptaciones
    responsive. El reset, la tipografía base y los componentes públicos
    recuperados de Grandes Retos viven en `gr-foundation.css` y se cargan antes, para
    conservar esta reconstrucción sin sobrescribirla.
*/

/* ─────────────────────────────────────────────────────── Variables de marca ─── */
:root {
  --noche: #071f3f;
  --noche-alta: #0a2c52;
  --papel: #f4f1ea;
  --nube: #0d2748;
  --bruma: var(--noche);
  --plata: #c2c8ca;        /* 9.72:1 sobre noche */
  --plata-suave: #8a9296;  /* 5.19:1 sobre noche */
  --tinta: #0a1c33;
  --tinta-suave: #4a5560;
  --texto: var(--plata);
  --muted: var(--plata-suave);
  --muted-fuerte: var(--plata);
  --cielo-hondo: #0a2a44;
  --cian-sombra: #6fb7c4;
  --ambar-vivo: #ffb020;
  --oro: #d9a441;
  --linea: rgba(234, 240, 242, 0.28);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* La marca pública de Aces usa el PNG oficial. El selector más específico evita
   heredar la geometría cuadrada del SVG de Grandes Retos sin tocar ese componente. */
.gr-logo--aces > img {
  width: 4.6rem;
  height: 3.1rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.gr-seccion--papel {
  --bruma: var(--papel);
  --texto: var(--tinta);
  --muted: var(--tinta-suave);
  --muted-fuerte: var(--tinta);
  --cielo-hondo: var(--tinta);
}

/* ───────────────────────────────────────────────────────────── Estructura ──── */
.gr-contenedor {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.gr-contenedor--texto { max-width: 760px; }

.gr-seccion {
  padding-block: clamp(3rem, 9vw, 6.5rem);
  background: var(--bruma);
  color: var(--texto);
}
.gr-seccion--nube { background: var(--nube); }
.gr-seccion--cielo {
  /* REVISAR: variante «cielo» citada por sus reglas de color, no por su declaración
     de fondo exacta. */
}
.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); }
.gr-seccion--cielo .gr-seccion__marca { color: #8fc6f0; }
.gr-seccion--cielo .gr-seccion__n { color: var(--ambar-vivo); }

/* ------------------------------------------------------------- Tipografía --- */
.gr-parrafo {
  font-size: clamp(1.06rem, 2.2vw, 1.18rem);
  line-height: 1.62;
  margin: 0 0 1.35rem;
  color: var(--texto);
}
/* La frase que niega que esto sea una competición. Va suelta, sin adorno y sin
   repetirse en ninguna otra pantalla. */
.gr-parrafo--seco {
  font-family: var(--mono);
  font-size: clamp(0.82rem, 1.8vw, 0.92rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-fuerte);
  border-left: 2px solid var(--cielo);
  padding-left: 1rem;
  margin-block: 2.2rem;
}
.gr-parrafo--remate {
  font-weight: 700;
  font-size: clamp(1.16rem, 2.6vw, 1.38rem);
  color: var(--cielo-hondo);
  line-height: 1.45;
}
/* La voz baja: para el párrafo que es ficha técnica, no discurso. Más pequeño y
   más gris que el cuerpo normal, para que el ojo lo lea como una nota al margen. */
.gr-parrafo--apunte {
  font-size: clamp(0.92rem, 1.9vw, 1rem);
  line-height: 1.6;
  color: var(--muted);
}
.gr-titulo--giro { max-width: 16ch; }

.gr-datos-linea {
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.7vw, 0.88rem);
  letter-spacing: 0.08em;
  color: var(--oro);
}

/* ══════════════════════════════════ CÁMARA 1 · EL EMPUJE (el giro) ═══════════ */
/* La figura ocupa siempre su caja completa. Tras moverla al cierre del bloque,
   desplazar la caja con `translateY` abría una franja del fondo claro sobre la
   imagen; la entrada se limita a opacidad y la deriva permanece en el `img`,
   donde no altera la continuidad entre secciones. */
.gr-seccion--giro .gr-foto-sangre { overflow: clip; }
.gr-seccion--giro .gr-foto-sangre--deriva { margin-bottom: 0; }
.gr-seccion--giro > .gr-contenedor > :last-child { margin-bottom: 0; }

/* El relato abre con «What this is», continúa con la fotografía y después pasa
   directamente a Vrsar. El aire inferior pertenece al contenedor de texto —no
   al final de toda la sección— para centrar este primer plano sin abrir una
   franja después de las escenas que vienen a continuación. */
.gr-seccion--giro {
  --giro-aire-vertical: clamp(3rem, 9vw, 6.5rem);
  padding-top: var(--giro-aire-vertical);
  padding-bottom: 0;
}

.gr-seccion--giro > .gr-contenedor {
  padding-bottom: var(--giro-aire-vertical);
}

.gr-foto-sangre { margin: 0 0 clamp(2.5rem, 6vw, 4.5rem); position: relative; background: var(--noche); }
.gr-foto-sangre img { width: 100%; height: auto; display: block; }
.gr-foto-sangre--calida { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; }

/* El estado del proyecto no es una nota legal escondida: son dos decisiones que
   el atleta debe entender antes de leer el resto del briefing. Cada momento ocupa
   su propio plano, con una voz visual distinta, pero ambos comparten la misma
   retícula y el mismo ancho de lectura. */
.gr-giro-momentos {
  width: 100%;
  margin: 0;
}
.gr-giro-momento {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 42rem;
  min-height: clamp(34rem, 78svh, 54rem);
  overflow: clip;
  isolation: isolate;
}
.gr-giro-momento__interior {
  position: relative;
  z-index: 2;
  width: min(100%, 1120px);
  margin-inline: auto;
  padding: clamp(4.5rem, 10vw, 8rem) clamp(1rem, 6vw, 5rem);
}
.gr-giro-momento__senal {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  width: min(10rem, 34vw);
  margin-bottom: clamp(1.5rem, 4vw, 2.8rem);
}
.gr-giro-momento__senal::after {
  content: "";
  width: 100%;
  height: 1px;
  margin-left: 0.25rem;
  background: currentColor;
  opacity: 0.32;
}
.gr-giro-momento__senal i {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.gr-giro-momento__senal i:first-child { background: currentColor; }
.gr-giro-momento__titulo {
  max-width: 12.5ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 8.2vw, 7.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.gr-giro-momento__cuerpo {
  max-width: 38rem;
  margin: clamp(1.8rem, 4vw, 3rem) 0 0;
  font-size: clamp(1.12rem, 2.2vw, 1.55rem);
  font-weight: 650;
  line-height: 1.42;
  text-wrap: balance;
}
.gr-giro-momento__media {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 42%;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  /* La tarjeta de Vrsar es clara: sin esto, el hueco mientras carga la foto se veía
     tan blanco como la propia tarjeta. */
  background: var(--noche);
}
.gr-giro-momento__media picture,
.gr-giro-momento__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.gr-giro-momento__media img {
  object-fit: cover;
  object-position: 44% 50%;
  filter: saturate(0.92) contrast(1.05);
}
.gr-giro-momento__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(226, 240, 248, 0.98) 0%, rgba(226, 240, 248, 0.6) 17%, transparent 46%),
    linear-gradient(to top, rgba(5, 24, 43, 0.28), transparent 38%);
}
.gr-giro-momento--vrsar {
  color: #092746;
  background:
    radial-gradient(circle at 82% 18%, rgba(80, 172, 217, 0.3), transparent 32%),
    linear-gradient(145deg, #f5f9fc 0%, #dcebf4 55%, #c5e0ee 100%);
}
.gr-giro-momento--vrsar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(9, 39, 70, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 39, 70, 0.14) 1px, transparent 1px);
  background-size: clamp(4rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem);
  mask-image: linear-gradient(90deg, #000, #000 42%, transparent 68%);
}
.gr-giro-momento--vrsar .gr-giro-momento__interior {
  padding-right: clamp(22rem, 46vw, 40rem);
}
.gr-giro-momento--vrsar .gr-giro-momento__titulo {
  max-width: 8.5ch;
  font-size: clamp(3rem, 6.4vw, 6.2rem);
}
.gr-giro-momento--vrsar .gr-giro-momento__cuerpo {
  max-width: 30rem;
  color: rgba(9, 39, 70, 0.76);
}
.gr-giro-momento--desarrollo {
  color: #fff;
  background:
    radial-gradient(circle at 18% 70%, rgba(31, 119, 171, 0.46), transparent 38%),
    linear-gradient(135deg, #06162a 0%, #092c50 62%, #0b3b62 100%);
}
.gr-giro-momento--desarrollo::before,
.gr-giro-momento--desarrollo::after {
  content: "";
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}
.gr-giro-momento--desarrollo::before {
  right: -10vw;
  top: -24vw;
  width: clamp(28rem, 62vw, 58rem);
  aspect-ratio: 1;
}
.gr-giro-momento--desarrollo::after {
  right: 7vw;
  top: -7vw;
  width: clamp(15rem, 32vw, 30rem);
  aspect-ratio: 1;
}
.gr-giro-momento--desarrollo .gr-giro-momento__senal { color: #f5c547; }
.gr-giro-momento--desarrollo .gr-giro-momento__cuerpo { color: rgba(234, 243, 251, 0.78); }

@media (max-width: 700px) {
  .gr-giro-momento--vrsar {
    align-items: end;
    min-height: 48rem;
    color: #fff;
    background: #06172b;
  }
  .gr-giro-momento__media {
    inset: 0;
    clip-path: none;
  }
  .gr-giro-momento__media img { object-position: 43% 50%; }
  .gr-giro-momento__media::after {
    background:
      linear-gradient(to bottom, rgba(4, 18, 34, 0.04) 18%, rgba(4, 18, 34, 0.36) 48%, rgba(4, 18, 34, 0.97) 88%),
      linear-gradient(90deg, rgba(4, 18, 34, 0.24), transparent 65%);
  }
  .gr-giro-momento--vrsar::before {
    opacity: 0.13;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, transparent, #000 56%, #000);
  }
  .gr-giro-momento--vrsar .gr-giro-momento__interior {
    padding: clamp(22rem, 58svh, 29rem) 1rem 4rem;
  }
  .gr-giro-momento--vrsar .gr-giro-momento__titulo {
    max-width: 10ch;
    font-size: clamp(2.85rem, 13vw, 4.3rem);
  }
  .gr-giro-momento--vrsar .gr-giro-momento__cuerpo { color: rgba(239, 247, 252, 0.82); }
}

/* ══════════════════════════════════ SUPERFICIE PÚBLICA DE ACES ═════════════
   Estas piezas no existen en Grandes Retos. Se perdieron con la hoja original y
   no deben mezclarse con la base recuperada: aquí viven la portada, el barrido y
   el cierre propios de Aces. */

.gr-cabecera-aces {
  position: relative;
  z-index: 90;
  min-height: clamp(7rem, 14vw, 10rem);
  background: #061936;
  border-bottom: 1px solid rgba(194, 200, 202, 0.14);
  transition: min-height 260ms var(--easing), box-shadow 220ms ease, background-color 220ms ease;
}
.gr-cabecera-aces--persistente {
  position: sticky;
  top: 0;
}
.gr-js .gr-cabecera-aces--persistente {
  position: fixed;
  inset: 0 0 auto;
  min-height: 4.65rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-100% - 1px));
  background: rgba(6, 25, 54, 0.96);
  box-shadow: 0 0.6rem 1.8rem rgba(2, 12, 27, 0.24);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  transition:
    transform 320ms var(--easing),
    opacity 200ms ease,
    visibility 0s linear 320ms;
}
.gr-js .gr-cabecera-aces--persistente.gr-cabecera-aces--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.gr-js .gr-cabecera-aces--persistente .gr-cabecera-aces__marca img {
  width: 4.7rem;
}
.gr-js .gr-cabecera-aces--persistente .gr-cabecera-aces__cta {
  min-height: 2.75rem;
  padding-block: 0.55rem;
}
.gr-cabecera-aces__interior {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  max-width: 1440px;
  min-height: inherit;
}
.gr-cabecera-aces--centrada:not(.gr-cabecera-aces--persistente) .gr-cabecera-aces__interior {
  justify-content: center;
}
.gr-cabecera-aces__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0.75rem;
}
.gr-cabecera-aces__marca:focus-visible {
  outline: 3px solid var(--ambar-vivo);
  outline-offset: 0.4rem;
}
.gr-cabecera-aces__marca img {
  display: block;
  width: clamp(6rem, 11vw, 9rem);
  height: auto;
  filter: drop-shadow(0 0.8rem 1.8rem rgba(0, 0, 0, 0.3));
  transition: width 260ms var(--easing);
}
.gr-cabecera-aces__acciones {
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 1.6vw, 1.15rem);
  min-width: 0;
  margin-left: auto;
}
.gr-cabecera-aces__idiomas .gr-idiomas {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.1);
}
.gr-cabecera-aces__idiomas .gr-idioma { color: rgba(255, 255, 255, 0.7); }
.gr-cabecera-aces__idiomas .gr-idioma:hover { color: #fff; }
.gr-cabecera-aces__idiomas .gr-idioma--activo {
  color: #061936;
  background: #fff;
}
.gr-cabecera-aces__cta {
  flex: 0 0 auto;
  min-height: 3.15rem;
  padding: 0.75rem clamp(1rem, 2.2vw, 1.65rem);
  white-space: nowrap;
}
/* Los enlaces internos no deben colocar el marcador de sección debajo de la barra
   compacta. El margen también ayuda a quien navega por encabezados con teclado. */
.gr-seccion[id] { scroll-margin-top: 4.75rem; }

/* ───────────────────────────────────────────── Aviso de confidencialidad ─── */
/*
   Tres apariciones del mismo aviso —portada, formulario y correo— con el mismo
   componente. La `--portada` invierte a papel claro sobre la noche para que el corte
   con la fotografía sea evidente: una advertencia legal tiene que verse como tal y no
   como un párrafo más del relato.

   El filete lateral va en `--oro` y no en `--ambar-vivo`: sobre papel el ámbar da
   1,7:1 y desaparece.
*/
/*
   OJO CON EL COLOR DEL TEXTO. `--texto` no sirve aquí: `.gr` lo fija en tinta oscura
   con más especificidad que el `:root` de esta hoja, así que un `color: var(--texto)`
   sobre fondo noche sale en 1,2:1 —texto azul marino sobre azul marino— y el aviso se
   vuelve ilegible sin que nadie lo note en la revisión. Cada variante declara su color.

   Es el mismo motivo por el que las secciones oscuras de esta página redefinen la
   variable a mano en vez de heredarla.
*/
.gr-seccion--confidencial {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--noche-alta);
}
.gr-aviso-confidencial {
  padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.1rem, 2.8vw, 1.8rem);
  border: 1px solid rgba(220, 232, 242, 0.22);
  border-left: 3px solid var(--oro);
  border-radius: 0 0.6rem 0.6rem 0;
}
.gr-aviso-confidencial__titulo {
  margin: 0 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.gr-aviso-confidencial__cuerpo {
  margin: 0;
  font-size: clamp(0.9rem, 1.7vw, 1rem);
  line-height: 1.7;
  /* Justificado, y con partición de palabras porque sin ella una caja estrecha abre
     ríos blancos entre palabras y se lee peor que en bandera. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Lo destacado no solo va en negrita: cambia de color y ensancha un pelo el rastreo.
   Con solo el peso, sobre un párrafo corto y a este tamaño, apenas se distingue. */
.gr-resalte {
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* Sobre la noche: papel claro, 12,4:1. El oro da 7,4:1 y aguanta el cuerpo pequeño. */
.gr-aviso-confidencial--portada {
  color: #dce8f2;
  background: rgba(244, 241, 234, 0.05);
}
.gr-aviso-confidencial--portada .gr-aviso-confidencial__titulo { color: var(--oro); }
.gr-aviso-confidencial--portada .gr-resalte { color: #ffe6ad; }

/* La puerta va dentro de un panel BLANCO, no sobre la noche como la portada: aquí el
   oro daría 1,7:1 y hay que bajar a un ámbar quemado. Margen propio porque el aviso
   vive entre el texto de la puerta y el botón de aceptar. */
.gr-aviso-confidencial--puerta {
  margin-block: 1.25rem;
  color: var(--tinta);
  border-color: rgba(10, 28, 51, 0.18);
  border-left-color: #a8701c;
  background: rgba(10, 28, 51, 0.03);
  text-align: left;
}
.gr-aviso-confidencial--puerta .gr-aviso-confidencial__titulo { color: #8a5a12; }
.gr-aviso-confidencial--puerta .gr-resalte { color: #6d4409; }

.gr-hero-aces {
  position: relative;
  height: calc(100vh - clamp(7rem, 14vw, 10rem));
  height: calc(100svh - clamp(7rem, 14vw, 10rem));
  min-height: 34rem;
  overflow: clip;
  isolation: isolate;
  background: #06162d;
}
.gr-js .gr-hero-aces {
  height: 100vh;
  height: 100svh;
}
.gr-hero-aces__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.gr-hero-aces__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3, 15, 31, 0.08) 52%, rgba(3, 15, 31, 0.68) 100%),
    linear-gradient(to right, rgba(3, 15, 31, 0.08), transparent 28%, transparent 72%, rgba(3, 15, 31, 0.08));
}
.gr-hero-aces__contexto {
  position: absolute;
  z-index: 3;
  left: clamp(1rem, 4vw, 3rem);
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  display: grid;
  justify-items: start;
  width: min(34rem, calc(100% - 7.5rem));
  padding: clamp(1rem, 2.4vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.9rem;
  color: #fff;
  background: rgba(3, 15, 31, 0.72);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}
.gr-hero-aces__archivo,
.gr-hero-aces__datos { margin: 0; }
.gr-hero-aces__archivo {
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}
.gr-hero-aces__datos {
  margin-top: 0.5rem;
  font-size: clamp(1rem, 2.1vw, 1.22rem);
  font-weight: 700;
  line-height: 1.35;
}
.gr-hero-aces__contexto .gr-btn { margin-top: 1rem; }
.gr-applications-closed {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  width: min(100%, 34rem);
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.7rem;
  color: #fff;
  background: rgba(6, 25, 54, 0.82);
  box-shadow: 0 0.8rem 2rem rgba(2, 12, 27, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gr-applications-closed strong {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gr-applications-closed span {
  font-size: 0.88rem;
  line-height: 1.4;
}
.gr-applications-closed--light {
  color: var(--cielo-hondo);
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(8, 43, 69, 0.15);
  box-shadow: 0 0.8rem 2rem rgba(2, 12, 27, 0.12);
}
.gr-hero-aces__bajar {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 4vw, 3rem);
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.gr-hero-aces__bajar:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(3, 15, 31, 0.34);
}
.gr-hero-aces__bajar:focus-visible {
  outline: 3px solid var(--ambar-vivo);
  outline-offset: 0.25rem;
}
.gr-hero-aces__bajar span {
  width: 0.72rem;
  height: 0.72rem;
  margin-top: -0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.gr-hero-aces__movimiento {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 4vw, 3rem);
  bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 4rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  color: #fff;
  background: rgba(3, 15, 31, 0.28);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.gr-hero-aces__movimiento[hidden] { display: none; }
.gr-hero-aces__movimiento:hover {
  border-color: #fff;
  background: rgba(3, 15, 31, 0.58);
}
.gr-hero-aces__movimiento:focus-visible {
  outline: 3px solid var(--ambar-vivo);
  outline-offset: 0.25rem;
}
.gr-hero-aces__movimiento span {
  width: 0.78rem;
  height: 0.9rem;
  background: linear-gradient(90deg, currentColor 0 0.22rem, transparent 0.22rem 0.56rem, currentColor 0.56rem);
}
.gr-hero-aces__movimiento[data-paused="true"] span {
  width: 0;
  height: 0;
  margin-left: 0.18rem;
  border-top: 0.48rem solid transparent;
  border-bottom: 0.48rem solid transparent;
  border-left: 0.72rem solid currentColor;
  background: none;
}
@media (max-width: 700px) {
  .gr-hero-aces__movimiento {
    top: 1rem;
    bottom: auto;
  }
}

.gr-grafico-seccion,
.gr-seccion--semana,
.gr-seccion--cierre {
  --texto: #dce8f2;
  --muted: #aec4d5;
  --muted-fuerte: #e8f0f6;
  --cielo-hondo: #fff;
  --linea: rgba(220, 232, 242, 0.22);
  color: var(--texto);
}
.gr-grafico-seccion .gr-seccion__marca,
.gr-seccion--semana .gr-seccion__marca,
.gr-seccion--cierre .gr-seccion__marca {
  color: #b8d8ec;
}
.gr-grafico-seccion .gr-seccion__n,
.gr-seccion--semana .gr-seccion__n,
.gr-seccion--cierre .gr-seccion__n {
  color: #ffc766;
}
.gr-grafico-seccion {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #06172f;
}
.gr-grafico-seccion > .gr-contenedor { position: relative; z-index: 2; }
.gr-grafico-atmosfera {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.gr-grafico-atmosfera picture,
.gr-grafico-atmosfera img {
  display: block;
  width: 100%;
  height: 100%;
}
.gr-grafico-atmosfera img {
  object-fit: cover;
  object-position: 52% 50%;
  opacity: 0.56;
  filter: grayscale(0.28) saturate(0.76) brightness(0.65) contrast(1.18);
  transform: scale(1.06);
  transform-origin: 50% 50%;
  will-change: transform;
}
.gr-grafico-atmosfera::before,
.gr-grafico-atmosfera::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}
.gr-grafico-atmosfera::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(38, 105, 151, 0.36), transparent 31rem),
    linear-gradient(115deg, rgba(3, 15, 31, 0.92) 0%, rgba(4, 22, 43, 0.72) 48%, rgba(3, 15, 31, 0.88) 100%);
}
.gr-grafico-atmosfera::after {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: clamp(4rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem);
  mask-image: radial-gradient(circle at 52% 38%, #000, transparent 72%);
}

/* PUENTE VISUAL. La fotografía ocupa una pantalla completa y corta la acumulación
   de fondos azul marino sin añadir otro bloque de texto. */
.gr-puente-humano {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 36rem;
  margin: 0;
  overflow: clip;
  isolation: isolate;
  background: #6f733d;
}
.gr-puente-humano picture,
.gr-puente-humano img {
  display: block;
  width: 100%;
  height: 100%;
}
.gr-puente-humano img {
  object-fit: cover;
  object-position: 52% 54%;
  transform: scale(1.035);
}
@media (max-width: 700px) {
  .gr-puente-humano { min-height: 42rem; }
  .gr-puente-humano img { object-position: 54% 50%; }
}

.gr-seccion--letra { background: var(--papel); }
/*
   ÉNFASIS DENTRO DE LA LETRA PEQUEÑA.

   Diez líneas seguidas, todas del mismo peso y color, se leen como un bloque y no como
   diez condiciones distintas — cuesta encontrar la que importa a media lectura. El
   filtro `resaltar` (ver `LandingExtension`) deja `**esto**` en negrita y `*esto*` en
   cursiva sin que el texto en sí cambie una sola palabra.

   `#0f0069` no es un azul inventado: es el tono exacto de las alas del logotipo oficial
   de Red Bull Aces (muestreado del SVG del kit de marca), así que el énfasis se lee
   como parte de la identidad y no como un azul cualquiera. Sobre `--papel` da 15,2:1 de
   contraste — de sobra incluso en negrita a este tamaño de letra.
*/
.gr-letra-lista .gr-resalte { color: #0f0069; }
/* La cursiva marca la condición o el «para quién», no el hecho principal: un tono más
   claro que el cuerpo —el mismo gris azulado que ya usa `--muted` sobre papel— para que
   se lea como una nota entre paréntesis y no compita con la negrita. */
.gr-letra-lista .gr-suave { color: var(--muted); }

.gr-letra-lista {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
  padding: 0;
  border-top: 1px solid rgba(10, 28, 51, 0.18);
}
.gr-letra-lista li {
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-bottom: 1px solid rgba(10, 28, 51, 0.18);
  color: var(--texto);
  font-size: clamp(0.98rem, 2vw, 1.08rem);
  line-height: 1.55;
}
.gr-letra-lista li::before {
  content: "";
  position: absolute;
  top: 1.58em;
  left: 0.25rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cian-sombra);
  box-shadow: 0 0 0 0.3rem rgba(111, 183, 196, 0.14);
}

.gr-seccion--semana {
  padding-top: 0;
  background: #0b2a4d;
}
.gr-seccion--semana .gr-foto-sangre--calida { margin-top: 0; }
.gr-seccion--semana .gr-contenedor { padding-top: clamp(3rem, 8vw, 6rem); }

.gr-seccion--cierre {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 84% 12%, rgba(111, 183, 196, 0.2), transparent 24rem),
    radial-gradient(circle at 10% 88%, rgba(255, 176, 32, 0.1), transparent 22rem),
    #04152c;
}
.gr-seccion--cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(to bottom, transparent, #000 32%, #000);
}
.gr-seccion--cierre .gr-contenedor { position: relative; z-index: 1; }
.gr-cierre-accion { margin: clamp(2rem, 5vw, 3rem) 0 1.25rem; }
.gr-btn--grande { min-height: 3.6rem; padding-inline: clamp(1.4rem, 4vw, 2.4rem); }
.gr-cierre-nota { color: var(--muted); }
.gr-cierre-nota a {
  color: #88c9d4;
  text-decoration-color: rgba(136, 201, 212, 0.58);
  text-underline-offset: 0.18em;
}
.gr-cierre-nota a:hover { color: #fff; }
.gr-cierre-marca {
  display: block;
  width: clamp(6.5rem, 13vw, 10.5rem);
  height: auto;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  opacity: 0.9;
  filter: drop-shadow(0 0.8rem 1.6rem rgba(0, 0, 0, 0.28));
}

/* APARICIONES EDITORIALES. No dirigen una historia ni mueven la marca: ordenan la
   lectura cuando cada bloque entra en pantalla. Las fotos nunca parten transparentes,
   para que una carga lenta no produzca grandes huecos vacíos. */
.gr-revela-media {
  --gr-media-inicio: 1.04;
  --gr-media-final: 1;
  overflow: clip;
}
.gr-grafico-atmosfera.gr-revela-media {
  --gr-media-inicio: 1.09;
  --gr-media-final: 1.06;
}
.gr-puente-humano.gr-revela-media {
  --gr-media-inicio: 1.065;
  --gr-media-final: 1.035;
}

@media (prefers-reduced-motion: no-preference) {
  .gr-js .gr-revela-media img {
    transform: scale(var(--gr-media-inicio));
    transition: transform 1.15s var(--easing);
  }
  .gr-js .gr-revela-media.gr-visible img {
    transform: scale(var(--gr-media-final));
  }

  /*
     ENFOQUE PROGRESIVO. La foto entra desenfocada y algo más grande, y se enfoca del
     todo a la vez que se asienta el zoom de arriba —un único movimiento, no dos
     efectos por separado—. El desenfoque va en el propio `<img>`, no en el
     contenedor: así el zoom sigue corriendo por dentro sin que las dos animaciones se
     pisen.

     El desenfoque de partida cabe siempre dentro del `overflow: clip` del contenedor
     porque la imagen arranca más grande que su marco (`--gr-media-inicio` > 1): el
     borde borroso queda fuera de la zona visible desde el primer fotograma, así que
     nunca se ve un corte seco entre "borroso" y "recortado".

     El fondo atmosférico del gráfico se queda fuera: es ambiente detrás del texto, no
     una fotografía que se presenta, y darle un momento de "aparición" llamaría la
     atención sobre lo que justamente no la tiene que llevar.
  */
  .gr-js .gr-revela-media:not(.gr-grafico-atmosfera) img {
    filter: blur(20px);
    transition: transform 1.15s var(--easing), filter 1.15s var(--easing);
  }
  .gr-js .gr-revela-media:not(.gr-grafico-atmosfera).gr-visible img {
    filter: blur(0);
  }

  .gr-js .gr-sistema::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--easing) 120ms;
  }
  .gr-js .gr-sistema.gr-visible::before { transform: scaleX(1); }
}

[hidden] { display: none !important; }

@media (max-width: 899px) {
  .gr-idiomas-zona--portada {
    position: absolute;
    z-index: 60;
    top: calc(2rem + env(safe-area-inset-top, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
    height: auto;
    padding: 0;
  }
  .gr-idiomas-zona--portada .gr-idiomas--flotante { position: static; }
}

@media (max-width: 700px) {
  .gr-seccion[id] { scroll-margin-top: 4.25rem; }
  .gr-cabecera-aces { min-height: 5.75rem; }
  .gr-js .gr-cabecera-aces--persistente { min-height: 4.25rem; }
  .gr-cabecera-aces__interior {
    gap: 0.55rem;
    padding-inline: 0.75rem;
  }
  .gr-cabecera-aces__marca img { width: 5.4rem; }
  .gr-js .gr-cabecera-aces--persistente .gr-cabecera-aces__marca img { width: 4rem; }
  .gr-cabecera-aces__acciones { gap: 0.45rem; }
  .gr-cabecera-aces__idiomas .gr-idioma {
    min-width: 1.8rem;
    min-height: 2rem;
    padding-inline: 0.35rem;
    font-size: 0.58rem;
  }
  .gr-cabecera-aces__cta {
    min-height: 2.65rem;
    padding: 0.55rem 0.8rem;
    font-size: clamp(0.56rem, 2.45vw, 0.68rem);
    letter-spacing: 0.07em;
  }
  .gr-hero-aces {
    height: calc(100svh - 5.75rem);
    min-height: 30rem;
  }
  .gr-hero-aces__video { object-position: 54% 50%; }
  .gr-hero-aces__contexto {
    right: 1rem;
    bottom: 5.4rem;
    width: auto;
    padding: 1rem;
  }
  .gr-hero-aces__contexto .gr-btn { width: 100%; }

  .gr-js .gr-sistema::before {
    transform: scaleY(0);
    transform-origin: center top;
  }
  .gr-js .gr-sistema.gr-visible::before { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gr-cabecera-aces,
  .gr-cabecera-aces__marca img { transition: none; }

  .gr-js .gr-cabecera-aces--persistente { transition: none; }
}

/* ═════════════════════════════════════ SOLICITUD DE ATLETAS · ACES ════════
   La página del formulario se aísla bajo .gr-aplicacion. No altera los campos
   de otras superficies públicas que también heredan gr-foundation.css. */

.gr-aplicacion {
  --aplicacion-azul: #082a4d;
  --aplicacion-azul-vivo: #12689f;
  --aplicacion-cielo: #e9f3fa;
  --aplicacion-borde: rgba(8, 42, 77, 0.14);
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 2%, rgba(73, 156, 203, 0.2), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(245, 197, 71, 0.1), transparent 24rem),
    linear-gradient(180deg, #eaf3fa 0%, #f7fafc 38rem, #eef4fa 100%);
}

.gr-aplicacion__superficie {
  padding: clamp(1.25rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 7rem);
}

.gr-aplicacion__layout {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 45rem);
  align-items: start;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1180px;
}

.gr-aplicacion__intro {
  position: sticky;
  top: 2rem;
  min-width: 0;
  padding-top: 0.4rem;
}

.gr-aplicacion__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  color: var(--aplicacion-azul);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.gr-aplicacion__marca img {
  display: block;
  width: 4.1rem;
  height: 2.75rem;
  object-fit: contain;
}

.gr-aplicacion__marca:focus-visible,
.gr-aplicacion__condiciones summary:focus-visible,
.gr-form-opcional summary:focus-visible {
  outline: 3px solid var(--ambar-vivo);
  outline-offset: 4px;
  border-radius: 0.35rem;
}

.gr-aplicacion__intro > .gr-etiqueta { margin-bottom: 0.75rem; }

.gr-aplicacion__entradilla {
  max-width: 34rem;
  margin: 0;
  color: var(--muted-fuerte);
  font-size: 1.08rem;
  line-height: 1.55;
}

.gr-aplicacion__datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 1.75rem 0 0;
  overflow: hidden;
  border: 1px solid var(--aplicacion-borde);
  border-radius: 1rem;
  background: var(--aplicacion-borde);
  box-shadow: 0 0.75rem 2rem rgba(8, 42, 77, 0.06);
}

.gr-aplicacion__datos > div {
  min-width: 0;
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.84);
}

.gr-aplicacion__datos > div:last-child {
  grid-column: 1 / -1;
}

.gr-aplicacion__datos dt {
  margin: 0 0 0.18rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gr-aplicacion__datos dd {
  margin: 0;
  color: var(--aplicacion-azul);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.35;
}

.gr-aplicacion__atajo {
  display: none;
  width: 100%;
  margin-top: 1rem;
}

.gr-aplicacion__condiciones {
  margin-top: 1rem;
  border-top: 1px solid var(--aplicacion-borde);
  border-bottom: 1px solid var(--aplicacion-borde);
}

.gr-aplicacion__condiciones summary {
  position: relative;
  padding: 0.95rem 1.65rem 0.95rem 0;
  color: var(--aplicacion-azul);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.gr-aplicacion__condiciones summary::-webkit-details-marker,
.gr-form-opcional summary::-webkit-details-marker {
  display: none;
}

.gr-aplicacion__condiciones summary::after,
.gr-form-opcional summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0.15rem;
  color: var(--aplicacion-azul-vivo);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
}

.gr-aplicacion__condiciones[open] summary::after,
.gr-form-opcional[open] summary::after {
  content: "−";
}

.gr-aplicacion__condiciones-cuerpo {
  padding: 0 0 1.2rem;
  color: var(--muted-fuerte);
  font-size: 0.88rem;
  line-height: 1.55;
}

.gr-aplicacion__condiciones-cuerpo p {
  margin: 0 0 0.9rem;
}

.gr-aplicacion__condiciones-cuerpo ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.1rem;
}

.gr-formulario-panel {
  min-width: 0;
  scroll-margin-top: 1rem;
  border: 1px solid rgba(8, 42, 77, 0.12);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 1px 2px rgba(8, 42, 77, 0.05),
    0 1.5rem 4.5rem rgba(8, 42, 77, 0.13);
}

.gr-formulario-panel__cabecera {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.4rem, 4vw, 2rem) clamp(1.25rem, 5vw, 2.5rem);
  border-bottom: 1px solid var(--aplicacion-borde);
}

.gr-formulario-panel__cabecera h2 {
  margin: 0.2rem 0 0;
  color: var(--aplicacion-azul);
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.05;
}

.gr-formulario-panel__cabecera > p {
  max-width: 15rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: right;
}

.gr-form--aces {
  gap: 0;
  padding: clamp(1.25rem, 5vw, 2.5rem);
}

.gr-form-alerta {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem 1rem 3.25rem;
  border: 1px solid rgba(193, 18, 31, 0.28);
  border-radius: 0.9rem;
  color: #81121b;
  background: var(--error-tenue);
  position: relative;
}

.gr-form-alerta::before {
  content: "!";
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--error);
  font-weight: 700;
  line-height: 1;
}

/* La misma caja, pero cuando lo que se cuenta ha salido BIEN: un «te hemos enviado
   el enlace» en rojo y con una exclamación se lee como un fallo. */
.gr-form-alerta--exito {
  border-color: rgba(47, 109, 79, 0.3);
  color: #1d503a;
  background: rgba(47, 109, 79, 0.08);
}

.gr-form-alerta--exito::before {
  content: "✓";
  background: #2f6d4f;
}

.gr-form-alerta strong {
  display: block;
  margin-bottom: 0.15rem;
}

.gr-form-alerta p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.gr-form-progreso {
  margin-bottom: 0.9rem;
}

.gr-form-progreso__texto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.gr-form-progreso__texto span {
  color: var(--aplicacion-azul-vivo);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gr-form-progreso__texto strong {
  overflow: hidden;
  color: var(--aplicacion-azul);
  font-size: 0.9rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gr-form-progreso__pista {
  height: 0.32rem;
  margin-top: 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 42, 77, 0.1);
}

.gr-form-progreso__pista > span {
  display: block;
  width: calc(100% / 5);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aplicacion-azul-vivo), #38a0ca);
  transition: width 320ms var(--easing);
}

.gr-aplicacion .gr-form-pasos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gr-aplicacion .gr-form-paso {
  position: relative;
  min-height: 4rem;
  min-width: 0;
  padding: 0.55rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: color 160ms ease, background-color 160ms ease;
}

.gr-aplicacion .gr-form-paso span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto 0.3rem;
  place-items: center;
  border: 1px solid rgba(8, 42, 77, 0.2);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.gr-aplicacion .gr-form-paso strong {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.4em;
  font-size: 0.66rem;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-wrap: balance;
}

.gr-aplicacion .gr-form-paso[aria-current="step"] {
  color: var(--aplicacion-azul);
  background: var(--aplicacion-cielo);
  box-shadow: none;
}

.gr-aplicacion .gr-form-paso[aria-current="step"] span {
  border-color: var(--aplicacion-azul);
  color: #fff;
  background: var(--aplicacion-azul);
}

.gr-aplicacion .gr-form-paso--completo {
  color: var(--aplicacion-azul-vivo);
}

.gr-aplicacion .gr-form-paso--completo span {
  border-color: rgba(18, 104, 159, 0.3);
  background: rgba(18, 104, 159, 0.1);
}

.gr-aplicacion .gr-form-paso:disabled {
  cursor: default;
  opacity: 0.38;
}

.gr-aplicacion .gr-form-paso:focus-visible {
  outline: 3px solid var(--ambar-vivo);
  outline-offset: 2px;
}

.gr-form-requeridos {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.gr-form-requeridos span {
  color: var(--ambar);
  font-weight: 700;
}

.gr-form-paso-contenido {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 1.3rem;
  border: 0;
}

.gr-form--aces:not(.gr-form--mejorado) .gr-form-paso-contenido {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--aplicacion-borde);
}

.gr-form-paso-contenido > legend {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--aplicacion-azul);
}

.gr-form-paso-contenido > legend > span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--aplicacion-azul-vivo);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gr-form-paso-contenido > legend:focus {
  outline: 3px solid rgba(18, 104, 159, 0.24);
  outline-offset: 0.35rem;
  border-radius: 0.2rem;
}

.gr-aplicacion .gr-campos {
  gap: 1rem;
}

.gr-aplicacion .gr-campo {
  gap: 0.5rem;
}

.gr-aplicacion .gr-campo__label {
  display: flex;
  align-items: center;
  color: var(--texto);
  font-family: var(--texto-familia);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.gr-aplicacion .gr-campo__obligatorio {
  color: var(--ambar);
  font-size: 1rem;
}

.gr-campo__opcional {
  margin-left: auto;
  padding: 0.15rem 0.42rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(8, 42, 77, 0.06);
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* EL TELÉFONO, EN DOS PIEZAS. El prefijo se elige de una lista y el número se
   escribe al lado. El desplegable no crece: los nombres de país son largos y si le
   dejas repartir espacio se come el campo donde de verdad se escribe. */
.gr-telefono {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}

.gr-telefono__prefijo {
  /* El texto de la opción («+34 · Spain») no cabe entero en 13 rem, y en un
     `<select>` cerrado el navegador lo recorta solo. Abierto se ve completo. */
  text-overflow: ellipsis;
}

@media (max-width: 520px) {
  .gr-telefono { grid-template-columns: minmax(0, 1fr); }
}

/* «YA TE HABÍAS APUNTADO». Sale bajo el campo del correo en cuanto se sale de él.
   No usa el rojo de error a propósito: no es un fallo de quien escribe, es una
   solicitud suya que ya existe, y lo que sigue es una salida, no un reproche. */
.gr-ya-inscrito {
  margin-top: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(18, 104, 159, 0.28);
  border-left: 3px solid var(--aplicacion-azul-vivo);
  border-radius: 0 0.75rem 0.75rem 0;
  background: rgba(18, 104, 159, 0.06);
}

.gr-ya-inscrito__titulo {
  margin: 0;
  color: var(--aplicacion-azul);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.gr-ya-inscrito__cuerpo {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.gr-ya-inscrito__boton {
  margin-top: 0.85rem;
}

/* EL MODAL. `<dialog>` nativo: el foco, el Escape y el fondo inerte los pone el
   navegador. Aquí solo se le da forma. */
.gr-modal {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(85vh, 52rem);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  color: var(--texto);
  background: #fff;
  box-shadow: 0 1.5rem 4rem rgba(8, 42, 77, 0.28);
}

.gr-modal::backdrop {
  background: rgba(8, 42, 77, 0.55);
}

.gr-modal[open] {
  display: flex;
  flex-direction: column;
}

.gr-modal__cabecera {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: none;
  padding: 1.25rem 1.4rem 1rem;
  border-bottom: 1px solid rgba(8, 42, 77, 0.1);
}

.gr-modal__titulo {
  margin: 0;
  color: var(--aplicacion-azul);
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1.15;
}

.gr-modal__cerrar {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(8, 42, 77, 0.06);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.gr-modal__cerrar:hover {
  color: var(--texto);
  background: rgba(8, 42, 77, 0.12);
}

/* Lo único que hace scroll es el texto: la cabecera y el pie se quedan quietos. */
.gr-modal__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem 1.4rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gr-modal__cuerpo .gr-subtitulo { margin-top: 0; }

.gr-modal__pie {
  display: flex;
  justify-content: flex-end;
  flex: none;
  padding: 1rem 1.4rem 1.25rem;
  border-top: 1px solid rgba(8, 42, 77, 0.1);
}

@media (max-width: 600px) {
  .gr-modal {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
}

/* LA FOTO DE PERFIL. Se sube al elegirla, así que este bloque tiene tres estados
   —vacío, subiendo y lista— y el JavaScript los conmuta con `data-foto-modo`. */
.gr-foto__estado {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(8, 42, 77, 0.14);
  border-radius: 0.75rem;
  background: #f8fbfd;
}

.gr-foto[data-foto-modo="error"] .gr-foto__estado {
  border-color: var(--error);
  background: var(--error-tenue);
}

.gr-foto__vista {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(8, 42, 77, 0.06);
}

.gr-foto__vista img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gr-foto__cargando {
  display: grid;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
}

.gr-foto__rueda {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid rgba(8, 42, 77, 0.18);
  border-top-color: var(--aplicacion-azul-vivo);
  border-radius: 50%;
  animation: gr-foto-girar 700ms linear infinite;
}

@keyframes gr-foto-girar {
  to { transform: rotate(360deg); }
}

/* Sin animación no se pierde el aviso: la rueda se queda quieta y el texto de al
   lado —«Uploading your photo…»— sigue diciendo lo mismo. */
@media (prefers-reduced-motion: reduce) {
  .gr-foto__rueda { animation: none; }
}

.gr-foto__medio {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.gr-foto__texto {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.gr-foto__barra {
  display: block;
  height: 0.35rem;
  margin-top: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(8, 42, 77, 0.1);
}

.gr-foto__relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--aplicacion-azul-vivo);
  transition: width 150ms linear;
}

/* Sin ancho conocido no hay porcentaje que enseñar: la barra se recorre sola para
   decir que sigue trabajando, en vez de quedarse a cero como si no pasara nada. */
.gr-foto__barra:not([aria-valuenow]) .gr-foto__relleno {
  width: 35%;
  animation: gr-foto-recorrer 1.1s ease-in-out infinite;
}

@keyframes gr-foto-recorrer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .gr-foto__barra:not([aria-valuenow]) .gr-foto__relleno { animation: none; width: 100%; }
  .gr-foto__relleno { transition: none; }
}

.gr-foto[data-foto-modo="error"] .gr-foto__texto { color: var(--error); }

.gr-foto__cambiar {
  flex: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(8, 42, 77, 0.18);
  border-radius: 0.5rem;
  color: var(--aplicacion-azul);
  background: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.gr-foto__cambiar:hover { border-color: var(--aplicacion-azul-vivo); }

.gr-aplicacion .gr-campo__ayuda {
  margin: -0.1rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.gr-aplicacion .gr-input,
.gr-aplicacion .gr-textarea {
  min-height: 3.5rem;
  padding: 0.9rem 1rem;
  border-color: rgba(8, 42, 77, 0.18);
  border-radius: 0.75rem;
  color: var(--texto);
  background: #f8fbfd;
  box-shadow: inset 0 1px 1px rgba(8, 42, 77, 0.03);
}

.gr-aplicacion .gr-textarea {
  min-height: 7rem;
}

.gr-aplicacion .gr-input:hover,
.gr-aplicacion .gr-textarea:hover {
  border-color: rgba(18, 104, 159, 0.48);
}

.gr-aplicacion .gr-input:focus,
.gr-aplicacion .gr-textarea:focus {
  border-color: var(--aplicacion-azul-vivo);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(18, 104, 159, 0.12);
}

/* Antes de esto un campo obligatorio vacío no se distinguía a simple vista de uno
   vacío porque nadie ha llegado todavía: el único aviso era `aria-invalid`, que no
   pinta nada por sí solo. Cubre tanto el campo que marca la validación nativa al
   pulsar "Continue" como el que vuelve marcado por el servidor tras enviar. */
.gr-aplicacion .gr-input[aria-invalid="true"],
.gr-aplicacion .gr-textarea[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-tenue);
}
.gr-aplicacion .gr-input[aria-invalid="true"]:focus,
.gr-aplicacion .gr-textarea[aria-invalid="true"]:focus {
  border-color: var(--error);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.14);
}

.gr-aplicacion .gr-input--cifra {
  font-family: var(--texto-familia);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
}

.gr-aplicacion .gr-campo__error {
  margin: 0.05rem 0 0;
}

.gr-form-subseccion {
  display: flex;
  padding: 1.1rem;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(8, 42, 77, 0.1);
  border-radius: 1rem;
  background: rgba(233, 243, 250, 0.55);
}

.gr-form-subseccion > strong {
  color: var(--aplicacion-azul);
  font-size: 0.95rem;
}

.gr-campos--perfil {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr 0.75fr;
}

/* La marca y el modelo del casco es texto libre y el más largo de la etiqueta
   ("Helmet Brand and Model Usually Flown"): en la columna estrecha que le tocaba
   por orden, la etiqueta partía en cinco líneas. Su propia fila, a todo lo ancho. */
.gr-campos--perfil > .gr-campo:last-child {
  grid-column: 1 / -1;
}

.gr-pregunta {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gr-pregunta > legend {
  display: block;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--texto);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.42;
}

.gr-pregunta > legend > span[aria-hidden="true"] {
  color: var(--ambar);
}

.gr-aplicacion .gr-opciones--compactas {
  display: grid;
  gap: 0.65rem;
}

.gr-aplicacion .gr-opciones--compactas.gr-opciones--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gr-aplicacion .gr-opciones--compactas.gr-opciones--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gr-aplicacion .gr-opcion {
  min-height: 3.5rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border-color: rgba(8, 42, 77, 0.16);
  border-radius: 0.75rem;
  background: #f8fbfd;
  box-shadow: none;
}

.gr-aplicacion .gr-opcion:hover {
  border-color: var(--aplicacion-azul-vivo);
  background: #fff;
  box-shadow: 0 0.45rem 1.2rem rgba(8, 42, 77, 0.07);
}

.gr-aplicacion .gr-opcion:has(input:checked) {
  border-color: var(--aplicacion-azul-vivo);
  color: var(--aplicacion-azul);
  background: rgba(18, 104, 159, 0.08);
  box-shadow: inset 0 0 0 1px rgba(18, 104, 159, 0.08);
}

.gr-aplicacion .gr-opcion--error {
  border-color: var(--error);
  background: rgba(176, 38, 38, 0.055);
}

.gr-aplicacion .gr-opcion__marca {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0;
}

.gr-aplicacion .gr-opcion__texto {
  font-size: 0.9rem;
}

.gr-pregunta--error > legend {
  color: var(--error);
}

.gr-campo--condicional,
.gr-aviso-tecnico {
  padding: 1rem;
  border-left: 3px solid var(--aplicacion-azul-vivo);
  border-radius: 0 0.75rem 0.75rem 0;
  background: rgba(18, 104, 159, 0.055);
}

.gr-equipo-card {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid rgba(8, 42, 77, 0.12);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.65rem 1.8rem rgba(8, 42, 77, 0.055);
}

.gr-equipo-card > header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.gr-equipo-card > header > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--aplicacion-azul);
  font-family: var(--mono);
  font-size: 0.58rem;
}

.gr-equipo-card h3 {
  margin: 0;
  color: var(--aplicacion-azul);
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.1;
}

.gr-equipo-card header p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.gr-aviso-tecnico {
  border-left-color: #c89618;
  background: rgba(245, 197, 71, 0.1);
}

.gr-aviso-tecnico__etiqueta {
  margin: 0 0 0.65rem;
  color: #775a0a;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gr-aviso-tecnico .gr-pregunta > legend {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
}

.gr-form-opcional {
  border: 1px solid rgba(8, 42, 77, 0.12);
  border-radius: 0.85rem;
  background: #f8fbfd;
}

.gr-form-opcional summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.5rem;
  padding: 0.8rem 2.8rem 0.8rem 1rem;
  color: var(--aplicacion-azul);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.gr-form-opcional summary small {
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(8, 42, 77, 0.06);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gr-form-opcional summary::after {
  right: 1rem;
}

.gr-form-opcional > .gr-campo {
  padding: 0 1rem 1rem;
}

.gr-form-opcional__cuerpo {
  padding: 0 1rem 1rem;
}

.gr-form-cierre {
  display: grid;
  gap: 1rem;
  margin-top: 0.2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--aplicacion-borde);
}

.gr-consentimiento {
  align-items: flex-start !important;
  padding: 1rem !important;
  background: rgba(233, 243, 250, 0.5) !important;
}

.gr-consentimiento .gr-opcion__marca {
  margin-top: 0.1rem;
}

.gr-consentimiento a {
  color: var(--aplicacion-azul-vivo);
  font-weight: 600;
}

.gr-seguridad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(8, 42, 77, 0.1);
  border-radius: 0.85rem;
  background: #f8fbfd;
}

.gr-seguridad > div:first-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gr-seguridad__icono {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--live);
  font-weight: 700;
}

.gr-seguridad p {
  margin: 0;
  line-height: 1.3;
}

.gr-seguridad p strong,
.gr-seguridad p small {
  display: block;
}

.gr-seguridad p strong {
  color: var(--aplicacion-azul);
  font-size: 0.9rem;
}

.gr-seguridad p small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.gr-aplicacion .gr-form-acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--aplicacion-borde);
}

.gr-aplicacion .gr-form-acciones #formSiguiente,
.gr-aplicacion .gr-form-acciones #formEnviar {
  margin-left: auto;
}

.gr-aplicacion .gr-form-acciones .gr-btn {
  min-height: 3.5rem;
}

@media (max-width: 980px) {
  .gr-aplicacion__layout {
    grid-template-columns: minmax(0, 45rem);
    gap: 1.5rem;
  }

  .gr-aplicacion__intro {
    position: static;
  }

  .gr-aplicacion__marca {
    margin-bottom: 2rem;
  }

  .gr-aplicacion__atajo {
    display: inline-flex;
  }
}

@media (max-width: 700px) {
  .gr-aplicacion .gr-form-pasos {
    display: none;
  }
}

@media (max-width: 640px) {
  .gr-aplicacion__superficie {
    padding: 1rem 0 4rem;
  }

  .gr-aplicacion__layout {
    gap: 1.2rem;
    padding-inline: 0.75rem;
  }

  .gr-aplicacion__intro {
    padding: 0.4rem 0.25rem 0;
  }

  .gr-aplicacion__marca {
    margin-bottom: 1.6rem;
  }

  .gr-aplicacion__entradilla {
    font-size: 1rem;
  }

  .gr-aplicacion__datos {
    margin-top: 1.25rem;
  }

  .gr-aplicacion__condiciones {
    margin-bottom: 0.2rem;
  }

  .gr-formulario-panel {
    border-radius: 1.15rem;
  }

  .gr-formulario-panel__cabecera {
    display: block;
    padding: 1.3rem 1.1rem;
  }

  .gr-formulario-panel__cabecera > p {
    max-width: none;
    margin-top: 0.45rem;
    text-align: left;
  }

  .gr-form--aces {
    padding: 1.15rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
  }

  .gr-form-progreso__texto strong {
    max-width: 58%;
  }

  .gr-aplicacion .gr-form-paso {
    min-height: 2.75rem;
    padding: 0.35rem 0.15rem;
  }

  .gr-aplicacion .gr-form-paso span {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    font-size: 0.6rem;
  }

  .gr-aplicacion .gr-form-paso strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .gr-form-paso-contenido {
    gap: 1.15rem;
  }

  .gr-campos--perfil {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gr-campos--perfil > .gr-campo:first-child {
    grid-column: 1 / -1;
  }

  .gr-form-subseccion {
    padding: 1rem;
  }

  .gr-equipo-card {
    padding: 1rem;
  }

  .gr-seguridad {
    grid-template-columns: 1fr;
  }

  .gr-seguridad > .gr-campo {
    width: min(100%, 12rem);
  }

  .gr-aplicacion .gr-form-acciones {
    gap: 0.55rem;
  }

  .gr-aplicacion .gr-form-acciones .gr-btn {
    min-width: 0;
    padding-inline: 1rem;
  }

  .gr-aplicacion .gr-form-acciones #formSiguiente,
  .gr-aplicacion .gr-form-acciones #formEnviar {
    flex: 1 1 auto;
  }
}

@media (max-width: 350px) {
  .gr-aplicacion .gr-opciones--compactas.gr-opciones--3 {
    grid-template-columns: 1fr;
  }

  .gr-aplicacion .gr-form-acciones {
    flex-wrap: wrap;
  }

  .gr-aplicacion .gr-form-acciones #formAtras,
  .gr-aplicacion .gr-form-acciones #formSiguiente,
  .gr-aplicacion .gr-form-acciones #formEnviar {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gr-form-progreso__pista > span {
    transition: none;
  }
}

/* ══════════════════════════════════ GRÁFICO ═══════════════════════════════ */
.gr-sistema {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-block: clamp(3rem, 8vw, 5.5rem);
}
.gr-grafico-seccion .gr-sistema { margin-block: 0; }
.gr-sistema::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2.25rem;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, #88c9d4, #f5c547 52%, #d45c45);
  box-shadow: 0 0 1.2rem rgba(136, 201, 212, 0.25);
}
.gr-sistema__capa {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.9rem;
  min-width: 0;
  text-align: center;
}
.gr-sistema__n {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
}
.gr-sistema__nodo {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.22rem solid rgba(4, 21, 44, 0.94);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(220, 232, 242, 0.48), 0 0 1.35rem rgba(136, 201, 212, 0.34);
}
.gr-sistema__capa strong {
  display: grid;
  width: 100%;
  min-height: 5.4rem;
  padding: 1rem;
  place-items: center;
  max-width: 22ch;
  border: 1px solid rgba(220, 232, 242, 0.2);
  border-radius: 0.9rem;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  box-shadow: 0 1.2rem 3rem rgba(1, 10, 23, 0.2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-family: var(--display);
  /* El cuerpo baja de 2rem a 1,35rem porque los hitos que fijó Red Bull llegan a las
     ocho palabras donde antes había dos. Es el único ajuste del bloque. */
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}
.gr-sistema__capa--accion {
  color: inherit;
  text-decoration: none;
}
.gr-sistema__capa--accion .gr-sistema__n {
  color: #fff;
}
.gr-sistema__capa--accion .gr-sistema__nodo {
  background: var(--ambar-vivo);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72), 0 0 1.5rem rgba(234, 88, 12, 0.5);
}
.gr-sistema__capa--accion strong {
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--ambar);
  box-shadow: 0 0.35rem 0.9rem rgba(194, 65, 12, 0.24), 0 1.2rem 3rem rgba(1, 10, 23, 0.3);
  transition: background 150ms var(--easing), box-shadow 150ms var(--easing);
}
.gr-sistema__capa--accion:hover strong {
  background: #a83709;
  box-shadow: 0 0.5rem 1.2rem rgba(194, 65, 12, 0.32), 0 1.4rem 3.4rem rgba(1, 10, 23, 0.36);
}
.gr-sistema__capa--accion:focus-visible {
  outline: none;
}
.gr-sistema__capa--accion:focus-visible strong {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
@media (max-width: 700px) {
  .gr-sistema {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .gr-sistema::before {
    top: 1.2rem;
    right: auto;
    bottom: 1.2rem;
    left: 3.72rem;
    width: 2px;
    height: auto;
  }
  .gr-sistema__capa {
    grid-template-columns: 2.2rem 1.25rem minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    text-align: left;
  }
  .gr-sistema__capa strong {
    min-height: 4.5rem;
    place-items: center start;
    max-width: none;
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  }
  .gr-grafico-atmosfera img { object-position: 58% 50%; }
}
/* =============================================================================
   Acceso compartido a la portada
   ============================================================================= */

.gr-acceso {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: max(6rem, calc(env(safe-area-inset-top) + 5rem)) 1rem
    max(3rem, calc(env(safe-area-inset-bottom) + 2rem));
  background: #071d2f;
}

.gr-acceso::before,
.gr-acceso::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gr-acceso::before {
  z-index: -2;
  background: url("/img/landing/poster-1920.jpg") center / cover no-repeat;
  transform: scale(1.02);
}

.gr-acceso::after {
  z-index: -1;
  background:
    linear-gradient(145deg, rgba(4, 20, 34, 0.9) 0%, rgba(7, 38, 61, 0.64) 54%, rgba(7, 29, 47, 0.88) 100%),
    linear-gradient(to top, rgba(7, 29, 47, 0.5), transparent 50%);
}

.gr-acceso__contenido {
  width: min(100%, 29rem);
}

.gr-acceso__marca {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.gr-acceso__marca img {
  width: 7.5rem;
  height: auto;
  filter: drop-shadow(0 0.6rem 1.4rem rgba(0, 0, 0, 0.28));
}

.gr-acceso__panel {
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1.5rem 4rem rgba(0, 13, 24, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gr-acceso__panel > .gr-etiqueta {
  margin-bottom: 0.6rem;
  color: var(--cielo);
}

.gr-acceso__panel h1 {
  margin: 0;
  color: var(--cielo-hondo);
  font-family: var(--display);
  font-size: clamp(2.25rem, 10vw, 3.25rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.gr-acceso__introduccion {
  margin: 1rem 0 0;
  color: var(--muted-fuerte);
  font-size: 1rem;
  line-height: 1.55;
}

.gr-acceso__formulario {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.gr-acceso__formulario .gr-btn {
  margin-top: 0.15rem;
}

@media (max-width: 380px) {
  .gr-acceso {
    padding-inline: 0.75rem;
  }

  .gr-acceso__panel {
    padding: 1.35rem;
  }
}