/* Guarda contra el mismo tropiezo documentado en /admin y /reservas: una
   regla propia de display sobre un elemento [hidden] lo vuelve a mostrar.
   Esta va primero y gana siempre. */
[hidden] { display: none !important; }

.texto-suave { color: var(--color-texto-suave); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-superficie); border-bottom: 1px solid var(--color-borde);
}
.site-header-inner {
  max-width: 1100px; margin: 0 auto; padding: .9rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.marca { display: inline-flex; align-items: center; }
.marca-logo { height: 42px; width: auto; display: block; }
.nav-landing { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.nav-landing a:not(.btn) { color: var(--color-texto); text-decoration: none; font-weight: 600; }
.nav-landing a:not(.btn):hover { color: var(--color-primario); }
.btn.chico { padding: .45em .9em; font-size: .9rem; }

main { max-width: 1100px; margin: 0 auto; padding: 0 1.2rem; }
section { padding: 3rem 0; scroll-margin-top: 4.5rem; }
section h2 { font-size: 1.6rem; }

/* ---------- Hero: video de fondo con rotación (ver heroClips en app.js) ---------- */
.hero {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  min-height: min(600px, 78vh);
  display: flex;
  align-items: flex-end;
  margin-top: 1.5rem;
  box-shadow: var(--sombra);
  background: var(--color-primario); /* se ve un instante antes de que cargue el primer fotograma */
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute; inset: 0;
  /* degradado con el verde de marca, no negro genérico */
  background: linear-gradient(180deg, transparent 22%, color-mix(in srgb, var(--lumi-verde-osc) 90%, black) 100%);
}
.hero-contenido {
  position: relative; z-index: 1;
  padding: 2.2rem 2.2rem 2.6rem;
  max-width: 560px;
  color: #fff;
}
.hero-contenido h1 { color: #fff; font-size: 2.2rem; line-height: 1.15; }
.hero-bajada { font-size: 1.1rem; color: rgba(255, 255, 255, .9); margin: .7rem 0 1.5rem; max-width: 46ch; }
.hero-botones { display: flex; gap: .8rem; flex-wrap: wrap; }
/* Todo lo que en la landing era mostaza (.btn.acento: Agendar visita,
   Unirme, Consultar disponibilidad) pasa a coral — override local acá,
   no se toca --color-acento en shared/tokens.css porque ese token
   también pinta el tipo "Taller" del planner en /admin y /reservas, y
   ese no es parte de este pedido. Texto fijo (--lumi-texto, no
   --color-texto): el coral no cambia con el tema oscuro, el texto
   tampoco puede cambiar o pierde contraste. */
.btn.acento { background: var(--lumi-coral); color: var(--lumi-texto); }

/* ---------- Programas ---------- */
.programas-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.6rem;
  align-items: start;
}
.programa { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.programa-video { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-borde); }
.programa-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.programa-cuerpo { padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.programa h3 { font-size: 1.4rem; margin: 0; }
.pastilla-programa {
  align-self: flex-start; display: inline-block; padding: .25em .8em; border-radius: 999px;
  font-size: .8rem; font-weight: 700; font-family: var(--fuente-titulo);
}
.pastilla-programa.openplay { background: color-mix(in srgb, var(--color-primario) 22%, transparent); color: var(--color-primario); }
.pastilla-programa.playgroup { background: color-mix(in srgb, var(--lumi-coral) 30%, transparent); color: var(--color-texto); }
.programa dl { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.programa dl div { display: grid; grid-template-columns: 90px 1fr; gap: .6rem; }
.programa dt { color: var(--color-texto-suave); font-weight: 600; font-size: .9rem; }
.programa dd { margin: 0; font-weight: 600; }
.programa-cuerpo > .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Esta semana ---------- */
.banner-lema {
  background: var(--lumi-coral);
  border-radius: var(--radio);
  padding: 1.5rem 1.5rem;
  text-align: center;
  margin: 1.2rem 0 1.6rem;
}
.banner-lema p {
  margin: 0;
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 1.9rem);
  color: var(--lumi-texto); /* fijo, no var(--color-texto): mismo motivo que el resto — el fondo no cambia con el tema */
  text-wrap: balance;
}
.dias-tematicos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem;
  margin: 0 0 1.8rem;
}
.dia-card { padding: 1.5rem 1.1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.dia-icono { font-size: 2.6rem; line-height: 1; }
.dia-card h3 { font-size: 1rem; margin: 0; }
.dia-card p { font-size: .88rem; margin: 0; }
.semana-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.taller-card { padding: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.taller-dia { font-size: .82rem; font-weight: 700; color: var(--color-texto-suave); text-transform: uppercase; letter-spacing: .02em; }
.taller-card h3 { font-size: 1.05rem; margin: 0; }
.taller-hora { font-size: .9rem; color: var(--color-texto-suave); }
.taller-card .pastilla { align-self: flex-start; margin-top: .2rem; }
.semana-vacia { padding: 1.4rem; text-align: center; }

/* ---------- Cumpleaños ---------- */
/* Video real de un cumpleaños en LUMI — vertical (formato reel, 9:16),
   así que el banner es dos columnas en vez del video de fondo + velo que
   usan el hero y las tarjetas de Programas (esos son clips horizontales;
   forzar uno vertical a esa caja lo recortaría casi entero). */
.cumple-banner {
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr;
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
  margin-top: 1.4rem;
  background: var(--lumi-coral);
}
.cumple-media { position: relative; aspect-ratio: 9 / 16; background: var(--lumi-coral); }
.cumple-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cumple-contenido {
  padding: 2.2rem; display: flex; flex-direction: column; justify-content: center;
  text-align: left; color: var(--lumi-texto); /* fijo, no var(--color-texto): el fondo coral no cambia
    con el tema oscuro, así que el texto tampoco puede cambiar o pierde contraste */
}
.cumple-lema {
  display: inline-block; align-self: flex-start;
  background: var(--lumi-crema); color: var(--lumi-texto); /* fondo claro fijo, a propósito distinto del coral del módulo */
  font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  padding: .35em .9em; border-radius: 999px; margin: 0 0 .8rem;
}
.cumple-bajada { font-size: 1.05rem; margin: 0 0 1.2rem; max-width: 48ch; text-wrap: pretty; }
.cumple-dl {
  margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
}
.cumple-dl dt { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.cumple-dl dd { margin: 0; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; }
.cumple-incluye {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem 1.2rem;
}
.cumple-incluye li {
  position: relative; padding-left: 1.6em; font-weight: 600;
}
.cumple-incluye li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--color-primario); font-weight: 700;
}
/* Excepción a .btn.acento (coral) solo para este botón: el módulo de
   Cumpleaños entero es coral, así que su botón necesita ser claro para
   distinguirse — mismo criterio que .cumple-lema, mismo motivo de fondo
   fijo + texto fijo. */
#btnWaCumple { background: var(--lumi-crema); color: var(--lumi-texto); }

/* ---------- Cómo llegar ---------- */
.ubicacion-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; margin-top: 1.4rem; align-items: stretch; }
.mapa-caja { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 280px; }
.mapa-caja iframe { width: 100%; flex: 1; min-height: 220px; border: none; display: block; }
.mapa-caja #mapaAviso { flex: 1; margin: 0; padding: 1.4rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.mapa-caja .direccion {
  margin: 0; padding: .8rem 1.4rem; text-align: center;
  border-top: 1px solid var(--color-borde);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: .95rem;
}
.contacto-caja { padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.contacto-caja h3 { margin: 0; }
.link-correo {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--color-texto); text-decoration: none; font-weight: 600;
}
.link-correo:hover { color: var(--color-primario); }
.link-instagram {
  display: inline-flex; align-items: center; gap: .5em; margin-top: .4rem;
  color: var(--color-texto); text-decoration: none; font-weight: 600;
}
.link-instagram img { border-radius: 50%; object-fit: cover; }
.link-instagram:hover { color: var(--color-primario); }

/* ---------- WhatsApp (calco de /admin y /reservas) ---------- */
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: .4em; border: none; border-radius: 999px;
  background: #25D366; color: #06210f; font-weight: 700; font-size: .95rem; padding: .6em 1.3em; cursor: pointer;
  text-decoration: none;
}
.btn-whatsapp:hover { filter: brightness(1.05); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 2rem; padding: 1.6rem 1.2rem; text-align: center;
  border-top: 1px solid var(--color-borde); color: var(--color-texto-suave);
}
.site-footer p { margin: 0 0 .3rem; }
.site-footer a { font-weight: 600; }

