/* ==========================================================================
   Ignition Madrid 2026 · Home
   Mobile first. Sin dependencias.
   ========================================================================== */

@font-face {
  font-family: "Saira Ignition";
  src: url("../fonts/saira-ignition.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* Respaldo con métricas ajustadas a Saira: evita saltos al cargar la fuente */
@font-face {
  font-family: "Saira respaldo";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  size-adjust: 108%;
  ascent-override: 105%;
  descent-override: 40.6%;
  line-gap-override: 0%;
}

:root {
  --azul: #003df6;
  --noche: #021b6b;
  --marino: #0b2a88; /* fondo del pie: azul marino algo menos oscuro que --noche */
  --bruma: #d4defe;
  --hielo: #eaf0ff;
  --gris: #4a5785;
  --borde: #7383bd;
  --blanco: #fff;
  /* Rojo coral del logo de 2025: solo detalles. Como texto, solo sobre blanco (4,9:1) */
  --rojo: #ce3a2c;

  --fuente: "Saira Ignition", "Saira respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 76rem;
  --margen: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --cab: 4rem;
  --barra-wp: 0px; /* altura de la barra de admin de WordPress cuando está fija */
  --seccion: clamp(4rem, 2.5rem + 6vw, 8rem);
  --radio: 1.25rem;
  --pildora: 999px;

  /* Máscara de los remates del logotipo: rectángulo con arcos elípticos arriba y abajo */
  --arco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 7A62 18 0 0 1 100 7V93A62 18 0 0 1 0 93Z'/%3E%3C/svg%3E");

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* La barra de admin de WordPress es fija desde 601px (46px hasta 782px y 32px después).
   Por debajo de 601px se va con el scroll: la cabecera tiene que quedar pegada arriba. */
@media (min-width: 601px) {
  :root:has(body.admin-bar) {
    --barra-wp: 46px;
  }
}

@media (min-width: 783px) {
  :root:has(body.admin-bar) {
    --barra-wp: 32px;
  }
}

html {
  /* Azul en el lienzo: el rebote de Safari al tirar de la página no enseña blanco sobre la cabecera */
  background: var(--azul);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cab) + var(--barra-wp) + 1rem);
}

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--noche);
  font-family: var(--fuente);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

strong {
  font-weight: 600;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.oscuro :focus-visible,
.cabecera :focus-visible,
.portada :focus-visible,
.inscripcion :focus-visible,
.pie :focus-visible {
  outline-color: var(--blanco);
}

::selection {
  background: var(--azul);
  color: var(--blanco);
}

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

/* Por si algún plugin imprime enlaces de accesibilidad de WordPress */
.screen-reader-text:not(:focus) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--pildora);
  background: var(--blanco);
  color: var(--azul);
  font-weight: 600;
}

.saltar:focus {
  top: 1rem;
}

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

.arco {
  -webkit-mask: var(--arco) center / 100% 100% no-repeat;
  mask: var(--arco) center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   Piezas comunes: botones, píldoras, «Por confirmar», titulares
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;
  padding: 0.75em 1.75em;
  border: 2px solid transparent;
  border-radius: var(--pildora);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--suave);
}

.boton .i {
  transition: transform 0.3s var(--suave);
}


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

.boton--blanco {
  background: var(--blanco);
  color: var(--azul);
}

.boton--azul {
  background: var(--azul);
  color: var(--blanco);
}

/* Al pasar el cursor (solo con ratón: en móvil no se queda pegado) o con el foco de
   teclado: fondo rojo y texto blanco. En reposo, igual que siempre. */
@media (hover: hover) {
  .boton--blanco:hover,
  .boton--azul:hover {
    background: var(--rojo);
    color: var(--blanco);
  }

  .boton:hover .i {
    transform: translateX(0.2em);
  }
}

.boton--blanco:focus-visible,
.boton--azul:focus-visible {
  background: var(--rojo);
  color: var(--blanco);
}

.boton--peq {
  min-height: 2.75rem;
  padding: 0.5em 1.25em;
  font-size: 0.9375rem;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.enlace-flecha:hover {
  text-decoration-thickness: 3px;
}

.pildora {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.8em;
  border-radius: var(--pildora);
  background: var(--azul);
  color: var(--blanco);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pildora--linea {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Distintivo rojo «Plazas agotadas»: lo pone el plugin, solo sobre las tarjetas blancas de los
   talleres. Texto blanco sobre rojo, 4,9:1. Sobre azul, nunca: ahí va .con-punto */
.distintivo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.85em 0.3em 0.75em;
  border-radius: var(--pildora);
  background: var(--rojo);
  color: var(--blanco);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.distintivo::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--blanco);
}

.pildora--punto::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--rojo);
}

.sin-corte {
  white-space: nowrap;
}

/* Punto rojo pequeño delante de «Gratuita» y «Entrada gratuita»: el único toque de color
   sobre el azul. El texto sigue en blanco; nada de texto rojo sobre azul. */
.con-punto::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  width: round(0.4em, 1px);
  height: round(0.4em, 1px);
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--rojo);
  vertical-align: 0.13em;
}

/* Punto final rojo en los titulares de las secciones claras (decorativo, no es texto) */
.punto {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--rojo);
}

/* Marcador visible de dato pendiente del cliente */
.pc {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.05em 0.65em;
  border: 1.5px dashed currentColor;
  border-radius: var(--pildora);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 0.15em;
  text-transform: none;
}

.titular {
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.75rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--azul);
}

.seccion-cab {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.seccion-cab__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: var(--gris);
  font-size: 0.9375rem;
}

