/* CASOCERO — Reservas B2C. Solo lo específico de /reservar/; el resto lo pone style.css */

.section-hero-sm { padding-top: var(--space-16); padding-bottom: var(--space-10); }
.hero-facts {
  list-style: none; padding: 0; margin: var(--space-8) 0 var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.hero-facts li {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .08em; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-paper-light);
}
.hero-facts strong { color: var(--color-crime); }
.hero-nota {
  border-left: 3px solid var(--color-evidence); padding-left: var(--space-4);
  font-size: var(--fs-base); margin: 0;
}

/* Pasos */
.paso { border: 0; padding: 0; margin: 0 0 var(--space-12); }
.paso legend {
  font-family: var(--font-display); font-size: var(--fs-xl);
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding: 0;
}
.paso-num {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem;
  background: var(--color-ink); color: var(--color-paper-light);
  border-radius: 50%; font-family: var(--font-mono); font-size: var(--fs-sm);
}

/* Fechas y pases */
.sesion { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.sesion-fecha {
  font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase;
  letter-spacing: .1em; color: var(--color-muted); margin: 0 0 var(--space-3);
}
.sesion-pases { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.pase {
  display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start;
  padding: var(--space-4) var(--space-5); background: var(--color-white); cursor: pointer;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-sm);
  transition: var(--transition); font-family: inherit; text-align: left;
}
.pase:hover:not([disabled]) { border-color: var(--color-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pase-activo, .pase-activo:hover { border-color: var(--color-crime); background: var(--color-paper-light); box-shadow: inset 0 0 0 1px var(--color-crime); }
.pase-hora { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; }
.pase-libres { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); }
.pase-agotado { opacity: .45; cursor: not-allowed; }
.pase-agotado .pase-libres { color: var(--color-crime); }
.cargando { color: var(--color-muted); font-style: italic; }

/* Jugadores */
.pax-selector { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.pax-op {
  width: 3.25rem; height: 3.25rem; border: 1.5px solid var(--color-line); background: var(--color-white);
  border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--fs-lg);
  cursor: pointer; transition: var(--transition);
}
.pax-op:hover:not([disabled]) { border-color: var(--color-ink); }
.pax-op[disabled] { opacity: .3; cursor: not-allowed; }
.pax-activo, .pax-activo:hover { background: var(--color-ink); color: var(--color-paper-light); border-color: var(--color-ink); }

/* Resumen de precio */
.resumen-precio {
  background: var(--color-paper-light); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm); padding: var(--space-5); margin-top: var(--space-5);
}
.resumen-linea { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; font-size: var(--fs-sm); }
.resumen-linea strong { font-family: var(--font-mono); }
.resumen-ahora {
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  margin: var(--space-2) 0; padding: var(--space-3) 0; font-size: var(--fs-base);
}
.resumen-ahora strong { color: var(--color-crime); font-size: var(--fs-lg); }

/* Bebidas */
.bebidas { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.bebida {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line);
  border-radius: var(--radius-sm); background: var(--color-white);
}
.bebida-ctrl { display: flex; align-items: center; gap: var(--space-3); }
.bebida-ctrl button {
  width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--color-line); background: var(--color-paper-light);
  border-radius: var(--radius-sm); font-size: var(--fs-lg); line-height: 1; cursor: pointer;
}
.bebida-ctrl button:hover { border-color: var(--color-ink); }
.bebida-ctrl output { font-family: var(--font-mono); min-width: 1.5rem; text-align: center; }
.bebidas-total { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--space-2); }
.bebidas-total.ok { color: var(--color-success); }

@media (max-width: 640px) {
  .sesion-pases { grid-template-columns: 1fr 1fr; }
  .pase { padding: var(--space-3) var(--space-4); }
}

.bebida-n { font-family: var(--font-mono); min-width: 1.5rem; text-align: center; display: inline-block; }

