/* ==========================================================
   Adriana Rojas — Centro de Estética Facial
   Video de fondo activo en el hero (assets/video/videoprueba.mp4),
   a 0.8x de velocidad (ver script.js). Glassmorphism reservado
   únicamente a botones (redes, CTA, flechas del carrusel). Secciones
   separadas con líneas sutiles. Mobile-first.
   ========================================================== */

:root {
  --bg: #FFFFFF;
  --bg-alt: #F3E7D6;
  --surface: #FFFEFB;
  --wood: #7C5A3A;
  --wood-dark: #5B3F27;
  --wood-soft: #C8AD8B;
  --gold: #AD8A57;
  --text: #362A20;
  /* Subido de contraste (P1-6): #8A7A6A daba ~3.4:1 sobre el panel claro
     del modal — por debajo de AA para texto <18px (hints, "Disponible/No
     disponible", <dt> del resumen). Este tono conserva el mismo carácter
     cálido/tostado de la identidad pero llega a ~5:1. Solo afecta texto
     sobre panel claro; el texto sobre foto/vídeo usa tokens propios
     (#fff / rgba blanco), no esta variable. */
  --text-muted: #766757;
  --border: #E8DCC7;
  --shadow: 220 35% 8%;

  /* Satoshi para toda la interfaz; la jerarquía se logra con el peso
     (400/500 texto, 600/700/900 títulos y acentos), no con dos familias. */
  --font-heading: 'Satoshi', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Satoshi', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Glass — usado solo en hero, redes, carrusel y modal (sobre el video) */
  --glass-surface: rgba(255, 253, 248, 0.5);
  --glass-surface-strong: rgba(255, 253, 248, 0.7);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: 18px;
  --glass-shadow: 0 16px 40px -18px rgba(35, 22, 10, 0.55);
  --ink: #2E2115;
  --ink-soft: rgba(46, 33, 21, 0.72);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Quita el recuadro/flash azul nativo de Android Chrome al tocar
     cualquier elemento (botones, links, chips) — es puramente el efecto
     de toque táctil de WebKit/Blink, no afecta :focus-visible por
     teclado en absoluto (son dos mecanismos independientes). */
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

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

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; padding: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--wood);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--wood);
  outline-offset: 3px;
}
/* El anillo azul nativo del navegador es para :focus, no :focus-visible.
   Se suprime solo cuando el foco NO es "visible" (p. ej. llegó por toque
   o clic, no por teclado) — el indicador de teclado de arriba queda
   intacto, así que Tab sigue mostrando el foco con normalidad. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ===================== VIDEO DE FONDO ===================== */

.bg-video-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Causa real del salto en iOS: "inset:0" (top+right+bottom+left:0) no es
     un tamaño fijo, es una fórmula de dos anclas que el navegador recalcula
     en cada frame de la animación de la barra de direcciones — se comporta
     como 100dvh aunque no use esa unidad. "lvh" (large viewport height) es
     un valor ESTÁTICO: se calcula una sola vez asumiendo la barra oculta y
     nunca se recalcula durante el gesto de scroll, así que el elemento
     nunca cambia de tamaño mientras la barra se anima — con la barra visible
     sobra unos px por debajo (fuera de pantalla, inofensivo); con la barra
     oculta encaja exacto. 100vh como respaldo para navegadores sin soporte
     de unidades de viewport dinámicas (mismo patrón que .hero más abajo). */
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  overflow: hidden;
  /* Capa de composición GPU — ayuda al repintado, pero por sí sola no
     evita el recálculo de tamaño de arriba (por eso se mantiene, no se
     quita, pero ya no es la única defensa). */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  background: linear-gradient(160deg, #EFE0C9 0%, #C9AD87 55%, #9C7A50 100%);
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Propia capa GPU también para la imagen (no solo su contenedor fixed):
     evita que el bitmap se repinte con un frame de desfase propio,
     independiente del contenedor, durante la misma animación del
     viewport visual descrita arriba. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* sin video (aún no cargado el archivo real, o preferencia de menos
   movimiento): el video se oculta y queda el degradado cálido de fondo */
.bg-video-wrap.no-video .bg-video { display: none; }

.bg-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 22, 10, 0.18) 0%, rgba(35, 22, 10, 0.32) 55%, rgba(35, 22, 10, 0.5) 100%);
}

/* ===================== HERO ===================== */

