/* Gamonal Team, hoja de estilos
   Paleta tomada del cartel oficial de la IV Carrera: azul marino, azul electrico,
   verde y magenta. Todo pasa por tokens para poder cambiarlo en un solo sitio. */

:root {
  /* Color */
  --azul-900: #0E1B4A;
  --azul-700: #17318C;
  --azul-500: #1268B8;
  --azul-100: #E4EEFB;
  --verde-700: #17703A;
  --verde-500: #2E9E4F;
  --verde-100: #E2F5E8;
  --magenta-600: #B93186;
  --magenta-100: #FBE7F4;

  --fondo: #F4F8FD;
  --superficie: #FFFFFF;
  --superficie-alt: #EEF4FC;
  --borde: #D5E2F4;
  --texto: #0E1B4A;
  --texto-suave: #42548A;
  --sombra: 0 1px 2px rgba(14, 27, 74, .06), 0 8px 24px rgba(14, 27, 74, .07);
  --sombra-alta: 0 2px 4px rgba(14, 27, 74, .08), 0 18px 40px rgba(14, 27, 74, .12);

  /* Tipografia */
  --display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --texto-fuente: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Ritmo de 4 px */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  --radio: 14px;
  --radio-s: 8px;
  --ancho: 1120px;
  --transicion: 200ms cubic-bezier(.2, .7, .3, 1);
  --alto-cabecera: 68px;

  color-scheme: light;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + var(--e4)); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--texto-fuente);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: .95; margin: 0; }
h1 { font-size: clamp(3rem, 9.5vw, 6rem); }
h2 { font-size: clamp(2.35rem, 5.4vw, 3.9rem); }
h3 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); line-height: 1.08; }
p { margin: 0 0 var(--e4); max-width: 62ch; }

a { color: var(--azul-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--magenta-600); }

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

.saltar {
  position: absolute; left: var(--e4); top: -100px; z-index: 1000;
  background: var(--superficie); color: var(--texto);
  padding: var(--e3) var(--e4); border-radius: var(--radio-s);
  box-shadow: var(--sombra-alta); font-weight: 600;
  transition: top var(--transicion);
}
.saltar:focus { top: var(--e3); }

.contenedor { width: min(100% - 2 * var(--e5), var(--ancho)); margin-inline: auto; }
@media (max-width: 480px) { .contenedor { width: calc(100% - 2 * var(--e4)); } }

.seccion { padding-block: clamp(var(--e7), 9vw, var(--e9)); }
.seccion--alt { background: var(--superficie-alt); }