/* Respiro entre campos: el texto de ayuda quedaba pegado a la etiqueta siguiente */
.paso .form-field { margin-bottom: var(--space-6); }
.paso .form-field .form-help { margin-bottom: 0; }

/* Consentimientos — el style.css de la web fuerza display:block en los label,
   así que hace falta más especificidad para que la casilla quede a la izquierda. */
.paso .consentimientos { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.paso label.check {
  display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--space-3);
  align-items: start; font-size: var(--fs-sm); line-height: 1.55;
  font-weight: 400; cursor: pointer; margin: 0;
}
.paso label.check > input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; accent-color: var(--color-crime);
  cursor: pointer; grid-column: 1;
}
.paso label.check > span { grid-column: 2; }
.paso label.check-salud {
  background: var(--color-paper-light); border: 1px dashed var(--color-line);
  border-radius: var(--radius-sm); padding: var(--space-4); margin-top: var(--space-4);
}

.form-error {
  background: #fdf0f0; border-left: 3px solid var(--color-crime);
  padding: var(--space-3) var(--space-4); margin: var(--space-5) 0; font-size: var(--fs-sm);
}

/* Avisos importantes — tarjetas con la cifra como ancla visual */
.avisos { margin-top: var(--space-20); }
.avisos-titulo {
  font-size: var(--fs-2xl); text-align: center; margin: 0 0 var(--space-8);
  padding-top: var(--space-8); border-top: 2px solid var(--color-ink);
}
.avisos-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4);
}
.aviso {
  background: var(--color-white); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm); padding: var(--space-6) var(--space-5);
  transition: var(--transition);
}
.aviso:hover { border-color: var(--color-ink); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.aviso-cifra {
  display: block; font-family: var(--font-display); font-size: var(--fs-4xl);
  line-height: 1; color: var(--color-evidence); margin-bottom: var(--space-3);
}
.aviso h3 {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--color-muted); margin: 0 0 var(--space-3); font-weight: 500;
}
.aviso p { font-size: var(--fs-sm); line-height: 1.6; margin: 0; color: var(--color-ink-soft); }
.aviso-destacado {
  background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper-light);
  grid-column: span 2;
}
.aviso-destacado .aviso-cifra { color: var(--color-evidence); font-size: var(--fs-5xl); }
.aviso-destacado h3 { color: var(--color-paper-dark); }
.aviso-destacado p { color: var(--color-paper); font-size: var(--fs-base); }
.avisos-contacto { margin-top: var(--space-8); font-size: var(--fs-sm); text-align: center; }

@media (max-width: 640px) {
  .aviso-destacado { grid-column: span 1; }
  .avisos-grid { grid-template-columns: 1fr; }
}

