/* =========================================================
   MOD MALLORCA — Design System CSS
   Tokens, componentes y animaciones que complementan Tailwind.
   ========================================================= */

/* ----- Google Fonts ya cargadas por WP, definimos variables aquí ----- */
:root {
  --mod-black: #050a0f;
  --mod-deep-navy: #0d2030;
  --mod-gold: #c9a84c;
  --mod-gold-light: #e8c96a;
  --mod-white: #f0ede8;
  --mod-red: #cc1f1f;
  --mod-cyan: #00e5ff;
  --mod-palm-blue: #1a3a4a;

  --font-display: "Bebas Neue", "Impact", sans-serif;
  --font-impact: "Anton", "Bebas Neue", "Impact", sans-serif;
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-label: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --ease-atmo: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 5.25rem; /* margen superior (1rem) + barra (4.25rem); en rem para que escale con el html font-size */
}

/* ---- Base ---- */
html {
  scroll-behavior: smooth;
}
/* Escala tipográfica global FLUIDA en pantallas anchas: todo el tema usa
   rem (Tailwind + este CSS), así que el font-size raíz agranda textos,
   espaciados y los max-w-* de forma proporcional. Crece linealmente con el
   ancho de ventana a partir de 1280px (16px) hasta 20px en 1920px y tope
   de 22px, para que la página se vea con la MISMA proporción en un portátil
   y en un monitor grande, sin saltos entre pantallas. A petición del
   cliente (el contenido se veía pequeño y cambiaba de tamaño al cambiar de
   monitor). Por debajo de 1280px se queda en los 16px de siempre. */
@media (min-width: 1280px) {
  html { font-size: clamp(16px, 8px + 0.625vw, 22px); }
}

body {
  background-color: #04141b;
  color: var(--mod-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(
      1100px 600px at 85% 5%,
      rgba(201, 168, 76, 0.07),
      transparent 60%
    ),
    radial-gradient(
      900px 720px at 6% 15%,
      rgba(15, 68, 86, 0.30),
      transparent 55%
    ),
    radial-gradient(
      800px 500px at 92% 50%,
      rgba(201, 168, 76, 0.04),
      transparent 65%
    ),
    radial-gradient(
      1000px 600px at 8% 72%,
      rgba(15, 68, 86, 0.18),
      transparent 60%
    ),
    radial-gradient(
      700px 400px at 75% 95%,
      rgba(201, 168, 76, 0.05),
      transparent 65%
    );
  background-attachment: fixed;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
}

::selection {
  background: var(--mod-gold);
  color: var(--mod-black);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mod-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #07111a;
}
::-webkit-scrollbar-thumb {
  background: #1a3a4a;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mod-gold);
}

/* =========================================================
   COMPONENTES REUTILIZABLES
   ========================================================= */

/* ── Fondo general de portada ─────────────────────────────────────────────── */

/* Wrapper de toda la portada: ancla el position:absolute del fondo */
.mod-page {
  position: relative;
  isolation: isolate;
}

/* Lienzo de fondo — ocupa exactamente el alto de .mod-page */
.mod-scroll-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Capa para dar textura al fondo */
.mod-bg-atmo {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

/* Velo oscuro: funde los bordes de las imágenes con el fondo negro */
.mod-bg-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 120% 40% at 50% 50%,
      transparent 60%,
      rgba(11, 44, 54, 0.05) 100%
    ),
    rgba(11, 44, 54, 0.5);
}

/* Vídeos: nivel inferior dentro del fondo */
.mod-bg-video {
  position: fixed;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.85;
  z-index: 0;
}

/* Capa para oscurecer el vídeo */
.mod-bg-video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 17, 20, 0.788);
  z-index: 0;
  pointer-events: none;
}

/* Imágenes decorativas: sobre los vídeos */
.mod-bg-layer {
  position: absolute;
  z-index: 2;
}

.mod-bg-overlay {
  position: absolute;
  z-index: 3;
  right: 0;
  background-color: #000;
}

/* .mod-bg-layer--1 (bailarin_01) se retiró el 19-09-2026: esa figura pasó a
   ser la imagen propia del bloque "Revive los mejores momentos", ver
   .mod-figure__img más abajo. */
/* .mod-bg-layer--2 (bailarin_03) se retiró también el 19-09-2026: pasó a ser
   la imagen propia del bloque Horarios, ver .mod-figure--horarios. */
.mod-bg-layer--4 {
  top: 400vh;
  max-width: clamp(220px, 40vw, 600px);
  left: 0;
}
.mod-bg-layer--3 {
  position: absolute;
  max-width: 80%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* Grupo (grupo_02) anclado al pie de .mod-page, detrás del footer, con la
     opacidad rebajada más abajo (19-09-2026). */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 75%,
    transparent 100%
  );
}
/* El grupo va DETRÁS del pie (bottom:0 de .mod-page, que cierra en el
   footer), en todos los anchos, muy atenuado para que el texto del pie se
   lea bien: es textura, no protagonista (petición 19-09-2026; la franja
   propia entre la última sección y el pie que se probó antes se retiró). */
.mod-bg-layer--3 { opacity: 0.2; }

/* Estilo foco del cursor */
.mod-cursor-light {
  position: fixed;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  pointer-events: none;
  z-index: 1;

  transform: translate(-50%, -50%);
  opacity: 0;

  background: radial-gradient(
    circle,
    rgba(0, 229, 255, 0.06) 0%,
    rgba(0, 229, 255, 0.04) 28%,
    rgba(201, 168, 76, 0.04) 48%,
    transparent 72%
  );

  filter: blur(18px);
  mix-blend-mode: screen;

  transition:
    opacity 0.35s ease,
    transform 0.08s linear;
}

/* Contenedor centrado — mismo ancho máximo que la nav (#site-header > nav).
   1380px fijos hasta ~1916px de ventana; en monitores más anchos sigue
   ocupando el 72% del ancho para no quedarse como una columna estrecha. */
.mod-container {
  width: 100%;
  max-width: max(1380px, 72vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .mod-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .mod-container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Hero en pantallas verticales: el "min-h-[100svh]" del Hero está pensado
   para apaisado (que ocupe la primera pantalla). En vertical (iPad, monitor
   girado) el contenido mide ~600px y el resto hasta 100svh era agua vacía
   (900px en iPad Pro vertical). Sin altura mínima el Hero cierra donde
   termina su contenido; en móvil no cambia nada porque ahí el contenido ya
   supera la pantalla (19-09-2026). Especificidad de 2 clases para ganar a
   la utilidad de Tailwind. */
@media (orientation: portrait) {
  .mod-page .mod-hero { min-height: 0; }
}

/* Hero con cartel: grid de ÁREAS con nombre (no de columnas) para poder
   reordenar en móvil sin tocar el layout de escritorio. Ver front-page.php
   (Hero) — las 3 áreas (text/poster/cta) se imprimen siempre en este orden
   en el DOM; es el grid quien las recoloca visualmente por breakpoint.
   Móvil (por defecto, 1 columna): texto → cartel → botón "Inscríbete ahora",
   a petición del cliente. Desktop (≥1024px): "poster" pasa a ocupar su
   propia columna a la izquierda (fusionando las 2 filas, como hacía el
   grid de 2 columnas anterior), y "text"/"cta" se apilan a la derecha —
   visualmente idéntico a como estaba antes de introducir este grid. */
.mod-hero-grid {
  display: grid;
  /* Móvil: texto → cartel → CTA (el texto tiene que ser lo primero, a
     petición del cliente). El cartel destaca como pieza enmarcada que cabe
     entera en pantalla, ver .mod-hero-area-poster (<1024px) más abajo. */
  grid-template-areas:
    "text"
    "poster"
    "cta";
  row-gap: 1.75rem;
}
.mod-hero-grid .mod-hero-area-text   { grid-area: text; }
.mod-hero-grid .mod-hero-area-poster { grid-area: poster; }
.mod-hero-grid .mod-hero-area-cta    { grid-area: cta; }
@media (min-width: 1024px) {
  .mod-hero-grid {
    grid-template-columns: 1fr 1fr;
    /* El cartel (más alto que el texto) ocupa las dos filas y el sobrante se
       reparte entre ambas; el texto se alinea al FINAL de la primera y la CTA
       al PRINCIPIO de la segunda, así quedan pegadas entre sí (la CTA justo
       bajo la cuenta atrás, su mt-5 pone el aire) y el conjunto centrado
       respecto al cartel (19-09-2026). */
    grid-template-areas:
      "poster text"
      "poster cta";
    row-gap: 0;
  }
  .mod-hero-grid .mod-hero-area-text { align-self: end; }
  .mod-hero-grid .mod-hero-area-cta  { align-self: start; }
}

/* Espaciado vertical de sección.
   Envuelto en :where() (especificidad 0) a propósito: mod.css carga DESPUÉS
   de tailwind-build.css, así que un `.mod-section` normal ganaba a las
   utilidades `pt-0` / `pb-10` / `pb-24` que las páginas interiores
   (horarios, entradas…) usan para encadenar o agrupar bloques, y esos
   ajustes no se aplicaban. Con :where() la utilidad manda cuando existe y,
   si no, rige este padding. (19-09-2026) */
:where(.mod-section) {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 640px) {
  :where(.mod-section) {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Portada (front-page.php, envuelta en .mod-page): secciones más juntas.
   Va DESPUÉS de la regla base (misma especificidad 0 gracias a :where(), el
   orden decide) y no toca el resto de páginas, que reutilizan la clase
   pero no están dentro de .mod-page. */
:where(.mod-page .mod-section) {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
  :where(.mod-page .mod-section) {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Tipografía de impacto (Anton) */
.mod-impact {
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
}

/* Display (Bebas Neue) */
.mod-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.95;
}

/* Eyebrow — etiqueta dorada de sección */
.mod-eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mod-gold);
}

/* Separador dorado */
.mod-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--mod-gold), transparent);
  opacity: 0.6;
}
/* Filetes de la web (19-09-2026): NUNCA una línea recta y sólida. Todo
   separador es la línea dorada que se desvanece por los extremos, como la
   de debajo del título del Hero. Dos degradados reutilizables (horizontal y
   vertical, con meseta en el centro y fundido en el 15% de cada extremo) y
   tres ayudantes para pintarlos con pseudoelementos sin tocar el fondo del
   elemento: .mod-rule-t (arriba), .mod-rule-b (abajo) y .mod-rule-l (izq.). */