.antetitulo {
  font-size: .9375rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta-600); margin: 0 0 var(--e3);
}
.entradilla { color: var(--texto-suave); font-size: 1.25rem; }
.cabecera-seccion { margin-bottom: var(--e6); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: var(--e3) var(--e5);
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--texto-fuente); font-size: 1.0625rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  /* un libelle qui passe a la ligne dans un rayon de 999px donne une pastille
     enorme au lieu d'un bouton : il tient sur une ligne, toujours */
  white-space: nowrap;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
  touch-action: manipulation;
}
.boton--principal { background: var(--verde-700); color: #fff; box-shadow: var(--sombra); }
.boton--principal:hover { background: var(--azul-700); color: #fff; }
.boton--secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton--secundario:hover { background: var(--superficie); border-color: var(--azul-500); color: var(--texto); }
.boton--claro { background: #fff; color: var(--azul-900); }
.boton--claro:hover { background: var(--azul-100); color: var(--azul-900); }
.boton .icono { width: 20px; height: 20px; flex: none; }

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

.cabecera {
  position: sticky; top: 0; z-index: 100;
  height: var(--alto-cabecera);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila { display: flex; align-items: center; gap: var(--e4); height: var(--alto-cabecera); }
.cabecera__marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; color: var(--texto); margin-right: auto; }
.cabecera__marca img { width: 44px; height: 44px; object-fit: contain; }
.cabecera__nombre { font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.cabecera__nav { display: flex; align-items: center; gap: var(--e1); }
.cabecera__nav a:not(.boton) {
  padding: var(--e2) var(--e3); border-radius: var(--radio-s);
  color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: 1.0625rem;
  transition: background-color var(--transicion), color var(--transicion);
}
.cabecera__nav a:not(.boton):hover, .cabecera__nav a:not(.boton)[aria-current="true"] { background: var(--azul-100); color: var(--texto); }
.cabecera .boton { min-height: 44px; padding-inline: var(--e4); }

.menu-boton { display: none; }
.cabecera__cta-movil { display: none; }

@media (max-width: 1080px) {
  .cabecera__nav {
    position: fixed; inset: var(--alto-cabecera) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--superficie); border-bottom: 1px solid var(--borde);
    padding: var(--e3) var(--e4) var(--e5);
    box-shadow: var(--sombra-alta);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  }
  .cabecera__nav[data-abierto="true"] { transform: none; opacity: 1; visibility: visible; }
  .cabecera__nav a:not(.boton) { padding: var(--e3) var(--e3); font-size: 1.15rem; min-height: 48px; display: flex; align-items: center; }
  .menu-boton {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0;
    background: transparent; border: 1px solid var(--borde); border-radius: var(--radio-s);
    color: var(--texto); cursor: pointer;
  }
  .cabecera__cta { display: none; }
  .cabecera__cta-movil { display: inline-flex; margin-top: var(--e3); }
}

/* ---------- Portada ---------- */

.portada {
  position: relative; overflow: hidden;
  background: var(--azul-900);
  color: #fff;
  padding-block: clamp(var(--e7), 10vw, 120px);
}
.portada::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14, 27, 74, .96) 0%, rgba(14, 27, 74, .88) 46%, rgba(14, 27, 74, .58) 100%),
    radial-gradient(circle at 88% 8%, rgba(46, 158, 79, .38), transparent 42%),
    radial-gradient(circle at 78% 92%, rgba(185, 49, 134, .3), transparent 46%);
}
.portada::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.5px);
  background-size: 14px 14px;
  mask-image: linear-gradient(120deg, #000 0%, transparent 46%, transparent 62%, #000 100%);
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 46%, transparent 62%, #000 100%);
}
.portada__foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}
.portada::before, .portada::after { z-index: 1; }
.portada > .contenedor { position: relative; z-index: 2; }

.portada__antetitulo {
  display: flex; align-items: flex-start; gap: var(--e3);
  font-size: .9375rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92); margin: 0 0 var(--e5); max-width: none;
}
/* le trait s'aligne sur la premiere ligne, pas sur le centre du bloc */
.portada__antetitulo::before {
  content: ""; flex: none; width: 40px; height: 3px; border-radius: 2px;
  background: currentColor; margin-top: .62em;
}
/* sous 640 px le texte passe sur deux lignes, le trait devient parasite */
@media (max-width: 640px) {
  .portada__antetitulo::before { display: none; }
}
.portada h1 { text-transform: uppercase; text-wrap: balance; max-width: 15ch; }
.portada h1 .resalte { color: #8FE3AB; display: block; }
/* chaque bloc reste entier, la coupure se fait sur les separateurs */
.portada__fecha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e4);
  font-family: var(--display); font-size: clamp(1.75rem, 3.9vw, 2.75rem);
  margin: var(--e5) 0 var(--e3); color: #fff; max-width: none;
}
.portada__fecha span + span::before {
  content: "·"; margin-right: var(--e4); opacity: .65;
}
/* sur petit ecran la ligne se replie, un point en debut de ligne pendouille */
@media (max-width: 640px) {
  .portada__fecha { gap: var(--e2) var(--e4); }
  .portada__fecha span + span::before { content: none; }
}
.portada__texto { color: rgba(255, 255, 255, .9); font-size: 1.3rem; max-width: 52ch; }
.portada__acciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e3); margin-top: var(--e6); max-width: 540px;
}