/* ---- Landing Noches de Cluedo ---- */
.hero-noches .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-8); }
.hero-precio { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-paper-dark); }
.hero-precio strong { color: var(--color-evidence); font-size: var(--fs-lg); }
.pasos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.paso-card { background: var(--color-white); border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-6) var(--space-5); }
.paso-card-num { font-family: var(--font-mono); color: var(--color-crime); font-size: var(--fs-sm); letter-spacing: .1em; }
.paso-card h3 { font-size: var(--fs-lg); margin: var(--space-3) 0; }
.paso-card p { font-size: var(--fs-sm); line-height: 1.6; margin: 0; color: var(--color-ink-soft); }
.proximas { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.proxima { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: var(--color-white); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: var(--transition); }
.proxima:hover { border-color: var(--color-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.proxima-fecha { font-family: var(--font-display); font-size: var(--fs-lg); text-transform: capitalize; }
.proxima-pases { display: flex; gap: var(--space-2); }
.proxima-pase { font-family: var(--font-mono); font-size: var(--fs-xs); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-paper-light); }
.proxima-pase small { color: var(--color-muted); }
.proxima-pase.agotado { opacity: .5; text-decoration: line-through; }
.incluye { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.incluye li { padding: var(--space-3) 0 var(--space-3) var(--space-8); position: relative; border-bottom: 1px solid var(--color-line); }
.incluye li::before { content: '✓'; position: absolute; left: 0; color: var(--color-success); font-family: var(--font-mono); }
.nota-minimo { margin-top: var(--space-8); padding: var(--space-5); background: var(--color-ink); color: var(--color-paper);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.6; }
.nota-minimo strong { color: var(--color-evidence); }
.faq dt { font-family: var(--font-display); font-size: var(--fs-lg); margin-top: var(--space-6); }
.faq dd { margin: var(--space-2) 0 0; color: var(--color-ink-soft); line-height: 1.65; }
.bg-ink { background: var(--color-ink); color: var(--color-paper); }
.bg-ink h2 { color: var(--color-paper-light); }
.cta-tel { margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--fs-sm); }
.cta-tel a { color: var(--color-evidence); }

/* ===== Rediseño UX (estudio de referentes) ===== */

/* Héroe con dato vivo */
.hero-vivo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); margin: 0 0 var(--space-6);
  padding: var(--space-2) var(--space-4); background: var(--color-ink); color: var(--color-paper);
  border-radius: 999px;
}
.hero-vivo strong { color: var(--color-paper-light); }
.hero-vivo em { color: var(--color-evidence); font-style: normal; }
.hero-vivo-punto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-success); animation: latido 1.6s infinite; }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero-facts { margin-top: 0; }

/* Progreso */
.progreso {
  list-style: none; padding: 0; margin: 0 0 var(--space-10);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
  counter-reset: none;
}
.progreso li {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted); padding-top: var(--space-3); border-top: 3px solid var(--color-line);
  display: flex; align-items: center; gap: var(--space-2);
}
.progreso li span {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px solid var(--color-line); font-size: .7rem;
}
.progreso .progreso-activo { color: var(--color-ink); border-top-color: var(--color-crime); }
.progreso .progreso-activo span { background: var(--color-crime); border-color: var(--color-crime); color: #fff; }
.progreso .progreso-hecho { color: var(--color-ink); border-top-color: var(--color-ink); }
.progreso .progreso-hecho span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
@media (max-width: 520px) { .progreso li { font-size: .62rem; letter-spacing: .04em; } }

/* Meses (pestañas) */
.meses { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.mes {
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .08em;
  padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-line); border-radius: 999px;
  background: var(--color-white); cursor: pointer; transition: var(--transition);
}
.mes small { color: var(--color-muted); font-size: .75em; letter-spacing: 0; }
.mes:hover { border-color: var(--color-ink); }
.mes-activo, .mes-activo:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper-light); }
.mes-activo small { color: var(--color-paper-dark); }

/* Días (fichas) */
.dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-3); }
.dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-4) var(--space-2); background: var(--color-white);
  border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); cursor: pointer;
  transition: var(--transition); font-family: inherit;
}
.dia:hover:not([disabled]) { border-color: var(--color-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.dia-activo, .dia-activo:hover { border-color: var(--color-crime); box-shadow: inset 0 0 0 1.5px var(--color-crime); background: var(--color-paper-light); }
.dia-sem { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted); }
.dia-num { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; }
.dia-estado { font-family: var(--font-mono); font-size: .68rem; color: var(--color-muted); margin-top: var(--space-1); }
.dia-agotado { opacity: .4; cursor: not-allowed; }
.dia-agotado .dia-estado { color: var(--color-crime); }

/* Pases de la noche elegida */
.pases-dia { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px dashed var(--color-line); }
.pases-dia-titulo { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted); margin: 0 0 var(--space-3); }
.pases-dia-titulo::first-letter { text-transform: uppercase; }
.pases-dia-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.pase-precio { font-family: var(--font-mono); font-size: .68rem; color: var(--color-crime); margin-top: var(--space-1); }
.pase-agotado .pase-precio { visibility: hidden; }

