/* =========================================================
   V29 - Correcciones finales solicitadas
   1) PC full screen sin elementos gigantes/cortados
   2) Solo una vista visible según botón seleccionado
   3) Resumen de reserva oculto hasta elegir fecha
   4) Tabbar con blur invisible, sin fondo visible
   ========================================================= */

/* Quita visualmente cualquier vestigio del status bar y subtítulos repetidos. */
.top-status-bar,
.eyebrow.dark {
  display: none !important;
}

/* En inicio no debe aparecer contenido de tarifas/ubicación/faq/reserva al hacer scroll. */
html body[data-active-view="inicio"] main,
html body:not([data-active-view]) main,
html body.app-single-focus[data-active-view="inicio"] main {
  display: none !important;
}

html body.app-single-focus[data-active-view="inicio"] {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: #02101d !important;
}

html body.app-single-focus:not([data-active-view="inicio"]) {
  height: auto !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
}

/* Refuerza el modo app: solo queda visible la sección clickeada. */
html body.app-single-focus main > section:not(.active-focus),
html body.app-single-focus main > .intro-strip:not(.active-focus) {
  display: none !important;
}

html body.app-single-focus main > section.active-focus {
  display: block !important;
}

html body.app-single-focus[data-active-view="ubicacion"] #ubicacion.active-focus,
html body.app-single-focus[data-active-view="tarifas"] #tarifas.active-focus,
html body.app-single-focus[data-active-view="faq"] #faq.active-focus,
html body.app-single-focus[data-active-view="reservas"] #reservas.active-focus {
  display: block !important;
}

/* =========================================================
   HOME: pantalla completa real en PC, pero con escala correcta
   ========================================================= */
html body[data-active-view="inicio"] .site-header,
html body.app-single-focus[data-active-view="inicio"] .site-header,
html body[data-active-view="inicio"] .hero,
html body.app-single-focus[data-active-view="inicio"] .hero,
html body:not([data-active-view]) .site-header,
html body:not([data-active-view]) .hero {
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body[data-active-view="inicio"] .home-video-bg,
html body[data-active-view="inicio"] .hero-bg,
html body.app-single-focus[data-active-view="inicio"] .home-video-bg,
html body.app-single-focus[data-active-view="inicio"] .hero-bg,
html body:not([data-active-view]) .home-video-bg,
html body:not([data-active-view]) .hero-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  inset: 0 !important;
}