@media (min-width: 48em) {
  .seccion-cab {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: var(--barra-wp);
  z-index: 50;
  background: var(--azul);
  color: var(--blanco);
}

.cabecera__in {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--ancho);
  height: var(--cab);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.cabecera__marca {
  display: block;
  flex: none;
  padding-block: 0.5rem;
  transition: opacity 0.35s, transform 0.35s var(--suave), visibility 0.35s;
}

/* Logotipo horizontal (desde la 1.5.1) con el mismo peso visual que el apilado de antes: las letras
   de «IGNITION» miden lo mismo que las de «IGNI/TION». Para eso, el horizontal va a 1,763 veces el
   ancho del apilado (aquí, de 3,84rem a 6,75rem) y es más bajo: la cabecera no crece. */
.cabecera__marca img {
  width: 6.75rem;
}

.cabecera--sin-marca .cabecera__marca {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
}

.menu {
  margin-left: auto;
}

.menu__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.menu__boton[hidden] {
  display: none;
}

.menu__raya,
.menu__raya::before {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--suave);
}

.menu__raya {
  position: relative;
  transform: translateY(-3px);
}

.menu__raya::before {
  content: "";
  position: absolute;
  top: 6px;
}

.menu__boton[aria-expanded="true"] .menu__raya {
  transform: rotate(45deg);
}

.menu__boton[aria-expanded="true"] .menu__raya::before {
  transform: translateY(-6px) rotate(-90deg);
}

.menu__lista {
  display: none;
}

.menu__boton[aria-expanded="true"] + .menu__lista {
  display: grid;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem var(--margen) 1.5rem;
  background: var(--azul);
  border-top: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 1.5rem 2rem -1rem rgb(2 27 107 / 0.5);
}

.menu__lista a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
}

.cabecera__cta {
  flex: none;
}

/* Móvil y tablet: menú a la izquierda del todo, logotipo en el centro, «Inscríbete» a la derecha.
   El logotipo pequeño aparece al bajar, cuando el grande de la portada ya no se ve. */
