/* =========================================================================
   REBOOT · ESTILOS
   -------------------------------------------------------------------------
   Organización del archivo:
   1. Variables (colores, tipografías) ... fácil de cambiar arriba de todo
   2. Reset y base
   3. Utilidades (container, botones, etc.)
   4. Encabezado / navegación
   5. Hero
   6. Secciones (servicios, pasos, nosotros, contacto)
   7. Pie de página y WhatsApp flotante
   8. Página de reservas
   9. Responsive (celulares)
   ========================================================================= */

/* ============================ 1. VARIABLES ============================== */
:root {
  /* Colores: cambialos acá y se actualiza todo el sitio.
     Paleta monocromática (negro + plata) acorde al logo de Reboot. */
  --bg:            #0a0b0d;   /* fondo principal (casi negro) */
  --bg-alt:        #0f1113;   /* fondo de secciones alternas */
  --surface:       #14161a;   /* tarjetas */
  --surface-2:     #1b1e23;   /* tarjetas hover / inputs */
  --border:        #2a2e35;   /* bordes sutiles */
  --text:          #f4f5f3;   /* texto principal (blanco roto) */
  --text-muted:    #9097a1;   /* texto secundario */
  --accent:        #e9ebee;   /* plata / blanco metálico (identidad Reboot) */
  --accent-strong: #ffffff;
  --accent-soft:   rgba(233, 235, 238, 0.10);

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1140px;

  --font-display: "Playfair Display", Georgia, serif; /* títulos elegantes (lujo) */
  --font-title:   "Sora", system-ui, sans-serif;        /* UI: botones, números, logo */
  --font-body:    "Inter", system-ui, sans-serif;       /* texto */

  --shadow:    0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

/* ============================ 2. RESET / BASE ========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 600; letter-spacing: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

h2 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
h3 { font-size: 1.45rem; }

/* ============================ 3. UTILIDADES =========================== */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { padding: 96px 0; position: relative; }
/* Bandas alternas: una capa translúcida que da ritmo sin tapar la foto */
.section-alt { background: rgba(8, 9, 11, 0.42); }
.center { text-align: center; }
.text-accent {
  background: linear-gradient(160deg, #ffffff 0%, #c7ccd2 45%, #8b9097 70%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Eyebrow que va DENTRO del <h1> del hero: mantiene el look del eyebrow
   (chico, en mayúsculas, plateado) y resetea el serif grande que heredaría
   del h1. Es bloque para quedar en su propia línea arriba del eslogan. */
.hero-eyebrow {
  display: block;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent);
  margin-bottom: 18px;
}

.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-lead { color: var(--text-muted); margin-top: 16px; font-size: 1.05rem; }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: #0a0b0d; }
.btn-primary:hover { background: var(--accent-strong); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Animación "reveal" al hacer scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================ 4. HEADER ============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 14, 17, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); background: rgba(12, 14, 17, 0.92); }

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.logo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  color: #d9dde2;
}
.logo-mark svg { width: 22px; height: 22px; }
/* Texto del logo con degradado metálico (efecto cromado) */
.logo-word {
  background: linear-gradient(160deg, #ffffff 0%, #c7ccd2 35%, #8b9097 60%, #eef1f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 2px; /* evita que se corte la última letra */
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 0.95rem; color: var(--text-muted); transition: color 0.2s ease; }
.nav a:hover { color: var(--text); }
.nav a.btn-primary { color: #0a0b0d; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ 5. HERO ================================ */
.hero { position: relative; padding: 140px 0 110px; }

/* === Fondo dinámico (imágenes que cambian con el scroll) === */
.bg-stage { position: fixed; inset: 0; z-index: -1; background: var(--bg); }
.bg-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease;
  transform: scale(1.04);
  filter: saturate(0.85) brightness(0.8);
}
.bg-slide.is-active { opacity: 1; }
/* Velo oscuro encima de las fotos para que el texto siempre se lea bien */
.bg-stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,9,11,0.78) 0%, rgba(8,9,11,0.62) 35%, rgba(8,9,11,0.72) 65%, rgba(8,9,11,0.88) 100%);
}

