/* =========================================================
   KULTURA DE BAILE — estilos del sitio
   ---------------------------------------------------------
   Todo el diseño está en este archivo. Los colores, letras y
   espacios se cambian en las VARIABLES de abajo (:root) y se
   aplican solos a todo el sitio.
   Sistema de diseño completo: ../design-system/MASTER.md
   ========================================================= */

/* ----- TIPOGRAFÍAS (copias locales en la carpeta fonts, licencia OFL) ----- */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ----- VARIABLES (colores, letras, espacios) ----- */
:root {
  /* Colores de la marca: noche de baile + dorado del neón KDB */
  --color-fondo: #140B24;          /* morado casi negro */
  --color-superficie: #21143A;     /* tarjetas */
  --color-superficie-2: #2C1B4B;   /* tarjetas destacadas */
  --color-borde: #3D2A62;
  --color-oro: #F5C33B;            /* dorado del letrero KDB: botones y detalles */
  --color-oro-claro: #FFD966;
  --color-magenta: #FF7AB0;        /* acento de las fiestas */
  --color-calabaza: #FF8A3D;       /* naranjo Halloween (eventos): 8,1:1 sobre el fondo */
  --color-calabaza-claro: #FFA366;
  --color-texto: #F7F1FF;
  --color-texto-suave: #C9BCDD;
  --color-sobre-oro: #140B24;      /* texto encima del dorado */
  --color-whatsapp: #25D366;

  /* Un color por sede (los mismos de sus afiches de horarios) */
  --color-vina: #2457D6;
  --color-quilpue: #9B1450;
  --color-valpo: #17663F;

  /* Niveles de las clases */
  --color-principiante: #4ADE9B;
  --color-basico: #6FA8FF;
  --color-intermedio: #FF8FB8;

  /* Letras */
  --fuente-titulos: "Oswald", "Arial Narrow", Impact, sans-serif;
  --fuente-texto: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espacios */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;
  --esp-9: 6rem;

  /* Formas y sombras */
  --radio: 14px;
  --radio-pildora: 999px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  --sombra-alta: 0 18px 40px rgba(0, 0, 0, 0.5);
  --brillo-oro: 0 0 0 1px rgba(245, 195, 59, 0.35), 0 10px 30px rgba(245, 195, 59, 0.18);

  --ancho-max: 1200px;
  --alto-cabecera: 80px;          /* alto de la cabecera en celular (logo más grande) */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 12px); /* los enlaces del menú no quedan tapados por la cabecera */
}

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

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

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--esp-4);
  letter-spacing: 0.01em;
}

p {
  margin: 0 0 var(--esp-4);
}

a {
  color: var(--color-oro);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-oro-claro);
}

/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 3px solid var(--color-oro);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Contenedor centrado con ancho máximo */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}

/* Enlace "Saltar al contenido" (aparece solo con el teclado) */
.saltar {
  position: absolute;
  left: var(--esp-4);
  top: -100px;
  z-index: 200;
  background: var(--color-oro);
  color: var(--color-sobre-oro);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pildora);
  font-weight: 700;
}
.saltar:focus {
  top: var(--esp-4);
}

/* Íconos SVG (estilo Lucide: solo trazo) */
.icono {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icono-relleno {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex-shrink: 0;
}

/* ----- BOTONES ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-pildora);
  border: 2px solid transparent;
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, translate 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  translate: 0 -2px;
}

/* Botón principal: dorado KDB */
.btn-oro {
  background: var(--color-oro);
  color: var(--color-sobre-oro);
  box-shadow: var(--brillo-oro);
}
.btn-oro:hover {
  background: var(--color-oro-claro);
  color: var(--color-sobre-oro);
}

/* Botón secundario: solo borde */
.btn-borde {
  border-color: var(--color-texto-suave);
  color: var(--color-texto);
  background: transparent;
}
.btn-borde:hover {
  border-color: var(--color-oro);
  color: var(--color-oro);
}

/* ----- CABECERA ----- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 11, 36, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
/* Cuando se hace scroll (la clase la pone main.js) */
.cabecera.con-scroll {
  border-bottom-color: var(--color-borde);
  background: rgba(20, 11, 36, 0.96);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--alto-cabecera);
}