@media (max-width: 63.99em) {
  .cabecera__in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .menu {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-left: -0.5rem; /* el icono queda alineado con el margen del contenido */
  }

  .cabecera__marca {
    grid-column: 2;
    grid-row: 1;
  }

  /* En el centro, entre «Menú» e «Inscríbete», sin acercarse a menos de 15 px de ninguno: en
     móviles estrechos el logotipo se encoge (94vw − 17,3rem son los 360 px de ancho menos los
     márgenes, «Inscríbete» dos veces, porque va centrado, y los huecos). */
  .cabecera__marca img {
    width: min(6.75rem, 94vw - 17.3rem);
  }

  .cabecera__cta {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

@media (min-width: 64em) {
  .menu__boton {
    display: none !important;
  }

  .menu__lista,
  .menu__boton[aria-expanded="true"] + .menu__lista {
    position: static;
    display: flex;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  .menu__lista a {
    padding: 0.5rem 0.9rem;
    font-size: 0.9375rem;
    border: 0;
    border-radius: var(--pildora);
    transition: background-color 0.2s;
  }

  .menu__lista a:hover {
    background: rgb(255 255 255 / 0.14);
  }

  .cabecera__cta {
    margin-left: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
/* Imagen de la campaña 2026, sin arco: se funde con el azul de la portada (máscara con degradado).
   Ningún texto puede quedar sobre la neblina blanca de la foto. */
.portada {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--azul);
  color: var(--blanco);
  padding-block: 0.75rem clamp(3rem, 2rem + 4vw, 5rem);
}

.portada__in {
  display: grid;
  gap: 2.25rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.portada__logo {
  line-height: 0;
}

/* Mismo peso visual que el logotipo apilado de antes (ver .cabecera__marca img): sus topes, por 1,763,
   y como mucho el ancho de la columna. */
.portada__logo img {
  width: 100%;
  max-width: 63.5rem;
}

.portada__fecha {
  margin-top: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-size: clamp(3.6rem, 1rem + 11vw, 8rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.portada__fecha > time > span[aria-hidden] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.22em;
}

.portada__anio {
  font-weight: 300;
  color: var(--bruma);
}

.datos {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  border-top: 1.5px solid rgb(255 255 255 / 0.4);
}

.datos__fila {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  gap: 0.75rem;
  padding-block: 0.95rem;
  border-bottom: 1.5px solid rgb(255 255 255 / 0.4);
}

.datos dt {
  padding-top: 0.45em;
  color: var(--bruma);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.datos dd {
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  font-weight: 500;
  line-height: 1.25;
}

.datos dd strong {
  display: block;
}

.datos__dir {
  display: block;
  margin-top: 0.2rem;
  color: var(--bruma);
  font-size: 0.8em;
  font-weight: 400;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.portada__foto img {
  width: 100%;
  object-fit: cover;
}

/* Móvil y tablet, como el cartel: primero la foto, a sangre, con el logotipo grande encima y
   fundida con el azul arriba y abajo; debajo, la fecha, los datos y los botones. */
@media (max-width: 63.99em) {
  .portada {
    padding-top: 0;
  }

  .portada__in {
    gap: 0;
  }

  .portada__texto {
    display: contents;
  }

  .portada__foto {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-inline: calc(-1 * var(--margen));
  }

  .portada__foto img {
    aspect-ratio: 4 / 5;
    max-height: 76svh;
    object-position: 46% 40%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  }

  .portada__logo {
    grid-row: 1;
    grid-column: 1 / -1;
    z-index: 1;
    align-self: start;
    padding-top: 2.5rem; /* aire entre «Menú» e «Inscríbete» y el logotipo (antes, 1,25rem) */
  }

  .portada__logo img {
    max-width: 100%;
  }

  .portada__fecha {
    z-index: 1;
    margin-top: -1.5rem;
  }
}

@media (max-width: 29.99em) {
  .portada__acciones .boton {
    flex: 1 1 100%;
  }

  .portada__acciones .enlace-flecha {
    margin-inline: auto;
  }
}

/* Tablet y móvil en horizontal: la foto queda más ancha que alta y asoma la neblina blanca de su
   lado izquierdo justo bajo el logotipo. Ahí se funde también con el azul por la izquierda, como en
   escritorio, y el logotipo tiene un tope de tamaño. */
@media (min-width: 40em) and (max-width: 63.99em), (max-width: 63.99em) and (orientation: landscape) {
  .portada__foto img {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 16%, #000 38%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 16%, #000 38%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
    mask-composite: intersect;
  }

  .portada__logo img {
    max-width: min(100%, 42.25rem, 97svh);
  }
}

/* Tablet: bajo la foto, la fecha y los datos en dos columnas, como hasta ahora. La fecha, arriba,
   justo después de la foto (como en el cartel) y a la altura de la primera fila de datos. */
@media (min-width: 40em) and (max-width: 63.99em) {
  .portada__in {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    align-items: start;
  }

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

  .portada__fecha {
    margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem); /* el de .datos */
    font-size: clamp(4rem, 1rem + 9vw, 6.5rem);
  }
}

@media (min-width: 64em) {
  /* En ventanas bajas (portátiles) la portada se compacta con la altura de la ventana para que
     fecha, horario, lugar y entrada quepan en la primera pantalla. En ventanas altas, los tamaños
     máximos de siempre. */
  .portada {
    padding-block: clamp(0.75rem, 2.5vh, 2rem) 4.5rem;
  }

  .portada__logo img {
    max-width: min(63.5rem, 81vh);
  }

  .datos {
    margin-top: clamp(0.75rem, min(3vh, 1rem + 2vw), 2.5rem);
  }

  .datos__fila {
    padding-block: clamp(0.55rem, 1.5vh, 0.95rem);
  }

  .portada__acciones {
    margin-top: clamp(1rem, 2.5vh, 2rem);
  }

  .portada__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2.5rem, 4vw, 5rem);
    align-items: stretch;
    min-height: min(calc(100svh - var(--cab) - 6.5rem), 52rem);
  }

  .portada__texto {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .portada__fecha {
    margin-top: clamp(0.75rem, 3vh, 3rem);
    font-size: clamp(4rem, min(9.4vw, 12vh), 8rem);
  }

  /* La foto, a la derecha y a sangre, de arriba abajo de la portada, fundida con el azul por la
     izquierda, arriba y abajo. Va en absoluto para no marcar la altura (es vertical y la
     estiraría): la altura la marcan los textos. Los márgenes negativos son los rellenos de la
     portada y el hueco entre columnas. */
  .portada__foto {
    position: relative;
    margin-top: calc(-1 * clamp(0.75rem, 2.5vh, 2rem));
    margin-bottom: -4.5rem;
    margin-left: calc(-1 * clamp(2.5rem, 4vw, 5rem));
    margin-right: calc(-1 * var(--margen) - max(0px, (100vw - var(--ancho)) / 2));
  }

  .portada__foto img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: 50% 62%;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 14%, #000 34%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, rgb(0 0 0 / 0.4) 14%, #000 34%),
      linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }
}

/* --------------------------------------------------------------------------
   Presentación
   -------------------------------------------------------------------------- */
.presentacion {
  padding-block: var(--seccion);
}

.presentacion__texto {
  max-width: 50rem;
  font-size: clamp(1.1875rem, 0.95rem + 1.1vw, 1.75rem);
  line-height: 1.45;
  color: var(--noche);
}

.presentacion__entrada {
  display: block;
  margin-bottom: 0.6em;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--azul);
  text-wrap: balance;
}

.presentacion__texto strong {
  color: var(--azul);
}

.cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--bruma);
  border: 1px solid var(--bruma);
}

.cifras li {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 1.25rem 1.4rem;
  background: var(--blanco);
  color: var(--gris);
  font-size: 0.9375rem;
  font-weight: 500;
}

.cifras strong {
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
  color: var(--azul);
}

@media (min-width: 48em) {
  .cifras {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Programa
   Sin JS: lista por espacios. Con JS: pestañas en móvil y rejilla por horas
   en escritorio (cada sesión se coloca con grid-row según su horario).
   -------------------------------------------------------------------------- */
.programa {
  padding-block: var(--seccion);
  background: var(--hielo);
}

.pestanas {
  position: sticky;
  top: calc(var(--cab) + var(--barra-wp));
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
  margin: 0 calc(-1 * var(--margen)) 1.25rem;
  padding: 0.6rem var(--margen);
  background: var(--hielo);
}

.pestanas[hidden] {
  display: none;
}

.pestana {
  min-height: 2.75rem;
  padding: 0.4rem 0.5rem;
  border: 2px solid var(--azul);
  border-radius: var(--pildora);
  background: var(--blanco);
  color: var(--azul);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pestana[aria-selected="true"] {
  border-color: var(--rojo);
  background: var(--rojo);
  color: var(--blanco);
}

.espacio + .espacio {
  margin-top: 2.5rem;
}

.rejilla--pestanas .espacio + .espacio {
  margin-top: 0;
}

.rejilla--pestanas .sesion {
  scroll-margin-top: calc(var(--cab) + var(--barra-wp) + 5rem);
}

.espacio[hidden] {
  display: none;
}

/* Títulos de columna en rojo sobre el fondo claro: a 24 px (texto grande) el contraste
   cumple AA (4,3:1). La raya de debajo, en la rejilla, sigue azul. */
.espacio__titulo {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--rojo);
}

.rejilla--pestanas .espacio__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.espacio__lista {
  display: grid;
  gap: 0.75rem;
}

.sesion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem 1.3rem;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: 0 1px 0 rgb(2 27 107 / 0.06);
}

.sesion__hora {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--azul);
}

.sesion__tipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  color: var(--gris);
  font-size: 0.875rem;
  font-weight: 500;
}

.sesion__titulo {
  font-size: 1.1875rem;
  line-height: 1.22;
  color: var(--noche);
}

.sesion__quien {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

div.sesion__quien {
  display: grid;
  gap: 0.25rem;
}

.sesion__desc {
  color: var(--gris);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sesion .boton {
  margin-top: 0.35rem;
}

.sesion--pausa {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-block: 0.9rem;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--bruma);
}

.sesion--pausa .sesion__titulo {
  font-size: 1.0625rem;
}

.sesion--destacada {
  background: var(--azul);
  color: var(--blanco);
}

.sesion--destacada .sesion__hora,
.sesion--destacada .sesion__titulo {
  color: var(--blanco);
}

.sesion--destacada .sesion__tipo,
.sesion--destacada .sesion__desc {
  color: var(--bruma);
}

.sesion--destacada .pildora {
  background: var(--blanco);
  color: var(--azul);
}

.sesion:target {
  box-shadow: 0 0 0 3px var(--azul);
}

.todo-dia {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radio);
  background: var(--azul);
  color: var(--blanco);
}

.todo-dia__titulo {
  font-size: 1.25rem;
  text-transform: uppercase;
}

.todo-dia__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.todo-dia__lista li {
  padding: 0.45rem 1rem;
  border-radius: var(--pildora);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.6);
  font-size: 0.9375rem;
  font-weight: 500;
}