:root {
  --mod-rule-color: rgba(201, 168, 76, 0.38);
  --mod-rule-h: linear-gradient(90deg, transparent 0%, var(--mod-rule-color) 15%, var(--mod-rule-color) 85%, transparent 100%);
  --mod-rule-v: linear-gradient(180deg, transparent 0%, var(--mod-rule-color) 15%, var(--mod-rule-color) 85%, transparent 100%);
}
.mod-rule-t, .mod-rule-b, .mod-rule-l { position: relative; }
.mod-rule-t::before, .mod-rule-b::after, .mod-rule-l::before {
  content: "";
  position: absolute;
  pointer-events: none;
}
.mod-rule-t::before { left: 0; right: 0; top: 0; height: 1px; background: var(--mod-rule-h); }
.mod-rule-b::after  { left: 0; right: 0; bottom: 0; height: 1px; background: var(--mod-rule-h); }
.mod-rule-l::before { top: 0; bottom: 0; left: 0; width: 2px; background: var(--mod-rule-v); }

/* Texto con shimmer dorado */
.mod-gold-text {
  background: linear-gradient(
    90deg,
    var(--mod-gold) 0%,
    var(--mod-gold-light) 50%,
    var(--mod-gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Botones */
.mod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.3s;
  font-family: var(--font-label);
  text-decoration: none;
  cursor: pointer;
}
.mod-btn-gold {
  background: var(--mod-gold);
  color: var(--mod-black);
}
.mod-btn-gold:hover {
  background: var(--mod-gold-light);
  box-shadow: 0 0 24px rgba(201, 168, 76, 0.45);
  transform: translateY(-1px);
}
.mod-btn-red {
  background: var(--mod-red);
  color: var(--mod-white);
}
.mod-btn-red:hover {
  box-shadow: 0 0 24px rgba(204, 31, 31, 0.5);
  transform: translateY(-1px);
}
.mod-btn-ghost {
  border: 1px solid rgba(201, 168, 76, 0.5);
  color: var(--mod-white);
  background: transparent;
}
.mod-btn-ghost:hover {
  border-color: var(--mod-gold);
  background: rgba(201, 168, 76, 0.08);
}

/* Tarjeta océano */
.mod-card {
  background: linear-gradient(
    160deg,
    rgba(15, 68, 86, 0.32),
    rgba(4, 20, 27, 0.66)
  );
  border: 1px solid rgba(201, 168, 76, 0.16);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.mod-card-hover {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s,
    border-color 0.35s;
}
/* Hover unificado en todo el sitio (tarjetas, botones, enlaces del menú):
   subida de 2-3px + borde/acento dorado. Antes las tarjetas escalaban. */
.mod-card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(201, 168, 76, 0.25);
}

/* Reveal al scroll */
.mod-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.mod-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mod-reveal-zoom {
  opacity: 0;
  transform: scale(0.93) translateY(26px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mod-reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Fade up (hero) */
.animate-fade-up {
  animation: mod-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mod-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer dorado */
.animate-gold-shimmer {
  animation: mod-shimmer 3s linear infinite;
}
@keyframes mod-shimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* Pulse rojo */
.animate-pulse {
  animation: mod-pulse 1.4s ease-in-out infinite;
}
@keyframes mod-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Bounce scroll indicator */
.animate-scroll-bounce {
  animation: mod-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes mod-scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* =========================================================
   ATMÓSFERA — Vídeo hero + efectos de fondo
   ========================================================= */
.mod-atmo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mod-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Fondo ambiental sitewide (header.php) — vídeo + atmósfera del "FONDO
   GENERAL DE PORTADA" de front-page.php, sin capas de efectos ni bailarines.
   A diferencia de .mod-scroll-bg (position:absolute, anclado a .mod-page,
   que solo existe en la home), este usa position:fixed para funcionar igual
   en cualquier página sin depender de un wrapper concreto. */
.mod-bg-global {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.mod-video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--mod-black);
}

.mod-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa encima del vídeo */
.mod-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  padding: 1.5rem;
  text-align: center;

  background:
    linear-gradient(180deg, rgb(9, 37, 46, 0.45) 0%, rgb(9, 37, 46, 0.78) 100%),
    rgba(201, 168, 76, 0.12);

  backdrop-filter: blur(2px);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

/* Logo */
.mod-video-overlay-logo {
  width: 310px;
  max-width: 80%;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(71, 64, 43, 0.45));
}

/* Texto */
.mod-video-overlay-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--mod-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Al pasar el ratón, se quita la capa */
.mod-winner-card:hover .mod-video-overlay {
  opacity: 0;
  visibility: hidden;
}

.mod-video-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mod-video-cover video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}

.mod-video-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(4, 16, 22, 0.82) 0%,
      rgba(4, 16, 22, 0.16) 18%,
      rgba(4, 16, 22, 0.16) 52%,
      rgba(4, 16, 22, 0.3) 66%,
      rgba(4, 16, 22, 0.52) 79%,
      rgba(4, 16, 22, 0.8) 91%,
      #04141b 100%
    ),
    radial-gradient(
      120% 82% at 50% 40%,
      transparent 44%,
      rgba(4, 16, 22, 0.5) 100%
    ),
    linear-gradient(
      90deg,
      #04141b 0%,
      transparent 13%,
      transparent 87%,
      #04141b 100%
    );
}
.mod-video-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: color;
  background: rgba(15, 68, 86, 0.22);
}

.mod-video-master {
  position: relative;
  overflow: hidden;
  height: 320px;
  background: var(--mod-black);
}

.mod-video-master video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mod-video-master::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(5, 29, 37, 0.05) 0%,
    rgb(5, 29, 37, 0.15) 45%,
    rgb(5, 29, 37, 0.55) 72%,
    rgb(5, 29, 37, 0.92) 90%,
    rgb(5, 29, 37, 1) 100%
  );
}

/* Caústicas animadas */
.mod-caustic {
  position: absolute;
  filter: blur(60px);
  mix-blend-mode: screen;
  border-radius: 50%;
  will-change: transform;
}
.mod-c1 {
  top: -22%;
  left: -12%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, #1aa6cf, transparent 62%);
  opacity: 0.4;
  animation: mod-drift1 34s var(--ease-atmo) infinite;
}
.mod-c2 {
  bottom: -26%;
  right: -12%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, #e9c46a, transparent 60%);
  opacity: 0.18;
  animation: mod-drift2 40s var(--ease-atmo) infinite;
}
.mod-c3 {
  top: 46%;
  left: 56%;
  width: 34vw;
  height: 34vw;
  background: radial-gradient(circle, #15cdb6, transparent 60%);
  opacity: 0.2;
  animation: mod-drift1 46s var(--ease-atmo) infinite reverse;
}
@keyframes mod-drift1 {
  0%,
  100% {
    transform: translate(-6%, -4%);
  }
  50% {
    transform: translate(8%, 6%);
  }
}
@keyframes mod-drift2 {
  0%,
  100% {
    transform: translate(5%, 3%);
  }
  50% {
    transform: translate(-7%, -5%);
  }
}

.mod-sun {
  position: absolute;
  top: -14vw;
  right: -8vw;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 238, 178, 0.5),
    rgba(255, 200, 108, 0.22) 26%,
    rgba(255, 170, 70, 0.07) 48%,
    transparent 70%
  );
  animation: mod-sunpulse 16s var(--ease-atmo) infinite;
}
@keyframes mod-sunpulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Ambiente global */
.mod-ambient .mod-sea {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      130% 78% at 50% 122%,
      rgba(15, 68, 86, 0.46),
      rgba(7, 37, 48, 0.18) 44%,
      transparent 72%
    ),
    radial-gradient(
      95% 40% at 50% 118%,
      rgba(201, 168, 76, 0.07),
      transparent 70%
    ),
    radial-gradient(78% 52% at 10% 4%, rgba(15, 68, 86, 0.22), transparent 60%),
    radial-gradient(
      70% 50% at 92% 6%,
      rgba(201, 168, 76, 0.05),
      transparent 62%
    );
}

/* Palmeras decorativas */
.mod-decor-sway {
  animation: mod-decor-sway 18s var(--ease-atmo) infinite;
  transform-origin: bottom center;
}
@keyframes mod-decor-sway {
  0%,
  100% {
    transform: translateY(0) rotate(-0.6deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.6deg);
  }
}