/* Ocupa toda la primera pantalla a propósito: Servicios/carrusel deben
   quedar fuera del viewport inicial y aparecer solo al hacer scroll.
   100dvh (con 100vh de respaldo para navegadores que no lo soportan)
   en vez de 100vh a secas, para que en móvil no quede corto ni sobre
   por el achique/expansión de la barra de direcciones. */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--wood-soft), var(--wood));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -12px hsl(var(--shadow) / 0.4);
  border: 3px solid rgba(255, 255, 255, 0.75);
  outline: 1px solid var(--glass-border);
}

.logo-fallback {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  letter-spacing: 0.02em;
}

.logo.has-photo .logo-fallback { display: none; }

/* El logo real del hero (#logo-photo) es un lockup ancho que ya incluye
   "Adriana Rojas" + "Centro de Estética Facial" — no es un ícono
   circular, así que se anula el círculo/fondo de .logo solo aquí.
   Sin panel ni fondo detrás: queda integrado directo sobre el video.
   El logo del footer (#logo-photo-footer) no se toca: conserva el
   círculo tal como estaba. */
/* Contraste del logo sobre foto: el PNG tiene zonas de trazo oscuro/negro
   que pueden perder legibilidad según qué parte de la foto de fondo caiga
   detrás. En vez de una caja/panel (se vería pesado y artificial), un
   halo suave y difuso alrededor del propio trazo del logo — mismo recurso
   ya usado en las flechas del carrusel (varias drop-shadow apiladas) —
   sigue el contorno real del PNG (drop-shadow respeta su canal alfa), así
   que no aparece como un rectángulo: solo ilumina donde hay letras/gráfico. */
#logo-photo {
  width: min(78vw, 300px);
  aspect-ratio: 3 / 2;
  height: auto;
  margin: 0 0 4px;
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  outline: none;
  box-shadow: none;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.28));
}

/* Ya representado por el logo — oculto para no duplicar el texto
   (se conserva en el HTML para accesibilidad/SEO vía el logo). */
.hero-name,
.hero-tagline {
  display: none;
}

.social-row {
  display: flex;
  gap: 14px;
}

/* Redes del Hero: fuera del bloque principal (no compiten con el logo),
   fila propia y discreta con su propio espacio de aire arriba/abajo. */
.hero-social {
  margin-top: 34px;
  justify-content: center;
}

.social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* Blanco como color principal — el tinte café/dorado anterior se veía
     apagado y sin presencia sobre el fondo del hero. Glass transparente
     neutro + borde e icono blancos, mismo lenguaje que ya usan las
     flechas del carrusel y el indicador "Desliza". */
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px -12px rgba(35, 22, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.social-btn svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.social-btn:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(35, 22, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.social-btn:active { transform: translateY(0) scale(0.94); }

/* Indicador de scroll: discreto, con una flecha que "respira" hacia
   abajo para invitar a continuar. Se desvanece solo apenas el usuario
   empieza a bajar (ver script.js). */
.scroll-hint {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 400ms var(--ease);
}
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
.scroll-hint-text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.scroll-hint-arrow {
  width: 18px;
  height: 18px;
  animation: scroll-hint-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow { animation: none; }
}

/* ===================== SECTIONS ===================== */

.section {
  padding: 48px 20px;
  max-width: 720px;
  margin: 0 auto;
}

/* Sin líneas duras entre secciones: en su lugar, un adorno mínimo
   (línea muy tenue que se desvanece a los lados + un punto central) que
   marca el cambio sin sentirse como un corte — se usa entre Servicios→
   Ubicación→Horarios→Footer. El Hero→Servicios queda intencionalmente
   sin nada, para una transición totalmente continua. */
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 140px;
  margin: 0 auto 34px;
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}
.section-divider-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Título y subtítulo de Tratamientos quedan sobre el video (no hay
   fondo opaco detrás, a propósito, para la transición sin línea): un
   color oscuro fijo pierde contraste según el fotograma. Blanco +
   sombra de texto garantiza legibilidad sin depender del video. */
/* Sin padding horizontal propio: así el carrusel (hijo directo) puede
   ocupar el ancho completo sin depender de vw/márgenes negativos (esa
   técnica es imprecisa en algunos navegadores móviles y dejaba
   espacios laterales). El título/subtítulo y el botón "Reservar cita"
   recuperan su propio padding lateral abajo para no pegarse al borde. */
#servicios {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
#servicios .section-title,
#servicios .section-subtitle {
  color: #fff;
}
#servicios .section-title {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45);
}
#servicios .section-subtitle {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 5.5vw, 30px);
  margin: 0 0 6px;
  color: var(--wood-dark);
  text-align: center;
}