.cuenta-atras { display: flex; gap: var(--e3); margin-top: var(--e7); flex-wrap: wrap; }
.cuenta-atras__caja {
  min-width: 78px; padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radio); text-align: center;
}
.cuenta-atras__numero { font-family: var(--display); font-size: 2.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cuenta-atras__etiqueta { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.cuenta-atras__final { font-family: var(--display); font-size: 2rem; }

/* ---------- Datos clave ---------- */

.datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e3);
  margin-top: calc(-1 * var(--e6)); position: relative; z-index: 2;
}
.dato {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e5) var(--e4); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: var(--e1);
}
.dato .icono { width: 24px; height: 24px; color: var(--azul-500); margin-bottom: var(--e2); }
.dato__etiqueta { font-size: .9375rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.dato__valor { font-family: var(--display); font-size: 2.1rem; line-height: 1.05; }

/* ---------- Pasos de inscripcion ---------- */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--e4); }
.paso {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e5); box-shadow: var(--sombra); position: relative;
}
.paso__numero {
  font-family: var(--display); font-size: 3.5rem; line-height: 1;
  color: var(--azul-100); position: absolute; top: var(--e4); right: var(--e5);
}
.paso h3 { margin-bottom: var(--e2); padding-right: var(--e8); }
.paso p { margin: 0; color: var(--texto-suave); }

.aviso {
  display: flex; gap: var(--e3); align-items: flex-start;
  margin-top: var(--e5); padding: var(--e4) var(--e5);
  background: var(--magenta-100); border-left: 4px solid var(--magenta-600);
  border-radius: var(--radio-s);
}
.aviso .icono { width: 22px; height: 22px; flex: none; color: var(--magenta-600); margin-top: 2px; }
.aviso p { margin: 0; }

.inscripcion__pie {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  align-items: center; gap: var(--e7); margin-top: var(--e6);
}
.inscripcion__nota { display: grid; gap: var(--e5); justify-items: start; }
.inscripcion__nota .aviso { margin-top: 0; }
@media (max-width: 780px) {
  .inscripcion__pie { grid-template-columns: 1fr; gap: var(--e5); justify-items: center; }
  .cartel { max-width: 320px; }
}
.cartel { margin: 0; max-width: 260px; }
.cartel img { border-radius: var(--radio); box-shadow: var(--sombra-alta); width: 100%; height: auto; }
.cartel figcaption {
  margin-top: var(--e2); font-size: .875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); text-align: center;
}

/* ---------- Galeria ---------- */

.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
.galeria__item { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--superficie); }
.galeria__item { display: flex; flex-direction: column; }
.galeria__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; flex: none; }
.galeria__item--ancho { grid-column: span 2; grid-row: span 2; }
.galeria__item--ancho img { aspect-ratio: auto; }
.galeria__nota { margin-top: var(--e4); font-size: .95rem; color: var(--texto-suave); }
.galeria__item figcaption {
  margin-top: auto;
  padding: var(--e3) var(--e4); font-size: .9375rem; color: var(--texto-suave);
  background: var(--superficie); border-top: 1px solid var(--borde);
}

@media (max-width: 860px) {
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria__item--ancho { grid-column: span 2; grid-row: auto; }
  .galeria__item--ancho img { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .galeria { grid-template-columns: 1fr; }
  .galeria__item--ancho { grid-column: auto; }
  .inscripcion__nota { justify-items: stretch; }
}

/* ---------- Causa ---------- */

.causa {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e7); align-items: center;
}
@media (max-width: 860px) { .causa { grid-template-columns: 1fr; gap: var(--e5); } }
.causa__marca {
  background: var(--verde-100); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e6); text-align: center;
  display: grid; justify-items: center; gap: var(--e3);
}
.causa__marca img { width: 170px; height: auto; }
.causa__marca .boton { margin-top: var(--e2); background: var(--superficie); }
.causa__nombre { font-family: var(--display); font-size: clamp(2.3rem, 5.4vw, 3.1rem); color: var(--verde-700); }
.causa__lema { font-style: italic; color: var(--texto-suave); margin: 0; font-size: 1.05rem; }
.causa__nota { font-size: 1.05rem; color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: var(--e4); margin-top: var(--e4); }

/* ---------- Quienes somos ---------- */


.equipo__cita {
  font-family: var(--display); font-size: clamp(1.85rem, 4vw, 2.6rem); line-height: 1.12;
  color: var(--azul-700); border-left: 4px solid var(--verde-500);
  padding-left: var(--e4); margin: var(--e3) 0 0;
}
/* la photo prend toute la largeur entre le titre et le recit :
   trois blocs empiles et alignes a gauche, au lieu de trois blocs epars */