/* Logo: círculo KDB + nombre */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--color-texto);
  text-decoration: none;
  min-height: 44px;
}
.logo:hover {
  color: var(--color-texto);
}
.logo-kdb {
  display: block;
  flex-shrink: 0;
  /* Crece con la pantalla: 52 px en celulares chicos, 62 px en la mayoría */
  width: clamp(52px, 16vw, 62px);
  height: auto;
}
.logo-nombre {
  font-family: var(--fuente-titulos);
  font-size: 1rem;                 /* celulares muy chicos (menos de 360 px) */
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.logo-nombre small {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--color-oro);
  margin-top: 4px;
}

@media (min-width: 360px) {
  .logo-nombre {
    font-size: 1.15rem;            /* la mayoría de los celulares */
  }
}

/* Logo de la cabecera: grande arriba de todo (cuelga un poco bajo la barra)
   y normal al bajar por la página o al abrir el menú */
.cabecera .logo-kdb {
  width: clamp(70px, 26vw, 100px);
  margin-bottom: clamp(-36px, -9vw, -20px);   /* el margen negativo hace que cuelgue sin agrandar la barra */
  border-radius: 50%;
  background: var(--color-fondo);  /* el logo es transparente: así se ve parejo sobre el fondo */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: width 0.3s ease, margin 0.3s ease;
}
.cabecera.con-scroll .logo-kdb,
.cabecera:has(.menu.abierto) .logo-kdb {
  width: clamp(52px, 16vw, 62px);
  margin-bottom: 0;
}

/* Menú: en celular se abre con el botón; en computador va en línea */
.menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  background: var(--color-superficie);
  color: var(--color-texto);
  cursor: pointer;
}
.menu-boton .icono {
  width: 24px;
  height: 24px;
}
.menu-boton .icono-cerrar {
  display: none;
}
.menu-boton[aria-expanded="true"] .icono-abrir {
  display: none;
}
.menu-boton[aria-expanded="true"] .icono-cerrar {
  display: block;
}

.menu {
  display: none; /* main.js lo muestra al tocar el botón */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
  padding: var(--esp-3) 1.25rem var(--esp-5);
}
.menu.abierto {
  display: block;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--color-texto);
  text-decoration: none;
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-borde);
}
.menu a:hover {
  color: var(--color-oro);
}
.menu .btn {
  margin-top: var(--esp-4);
  width: 100%;
  border-bottom: 0;
}
/* El botón dorado del menú mantiene su texto oscuro (si no, el color del menú lo pisa) */
.menu .btn-oro,
.menu .btn-oro:hover {
  color: var(--color-sobre-oro);
}

/* Sin JavaScript, el menú se ve siempre (abajo del logo) */
.sin-js .menu {
  display: block;
  position: static;
  border: 0;
  padding: 0 0 var(--esp-4);
}
.sin-js .menu-boton {
  display: none;
}
.sin-js .cabecera-fila {
  flex-wrap: wrap;
}

/* ----- HERO (portada) ----- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--esp-7) 0 var(--esp-8);
}
/* Luces de fiesta de fondo (solo decoración) */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(40% 35% at 85% 20%, rgba(255, 122, 176, 0.22), transparent 70%),
    radial-gradient(35% 30% at 10% 30%, rgba(36, 87, 214, 0.25), transparent 70%),
    radial-gradient(30% 25% at 60% 85%, rgba(245, 195, 59, 0.12), transparent 70%);
  pointer-events: none;
}

.hero-grilla {
  position: relative;
  display: grid;
  gap: var(--esp-7);
  align-items: center;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid rgba(245, 195, 59, 0.45);
  border-radius: var(--radio-pildora);
  color: var(--color-oro);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: var(--esp-4);
}

.hero h1 {
  font-size: clamp(2.6rem, 9vw, 4.8rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: var(--esp-5);
}
.hero h1 .resaltado {
  color: var(--color-oro);
}
.hero h1 .resaltado-magenta {
  color: var(--color-magenta);
}

.hero-bajada {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--color-texto-suave);
  max-width: 36rem;
  margin-bottom: var(--esp-6);
}

.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
}

/* Datos reales de confianza (opiniones, sedes) */
.hero-datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 34rem;
}
.hero-datos li {
  border-left: 2px solid var(--color-oro);
  padding-left: var(--esp-3);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-texto-suave);
}
.hero-datos strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-texto);
  line-height: 1.1;
}