.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin: 0 0 14px;
  font-size: 14.5px;
}

.section-glass {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  margin: 0 auto 14px;
}

/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===================== CARRUSEL — COVERFLOW ===================== */
/* Recorrido curvo con profundidad: la tarjeta central es protagonista,
   las laterales se escalan/rotan/descienden ligeramente. Posición
   continua (no por índices discretos) para que el giro sea infinito
   y el salto último→primero sea imperceptible. Ver script.js. */

/* Ancho completo del teléfono (100% de #servicios, que ya no tiene
   padding lateral ni max-width — ver arriba): antes esto se lograba
   con width:100vw + margin negativo, una técnica imprecisa en algunos
   navegadores móviles (deja espacios laterales o un pelín de overflow
   según cómo cuenten el scrollbar/la UI dinámica). "100% de un padre
   sin padding" es exacto siempre, sin cálculos de por medio.
   Importante para el carrusel: el falloff de opacidad se calcula a
   partir del ancho real de este elemento (ver script.js), así que
   cuanto más angosto esté, antes tienen que desvanecerse las tarjetas
   vecinas para no cortarse contra el borde. */
.coverflow {
  position: relative;
  height: clamp(440px, 125vw, 500px);
  width: 100%;
  overflow: hidden;
  perspective: 1300px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.coverflow-track {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Sin preserve-3d a propósito: con él, el navegador ordena el pintado
     por profundidad 3D real en vez de z-index, y los planos inclinados
     (rotateY) de tarjetas vecinas pueden atravesarse/parpadear entre sí.
     Cada tarjeta sigue inclinándose igual (rotateY individual + la
     perspective del contenedor), pero el orden de apilado ahora lo
     decide siempre nuestro z-index — sin cruces posibles. */
}

.coverflow-card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* ~70-80% del ancho del contenedor en celular (ver TARGET_DEPTH en
     script.js, que deriva el espaciado de vecinas a partir de este
     ancho real medido en pantalla). */
  width: clamp(248px, 72vw, 300px);
  margin: 0;
  cursor: pointer;
  will-change: transform, opacity;
}