.equipo__foto {
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-alta);
  aspect-ratio: 16 / 9; margin-bottom: var(--e7);
}
.equipo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
@media (max-width: 620px) { .equipo__foto { aspect-ratio: 4 / 3; } }
.marcador {
  display: grid; place-content: center; gap: var(--e2); text-align: center;
  width: 100%; height: 100%; padding: var(--e5);
  background: repeating-linear-gradient(135deg, var(--superficie-alt) 0 12px, var(--superficie) 12px 24px);
  border: 2px dashed var(--borde); border-radius: var(--radio); color: var(--texto-suave);
}
.marcador .icono { width: 34px; height: 34px; margin-inline: auto; color: var(--azul-500); }
.marcador strong { color: var(--texto); font-size: 1.05rem; }
.marcador span { font-size: .9rem; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: var(--e3); max-width: 820px; }
.faq__item {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e4) var(--e5); box-shadow: var(--sombra);
}
.faq__item summary {
  cursor: pointer; font-weight: 700; font-size: 1.2rem; color: var(--texto);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  min-height: 32px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--azul-500); border-bottom: 2px solid var(--azul-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicion);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__item p { margin: var(--e3) 0 0; color: var(--texto-suave); }

/* ---------- Patrocinadores ---------- */

.patrocinadores {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--e2);
  /* sans align-items: start, le stretch du grid ecrase l'aspect-ratio
     des tuiles et les rangees prennent des hauteurs differentes */
  align-items: start;
}
.patrocinador {
  /* l'image est en absolu : sinon c'est elle qui dicte la hauteur de la tuile
     et les rangees se desalignent, quel que soit l'aspect-ratio demande */
  position: relative; display: block;
  aspect-ratio: 3 / 2;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-s);
  color: var(--texto); text-decoration: none; overflow: hidden;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.patrocinador img {
  position: absolute; inset: var(--e3);
  /* une image pas encore chargee ne laisse pas une case vide suspecte */
  background: transparent;
  width: calc(100% - 2 * var(--e3)); height: calc(100% - 2 * var(--e3));
  object-fit: contain;
}
.patrocinador__texto {
  position: absolute; inset: var(--e2);
  display: grid; place-items: center;
}
.patrocinador__texto { font-size: .8125rem; font-weight: 600; text-align: center; line-height: 1.25; }
a.patrocinador:hover,
.patrocinador--ampliable:hover {
  border-color: var(--azul-500); box-shadow: var(--sombra); transform: translateY(-2px);
}
.patrocinador--ampliable { cursor: zoom-in; }
/* la visionneuse affiche des logos, souvent sur fond blanc :
   sans fond clair, un logo transparent devient illisible */
.visor img { background: #fff; padding: var(--e4); }
/* deux logos sont clairs sur fond transparent : sur une tuile blanche
   ils disparaissent, il leur faut un fond sombre */
.patrocinador--oscuro { background: var(--azul-900); border-color: var(--azul-900); }

/* Avec 154 logos le mur ferait vingt rangees. On en montre six, le reste
   se deplie. Tout est dans le HTML, donc lisible par Google et par les
   moteurs de reponse meme replie. */
.patrocinadores-caja { position: relative; }
.patrocinadores-caja[data-expandido="false"] {
  max-height: 560px; overflow: hidden;
}
.patrocinadores-caja[data-expandido="false"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, transparent, var(--fondo));
  pointer-events: none;
}
.seccion--alt .patrocinadores-caja[data-expandido="false"]::after {
  background: linear-gradient(to bottom, transparent, var(--superficie-alt));
}
.patrocinadores-mas { margin-top: var(--e5); text-align: center; }

@media (max-width: 620px) {
  .patrocinadores { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .patrocinadores-caja[data-expandido="false"] { max-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  a.patrocinador:hover, .patrocinador--ampliable:hover { transform: none; }
}

/* ---------- Redes ---------- */

.redes__acciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--e3); margin-bottom: var(--e5); max-width: 620px;
}
.muro .icono { width: 44px; height: 44px; color: var(--azul-500); }
.muro {
  min-height: 260px; display: grid; place-items: center; padding: var(--e6);
  background: var(--superficie); border: 2px dashed var(--borde); border-radius: var(--radio);
  text-align: center; color: var(--texto-suave);
}

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