/* Video del inicio (reemplazó a las 2 fotos). Es horizontal (16:9). */
.hero-video {
  position: relative;
  width: 100%;
  max-width: 680px;            /* en tablet no crece más que esto */
  margin-inline: auto;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 9;        /* reserva el espacio antes de que cargue (no salta) */
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-alta), 0 0 60px rgba(255, 122, 176, 0.18);  /* sombra + brillo magenta suave */
}
.hero-video-archivo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botón Pausar / Reproducir (abajo a la derecha del video) */
.video-boton {
  position: absolute;
  right: var(--esp-3);
  bottom: var(--esp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(247, 241, 255, 0.35);
  border-radius: 50%;
  background: rgba(20, 11, 36, 0.7);
  color: var(--color-texto);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.video-boton:hover {
  background: rgba(20, 11, 36, 0.9);
}
/* Sin JavaScript el botón no sirve: queda escondido (atributo hidden en el HTML) */
.video-boton[hidden] {
  display: none;
}
.video-boton .icono {
  width: 20px;
  height: 20px;
}
.video-boton .icono-pausa,
.video-boton .icono-play {
  fill: currentColor;
  stroke: none;
}
.video-boton .icono-play,
.video-boton.en-pausa .icono-pausa {
  display: none;
}
.video-boton.en-pausa .icono-play {
  display: block;
}

/* ----- SECCIONES (común) ----- */
.seccion {
  padding: var(--esp-8) 0;
}
.seccion-alterna {
  background: linear-gradient(180deg, rgba(44, 27, 75, 0.55), rgba(20, 11, 36, 0));
}

.seccion-cabeza {
  max-width: 44rem;
  margin-bottom: var(--esp-7);
}
.seccion-cabeza.centrada {
  margin-inline: auto;
  text-align: center;
}
.antetitulo {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-magenta);
  margin-bottom: var(--esp-3);
}
.seccion h2 {
  font-size: clamp(2rem, 6vw, 3.2rem);
  text-transform: uppercase;
  font-weight: 700;
}
.seccion-cabeza p {
  color: var(--color-texto-suave);
  font-size: 1.1rem;
}

/* ----- TARJETAS ----- */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--esp-5);
}
.tarjeta h3 {
  font-size: 1.45rem;
  text-transform: uppercase;
  margin-bottom: var(--esp-2);
}
.tarjeta p {
  color: var(--color-texto-suave);
  margin: 0;
}
.tarjeta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(245, 195, 59, 0.12);
  color: var(--color-oro);
  margin-bottom: var(--esp-4);
}
.tarjeta-icono .icono {
  width: 26px;
  height: 26px;
}

.grilla-beneficios {
  display: grid;
  gap: var(--esp-4);
}

/* ----- CLASES (estilos de baile) ----- */
.grilla-estilos {
  display: grid;
  gap: var(--esp-4);
}
.estilo-tarjeta {
  position: relative;
  overflow: hidden;
}
.estilo-tarjeta::after {
  /* línea de color abajo de cada tarjeta */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-oro), var(--color-magenta));
}

/* Camino de niveles */
.niveles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--radio);
  background: var(--color-superficie-2);
  border: 1px solid var(--color-borde);
}
.niveles-titulo {
  font-family: var(--fuente-titulos);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: var(--esp-3);
}
.niveles .flecha {
  color: var(--color-texto-suave);
}

/* Etiquetas de nivel (se usan en clases y horarios) */
.nivel {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radio-pildora);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.nivel-principiante { color: var(--color-principiante); }
.nivel-basico { color: var(--color-basico); }
.nivel-intermedio { color: var(--color-intermedio); }

/* ----- HORARIOS ----- */
.aviso-horario {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  background: rgba(74, 222, 155, 0.08);
  border: 1px solid rgba(74, 222, 155, 0.35);
  border-radius: var(--radio);
  padding: var(--esp-4);
  margin-bottom: var(--esp-6);
  color: var(--color-texto);
}
.aviso-horario .icono {
  color: var(--color-principiante);
  margin-top: 3px;
}
.aviso-horario p {
  margin: 0;
}