.card-surface {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 34px -18px rgba(35, 22, 10, 0.55);
  transition: box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.coverflow-card.is-active .card-surface {
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 26px 46px -16px rgba(35, 22, 10, 0.6);
}

.card-photo {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  background: linear-gradient(155deg, #EFE0C9, #C9AD87);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.card-img.is-current { opacity: 1; }

.card-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  background: linear-gradient(155deg, #d8c2a0, #a9835a);
  text-align: center;
  padding: 10px;
}
.card-placeholder svg { width: 28px; height: 28px; opacity: 0.9; }
.card-placeholder span { font-size: 11px; opacity: 0.95; }
.card-photo.no-photo .card-placeholder { display: flex; }

.card-label {
  padding: 10px 12px 12px;
  /* Más opaco que el glass estándar: con el solape cercano al centro
     (necesario para el efecto de profundidad sin recortes en los
     bordes, ver script.js) el texto de una tarjeta vecina puede quedar
     justo detrás — este fondo casi sólido evita que se mezcle/lea. */
  background: rgba(255, 253, 248, 0.92);
}

.card-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.25;
}

.card-desc {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 280ms var(--ease), opacity 280ms var(--ease), margin-top 280ms var(--ease);
}
.coverflow-card.is-active .card-desc {
  max-height: 54px;
  opacity: 1;
  margin-top: 5px;
}

/* Visibles también en celular (antes solo aparecían con hover de mouse,
   min-width 760px) — el pedido es que se puedan tocar cómodamente en
   celular. z-index bien por encima de las tarjetas (que llegan a ~200)
   para que nunca queden tapadas detrás de la protagonista.
   Sin fondo/círculo glass a propósito (chocaba visualmente con las
   tarjetas) — el botón en sí sigue siendo grande para el toque, pero
   solo se pinta el ícono. Contraste vía drop-shadow (mismo recurso que
   los textos blancos sobre foto/video del resto del sitio, ahí con
   text-shadow) para que se lea claro sobre cualquier tarjeta/fondo. */
.coverflow-nav {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 260;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.coverflow-nav svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 7px rgba(0, 0, 0, 0.4));
}
.coverflow-nav:hover { opacity: 0.8; }
.coverflow-nav:active { transform: translateY(-50%) scale(0.88); }
.coverflow-nav.prev { left: 2px; }
.coverflow-nav.next { right: 2px; }

@media (min-width: 640px) {
  .coverflow-nav { width: 50px; height: 50px; }
  .coverflow-nav svg { width: 29px; height: 29px; }
  .coverflow-nav.prev { left: 10px; }
  .coverflow-nav.next { right: 10px; }
}

.reservar-standalone {
  margin-top: 26px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

/* ===================== BUTTONS ===================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 150ms var(--ease);
  white-space: nowrap;
}
/* display:inline-flex de arriba gana contra el [hidden] nativo del
   navegador (misma causa que .modal-overlay[hidden] más abajo) — sin
   esto, un <button class="btn" hidden> igual se sigue viendo. */
.btn[hidden] {
  display: none;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.98); }

/* CTA principal ("Reservar cita", "Reservar" del modal de servicio,
   "Continuar"/"Confirmar reserva" del flujo de reserva) — mismo sistema
   glass en todos: blur + translucidez + acento dorado + esquinas
   redondeadas. Estos botones viven sobre el panel CLARO y sólido del
   modal (var(--surface)), no sobre foto — por eso el glass aquí es
   claro/cálido (no oscuro ni negro sólido) con texto en tinta oscura,
   y el dorado entra como acento (borde + resplandor) reforzando el
   branding sin volverse un botón sólido de un color. */
.btn-cta {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  padding: 0 32px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--wood-dark);
  background: linear-gradient(135deg, rgba(255, 251, 243, 0.68), rgba(248, 236, 214, 0.55));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid rgba(173, 138, 87, 0.6);
  box-shadow: 0 14px 30px -16px rgba(35, 22, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.45), transparent 45%);
  opacity: 0.6;
  pointer-events: none;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(35, 22, 10, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7); border-color: rgba(173, 138, 87, 0.8); }
.btn-cta:active { transform: translateY(0) scale(0.97); box-shadow: 0 8px 16px -12px rgba(35, 22, 10, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4); }

/* Secundario ("Cómo llegar", "Atrás"/"Editar" del flujo de reserva) —
   mismo sistema que .btn-cta pero mucho más transparente, borde neutro
   (no dorado) y sin relieve extra: un escalón claramente por debajo del
   CTA principal sin salirse del mismo lenguaje visual. */
.btn-outline {
  /* --glass-surface (blanco) se confundía con el fondo del modal, casi
     sin contraste — tinte cálido (mismo tono que .booking-input) para
     que se lea como chip, borde dorado tenue en vez de blanco. */
  background: rgba(248, 236, 214, 0.55);
  border: 1.5px solid rgba(173, 138, 87, 0.28);
  color: var(--wood-dark);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 8px 18px -16px rgba(35, 22, 10, 0.25);
}
.btn-outline:hover { background: rgba(248, 236, 214, 0.75); border-color: rgba(173, 138, 87, 0.45); }

.btn-block { width: 100%; }

/* "Reservar cita" y "Cómo llegar" están sobre foto/video de fondo (no
   sobre el panel del modal) y ya se validaron con un tratamiento propio,
   más transparente/blanco (pensado para funcionar sobre cualquier
   fotograma) — se mantienen por id, con más prioridad que las reglas de
   arriba, para no heredar el tinte oscuro pensado para el panel claro
   del modal. CTA principal con algo más de opacidad/contraste que el
   secundario, para mantener la jerarquía sin volverse un botón sólido. */
#btn-reservar-main {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: 0 16px 32px -14px rgba(35, 22, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#btn-reservar-main svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
#btn-reservar-main:hover { background: rgba(255, 255, 255, 0.3); }

#btn-maps {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(35, 22, 10, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#btn-maps svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
#btn-maps:hover { background: rgba(255, 255, 255, 0.22); }

/* ===================== UBICACIÓN ===================== */

/* Sin fondo propio: sigue directamente sobre el video (misma lógica
   que Tratamientos). Título y texto en blanco + sombra para contraste
   garantizado, sin depender del fotograma del video. */