.hero-inner { max-width: 760px; }
.hero-title { font-size: clamp(2.7rem, 6.4vw, 4.7rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; }
.hero-sub { color: var(--text-muted); font-size: 1.15rem; margin: 22px 0 34px; max-width: 560px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 40px; margin-top: 64px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat strong { font-family: var(--font-title); font-size: 2rem; color: var(--accent); }
.stat span { color: var(--text-muted); font-size: 0.9rem; }

/* ============================ 6. SERVICIOS ========================== */
/* --- Herramientas (tarjetas con foto) --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.service-card {
  background: rgba(18, 20, 24, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.service-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.service-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.service-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease; filter: saturate(0.92);
}
.service-card:hover .service-photo img { transform: scale(1.06); }

/* Imágenes de producto solo sobre fondo negro: se muestran enteras y el
   fondo negro de la foto se funde con el del recuadro (look de catálogo). */
.service-photo.is-contain { background: #000; }
.service-photo.is-contain img { object-fit: contain; filter: none; }
.service-body { padding: 22px; }
.service-body h3 { margin-bottom: 8px; }
.service-body p { color: var(--text-muted); font-size: 0.92rem; }
/* Link "Ver más" hacia la página propia del servicio */
.service-link {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-title); font-weight: 600; font-size: 0.86rem;
  color: var(--accent); transition: opacity 0.2s ease;
}
.service-link:hover { opacity: 0.7; }

/* La tarjeta entera es clickeable (abre el modal de vista rápida) */
.service-card[role="button"] { cursor: pointer; }
.service-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Modal de vista rápida de una herramienta --- */
.svc-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4, 5, 7, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.svc-modal.open { opacity: 1; visibility: visible; }

.svc-modal-card {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}
.svc-modal.open .svc-modal-card { transform: none; }

.svc-modal-figure { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.svc-modal-figure img { width: 100%; height: 100%; object-fit: cover; }
.svc-modal-figure.is-contain { background: #000; }
.svc-modal-figure.is-contain img { object-fit: contain; }

.svc-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(10, 11, 13, 0.6);
  color: var(--text); font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(6px); transition: 0.2s;
}
.svc-modal-close:hover { border-color: var(--accent); color: var(--accent); }

.svc-modal-content { padding: 26px 28px 28px; }
.svc-modal-content h3 { font-size: 1.6rem; margin: 4px 0 12px; }
.svc-modal-desc { color: var(--text-muted); font-size: 0.96rem; margin-bottom: 20px; }
.svc-modal-benefits { margin-bottom: 18px; }
.svc-modal-sessions { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.svc-modal-sessions strong { color: var(--text); }
.svc-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.svc-modal-actions .btn { flex: 1; min-width: 130px; }

@media (max-width: 480px) {
  .svc-modal { padding: 14px; }
  .svc-modal-content { padding: 22px 20px 24px; }
}

/* Etiqueta de marca en cada herramienta */
.brand-chip {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-title); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px;
}
/* Aclaración de marca debajo del título de la sección */
.brand-note {
  margin-top: 18px;
  font-size: 0.9rem; color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 16px; display: inline-block;
}
.brand-note strong { color: var(--text); }

/* --- Sesiones (planes reservables) --- */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(18, 20, 24, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.plan-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.plan-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(233,235,238,0.10), rgba(18,20,24,0.66) 60%);
  box-shadow: var(--shadow);
}
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #0a0b0d;
  font-family: var(--font-title); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-name { font-size: 1.3rem; margin-bottom: 8px; }
.plan-price { font-family: var(--font-title); font-weight: 700; font-size: 2.3rem; color: var(--text); line-height: 1; }
.plan-duration {
  color: var(--text-muted); font-size: 0.9rem; margin: 6px 0 18px;
  display: inline-flex; align-items: center; gap: 6px;
}
/* Relojito que acompaña a la duración (60´) */
.ico-clock { flex-shrink: 0; vertical-align: -2px; color: var(--accent); opacity: 0.8; }
.opt-desc .ico-clock, .summary-row .ico-clock { display: inline-block; }
.plan-includes { display: grid; gap: 9px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.plan-includes li { position: relative; padding-left: 26px; font-size: 0.94rem; }
.plan-includes li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 0.66rem; font-weight: 700;
}
.plan-desc { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 22px; flex: 1; }
.plan-card .btn { width: 100%; }

/* ============================ PASOS ================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 48px;
}
.step {
  background: rgba(18, 20, 24, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.step-num { font-family: var(--font-title); font-size: 2.4rem; font-weight: 700; color: var(--accent); opacity: 0.5; }
.step h3 { margin: 12px 0 8px; }
.step p { color: var(--text-muted); }

/* ============================ NOSOTROS ============================= */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.media-placeholder, .map-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background:
    radial-gradient(circle at 30% 30%, rgba(233,235,238,0.07), transparent 60%),
    var(--surface);
  display: grid; place-items: center;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }

/* Mapa de Google embebido */
.map-embed { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.3) invert(0.92) hue-rotate(180deg); }
.about-text h2 { margin: 10px 0 18px; }
.about-text p { color: var(--text-muted); margin-bottom: 22px; }