/* Pestañas de sedes (main.js las muestra; sin JS se ven todas las sedes) */
.pestanas {
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
  padding-bottom: var(--esp-2);
  margin-bottom: var(--esp-5);
}
.pestanas[hidden] {
  display: none;
}
.pestana {
  flex: 1 0 auto;
  min-height: 48px;
  padding: var(--esp-2) var(--esp-5);
  border-radius: var(--radio-pildora);
  border: 2px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pestana:hover {
  border-color: var(--color-texto-suave);
}
.pestana-vina[aria-selected="true"] { background: var(--color-vina); border-color: var(--color-vina); }
.pestana-quilpue[aria-selected="true"] { background: var(--color-quilpue); border-color: var(--color-quilpue); }
.pestana-valpo[aria-selected="true"] { background: var(--color-valpo); border-color: var(--color-valpo); }

.panel-horario {
  border-radius: var(--radio);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  padding: var(--esp-5);
  margin-bottom: var(--esp-5);
  border-top: 6px solid var(--color-borde);
}
.panel-vina { border-top-color: var(--color-vina); }
.panel-quilpue { border-top-color: var(--color-quilpue); }
.panel-valpo { border-top-color: var(--color-valpo); }

.panel-titulo {
  font-size: 1.6rem;
  text-transform: uppercase;
}
.panel-titulo span {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.95rem;
  text-transform: none;
  font-weight: 400;
  color: var(--color-texto-suave);
  margin-top: var(--esp-1);
  letter-spacing: 0;
}

.dias {
  display: grid;
  gap: var(--esp-5);
}
.dia h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-oro);
  margin-bottom: var(--esp-2);
}
.dia ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}

/* Cada clase es un botón que abre WhatsApp con el mensaje listo */
.clase {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "hora estilo reservar"
    "hora nivel reservar";
  align-items: center;
  column-gap: var(--esp-3);
  min-height: 60px;
  padding: var(--esp-2) var(--esp-3);
  border-radius: 12px;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  text-decoration: none;
  transition: border-color 0.2s ease, translate 0.2s ease;
}
.clase:hover {
  color: var(--color-texto);
  border-color: var(--color-oro);
  translate: 0 -2px;
}
.clase .hora {
  grid-area: hora;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-oro);
  min-width: 3.4ch;
}
.clase .estilo {
  grid-area: estilo;
  font-weight: 600;
  line-height: 1.3;
}
.clase .nivel {
  grid-area: nivel;
  justify-self: start;
  margin-top: 2px;
}
.clase .reservar {
  grid-area: reservar;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-oro);
}

.nota-horario {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  margin-top: var(--esp-4);
}

/* ----- VALORES ----- */
.grilla-valores {
  display: grid;
  gap: var(--esp-5) var(--esp-4);   /* más espacio vertical: las cintas sobresalen arriba */
  max-width: 1000px;
  margin-inline: auto;
}
.valor {
  position: relative;
  display: flex;                   /* columna: el botón se va al fondo de la tarjeta */
  flex-direction: column;
  text-align: center;
  padding: var(--esp-6) var(--esp-5);
}
.valor-destacado {
  background: var(--color-superficie-2);
  border-color: var(--color-oro);
  box-shadow: var(--brillo-oro);
}
.valor-cinta {
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  background: var(--color-oro);
  color: var(--color-sobre-oro);
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 14px;
  border-radius: var(--radio-pildora);
  white-space: nowrap;
}
.valor-precio {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.6rem, 8vw, 3.4rem);
  font-weight: 700;
  color: var(--color-texto);
  line-height: 1;
  margin: var(--esp-3) 0 var(--esp-1);
}
.valor-periodo {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  margin-bottom: var(--esp-5);
}
.valor ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-5);
  text-align: left;
  display: grid;
  gap: var(--esp-2);
}
.valor li {
  display: flex;
  gap: var(--esp-2);
  color: var(--color-texto-suave);
}
.valor li .icono {
  color: var(--color-principiante);
  margin-top: 4px;
}
.valor .btn {
  width: 100%;
  margin-top: auto;                /* los botones de los 3 planes quedan a la misma altura */
}

/* Franja de la promo del mes */
.promo {
  display: grid;
  gap: var(--esp-3);
  align-items: center;
  max-width: 900px;
  margin: 0 auto var(--esp-7);
  padding: var(--esp-5);
  border-radius: var(--radio);
  background: linear-gradient(120deg, rgba(155, 20, 80, 0.55), rgba(36, 87, 214, 0.45));
  border: 1px solid rgba(255, 122, 176, 0.4);
}
.promo-titulo {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}
.promo-titulo span {
  color: var(--color-oro);
}
.promo p {
  margin: 0;
  color: var(--color-texto);
}