#ubicacion { text-align: center; }

#ubicacion .section-title,
#horarios .section-title {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45);
  margin: 0;
}

/* Ícono + título en la misma línea, para darle más personalidad visual
   a cada encabezado de sección sin agregar bloques nuevos. */
.location-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 14px;
}
.location-heading svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.location-venue {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.location-text {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  margin: 0 0 24px;
  font-size: 15px;
}

/* Mapa: contenedor con bordes redondeados y proporción fija — nunca
   fuerza scroll horizontal ni empuja el layout, en cualquier tamaño. */
.map-embed {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 22px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.map-frame { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.map-placeholder svg { width: 30px; height: 30px; opacity: 0.85; }
.map-placeholder span { font-size: 13px; }

@media (min-width: 640px) {
  .map-embed { aspect-ratio: 16 / 9; }
}

.btn-arrow { width: 15px; height: 15px; transition: transform 200ms var(--ease); }
.btn-outline:hover .btn-arrow { transform: translateX(3px); }

/* ===================== HORARIOS ===================== */

.hours-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 360px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 15px;
}

.hours-day {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hours-icon { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255, 255, 255, 0.75); }
.hours-time { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); }

/* ===================== FOOTER ===================== */

/* Sin fondo propio ni gradiente blanco: sigue directamente sobre el
   video, integrado con el resto del sitio (mismo criterio que
   Servicios/Ubicación/Horarios). El único "corte" es el adorno sutil
   de .section-divider arriba, no una línea ni una caja aparte. */
.footer {
  padding: 44px 20px 34px;
  text-align: center;
}

/* El logo del footer es el mismo lockup ancho que el del hero (no un
   ícono cuadrado): forzarlo dentro del círculo de 56px con
   background-size:cover recortaba el texto ("cover" hace zoom y
   corta los bordes). Se anula el círculo aquí también y se muestra
   completo con "contain", igual que en el hero pero a tamaño reducido. */
#logo-photo-footer {
  width: 130px;
  height: auto;
  aspect-ratio: 1536 / 967;
  margin: 0 auto;
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  outline: none;
  box-shadow: none;
}
.footer .logo-fallback { font-size: 20px; }

/* Mismo glass claro que el resto del sitio sobre el video (el que
   usan los íconos del hero) — el estilo anterior estaba pensado para
   un fondo sólido oscuro que ya no existe aquí. Solo se ajusta tamaño. */
.social-row-sm { justify-content: center; margin-top: 14px; }
.social-row-sm .social-btn { width: 38px; height: 38px; }
.social-row-sm .social-btn svg { width: 17px; height: 17px; }

/* Footer integrado sobre el video (sin fondo propio): blanco + sombra
   de texto, igual que el resto de las secciones sobre el video. */
.footer-location {
  font-family: var(--font-heading);
  margin: 18px 0 0;
  font-size: 14.5px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.footer-copy {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.footer-credit {
  margin: 6px 0 0;
  font-size: 12px;
}
.footer-credit a {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms var(--ease);
}
.footer-credit a:hover { color: #fff; }

/* ===================== MODAL ===================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 22, 10, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.modal-overlay.is-open { opacity: 1; }
.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 440px;
  border-radius: 24px 24px 0 0;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}
.modal-overlay.is-open .modal { transform: translateY(0); opacity: 1; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-surface-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wood-dark);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 6px 14px -8px hsl(var(--shadow) / 0.4);
  /* Único botón del sitio sin respuesta táctil propia (el resto ya la
     tiene: .btn, .social-btn, .coverflow-nav) — se le da el mismo
     lenguaje: opacidad sutil en hover, achique breve en active. */
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease), transform 150ms var(--ease);
}
.modal-close:hover { background: var(--glass-surface-strong); opacity: 0.85; }
.modal-close:active { transform: scale(0.9); }
.modal-close svg { width: 18px; height: 18px; }

.modal-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, #EFE0C9, #C9AD87);
  background-size: cover;
  background-position: center;
  border-radius: 24px 24px 0 0;
  position: relative;
  overflow: hidden;
}
.photo-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(155deg, #d8c2a0, #a9835a);
  text-align: center;
  padding: 12px;
}
.photo-placeholder svg { width: 34px; height: 34px; opacity: 0.9; }
.photo-placeholder span { font-size: 12.5px; opacity: 0.95; }
.modal-photo.no-photo .photo-placeholder { display: flex; }