@media (min-width: 48em) {
  .rejilla--pestanas .sesion {
    padding-left: 10.5rem;
  }

  .rejilla--pestanas .sesion > .sesion__hora {
    position: absolute;
    top: 1.1rem;
    left: 1.2rem;
    font-size: 1.0625rem;
  }

  .rejilla--pestanas .sesion--pausa > .sesion__hora {
    top: 0.9rem;
  }

  .todo-dia {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
  }
}

.rejilla:not(.rejilla--tabla) .rejilla__horas,
.rejilla:not(.rejilla--tabla) .rejilla__linea {
  display: none;
}

/* Rejilla por horas (la activa el JS a partir de 64em) */
@media (min-width: 64em) {
  .rejilla--tabla {
    display: grid;
    grid-template-columns: 4.5rem repeat(3, minmax(0, 1fr));
    grid-template-rows: auto repeat(var(--filas, 22), minmax(1.75rem, auto));
    column-gap: 0.875rem;
    row-gap: 0;
  }

  .rejilla--tabla .espacio {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    margin: 0;
  }

  .rejilla--tabla .espacio:nth-of-type(1) {
    grid-column: 2;
  }

  .rejilla--tabla .espacio:nth-of-type(2) {
    grid-column: 3;
  }

  .rejilla--tabla .espacio:nth-of-type(3) {
    grid-column: 4;
  }

  .rejilla--tabla .espacio__titulo {
    position: sticky;
    top: calc(var(--cab) + var(--barra-wp));
    z-index: 3;
    grid-row: 1;
    margin: 0 0 0.75rem;
    padding: 0.85rem 0 0.75rem;
    background: var(--hielo);
    border-bottom: 3px solid var(--azul);
    font-size: 1.5rem;
  }

  .rejilla--tabla .espacio__lista {
    grid-row: 2 / -1;
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
  }

  .rejilla--tabla .sesion {
    grid-row: var(--fila, auto);
    margin-block: 0.375rem;
    z-index: 1;
  }

  .rejilla--tabla .sesion--pausa {
    background: var(--hielo);
  }

  .rejilla__horas {
    grid-column: 1;
    grid-row: 2 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }

  .rejilla__horas span {
    padding-top: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--azul);
  }

  .rejilla__horas span.media {
    font-weight: 400;
    color: var(--gris);
  }

  .rejilla__linea {
    grid-column: 1 / -1;
    align-self: start;
    border-top: 1px solid rgb(0 61 246 / 0.16);
    pointer-events: none;
  }

  .rejilla__linea.media {
    border-top-style: dashed;
    border-top-color: rgb(0 61 246 / 0.12);
  }

  .rejilla--tabla .sesion__hora {
    font-size: 0.875rem;
  }

  .rejilla--tabla .sesion__titulo {
    font-size: 1.0625rem;
  }

  .rejilla--tabla .sesion__desc,
  .rejilla--tabla .sesion__quien {
    font-size: 0.875rem;
  }
}

@media (min-width: 64em) {
  .rejilla:not(.rejilla--tabla) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }

  .rejilla:not(.rejilla--tabla) .espacio + .espacio {
    margin-top: 0;
  }

  .rejilla:not(.rejilla--tabla) .espacio__lista {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Ponentes
   La ficha cambia de estilo según la ruta de la imagen:
   img/ponentes/… → foto en blanco y negro; img/entidades/… → logo sobre azul.
   Un ponente sin foto todavía lleva el logo de su entidad y la ruta de su foto en
   data-foto: se ordena como las de persona (nombre y, debajo, cargo).
   -------------------------------------------------------------------------- */
.ponentes {
  padding-block: var(--seccion);
}

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.25rem, 42%), 1fr));
  gap: 2.25rem 1rem;
}

