/* ==========================================================================
   TENDER LA MANO — /eventos/ (29/09/2026)
   Tema oscuro propio de la sección de eventos, cargado SOLO en estas paginas
   (no toca styles.css ni el resto del sitio). Reutiliza la cabecera, el pie,
   los botones, los campos de formulario y .disclaimer-box/.consent-row del
   design system base sobreescribiendo sus mismas variables dentro de este
   ambito -- 0 hex/px sueltos, todo en variables. Paleta pedida por Maria
   (29/09, en sesion): cielo negro profundo con una animacion de
   constelaciones (personas = puntos, vinculos = lineas), estrellas calidas,
   dorado suave como acento principal y el malva de los flyers como acento
   minimo. Manrope autohospedada (misma fuente que el resto del sitio).
   ========================================================================== */

body.evento-page {
  /* Sobreescribe los tokens compartidos SOLO en esta pagina */
  --color-bg: oklch(12.5% 0.026 264);
  --color-surface: oklch(18% 0.03 264);
  --color-surface-tint: oklch(21% 0.032 264);
  --color-surface-tint-warm: oklch(22% 0.045 85);
  --color-ink: oklch(96% 0.008 264);
  --color-ink-muted: oklch(80% 0.018 264);
  --color-ink-soft: oklch(67% 0.02 264);
  --color-ink-on-dark: oklch(96% 0.008 264);
  --color-ink-muted-on-dark: oklch(78% 0.018 264);
  --color-border: oklch(100% 0 0 / 14%);
  --color-border-strong: oklch(100% 0 0 / 24%);
  --color-ink-900: oklch(7.5% 0.02 264);
  --color-ink-800: oklch(11% 0.024 264);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.65);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 55px -18px rgba(0, 0, 0, 0.7);

  /* Acentos nuevos, solo para /eventos/ */
  --color-gold: oklch(84% 0.135 86);
  --color-gold-strong: oklch(74% 0.15 80);
  --color-gold-soft: oklch(30% 0.05 86);
  --color-gold-ink: oklch(18% 0.04 80);
  --color-plum: oklch(66% 0.1 336);
  --color-plum-strong: oklch(54% 0.115 336);
  --color-plum-soft: oklch(26% 0.055 336);

  background: var(--color-bg);
  color: var(--color-ink);
}

body.evento-page :focus-visible {
  outline-color: var(--color-gold-strong);
}

/* La cabecera del resto del sitio usa un blanco fijo (rgba), no una
   variable -- unico punto de la cabecera que hay que tocar a mano. */
body.evento-page .site-header {
  background: oklch(9% 0.022 264 / 82%);
  border-bottom-color: var(--color-border);
}

body.evento-page .nav-toggle {
  color: var(--color-ink);
}

body.evento-page .mobile-nav {
  border-top-color: var(--color-border);
}

/* Botón dorado -- CTA principal de toda la página (una sola intención:
   "reservar"), usado en la cabecera, el hero y el panel de registro. */
.btn--gold {
  background: var(--color-gold);
  color: var(--color-gold-ink);
}

.btn--gold:hover {
  background: var(--color-gold-strong);
  box-shadow: 0 16px 32px -14px oklch(74% 0.15 80 / 55%);
}

.btn--ghost-dark {
  background: oklch(100% 0 0 / 8%);
  color: var(--color-ink);
  border-color: oklch(100% 0 0 / 22%);
}

.btn--ghost-dark:hover {
  background: oklch(100% 0 0 / 14%);
  border-color: oklch(100% 0 0 / 34%);
}

/* ==========================================================================
   CAMPO DE ESTRELLAS DE FONDO (fuera del hero, coste minimo: solo CSS)
   El hero lleva el canvas animado; el resto de la pagina continua el mismo
   cielo con un campo de estrellas estatico (gradientes radiales), para que
   el negro se sienta igual de arriba a abajo sin pedirle mas trabajo a la
   GPU en cada seccion.
   ========================================================================== */
.event-sky {
  background-color: var(--color-bg);
  background-image: radial-gradient(1.5px 1.5px at 8% 18%, oklch(90% 0.02 264 / 70%) 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 64%, oklch(90% 0.02 264 / 55%) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 38% 12%, oklch(90% 0.02 264 / 60%) 50%, transparent 52%),
    radial-gradient(1px 1px at 54% 48%, oklch(90% 0.02 264 / 45%) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 68% 78%, oklch(90% 0.02 264 / 65%) 50%, transparent 52%),
    radial-gradient(1px 1px at 81% 30%, oklch(90% 0.02 264 / 50%) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 92% 62%, oklch(90% 0.02 264 / 60%) 50%, transparent 52%),
    radial-gradient(1px 1px at 14% 88%, oklch(90% 0.02 264 / 45%) 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 92%, oklch(90% 0.02 264 / 45%) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 75% 8%, oklch(90% 0.02 264 / 55%) 50%, transparent 52%);
  background-repeat: repeat;
  background-size: 340px 340px;
}