/* Bailarines de fondo */
.mod-dancers {
  -webkit-mask-image: linear-gradient(
    to top,
    #000 20%,
    rgba(0, 0, 0, 0.82) 52%,
    transparent 90%
  );
  mask-image: linear-gradient(
    to top,
    #000 20%,
    rgba(0, 0, 0, 0.82) 52%,
    transparent 90%
  );
  filter: brightness(0.8) contrast(1.06) saturate(0.78)
    drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

/* =========================================================
   ENLACE "i" — acceso discreto a una página de información
   (front-page.php, sección de inscripciones). Pensado para ir
   bajo un subtítulo sin competir con el CTA principal: texto
   pequeño y apagado, y la "i" en un círculo dorado fino que se
   enciende al pasar por encima.
   ========================================================= */
.mod-info-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(240, 237, 232, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mod-info-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  color: var(--mod-gold);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mod-info-link:hover,
.mod-info-link:focus-visible { color: var(--mod-white); }
.mod-info-link:hover .mod-info-link__icon,
.mod-info-link:focus-visible .mod-info-link__icon {
  border-color: var(--mod-gold);
  background: rgba(201, 168, 76, 0.12);
}

/* =========================================================
   NAVBAR
   ========================================================= */
#site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* Barra en caja separada de los bordes de la ventana, como la referencia
     del cliente (19-09-2026): 1rem arriba y 1.25rem a los lados. */
  padding: 1rem 1.25rem 0;
}

/* Barra a todo el ancho, pegada arriba, oscura y translúcida (patrón de
   cabecera tipo portal de juego). Sin bordes redondeados ni márgenes: el
   logo sobresale por debajo de la barra, ver .mod-nav__logo. */
#site-header > nav.mod-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: calc(var(--nav-h) - 1rem); /* + el margen superior del header = --nav-h */
  max-width: 100%;
  padding: 0 0.85rem 0 1.25rem;
  /* Caja oscura translúcida con desenfoque, esquinas apenas redondeadas y un
     filete casi invisible. El agua del fondo se intuye a través. */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.4rem;
  background: rgba(16, 17, 22, 0.32); /* menos opaca (19-09-2026) */
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
#site-header.scrolled > nav.mod-nav {
  background: rgba(10, 11, 15, 0.55);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

/* --- Izquierda: logo + enlaces --- */
.mod-nav__left {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-width: 0;
}
.mod-nav__logo {
  display: block;
  flex-shrink: 0;
  height: calc(var(--nav-h) - 2rem); /* dentro de la barra (4.25rem), sin sobresalir */
  margin: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  transition: height 0.35s ease, margin 0.35s ease;
}
.mod-nav__logo img {
  display: block;
  height: 100%;
  width: auto;
}
/* Al condensarse la barra el logo completo (con claim) se queda igual; la
   versión símbolo se probó y se descartó (18-09-2026). */

.mod-nav__links {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 0.25rem;
  background: none;
  font-family: var(--font-label);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.mod-nav__link:hover,
.mod-nav__link:focus-visible {
  color: var(--mod-gold-light);
  background: rgba(255, 255, 255, 0.05);
}
.mod-nav__ext {
  width: 0.7em;
  height: 0.7em;
  margin-top: -0.35em;
  opacity: 0.6;
}
.mod-nav__ico {
  width: 1.1em;
  height: 1.1em;
  opacity: 0.9;
}
.mod-nav__chev {
  width: 0.8em;
  height: 0.8em;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

/* --- Derecha: idioma, live, CTA, hamburguesa --- */
.mod-nav__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.mod-nav__sep {
  display: none;
  width: 1px;
  height: 1.5rem;
  background: rgba(255, 255, 255, 0.14);
}

/* Desplegable (idioma) — abre por hover en desktop y por click/tap (JS,
   clase .open, ver initNavDropdowns en assets/js/mod.js) */
.mod-nav__dd {
  position: relative;
  display: none;
}
.mod-nav__dd-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 11rem;
  padding: 0.4rem 0;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 14, 20, 0.97);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
/* Puente invisible para no perder el hover entre el botón y el panel */
.mod-nav__dd-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.6rem;
  height: 0.6rem;
}
.mod-nav__dd.open > .mod-nav__dd-menu,
.mod-nav__dd:hover > .mod-nav__dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.mod-nav__dd.open .mod-nav__chev,
.mod-nav__dd:hover .mod-nav__chev {
  transform: rotate(180deg);
}

/* Lista de idiomas dentro del desplegable (Polylang con banderas + nombres).
   Sobrescribe el estilo "banderas circulares" de .mod-lang-switcher. */
.mod-nav__dd .mod-lang-switcher--dd ul {
  flex-direction: column !important;
  align-items: stretch;
  gap: 0;
}
.mod-nav__dd .mod-lang-switcher--dd li a {
  width: auto;
  height: auto;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  border: 0;
  border-radius: 0;
  opacity: 1;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(240, 237, 232, 0.85);
  white-space: nowrap;
}
.mod-nav__dd .mod-lang-switcher--dd li a img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mod-nav__dd .mod-lang-switcher--dd li a span {
  margin: 0 !important;
}
.mod-nav__dd .mod-lang-switcher--dd li a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff;
  opacity: 1;
  border-color: transparent;
}
.mod-nav__dd .mod-lang-switcher--dd li.current-lang a {
  color: var(--mod-gold);
  box-shadow: none !important;
  border-color: transparent;
}

/* Live (opcional) */
.mod-nav__live {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(204, 31, 31, 0.6);
  background: rgba(204, 31, 31, 0.12);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mod-white);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.mod-nav__live:hover {
  background: rgba(204, 31, 31, 0.28);
}
.mod-nav__live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mod-red);
  animation: mod-nav-pulse 1.6s ease-in-out infinite;
}

/* CTA rectangular dorada RELLENA (el botón amarillo de la referencia). Se
   probó en contorno para no competir con la CTA del Hero y el cliente
   prefirió copiar la referencia tal cual (18-09-2026). */
.mod-nav__cta {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.35rem;
  border-radius: 0.5rem; /* mismo radio que .mod-btn (coherencia, 19-09-2026) */
  border: 0;
  background: linear-gradient(180deg, var(--mod-gold-light) 0%, var(--mod-gold) 100%);
  color: var(--mod-black);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mod-nav__cta:hover,
.mod-nav__cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 168, 76, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--mod-black);
}
.mod-nav__cta--block {
  display: flex;
  width: 100%;
  background: linear-gradient(180deg, var(--mod-gold-light) 0%, var(--mod-gold) 100%);
  color: var(--mod-black);
  border-color: transparent;
}

/* Hamburguesa (móvil) */
.mod-nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  color: #fff;
  cursor: pointer;
}

@media (min-width: 640px) {
  .mod-nav__cta { display: inline-flex; }
}
@media (min-width: 768px) {
  .mod-nav__live { display: inline-flex; }
}
@media (min-width: 1024px) {
  .mod-nav__links,
  .mod-nav__dd { display: flex; }
  .mod-nav__sep { display: block; }
  .mod-nav__burger { display: none; }
}
@media (max-width: 639.98px) {
  #site-header { padding: 0.5rem 0.5rem 0; }
  #site-header > nav.mod-nav { height: calc(var(--nav-h) - 0.5rem); padding: 0 0.75rem 0 0.75rem; }
  .mod-nav__logo {
    height: calc(var(--nav-h) - 2rem);
    margin: 0;
  }
}

/* Logo glow */
.mod-logoglow {
  position: relative;
}
.mod-logoglow::before {
  content: "";
  position: absolute;
  left: -16%;
  right: -16%;
  top: -18%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(255, 224, 150, 0.42),
    rgba(255, 196, 100, 0.14) 55%,
    transparent 74%
  );
  filter: blur(16px);
  animation: mod-logoglow 6s var(--ease-atmo) infinite;
}
@keyframes mod-logoglow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

/* Dropdown "más" */
.mod-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.75rem;
  width: 15rem;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(201, 168, 76, 0.2);
  background: rgba(5, 10, 15, 0.95);
  padding: 0.375rem 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px);
}

/* =========================================================
   MENÚ MÓVIL (.mod-mmenu) — panel bajo la barra, con el mismo margen
   lateral que ella; fondo oscuro con desenfoque, enlaces a todo el ancho
   con 3rem de alto mínimo (fácil de pulsar), CTA y banderas con nombre.
   Se abre con .open (mod.js), que también bloquea el scroll del fondo y
   pinta un velo (body.mod-menu-open::after).
   ========================================================= */
#mobile-menu {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: calc(var(--nav-h) + 0.35rem);
  max-height: calc(100vh - var(--nav-h) - 1rem);
  max-height: calc(100svh - var(--nav-h) - 1rem);
  overflow-y: auto;
  padding: 0.5rem 0 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 14, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
#mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
body.mod-menu-open { overflow: hidden; }
body.mod-menu-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(2, 8, 12, 0.55);
}
.mod-mmenu__list {
  margin: 0;
  padding: 0 0.5rem;
  list-style: none;
}
.mod-mmenu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.4rem;
  font-family: var(--font-label);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mod-mmenu__list li + li .mod-mmenu__link { border-radius: 0; background-image: linear-gradient(90deg, transparent, rgba(240, 237, 232, 0.12) 15%, rgba(240, 237, 232, 0.12) 85%, transparent); background-size: 100% 1px; background-position: top; background-repeat: no-repeat; } /* separador degradado, sin línea recta (19-09-2026) */
.mod-mmenu__link svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  opacity: 0.45;
}
.mod-mmenu__link:hover,
.mod-mmenu__link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--mod-gold-light);
  outline: none;
}
.mod-mmenu__link:focus-visible { box-shadow: inset 0 0 0 2px var(--mod-gold); }
.mod-mmenu__link--live { color: var(--mod-red); }
.mod-mmenu__link--live .mod-nav__live-dot { margin-right: 0.35rem; vertical-align: middle; }
.mod-mmenu__cta { padding: 1rem 1rem 0.25rem; }
.mod-mmenu .mod-lang-switcher--mobile {
  margin: 1rem 1rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(240, 237, 232, 0.1) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
#site-footer {
  position: relative;
  overflow: hidden;
  padding-top: 8rem;
}
#site-footer .mod-footer-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 50% 120%,
    #0f4456 0%,
    #072530 34%,
    #04141b 72%,
    transparent 100%
  );
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  clip: auto;
  white-space: normal;
  background: var(--mod-gold);
  color: var(--mod-black);
  border-radius: 4px;
}

/* =========================================================
   LANGUAGE SWITCHER (Polylang — flags circulares)
   ========================================================= */