.ficha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.ficha__img {
  width: 100%;
  max-width: 12.5rem;
  aspect-ratio: 1;
  margin-bottom: 0.65rem;
  object-fit: cover;
  background: var(--azul);
  -webkit-mask: var(--arco) center / 100% 100% no-repeat;
  mask: var(--arco) center / 100% 100% no-repeat;
}

/* Fotos de ponentes en blanco y negro: sin fondo azul detrás, ni mientras cargan */
.ficha__img[src*="ponentes/"] {
  background: #e6e6e6;
}

.ficha__img--entidad,
.ficha__img--texto {
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--blanco);
  text-align: center;
  font-weight: 600;
  line-height: 1.15;
}

/* --texto: el mismo recuadro, pero en una ficha de persona (sin el orden de las de entidad) */
.ficha__img--entidad,
.ficha__img--texto {
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.125rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ficha__nombre {
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--noche);
}

.ficha .pc {
  padding-inline: 0.55em;
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
}

.ficha__nombre .pc {
  font-size: 0.6875rem;
  color: var(--azul);
}

.ficha__cargo {
  color: var(--gris);
  font-size: 0.875rem;
  line-height: 1.4;
}

.ficha__cargo .pc {
  margin-top: 0.3rem;
  color: var(--azul);
}

/* Fichas de entidad (logo o nombre): la entidad pasa a ser lo principal */
.ficha:has(img[src*="entidades/"]:not([data-foto]), .ficha__img--entidad) .ficha__cargo {
  order: -1;
  color: var(--noche);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
}

.ficha:has(img[src*="entidades/"]:not([data-foto]), .ficha__img--entidad) .ficha__img {
  order: -2;
}

.ficha__sesiones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.ficha__sesiones a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.1rem 0.7rem;
  border-radius: var(--pildora);
  background: var(--hielo);
  color: var(--azul);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
  .ficha__sesiones a:hover {
    background: var(--rojo);
    color: var(--blanco);
  }
}

.ficha__sesiones a:focus-visible {
  background: var(--rojo);
  color: var(--blanco);
}

@media (min-width: 80em) {
  .fichas {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2.75rem 1.25rem;
  }
}

/* Presentadores: al principio de la sección, antes de Ponentes y con el mismo título de sección.
   Fichas del mismo tamaño (misma rejilla) y sin chips. */
.presentan {
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

/* --------------------------------------------------------------------------
   Actividades
   -------------------------------------------------------------------------- */
.actividades {
  padding-block: var(--seccion);
  background: var(--hielo);
  color: var(--noche);
}

.actividades .pildora--linea {
  color: var(--azul);
}

.actividades__in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.collage {
  display: contents;
}

.actividades__texto {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  margin-bottom: 1.5rem;
}

.actividades .titular {
  color: var(--azul);
  text-transform: none;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  line-height: 1;
}

.actividades__parrafo {
  max-width: 34rem;
  color: var(--noche);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
}

.actividades__parrafo strong {
  color: var(--azul);
}

.collage__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage__foto--c {
  grid-column: 1 / -1;
}

.collage__foto--c img {
  aspect-ratio: 3 / 2;
}

.collage__foto--a img,
.collage__foto--d img {
  aspect-ratio: 4 / 5;
}

.collage__foto--b img,
.collage__foto--e img {
  aspect-ratio: 1;
}

.collage__foto--b,
.collage__foto--e {
  align-self: end;
}

@media (min-width: 64em) {
  .actividades__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    align-items: start;
  }

  .actividades__texto {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding-right: 1rem;
  }

  .collage__foto--c {
    grid-column: 6 / 13;
    grid-row: 1;
  }

  .collage__foto--a {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .collage__foto--b {
    grid-column: 4 / 7;
    grid-row: 2;
    align-self: start;
    margin-top: 4rem;
  }

  .collage__foto--d {
    grid-column: 7 / 10;
    grid-row: 2;
  }

  .collage__foto--e {
    grid-column: 10 / 13;
    grid-row: 2;
    align-self: start;
    margin-top: 4rem;
  }
}

/* --------------------------------------------------------------------------
   Inscripción
   -------------------------------------------------------------------------- */
.inscripcion {
  padding-block: var(--seccion);
  background: var(--azul);
  color: var(--blanco);
}

.inscripcion .titular {
  color: var(--blanco);
}

.seccion-cab--claro .seccion-cab__nota {
  display: block;
  color: var(--bruma);
}

/* El hueco antes del punto va en el espacio separable: si la línea se parte, desaparece
   y «Entrada gratuita» empieza alineada con el texto de arriba */
.nota-sep {
  word-spacing: 0.35em;
}

.nota-gratis {
  color: var(--blanco);
  font-weight: 600;
  white-space: nowrap;
}

.inscripcion__pasos {
  display: grid;
  gap: 3.5rem;
}

.paso {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.paso__num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 2.25rem;
  border-radius: var(--pildora);
  background: var(--blanco);
  color: var(--azul);
  font-size: 1.125rem;
  font-weight: 600;
}

.paso__titulo {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  text-transform: uppercase;
}

.tarjeta-form {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border-radius: calc(var(--radio) * 1.4);
  background: var(--blanco);
  color: var(--noche);
}

.aviso {
  padding: 1rem 1.25rem;
  border-radius: var(--radio);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.6);
  color: var(--blanco);
  font-size: 0.9375rem;
}