/* Título de la promo con su etiqueta: en celular, la etiqueta va al lado o justo abajo */
.promo-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}
/* Etiqueta "Solo principiantes": mismo verde del nivel Principiante (ver "Tu camino") */
.promo .promo-etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radio-pildora);
  background: var(--color-principiante);
  color: var(--color-sobre-oro);   /* morado oscuro sobre verde: contraste 11,1:1 */
  font-family: var(--fuente-titulos);
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

/* ----- AVISO DEL PRÓXIMO EVENTO (franja de arriba) ----- */
.aviso-evento {
  display: block;
  min-height: 44px;
  padding: var(--esp-2) var(--esp-4);
  background: var(--color-calabaza);
  color: var(--color-sobre-oro);          /* morado oscuro sobre naranjo: 8,1:1 */
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.aviso-evento:hover {
  background: var(--color-calabaza-claro);
  color: var(--color-sobre-oro);
}
.aviso-evento .icono {
  display: inline-block;          /* en línea con el texto */
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 4px;
}
.aviso-extra {
  display: none;                          /* en celular, el texto va más corto */
}
.aviso-ver .icono {
  margin: 0 0 0 2px;
}
.aviso-ver {
  display: inline-block;
  margin-left: var(--esp-2);
  white-space: nowrap;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- EVENTOS ----- */
/* Fondo propio, con un brillo naranjo de Halloween */
.seccion-eventos {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(45% 35% at 90% 10%, rgba(255, 138, 61, 0.16), transparent 70%),
    radial-gradient(40% 30% at 5% 90%, rgba(255, 122, 176, 0.12), transparent 70%);
}

/* Tarjeta del próximo evento */
.evento {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--esp-6);
  padding: var(--esp-6) var(--esp-5);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 138, 61, 0.12), var(--color-superficie) 45%, var(--color-superficie-2));
  border: 1px solid rgba(255, 138, 61, 0.5);
  box-shadow: var(--sombra-alta), 0 0 60px rgba(255, 138, 61, 0.12);
}
/* Fantasma grande de adorno (flota despacio) */
.evento-fantasma {
  position: absolute;
  top: -24px;
  right: -36px;
  width: 200px;
  height: 200px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  color: rgba(247, 241, 255, 0.06);
  pointer-events: none;
  animation: flotar 6s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}
.evento-principal,
.evento-afiche {
  position: relative;                     /* quedan encima del fantasma */
}

.evento-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
}
.evento-etiqueta,
.evento-cuenta {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radio-pildora);
  font-family: var(--fuente-titulos);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.evento-etiqueta {
  background: var(--color-calabaza);
  color: var(--color-sobre-oro);
}
.evento-cuenta {
  border: 1px solid var(--color-calabaza);
  color: var(--color-calabaza);
}

.evento-titulo {
  font-size: clamp(2.6rem, 10vw, 4.6rem);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-calabaza);
  margin-bottom: var(--esp-4);
}
.evento-titulo span {
  display: block;
  color: var(--color-texto);
  font-size: 0.62em;
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.evento-bajada {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-texto);
  margin-bottom: var(--esp-3);
}
.evento-texto {
  color: var(--color-texto-suave);
  margin-bottom: var(--esp-5);
}

/* Fecha, hora y lugar */
.evento-datos {
  list-style: none;
  margin: 0 0 var(--esp-5);
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}
.evento-datos li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  color: var(--color-texto);
}
.evento-datos .icono {
  color: var(--color-calabaza);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Preventa y puerta */
.evento-valores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}
.evento-valores p {
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: rgba(20, 11, 36, 0.5);
}
.evento-valores p:first-child {
  border-color: var(--color-calabaza);      /* la preventa, destacada */
}
.evento-valores span,
.evento-valores small {
  display: block;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}
.evento-valores span {
  font-family: var(--fuente-titulos);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.evento-valores strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--color-texto);
}
.evento-valores p:first-child strong {
  color: var(--color-calabaza);
}

.evento-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}
/* Botón naranjo (solo para eventos) */
.btn-calabaza {
  background: var(--color-calabaza);
  color: var(--color-sobre-oro);
  box-shadow: 0 10px 30px rgba(255, 138, 61, 0.25);
}
.btn-calabaza:hover {
  background: var(--color-calabaza-claro);
  color: var(--color-sobre-oro);
}