/* Confianza bajo el botón */
.confianza {
  list-style: none; padding: 0; margin: var(--space-5) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center;
}
.confianza li {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-ink-soft); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-paper-light);
}
.confianza li::before { content: '✓ '; color: var(--color-success); }

/* Barra fija inferior */
.barra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  background: var(--color-ink); color: var(--color-paper);
  border-top: 3px solid var(--color-evidence); box-shadow: 0 -8px 30px rgba(15,15,18,.25);
}
.barra-fija-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.barra-resumen { display: flex; flex-direction: column; min-width: 0; }
.barra-resumen strong { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.1; text-transform: capitalize; white-space: nowrap; }
.barra-resumen span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-paper-dark); }
.barra-pago { display: flex; align-items: center; gap: var(--space-4); }
.barra-importe { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.barra-importe small { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-paper-dark); }
.barra-importe strong { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--color-evidence); white-space: nowrap; }
body.con-barra { padding-bottom: 88px; --ca-offset: 84px; }   /* los botones flotantes suben por encima */
@media (max-width: 640px) {
  .barra-importe small { display: none; }
  .barra-resumen span { display: none; }
  .barra-resumen strong { font-size: var(--fs-base); }
}

@media (max-width: 640px) {
  .hero-vivo { display: flex; flex-wrap: wrap; border-radius: var(--radius-sm); line-height: 1.5; }
  .barra-fija-in { gap: var(--space-3); }
  .barra-pago { gap: var(--space-3); }
}

/* Móvil: el importe va dentro del botón y la píldora del héroe fluye como texto */
.solo-movil { display: none; }
@media (max-width: 640px) {
  .barra-importe { display: none; }
  .solo-movil { display: inline; }
  .hero-vivo { display: block; }
  .hero-vivo-punto { display: inline-block; vertical-align: middle; margin-right: .4em; }
}

/* ---- Ajustes: menos aire entre héroe y pasos; avisos en una línea sin cajas; FAQs ---- */
.section-hero-sm { padding-bottom: var(--space-4); }
#reserva.section { padding-top: var(--space-6); }
.hero-facts { margin-bottom: 0; }
.progreso { margin-bottom: var(--space-8); }

.avisos { margin-top: var(--space-16); }
.avisos-titulo { padding-top: var(--space-6); margin-bottom: var(--space-6); }
.avisos-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.avisos-fila .aviso { background: none; border: 0; border-left: 2px solid var(--color-line); border-radius: 0; padding: var(--space-1) 0 0 var(--space-4); }
.avisos-fila .aviso:hover { transform: none; box-shadow: none; border-color: var(--color-line); }
.avisos-fila .aviso-cifra { font-size: var(--fs-3xl); margin-bottom: var(--space-2); }
.avisos-fila .aviso h3 { margin-bottom: var(--space-2); }
.avisos-fila .aviso p { font-size: var(--fs-xs); }
@media (max-width: 900px) { .avisos-fila { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .avisos-fila { grid-template-columns: 1fr; } }

.faqs { margin-top: var(--space-16); padding-top: var(--space-8); border-top: 2px solid var(--color-ink); }
.faqs h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-6); }
.faqs details { border-bottom: 1px solid var(--color-line); }
.faqs summary {
  cursor: pointer; list-style: none; padding: var(--space-4) var(--space-8) var(--space-4) 0;
  font-family: var(--font-display); font-size: var(--fs-lg); position: relative;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--color-crime);
}
.faqs details[open] summary::after { content: '−'; }
.faqs details p { margin: 0 0 var(--space-5); font-size: var(--fs-sm); line-height: 1.65; color: var(--color-ink-soft); max-width: 62ch; }

/* =====================================================================
   TEMA OSCURO — Noches de Misterio (solo páginas con body.tema-oscuro)
   Paleta: negro tinta de fondo, crema apagado para el texto, dorado para
   cifras y acentos, rojo crimen solo en la acción principal.
   ===================================================================== */