/* ==========================================================================
   HERO -- canvas de constelaciones en vivo
   ========================================================================== */
.event-hero {
  position: relative;
  overflow: hidden;
  min-height: min(100dvh, 880px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-2xl) var(--space-xl);
  background: radial-gradient(120% 90% at 50% -10%, oklch(20% 0.05 264) 0%, var(--color-bg) 60%);
}

.event-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.event-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(9% 0.02 264 / 0%) 0%, oklch(9% 0.02 264 / 15%) 55%, var(--color-bg) 100%);
  pointer-events: none;
}

.event-hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, 760px);
  margin-inline: auto;
  text-align: left;
}

.event-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-gold);
  background: oklch(30% 0.05 86 / 35%);
  border: 1px solid oklch(84% 0.135 86 / 30%);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.event-hero-content h1 {
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
  text-wrap: balance;
}

.event-hero-content .lede {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
  max-width: 56ch;
}

.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.event-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.event-facts .icon {
  color: var(--color-gold);
  width: 1.1rem;
  height: 1.1rem;
}

.event-hero-actions,
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ==========================================================================
   SECCIONES DE CONTENIDO
   ========================================================================== */
.event-section-head {
  max-width: 680px;
  margin-bottom: var(--space-lg);
}

.event-section-head h2 {
  color: var(--color-ink);
  margin-bottom: 0.6rem;
}

.event-section-head .lede {
  color: var(--color-ink-muted);
}

.event-prose p {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-sm);
}

.event-prose p:last-child {
  margin-bottom: 0;
}

.event-prose strong {
  color: var(--color-ink);
}

/* Reutiliza .steps/.step del sistema base (ya definidos para "Como funciona")
   -- aqui solo se recolorea el numero de sky (azul, tema claro) a dorado. */
body.evento-page .step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

body.evento-page .step-number {
  background: var(--color-gold);
  color: var(--color-gold-ink);
}

body.evento-page .step p {
  color: var(--color-ink-muted);
}

/* ---------- Para quién es ---------- */
.event-audience {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.event-audience-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.event-audience-item .icon {
  color: var(--color-gold);
  background: var(--color-gold-soft);
  padding: 0.55rem;
  border-radius: var(--radius-md);
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
}

.event-audience-item h3 {
  font-size: var(--text-sm);
  margin-bottom: 0.2rem;
  color: var(--color-ink);
}

.event-audience-item p {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* ---------- Quién facilita ---------- */
.event-facilitator {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.event-facilitator-mark {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--color-plum-soft) 0%, var(--color-surface-tint) 70%);
  border: 1.5px solid var(--color-gold-soft);
  color: var(--color-gold);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}

.event-facilitator h3 {
  color: var(--color-ink);
  margin-bottom: 0.3rem;
}

.event-facilitator p {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.event-facilitator .event-cert {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-gold);
  background: var(--color-gold-soft);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
}

/* ---------- Contribución consciente ---------- */
.event-contribution {
  background: linear-gradient(135deg, var(--color-plum-soft) 0%, var(--color-surface) 62%);
  border: 1px solid oklch(66% 0.1 336 / 30%);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.event-contribution h2 {
  color: var(--color-ink);
  margin-bottom: 0.6rem;
}

.event-contribution p {
  color: var(--color-ink-muted);
}

/* ---------- Hub /eventos/: hero compacto + tarjeta de evento ---------- */
.event-hero--compact {
  min-height: auto;
  padding-block: var(--space-2xl) var(--space-lg);
}

.event-card-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo);
}

.event-card-link:hover {
  border-color: var(--color-gold-soft);
  box-shadow: var(--shadow-card-hover);
}

.event-card-link h3 {
  margin-bottom: 0.4rem;
}

.event-card-link .event-facts {
  margin-bottom: 0;
}

/* ---------- Lugar ---------- */
.event-venue {
  display: grid;
  gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.event-venue address {
  font-style: normal;
  color: var(--color-ink-muted);
  font-size: var(--text-md);
  line-height: 1.7;
}

.event-venue address strong {
  color: var(--color-ink);
  display: block;
  font-size: var(--text-lg);
  margin-bottom: 0.2rem;
}

/* ---------- FAQ (details/summary nativo, sin JS) ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.2rem var(--space-sm);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.9rem;
  font-weight: 700;
  color: var(--color-ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .icon {
  color: var(--color-gold);
  transition: transform 0.25s var(--ease-out-expo);
  flex-shrink: 0;
}

.faq-item[open] summary .icon {
  transform: rotate(45deg);
}

.faq-item p {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  padding-bottom: var(--space-sm);
}

/* ---------- Disclaimer legal (Heilversprechen) ---------- */
.event-disclaimer {
  max-width: 780px;
  margin-inline: auto;
}

/* ---------- Panel de registro ---------- */
body.evento-page .publish-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
}

.event-aforo-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
  margin-top: -0.4rem;
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 720px) {
  .event-hero-content h1 {
    font-size: var(--text-hero);
  }
}