.check-list { display: grid; gap: 12px; margin-bottom: 28px; }
.check-list li { position: relative; padding-left: 30px; color: var(--text); }
.check-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700;
}

/* ============================ CARTEL DE PROMO ======================= */
/* Banner de la promo de apertura (arriba de todo, antes del header).
   Se muestra solo si CONFIG.promo2x1.activa === true. */
.promo-banner { display: none; text-align: center; }
.promo-banner.show { display: block; }
.promo-banner-link {
  display: block; padding: 10px 20px;
  background: linear-gradient(120deg, #c7ccd2 0%, #eef1f4 45%, #a9b0b8 100%);
  color: #0a0b0d; font-family: var(--font-title); font-weight: 700; font-size: 0.9rem;
  transition: opacity 0.2s ease;
}
.promo-banner-link:hover { opacity: 0.85; }

/* ============================ CTA BAND ============================= */
.cta-band {
  background: linear-gradient(120deg, #c7ccd2 0%, #eef1f4 45%, #a9b0b8 100%);
  color: #0a0b0d;
}
.cta-inner { text-align: center; padding: 70px 0; }
.cta-inner h2 { color: #0a0b0d; }
.cta-inner p { margin: 12px 0 26px; font-size: 1.1rem; opacity: 0.8; }
.cta-inner .btn-primary { background: #0a0b0d; color: #f4f5f3; }
.cta-inner .btn-primary:hover { background: #16181c; }

/* ============================ CONTACTO ============================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contact-list { margin-top: 24px; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-muted); }
.contact-list .ico { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.contact-list a:hover { color: var(--accent); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Íconos sociales del pie */
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-muted);
  transition: 0.2s;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }

/* ============================ 7. FOOTER =========================== */
.site-footer { border-top: 1px solid var(--border); padding: 36px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.logo-footer { font-size: 1.2rem; }
.footer-copy { color: var(--text-muted); font-size: 0.88rem; }

/* WhatsApp flotante */
.wsp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.2s ease;
}
.wsp-float:hover { transform: scale(1.08); }

/* ============================ 8. RESERVAS ========================= */
.booking { padding: 110px 0 90px; min-height: 100vh; }
.booking-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.booking-head p { color: var(--text-muted); margin-top: 12px; }

/* Barra de progreso por pasos */
.progress { display: flex; justify-content: center; gap: 0; margin-bottom: 44px; flex-wrap: wrap; }
.progress-step { display: flex; align-items: center; color: var(--text-muted); font-size: 0.85rem; }
.progress-step .dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; font-weight: 600; margin-right: 10px;
  font-family: var(--font-title); transition: 0.3s;
}
.progress-step.active .dot { background: var(--accent); color: #0a0b0d; border-color: var(--accent); }
.progress-step.done .dot { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.progress-step.active { color: var(--text); }
.progress-line { width: 50px; height: 1px; background: var(--border); margin: 0 14px; }

/* Tarjeta del wizard */
.booking-card {
  max-width: 720px; margin: 0 auto;
  background: rgba(18, 20, 24, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px;
  box-shadow: var(--shadow);
}
.step-panel { display: none; animation: fade 0.4s ease; }
.step-panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.step-title { font-size: 1.35rem; margin-bottom: 6px; }
.step-desc { color: var(--text-muted); margin-bottom: 26px; font-size: 0.95rem; }

/* Opciones seleccionables (servicios / pago) */
.option-list { display: grid; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px 20px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.option:hover { border-color: var(--accent); }
.option.selected { border-color: var(--accent); background: var(--accent-soft); }
.option .opt-icon { color: var(--accent); flex-shrink: 0; }
.option .opt-body { flex: 1; }
.option .opt-name { font-family: var(--font-title); font-weight: 600; }
.option .opt-desc { color: var(--text-muted); font-size: 0.88rem; }
.option .opt-price { font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; color: var(--text); white-space: nowrap; }
.option-featured { border-color: var(--accent); }
.opt-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  background: var(--accent); color: #0a0b0d;
  font-family: var(--font-title); font-weight: 600; font-size: 0.66rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.option.disabled { opacity: 0.45; cursor: not-allowed; }
.option.disabled:hover { border-color: var(--border); }

/* Selector de cantidad de personas (paso 1 del turnero) */
.party-size { margin-top: 22px; }
.party-options { display: flex; gap: 12px; margin-top: 10px; }
.party-btn {
  flex: 1; padding: 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-alt);
  color: var(--text); font-family: var(--font-title); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: 0.2s;
}
.party-btn:hover { border-color: var(--accent); }
.party-btn.selected { background: var(--accent); color: #0a0b0d; border-color: var(--accent); }
.party-promo-note {
  display: none; margin-top: 12px; font-size: 0.86rem; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.party-promo-note.show { display: block; }

/* Calendario de días */
.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.day-btn {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 6px; cursor: pointer;
  text-align: center; transition: 0.2s; font-family: var(--font-body); color: var(--text);
}
.day-btn:hover:not(:disabled) { border-color: var(--accent); }
.day-btn.selected { background: var(--accent); color: #0a0b0d; border-color: var(--accent); }
.day-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.day-btn .dow { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.day-btn.selected .dow { color: #0a0b0d; }
.day-btn .dnum { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.3rem; }
.day-btn .dmon { display: block; font-size: 0.72rem; color: var(--text-muted); }
.day-btn.selected .dmon { color: #0a0b0d; }

/* Horarios */
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; margin-top: 20px; }
.slot-btn {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px; cursor: pointer;
  font-family: var(--font-title); font-weight: 500; color: var(--text); transition: 0.2s;
}
.slot-btn:hover { border-color: var(--accent); }
.slot-btn.selected { background: var(--accent); color: #0a0b0d; border-color: var(--accent); }
.field-label { font-size: 0.85rem; color: var(--text-muted); margin: 6px 0 8px; font-weight: 600; }

/* Formulario de datos */
.form-grid { display: grid; gap: 18px; }
.form-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 7px; color: var(--text-muted); }
.form-field input, .form-field textarea {
  width: 100%; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 15px; color: var(--text);
  font-family: var(--font-body); font-size: 0.96rem; transition: border-color 0.2s ease;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); }
.form-field textarea { resize: vertical; min-height: 80px; }
.input-error { border-color: #ff6b6b !important; }

/* Resumen final */
.summary { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 22px; margin-bottom: 22px; }
.summary-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.summary-row:last-child { border-bottom: none; }
.summary-row .k { color: var(--text-muted); }
.summary-row .v { font-weight: 600; text-align: right; }
.summary-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-title); font-size: 1.2rem; }
.summary-total .v { color: var(--accent); }

/* Aclaración legal: las sesiones son de bienestar, no tratamiento médico/kinésico */
.legal-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 0.86rem; line-height: 1.55;
  color: var(--text-muted); margin-bottom: 22px;
}
.legal-note strong { color: var(--text); }
/* Texto simple antes de confirmar (sin caja, para no confundir con las opciones) */
.confirm-note { color: var(--text-muted); font-size: 0.88rem; margin: 16px 0 22px; }

/* Versión con checkbox obligatorio: hay que tildarla para confirmar */
.legal-check { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; transition: border-color 0.2s ease; }
.legal-check:hover { border-color: var(--accent); }
/* Casilla custom, grande y visible sobre fondo oscuro */
.legal-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px;
  border: 2px solid var(--accent); border-radius: 7px;
  background: transparent; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s ease, transform 0.1s ease;
}
.legal-check input[type="checkbox"]::after {
  content: "✓"; font-size: 16px; font-weight: 800; color: #0a0b0d;
  opacity: 0; transform: scale(0.4); transition: 0.15s ease;
}
.legal-check input[type="checkbox"]:checked { background: var(--accent); }
.legal-check input[type="checkbox"]:checked::after { opacity: 1; transform: none; }
.legal-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Navegación del wizard */
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.wizard-nav .btn { flex: 1; }
.hint { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 14px; min-height: 1.2em; }
.hint.error { color: #ff8a8a; }

/* Pantalla de éxito */
.success { text-align: center; padding: 20px 0; }
.success-icon {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.success h2 { margin-bottom: 12px; }
.success p { color: var(--text-muted); margin-bottom: 24px; }

/* ============================ 9. RESPONSIVE ====================== */
@media (max-width: 900px) {
  .services-grid, .steps { grid-template-columns: 1fr 1fr; }
  .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .section { padding: 70px 0; }
  .nav {
    /* position: absolute (no fixed con un "top" fijo en px) para que el
       menú siempre quede pegado justo debajo del header (su ancestro
       posicionado), sin importar si arriba hay un cartel de promo o no,
       ni si el header todavía no se "pegó" arriba de todo (sticky). Un
       valor fijo en px se desincroniza apenas cambia lo que hay arriba. */
    position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-alt); border-bottom: 1px solid var(--border);
    padding: 12px 24px 24px;
    transform: translateY(-130%);
    /* visibility:hidden hace que el menú CERRADO sea 100% invisible aunque,
       por ser alto, una parte "asome" del translate (el botón "Reservar
       turno" quedaba visible arriba de todo). El translate solo daba la
       animación; la visibility garantiza que no se vea nada cerrado.
       El delay en la transición de visibility deja ver el deslizado al
       cerrar antes de ocultarlo. */
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
    z-index: 99;
  }
  .nav.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.35s ease, visibility 0s;
  }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav a.btn-primary { margin-top: 12px; text-align: center; border-bottom: none; }
  .nav-toggle { display: flex; }
  .services-grid, .steps { grid-template-columns: 1fr; }
  .hero-stats { gap: 28px; }
  .booking-card { padding: 24px; }
  .progress-step span.label { display: none; }
  .progress-line { width: 28px; margin: 0 8px; }

  /* Hero: título menos "pesado" en pantallas chicas (antes tenía un piso de
     2.7rem fijo por más angosta que fuera la pantalla, y ocupaba 3 líneas). */
  .hero { padding: 110px 0 64px; }
  .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.14em; margin-bottom: 14px; }
  .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); line-height: 1.18; }
  .hero-sub { font-size: 1rem; margin: 16px 0 26px; }

  /* Cartel de la promo: compacto y fino. (El relleno grande de antes era
     para compensar un "corte" que en realidad era el bug del menú móvil,
     ya resuelto — ver más arriba.) El env(safe-area-inset-top) suma un
     poco de margen en celulares con notch, si el navegador lo reporta. */
  .promo-banner-link {
    font-size: 0.74rem; line-height: 1.4;
    padding: calc(9px + env(safe-area-inset-top, 0px)) 16px 9px;
  }
}

/* ===================== 10. PÁGINAS DE SERVICIO ==================== */
/* Layout de las páginas individuales (crioterapia, sauna, etc.).
   Reutilizan header, footer, botones y .section del resto del sitio. */

/* Migas de pan (Inicio › Servicio) */
.breadcrumb {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--text-muted); margin-bottom: 26px;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--text); }

/* Hero de la página de servicio */
.svc-hero { padding: 64px 0 32px; }
.svc-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.svc-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); line-height: 1.1; }
.svc-hero .lead { color: var(--text-muted); font-size: 1.12rem; margin: 18px 0 28px; max-width: 540px; }
.svc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.svc-hero-media {
  background: #000; border: 1px solid var(--border); border-radius: var(--radius);
  aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center;
}
.svc-hero-media img { width: 100%; height: 100%; object-fit: contain; }