.aviso strong {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--blanco);
  font-size: 1.0625rem;
}

/* El punto, centrado en la primera línea (1.55 es la interlínea), también si el texto ocupa dos */
.aviso strong::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: calc((1.55em - 0.55rem) / 2);
  border-radius: 50%;
  background: var(--rojo);
}

.franjas {
  display: grid;
  gap: 1.75rem;
}

.franja {
  display: grid;
  gap: 0.5rem;
}

.franja__hora {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--bruma);
}

.taller {
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--noche);
}

.taller summary {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 1rem 3.75rem 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radio);
}

.taller summary::-webkit-details-marker {
  display: none;
}

.taller__cod {
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.taller__titulo {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
}

.taller__quien {
  color: var(--gris);
  font-size: 0.875rem;
}

.taller__quien .pc,
.taller__titulo .pc {
  color: var(--azul);
}

.taller__estado {
  justify-self: start;
  margin-top: 0.3rem;
  font-size: 0.75rem;
}

.taller__icono {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  padding: 0.45rem;
  border-radius: var(--pildora);
  background: var(--azul);
  color: var(--blanco);
  transition: transform 0.3s var(--suave);
}

.taller[open] .taller__icono {
  transform: rotate(45deg);
}

.taller .ig-form {
  padding: 0 1.2rem 1.25rem;
}

.taller:target,
.taller.resaltado {
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 6px var(--noche);
}

@media (min-width: 64em) {
  .inscripcion__pasos {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }

  /* La general y, debajo, las ponencias, a la izquierda; los talleres, a la derecha. La fila de la
     general no se estira con los talleres: la segunda es la flexible. */
  .inscripcion__pasos {
    grid-template-rows: auto 1fr;
  }

  .paso--ponencias {
    grid-column: 1;
  }

  .paso--talleres {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* --------------------------------------------------------------------------
   Formularios: mismo estilo para la vista previa y para Fluent Forms
   (la vista previa usa las clases que genera Fluent Forms)
   -------------------------------------------------------------------------- */
.ig-pronto {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  border-radius: var(--pildora);
  background: var(--hielo);
  color: var(--azul);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ig-pronto::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--rojo);
}

@media (prefers-reduced-motion: no-preference) {
  .ig-pronto::before {
    animation: latido 2s ease-in-out infinite;
  }
}

@keyframes latido {
  50% {
    opacity: 0.3;
  }
}

.ig-demo {
  margin-top: 1.5rem;
}

.ig-demo__aviso {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bruma);
  color: var(--gris);
  font-size: 0.875rem;
}

.ig-demo__resultado:empty {
  display: none;
}

.ig-demo__resultado {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--hielo);
  color: var(--noche);
  font-size: 0.9375rem;
  font-weight: 500;
}

.ig-form .fluentform {
  --fluentform-primary: var(--azul);
  --fluentform-secondary: var(--noche);
  --fluentform-border-color: var(--borde);
  --fluentform-border-radius: var(--pildora);
  --fluentform-danger: #b00020;
  font-family: var(--fuente);
  color: var(--noche);
}

.ig-form .fluentform fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ig-form .fluentform .ff_screen_reader_title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ig-form .fluentform .ff-t-container {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 30em) {
  .ig-form .fluentform .ff-t-container {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
  }
}

.ig-form .fluentform .ff-t-cell {
  width: auto;
  min-width: 0;
  padding: 0;
}

.ig-form .fluentform .ff-el-group {
  position: relative;
  margin: 0 0 1.6rem;
}

.ig-form .fluentform .ff-el-input--label {
  margin-bottom: 0.4rem;
}

.ig-form .fluentform .ff-el-input--label label {
  display: block;
  margin: 0;
  color: var(--noche);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ig-form .fluentform .ff-el-is-required.asterisk-right label::after {
  content: " *";
  margin: 0;
  color: var(--azul);
}

.ig-form .fluentform .ff-el-form-control {
  display: block;
  width: 100%;
  min-height: 3.125rem;
  padding: 0.7rem 1.25rem;
  border: 1.5px solid var(--borde);
  border-radius: var(--pildora);
  background: var(--blanco);
  color: var(--noche);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ig-form .fluentform textarea.ff-el-form-control {
  border-radius: var(--radio);
}

.ig-form .fluentform .ff-el-form-control:hover {
  border-color: var(--azul);
}

.ig-form .fluentform .ff-el-form-control:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px rgb(0 61 246 / 0.25);
}

.ig-form .fluentform .ff-el-form-check-label,
.ig-form .fluentform .ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
}

/* Fluent Forms maqueta la casilla de privacidad como tabla: la pasamos a flex */
.ig-form .fluentform .ff-el-tc label.ff_tc_label {
  display: flex;
}

.ig-form .fluentform .ff-el-tc label.ff_tc_label > span,
.ig-form .fluentform .ff-el-tc label.ff_tc_label > div {
  display: block;
}

.ig-form .fluentform .ff-el-tc label.ff_tc_label > span {
  width: auto;
  padding-top: 0.05rem !important;
}

/* Con error, el texto de la casilla sigue en tinta: el rojo, solo en el mensaje */
.ig-form .fluentform .ff-el-is-error .ff-el-form-check-label {
  color: var(--noche);
}

.ig-form .fluentform .ff-el-is-error .ff-el-form-check-label a {
  color: var(--azul);
}

.ig-form .fluentform .ff-el-form-check-input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--azul);
  cursor: pointer;
}