.mod-lang-switcher,
.mod-lang-switcher ul,
.mod-lang-switcher li {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}
.mod-lang-switcher::before,
.mod-lang-switcher::after,
.mod-lang-switcher ul::before,
.mod-lang-switcher ul::after,
.mod-lang-switcher li::before,
.mod-lang-switcher li::after {
  display: none !important;
  content: none !important;
  border: none !important;
}
.mod-lang-switcher ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mod-lang-switcher li {
  line-height: 1;
  list-style: none !important;
}
.mod-lang-switcher li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
  text-decoration: none !important;
  padding: 0;
  opacity: 0.5;
}
.mod-lang-switcher li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mod-lang-switcher li.current-lang a {
  border-color: #c9a84c;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.45);
  opacity: 1;
}
.mod-lang-switcher li:not(.current-lang) a:hover {
  opacity: 0.85;
  border-color: rgba(240, 237, 232, 0.3);
}
/* Mobile: flags ligeramente más grandes */
.mod-lang-switcher--mobile li a {
  width: 32px;
  height: 32px;
}
/* Menú móvil nuevo: píldoras bandera + nombre (sobrescribe lo anterior) */
.mod-mmenu .mod-lang-switcher--mobile ul { justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.mod-mmenu .mod-lang-switcher--mobile li a {
  width: auto;
  height: auto;
  min-height: 2.5rem;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 237, 232, 0.16);
  opacity: 0.75;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}
.mod-mmenu .mod-lang-switcher--mobile li a img { width: 20px; height: 20px; border-radius: 50%; }
.mod-mmenu .mod-lang-switcher--mobile li a span { margin: 0 !important; }
.mod-mmenu .mod-lang-switcher--mobile li.current-lang a { border-color: var(--mod-gold); opacity: 1; box-shadow: none !important; }

/* =========================================================
   CONTENIDO GENÉRICO (page.php) — estilos base para el editor
   de bloques cuando una página no trae su propia plantilla.
   ========================================================= */
.mod-page-content {
  color: rgba(240, 237, 232, 0.75);
  line-height: 1.7;
}
.mod-page-content > * + * { margin-top: 1.25em; }
.mod-page-content h2,
.mod-page-content h3 {
  font-family: "Anton", "Bebas Neue", Impact, sans-serif;
  color: var(--mod-white);
  letter-spacing: 0.02em;
}
.mod-page-content h2 { font-size: 1.75rem; }
.mod-page-content h3 { font-size: 1.35rem; }
.mod-page-content ul,
.mod-page-content ol { padding-left: 1.25em; }
.mod-page-content li + li { margin-top: 0.4em; }
.mod-page-content strong { color: var(--mod-white); }
.mod-page-content a {
  color: var(--mod-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mod-page-content a:hover { color: var(--mod-gold-light); }

/* =========================================================
   REDUCE MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mod-reveal,
  .mod-reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes mod-nav-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* =========================================================
   HERO POSTER — cartel protagonista de la portada
   (front-page.php, área "poster" del Hero). Tres capas:
   flotación (CSS), inclinación 3D + brillo (JS initHeroPoster)
   y reflejo en el agua.
   ========================================================= */
.mod-poster {
  position: relative;
  --tilt-x: 0deg;   /* rotateX, lo escribe el JS */
  --tilt-y: 0deg;   /* rotateY */
  --glare-x: 50%;   /* posición del brillo */
  --glare-y: 30%;
  --glare-o: 0;     /* opacidad del brillo (0 en reposo) */
}
.mod-poster__glow {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 168, 76, 0.28), rgba(0, 229, 255, 0.08) 55%, transparent 74%);
  filter: blur(26px);
  animation: mod-poster-glow 5s ease-in-out infinite;
}
@keyframes mod-poster-glow {
  0%, 100% { opacity: 0.6; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
.mod-poster__float {
  position: relative;
  z-index: 1;
  perspective: 1200px;
  animation: mod-poster-float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes mod-poster-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%      { transform: translateY(-14px) rotate(0.4deg); }
}
.mod-poster__card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: none; /* sin sombra proyectada bajo el cartel (petición 19-09-2026); el halo dorado de .mod-poster__glow se mantiene */
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out, box-shadow 0.3s ease;
}
.mod-poster.is-hover .mod-poster__card {
  box-shadow: none;
}
.mod-poster__card img {
  display: block;
  width: 100%;
  transform: translateZ(0);
}
.mod-poster__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--glare-o);
  background: radial-gradient(
    38% 30% at var(--glare-x) var(--glare-y),
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.08) 45%,
    transparent 70%
  );
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
}
/* Reflejo: copia invertida, comprimida y desvanecida bajo el cartel, con
   una ondulación sutil (efecto agua) */
.mod-poster__reflection {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 100%;
  height: 34%;
  margin-top: 0.9rem;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.42;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  filter: blur(2px) saturate(0.8);
}
.mod-poster__reflection img {
  display: block;
  width: 100%;
  border-radius: 1rem;
  transform-origin: bottom center;
  animation: mod-poster-ripple 4.5s ease-in-out infinite;
}
@keyframes mod-poster-ripple {
  0%, 100% { transform: scaleY(1) skewX(0deg); }
  50%      { transform: scaleY(1.04) skewX(0.8deg); }
}
/* Con el reflejo, el área del cartel necesita hueco por debajo */
/* Móvil/tablet (<1024px): el cartel va detrás del texto, así que destaca
   como PIEZA ENMARCADA: cabe entero en la pantalla del teléfono (alto ≈ 1,6 ×
   ancho → ancho máx. = 72vh × 0,62), centrado, con halo más intenso y marco
   dorado. Sin reflejo (es un adorno de escritorio; en móvil se veía raro
   bajo el botón). La flotación (.mod-poster__float) se mantiene. */
@media (max-width: 1023.98px) {
  .mod-hero-area-poster {
    max-width: min(440px, calc(72vh * 0.62));
    padding-bottom: 0;
    margin-bottom: 0.75rem;
  }
  .mod-poster__glow {
    inset: -18%;
    background: radial-gradient(closest-side, rgba(201, 168, 76, 0.45), rgba(0, 229, 255, 0.14) 55%, transparent 74%);
  }
  .mod-poster__card {
    border-radius: 1rem;
    border-color: rgba(201, 168, 76, 0.5);
    box-shadow: none; /* tampoco en móvil (19-09-2026) */
  }
  .mod-poster__reflection { display: none; }
}
@media (min-width: 1024px) {
  .mod-hero-area-poster { padding-bottom: 0; margin-bottom: 0; } /* sin reflejo, sin hueco */
}
@media (prefers-reduced-motion: reduce) {
  .mod-poster__float,
  .mod-poster__glow,
  .mod-poster__reflection img { animation: none; }
  .mod-poster__card { transform: none; transition: none; }
  .mod-poster__glare { display: none; }
}/* Tope por altura de ventana: el cartel es protagonista pero tiene que verse
   ENTERO sin hacer scroll (barra + aire superior + reflejo ≈ 13rem; el
   cartel tiene proporción ~0,62). En monitores altos llega a los 520px del
   max-w de Tailwind; en portátiles de 900px se queda en ~390px. */
@media (min-width: 1024px) {
  /* 19-09-2026: con el Hero más compacto, el cartel crece: hasta 600px y
     menos descuento de altura (barra + aire ≈ 9rem).
     20-09-2026 ("más encajado en pantalla"): el cartel se ajusta a la ALTURA
     real disponible — 100svh menos barra + aire arriba y abajo (≈ 10rem) —
     con su proporción real (568×803 ≈ 0,707, no 0,62: con 0,62 se quedaba
     corto en portátiles) y un tope de 720px para monitores grandes, donde
     antes el tope de 600px dejaba una franja vacía bajo el Hero. El ancho
     de columna del grid (50 % del contenedor) sigue siendo el otro límite. */
  .mod-hero-area-poster { max-width: min(720px, calc((100svh - 10rem) * 0.707)); }
}

/* =========================================================
   CTA HERO — "Inscríbete ahora" destacada (front-page.php)
   Halo dorado pulsante + destello que barre el botón cada pocos
   segundos + flecha que se desplaza al pasar el ratón.
   ========================================================= */
.mod-cta-hero {
  position: relative;
  overflow: hidden;
  gap: 0.6rem;
  padding: 1rem 2.4rem;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  isolation: isolate;
  animation: mod-cta-halo 2.6s ease-in-out infinite;
}
@keyframes mod-cta-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.55), 0 0 22px rgba(201, 168, 76, 0.35); }
  60%      { box-shadow: 0 0 0 14px rgba(201, 168, 76, 0),  0 0 34px rgba(201, 168, 76, 0.55); }
}
.mod-cta-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 28%;
  z-index: -1;
  transform: skewX(-22deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: mod-cta-shine 4.2s ease-in-out infinite;
}
@keyframes mod-cta-shine {
  0%, 62% { transform: skewX(-22deg) translateX(-120%); }
  82%, 100% { transform: skewX(-22deg) translateX(560%); }
}
.mod-cta-hero__arrow {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.25s ease;
}
.mod-cta-hero:hover .mod-cta-hero__arrow { transform: translateX(4px); }
.mod-cta-hero:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .mod-cta-hero,
  .mod-cta-hero::after { animation: none; }
}

/* =========================================================
   FOOTER — logo acotado (mod_logo_svg() devuelve la imagen a tamaño
   completo; aquí se limita a un ancho razonable).
   ========================================================= */
.mod-footer-logo img {
  width: 190px;
  height: auto;
  display: block;
}


/* Las bandas alternas entre secciones de la portada se probaron y se
   retiraron el 19-09-2026: el cliente quiere el fondo homogéneo, con UNA
   excepción de dos secciones, Premium (#premium, "Vota tu crew") y
   Vídeos (#mejores-momentos, "Revive los mejores momentos"), que sí
   llevan la banda ligeramente más clara con filete arriba y abajo. */
main > section#premium::before,
main > section#mejores-momentos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Sin filetes y con entrada/salida en degradado: la banda se nota como
     tono, no como corte de sección (19-09-2026). */
  background: linear-gradient(180deg, rgba(240, 237, 232, 0) 0%, rgba(240, 237, 232, 0.045) 18%, rgba(240, 237, 232, 0.03) 60%, rgba(240, 237, 232, 0.04) 82%, rgba(240, 237, 232, 0) 100%);
}