@media (max-width: 820px) {
  .hero { min-height: 68vh; }
  .programas-grid { grid-template-columns: 1fr; }
  .ubicacion-grid { grid-template-columns: 1fr; }
  .mapa-caja { min-height: 220px; }
  .mapa-caja iframe { min-height: 220px; }
  .cumple-banner { grid-template-columns: 1fr; }
  /* Apilado a una columna: la caja deja de ser angosta (9:16 completo no
     entra), así que se fija una altura y se deja que el video recorte
     los costados con object-fit — se ve más ancha que en desktop, pero
     nunca estirada ni deformada. */
  .cumple-media { aspect-ratio: auto; height: 320px; }
}

@media (max-width: 480px) {
  /* En el teléfono el header se distingue del resto de la página con un
     tono apenas más oscuro que el fondo (--color-borde: mismo token que
     ya se usa para bordes/separadores, un paso por debajo de la
     superficie) — en desktop se deja el blanco de siempre, ahí la
     sombra/borde ya alcanza para separarlo. Se usa el token semántico
     (no uno fijo como en Cumpleaños) porque acá SÍ conviene que seguir
     siendo "un poco más oscuro que el fondo" en modo oscuro también —
     por eso el texto de la nav no se fija, sigue el
     var(--color-texto) normal de .nav-landing a:not(.btn), que cambia
     junto con este fondo. */
  .site-header { background: var(--color-borde); }
  section { padding: 2rem 0; }
  .hero { min-height: 60vh; margin-top: .8rem; }
  .hero-contenido { padding: 1.5rem; }
  .hero-contenido h1 { font-size: 1.6rem; }
  .programa dl div { grid-template-columns: 78px 1fr; }
  .cumple-banner { margin-top: .8rem; }
  .cumple-media { height: 260px; }
  .cumple-contenido { padding: 1.5rem; }
  .cumple-dl { gap: 1rem 1.4rem; }
  .cumple-incluye { grid-template-columns: 1fr; }
}