.pie { background: var(--azul-900); color: rgba(255, 255, 255, .78); padding-block: var(--e7); }
.pie a { color: #fff; }
.pie a:hover { color: #8FE3AB; }
.pie__fila { display: flex; flex-wrap: wrap; gap: var(--e5); justify-content: space-between; align-items: center; }
.pie__marca { display: flex; align-items: center; gap: var(--e3); }
.pie__marca img { width: 52px; height: 52px; object-fit: contain; }
.pie__nombre { font-family: var(--display); font-size: 1.75rem; color: #fff; line-height: 1; }
.pie p { margin: 0; font-size: 1.05rem; }
.pie__legal { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid rgba(255, 255, 255, .16); font-size: .95rem; }

/* ---------- Iconos y accesibilidad ---------- */

.icono {
  display: inline-block; vertical-align: middle; flex: none;
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Selecteur de version, previsualisation uniquement ---------- */

.cambiar-version {
  position: fixed; right: var(--e4); bottom: var(--e4); z-index: 200;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e3) var(--e5); min-height: 56px; justify-content: center;
  background: var(--azul-900); color: #fff; text-decoration: none;
  border-radius: 999px; box-shadow: var(--sombra-alta);
  transition: transform var(--transicion), background-color var(--transicion);
}
.cambiar-version:hover { background: var(--magenta-600); color: #fff; transform: translateY(-2px); }
.cambiar-version__etiqueta {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  opacity: .7;
}
.cambiar-version__accion {
  display: flex; align-items: center; gap: var(--e2);
  font-size: .9375rem; font-weight: 700;
}
.cambiar-version .icono { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .cambiar-version { left: var(--e4); right: var(--e4); align-items: center; }
}

/* ---------- Apparition au defilement ----------
   Pas de bibliotheque : IntersectionObserver plus deux regles.
   L'etat cache est conditionne a html[data-anima="on"], pose par le script.
   Sans JavaScript, ou si le script echoue, tout reste visible. */

html[data-anima="on"] [data-anima] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22, .7, .3, 1),
              transform 620ms cubic-bezier(.22, .7, .3, 1);
  will-change: opacity, transform;
}
html[data-anima="on"] [data-anima="izquierda"] { transform: translateX(-22px); }
html[data-anima="on"] [data-anima="escala"] { transform: scale(.965); }
html[data-anima="on"] [data-anima][data-visible="true"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html[data-anima="on"] [data-anima] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---------- Visionneuse ---------- */

.visor {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  padding: clamp(var(--e4), 4vw, var(--e7));
  background: rgba(14, 27, 74, .94);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 220ms ease;
}
.visor[data-abierto="true"] { display: flex; opacity: 1; }
.visor figure { margin: 0; display: grid; gap: var(--e3); justify-items: center; max-width: 100%; }
.visor img {
  max-width: 100%; max-height: 82vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radio); background: var(--superficie);
}
.visor figcaption {
  color: #fff; font-size: 1rem; text-align: center; max-width: 60ch;
}
.visor__boton {
  position: absolute; min-width: 52px; min-height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  transition: background-color var(--transicion);
}
.visor__boton:hover { background: rgba(255, 255, 255, .28); }
/* display: grid ci-dessus l'emporte sur l'attribut hidden du navigateur */
.visor__boton[hidden] { display: none; }
.visor__boton .icono { width: 26px; height: 26px; stroke-width: 2; }
.visor__cerrar { top: var(--e4); right: var(--e4); }
.visor__anterior { left: var(--e3); }
.visor__siguiente { right: var(--e3); }
.visor__contador {
  position: absolute; bottom: var(--e4); left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: .875rem; font-variant-numeric: tabular-nums;
}

/* une image cliquable doit se voir cliquable */
[data-visor] { cursor: zoom-in; }
.cartel img, .galeria__item img, .equipo__foto img { transition: transform 320ms ease; }
.cartel:hover img, .galeria__item:hover img { transform: scale(1.03); }
.cartel, .galeria__item { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .visor { transition: none; }
  .cartel:hover img, .galeria__item:hover img { transform: none; }
}

/* ---------- Videos ---------- */

.videos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--e5);
}
.video {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra);
}
.video__marco {
  display: block; width: 100%;
  /* height: auto est indispensable : sans lui, les attributs width et height
     de la balise l'emportent sur aspect-ratio et la vignette se deforme. */
  height: auto; aspect-ratio: 16 / 9;
  background: var(--azul-900); border: 0; padding: 0; margin: 0;
  object-fit: cover; position: relative; cursor: pointer;
}
video.video__marco { cursor: default; }
.video__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__marco iframe { width: 100%; height: 100%; border: 0; display: block; }