/* Figura de bailarín como imagen de un bloque de 2 columnas (texto + figura):
   Vídeos (#mejores-momentos, bailarin_01) y Reglamento (#reglamento,
   bailarin_04), 19-09-2026. Altura acotada para que la figura quede en
   proporción con el texto y la sección no se dispare de alto (son retratos
   ~3:4 que a ancho de columna medían más de 700px). Centrada en su columna
   y con sombra para despegarla del agua. */
.mod-figure { display: flex; justify-content: center; }
.mod-figure__img {
  width: auto;
  max-width: 100%;
  max-height: 380px;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
}
@media (min-width: 640px)  { .mod-figure__img { max-height: 460px; } }
@media (min-width: 1024px) {
  .mod-figure__img { max-height: 520px; }
  /* Figura a la derecha del texto (Reglamento, Vídeos): pegada al lado del
     texto en vez de centrada en su mitad, que dejaba un vacío enorme entre
     columnas con el texto alineado a la izquierda (19-09-2026). En móvil
     sigue centrada, como el texto. */
  .mod-figure--start { justify-content: flex-start; padding-left: 1rem; }
}

/* Hover unificado: botones */
.mod-btn:hover,
.mod-btn:focus-visible { transform: translateY(-2px); }

/* =========================================================
   ENTRADAS (.mod-ent-section) — sin tarjeta; con imagen del panel, foto a
   sangre fundida con el agua (mismo tratamiento que Masterclass) y texto
   centrado encima (front-page.php #entradas).
   ========================================================= */
.mod-page .mod-ent-section--img,
.mod-ent-section--img {
  padding: 0;
  min-height: 480px; /* altura fija (antes 70vh); con la foto visible a la derecha, algo más de presencia (19-09-2026) */
  display: flex;
  align-items: center;
}
.mod-ent-section--img > .mod-container {
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* Vuelta de diseño 19-09-2026 ("quedaba pobre"): mismo tratamiento que el
   vídeo de Masterclass y el campeón destacado. La foto del auditorio, al
   ancho del contenedor, se ve de verdad (antes un velo radial la apagaba
   casi por completo), fundida con el agua por los cuatro bordes y con el
   tinte degradado de izquierda a derecha; el texto va a la izquierda, sobre
   la parte oscura, y la foto respira a la derecha. En móvil, centrado. */
.mod-ent__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100%, max(1380px, 72vw));
  transform: translateX(-50%);
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.mod-ent__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%; /* menos techo, más escenario y patio de butacas */
  opacity: 0.85;
  filter: saturate(0.9);
}
.mod-ent__bg::after { /* mismo tinte que .mod-mcp__bg::after */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 20, 27, 0.9) 0%, rgba(4, 20, 27, 0.7) 34%, rgba(4, 20, 27, 0.25) 64%, rgba(4, 20, 27, 0.05) 100%),
    rgba(8, 44, 58, 0.28);
}
.mod-ent {
  max-width: 36rem;
  margin: 0;
  text-align: left;
}
.mod-ent h2 { text-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
.mod-ent__desc {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  line-height: 1.6;
  color: rgba(240, 237, 232, 0.72);
}
.mod-ent__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
@media (max-width: 639.98px) {
  .mod-ent { margin: 0 auto; text-align: center; }
  .mod-ent__desc { margin-left: auto; margin-right: auto; }
  .mod-ent__cta { justify-content: center; }
}
@media (max-width: 1023.98px) {
  .mod-ent-section--img { min-height: 0; }
  /* Mismo aire interior que Workshops en móvil (.mod-mcp-section). */
  .mod-ent-section--img > .mod-container { padding-top: 4rem; padding-bottom: 5.5rem; }
  /* Foto en móvil/tablet EXACTAMENTE como el fondo de Workshops
     (.mod-mcp__bg, 20-09-2026, a petición: "tiene que salir tipo la sección
     del workshop"). Antes se veía como una mancha turbia: la regla móvil solo
     ponía inset:0 y dejaba el left:50% + translateX(-50%) + width de
     escritorio, así que la foto quedaba desplazada media pantalla a la
     izquierda y la máscara de bordes caía donde no tocaba. Aquí se reinicia
     esa geometría: caja a sangre de la sección, máscara de escritorio
     (fundido por los cuatro bordes) intacta, misma opacidad/filtro que el
     vídeo de Workshops y el mismo velo uniforme y denso para leer el texto
     centrado. */
  .mod-ent__bg {
    inset: 0;
    left: 0;
    width: auto;
    transform: none;
  }
  .mod-ent__bg img {
    object-position: center 60%;
    opacity: 0.72;
    filter: saturate(0.75) brightness(0.9);
  }
  .mod-ent__bg::after { background: rgba(4, 20, 27, 0.72); }
}
@media (max-width: 479.98px) { .mod-ent__cta .mod-btn { width: 100%; } }/* Con la barra de administración de WordPress (usuario logueado), la
   cabecera fija baja para no quedar tapada por ella (32px escritorio,
   46px en ≤782px, alturas propias de WP). Los visitantes no la tienen. */
body.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #site-header { top: 46px; } }

/* =========================================================
   MASTERCLASS · PRÓXIMAMENTE (.mod-mcp-section) — vídeo a sangre como
   fondo de toda la sección, texto a la izquierda encima (front-page.php).
   ========================================================= */
.mod-page .mod-mcp-section,
.mod-mcp-section {
  padding: 0;
  min-height: 640px; /* antes 78vh/82vh: altura fija para que no crezca con pantallas altas (19-09-2026) */
  display: flex;
  align-items: center;
}
.mod-mcp-section > .mod-container {
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
/* El vídeo se FUNDE con el agua del fondo (19-09-2026): sin fondo sólido,
   máscara que desvanece los cuatro bordes (así el agua global asoma por
   los lados y el vídeo parece emerger de ella), algo de transparencia y
   un tinte del mismo tono. */
.mod-mcp__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.mod-mcp__bg video,
.mod-mcp__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(0.75) brightness(0.9);
}
.mod-mcp__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 20, 27, 0.9) 0%, rgba(4, 20, 27, 0.7) 34%, rgba(4, 20, 27, 0.25) 64%, rgba(4, 20, 27, 0.05) 100%),
    rgba(8, 44, 58, 0.28); /* tinte agua */
}
.mod-mcp { max-width: none; }
.mod-mcp__text { max-width: 36rem; text-align: left; }
.mod-mcp__h2 {
  margin: 0;
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(3rem, 5.5vw, 4.75rem);
  color: var(--mod-white);
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.mod-mcp__date {
  margin: 0.2rem 0 0;
  font-family: var(--font-impact);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--mod-gold);
}
.mod-mcp__lead {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
  color: rgba(240, 237, 232, 0.9);
}
.mod-mcp__soon {
  margin: 0.75rem 0 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(240, 237, 232, 0.65);
}
.mod-mcp__soon strong { color: var(--mod-gold-light); font-weight: 600; }
.mod-mcp__btn {
  margin-top: 1.5rem;
  min-width: min(22rem, 100%);
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.mod-mcp__meta {
  margin: 0.9rem 0 0;
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.45);
}
@media (max-width: 1023.98px) {
  .mod-mcp-section { min-height: 0; }
  .mod-mcp-section > .mod-container { padding-top: 4rem; padding-bottom: 5.5rem; }
  .mod-mcp__bg::after {
    background: rgba(4, 20, 27, 0.72);
  }
  /* El vídeo NO va a ancho completo en móvil: conserva la máscara de
     escritorio (fundido por los cuatro bordes, ver .mod-mcp__bg), como pidió
     el cliente (19-09-2026). Solo cambia el velo, uniforme y más denso, para
     leer el texto centrado. */
  .mod-mcp__text { text-align: center; margin: 0 auto; }
  .mod-mcp__soon { margin-left: auto; margin-right: auto; }
}
@media (max-width: 479.98px) { .mod-mcp__btn { width: 100%; } }
/* Aire entre las secciones a sangre (Masterclass y Entradas) y sus vecinas:
   al ir sin padding propio quedaban pegadas; con margen se ve el agua entre
   ellas (19-09-2026). El margen replica EXACTAMENTE el padding de
   .mod-page .mod-section (2.5rem / 3.5rem desde 640px) para que el hueco
   con los bloques vecinos sea el mismo que entre cualquier otro par de
   secciones de la portada (7rem en escritorio). */
.mod-page .mod-mcp-section,
.mod-page .mod-ent-section--img {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
/* Móvil/tablet: sin altura mínima (70/78vh) ni tanto aire interior — con
   el contenido centrado en esa altura quedaban 300px de vacío entre estas
   secciones y las vecinas (19-09-2026). El fondo sigue cubriendo todo. */
@media (max-width: 1023.98px) {
  .mod-page .mod-mcp-section,
  .mod-page .mod-ent-section--img { min-height: 0; }
  .mod-mcp-section > .mod-container,
  .mod-ent-section--img > .mod-container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}
/* (A partir de 1024px, en cualquier orientación, rige la altura fija en px
   de las reglas base: 640px Masterclass, 520px Entradas.) */
@media (min-width: 640px) {
  .mod-page .mod-mcp-section,
  .mod-page .mod-ent-section--img {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
}

/* Hero — fecha de competición con efecto (19-09-2026): en la misma fila
   que el LIVE, sin cambiar tamaño ni posición; solo el degradado dorado
   con destello (mod-gold-text + shimmer) y un brillo suave que late. */
.mod-hero-date {
  white-space: nowrap;
  animation: mod-shimmer 3s linear infinite, mod-hero-date-glow 3.6s ease-in-out infinite;
}
@keyframes mod-hero-date-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.18)); }
  50%      { filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.5)); }
}
@media (prefers-reduced-motion: reduce) { .mod-hero-date { animation: none; } }

/* Hero — cuenta atrás SIN cajas (19-09-2026): números grandes separados por
   filetes verticales finos; ligera y en la línea del resto de bloques. */