.ig-form .fluentform .ff_tc_checkbox {
  display: flex;
  padding-top: 0.05rem;
}

.ig-form .fluentform .ff_t_c a {
  color: var(--azul);
  font-weight: 600;
}

.ig-form .fluentform .ff-custom_html {
  margin: -0.25rem 0 1rem;
  color: var(--gris);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ig-form .fluentform .ff-custom_html p {
  margin: 0;
}

.ig-form .fluentform .ff-custom_html a {
  color: var(--azul);
  font-weight: 600;
}

.ig-form .fluentform .ff-custom_html strong {
  color: var(--noche);
}

.ig-form .fluentform .ig-nota--fotos {
  margin-top: 0;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: var(--hielo);
  color: var(--noche);
  font-size: 0.875rem;
}

.ig-form .fluentform .ig-nota--general {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--rojo);
  border-radius: 0 1rem 1rem 0;
  background: var(--hielo);
  color: var(--noche);
  font-size: 0.875rem;
}

.ig-form .ig-form__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: -0.25rem 0 1.25rem;
  color: var(--gris);
  font-size: 0.8125rem;
}

.ig-form .ig-form__legal .pc {
  color: var(--azul);
}

.ig-form .fluentform .ff-btn-submit:not(.ff_btn_no_style),
.ig-form .fluentform .ff-btn:not(.ff_btn_no_style) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75em 2em;
  border: 0;
  border-radius: var(--pildora);
  background: var(--azul);
  color: var(--blanco);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .ig-form .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
    background: var(--rojo);
    color: var(--blanco);
    opacity: 1;
  }
}

.ig-form .fluentform .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
  background: var(--rojo);
  color: var(--blanco);
}

@media (min-width: 30em) {
  .ig-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
    width: auto;
  }
}

/* Los errores flotan en el hueco entre campos: al corregirlos no se mueve nada
   (si no, el toque en la siguiente casilla puede caer fuera al desaparecer el error) */
.ig-form .fluentform .ff-el-group .error,
.ig-form .fluentform .ff-el-group .text-danger {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  margin: 0;
  color: #b00020;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
}

.ig-form .fluentform .ff-message-success,
.ig-form .ff-message-success,
.ig-form .ff-errors-in-stack:not(:empty),
.ig-form .ff_form_not_render,
.ig-form .ff-alert {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: var(--radio);
  background: var(--hielo);
  color: var(--noche);
  font-weight: 500;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Información práctica
   -------------------------------------------------------------------------- */
.info {
  padding-block: var(--seccion);
}

.info__datos {
  display: grid;
  border-top: 3px solid var(--azul);
}

.info__dato {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--bruma);
}

.info__dato dt {
  color: var(--gris);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.info__dato dd {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--azul);
}

.info__lugar {
  display: block;
}

.info address {
  margin: 0.4rem 0 1.5rem;
  color: var(--noche);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  font-style: normal;
  font-weight: 400;
}

@media (min-width: 64em) {
  .info__datos {
    grid-template-columns: 1.1fr 0.8fr 1.6fr;
    align-items: start;
    column-gap: 2.5rem;
  }

  .info__dato {
    padding-block: 2rem;
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Páginas legales (/politica-privacidad/ y /aviso-legal/): las sirve el plugin
   con la cabecera y el pie de la home y el contenido de legal/*.html
   -------------------------------------------------------------------------- */
.legal {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--seccion);
}

.legal__in > * {
  max-width: 46rem;
}

.legal h1 {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--azul);
}

.legal h1 + p {
  color: var(--gris);
  font-size: 0.9375rem;
}

.legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  line-height: 1.25;
  color: var(--azul);
}

.legal p,
.legal li {
  color: var(--noche);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 0.9rem;
}

.legal ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.legal li + li {
  margin-top: 0.4rem;
}

.legal li::marker {
  color: var(--azul);
}

.legal a {
  color: var(--azul);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Dato pendiente del cliente: como el marcador «Por confirmar» del resto de la web */
.legal mark {
  padding: 0.05em 0.65em;
  border: 1.5px dashed currentColor;
  border-radius: var(--pildora);
  background: none;
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Tabla de la política de cookies: en el móvil se desplaza ella sola, no la página */
.legal__tabla {
  margin-block: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--hielo);
  border-radius: var(--radio);
}

.legal__tabla:focus-visible {
  outline-offset: 2px;
}

.legal table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  color: var(--noche);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.legal caption {
  padding: 0.9rem 1rem 0.5rem;
  color: var(--azul);
  font-weight: 600;
  text-align: left;
}

.legal th,
.legal td {
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--hielo);
  text-align: left;
  vertical-align: top;
}

.legal thead th {
  color: var(--gris);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal th[scope="rowgroup"] {
  background: var(--hielo);
  color: var(--azul);
  font-weight: 600;
}

.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  white-space: nowrap;
}

.legal .boton {
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
  background: var(--marino);
  color: var(--blanco);
}

.pie__marcas {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
}