body.tema-oscuro {
  --no-bg: #0F0F12; --no-surface: #16161B; --no-surface-2: #1D1D24;
  --no-line: rgba(244, 239, 230, 0.14); --no-line-strong: rgba(244, 239, 230, 0.32);
  --no-text: #E8E1D2; --no-text-strong: #F4EFE6; --no-muted: #9A948A;
  background: var(--no-bg); color: var(--no-text);
}
body.tema-oscuro main { background: var(--no-bg); }
body.tema-oscuro main h1, body.tema-oscuro main h2, body.tema-oscuro main h3, body.tema-oscuro main legend { color: var(--no-text-strong); }
body.tema-oscuro .section, body.tema-oscuro .bg-paper-light { background: var(--no-bg); }
body.tema-oscuro .eyebrow { color: var(--color-evidence); }
body.tema-oscuro main .lead, body.tema-oscuro main p { color: var(--no-text); }
body.tema-oscuro main a:not(.btn) { color: var(--no-text-strong); text-decoration-color: var(--color-evidence); }
body.tema-oscuro main .btn-secondary { color: var(--no-text-strong); border-color: var(--no-line-strong); }
body.tema-oscuro main .btn-secondary:hover { background: var(--no-text-strong); color: var(--no-bg); }

/* Héroe con foto que se funde en negro */
.hero-foto { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--no-bg, #0F0F12); }
.hero-foto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; opacity: .9; }
.hero-foto-velo {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(15,15,18,.18) 0%, rgba(15,15,18,.45) 40%, rgba(15,15,18,.86) 72%, #0F0F12 100%);
}
.hero-foto-in { position: relative; padding-top: var(--space-24); padding-bottom: var(--space-10); }
.hero-foto-titulo { font-size: var(--fs-5xl); line-height: .95; margin: var(--space-2) 0 var(--space-3); letter-spacing: -.01em; color: #F4EFE6; }
.hero-foto-sub { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); color: var(--color-evidence); margin: 0 0 var(--space-5); }
.hero-foto-lead { font-size: var(--fs-base); line-height: 1.6; max-width: 58ch; margin: 0 0 var(--space-5); color: #E8E1D2; }
.hero-foto-lead strong { color: #F4EFE6; }
body.tema-oscuro .hero-vivo { background: rgba(244,239,230,.08); border: 1px solid var(--no-line); color: var(--no-text); }
body.tema-oscuro .hero-vivo strong { color: #F4EFE6; }
body.tema-oscuro .hero-facts li { background: transparent; border-color: var(--no-line); color: var(--no-text); }
body.tema-oscuro .hero-facts strong { color: var(--color-evidence); }
body.tema-oscuro .hero-cta { margin-top: var(--space-6); }
body.tema-oscuro .hero-precio { color: var(--no-text); }
@media (max-width: 640px) { .hero-foto { min-height: 78vh; } .hero-foto-titulo { font-size: var(--fs-4xl); } }

/* Pasos y progreso */
body.tema-oscuro .paso-num { background: var(--color-evidence); color: var(--no-bg); }
body.tema-oscuro .progreso li { color: var(--no-muted); border-top-color: var(--no-line); }
body.tema-oscuro .progreso li span { border-color: var(--no-line); }
body.tema-oscuro .progreso .progreso-activo { color: var(--no-text-strong); border-top-color: var(--color-evidence); }
body.tema-oscuro .progreso .progreso-activo span { background: var(--color-evidence); border-color: var(--color-evidence); color: var(--no-bg); }
body.tema-oscuro .progreso .progreso-hecho { color: var(--no-text); border-top-color: var(--no-line-strong); }
body.tema-oscuro .progreso .progreso-hecho span { background: var(--no-text); border-color: var(--no-text); color: var(--no-bg); }

/* Selección de noche */
body.tema-oscuro .mes { background: transparent; border-color: var(--no-line); color: var(--no-text); }
body.tema-oscuro .mes small { color: var(--no-muted); }
body.tema-oscuro .mes:hover { border-color: var(--no-line-strong); }
body.tema-oscuro .mes-activo, body.tema-oscuro .mes-activo:hover { background: var(--no-text-strong); border-color: var(--no-text-strong); color: var(--no-bg); }
body.tema-oscuro .mes-activo small { color: #55524B; }
body.tema-oscuro .dia, body.tema-oscuro .pase, body.tema-oscuro .pax-op, body.tema-oscuro .bebida {
  background: var(--no-surface); border-color: var(--no-line); color: var(--no-text);
}
body.tema-oscuro .dia:hover:not([disabled]), body.tema-oscuro .pase:hover:not([disabled]), body.tema-oscuro .pax-op:hover:not([disabled]) { border-color: var(--no-line-strong); box-shadow: none; }
body.tema-oscuro .dia-activo, body.tema-oscuro .dia-activo:hover, body.tema-oscuro .pase-activo, body.tema-oscuro .pase-activo:hover {
  background: var(--no-surface-2); border-color: var(--color-evidence); box-shadow: inset 0 0 0 1px var(--color-evidence);
}
body.tema-oscuro .dia-num, body.tema-oscuro .pase-hora { color: var(--no-text-strong); }
body.tema-oscuro .dia-sem, body.tema-oscuro .dia-estado, body.tema-oscuro .pase-libres, body.tema-oscuro .pases-dia-titulo, body.tema-oscuro .sesion-fecha { color: var(--no-muted); }
body.tema-oscuro .pase-precio { color: var(--color-evidence); }
body.tema-oscuro .dia-agotado .dia-estado { color: var(--no-muted); }
body.tema-oscuro .pases-dia { border-top-color: var(--no-line); }
body.tema-oscuro .pax-activo, body.tema-oscuro .pax-activo:hover { background: var(--no-text-strong); border-color: var(--no-text-strong); color: var(--no-bg); }
body.tema-oscuro .form-help, body.tema-oscuro .cargando { color: var(--no-muted); }

/* Resumen y formulario */
body.tema-oscuro .resumen-precio { background: var(--no-surface); border-color: var(--no-line); }
body.tema-oscuro .resumen-linea { color: var(--no-text); }
body.tema-oscuro .resumen-ahora { border-color: var(--no-line); }
body.tema-oscuro .resumen-ahora strong { color: var(--color-evidence); }
body.tema-oscuro main label { color: var(--no-text); }
body.tema-oscuro input[type="text"], body.tema-oscuro input[type="email"], body.tema-oscuro input[type="tel"], body.tema-oscuro textarea {
  background: var(--no-surface); border-color: var(--no-line-strong); color: var(--no-text-strong);
}
body.tema-oscuro input:focus, body.tema-oscuro textarea:focus { border-color: var(--color-evidence); outline: none; box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
body.tema-oscuro ::placeholder { color: var(--no-muted); }
body.tema-oscuro .bebida-ctrl button { background: var(--no-surface-2); border-color: var(--no-line); color: var(--no-text-strong); }
body.tema-oscuro .bebida-ctrl button:hover { border-color: var(--no-line-strong); }
body.tema-oscuro .bebidas-total { color: var(--no-muted); }
body.tema-oscuro .bebidas-total.ok { color: #7FBF8E; }
body.tema-oscuro .paso label.check > input[type="checkbox"] { accent-color: var(--color-evidence); }
body.tema-oscuro .paso label.check-salud { background: var(--no-surface); border-color: var(--no-line-strong); }
body.tema-oscuro .form-error { background: rgba(159,31,31,.16); border-left-color: var(--color-crime); color: var(--no-text-strong); }
body.tema-oscuro .confianza li { background: transparent; border-color: var(--no-line); color: var(--no-text); }
body.tema-oscuro .confianza li::before { color: var(--color-evidence); }
body.tema-oscuro .pronto { background: var(--no-surface); border: 1px solid var(--no-line); border-radius: var(--radius-sm); padding: var(--space-5); }
body.tema-oscuro .pronto p { margin: 0 0 var(--space-2); }
body.tema-oscuro .pronto a { color: var(--color-evidence); }

/* Avisos y FAQs */
body.tema-oscuro .avisos-titulo, body.tema-oscuro .faqs { border-top-color: var(--no-line-strong); }
body.tema-oscuro .avisos-fila .aviso { border-left-color: var(--no-line); }
body.tema-oscuro .aviso h3 { color: var(--no-muted); }
body.tema-oscuro .aviso p { color: var(--no-text); }
body.tema-oscuro .faqs details { border-bottom-color: var(--no-line); }
body.tema-oscuro .faqs summary { color: var(--no-text-strong); }
body.tema-oscuro .faqs summary::after { color: var(--color-evidence); }
body.tema-oscuro .faqs details p { color: var(--no-text); }

/* Landing */
body.tema-oscuro .paso-card, body.tema-oscuro .proxima { background: var(--no-surface); border-color: var(--no-line); color: var(--no-text); }
body.tema-oscuro .proxima:hover { border-color: var(--no-line-strong); box-shadow: none; }
body.tema-oscuro .paso-card-num { color: var(--color-evidence); }
body.tema-oscuro .paso-card p { color: var(--no-text); }
body.tema-oscuro .proxima-pase { background: var(--no-surface-2); border-color: var(--no-line); color: var(--no-text-strong); }
body.tema-oscuro .proxima-pase small { color: var(--no-muted); }
body.tema-oscuro .incluye li { border-bottom-color: var(--no-line); }
body.tema-oscuro .incluye li::before { color: var(--color-evidence); }
body.tema-oscuro .nota-minimo { background: var(--no-surface); border: 1px solid var(--no-line); }
body.tema-oscuro .faq dt { color: var(--no-text-strong); }
body.tema-oscuro .faq dd { color: var(--no-text); }
body.tema-oscuro .cta-final { background: var(--no-surface); border-top: 1px solid var(--no-line); }

/* Barra fija: un pelín más clara que el fondo para separarse */
body.tema-oscuro .barra-fija { background: var(--no-surface-2); border-top-color: var(--color-evidence); box-shadow: 0 -8px 30px rgba(0,0,0,.5); }

/* La línea «Próxima noche» fluye como texto también en escritorio (evita el salto raro del inline-flex) */
.hero-vivo { display: block; max-width: 60ch; line-height: 1.6; }
.hero-vivo-punto { display: inline-block; vertical-align: middle; margin-right: .4em; }

/* La cabecera y el pie de la web NO cambian con el tema oscuro: mismos colores que en el resto del sitio */
body.tema-oscuro .site-header .logo, body.tema-oscuro .site-header .nav-link { color: var(--color-ink); }
body.tema-oscuro .site-header .logo .dot { color: var(--color-crime); }
body.tema-oscuro .site-header .nav-link:hover { color: var(--color-crime); }
body.tema-oscuro .site-header .btn-secondary { color: var(--color-ink); border-color: var(--color-ink); }
body.tema-oscuro .site-header .btn-secondary:hover { background: var(--color-ink); color: var(--color-paper); }

/* Ajustes 17 sep: subtítulo con mayúsculas, píldoras bajo el subtítulo, sello de Google, menos aire hasta los pasos */
.mayus { text-transform: uppercase; font-style: normal; letter-spacing: .04em; }
.hero-foto-sub { margin-bottom: var(--space-4); }
.hero-foto .hero-facts { margin: 0 0 var(--space-5); }
.hero-foto-in { padding-bottom: var(--space-2); }
body.tema-oscuro .hero-vivo { margin-bottom: 0; }
#reserva.section { padding-top: var(--space-4); }
.fact-google {
  display: inline-flex; align-items: center; gap: .35em; text-transform: none; letter-spacing: 0; font-family: var(--font-body);
  background: var(--color-white, #fff); border-color: var(--color-white, #fff); color: var(--color-ink);
}
.fact-google strong, .fact-google .google { color: var(--color-ink); }
body.tema-oscuro .hero-facts li.fact-google { background: #FFFFFF; border-color: #FFFFFF; }
body.tema-oscuro .fact-google strong, body.tema-oscuro .fact-google .google, body.tema-oscuro .fact-google .en { color: #0F0F12 !important; }
.fact-google .estrellas { color: var(--color-evidence); letter-spacing: .05em; font-size: 1.05em; }
.fact-google strong { font-size: 1.05em; }
.fact-google .en { color: var(--no-muted, var(--color-muted)); font-size: .9em; }
.fact-google .google { font-weight: 700; letter-spacing: -.01em; }
.avisos-fila .aviso:first-child .aviso-cifra { margin-bottom: 0; }

/* Lista de espera en pase completo y cupón */
.pase-agotado { cursor: default; }
.avisame { margin-top: var(--space-2); background: none; border: 1px solid var(--color-line); border-radius: 999px; padding: var(--space-1) var(--space-3); font-family: var(--font-mono); font-size: .68rem; cursor: pointer; color: inherit; opacity: 1; }
.avisame:hover { border-color: var(--color-evidence); color: var(--color-evidence); }
body.tema-oscuro .pase-agotado { opacity: .75; }
body.tema-oscuro .pase-agotado .pase-hora { opacity: .6; }
.espera-form { display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.espera-form input[type="email"] { padding: var(--space-2) var(--space-3); border: 1px solid var(--no-line-strong, var(--color-line)); border-radius: var(--radius-sm); background: var(--no-surface-2, #fff); color: inherit; font-size: var(--fs-sm); }
.espera-form .check { font-size: .72rem; }
.espera-form .btn { justify-self: start; padding: var(--space-2) var(--space-4); font-size: .8rem; }
#cupon { max-width: 240px; letter-spacing: .08em; font-family: var(--font-mono); }

/* Aviso al volver de Stripe sin pagar, y página de reserva confirmada */
.nota-cancelado { background: rgba(201,162,39,.12); border-left: 3px solid var(--color-evidence); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-6); font-size: var(--fs-sm); }
.confirmada { max-width: 640px; margin: 0 auto; text-align: center; }
.confirmada-codigo { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-2xl); letter-spacing: .1em; color: var(--color-evidence); border: 1.5px solid var(--no-line-strong, var(--color-line)); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-6); margin: var(--space-4) 0 var(--space-8); }
.confirmada-pasos { list-style: none; padding: 0; margin: 0 0 var(--space-10); display: grid; gap: var(--space-4); text-align: left; counter-reset: paso; }
.confirmada-pasos li { counter-increment: paso; position: relative; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-12) + var(--space-2)); background: var(--no-surface, #fff); border: 1px solid var(--no-line, var(--color-line)); border-radius: var(--radius-sm); }
.confirmada-pasos li::before { content: counter(paso); position: absolute; left: var(--space-5); top: var(--space-4); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-evidence); color: #0F0F12; font-family: var(--font-mono); }
.confirmada-pasos strong { display: block; color: var(--no-text-strong, inherit); }

/* Aviso del cupón */
.cupon-ok { color: #7FBF8E !important; }
.cupon-mal { color: var(--color-crime) !important; }
body.tema-oscuro .cupon-mal { color: #E88; }

/* Meses sin ninguna plaza: se ven, pero apagados */
.mes-lleno { opacity: .45; }
.mes-lleno.mes-activo { opacity: 1; }

/* Aviso de edad mínima */
.avisos-edad { margin-top: var(--space-8); font-size: var(--fs-sm); text-align: center; }
.avisos-edad strong { color: var(--color-evidence); }