@media (max-width: 719px) {
  .event-facilitator {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary .icon {
    transition: none;
  }
}

/* Botón "Únete al grupo" (WhatsApp): grande y fácil de pulsar; la URL nunca se
   muestra como texto, solo vive en el href. */
.group-join {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.group-join__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted-on-dark);
}

.btn--whatsapp {
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.6rem;
  font-size: var(--text-base);
  font-weight: 700;
  background: #1f8f4e;
  color: #fff;
  border-color: transparent;
  align-self: flex-start;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  background: #187a41;
  color: #fff;
}

@media (max-width: 40rem) {
  .btn--whatsapp {
    align-self: stretch;
  }
}

/* ==========================================================================
   AFORO, SOLD OUT Y LISTA DE ESPERA (09/10/2026)
   Contador "Quedan X de 15 plazas" con datos reales, una estrella por plaza
   y sello SOLD OUT (la palabra es de Maria). Solo variables del design
   system. Sin animacion: el dato cambia pocas veces al dia y no hay nada que
   celebrar con movimiento.
   ========================================================================== */
.event-capacity {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.event-capacity[hidden],
.event-capacity-inline[hidden],
.event-closed-box[hidden],
.event-soldout-badge[hidden],
.event-hero-actions [hidden] {
  display: none;
}

.event-seats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-seats li {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
}

.event-seats li.is-taken {
  background: var(--color-gold);
  border-color: var(--color-gold);
  box-shadow: 0 0 0.55rem oklch(84% 0.135 86 / 40%);
}

.event-capacity-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  max-width: none;
}

.event-soldout-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid oklch(66% 0.1 336 / 55%);
  background: var(--color-plum-soft);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.event-soldout-badge--sm {
  font-size: var(--text-xs);
  padding: 0.2rem 0.7rem;
  margin-bottom: var(--space-2xs);
}

.event-capacity-count {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink);
}

.event-capacity-count strong {
  color: var(--color-gold);
  font-weight: 800;
}

.event-capacity-note {
  max-width: none;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Linea de aforo dentro del panel de reserva (fondo de superficie oscura) */
.event-capacity-inline {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-gold);
}

/* Panel "taller completo" (en lugar del formulario) y caja equivalente que
   muestra el JS cuando el servidor dice que ya no hay plaza ni lista de espera */
.event-closed .section-head {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
  margin-bottom: 0;
}

.event-closed .section-head h2,
.event-closed .section-head p {
  margin: 0;
}

.event-closed .group-join {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.event-closed-box {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

.event-closed-box h3,
.event-closed-box p {
  margin: 0;
}

.event-closed-box h3 {
  color: var(--color-ink-on-dark);
}

.event-closed-box p {
  color: var(--color-ink-muted-on-dark);
}

/* Lineas de organizacion en aleman (evento 2): texto tal cual, sin recortar */
.event-organizers {
  display: grid;
  gap: 0.15rem;
  max-width: 56ch;
  margin: 0 0 var(--space-md);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}

.event-organizers p {
  max-width: none;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   FASE B (09/10/2026): enlace al otro taller, tarjetas del hub con contador y
   pagina de liberar plaza (/eventos/cancelar/). Solo variables del design system.
   ========================================================================== */
.event-next {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.event-next__text {
  margin: 0;
  color: var(--color-ink-muted-on-dark);
}

.event-next__text strong {
  color: var(--color-ink-on-dark);
}

.event-card-list {
  display: grid;
  gap: var(--space-sm);
}

.event-card-count {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-gold);
}

.event-card-count[hidden],
[data-vista][hidden] {
  display: none;
}

.cancelar-estado {
  margin: 0;
  color: var(--color-ink-muted-on-dark);
}

.cancelar-vista {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

.cancelar-vista h2,
.cancelar-vista p {
  margin: 0;
}

.cancelar-vista h2 {
  color: var(--color-ink-on-dark);
}

.cancelar-vista p {
  color: var(--color-ink-muted-on-dark);
}

.cancelar-datos {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
}

.cancelar-datos div {
  display: grid;
  gap: 0.1rem;
}

.cancelar-datos dt {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-gold);
}

.cancelar-datos dd {
  margin: 0;
  color: var(--color-ink-on-dark);
}

.cancelar-nota {
  font-size: var(--text-sm);
}

#cancelar-confirmar {
  min-height: 3rem;
}

/* «Qué vas a vivir» tiene 4 pasos: nunca 3 + 1 suelta (petición de María, 09/10/2026).
   Tableta: 2 x 2. Ordenador: las 4 en una fila; solo esta sección se ensancha
   (misma fórmula que .container, con tope de 1040px) para que las tarjetas respiren. */
@media (min-width: 720px) {
  body.evento-page #que-vas-a-vivir .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  body.evento-page #que-vas-a-vivir .container--narrow {
    width: min(100% - 2.5rem, 1040px);
  }

  body.evento-page #que-vas-a-vivir .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}