.mod-cd-unit {
  position: relative;
  padding: 0.15rem 1.1rem;
}
.mod-cd-unit:first-child { padding-left: 0; }
.mod-cd-unit:last-child  { padding-right: 0; }
.mod-cd-unit + .mod-cd-unit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(240, 237, 232, 0.16);
}
/* Móvil: la cuenta atrás NO se estira a todo el ancho (las cifras quedaban
   desperdigadas con filetes muy separados); grupo compacto y centrado, con
   cifras algo más contenidas y las etiquetas pegadas (19-09-2026). */
@media (max-width: 639.98px) {
  #cd-units { width: auto; justify-content: center; }
  .mod-cd-unit { flex: 0 0 auto; padding: 0.1rem 0.85rem; }
  .mod-cd-unit .mod-impact { font-size: 2rem; }
  .mod-cd-unit + .mod-cd-unit::before { top: 18%; bottom: 18%; }
}
/* Botón del Hero a su tamaño natural (sin ancho fijo) */
.mod-hero-grid .mod-cta-hero { min-width: 0; }


/* =========================================================
   HORARIOS — agenda sin tarjeta (front-page.php #horarios, 19-09-2026)
   Filas: filete de color por categoría · categoría / fecha grande /
   horario · flecha. Separadas por líneas finas; hover sutil.
   ========================================================= */
@media (min-width: 1024px) {
  .mod-horarios-grid { grid-template-columns: 5fr 7fr; }
}
.mod-agenda {
  margin: 0;
  padding: 0;
  list-style: none;
  background-image: var(--mod-rule-h); /* filete superior degradado (sin líneas rectas, 19-09-2026) */
  background-size: 100% 1px;
  background-position: top;
  background-repeat: no-repeat;
  container-type: inline-size; /* la fecha de cada fila se escala al ancho de la lista (cqw), ver .mod-agenda__day */
}
.mod-agenda__row {
  --tone: var(--mod-gold);
  position: relative;
  display: grid;
  grid-template-columns: 3px 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0.5rem 1.35rem 0;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.mod-agenda__row::after { /* filete inferior degradado */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--mod-rule-h);
  pointer-events: none;
}
.mod-agenda__row[data-tone="cyan"] { --tone: var(--mod-cyan); }
.mod-agenda__row[data-tone="gold"] { --tone: var(--mod-gold); }
.mod-agenda__row[data-tone="rose"] { --tone: #BC9481; }
.mod-agenda__bar {
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--tone);
  opacity: 0.85;
}
.mod-agenda__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  min-width: 0;
}
.mod-agenda__cat {
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tone);
}
.mod-agenda__day {
  font-family: var(--font-impact);
  text-transform: uppercase;
  line-height: 1;
  /* Siempre en UNA línea (petición 19-09-2026): el tamaño sale del ancho de
     la lista (6.5% de su ancho, entre 1.3rem y 2rem), así "Domingo · 4 de
     julio" cabe entero también en la columna estrecha de escritorio. */
  white-space: nowrap;
  font-size: clamp(1.3rem, 6.5cqw, 2rem);
  color: var(--mod-white);
}
.mod-agenda__time {
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: rgba(240, 237, 232, 0.55);
}
.mod-agenda__arrow {
  width: 1.4rem;
  height: 1.4rem;
  color: rgba(240, 237, 232, 0.35);
  transition: color 0.2s ease, transform 0.2s ease;
}
.mod-agenda__row:hover,
.mod-agenda__row:focus-visible {
  background: linear-gradient(90deg, rgba(240, 237, 232, 0.05), transparent 70%);
  padding-left: 0.5rem;
  outline: none;
}
.mod-agenda__row:hover .mod-agenda__arrow,
.mod-agenda__row:focus-visible .mod-agenda__arrow { color: var(--tone); transform: translateX(4px); }
@media (max-width: 639.98px) {
  .mod-agenda__row { gap: 1rem; padding: 1.1rem 0.25rem 1.1rem 0; }
}
/* Patrocinadores: todos los logos en una caja IDÉNTICA (mismo ancho y alto),
   con el logo encajado dentro sin deformarse (object-fit: contain). Antes
   iban por altura (h-20 / h-9, Tailwind) y un logo apaisado como fibwi
   salía tres veces más ancho que uno cuadrado (petición 19-09-2026). */
.mod-sponsor__logo {
  width: 11rem;
  height: 5rem;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 639.98px) {
  .mod-sponsor__logo { width: 7.5rem; height: 3.5rem; }
}

/* =========================================================
   BLOQUES TEXTO + FIGURA (.mod-split*) — orden en móvil/tablet (<1024px):
   encabezado → figura → cuerpo (texto + botones). La columna de texto
   (.mod-split) se disuelve con display:contents, así su encabezado
   (.mod-split__head), la figura (.mod-split-figure, hermana en el grid) y
   el cuerpo (.mod-split__body) pasan a ser hijos directos del grid de la
   sección y se ordenan con `order`. En escritorio no cambia nada: la
   columna vuelve a ser un bloque normal. Los .mod-reveal van en head/body
   (un display:contents no puede animar opacidad). Usado en Competición,
   Reglamento, Concurso, Premium, Vídeos y Edición (19-09-2026).
   ========================================================= */
@media (max-width: 1023.98px) {
  .mod-split-grid { gap: 2rem; }
  .mod-split { display: contents; }
  .mod-split__head { order: 1; }
  .mod-split-figure { order: 2; }
  .mod-split__body { order: 3; }
  /* El filete que cierra el encabezado no suma su margen inferior al hueco del grid */
  .mod-split__head > .mod-divider { margin-bottom: 0; }
  .mod-split__body > p:first-child { margin-top: 0; }
}

/* =========================================================
   VÍDEOS EN DIRECTO (.mod-live*) — reordenado 19-09-2026: encabezado a la
   izquierda (4/12) y los dos directos a la derecha (8/12) como fotogramas
   limpios, sin tarjeta ni velo ni play encima; la acción va debajo de cada
   fotograma como pie en estilo etiqueta. Apilado y centrado en móvil.
   ========================================================= */
.mod-live { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  /* 1024–1279 (iPad Pro vertical): columna de texto algo más ancha para que
     "Revive el directo del" quepa en una línea; desde 1280, 4/12 + 8/12. */
  .mod-live { grid-template-columns: 5fr 7fr; column-gap: 3rem; align-items: center; }
}
@media (min-width: 1280px) {
  .mod-live { grid-template-columns: 4fr 8fr; column-gap: 4rem; }
}
.mod-live__head { text-align: center; }
@media (min-width: 1024px) { .mod-live__head { text-align: left; } }
.mod-live__items { display: grid; gap: 2rem; }
@media (min-width: 640px) {
  .mod-live__items { grid-template-columns: 1fr 1fr; }
  .mod-live__items--single { grid-template-columns: minmax(0, 32rem); justify-content: center; }
}
/* Es <button> (abre el modal in-page) o <a> (enlace de respaldo): mismo
   aspecto en ambos casos, de ahí el reset de botón. */
.mod-live__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mod-live__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.25rem;
  background: #030c15;
}
.mod-live__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mod-live__img--empty { background: linear-gradient(180deg, #030c15, #04121e); }
.mod-live__item:hover .mod-live__img { transform: scale(1.04); }
.mod-live__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mod-gold);
  transition: color 0.2s ease;
}
@media (min-width: 1024px) { .mod-live__caption { justify-content: flex-start; } }
.mod-live__caption svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }
.mod-live__item:hover .mod-live__caption,
.mod-live__item:focus-visible .mod-live__caption { color: var(--mod-gold-light); }
.mod-live__item:focus-visible { outline: 2px solid var(--mod-gold); outline-offset: 6px; }
/* Reproduciendo EN LÍNEA (20-09-2026): initLiveInlineVideo() sustituye el
   <button> por un <div .mod-live__item--playing> con el iframe llenando el
   mismo hueco 16:9 y el título del vídeo como pie (mismo estilo de etiqueta,
   en blanco tenue porque ya no es una acción). */
.mod-live__item--playing { cursor: default; }
.mod-live__item--playing .mod-live__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.mod-live__caption--playing,
.mod-live__item--playing:hover .mod-live__caption { color: rgba(240, 237, 232, 0.55); }
/* Placeholder cuando no hay directo: marco fino, sin animaciones */
.mod-live__media--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(240, 237, 232, 0.14);
  background: rgba(3, 12, 21, 0.5);
}
.mod-live__soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}
.mod-live__soon svg { width: 2.5rem; height: 2.5rem; color: rgba(201, 168, 76, 0.5); }
.mod-live__soon-text { font-family: var(--font-heading); font-weight: 600; color: rgba(240, 237, 232, 0.6); }
.mod-live__soon-date { font-family: var(--font-label); font-size: 0.75rem; color: rgba(240, 237, 232, 0.35); }

/* =========================================================
   CAMPEONES (.mod-champ*) — rediseño 19-09-2026, en coherencia con el resto
   de la portada: sin tarjeta redondeada con anillo ni píldora con emoji.
   Destacado = fotograma a sangre con los bordes fundidos con el agua (mismo
   tratamiento que Masterclass/Entradas) y el texto DEBAJO, no encima; el
   resto = lista de filas con filete (como la agenda de Horarios): miniatura
   pequeña + etiqueta + nombre + detalle + play. El markup es <button>/<a>/
   <div> según haya vídeo (front-page.php, $mod_render_champion_card); todo
   son <span> dentro para que el <button> sea HTML válido.
   ========================================================= */