.modal-body { padding: 24px 24px 28px; }

.modal-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--ink);
}

.modal-description {
  margin: 0 0 12px;
  color: var(--ink);
}

.modal-info {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ===================== FLUJO DE RESERVA ===================== */
/* Reutiliza .modal-overlay/.modal/.modal-close (mismo look glass del
   resto del sitio) — solo agrega lo propio del wizard de pasos. */

.booking-modal {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
}

/* Paginación tipo app móvil: 5 puntos discretos + una cápsula que se
   desliza sobre el punto activo (transform: translateX, sin recalcular
   layout ni mover el título de cada paso). Sin texto de contador ni
   línea de progreso — para no leerse como barra de carga/formulario. */
.booking-progress {
  display: flex;
  justify-content: center;
  padding: 20px 24px 0;
}
.booking-progress-track {
  position: relative;
  display: grid;
  /* 5 columnas fijas — el ancho debe coincidir con PROGRESS_SLOT en
     script.js, que usa este mismo valor para deslizar la cápsula. */
  grid-template-columns: repeat(5, 22px);
  align-items: center;
  height: 14px;
}
.booking-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wood-soft);
  opacity: 0.5;
  justify-self: center;
  transition: opacity 250ms var(--ease);
}
.booking-dot.is-done { opacity: 0.75; }
.booking-dot.is-active { opacity: 0; }
.booking-progress-pill {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 16px;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--wood));
  box-shadow: 0 2px 6px -1px rgba(124, 90, 58, 0.5);
  transition: transform 300ms var(--ease);
  will-change: transform;
}

.booking-body {
  padding: 18px 24px 4px;
  overflow-y: auto;
  flex: 1;
}

.booking-step { display: none; }
.booking-step.is-active { display: block; animation: booking-step-in 260ms var(--ease); }
@keyframes booking-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.booking-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 20px;
}

/* Chip de campo tipo app en vez de casilla de formulario clásica: sin
   borde visible en reposo (solo relleno cálido suave), el borde dorado
   aparece únicamente al enfocar — mismo recurso ya usado en el resto del
   sitio (glass + acento dorado), sin introducir un color nuevo. */
.booking-input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background: var(--bg-alt);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.booking-input:focus-visible { border-color: var(--gold); background: var(--surface); outline: none; }

.booking-error {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: #B5473C;
}

.booking-hint {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* --- paso 2: selección de servicios --- */

.booking-selected-count {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wood-dark);
  transition: color 180ms var(--ease);
}
/* Solo ajuste visual del indicador (2026-08-24) — mismo acento dorado que
   ya usan las tarjetas/chips seleccionados, para que "ya elegiste un
   servicio" sea inequívoco de un vistazo. Sin cambios de flujo/lógica. */
.booking-selected-count.is-selected {
  color: var(--gold);
}

.booking-service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
  margin: 0 -2px;
}

.booking-service {
  display: flex;
  /* Columna en vez de fila: la fila clickeable (.booking-service-row)
     ocupa la parte de arriba; el selector de profesional (solo en
     servicios que lo requieren, .booking-service-pro) puede aparecer
     debajo, dentro de la misma tarjeta, sin anidar botones. */
  flex-direction: column;
  padding: 10px;
  border-radius: var(--radius-md);
  /* Glass discreto (mismo lenguaje que el resto del sitio) en vez del
     panel sólido anterior — el texto/descripcion sigue en tinta oscura
     (--ink), así que el glass aquí es claro, no oscuro como en los
     botones de texto blanco. --glass-border (blanco) es invisible sobre
     el panel casi blanco del modal, por eso el borde usa --border (tono
     tostado) en vez de --glass-border aquí. */
  border: 1.5px solid var(--border);
  background: var(--glass-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.booking-service.is-selected {
  /* Acento dorado sutil (no la tarjeta completa) + indicador de
     selección propio (.booking-service-check, más abajo). */
  border-color: var(--gold);
  background: rgba(173, 138, 87, 0.16);
  box-shadow: inset 0 0 0 1px rgba(173, 138, 87, 0.3);
}

.booking-service-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* Selector de profesional — solo Micropigmentación de cejas/labios, solo
   visible cuando esa tarjeta está seleccionada. Reutiliza .booking-hint
   y .booking-time-list/.booking-chip tal cual (mismo look que el paso de
   hora), sin CSS nuevo para los chips. */
.booking-service-pro {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.booking-service-pro .booking-hint { margin: 0 0 8px; }

.booking-service-photo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--wood-soft);
  overflow: hidden; /* recorta el <video> a las esquinas redondeadas cuando el servicio usa video en vez de foto */
}

.booking-service-info { flex: 1; min-width: 0; }
.booking-service-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 2px;
}
.booking-service-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.booking-service-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.booking-service-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity 150ms var(--ease); }
.booking-service.is-selected .booking-service-check {
  background: var(--gold);
  border-color: var(--gold);
}
.booking-service.is-selected .booking-service-check svg { opacity: 1; }