@media (min-width: 761px) {
  html body[data-active-view="inicio"] .hero-content,
  html body.app-single-focus[data-active-view="inicio"] .hero-content,
  html body:not([data-active-view]) .hero-content {
    width: min(880px, calc(100vw - 112px)) !important;
    max-width: 880px !important;
    margin: 0 !important;
    position: absolute !important;
    left: clamp(46px, 7vw, 112px) !important;
    top: clamp(74px, 13vh, 126px) !important;
    text-align: left !important;
    transform: none !important;
  }

  html body[data-active-view="inicio"] .hero h1,
  html body.app-single-focus[data-active-view="inicio"] .hero h1,
  html body:not([data-active-view]) .hero h1 {
    font-size: clamp(3.25rem, 5.65vw, 6.15rem) !important;
    line-height: .94 !important;
    letter-spacing: .055em !important;
    max-width: 9.7em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body[data-active-view="inicio"] .hero .eyebrow,
  html body.app-single-focus[data-active-view="inicio"] .hero .eyebrow,
  html body:not([data-active-view]) .hero .eyebrow {
    font-size: clamp(.7rem, .8vw, .92rem) !important;
    letter-spacing: .24em !important;
    margin-bottom: 14px !important;
  }

  html body[data-active-view="inicio"] .reserve-pill,
  html body.app-single-focus[data-active-view="inicio"] .reserve-pill,
  html body:not([data-active-view]) .reserve-pill {
    left: clamp(46px, 7vw, 112px) !important;
    right: auto !important;
    bottom: clamp(92px, 16vh, 132px) !important;
    transform: none !important;
    width: min(520px, calc(100vw - 112px)) !important;
    max-width: 520px !important;
    min-height: 62px !important;
    padding: 0 28px !important;
    font-size: clamp(.86rem, 1.05vw, 1.05rem) !important;
    letter-spacing: .28em !important;
    border-width: 1px !important;
  }

  html body[data-active-view="inicio"] .reserve-pill:hover,
  html body.app-single-focus[data-active-view="inicio"] .reserve-pill:hover,
  html body:not([data-active-view]) .reserve-pill:hover {
    transform: translateY(-4px) !important;
  }

  html body .scroll-cue {
    display: none !important;
  }

  /* Encabezados interiores: grandes pero sin tapar ni cortar. */
  html body .section-heading h2,
  html body.app-single-focus main > section.active-focus .section-heading h2 {
    font-size: clamp(2rem, 3.1vw, 3.35rem) !important;
    line-height: 1.03 !important;
    letter-spacing: .055em !important;
  }

  html body .section-heading p,
  html body.app-single-focus main > section.active-focus .section-heading p {
    font-size: clamp(.92rem, 1vw, 1.03rem) !important;
    line-height: 1.55 !important;
  }

  html body.app-single-focus main > section.active-focus {
    width: min(1160px, calc(100vw - 96px)) !important;
    max-width: 1160px !important;
    padding-top: clamp(44px, 6vh, 66px) !important;
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body[data-active-view="reservas"] #reservas.active-focus {
    width: min(1080px, calc(100vw - 96px)) !important;
    max-width: 1080px !important;
    padding-top: clamp(34px, 5vh, 56px) !important;
    padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .calendar-panel,
  html body .side-panel {
    min-height: auto !important;
    padding: clamp(20px, 2.2vw, 28px) !important;
    border-radius: 28px !important;
  }

  html body .day-cell {
    min-height: 48px !important;
    font-size: .92rem !important;
  }

  html body .location-card-grid,
  html body.app-single-focus[data-active-view="ubicacion"] .location-card-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: stretch !important;
  }
}

@media (max-width: 760px) {
  html body[data-active-view="inicio"] .hero h1,
  html body.app-single-focus[data-active-view="inicio"] .hero h1,
  html body:not([data-active-view]) .hero h1 {
    font-size: clamp(2.45rem, 12.4vw, 4.25rem) !important;
    line-height: .93 !important;
  }

  html body[data-active-view="inicio"] .reserve-pill,
  html body.app-single-focus[data-active-view="inicio"] .reserve-pill,
  html body:not([data-active-view]) .reserve-pill {
    min-height: 58px !important;
    bottom: clamp(98px, 17vh, 136px) !important;
  }
}

/* =========================================================
   RESERVA: resumen inferior solo luego de seleccionar fecha
   ========================================================= */
html body .reservation-live-summary {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .reservation-live-summary.active {
  display: block !important;
  opacity: 1 !important;
}

html body[data-active-view="reservas"] .reservation-live-summary.active {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  z-index: 10005 !important;
  width: min(620px, calc(100vw - 28px)) !important;
  max-width: min(620px, calc(100vw - 28px)) !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #102334 !important;
  border: 1px solid rgba(11, 33, 52, .08) !important;
  box-shadow: 0 14px 36px rgba(2, 16, 29, .13) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  font-size: .84rem !important;
  line-height: 1.3 !important;
  text-align: center !important;
  font-weight: 800 !important;
}

html body[data-active-view="reservas"] .reservation-live-summary.active::before {
  content: none !important;
  display: none !important;
}

html body:not([data-active-view="reservas"]) .reservation-live-summary,
html body:not([data-active-view="reservas"]) .reservation-live-summary.active {
  display: none !important;
}

html body .reservation-flow-controls {
  display: grid !important;
  grid-template-columns: minmax(116px, 150px) minmax(180px, 1fr) minmax(116px, 150px) !important;
  gap: clamp(14px, 2.4vw, 26px) !important;
  max-width: 820px !important;
  margin: 24px auto 34px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .flow-btn,
html body .flow-step-indicator {
  min-height: 48px !important;
  box-shadow: 0 12px 28px rgba(16,49,75,.08) !important;
}

html body .flow-step-indicator {
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  html body .reservation-flow-controls {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 20px auto 28px !important;
  }

  html body .flow-step-indicator {
    order: -1 !important;
    white-space: normal !important;
  }

  html body[data-active-view="reservas"] .reservation-live-summary.active {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 18px !important;
    font-size: .78rem !important;
  }
}

/* =========================================================
   TABBAR: el fondo visible desaparece; queda solo blur de lo que pasa detrás
   ========================================================= */
html body nav#navLinks.app-tabbar,
html body .app-tabbar {
  pointer-events: none !important;
}

html body nav#navLinks.app-tabbar > .app-tabbar-shell,
html body .app-tabbar .app-tabbar-shell,
html body[data-active-view="inicio"] nav#navLinks.app-tabbar > .app-tabbar-shell,
html body:not([data-active-view]) nav#navLinks.app-tabbar > .app-tabbar-shell,
html body[data-active-view="reservas"] nav#navLinks.app-tabbar > .app-tabbar-shell {
  background: rgba(255, 255, 255, .012) !important;
  background-color: rgba(255, 255, 255, .012) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
  pointer-events: auto !important;
}

html body nav#navLinks.app-tabbar > .app-tabbar-shell > a,
html body .app-tabbar .app-tabbar-shell > a {
  text-shadow: 0 1px 10px rgba(255,255,255,.32), 0 2px 18px rgba(0,0,0,.38) !important;
}

html body[data-active-view="inicio"] nav#navLinks.app-tabbar > .app-tabbar-shell > a,
html body:not([data-active-view]) nav#navLinks.app-tabbar > .app-tabbar-shell > a {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.72) !important;
}

/* Evita que estilos antiguos vuelvan a pintar líneas/cajas detrás de la botonera. */
html body nav#navLinks.app-tabbar::before,
html body nav#navLinks.app-tabbar::after,
html body nav#navLinks.app-tabbar > .app-tabbar-shell::before,
html body nav#navLinks.app-tabbar > .app-tabbar-shell::after,
html body .app-tabbar .app-tabbar-shell::before,
html body .app-tabbar .app-tabbar-shell::after,
html body .app-tabbar .app-tabbar-shell > a::before,
html body .app-tabbar .app-tabbar-shell > a::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}