.mod-champ {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
div.mod-champ { cursor: default; }
.mod-champ:focus-visible { outline: 2px solid var(--mod-gold); outline-offset: 6px; }
.mod-champ__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #030c15;
}
.mod-champ__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mod-champ__img--empty { background: linear-gradient(180deg, #030c15, #04121e); }
/* Bucle mudo del destacado: cubre el fotograma (16:9 centrado y recortado
   por el contenedor 21:9) y no captura el ratón, así el clic llega al
   <button> y abre el modal (19-09-2026). */
.mod-champ__loop {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  /* "cover" para un iframe: nunca menor que el contenedor en ninguno de
     los dos ejes, manteniendo 16:9 (unidades de container query; el
     contenedor es .mod-champ__media con container-type:size). */
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  background: transparent;
}
/* En pantallas táctiles (móvil/tablet) no se carga el bucle: la
   reproducción automática no está garantizada (modo ahorro de energía,
   datos) y un reproductor parado se vería como un cuadro negro; ahí queda
   el fotograma, que es el mismo tratamiento visual. */
@media (hover: none) {
  .mod-champ__loop { display: none; }
}
.mod-champ:hover .mod-champ__img { transform: scale(1.04); }
.mod-champ__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid rgba(240, 237, 232, 0.6);
  background: rgba(4, 12, 20, 0.45);
  color: #fff;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.mod-champ__play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; }
.mod-champ:hover .mod-champ__play,
.mod-champ:focus-visible .mod-champ__play {
  border-color: var(--mod-gold);
  background: rgba(201, 168, 76, 0.2);
  transform: translate(-50%, -50%) scale(1.06);
}
.mod-champ__body { display: block; }
.mod-champ__label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mod-gold);
}
.mod-champ__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-impact);
  text-transform: uppercase;
  line-height: 1;
  color: var(--mod-white);
  transition: color 0.2s ease;
}
.mod-champ:hover .mod-champ__name { color: var(--mod-gold-light); }
.mod-champ__flag { width: 1.25rem; height: auto; border-radius: 2px; flex: 0 0 auto; }
.mod-champ__detail {
  display: block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: rgba(240, 237, 232, 0.55);
}

/* Destacado */
/* Destacado con el MISMO tratamiento que el vídeo de Masterclass
   (19-09-2026): el vídeo (bucle mudo, o su fotograma) es el fondo del
   bloque a sangre, fundido con el agua por los cuatro bordes y con el
   mismo tinte degradado de izquierda a derecha; el nombre del crew va
   encima, abajo a la izquierda, en dorado y con más presencia. */
.mod-champ--featured {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
}
@media (min-width: 640px)  { .mod-champ--featured { min-height: 460px; } }
@media (min-width: 1024px) { .mod-champ--featured { min-height: 520px; } }
.mod-champ--featured .mod-champ__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  container-type: size; /* para que el bucle pueda cubrir el área (cqw/cqh) */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.mod-champ--featured .mod-champ__img { opacity: 0.85; }
.mod-champ--featured .mod-champ__media::after { /* mismo tinte que .mod-mcp__bg::after */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 20, 27, 0.9) 0%, rgba(4, 20, 27, 0.7) 34%, rgba(4, 20, 27, 0.25) 64%, rgba(4, 20, 27, 0.05) 100%),
    rgba(8, 44, 58, 0.28);
}
.mod-champ--featured .mod-champ__play { z-index: 3; width: 4.5rem; height: 4.5rem; }
.mod-champ--featured .mod-champ__play svg { width: 1.8rem; height: 1.8rem; }
.mod-champ--featured .mod-champ__body {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  padding: 2.5rem 2.5rem 2.25rem;
}
.mod-champ--featured .mod-champ__label { color: rgba(240, 237, 232, 0.8); }
.mod-champ--featured .mod-champ__name {
  margin-top: 0.6rem;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  color: var(--mod-gold-light);
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}
.mod-champ--featured:hover .mod-champ__name { color: var(--mod-white); }
.mod-champ--featured .mod-champ__detail { margin-top: 0.6rem; color: rgba(240, 237, 232, 0.7); }
@media (max-width: 639.98px) {
  .mod-champ--featured .mod-champ__body { padding: 1.75rem 1.25rem 1.5rem; }
}

/* Lista del resto de campeones */
.mod-champs__list {
  margin-top: 2.5rem;
  background-image: var(--mod-rule-h); /* filete superior degradado (sin líneas rectas, 19-09-2026) */
  background-size: 100% 1px;
  background-position: top;
  background-repeat: no-repeat;
}
@media (min-width: 1024px) {
  .mod-champs__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
}
.mod-champ--row {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem 0;
}
.mod-champ--row::after { /* filete inferior degradado */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--mod-rule-h);
  pointer-events: none;
}
.mod-champ--row .mod-champ__media { aspect-ratio: 16 / 9; border-radius: 0.25rem; }
.mod-champ--row .mod-champ__play { width: 2.5rem; height: 2.5rem; }
.mod-champ--row .mod-champ__play svg { width: 1rem; height: 1rem; margin-left: 0.15rem; }
.mod-champ--row .mod-champ__name { margin-top: 0.3rem; font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
.mod-champ--row .mod-champ__detail { margin-top: 0.3rem; }
@media (max-width: 639.98px) {
  .mod-champ--row { grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.9rem 0; }
}

/* Horarios — columna figura + texto (19-09-2026). El bailarín (bailarin_03)
   ya no va detrás del texto como capa de fondo, sino como imagen del bloque:
   apilado sobre el texto hasta 1279px y en la misma fila, a su izquierda, a
   partir de 1280px (donde la columna de texto pasa a 8/12 y la agenda a
   4/12 para dejarle sitio). Alineado con el texto (no centrado) porque
   este bloque va a la izquierda también en móvil. La sombra de letra que
   había para leerse sobre el bailarín ya no hace falta. */
/* <1024px: el contenedor .mod-horarios-lead se disuelve (display:contents)
   para que encabezado, figura, texto, AGENDA y botón sean hijos directos
   del grid de la sección y se ordenen así (el botón al final, después de la
   agenda, petición 19-09-2026). En ≥1024px las reglas de abajo recolocan
   todo por áreas. */
.mod-horarios-lead { display: contents; }
@media (max-width: 1023.98px) {
  .mod-horarios-grid { gap: 1.5rem; }
  .mod-horarios-head   { order: 1; }
  .mod-figure--horarios { order: 2; }
  .mod-horarios-body   { order: 3; }
  .mod-horarios-agenda { order: 4; margin-top: 1rem; }
  .mod-horarios-cta    { order: 5; margin-top: 0.5rem; }
}
.mod-figure--horarios { justify-content: center; } /* móvil: centrada como el texto */
@media (min-width: 1024px) { .mod-figure--horarios { justify-content: flex-start; } }
.mod-figure--horarios .mod-figure__img { max-height: 300px; }
@media (min-width: 640px) { .mod-figure--horarios .mod-figure__img { max-height: 340px; } }
/* 1024–1279px (iPad Pro vertical, monitor girado, portátil pequeño):
   la figura ocupa su PROPIA columna a la izquierda, centrada en vertical, y
   a la derecha se apilan título, texto, botón y agenda. Antes la figura iba
   metida entre el título (a tres líneas) y el texto, con la agenda al lado,
   y la composición se desmontaba (19-09-2026). El contenedor .mod-horarios-lead
   se disuelve (display:contents; no lleva animación) para que sus hijos
   entren en las áreas del grid de la sección. Va detrás de la regla de
   1024px de arriba para ganarle por orden. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mod-horarios-grid {
    grid-template-columns: 5fr 7fr;
    grid-template-areas:
      "fig head"
      "fig body"
      "fig cta"
      "fig agenda";
    column-gap: 3rem;
    row-gap: 0;
    align-items: center;
  }
  .mod-horarios-lead { display: contents; }
  .mod-figure--horarios { grid-area: fig; justify-content: center; }
  .mod-figure--horarios .mod-figure__img { max-height: 520px; }
  .mod-horarios-head { grid-area: head; }
  .mod-horarios-body { grid-area: body; margin-top: 1.5rem; }
  .mod-horarios-cta { grid-area: cta; margin-top: 1.75rem; }
  .mod-horarios-agenda { grid-area: agenda; margin-top: 2.5rem; }
}
@media (min-width: 1280px) {
  .mod-horarios-grid { grid-template-columns: 8fr 4fr; }
  /* Grid de áreas: figura a la izquierda ocupando las dos filas, encabezado
     y cuerpo apilados a su derecha (mismo DOM que en móvil, solo cambia la
     colocación). */
  .mod-horarios-lead {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "fig head" "fig body" "fig cta";
    column-gap: 2.5rem;
    row-gap: 0;
    align-items: center;
  }
  .mod-horarios-head { grid-area: head; align-self: end; }
  .mod-horarios-body { grid-area: body; margin-top: 1.5rem; }
  .mod-horarios-cta  { grid-area: cta; align-self: start; margin-top: 1.75rem; }
  .mod-figure--horarios { grid-area: fig; align-self: center; }
  /* En fila flex el ancho del ítem depende de la imagen y "max-width:100%"
     se vuelve circular (la imagen colapsaba a 0): altura fija y sin tope
     de ancho, el ancho sale de la proporción de la figura. */
  .mod-figure--horarios .mod-figure__img {
    height: 460px; max-height: none; max-width: none;
    aspect-ratio: 843 / 1264; /* proporción real de bailarin_03.webp: reserva el ancho antes de cargar y evita el salto de maqueta */
    object-fit: contain;
  }
}

/* =========================================================
   INSCRIPCIONES ABIERTAS (.mod-insc-section) — front-page.php, variante
   "inscripciones_abiertas". Cartel muy atenuado a sangre fundido con el
   agua, "MOD 2027" gigante y dos vías sin tarjetas separadas por filete.
   ========================================================= */
/* Compactada el 19-09-2026 (había que hacer scroll para ver la sección
   entera en escritorio): mismo padding que el resto de bloques, "MOD 2027"
   a la mitad de tamaño y menos aire entre encabezado, texto y las dos vías.
   Objetivo: que quepa en una pantalla de portátil. */