/* --- paso 4: horas --- */

.booking-time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.booking-chip {
  min-width: 76px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  /* Mismo glass discreto que las tarjetas de servicio (item 4), para que
     el paso de hora se sienta parte del mismo sistema. --border (tostado)
     en vez de --glass-border (blanco, invisible sobre el panel claro). */
  border: 1.5px solid var(--border);
  background: var(--glass-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.booking-chip.is-selected {
  border-color: var(--gold);
  background: rgba(173, 138, 87, 0.2);
  color: var(--wood-dark);
  box-shadow: inset 0 0 0 1px rgba(173, 138, 87, 0.35);
}

/* Grilla de horarios (paso 4) — SOLO el contenedor de hora, no reutiliza
   .booking-time-list a secas porque esa clase también arma la lista de
   "¿con quién deseas realizarlo?" del paso 2 (3 chips angostos); acá se
   necesita una grilla real con celdas más altas (hora + estado en 2
   líneas), fácil de tocar en móvil (requisito: dedo, no cursor). Muestra
   TODA la grilla real de la sede (abierta→cierre, cada
   slot_granularity_minutes) — no solo lo que get_available_slots devolvió
   — para que la clienta vea el panorama completo del día, no una lista
   que se "encoge" sin explicación. */
.booking-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.booking-chip-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px; /* objetivo táctil cómodo en móvil */
  padding: 8px 6px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--glass-surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms var(--ease);
}
.booking-chip-time-label { font-size: 13.5px; font-weight: 700; line-height: 1.15; }
.booking-chip-time-status { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); }

.booking-chip-time.is-selected {
  border-color: var(--gold);
  background: rgba(173, 138, 87, 0.2);
  color: var(--wood-dark);
  box-shadow: inset 0 0 0 1px rgba(173, 138, 87, 0.35);
}
.booking-chip-time.is-selected .booking-chip-time-status { color: var(--wood-dark); }

/* No disponible: opaco, sin cursor de mano, sin hover — nunca se dice POR
   QUÉ (reserva real, almuerzo, regla de jueves, cierre, duración...), solo
   que no se puede elegir. Mismo criterio de "disabled" ya usado en
   .booking-btn-main:disabled (opacity 0.5 + not-allowed), aplicado acá. */
.booking-chip-time.is-unavailable,
.booking-chip-time:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.02);
}
.booking-chip-time.is-unavailable .booking-chip-time-status,
.booking-chip-time:disabled .booking-chip-time-status {
  color: var(--text-muted);
}

/* Reintentar (P0-1) — aparece en el paso 4 solo si la consulta de
   disponibilidad falló o expiró por tiempo. Reusa .btn/.btn-outline; sin
   color nuevo, mismo lenguaje que "Atrás"/"Editar". */
.booking-retry { margin-top: 4px; }

/* --- paso 5: resumen --- */

/* Tarjeta glass en vez de tabla con líneas — mismo lenguaje que el resto
   del flujo, sin bordes/divisores innecesarios entre filas. */
.booking-summary {
  margin: 0;
  padding: 6px 18px;
  border-radius: var(--radius-md);
  background: var(--glass-surface);
  border: 1.5px solid var(--border);
}
.booking-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}
.booking-summary-row + .booking-summary-row { border-top: 1px solid rgba(232, 220, 199, 0.6); }
.booking-summary-row dt {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13.5px;
  flex-shrink: 0;
}
.booking-summary-row dd {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  text-align: right;
  white-space: pre-line;
}