/* Afiche del evento: se ve completo y al tocarlo se abre en grande */
.evento-afiche {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 138, 61, 0.5);
  box-shadow: var(--sombra-alta), 0 0 40px rgba(255, 138, 61, 0.15);
}
.evento-afiche img {
  width: 100%;
  height: auto;
  transition: scale 0.4s ease;
}
.evento-afiche:hover img {
  scale: 1.03;
}
/* Franja "Ver afiche en grande" debajo del afiche (no tapa nada del afiche) */
.evento-afiche-ver {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: rgba(20, 11, 36, 0.9);
  color: var(--color-texto);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.evento-afiche-ver .icono {
  width: 16px;
  height: 16px;
}

/* Aviso de cumpleaños (no sale en el afiche) */
.evento-cumple {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-5);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio);
  border: 1px dashed rgba(255, 138, 61, 0.6);
  background: rgba(255, 138, 61, 0.08);
  color: var(--color-texto-suave);
}
.evento-cumple strong {
  color: var(--color-texto);
}
.evento-cumple .icono {
  color: var(--color-calabaza);
  margin-top: 3px;
}

/* Mensaje cuando ya pasó el evento */
.evento-pronto {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.evento-pronto .btn {
  margin-top: var(--esp-4);
}

/* Cuadro: eventos que han organizado */
.organizador {
  display: grid;
  gap: var(--esp-5);
  margin-top: var(--esp-6);
  padding: var(--esp-5);
  border-radius: var(--radio);
  border: 1px dashed rgba(255, 138, 61, 0.45);
  background: rgba(33, 20, 58, 0.6);
}
.organizador h3 {
  font-size: 1.3rem;
  text-transform: uppercase;
  margin-bottom: var(--esp-3);
}
.organizador-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}
.organizador-lista li {
  position: relative;
  padding-left: var(--esp-5);
  color: var(--color-texto-suave);
}
.organizador-lista li::before {           /* puntito magenta */
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-magenta);
}
.organizador-accion p {
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Lo que main.js esconde con el atributo hidden (si no, el CSS lo mostraría igual) */
.aviso-evento[hidden],
.evento[hidden],
.evento-cuenta[hidden],
.evento-pronto[hidden] {
  display: none;
}

/* ----- COMUNIDAD (galería) ----- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
}
.galeria figure {
  margin: 0;
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-superficie);
}
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s ease;
}
.galeria figure:hover img {
  scale: 1.04;
}
.galeria figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--esp-6) var(--esp-3) var(--esp-3);
  background: linear-gradient(180deg, transparent, rgba(10, 5, 20, 0.92));
  font-size: 0.88rem;
  line-height: 1.35;
  font-weight: 500;
}

.lista-comunidad {
  display: grid;
  gap: var(--esp-4);
  margin-bottom: var(--esp-6);
}

/* ----- OPINIONES ----- */
.notas-sedes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
  list-style: none;
  padding: 0;
}
.notas-sedes li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-pildora);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  font-size: 0.95rem;
}
.notas-sedes strong {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  color: var(--color-oro);
}
.estrella {
  color: var(--color-oro);
}

.grilla-opiniones {
  display: grid;
  gap: var(--esp-4);
}
.opinion {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}
.opinion blockquote {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-texto);
}
.opinion blockquote::before {
  content: "“";
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--color-magenta);
  margin-bottom: var(--esp-2);
}
.opinion figcaption {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}
.opinion figcaption strong {
  color: var(--color-texto);
}
.estrellas {
  display: flex;
  gap: 2px;
  color: var(--color-oro);
}
.centrado {
  text-align: center;
  margin-top: var(--esp-6);
}

/* ----- SEDES ----- */
.grilla-sedes {
  display: grid;
  gap: var(--esp-4);
}
.sede {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  border-top: 6px solid var(--color-borde);
}
.sede-vina { border-top-color: var(--color-vina); }
.sede-quilpue { border-top-color: var(--color-quilpue); }
.sede-valpo { border-top-color: var(--color-valpo); }
.sede h3 {
  margin: 0;
}
.sede-dato {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  color: var(--color-texto-suave);
  margin: 0;
}
.sede-dato .icono {
  color: var(--color-oro);
  margin-top: 4px;
}
.sede .btn {
  margin-top: auto;
}