.mod-insc-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.mod-insc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Misma metodología que el vídeo del campeón destacado (19-09-2026): la
     imagen no va a todo el ancho de la pantalla sino al ancho del
     contenedor (.mod-container: max(1380px, 72vw)), centrada, y la máscara
     de abajo le funde los cuatro bordes con el agua. */
  left: 50%;
  right: auto;
  width: min(100%, max(1380px, 72vw));
  transform: translateX(-50%);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.mod-insc__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.32;
  filter: saturate(0.6) brightness(0.8);
}
.mod-insc__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 50% 42%, rgba(4, 20, 27, 0.75) 0%, rgba(4, 20, 27, 0.35) 55%, rgba(4, 20, 27, 0) 100%),
    rgba(8, 44, 58, 0.35);
}
.mod-insc__head {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}
.mod-insc__h2 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--mod-white);
}
.mod-insc__line {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: 0.05em;
  line-height: 1.05;
}
.mod-insc__year {
  margin-top: 0.3rem;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  filter: drop-shadow(0 16px 40px rgba(201, 168, 76, 0.25));
}
.mod-insc__desc {
  margin: 1rem auto 0;
  max-width: 34rem;
  line-height: 1.65;
  color: rgba(240, 237, 232, 0.62);
}
.mod-insc__video {
  max-width: 46rem;
  margin: 2rem auto 0;
}
.mod-insc__video-btn,
.mod-insc__video-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  border: 1px solid rgba(201, 168, 76, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(201, 168, 76, 0.12);
  background: #04141b;
  overflow: hidden;
}
.mod-insc__video-btn {
  position: relative;
  padding: 0;
  cursor: pointer;
}
.mod-insc__video-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.mod-insc__video-btn:hover img,
.mod-insc__video-btn:focus-visible img { opacity: 0.9; transform: scale(1.03); }
.mod-insc__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  color: #04141b;
  background: linear-gradient(135deg, var(--mod-gold-light), var(--mod-gold));
  box-shadow: 0 8px 30px rgba(201, 168, 76, 0.45);
  transition: transform 0.25s ease;
}
.mod-insc__video-play svg { margin-left: 3px; }
.mod-insc__video-btn:hover .mod-insc__video-play { transform: scale(1.08); }
.mod-insc__paths {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 62rem;
  margin: 2.25rem auto 0;
  background-image: var(--mod-rule-h); /* filete superior degradado (sin líneas rectas, 19-09-2026) */
  background-size: 100% 1px;
  background-position: top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .mod-insc__paths { grid-template-columns: 1fr 1fr; }
}
.mod-insc__path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 2rem 0.75rem;
  text-align: center;
}
.mod-insc__path + .mod-insc__path::before {
  content: "";
  position: absolute;
  pointer-events: none;
}
@media (min-width: 768px) { /* separador vertical degradado entre las dos vías */
  .mod-insc__path + .mod-insc__path::before { left: 0; top: 6%; bottom: 6%; width: 1px; background: var(--mod-rule-v); }
}
@media (max-width: 767.98px) { /* apiladas: separador horizontal degradado */
  .mod-insc__path + .mod-insc__path::before { top: 0; left: 8%; right: 8%; height: 1px; background: var(--mod-rule-h); }
}
.mod-insc__label {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mod-gold);
}
.mod-insc__path--main .mod-insc__label { color: var(--mod-gold-light); }
.mod-insc__q {
  margin: 0.9rem 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--mod-white);
}
.mod-insc__p {
  margin: 0.6rem 0 0;
  max-width: 24rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(240, 237, 232, 0.6);
}
.mod-insc__cta {
  margin-top: auto;
  padding-top: 1.1rem;
  width: 100%;
  max-width: 20rem;
}
.mod-insc__cta .mod-btn { width: 100%; }
.mod-insc__note {
  margin: 1rem 0 0;
  font-family: var(--font-label);
  font-size: 0.62rem;
  line-height: 1.5;
  color: rgba(240, 237, 232, 0.4);
}

/* =========================================================
   FORMINATOR · DESPLEGABLES CON BUSCADOR (p. ej. "País")
   El buscador del desplegable se quedaba con el texto claro del tema
   sobre fondo blanco (no se veía lo que se escribía). El CSS de cada
   formulario depende de su clase .forminator-custom-form-{ID} (y en los
   formularios 120/121 esa clase quedó mal copiada), así que aquí se fija
   para todos los formularios a la vez, con los colores de la web.
   ========================================================= */
.forminator-select-dropdown-container--open .forminator-select-dropdown,
.forminator-select-dropdown.select2-dropdown {
  background-color: var(--mod-deep-navy) !important;
  border-color: var(--mod-gold) !important;
}
.forminator-select-dropdown .select2-search,
.forminator-select-dropdown .select2-search--dropdown {
  background-color: transparent !important;
}
.forminator-select-dropdown .select2-search input,
.forminator-select-dropdown .select2-search__field {
  background-color: var(--mod-black) !important;
  color: var(--mod-white) !important;
  -webkit-text-fill-color: var(--mod-white) !important;
  caret-color: var(--mod-gold-light);
  border: 1px solid var(--mod-gold-light) !important;
  border-radius: 4px !important;
  font-family: var(--font-label);
  font-size: 14px;
}
.forminator-select-dropdown .select2-search input::placeholder,
.forminator-select-dropdown .select2-search__field::placeholder {
  color: rgba(240, 237, 232, 0.45) !important;
  -webkit-text-fill-color: rgba(240, 237, 232, 0.45) !important;
}
.forminator-select-dropdown .select2-search input:focus,
.forminator-select-dropdown .select2-search__field:focus {
  border-color: var(--mod-gold) !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25) !important;
}
.forminator-select-dropdown .select2-results__option {
  color: var(--mod-white) !important;
}
.forminator-select-dropdown .select2-results__option--highlighted,
.forminator-select-dropdown .select2-results__option[aria-selected="true"] {
  background-color: rgba(201, 168, 76, 0.3) !important;
  color: var(--mod-white) !important;
}
.forminator-select-dropdown .select2-results__message {
  color: rgba(240, 237, 232, 0.6) !important;
}

/* =========================================================
   AGENCIA OFICIAL DE VIAJES (#agencia) — bajo Horarios (01-10-2026).
   Patrón .mod-split: a la izquierda el texto, con el logo de la agencia
   a la izquierda del contacto (o su nombre, mientras no haya logo); a la
   derecha la foto de bailarines (.mod-figure--agencia). Un solo enlace al
   email y un solo botón (a la web de la agencia). Sin tarjetas ni marcos.
   ========================================================= */
/* Fila de contacto: logo a la izquierda, centrado en vertical, y a su
   derecha una columna con la frase, el email y el botón (02-10-2026). En
   móvil estrecho se apilan centrados: logo arriba, columna debajo. */
.mod-agency__contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  margin-top: 2rem;
}
@media (min-width: 1024px) { .mod-agency__contact-row { justify-content: flex-start; } }
.mod-agency__contact-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 0;
  text-align: left;
}
.mod-agency__contact-col .mod-btn { margin-top: 0.25rem; }
.mod-agency__logo {
  display: block;
  flex-shrink: 0;
  width: 9rem;
  height: auto;
  max-height: 6rem;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}
@media (min-width: 640px) { .mod-agency__logo { width: 11rem; max-height: 7rem; } }
.mod-agency__wordmark {
  flex-shrink: 0;
  font-family: var(--font-impact);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--mod-gold);
}
.mod-agency__contact {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(240, 237, 232, 0.6);
}
.mod-agency__contact span { display: block; }
@media (max-width: 479.98px) {
  .mod-agency__contact-row { flex-direction: column; gap: 1.5rem; }
  .mod-agency__contact-col { align-items: center; text-align: center; }
}
.mod-agency__email {
  display: inline-block;
  margin-top: 0.15rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mod-gold-light);
  text-decoration: underline;
  text-decoration-color: rgba(232, 201, 106, 0.35);
  text-underline-offset: 0.3em;
  transition: color .2s ease, text-decoration-color .2s ease;
  overflow-wrap: anywhere;
}
.mod-agency__email:hover { color: var(--mod-white); text-decoration-color: var(--mod-gold); }

/* Foto apaisada (grupo): ocupa el ancho de su columna en vez de la altura
   máxima pensada para los retratos verticales de .mod-figure__img. */
.mod-figure--agencia .mod-figure__img { width: 100%; max-width: 40rem; max-height: none; }

/* =========================================================
   WORKSHOPS · PROFESORES CONFIRMADOS (.mod-wc*) — 15-10-2026.
   Paso intermedio de Workshops: retratos de los profesores confirmados
   (sin tarjeta, apoyados sobre el agua), con nombre, especialidad y
   descripción; centrados y en tantas columnas como quepan (1 a 4). Acento
   alterno cian/dorado como el bloque de profesores con reserva.
   ========================================================= */
.mod-wc__badge { margin: 3rem 0 1.75rem; text-align: center; }
.mod-wc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
  justify-content: center;
  gap: 2.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mod-wc__item { --wc-tone: var(--mod-cyan); --wc-tone-soft: rgba(0, 229, 255, 0.25); text-align: center; }
.mod-wc__item[data-tone="gold"] { --wc-tone: var(--mod-gold); --wc-tone-soft: rgba(201, 168, 76, 0.3); }
.mod-wc__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--wc-tone-soft);
  background: rgba(5, 10, 15, 0.35);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
}
.mod-wc__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Filete de color en la base del retrato */
.mod-wc__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--wc-tone);
}
.mod-wc__initials {
  font-family: var(--font-impact);
  font-size: 4rem;
  letter-spacing: 0.04em;
  color: var(--wc-tone);
  opacity: 0.55;
}
.mod-wc__name {
  margin: 1.1rem 0 0;
  font-family: var(--font-impact);
  font-size: 1.75rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--mod-white);
}
.mod-wc__style {
  margin: 0.3rem 0 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wc-tone);
}
.mod-wc__desc {
  margin: 0.2rem 0 0;
  font-family: var(--font-label);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(240, 237, 232, 0.5);
}
.mod-wc__note {
  max-width: 36rem;
  margin: 3rem auto 0;
  text-align: center;
  line-height: 1.6;
  color: rgba(240, 237, 232, 0.6);
}
.mod-wc__note strong { color: var(--mod-white); font-weight: 600; }
.mod-wc__note .mod-btn { margin-top: 1.5rem; }
@media (max-width: 479.98px) {
  .mod-wc { grid-template-columns: minmax(0, 15rem); }
}