.video__play {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  transition: transform var(--transicion), background-color var(--transicion);
}
.video__play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 28px;
  border-left: 24px solid var(--azul-900);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.video__marco:hover .video__play { transform: scale(1.08); background: #fff; }
.video__marco:focus-visible { outline: 3px solid var(--magenta-600); outline-offset: 3px; }

.video__pie { padding: var(--e5); display: grid; gap: var(--e2); }
.video__pie h3 { margin: 0; }
.video__pie p { margin: 0; color: var(--texto-suave); }
.video__credito { font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .video__marco:hover .video__play { transform: none; }
}

/* ---------- Quienes somos, le recit ---------- */

.equipo__relato {
  /* alignee a gauche comme le titre : centree, la colonne cassait le rythme */
  max-width: 66ch; margin: 0;
  display: grid; gap: var(--e4);
}
.equipo__relato p { margin: 0; max-width: none; }
.equipo__destacado {
  margin: var(--e3) 0; padding: var(--e4) 0 var(--e4) var(--e5);
  border-left: 4px solid var(--verde-500);
  font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.15; color: var(--azul-700);
}
.equipo__firma {
  margin-top: var(--e3); padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  font-weight: 700; color: var(--texto);
}

/* ---------- La barra, apres la course ---------- */

.barra-fiesta {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--e7); align-items: center;
  padding: clamp(var(--e5), 4vw, var(--e7));
  background: var(--azul-900); color: #fff; border-radius: var(--radio);
  position: relative; overflow: hidden;
}
.barra-fiesta::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1.4px, transparent 1.5px);
  background-size: 15px 15px;
  mask-image: linear-gradient(115deg, transparent 55%, #000 100%);
  -webkit-mask-image: linear-gradient(115deg, transparent 55%, #000 100%);
  pointer-events: none;
}
.barra-fiesta > * { position: relative; z-index: 1; }
.barra-fiesta h2 { margin-bottom: var(--e4); }
.barra-fiesta p { color: rgba(255, 255, 255, .88); }
.barra-fiesta .antetitulo { color: #8FE3AB; }
.barra-fiesta__nota {
  font-size: .95rem; color: rgba(255, 255, 255, .7);
  border-top: 1px solid rgba(255, 255, 255, .18); padding-top: var(--e4); margin-bottom: 0;
}

.barra-fiesta__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.barra-fiesta__puntos li {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px; font-weight: 700;
}
.barra-fiesta__puntos .icono { width: 26px; height: 26px; color: #8FE3AB; }

.barra-fiesta__reclamo {
  margin: var(--e5) 0 0; text-align: center; max-width: none;
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--azul-700);
}

@media (max-width: 860px) {
  .barra-fiesta { grid-template-columns: 1fr; gap: var(--e5); }
}

/* Une video mise en avant occupe toute la largeur : celle du colegio vient
   des enfants a qui va l'argent, elle ne se noie pas entre les autres. */
.video--destacado { grid-column: 1 / -1; }
.video--destacado .video__marco { aspect-ratio: 1280 / 646; }
.video--destacado .video__pie { padding: var(--e6) clamp(var(--e5), 4vw, var(--e7)); }
.video--destacado .video__pie h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.video--destacado .video__pie p { font-size: 1.1rem; max-width: 62ch; }

/* ---------- Actuaciones previstas ---------- */

.actuaciones {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.actuacion {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.actuacion:hover, .actuacion:focus-within {
  transform: translateY(-4px); box-shadow: var(--sombra-alta);
}

/* l'affiche dicterait la hauteur de la tuile : on la contraint au carre */
.actuacion__foto {
  display: block; position: relative; aspect-ratio: 1;
  background: var(--superficie-alt); cursor: zoom-in;
}
.actuacion__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.actuacion__texto {
  display: flex; flex-direction: column;
  padding: var(--e4) var(--e4) var(--e5);
}

.actuacion__tipo {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--magenta-600); margin: 0 0 var(--e1);
}

.actuacion__nombre {
  font-family: var(--display); font-size: 1.7rem; line-height: 1.05; letter-spacing: .02em;
  margin: 0;
}

.actuacion__nota { color: var(--texto-suave); font-size: .98rem; line-height: 1.45; margin: var(--e2) 0 0; }

.actuacion__enlace {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin-top: var(--e3); align-self: flex-start;
  font-weight: 600; color: var(--azul-500); text-decoration: none;
}
.actuacion__enlace:hover { text-decoration: underline; }
.actuacion__enlace .icono { width: 18px; height: 18px; transition: transform var(--transicion); }
.actuacion__enlace:hover .icono { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .actuacion, .actuacion__enlace .icono { transition: none; }
  .actuacion:hover, .actuacion:focus-within { transform: none; }
}

/* Un libelle de menu sur deux lignes doublerait la hauteur de la barre. */
.cabecera__nav a:not(.boton) { white-space: nowrap; }

/* ---------- Padrino de la edicion ---------- */

.padrino {
  display: grid; gap: var(--e6);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
}

.padrino__retrato { margin: 0; }
.padrino__retrato img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--radio);
  box-shadow: var(--sombra-alta); cursor: zoom-in;
  transition: transform var(--transicion);
}
.padrino__retrato img:hover,
.padrino__retrato img:focus-visible { transform: scale(1.02); }

.padrino__nombre {
  margin: 0; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: .95;
}

.padrino__credencial {
  margin: var(--e2) 0 var(--e4); color: var(--texto-suave);
  font-weight: 600;
}

.padrino__sorteo {
  display: flex; align-items: flex-start; gap: var(--e3);
  margin: var(--e5) 0 0; padding: var(--e4);
  background: var(--verde-100); border-radius: var(--radio);
  color: var(--verde-700); font-weight: 600; max-width: none;
}
.padrino__sorteo .icono { flex: none; margin-top: 2px; color: var(--verde-700); }

.padrino__enlace {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin-top: var(--e4); font-weight: 600; color: var(--azul-500); text-decoration: none;
}
.padrino__enlace:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .padrino { grid-template-columns: 1fr; gap: var(--e5); justify-items: start; }
  .padrino__retrato { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .padrino__retrato img { transition: none; }
  .padrino__retrato img:hover, .padrino__retrato img:focus-visible { transform: none; }
}

/* ---------- Apres la course ---------- */

.cuenta-atras--pasada { display: block; }
.cuenta-atras__nota { color: rgba(255, 255, 255, .92); margin: var(--e2) 0 0; max-width: 46ch; }

/* ---------- Appel a photos ---------- */

.llamada-fotos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e5);
  margin-top: var(--e6); padding: var(--e5);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.llamada-fotos > .icono {
  flex: none; width: 40px; height: 40px; color: var(--magenta-600);
}
.llamada-fotos > div { flex: 1 1 280px; }
.llamada-fotos__titulo {
  margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1.05; letter-spacing: .02em;
}
.llamada-fotos__texto { margin: var(--e2) 0 0; color: var(--texto-suave); }
.llamada-fotos .boton { flex: none; }

@media (max-width: 560px) {
  .llamada-fotos { padding: var(--e4); }
  .llamada-fotos .boton { width: 100%; }
}

/* Le bouton etait un secondaire discret, perdu sous une grille de soixante
   photos : personne ne voyait qu'il restait sept cents vues derriere. */
.galeria__mas { margin: var(--e6) 0 0; text-align: center; }
.galeria__mas .boton[hidden], .galeria__cuenta[hidden] { display: none; }
.boton--ancho {
  min-width: min(100%, 320px); min-height: 56px;
  font-size: 1.125rem; padding-inline: var(--e6);
}
.boton--ancho .icono { transition: transform var(--transicion); }
.boton--ancho:hover .icono { transform: translateY(2px); }
.galeria__cuenta {
  display: block; margin-top: var(--e3);
  color: var(--texto-suave); font-size: .95rem;
}
@media (prefers-reduced-motion: reduce) { .boton--ancho .icono { transition: none; } }