/* ----- PREGUNTAS FRECUENTES ----- */
.preguntas {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: var(--esp-3);
}
.pregunta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}
.pregunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-4);
  min-height: 56px;
  padding: var(--esp-3) var(--esp-5);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.pregunta summary::-webkit-details-marker {
  display: none;
}
.pregunta summary .icono {
  color: var(--color-oro);
  transition: rotate 0.25s ease;
}
.pregunta[open] summary .icono {
  rotate: 45deg;
}
.pregunta p {
  padding: 0 var(--esp-5) var(--esp-4);
  margin: 0;
  color: var(--color-texto-suave);
}

/* ----- LLAMADO FINAL ----- */
.cta-final {
  text-align: center;
  padding: var(--esp-9) 0;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(245, 195, 59, 0.16), transparent 70%),
    radial-gradient(40% 50% at 15% 20%, rgba(255, 122, 176, 0.16), transparent 70%);
}
.cta-final h2 {
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  text-transform: uppercase;
  font-weight: 700;
}
.cta-final p {
  color: var(--color-texto-suave);
  max-width: 34rem;
  margin: 0 auto var(--esp-6);
  font-size: 1.1rem;
}
.cta-final .hero-botones {
  justify-content: center;
  margin-bottom: 0;
}

/* Página 404 (dirección que no existe): centrada en la pantalla */
.pagina-404 {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* ----- PIE DE PÁGINA ----- */
.pie {
  border-top: 1px solid var(--color-borde);
  padding: var(--esp-7) 0 var(--esp-8);
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}
.pie-grilla {
  display: grid;
  gap: var(--esp-6);
}
.pie h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-texto);
  margin-bottom: var(--esp-3);
}
.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}
.pie a {
  color: var(--color-texto-suave);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 32px;
}
.pie a:hover {
  color: var(--color-oro);
}
/* Logo del pie: grande y con el nombre abajo */
.pie .logo {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
}
.pie .logo-kdb {
  width: 150px;
}

.pie-final {
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--color-borde);
  font-size: 0.85rem;
}

/* ----- BOTÓN FLOTANTE DE WHATSAPP ----- */
.whatsapp-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #0B1F14; /* ícono oscuro: contraste 8,7:1 sobre el verde */
  box-shadow: var(--sombra-alta);
  transition: translate 0.2s ease;
}
.whatsapp-flotante:hover {
  translate: 0 -3px;
  color: #0B1F14;
}
.whatsapp-flotante .icono-relleno {
  width: 32px;
  height: 32px;
}

/* =========================================================
   PANTALLAS MÁS GRANDES
   ========================================================= */