/* --- navegación inferior --- */
/* Separación suave del contenido que scrollea arriba (sombra hacia
   adentro en vez de un borde duro) — refuerza que es una barra de
   navegación fija, no otro bloque más del formulario. */
.booking-nav {
  display: flex;
  gap: 10px;
  padding: 16px 24px 24px;
  /* Fase "optimización móvil": respeta el home indicator/notch en iPhones
     sin patrón físico de botones — max() cae de vuelta al 24px de siempre
     en cualquier navegador que no soporte env(safe-area-inset-*) o donde
     el inset sea 0 (Android, desktop, iPhones con botón físico). Nunca
     REDUCE el padding actual, solo lo aumenta cuando hace falta — el
     botón "Continuar" es el control más crítico del flujo, no debe quedar
     nunca pegado al borde físico del teléfono. */
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
  flex-shrink: 0;
  box-shadow: 0 -12px 16px -14px rgba(35, 22, 10, 0.16);
  position: relative;
  z-index: 1;
}
.booking-btn-main { flex: 1; }
.booking-btn-back,
.booking-btn-edit {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 18px;
}
.booking-btn-back svg { width: 16px; height: 16px; }
.booking-btn-main:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* --- móvil: tarjeta de reserva compacta, a ras de pantalla --- */
/* Solo el flujo de reserva, solo <640px. El modal de servicio y el resto
   del sitio no cambian. En ≥640px (tablet/desktop) sigue como estaba:
   modal centrado (ver @media (min-width: 640px) más abajo).
   Se conserva todo lo demás intacto: mismos campos y validaciones, botón
   cerrar, botón "Continuar", barra .booking-nav con safe-area, y el
   ajuste de teclado por visualViewport de script.js (que sigue fijando
   height/top/maxHeight inline por encima de esto).
   La transición de entrada/salida es la de .modal (translateY + fade). */
@media (max-width: 639px) {
  .booking-modal {
    max-width: none;
    border-radius: 0;
    /* Sin height fijo: la tarjeta mide su contenido y "Continuar" queda
       justo debajo de los campos, no clavado al borde de una altura fija.
       El tope es el alto real del viewport (100dvh, con 100vh de respaldo
       para navegadores sin soporte dvh) — los pasos largos (paso 4 con
       muchas horas) crecen hasta ese tope y el cuerpo hace scroll interno.
       Anclada abajo (align-items:flex-end heredado de .modal-overlay) para
       quedar sobre el teclado y al alcance del pulgar. */
    max-height: 100vh;
    max-height: 100dvh;
  }
  /* .booking-body con flex:1 (grow:1, basis:0) absorbía TODO el alto
     sobrante y empujaba .booking-nav al fondo dejando un hueco vacío
     entre los campos y el botón. grow:0 → el cuerpo mide su contenido;
     shrink:1 + min-height:0 conservan el scroll interno cuando un paso
     supera el alto disponible (paso 4, o teclado abierto). El
     padding-top de .booking-nav (16px) es la separación cómoda campo→
     botón. No cambia nada en ≥640px. */
  .booking-body {
    flex: 0 1 auto;
    min-height: 0;
  }
}

/* ===================== BREAKPOINTS ===================== */

@media (min-width: 640px) {
  .hero { padding: 64px 24px 44px; }
  #logo-photo { width: min(64vw, 340px); }
  .coverflow { height: 420px; }
  .coverflow-card { width: 224px; }
  .modal-overlay { align-items: center; }
  .modal { border-radius: 24px; max-height: 85vh; }
  .modal-photo { border-radius: 24px 24px 0 0; }
}

@media (min-width: 1024px) {
  .section { padding: 64px 24px; }
  .hero { padding: 80px 24px 52px; }
  #logo-photo { width: min(42vw, 380px); }
  /* En desktop hay espacio de sobra para que las tarjetas no se corten
     sin necesitar el ancho completo del viewport (eso solo hace falta
     en móvil, donde el ancho es escaso) — se vuelve a un ancho acotado
     y centrado para que las flechas de navegación no queden pegadas a
     los bordes extremos de la pantalla. */
  .coverflow {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    height: 452px;
  }
  .coverflow-card { width: 248px; }
}

/* video de fondo desactivado: se pausa por JS, y si el usuario
   prefiere menos movimiento tampoco arranca el desplazamiento
   automático del carrusel (ver script.js) */
@media (prefers-reduced-motion: reduce) {
  .coverflow-card { transition: none; }
}