/* ============================================================
   RAIDARAN ADVENTURE RACE · ESTILOS PRINCIPALES
   Lee los tokens de tokens.css. Mobile-first + responsive.
   ============================================================ */

/* ---------- ANIMACIÓN DE ENTRADA DE TÍTULOS (por palabra, de abajo hacia arriba) ---------- */
.reveal-word {
  display: inline-block; overflow: hidden; vertical-align: top;
  /* pequeño respiro para que no se recorten descendentes/laterales con interletrado negativo */
  padding: 0.08em 0.04em; margin: -0.08em -0.04em;
}
.reveal-word__inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.reveal-word__inner.visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-word__inner { transform: none; transition: none; }
}

/* ---------- ACABADO CHAFLÁN (esquinas sup-dcha e inf-izq, estilo Chakra Petch) ---------- */
:root {
  --chaflan: 50px;          /* corte para las casillas del bento */
  --chaflan-img: 50px;      /* corte para las imágenes de contenido */
  --chaflan-btn: 11px;      /* corte más pequeño para botones */
  --bw-btn: 1.5px;          /* grosor del trazo del botón fantasma */
  --recorte: polygon(0 0, calc(100% - var(--chaflan)) 0, 100% var(--chaflan), 100% 100%, var(--chaflan) 100%, 0 calc(100% - var(--chaflan)));
  /* Marco achaflanado (perímetro exterior + hueco interior) para el trazo del botón 2.
     El interior queda hueco (transparente) y el trazo recorre también las diagonales. */
  --marco-btn: polygon(
    0 0,
    calc(100% - var(--chaflan-btn)) 0,
    100% var(--chaflan-btn),
    100% 100%,
    var(--chaflan-btn) 100%,
    0 calc(100% - var(--chaflan-btn)),
    0 0,
    var(--bw-btn) var(--bw-btn),
    var(--bw-btn) calc(100% - var(--bw-btn) - var(--chaflan-btn)),
    calc(var(--bw-btn) + var(--chaflan-btn)) calc(100% - var(--bw-btn)),
    calc(100% - var(--bw-btn)) calc(100% - var(--bw-btn)),
    calc(100% - var(--bw-btn)) calc(var(--bw-btn) + var(--chaflan-btn)),
    calc(100% - var(--bw-btn) - var(--chaflan-btn)) var(--bw-btn),
    var(--bw-btn) var(--bw-btn)
  );
  --recorte-img: polygon(0 0, calc(100% - var(--chaflan-img)) 0, 100% var(--chaflan-img), 100% 100%, var(--chaflan-img) 100%, 0 calc(100% - var(--chaflan-img)));
  --recorte-btn: polygon(0 0, calc(100% - var(--chaflan-btn)) 0, 100% var(--chaflan-btn), 100% 100%, var(--chaflan-btn) 100%, 0 calc(100% - var(--chaflan-btn)));
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, picture, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

body {
  font-family: var(--fuente-cuerpo);
  font-weight: var(--peso-cuerpo);
  font-size: var(--fs-cuerpo);
  line-height: var(--interlinea-cuerpo);
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- TIPOGRAFÍA ---------- */
h1, h2, h3, h4, .titulo {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-titulo);
}
/* Sistema tipográfico global */
h2 { font-size: 80px; letter-spacing: -6px; line-height: 1; }
h3 { font-size: 64px; letter-spacing: -4px; line-height: 1.02; }
p  { font-size: 20px; letter-spacing: -1px; }   /* cuerpo: Poppins regular 20px, -1px */
.mayus { text-transform: uppercase; letter-spacing: var(--tracking-mayus); }

/* ---------- HELPERS DE LAYOUT ---------- */
.contenedor { width: 85%; max-width: none; margin-inline: auto; padding-inline: 0; }   /* todas las secciones al 85% */
.seccion { padding-block: var(--sp-9); }
.seccion--compacta { padding-block: var(--sp-7); }
.fondo-oscuro { background: var(--color-fondo-oscuro); color: var(--color-texto-inverso); }
.fondo-cuadricula { background: var(--negro) url("../img/patron-cuadricula.png") center/cover; }
/* Fondo (del banner animado a Val d'Aran) */
.fondo-textura { background: #f3f3f3; }
.centro { text-align: center; }
.rojo { color: var(--color-primario-vivo); }
.oculto { display: none !important; }

/* Título de sección estilo Raidaran (usa el tamaño/interletreado global de H2) */
.titulo-seccion {
  text-transform: uppercase;
  color: var(--color-primario-vivo);
}
.titulo-seccion--claro { color: var(--color-texto-inverso); }
.subtitulo-seccion {
  max-width: 46ch;
  color: var(--color-texto-suave);
  margin-top: var(--sp-3);
}
.fondo-oscuro .subtitulo-seccion { color: var(--blanco-o20); }

/* ---------- BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.7em 1.4em;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  font-size: 16px;
  border-radius: 0;
  clip-path: var(--recorte-btn);   /* chaflán sup-dcha + inf-izq */
  transition: transform var(--transicion), background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.btn:hover { transform: translateY(-2px); }
/* Botón rojo: degradado lineal de arriba (#530F10) hacia abajo (#E91D29) */
.btn--primario { background: linear-gradient(180deg, #530F10 0%, #E91D29 100%); color: #fff; }
.btn--primario:hover { background: #f3f3f3; color: #530F10; }
/* Botón fantasma: en hover pasa a fondo claro #f3f3f3 con texto #530F10 */
/* El trazo se dibuja como un anillo (::before + mask) que sí sigue el chaflán,
   ya que un border normal quedaría cortado por el clip-path en las esquinas. */
.btn--fantasma { border: 0; color: #fff; position: relative; }
.btn--fantasma::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #fff;                       /* color del trazo */
  clip-path: var(--marco-btn);            /* marco achaflanado: recorre también las diagonales */
}
.btn--fantasma:hover { background: #f3f3f3f3; color: #530F10; }
.btn--fantasma:hover::before { background: #f3f3f3f3; }   /* el trazo se funde con el fondo claro */
.btn--oscuro { background: var(--negro); color: #fff; }

/* ============================================================
   HEADER / NAVEGACIÓN
   ============================================================ */
/* Barra al 90% de ancho, centrada. Logo a la izquierda, menú en el CENTRO
   (posicionado en absoluto para quedar justo en la mitad), redes a la derecha. */
/* El fondo de la barra va de extremo a extremo (100%);
   el contenido queda dentro de un contenedor centrado al 90%. */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  transition: transform 320ms ease, background var(--transicion);
}
.header.solido { background: var(--negro); box-shadow: var(--sombra-suave); }
.header.oculta { transform: translateY(-100%); }   /* se esconde al bajar */
.header__inner {
  position: relative;
  width: 85%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: 10px 0;   /* relleno superior e inferior 10px */
}
.header__logo { display: flex; align-items: center; gap: var(--sp-2); }
.header__logo img { height: 65px; width: auto; }   /* +30% y luego +5% */
.nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
}
.nav__lista { display: flex; gap: var(--sp-6); }
.nav__lista a {
  color: #fff;
  font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: 14px;
  text-transform: uppercase;
  display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom;
  transition: color var(--transicion);
}
.nav__lista a:hover, .nav__lista a[aria-current="page"] { color: var(--color-primario-vivo); }
.header__social { display: flex; align-items: center; gap: var(--sp-4); color: #fff; }
.header__social a { display: inline-flex; opacity: .9; transition: opacity var(--transicion), color var(--transicion); }
.header__social a:hover { opacity: 1; color: var(--color-primario-vivo); }
.header__social svg { width: 29px; height: 29px; display: block; }   /* +30% */

/* Botón hamburguesa (móvil) */
.hamburguesa { display: none; flex-direction: column; gap: 5px; width: 30px; z-index: 110; }
.hamburguesa span { height: 3px; width: 100%; background: #fff; border-radius: 2px; transition: var(--transicion); }
.hamburguesa.activa span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburguesa.activa span:nth-child(2) { opacity: 0; }
.hamburguesa.activa span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
  padding: var(--sp-6) var(--sp-5);   /* simétrico: el bloque queda en el centro del viewport */
}
/* Espacio de scroll: primero el hero (fijo) se oscurece del todo a negro y
   solo entonces .post-hero sube desde abajo, para que el empalme sea negro
   sobre negro (sin línea de corte). Alto = tramo de oscurecido + 1 pantalla. */
.hero-espaciador { height: 130vh; }
/* Todo lo que va tras el hero: sube por encima del hero fijo con su propio fondo. */
.post-hero { position: relative; z-index: 1; background: var(--color-fondo); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Máscara de degradado sobre la foto: negro arriba → transparente en el centro
   (se ve la imagen) → negro abajo. Suave y limpio. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    #000000 0%,
    rgba(0,0,0,0) 32%,
    rgba(0,0,0,0) 68%,
    #000000 100%);
}
/* Capa que oscurece el hero a negro con el scroll: al salir el hero queda en
   negro y enlaza con la sección negra siguiente (efecto de "fondo a negro").
   Va dentro del hero (overflow:hidden), así se desplaza con él y no afecta
   a las secciones claras de más abajo. La opacidad la controla el JS. */
.hero__oscurecer {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: #000; opacity: 0; will-change: opacity;
}
/* Imagen ARWS · European Championship, encima del título (mitad del viewport de ancho) */
.hero__arws-euro {
  display: block; width: 15vw; height: auto; max-width: 216px;   /* −50% respecto al 30vw anterior */
  margin: 0 auto var(--sp-4);
}
/* Fila de logos del hero: ARWS + Val d'Aran a la misma altura */
.hero__logos { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3.5vw, 40px); margin: 0 auto var(--sp-4); flex-wrap: wrap; }
.hero__logos .hero__arws-euro, .hero__logos .hero__logo-web { height: clamp(55px, 9.45vw, 97px); width: auto; max-width: none; margin: 0; display: block; }
.hero__tag {
  display: inline-block;
  font-family: var(--fuente-titulo); font-weight: var(--peso-titulo);
  font-size: var(--fs-peque);
  letter-spacing: .25em; text-transform: uppercase; margin-top: var(--sp-3);
}
.hero__titulo {
  font-size: clamp(2.375rem, 11.4vw, 114px);   /* −5% para equilibrar con los logos */
  letter-spacing: -5px;
  text-transform: uppercase; line-height: .95;
}
.hero__fecha {
  display: inline-block; margin-top: var(--sp-4);
  color: #fff;
  font-family: var(--fuente-cuerpo);
  font-weight: var(--peso-semi); font-size: 30px;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.hero__cta { display: inline-flex; flex-direction: column; align-items: stretch; margin-top: var(--sp-6); }
.hero__acciones { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
/* Carrusel de palabras (ancho = el de los dos botones) */
.hero__carrusel {
  position: relative; overflow: hidden; width: 100%; height: 24px; margin-top: var(--sp-4);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.hero__carrusel-pista { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; width: max-content; animation: heroMarquee 18s linear infinite; }
.hero__carrusel-pista > span { margin-right: 14px; flex: 0 0 auto; }
.hero__carrusel-pista .palabra { font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo); font-size: 16px; color: #fff; text-transform: lowercase; white-space: nowrap; }
.hero__carrusel-pista .rombo { width: 11px; height: 11px; background: #FE0000; transform: rotate(45deg); }
@keyframes heroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero__carrusel-pista { animation: none; } }
.hero__arws { position: absolute; top: 90px; right: var(--sp-5); width: 90px; opacity: .95; }

/* ============================================================
   BARRA DE ESTADÍSTICAS
   ============================================================ */
.stats {
  background: var(--negro); color: #fff;
  padding: 100px var(--sp-5);   /* 100px arriba y abajo */
}
.stats > .contenedor { max-width: none; padding: 0; }
/* Fila con el mismo ancho que el texto que le sigue (1000px), datos repartidos. */
.stats__grid {
  display: flex; justify-content: space-between; align-items: center; gap: 50px;
  width: min(1000px, 88vw); margin-inline: auto;
}
.stats__grid > div {
  text-align: left;
  border-left: 2px solid #E91D29;   /* borde continuo rojo a la izquierda */
  padding-left: 14px;               /* separación de números/títulos respecto al borde */
}
.stat__num {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 75px; letter-spacing: -5px; line-height: 1;
  color: #E91D29;
}
.stat__label {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 20px; letter-spacing: -0.4px;
  text-transform: uppercase; color: #fff; margin-top: 8px;
}

/* ============================================================
   INTRO
   ============================================================ */
/* INTRO: bloque de texto centrado en el viewport (vertical y horizontal),
   texto alineado a la izquierda, con revelado transparente → blanco al hacer scroll. */
.intro {
  background: #000000; color: #fff;
  display: flex; justify-content: center;
  /* arriba 0 (el hueco de 100px lo da el padding-bottom de .stats); abajo 100px hasta el vídeo */
  padding: 0 var(--sp-5) 100px;
}
.intro__texto {
  max-width: 1000px; text-align: left;
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 40px; line-height: 50px; letter-spacing: -1px;
}
.intro__texto .palabra { color: rgba(255,255,255,.15); transition: color 120ms linear; }

/* VÍDEO VIÑETA: a pantalla completa sobre fondo negro, con máscara radial
   (centro visible, extremos laterales/superior/inferior fundidos a negro). */
.video-vineta { background: #000000; }
.video-vineta video {
  width: 100%; height: 100vh; object-fit: cover; display: block;
  -webkit-mask-image: radial-gradient(ellipse 85% 58% at center, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 85% 58% at center, #000 30%, transparent 80%);
}

/* ============================================================
   BLOQUE "UN DESAFÍO" (oscuro, con tarjetas)
   ============================================================ */
/* Sección centrada vertical y horizontalmente en el viewport; ancho 85%. */
.desafio {
  position: relative; background: #000000;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) 0 100px;   /* 100px de espacio inferior */
}
.desafio > .contenedor { max-width: none; width: 85%; padding: 0; }
.desafio__titulo { font-size: 80px; letter-spacing: -6px; line-height: 1; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-6); }

/* ---- BENTO GRID: 3 columnas iguales (33,33%) × 2 filas (50%).
   Las 4 casillas de la izquierda ocupan 2 columnas × 2 filas;
   la casilla derecha ocupa 1 columna a toda la altura. ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: clamp(544px, 70vh, 720px);   /* −20% respecto al alto anterior */
}
.bento-7       { grid-column: 1; grid-row: 1; }
.bento-rafting { grid-column: 1; grid-row: 2; }
.bento-bikers  { grid-column: 2; grid-row: 1; }
.bento-logos   { grid-column: 2; grid-row: 2; }
.bento-mapa    { grid-column: 3; grid-row: 1 / span 2; }

/* Tarjeta rectangular (borde normal, sin recortes) */
.bento-card {
  position: relative; overflow: hidden;
  background: var(--gris-o40);
  border-radius: 0;
  clip-path: var(--recorte);   /* chaflán sup-dcha + inf-izq */
}
.bento-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- CHAFLÁN EN IMÁGENES DE CONTENIDO ---------- */
/* Todas las imágenes reciben el chaflán (30px); las esquinas sin corte quedan rectas a 90°. */
img { clip-path: var(--recorte-img); border-radius: 0 !important; }
/* ...excepto logos, íconos de UI, gráficos transparentes y las imágenes
   que ya viven dentro de una casilla bento (la casilla ya recorta). */
.header__logo img,
.footer__logo-img,
.arws-popup__logos img,
.hero__media img,
.bento-card > img,
.bento-7 img,
.bento__logos img,
.bento-mapa img,
.hero__arws-euro,
.hero__logo-web,
.sponsors__img,
.sponsors__logo img { clip-path: none; }
/* Casillas rojas: degradado lineal vertical negro → rojo */
.bento-card--rojo   { background: linear-gradient(180deg, #000000 0%, #FE0000 100%); }
.bento-card--oscuro { background: #101010; }

/* Textos del bento: Poppins regular 20px, interletreado -2px */
.bento__texto,
.bento-logos p,
.bento-mapa p {
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 20px; letter-spacing: -2px; line-height: 1.2; color: #fff;
}

/* Casilla del 7: texto arriba a la izquierda; el 7 grande pegado a la esquina inferior derecha */
.bento-7 { display: block; text-align: left; padding: var(--sp-5); }
.bento-7 .bento__texto { position: relative; z-index: 1; margin: 0; max-width: 100%; text-align: left; letter-spacing: -1px; }
.bento-7 img { position: absolute; right: 0; bottom: 0; width: auto; height: 66%; max-width: 64%; object-fit: contain; object-position: bottom right; margin: 0; }

/* Casilla de logos: texto arriba-izquierda + logos centrados debajo */
.bento-logos { display: flex; flex-direction: column; padding: var(--sp-5); }
.bento-logos p { flex: 0 0 auto; text-align: left; margin: 0; padding-top: var(--sp-4); }   /* título un poco más abajo */
.bento__logos { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; flex: 1 1 auto; min-height: 0; }
.bento__logos img { object-fit: contain; height: auto; max-height: 100%; filter: brightness(0) invert(1); }   /* max-height evita recorte inferior */
.bento__logos img:first-child { flex: 0 0 67.5%; width: 67.5%; }   /* logo 1 (−10%) */
.bento__logos img:last-child  { flex: 0 0 25%; width: 25%; }   /* logo 2 = 25% del ancho */

/* Casilla del mapa (alta): texto dentro, arriba (mismo estilo que la grilla 1) */
.bento-mapa { display: flex; flex-direction: column; padding: var(--sp-5); }
.bento-mapa p { font-weight: var(--peso-cuerpo); letter-spacing: -1px; margin: 0 0 var(--sp-3); }
/* Mapa agrandado y recortado, a sangre e anclado al fondo de la casilla
   (el texto de arriba conserva su posición porque la imagen sale del flujo). */
.bento-mapa img {
  position: absolute; z-index: 0;
  left: 0; bottom: 0;
  width: 100%; height: 72%; flex: none; min-height: 0;
  object-fit: contain; object-position: center bottom;   /* mapa completo, sin recorte */
}
.bento-mapa p { position: relative; z-index: 1; }

/* ---------- ANIMACIÓN DE ENTRADA DEL BENTO ---------- */
/* El "7" crece desde la esquina inferior derecha (siguiendo su sombra diagonal)
   hasta su tamaño actual. La casilla tiene overflow:hidden, así que nunca
   sobresale de los márgenes del bento. */
.bento-7 img {
  transform: scale(0.12);
  transform-origin: bottom right;   /* nace desde la esquina inferior derecha */
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.bento-7 img.animar { transform: scale(1); opacity: 1; }
/* Las casillas que son imágenes entran con un fade in. */
.bento-rafting, .bento-bikers, .bento-mapa { opacity: 0; transition: opacity 0.7s ease; }
.bento-rafting.animar, .bento-bikers.animar, .bento-mapa.animar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bento-7 img { transform: none; opacity: 1; }
  .bento-rafting, .bento-bikers, .bento-mapa { opacity: 1; }
}

/* ============================================================
   BANNER ANIMADO (imágenes ← + texto contorneado →)
   Fondo: negro arriba, blanco abajo (transición a la mitad,
   que conecta la sección negra anterior con la blanca siguiente).
   ============================================================ */
.banner {
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom, #000000 0 50%, #f3f3f3 50% 100%);
  padding-block: 150px;
}
.banner__imgs-wrap { will-change: transform; }
.banner__imgs { display: flex; width: max-content; }
.banner__imgs img {
  width: 377px; height: 251px; object-fit: cover;   /* +30% (290×193) */
  margin-right: 20px; flex: 0 0 auto; display: block;
}
.banner__text-wrap {
  margin-top: 30px; z-index: 2;   /* texto DEBAJO de las imágenes, 30px de separación */
  display: flex; pointer-events: none;
  will-change: transform;
}
.banner__text { display: flex; width: max-content; }
.banner__text span {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 117px;   /* +30% (90px) */
  line-height: 1; text-transform: uppercase; white-space: nowrap; padding-right: 78px;
  color: transparent;
  -webkit-text-stroke: 2.5px #FE0000; text-stroke: 2.5px #FE0000;
}

/* ============================================================
   MARQUEE (cinta que se desplaza)
   ============================================================ */
.marquee { overflow: hidden; white-space: nowrap; padding-block: var(--sp-4); }
.marquee--rojo { background: var(--color-primario-vivo); color: #fff; }
.marquee--negro { background: var(--negro); color: #fff; }
.marquee__pista { display: inline-flex; gap: var(--sp-5); align-items: center; animation: desplazar 30s linear infinite; }
.marquee__pista span {
  font-family: var(--fuente-titulo); font-weight: 700; font-size: clamp(1.25rem, 3vw, 2rem);
  text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: var(--sp-5);
}
.marquee__rombo { width: 22px; height: 22px; }
@keyframes desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__pista { animation: none; } }

/* Tira de fotos */
.tira-fotos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tira-fotos img { width: 100%; height: 130px; object-fit: cover; }

/* ============================================================
   CATEGORÍAS (acordeón)
   ============================================================ */
.categorias__cab { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.acordeon { border-top: 1px solid var(--color-borde); }
.acordeon__item { border-bottom: 1px solid var(--color-borde); border-radius: var(--radio); transition: background 450ms ease, border-color 450ms ease; }
/* Hover (casilla cerrada): fondo rojo + texto blanco */
.acordeon__item:not([aria-expanded="true"]):hover { background: var(--color-primario-vivo); border-color: transparent; }
.acordeon__item:not([aria-expanded="true"]):hover .acordeon__cabecera h3,
.acordeon__item:not([aria-expanded="true"]):hover .acordeon__icono { color: #fff; }
/* Casilla abierta: fondo transparente */
.acordeon__item[aria-expanded="true"] { background: transparent; }
.acordeon__cabecera {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  min-height: 150px; padding: 0 var(--sp-5); text-align: left; cursor: pointer;   /* cerrado: 177 − 15% */
  transition: min-height var(--transicion);
}
/* Al abrir, la cabecera recupera el alto normal (118px) */
.acordeon__item.abierta .acordeon__cabecera { min-height: 118px; }
.acordeon__cabecera h3 { font-size: 50px; line-height: 1; text-transform: uppercase; color: var(--color-primario-vivo); }
.acordeon__icono { font-size: 1.5rem; transition: transform var(--transicion); color: var(--color-primario-vivo); }
.acordeon__item[aria-expanded="true"] .acordeon__icono { transform: rotate(180deg); }
.acordeon__cuerpo { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); padding: 0 var(--sp-5); max-height: 0; overflow: hidden; transition: max-height 1100ms cubic-bezier(.4,0,.2,1), padding 1100ms cubic-bezier(.4,0,.2,1); }
.acordeon__cuerpo.abierto { max-height: 1200px; padding: 0 var(--sp-5) var(--sp-6); margin-bottom: 50px; }
.acordeon__cuerpo ul { display: grid; gap: var(--sp-2); }
.acordeon__cuerpo li { position: relative; padding-left: 1.2em; font-size: 20px; letter-spacing: -1px; }
.acordeon__cuerpo li::before { content: "▪"; position: absolute; left: 0; color: var(--color-primario-vivo); }
.acordeon__cuerpo img { border-radius: var(--radio); height: 100%; object-fit: cover; }
/* La imagen entra deslizándose de abajo hacia arriba al abrir */
.acordeon__cuerpo.abierto img { animation: subirImg 720ms cubic-bezier(.4,0,.2,1) 480ms both; }
@keyframes subirImg { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.acordeon__precios { margin-top: var(--sp-4); font-weight: var(--peso-semi); }
.acordeon__btn { margin-top: var(--sp-5); align-self: flex-start; }

/* ============================================================
   VAL D'ARAN
   ============================================================ */
.valdaran { text-align: center; padding-top: 67px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.valdaran__grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--sp-5); align-items: center; margin-top: var(--sp-7); text-align: left; }
.valdaran__grid figure img { border-radius: var(--radio-grande); width: 100%; }
.valdaran__etq { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--fs-h3); }

/* ---- Galería "focus" VERTICAL con scroll (sticky) ---- */
.vg-sec {
  position: relative; height: 340vh; margin-bottom: 20px;   /* 20px entre el final de la galería y el botón */
  --vg-mitad: 25vw;    /* media anchura de la imagen central (50vw/2) */
  --vg-gap: 60px;      /* separación de los textos respecto a la imagen (igual a ambos lados) */
}
.vg-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Cabecera (título + cuerpo) fija arriba, dentro del sticky */
.vg-cab { position: absolute; top: 110px; left: 7.5%; right: 7.5%; text-align: center; z-index: 60; }
.vg-titulo {
  position: absolute; right: calc(50% + var(--vg-mitad) + var(--vg-gap)); left: auto;
  top: 0; transform: translateY(-50%);   /* top real lo fija el JS (centro de la imagen) */
  font-size: 35px; letter-spacing: -1px; line-height: 1.05; text-transform: uppercase;
  color: #000000; text-align: left; max-width: 15vw; z-index: 55; margin: 0;
}
.vg-sub {
  position: absolute; left: calc(50% + var(--vg-mitad) + var(--vg-gap)); right: auto;
  top: 0; transform: translateY(-50%);   /* top real lo fija el JS */
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 20px; letter-spacing: -1px; color: var(--color-texto);
  text-align: left; max-width: 15vw; z-index: 55; margin: 0;
}
.vg-pila { position: absolute; inset: 0; }
.vg-item { position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); will-change: transform, top; }
.vg-item img {
  width: 50vw; max-width: 900px; aspect-ratio: 3 / 2; object-fit: cover;   /* carrusel ≈85% de la vista */
  border-radius: 16px; display: block;
}
/* Botón "conocer Val d'Aran" tras la galería animada */
.valdaran-cta { text-align: center; padding-bottom: 90px; }

/* ============================================================
   BLOG / "TODO SOBRE EL RAIDARAN"
   ============================================================ */
/* Fondo (mapa de Val d'Aran) que rellena todo; el negro un 10% más transparente */
.posts { position: relative; background: #000; color: #fff; overflow: hidden; padding: 100px 0 0; }   /* sin hueco inferior: la tarjeta funde con sponsors */
.posts::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../img/fondo-blog-2.png") center center / cover no-repeat;
  filter: brightness(1.1);   /* el negro ~10% más transparente → se ve más el mapa */
}
.posts > .contenedor { position: relative; z-index: 1; }
.posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: var(--sp-7); }   /* filas y columnas: 30px */

/* Casilla de post: imagen 342×228 arriba, título + flecha debajo */
.post-card {
  display: flex; flex-direction: column; text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color var(--transicion);
}
.post-card img { width: 100%; height: 301px; object-fit: cover; border-radius: var(--radio-grande); display: block; }   /* +20% (antes 251) */
.post-card__cuerpo { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: 16px 0 20px; }
.post-card__titulo { font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase; font-size: var(--fs-h3); color: #fff; }
.post-card__resumen { color: var(--blanco-o20); font-size: var(--fs-peque); margin-top: 4px; }
.post-card__flecha {
  background: var(--color-primario-vivo); color: #fff; width: 34px; height: 34px;
  border-radius: var(--radio); display: grid; place-items: center; flex: 0 0 auto;
  transition: background var(--transicion), color var(--transicion);
}
/* Hover: flecha con fondo blanco + rojo, y borde inferior rojo en la casilla */
.post-card:hover { border-bottom-color: var(--color-primario-vivo); }
.post-card:hover .post-card__flecha { background: #ffffff; color: var(--color-primario-vivo); }

/* CTA staff "Vive el Raidaran desde dentro": tarjeta blanca al 75% sobre el mapa */
.vive-card {
  width: 100%; max-width: none; margin: 100px auto 0;   /* mismo ancho que las demás secciones (85% de la vista) */
  background: #fff; padding: 10px 10px 0;    /* marco blanco 10px arriba y lados */
  border-radius: 0;   /* bordes rectos a 90° */
}
.vive-card > img {
  width: 100%; aspect-ratio: 2.5 / 1; object-fit: cover; object-position: center;
  display: block; border-radius: 0; clip-path: none;   /* tarjeta de staff sin chaflán, esquinas rectas */
}
.vive-card__texto { text-align: center; padding: 32px 0 46px; }   /* zona blanca inferior (más grande) */
.vive-card__texto .titulo-seccion { color: var(--color-primario-vivo); }
/* Cuerpo del CTA al 90% del ancho de la tarjeta (antes limitado a 46ch).
   +18px compensa el marco blanco fijo de 10px por lado de la tarjeta. */
.vive-card__texto .subtitulo-seccion { color: var(--color-texto-suave); margin: 22px auto; max-width: calc(90% + 18px); }

/* ============================================================
   VIVE EL RAIDARAN (imagen + texto)
   ============================================================ */
.vive { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.vive__imagen img { width: 100%; border-radius: var(--radio-grande); aspect-ratio: 21/9; object-fit: cover; }

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsors { background: #ffffff; color: var(--color-texto); padding: 125px 0; }   /* +25px (antes 100) arriba/abajo */
.sponsors .titulo-seccion { color: var(--color-primario-vivo); }   /* título en rojo */
.sponsors__img { width: 100%; max-width: none; height: auto; display: block; margin: 60px auto 0; }   /* al 85%; +espacio con el título */

/* Grilla de patrocinadores (4×4). Líneas 1px #BFBFBF sin duplicar:
   el contenedor dibuja arriba+izquierda y cada casilla derecha+abajo. */
.sponsors__grid {
  width: 85%; margin: 60px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: #BFBFBF;        /* solo líneas internas 1px; sin bordes exteriores */
}
.sponsors__logo {
  background: #fff;
  aspect-ratio: 15 / 8;                 /* box ~20% más baja */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(13px, 1.9vw, 27px);   /* espacio interior: ningún logo toca los bordes */
}
.sponsors__logo img {
  max-width: 80%; max-height: 80%; width: auto; height: auto;   /* logos ~20% más pequeños */
  object-fit: contain;                 /* logo completo, proporción original, sin deformar */
  filter: grayscale(1); opacity: .5;   /* estado normal: B/N al 50% */
  transition: filter var(--transicion), opacity var(--transicion);
}
.sponsors__logo:hover img { filter: grayscale(0); opacity: 1; }   /* hover: color + 100%, solo ese logo */
@media (prefers-reduced-motion: reduce) { .sponsors__logo img { transition: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative; min-height: 100vh; overflow: hidden;
  background: #111 url("../img/fondo-footer.png") center / cover no-repeat;
  color: #fff; padding-top: var(--sp-9);
}
/* Degradado negro (abajo) → transparente (arriba) para que RAIDARAN se lea */
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #000000 0%, rgba(0,0,0,.85) 18%, rgba(0,0,0,0) 58%);
}
/* Menús + palabra RAIDARAN, anclados abajo a la izquierda */
.footer__contenido { position: absolute; left: 40px; bottom: 274px; z-index: 1; }   /* rejilla de menús, encima de la palabra */
.footer__grid { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.footer h4 { font-family: var(--fuente-titulo); font-weight: 700; font-size: 16px; letter-spacing: 0; text-transform: none; color: #fff; margin-bottom: var(--sp-3); }
.footer__grid li { margin-bottom: var(--sp-2); }
.footer__grid li, .footer__grid a { font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo); font-size: 14px; letter-spacing: 0; color: rgba(255,255,255,.77); }
.footer a:hover { color: var(--color-primario-vivo); }
/* Iconos sociales en la columna de Contacto */
.footer__social { display: flex; gap: 14px; margin-top: var(--sp-3); }
.footer__social a { color: rgba(255,255,255,.77); transition: color var(--transicion); }
.footer__social svg { width: 22px; height: 22px; display: block; }
.footer__social a:hover { color: var(--color-primario-vivo); }
.footer__marca {
  position: absolute; left: 40px; bottom: 64px; z-index: 1;   /* palabra anclada abajo-izquierda */
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 200px; line-height: .8; letter-spacing: -8px; text-transform: uppercase;
  color: rgba(255,255,255,.57);
  margin: 0;
}
/* Logo en la esquina inferior derecha, alineado con la palabra */
.footer__logo-img { position: absolute; right: 40px; bottom: 64px; height: 160px; width: auto; z-index: 1; }
/* Legal a lo ancho, en la parte más baja */
.footer__legal { position: absolute; left: 40px; right: 40px; bottom: 20px; z-index: 1; display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-peque); color: #fff; }
.footer__legal-links { display: flex; gap: var(--sp-6); }

/* ============================================================
   PÁGINAS INTERIORES / BLOG (cabecera común)
   ============================================================ */
.pagina-cab { padding: calc(var(--sp-10) + 40px) 0 var(--sp-7); background: var(--negro); color: #fff; text-align: center; }
.pagina-cab h1 { font-size: var(--fs-h1); text-transform: uppercase; color: var(--color-primario-vivo); }
.pagina-cab .ruta { font-size: var(--fs-peque); color: var(--blanco-o20); margin-top: var(--sp-2); }
.articulo { max-width: 760px; margin-inline: auto; padding-block: var(--sp-8); }
.articulo img { margin-block: var(--sp-5); }
/* Títulos del artículo: Chakra Petch bold, mayúsculas (regla de títulos del sitio). */
.articulo h2 {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -1.5px; line-height: 1.05;
  text-transform: uppercase; color: var(--color-texto);
  margin: var(--sp-7) 0 var(--sp-3);
}
.articulo h3 {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -1px; line-height: 1.1;
  text-transform: uppercase; color: var(--color-texto);
  margin: var(--sp-5) 0 var(--sp-2);
}
/* Cuerpo del artículo: Poppins regular (regla de cuerpo del sitio). */
.articulo p {
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 19px; line-height: 1.7; letter-spacing: -0.4px; color: var(--color-texto);
  margin-bottom: var(--sp-4);
}
.articulo strong { font-weight: 600; }
.articulo ul { list-style: disc; padding-left: 1.4em; margin-bottom: var(--sp-4); }
.articulo li {
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 19px; line-height: 1.6; letter-spacing: -0.4px; margin-bottom: var(--sp-2);
}
.articulo__meta { color: var(--color-texto-suave); font-size: var(--fs-peque); margin-bottom: var(--sp-4); }

/* Botón "Ver más noticias" bajo los posts de la home */
.posts__mas { text-align: center; margin-top: var(--sp-6); }
/* Fila de "más noticias" al final de cada artículo */
.posts--relacionados { padding: 80px 0 100px; }
.blog-index__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .posts__grid, .blog-index__grid { grid-template-columns: repeat(2, 1fr); }
  .sponsors__grid { grid-template-columns: repeat(4, 1fr); }
  .tira-fotos { grid-template-columns: repeat(3, 1fr); }
  .valdaran__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .stats__grid { flex-wrap: wrap; gap: var(--sp-5); }
  .stats__grid > div { flex: 1 1 40%; }
  .stat__num { font-size: 52px; letter-spacing: -3px; }
  .stat__label { font-size: 16px; }
  .intro__texto { font-size: 24px; line-height: 32px; }
  .posts__grid, .blog-index__grid { grid-template-columns: 1fr; }
  .sponsors__grid { grid-template-columns: repeat(2, 1fr); }   /* 4→2 cols: 16 casillas en filas completas */
  .desafio__titulo { font-size: 44px; letter-spacing: -2px; }
  .desafio > .contenedor { width: 90%; }
  .bento { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .bento-7, .bento-rafting, .bento-bikers, .bento-logos, .bento-mapa { grid-column: 1; grid-row: auto; }
  .bento-card { clip-path: none; border-radius: var(--radio); min-height: 220px; }
  .acordeon__cuerpo { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__marca { font-size: 64px; letter-spacing: -2px; }
  .hero__arws { width: 64px; top: 76px; }
  .hero__titulo { letter-spacing: -2px; }
  .tira-fotos { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Popup ARWS (esquina inferior derecha) ---- */
.arws-popup {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 205px; height: 112px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px;
  border-radius: 0;   /* bordes rectos a 90° */
  background: linear-gradient(180deg, rgba(83,15,16,.70) 0%, rgba(233,29,41,.70) 100%);   /* degradado de los botones al 70% de opacidad */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
/* Se oculta al llegar al footer para no pisarse con el logo. */
.arws-popup.oculto {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
}
.arws-popup__logos {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  height: 42px;
  background: #fff; border-radius: 0;   /* recuadro interior recto a 90° */
  padding: 6px 11px;
}
.arws-popup__logos img {
  max-height: 100%; max-width: calc(50% - 6px); width: auto; object-fit: contain;
}
.arws-popup__txt {
  display: flex; flex-direction: column; justify-content: center; flex: 1;
  font-family: var(--fuente-titulo); font-weight: 700; color: #fff;
  font-size: 16px; line-height: 1.18; letter-spacing: -0.3px;
}
/* Popup patrocinador · esquina inferior izquierda (un solo logo, grande pero con el texto dentro) */
.arws-popup--left { left: 16px; right: auto; }
.arws-popup--left .arws-popup__logos { flex: 0 0 auto; height: 62px; min-height: 0; }
.arws-popup--left .arws-popup__logos img { max-width: 100%; max-height: 100%; object-fit: contain; }
.arws-popup--left .arws-popup__txt { flex: 0 0 auto; }

/* ============================================================
   PÁGINA DE INSCRIPCIONES
   ============================================================ */
/* En páginas internas el header va siempre sólido (sobre fondo claro). */
body.interna { background: var(--color-fondo); }
body.interna .header { background: var(--negro); box-shadow: var(--sombra-suave); }

/* ---- Cabecera: fecha + título + imagen grande ---- */
.insc-hero { padding-top: 120px; padding-bottom: var(--sp-7); }
.insc__fecha {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--color-texto); margin-bottom: var(--sp-3);
}
.insc__titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 80px; letter-spacing: -6px; line-height: 1;
  text-transform: uppercase; color: var(--color-texto);
  margin-bottom: var(--sp-6);
}
.insc__titulo .rojo { color: var(--color-primario-vivo); }
/* Reserva del hero a TODO el ancho del viewport (rompe la regla de ancho, como el banner). */
.insc-hero__slot { width: 100%; height: 62vh; }

/* Imagen viajera: fija; el JS interpola su posición/tamaño entre el hueco del hero
   (100vw) y el hueco de la intro (columna del 50%) según el scroll. */
.hero-viaje {
  position: fixed; left: 0; top: 260px; width: 100vw; height: 62vh;
  object-fit: cover; z-index: 1; pointer-events: none; will-change: top, left, width, height;
}

/* ---- Intro: texto 50% + imagen 50% ---- */
.insc-intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7);
  align-items: center; padding-block: var(--sp-6) var(--sp-8);
}
.insc-intro__texto p {
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 22px; line-height: 1.5; letter-spacing: -0.5px; color: var(--color-texto);
}
.insc-intro__texto strong { font-weight: 600; color: var(--color-texto); }
/* Hueco de destino (reserva el espacio de la imagen en la columna del 50%). */
.insc-intro__slot { width: 100%; aspect-ratio: 4 / 3; }

/* ---- Franja animada (marquee) ---- */
.tira-insc { background: var(--negro); overflow: hidden; padding: 20px 0; }
.tira-insc__pista {
  display: flex; align-items: center; gap: 34px; width: max-content;
  animation: heroMarquee 30s linear infinite;
}
.tira-insc__item {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(20px, 2.3vw, 30px); letter-spacing: -1px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.tira-insc__rombo {
  width: 16px; height: 16px; background: var(--naranja);
  transform: rotate(45deg); flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .tira-insc__pista { animation: none; } }

/* ---- Todo lo que necesitas saber: tarjetas ---- */
.insc-saber { padding-block: var(--sp-9) 150px; }   /* 150px inferior respecto al footer */
.insc-saber__titulo { text-align: center; }
.info-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  margin-top: 50px;   /* 50px entre el título y las 4 casillas */
}
.info-card {
  background: linear-gradient(135deg, #5c0f13 0%, #E4141B 88%);
  color: #fff; padding: var(--sp-6);
  clip-path: var(--recorte);   /* mismo chaflán que el bento */
}
.info-card h3 {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 28px; letter-spacing: -1px; line-height: 1.05;
  text-transform: uppercase; margin-bottom: var(--sp-4);
}
.info-card ul { display: flex; flex-direction: column; gap: 10px; }
.info-card li {
  position: relative; padding-left: 1.1em;
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 15px; line-height: 1.35; letter-spacing: -0.2px;
  color: rgba(255,255,255,.92);
}
.info-card li::before { content: "•"; position: absolute; left: 0; color: #fff; }

/* Bloque "La inscripción no incluye" DEBAJO de las 4 casillas */
.insc-saber__cols { display: block; }
.insc-noincluye { margin-top: var(--sp-6); }   /* separación coherente con el sistema */
.insc-noincluye__titulo {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 28px; letter-spacing: -1px; line-height: 1.05;
  text-transform: uppercase; color: var(--color-texto); margin: 0 0 var(--sp-4);
}
.insc-noincluye__lista { display: flex; flex-direction: column; gap: 10px; }
.insc-noincluye__lista li {
  position: relative; padding-left: 1.1em;
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 16px; line-height: 1.4; letter-spacing: -0.3px; color: var(--color-texto);
}
.insc-noincluye__lista li::before { content: "•"; position: absolute; left: 0; color: var(--color-primario-vivo); }

@media (max-width: 900px) {
  .insc-intro { grid-template-columns: 1fr; gap: var(--sp-5); }
  .insc-intro__slot { max-width: 420px; }
  .info-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .insc__titulo { font-size: 44px; letter-spacing: -2px; }
  .insc-hero { padding-top: 100px; }
  .insc-hero__slot { height: 46vh; }
  .insc-intro__texto p { font-size: 18px; }
}

/* En la página de inscripciones la cabecera de categorías va centrada (no flex de 2 columnas). */
body.interna .categorias__cab { display: block; text-align: center; }
body.interna .categorias__cab .subtitulo-seccion { margin-inline: auto; }

/* ---- Tarjetas comparativas de categorías (página de inscripciones) ---- */
.cat-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin-top: var(--sp-7); align-items: stretch;
}
.cat-card {
  --c: var(--color-primario-vivo);
  display: flex; flex-direction: column;
  background: #fff;
  border-top: 6px solid var(--c);
  clip-path: var(--recorte);           /* chaflán sup-dcha + inf-izq, como en el resto del sitio */
}
.cat-card--elite    { --c: #E4141B; --c-oscuro: #7A0B10; }
.cat-card--aventura { --c: var(--naranja); --c-oscuro: #7A4800; }
.cat-card--open     { --c: var(--azul);   --c-oscuro: #1E4A5F; }

.cat-card__top { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.cat-card__nombre {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 30px; letter-spacing: -1px; line-height: 1;
  text-transform: uppercase; color: var(--c);
}
.cat-card__lema {
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 16px; color: var(--color-texto); margin-top: 6px;
}
.cat-card__pill {
  display: inline-block; margin-top: var(--sp-3);
  background: var(--c); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px;
}

.cat-card__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 0 var(--sp-5) var(--sp-5); }
.cat-card__fila { padding-top: var(--sp-4); }
.cat-card__fila + .cat-card__fila { border-top: 1px solid #ededed; }
.cat-card__label {
  display: block; font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-texto-suave); margin-bottom: 5px;
}
.cat-card__valor {
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 14px; line-height: 1.4; color: var(--color-texto);
}

.cat-card__precios ul { display: flex; flex-direction: column; gap: 7px; }
.cat-card__precios li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cat-card__precios li span { font-family: var(--fuente-cuerpo); font-size: 13px; color: var(--color-texto-suave); }
.cat-card__precios li b { font-family: var(--fuente-titulo); font-weight: 700; font-size: 18px; letter-spacing: -.5px; color: var(--color-texto); }
.cat-card__precios li:last-child b { font-size: 24px; }

.cat-card__btn {
  margin-top: auto; display: block; text-align: center;
  background: linear-gradient(180deg, var(--c-oscuro) 0%, var(--c) 100%);   /* degradado vertical: tono oscuro → tono actual */
  color: #fff;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; padding: 17px 12px;
  transition: filter var(--transicion);
}
.cat-card__btn:hover { filter: brightness(1.08); }

@media (max-width: 900px) {
  .cat-cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
/* Con las tarjetas lado a lado, alinea precio + requisitos a la misma altura en
   las tres: empuja el bloque al fondo del cuerpo (Élite, más alto, define la altura)
   y reserva la altura del 3er tramo de precio para que Open (2 tramos) también case. */
@media (min-width: 901px) {
  .cat-card__precios { margin-top: auto; }
  .cat-card__precios ul { min-height: 110px; justify-content: flex-start; }
}

/* ---- Entrada escalonada de las tarjetas comparativas (de abajo hacia arriba) ---- */
.cat-card {
  opacity: 0; transform: translateY(45px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-card.entrar { opacity: 1; transform: none; }
.cat-card:nth-child(2) { transition-delay: 0.5s; }   /* 0.5 s después de la 1ª */
.cat-card:nth-child(3) { transition-delay: 1s; }      /* 0.5 s después de la 2ª */
@media (prefers-reduced-motion: reduce) {
  .cat-card { opacity: 1; transform: none; transition: none; }
}

/* ---- Botones de reglamentos (bajo las tarjetas de categorías) ---- */
.reglamentos {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7);
}
.reglamento-prox { position: relative; display: inline-flex; }
.reglamento-prox__msg {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--negro); color: #fff;
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo);
  font-size: 13px; letter-spacing: -0.2px; white-space: nowrap;
  padding: 9px 14px; clip-path: var(--recorte-btn);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.reglamento-prox.mostrar .reglamento-prox__msg {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
@media (max-width: 720px) {
  .reglamentos { flex-direction: column; }
  .reglamento-prox, .reglamentos > .btn { width: 100%; max-width: 320px; }
  .reglamentos > .btn, .reglamento-prox .btn { justify-content: center; width: 100%; }
}

/* Negrita del texto extra del CTA de staff (Poppins 600, que sí está cargado) */
.vive-card__extra strong { font-weight: 600; color: var(--color-texto); }

/* ============================================================
   PÁGINA DE GALERÍA
   ============================================================ */
.galeria-titulo {
  text-align: center; text-transform: uppercase; color: var(--color-primario-vivo);
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 80px); letter-spacing: -4px; line-height: 1;
  padding-top: 130px; margin-bottom: var(--sp-6);
}
/* Barra de pestañas de años: fija arriba (100px del viewport) mientras las
   imágenes pasan por debajo. */
.galeria-tabs {
  position: sticky; top: 0; z-index: 5;
  padding-top: 100px; padding-bottom: 30px;   /* 100px al viewport ; 30px de la línea a las imágenes */
  background: var(--color-fondo);
}
/* Fila de años a TODO el ancho de la galería, con la línea roja separadora
   pegada abajo (los años se apoyan en ella). */
.galeria-tabs__fila {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 3px solid var(--color-primario-vivo);
}
.galeria-tab {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 50px);   /* 50px en escritorio; escala en pantallas estrechas */
  letter-spacing: -1px; line-height: 1;
  color: var(--color-primario-vivo);
  background: transparent; border: 0; border-radius: 0; cursor: pointer;
  padding: 8px 10px;
  transition: background var(--transicion), color var(--transicion);
}
/* Hover o año activo: rectángulo con degradado rojo y letras blancas */
.galeria-tab:hover,
.galeria-tab.activo {
  background: linear-gradient(180deg, #530F10 0%, #E91D29 100%);
  color: #fff;
}

/* Paneles: un año visible cada vez (100px de la galería al footer) */
.galeria-panel { padding-bottom: 100px; }
.galeria-panel[hidden] { display: none; }
.galeria-panel--vacio {
  display: flex; align-items: center; justify-content: center;
  min-height: 42vh; text-align: center; padding-bottom: 100px;
}
.galeria-panel--vacio p {
  font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: -1px; color: var(--color-texto-suave);
}

/* Rejilla tipo masonry de 2 columnas */
.galeria-grid { column-count: 2; column-gap: 20px; }
.galeria-grid img { width: 100%; display: block; margin-bottom: 20px; break-inside: avoid; }

@media (max-width: 720px) {
  .galeria-grid { column-count: 1; }
}

/* ---- Lightbox de la galería (ampliar imagen sin chaflán) ---- */
.galeria-grid img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0,0,0,.9);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.lightbox.abierto { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 92vh; width: auto; height: auto;
  object-fit: contain;
  clip-path: none !important;   /* imagen completa, sin el recorte chaflán */
  border-radius: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  cursor: default;
}
.lightbox__cerrar {
  position: absolute; top: 18px; right: 28px;
  width: 46px; height: 46px; line-height: 1;
  font-size: 34px; color: #fff; background: none; border: 0; cursor: pointer;
  transition: color var(--transicion);
}
.lightbox__cerrar:hover { color: var(--color-primario-vivo); }

/* Sección de posts como PÁGINA completa (Noticias): deja hueco para el header fijo y 100px al footer */
.posts--pagina { padding: 150px 0 100px; }

/* ---- Selector de idioma (dentro del menú de la barra superior) ---- */
.nav__idioma { position: relative; display: flex; align-items: center; }
.nav__idioma-btn {
  font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); font-size: 14px;
  text-transform: uppercase; letter-spacing: 0; color: #fff;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  transition: color var(--transicion);
}
.nav__idioma-btn:hover, .nav__idioma.abierto .nav__idioma-btn { color: var(--color-primario-vivo); }
.nav__idioma-btn span { font-size: 10px; transition: transform var(--transicion); }
.nav__idioma.abierto .nav__idioma-btn span { transform: rotate(180deg); }
.nav__idioma-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--negro); box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: flex; flex-direction: column; min-width: 140px; padding: 6px 0; z-index: 120;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav__idioma.abierto .nav__idioma-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__idioma-menu li { display: block; }
.nav__idioma-menu button {
  display: block; width: 100%;   /* el hover llena todo el ancho del desplegable */
  font-family: var(--fuente-cuerpo); font-weight: var(--peso-cuerpo); font-size: 14px;
  color: rgba(255,255,255,.85); text-align: left; padding: 9px 18px; cursor: pointer; white-space: nowrap;
  transition: color var(--transicion), background var(--transicion);
}
.nav__idioma-menu button:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav__idioma-menu button.activo { color: var(--color-primario-vivo); }

/* ============================================================
   RESPONSIVE GLOBAL  (tablet + móvil)
   Ajusta tamaños de texto, imágenes y animaciones para que
   ninguna sección sobresalga del viewport, conservando el orden.
   Bloque final: sobrescribe las reglas previas donde hace falta.
   ============================================================ */

/* ---------- TABLET  (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  /* Navegación en cajón lateral (hamburguesa) para todas las tablets */
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px);
    background: var(--negro); flex-direction: column; justify-content: center;
    gap: var(--sp-6); transform: translateX(100%); transition: transform var(--transicion);
    padding: var(--sp-8); z-index: 110;
  }
  .nav.abierto { transform: translateX(0); }
  .nav__lista { flex-direction: column; gap: var(--sp-5); }
  .nav__lista a { font-size: 1.15rem; }
  .header__social { display: none; }
  .hamburguesa { display: flex; }

  h2 { font-size: clamp(2.4rem, 6.4vw, 3.6rem); letter-spacing: -3px; }
  h3 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -2px; }
  .insc__titulo { font-size: clamp(3rem, 8vw, 4.6rem); letter-spacing: -3px; }
  .desafio__titulo { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -3px; }
  /* La fuente base (clamp con tope 50px) ya escala en tablet, no hace falta override aquí. */
  /* Estadísticas: en tablet no caben 4 en fila → 2×2 con números menores */
  .stats { padding: 80px var(--sp-5); }
  .stats__grid { flex-wrap: wrap; justify-content: flex-start; gap: 34px 50px; width: min(1000px, 90vw); }
  .stats__grid > div { flex: 1 1 38%; }
  .stat__num { font-size: 60px; letter-spacing: -3px; }

  /* Subtítulos del acordeón menores que el título de sección */
  .acordeon__cabecera h3 { font-size: 34px; }

  /* Footer en flujo vertical (tablet + móvil): menús apilados → logo (dcha) →
     palabra (100%) → legal, TODO pegado al fondo de la vista (sin hueco abajo). */
  /* Fila [menús | logo] con los bordes inferiores alineados (align-items:flex-end),
     luego palabra y legal a lo ancho; todo empaquetado al fondo (align-content). */
  .footer {
    min-height: 100vh; padding: 80px 20px 26px;
    display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; gap: 0 14px;
  }
  /* Sin overlay negro: la imagen de fondo se ve. La legibilidad se consigue con
     sombra en el texto, no oscureciendo el fondo. */
  .footer::before { background: none; }
  .footer__contenido, .footer h4, .footer__grid li, .footer__grid a,
  .footer__marca, .footer__legal { text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.7); }
  .footer__contenido { position: static; flex: 1 1 220px; }
  /* Logo en la misma fila que los menús, alineado por su borde inferior con los iconos */
  .footer__logo-img { position: static; flex: 0 0 auto; height: 84px; width: auto; margin: 0; align-self: flex-end; display: block; }
  .footer__grid { flex-direction: column; gap: var(--sp-5); align-items: flex-start; width: 100%; }
  .footer__grid li, .footer__grid a { color: rgba(255,255,255,.92); }
  .footer h4 { color: #fff; }
  .footer__marca { position: static; flex: 0 0 100%; width: 100vw; margin: 14px 0 0 -20px; font-size: 21vw; line-height: .82; letter-spacing: -0.03em; text-align: left; color: rgba(255,255,255,.72); }
  .footer__legal { position: static; flex: 0 0 100%; left: auto; right: auto; bottom: auto; margin-top: 16px; color: #fff; }
  .footer__legal a { color: rgba(255,255,255,.9); }

  /* Carrusel vertical Val d'Aran: imagen centrada, textos centrados DEBAJO de la imagen */
  .vg-item img { width: 78vw; max-width: 560px; }
  .vg-titulo, .vg-sub { left: 50%; right: auto; transform: translateX(-50%); text-align: center; width: 86vw; max-width: 640px; }
  .vg-titulo { font-size: clamp(24px, 4vw, 34px); }
  .vg-sub { font-size: clamp(15px, 2.4vw, 19px); }
  .vg-cab { left: 20px; right: 20px; }
  /* 50px entre el final del acordeón (la línea) y el título "Val d'Aran"
     (la cabecera del carrusel ya deja 50px desde el borde de su sección). */
  #categorias { margin-bottom: 0 !important; padding-bottom: 0; }
}

/* ---------- MÓVIL  (≤ 720px) ---------- */
@media (max-width: 720px) {
  /* Tipografía global: nada más ancho que la pantalla */
  h2 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); letter-spacing: -1.5px; }
  h3 { font-size: clamp(1.7rem, 7.5vw, 2.1rem); letter-spacing: -1.2px; }
  p  { font-size: 17px; letter-spacing: -0.4px; }
  .titulo-seccion, .desafio__titulo, .insc__titulo,
  .galeria-titulo, .hero__titulo { overflow-wrap: break-word; word-break: normal; }

  /* Hero */
  .hero { padding: var(--sp-6) 20px; }
  .hero__titulo { font-size: clamp(2.09rem, 10.45vw, 3.04rem); letter-spacing: -1.5px; }
  .hero__fecha { font-size: 22px; }
  .hero__tag { font-size: 12px; }
  .hero__acciones { width: 100%; }
  .hero__acciones .btn { flex: 1 1 auto; justify-content: center; }
  .hero__carrusel { width: 100%; }

  /* Estadísticas: encajar dentro del padding de la sección y centrar */
  .stats { padding: 70px 20px; }
  .stats__grid { width: 100%; gap: var(--sp-5); }

  /* Intro / desafío */
  .intro__texto { font-size: 22px; line-height: 30px; }
  .desafio__titulo { font-size: clamp(2rem, 9vw, 2.7rem); letter-spacing: -1.5px; }

  /* Inscripciones */
  .insc-hero { padding-top: 96px; }
  .insc__titulo { font-size: clamp(2.2rem, 10vw, 3rem); letter-spacing: -1.5px; }
  .insc-hero__slot { height: 42vh; }
  .cat-card__nombre { font-size: 26px; }

  /* Galería */
  .galeria-titulo { padding-top: 110px; }
  .galeria-tabs { padding-top: 88px; padding-bottom: 20px; }
  .galeria-tab { font-size: clamp(0.85rem, 3vw, 1.4rem); padding: 6px clamp(5px, 1.4vw, 12px); }

  /* Noticias / posts */
  .posts--pagina { padding: 120px 0 80px; }
  .posts { padding-top: 80px; }
  .post-card img { height: 220px; }
  .articulo { padding-inline: 20px; }
  .articulo img { margin-block: var(--sp-4); }

  /* Bento · casilla del "7": que el número no tape el texto */
  .bento-7 { min-height: 240px; }
  .bento-7 img { height: 46%; max-width: 40%; }
  /* Bento · mapa: mostrar el mapa completo, sin recorte (fluye bajo el texto) */
  .bento-mapa { min-height: auto; }
  .bento-mapa img { position: static; width: 100%; height: auto; margin-top: 10px; object-fit: contain; }

  /* Acordeón · subtítulos de categoría menores que el título de sección */
  .acordeon__cabecera h3 { font-size: 24px; }
  .acordeon__item.abierta .acordeon__cabecera { min-height: 60px; }
  .acordeon__cuerpo li { font-size: 16px; }

  /* Carrusel vertical Val d'Aran · imagen más grande, textos debajo */
  .vg-item img { width: 84vw; max-width: 460px; }
  .vg-titulo { font-size: 26px; }
  .vg-sub { font-size: 16px; }

  /* Popup ARWS: no debe tapar la pantalla en móvil */
  .arws-popup { width: 168px; height: auto; right: 12px; bottom: 12px; }
  .arws-popup--left { left: 12px; right: auto; }
  .arws-popup__txt { font-size: 13px; }
}

/* ---------- MÓVIL PEQUEÑO  (≤ 480px) ---------- */
@media (max-width: 480px) {
  h2 { font-size: clamp(1.7rem, 8vw, 2rem); }
  .stat__num { font-size: 44px; letter-spacing: -2px; }
  .stats__grid > div { flex: 1 1 100%; }
  .hero__titulo { letter-spacing: -1px; }
  .hero__fecha { font-size: 20px; }
  .intro__texto { font-size: 20px; line-height: 28px; }
  .desafio__titulo { font-size: clamp(1.8rem, 9vw, 2.3rem); }
  .footer__legal { flex-direction: column; gap: 8px; align-items: flex-start; }
  .galeria-tab { font-size: clamp(0.7rem, 3.2vw, 1rem); padding: 5px 4px; letter-spacing: -0.5px; }
  .cat-card__precios li b { font-size: 16px; }
  .cat-card__precios li:last-child b { font-size: 20px; }
}

/* ============================================================
   CITA DEL DIRECTOR (home, tras el hero) + utilidad anim-up
   ============================================================ */
.cita { background: #000; color: #fff; padding: 100px 0; position: relative; z-index: 1; }
.cita__inner { display: flex; align-items: center; gap: clamp(28px, 5vw, 70px); }
.cita__foto { flex: 0 0 40%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.cita__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cita__cuerpo { flex: 1; min-width: 0; }
.cita__titulo { color: #fff; font-size: 50px; letter-spacing: -0.4px; margin: 0 0 26px; line-height: 1.05; }
.cita__texto { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.85; letter-spacing: 0; max-width: 60ch; margin: 0 0 22px; }
.cita__firma { font-family: var(--fuente-cuerpo); font-size: 14px; letter-spacing: 0; margin: 0; }
.cita__firma-nombre { color: var(--color-primario-vivo); font-weight: 600; }
.cita__firma-rol { color: rgba(255,255,255,.6); }

/* Utilidad: animación de entrada (fade + subida) al hacer scroll */
.anim-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.anim-up.in { opacity: 1; transform: none; }
.anim-up--d1 { transition-delay: .12s; }
.anim-up--d2 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .anim-up { opacity: 1; transform: none; transition: none; } }

/* Escritorio: foto sticky (estática) mientras el texto sube de la línea
   inferior a la línea superior de la foto */
@media (min-width: 861px) {
  .cita__inner { align-items: flex-start; }
  .cita__foto {
    position: sticky; top: 12vh; height: 76vh; aspect-ratio: auto;
    align-self: flex-start;
  }
  /* La columna mide 2× la foto: la foto queda pegada (sticky) y el texto
     recorre exactamente la altura de la foto (de la línea inferior a la superior). */
  .cita__cuerpo { box-sizing: border-box; height: 152vh; padding-top: 76vh; }
}

@media (max-width: 860px) {
  .cita { padding: 70px 0; }
  .cita__inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .cita__foto { flex: none; aspect-ratio: 16 / 10; }
  .cita__titulo { font-size: 36px; }
}

/* ============================================================
   AVISO DE COOKIES (banner inferior, inyectado por main.js)
   ============================================================ */
.cookie-aviso {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120;
  background: var(--negro); color: #fff;
  padding: 16px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 12px 40px rgba(0,0,0,.35); clip-path: var(--recorte-btn);
}
.cookie-aviso__txt { margin: 0; font-size: 13px; line-height: 1.6; flex: 1; min-width: 220px; }
.cookie-aviso__txt a { color: var(--naranja); text-decoration: underline; text-underline-offset: 2px; }
.cookie-aviso__btns { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.cookie-aviso__btn {
  font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .02em; background: var(--color-primario-vivo); color: #fff;
  border: 2px solid var(--color-primario-vivo); padding: 9px 18px; cursor: pointer; clip-path: var(--recorte-btn);
  transition: background var(--transicion), color var(--transicion);
}
.cookie-aviso__btn:hover { background: #fff; color: var(--color-primario-vivo); }
.cookie-aviso__btn--sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cookie-aviso__btn--sec:hover { background: #fff; color: var(--negro); border-color: #fff; }
@media (max-width: 640px) {
  .cookie-aviso { left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; }
  .cookie-aviso__btns { justify-content: stretch; }
  .cookie-aviso__btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   Bloques de contenido por idioma (páginas legales)
   Se muestra solo el que coincide con el idioma activo (html[lang])
   ============================================================ */
[data-lp] { display: none; }
html[lang="es"] [data-lp="es"],
html[lang="en"] [data-lp="en"],
html[lang="fr"] [data-lp="fr"] { display: block; }

/* ============================================================
   Tabla de precios por equipo (tarjetas de categoría / acordeón)
   ============================================================ */
.precio-tabla { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.precio-tabla th, .precio-tabla td { border: 1px solid var(--color-borde); padding: 5px 6px; text-align: center; }
.precio-tabla th:first-child, .precio-tabla td:first-child { text-align: left; white-space: nowrap; }
.precio-tabla thead th { font-family: var(--fuente-cuerpo); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--color-texto-suave); font-weight: 600; }
.precio-tabla td { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -.3px; }