@media (min-width: 640px) {
  .grilla-beneficios,
  .grilla-estilos,
  .grilla-opiniones {
    grid-template-columns: repeat(2, 1fr);
  }
  .galeria {
    grid-template-columns: repeat(3, 1fr);
  }
  .grilla-valores {
    grid-template-columns: repeat(2, 1fr);
  }
  .grilla-valores > .valor-tres {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 460px);
  }
  .aviso-extra {
    display: inline;
  }
  .evento {
    padding: var(--esp-7) var(--esp-6);
  }
  .organizador {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .dias {
    grid-template-columns: repeat(2, 1fr);
  }
  .promo {
    grid-template-columns: auto 1fr;
    gap: var(--esp-5);
  }
  .promo-cabeza {
    flex-direction: column;
    align-items: flex-start;
  }
  .pie-grilla {
    grid-template-columns: repeat(2, 1fr);
  }
  .lista-comunidad {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  :root {
    --alto-cabecera: 92px;
  }
  .menu-boton {
    display: none;
  }
  .cabecera .logo-kdb {
    width: 140px;                  /* arriba de todo, en computador */
    margin-bottom: -60px;
  }
  .cabecera.con-scroll .logo-kdb {
    width: 74px;                   /* al bajar por la página */
    margin-bottom: 0;
  }
  .cabecera .logo-nombre {
    font-size: 1.4rem;
  }
  .cabecera .logo-nombre small {
    font-size: 0.8rem;
    margin-top: 6px;
  }
  .pie .logo-kdb {
    width: 180px;
  }
  .grilla-valores {
    grid-template-columns: repeat(3, 1fr);
  }
  .grilla-valores > .valor-tres {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
  .hero-video {
    max-width: none;           /* en computador ocupa toda su columna */
  }
  .evento {
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: center;
    gap: var(--esp-7);
    padding: var(--esp-7);
  }
  .evento-fantasma {
    width: 280px;
    height: 280px;
  }
  .menu,
  .sin-js .menu {
    display: block;
    position: static;
    background: none;
    border: 0;
    padding: 0;
  }
  .menu ul {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
  }
  .menu a {
    border: 0;
    font-size: 1rem;
    min-height: 44px;
  }
  .menu .btn {
    margin: 0;
    width: auto;
    min-height: 44px;
    padding: var(--esp-2) var(--esp-5);
  }
  .hero {
    padding: var(--esp-8) 0 var(--esp-9);
  }
  .hero-grilla {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .grilla-beneficios {
    grid-template-columns: repeat(4, 1fr);
  }
  .grilla-estilos {
    grid-template-columns: repeat(4, 1fr);
  }
  .grilla-sedes {
    grid-template-columns: repeat(3, 1fr);
  }
  .galeria {
    gap: var(--esp-4);
  }
  .galeria figure {
    aspect-ratio: 4 / 5;
  }
  .dias {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .grilla-opiniones {
    grid-template-columns: repeat(4, 1fr);
  }
  .pie-grilla {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

/* Pantallas de 1024 a 1199 px: el menú va más junto y el botón en una sola línea */
@media (min-width: 1024px) and (max-width: 1199px) {
  .menu ul {
    gap: var(--esp-4);
  }
}
.menu .btn {
  white-space: nowrap;
}

/* ===== FONDO ANIMADO (luces de escenario + destellos) =====
   Una capa fija detrás de todo el contenido (z-index: -1).
   - .luz: 3 manchas de luz grandes y difusas (oro, magenta y azul, los colores de la marca)
     que se mueven muy lento, como luces de una pista de baile.
   - .destellos: canvas donde main.js dibuja brillos que suben y titilan. */
.fondo-animado {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.luz {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
}
.luz-oro {
  top: -30vmax;
  left: -25vmax;
  background: radial-gradient(closest-side, rgba(245, 195, 59, 0.14), transparent);
  animation: luz-oro 28s ease-in-out infinite alternate;
}
.luz-magenta {
  top: 25%;
  right: -35vmax;
  background: radial-gradient(closest-side, rgba(255, 122, 176, 0.16), transparent);
  animation: luz-magenta 34s ease-in-out infinite alternate;
}
.luz-azul {
  bottom: -40vmax;
  left: 10%;
  background: radial-gradient(closest-side, rgba(36, 87, 214, 0.22), transparent);
  animation: luz-azul 40s ease-in-out infinite alternate;
}
/* Recorridos de cada luz (con "translate", que es liviano para el celular) */
@keyframes luz-oro {
  from { translate: 0 0; }
  to   { translate: 35vw 45vh; }
}
@keyframes luz-magenta {
  from { translate: 0 0; }
  to   { translate: -40vw -15vh; }
}
@keyframes luz-azul {
  from { translate: 0 0; }
  to   { translate: 30vw -50vh; }
}
.destellos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* "Reducir movimiento": las luces quedan quietas (los destellos también, ver main.js) */
@media (prefers-reduced-motion: reduce) {
  .luz {
    animation: none;
  }
}

/* ===== ANIMACIONES (kit Motion) ===== */
/* Lo que se va a animar parte invisible SOLO si hay JavaScript
   (la clase .anim la pone el <head>). Sin JS, todo se ve normal. */
.anim [data-animar],
.anim [data-animar-grupo] > * {
  opacity: 0;
}

/* Hover de tarjetas: usa "translate" (propiedad suelta), NO "transform".
   Motion usa "transform" para animar, y si el hover también lo usa, chocan. */
.tarjeta {
  transition: translate 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tarjeta:hover {
  translate: 0 -4px;
  box-shadow: var(--sombra-alta);
}

/* Barra de progreso de lectura (arriba de todo) */
.barra-progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-oro), var(--color-magenta));
  transform: scaleX(0);          /* sin JS queda escondida */
  transform-origin: 0 50%;
  z-index: 100;
}

/* Si la persona pidió menos movimiento, apagamos también las transiciones */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .barra-progreso { display: none; }
}