.pie__grupo {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

/* Desde tablet, los tres grupos en una fila (organiza a la izquierda; después, el apoyo y la
   colaboración), con las etiquetas en la misma línea y los logos centrados entre sí. En tablet
   (hasta 1024), los dos logos del apoyo van uno encima del otro. En móvil, apilados. */
@media (min-width: 48em) {
  .pie__marcas {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem clamp(2.5rem, 5vw, 6.5rem);
  }

  .pie__grupo {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.pie__etiqueta {
  color: var(--bruma);
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pie__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3rem;
}

.pie__logo-nasa {
  width: 7rem;
}

/* Ancho fijo con tope (no min()): así la fila del apoyo se parte por los 18rem y no por el ancho del SVG */
.pie__logo-agencia {
  width: 18rem;
  max-width: 100%;
}

.pie__logo-emtd {
  width: 8.5rem;
}

/* GameBCN (1.5.7): cuadrado, como el de NASA, pero con el marco y las letras macizos: algo más pequeño */
.pie__logo-gamebcn {
  width: 6.25rem;
}

.pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  padding-top: 2rem;
  color: var(--bruma);
  font-size: 0.875rem;
}

.pie__wordmark {
  width: 9.7rem;
  margin-right: auto;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.pie__legal a {
  display: inline-block;
  padding-block: 0.6rem;
}

.pie__legal a:hover {
  color: var(--blanco);
}

/* «Configurar cookies»: un botón con aspecto de enlace, como los de al lado. Sin JS no hace nada,
   así que no se muestra. */
.pie__boton {
  padding: 0.6rem 0;
  border: 0;
  background: none;
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.pie__boton:hover {
  color: var(--blanco);
}

html:not(.js) [data-cookies-abrir] {
  display: none;
}

/* --------------------------------------------------------------------------
   Cookies: banner y panel de configuración (js/cookies.js)
   Sin tapar la portada ni bloquear la web: en el móvil, una barra abajo; en escritorio, una
   tarjeta abajo a la derecha (desde la 1.5.2). «Aceptar» y «Rechazar», del mismo tamaño y el mismo peso.
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  display: grid;
  gap: 0.75rem;
  max-height: 85svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem var(--margen) calc(1rem + env(safe-area-inset-bottom));
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--blanco);
  color: var(--noche);
  box-shadow: 0 -0.5rem 2rem rgb(2 27 107 / 0.25);
  font-size: 0.875rem;
  line-height: 1.45;
}

.cookies[hidden],
.cookies [hidden] {
  display: none !important;
}

.cookies__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.5rem;
}

.cookies__titulo {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
}

.cookies__texto a {
  color: var(--azul);
  font-weight: 600;
}

.cookies__cerrar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.65rem -0.65rem -0.65rem 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--azul);
  cursor: pointer;
}

.cookies__cerrar .i {
  width: 1.375rem;
  height: 1.375rem;
  transform: rotate(45deg);
}

.cookies__opcion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  align-items: center;
  padding-block: 0.75rem;
  border-top: 1px solid var(--hielo);
}

.cookies__opcion:last-child {
  border-bottom: 1px solid var(--hielo);
}

.cookies__opcion label {
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.cookies__desc {
  grid-column: 1;
  color: var(--gris);
}

/* Interruptor: casilla con role="switch". Apagado, gris; encendido, azul. */
.cookies__interruptor {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  border-radius: var(--pildora);
  background: var(--borde);
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cookies__interruptor::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--blanco);
  transition: transform 0.2s var(--suave);
}

.cookies__interruptor:checked {
  background: var(--azul);
}

.cookies__interruptor:checked::before {
  transform: translateX(1.25rem);
}

.cookies__acciones {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.cookies--panel .cookies__acciones {
  grid-template-columns: 1fr 1fr;
}

.cookies__acciones .boton {
  width: 100%;
  padding-inline: 0.75em;
}

.cookies__enlace {
  min-height: 2.75rem;
  padding: 0.5em 0.25em;
  border: 0;
  background: none;
  color: var(--azul);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* «Guardar selección», en el panel: botón de línea, debajo de «Aceptar» y «Rechazar» */
.cookies__guardar {
  grid-column: 1 / -1;
  min-height: 2.75rem;
  padding: 0.5em 1.25em;
  border: 2px solid var(--azul);
  border-radius: var(--pildora);
  background: none;
  color: var(--azul);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .cookies__enlace:hover {
    color: var(--rojo);
  }

  .cookies__guardar:hover {
    border-color: var(--rojo);
    background: var(--rojo);
    color: var(--blanco);
  }
}

.cookies__guardar:focus-visible {
  border-color: var(--rojo);
  background: var(--rojo);
  color: var(--blanco);
}

/* En escritorio, abajo a la derecha, encima de la foto: no tapa los datos de la portada ni
   «Inscríbete», que van en la columna de la izquierda */
@media (min-width: 64em) {
  .cookies {
    inset: auto 1.5rem 1.5rem auto;
    width: min(23rem, calc(100vw - 3rem));
    max-height: calc(100svh - var(--cab) - 3rem);
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: var(--radio);
    box-shadow: 0 1rem 3rem rgb(2 27 107 / 0.3);
    font-size: 0.9375rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cookies:not([hidden]) {
    animation: cookies-entrar 0.45s var(--suave);
  }

  @keyframes cookies-entrar {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
  }
}

/* --------------------------------------------------------------------------
   Movimiento: discreto y solo si el sistema lo permite
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.8s ease, transform 0.9s var(--suave);
  }

  .js .revelar.visible {
    opacity: 1;
    transform: none;
  }

  .fichas .revelar:nth-child(7n + 2) { transition-delay: 0.05s; }
  .fichas .revelar:nth-child(7n + 3) { transition-delay: 0.1s; }
  .fichas .revelar:nth-child(7n + 4) { transition-delay: 0.15s; }
  .fichas .revelar:nth-child(7n + 5) { transition-delay: 0.2s; }
  .fichas .revelar:nth-child(7n + 6) { transition-delay: 0.25s; }
  .fichas .revelar:nth-child(7n + 7) { transition-delay: 0.3s; }
}