/* Grilla de beneficios */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.benefit {
  background: rgba(18, 20, 24, 0.55);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
}
.benefit h3 { font-size: 1.12rem; margin-bottom: 8px; }
.benefit p { color: var(--text-muted); font-size: 0.93rem; }

/* Texto corrido (descripciones largas) */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { color: var(--text-muted); margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }

/* Sesiones donde se incluye este servicio */
.related-sessions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* Preguntas frecuentes (acordeón con <details>, sin JavaScript) */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  background: rgba(18, 20, 24, 0.55);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 22px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-family: var(--font-title); font-weight: 600; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; line-height: 1; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { color: var(--text-muted); margin: 0; padding: 0 0 20px; font-size: 0.96rem; }

@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .svc-hero-media { max-width: 460px; }
  .benefit-grid { grid-template-columns: 1fr; }
}

/* ===================== 11. MICRO-INTERACCIONES ==================== */

/* Hover más vivo en las tarjetas (glow sutil además del leve levantado) */
.service-card:hover, .plan-card:hover, .benefit:hover {
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--accent-soft);
}
.benefit { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.benefit:hover { transform: translateY(-4px); border-color: var(--accent); }

/* Botón flotante de "Reservar" (se inyecta por JS, aparece al scrollear).
   Va abajo a la izquierda para no chocar con el flotante de WhatsApp (derecha).
   Solo en celular/tablet: en desktop el botón del header ya está siempre visible. */
.reservar-float {
  position: fixed; left: 22px; bottom: 22px; z-index: 90;
  display: none; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--accent); color: #0a0b0d;
  font-family: var(--font-title); font-weight: 700; font-size: 0.92rem;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(20px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.reservar-float.show { opacity: 1; transform: none; pointer-events: auto; }
.reservar-float:hover { background: var(--accent-strong); }
@media (max-width: 900px) {
  .reservar-float { display: inline-flex; }
}

/* Accesibilidad: si el sistema pide menos movimiento, cortamos animaciones */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reservar-float { transition: opacity 0.2s ease; transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ===================== 12. GALERÍA + LIGHTBOX ==================== */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-item {
  position: relative; overflow: hidden; padding: 0;
  aspect-ratio: 4 / 3; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.gallery-item:hover { border-color: var(--accent); transform: translateY(-3px); }
.gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; filter: saturate(0.9); }
.gallery-item:hover img { transform: scale(1.08); }
/* velo oscuro + lupa al pasar el mouse */
.gallery-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 11, 13, 0.32); opacity: 0; transition: opacity 0.3s ease;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-zoom {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  color: #fff; opacity: 0; transform: scale(0.7); transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item:hover .gallery-zoom { opacity: 1; transform: none; }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 16px 14px; text-align: left;
  color: #fff; font-family: var(--font-title); font-weight: 600; font-size: 0.86rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: none; }

/* Visor ampliado (lightbox) */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4, 5, 7, 0.93);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: min(1000px, 92vw); max-height: 80vh;
  object-fit: contain; border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; }
.lb-title { font-family: var(--font-title); font-weight: 600; color: #f4f5f3; font-size: 0.98rem; }
.lb-count { color: var(--text-muted); font-size: 0.8rem; margin-top: 4px; }
.lb-btn, .lb-close {
  position: absolute; z-index: 2; cursor: pointer;
  background: rgba(20, 22, 26, 0.7); border: 1px solid var(--border); color: #fff;
  display: grid; place-items: center; transition: 0.2s;
  backdrop-filter: blur(6px);
}
.lb-btn { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; }
.lb-prev { left: 18px; } .lb-next { right: 18px; }
.lb-close { top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.lb-btn:hover, .lb-close:hover { border-color: var(--accent); color: var(--accent); background: rgba(20, 22, 26, 0.95); }

@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* En celular la caption se ve siempre (no hay hover) */
  .gallery-caption { opacity: 1; transform: none; font-size: 0.78rem; }
  .lb-btn { width: 42px; height: 42px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
}