/**
 * Componentes — Hotel Puerta Chichén
 *
 * Un bloque comentado por componente, con el mismo nombre que su fragmento
 * en components/. Los componentes se personalizan ajustando las variables
 * --bs-* de Bootstrap a partir de los tokens; no se declaran colores literales.
 */

/* ==================================================================
   Botones (DESIGN.md › Botones)
   ================================================================== */
.btn {
  --bs-btn-font-family: var(--pc-font-sans);
  --bs-btn-font-size: var(--pc-fs-label);
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: var(--pc-lh-title);
  --bs-btn-padding-x: 28px;
  --bs-btn-padding-y: 14px;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: var(--pc-radius-xs);
  --bs-btn-disabled-opacity: 0.5;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pc-space-sm);
  min-height: 48px;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  transition:
    color var(--pc-duration) var(--pc-ease-out),
    background-color var(--pc-duration) var(--pc-ease-out),
    border-color var(--pc-duration) var(--pc-ease-out);
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

/* Primario: dorado con texto noche. Uno por vista o sección. */
.btn-primary {
  --bs-btn-color: var(--pc-night);
  --bs-btn-bg: var(--pc-gold);
  --bs-btn-border-color: var(--pc-gold);
  --bs-btn-hover-color: var(--pc-night);
  --bs-btn-hover-bg: var(--pc-gold-hover);
  --bs-btn-hover-border-color: var(--pc-gold-hover);
  --bs-btn-active-color: var(--pc-night);
  --bs-btn-active-bg: var(--pc-gold-hover);
  --bs-btn-active-border-color: var(--pc-gold-hover);
  --bs-btn-disabled-color: var(--pc-night);
  --bs-btn-disabled-bg: var(--pc-gold);
  --bs-btn-disabled-border-color: var(--pc-gold);
}

/* Secundario sobre claro: borde noche que se rellena en hover */
.btn-outline-night {
  --bs-btn-color: var(--pc-night);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--pc-night);
  --bs-btn-hover-color: var(--pc-limestone);
  --bs-btn-hover-bg: var(--pc-night);
  --bs-btn-hover-border-color: var(--pc-night);
  --bs-btn-active-color: var(--pc-limestone);
  --bs-btn-active-bg: var(--pc-night);
  --bs-btn-active-border-color: var(--pc-night);
  --bs-btn-disabled-color: var(--pc-night);
  --bs-btn-disabled-border-color: var(--pc-night);
}

/* Secundario sobre noche: borde y texto dorado claro */
.btn-outline-gold {
  --bs-btn-color: var(--pc-gold-light);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--pc-gold-light);
  --bs-btn-hover-color: var(--pc-night);
  --bs-btn-hover-bg: var(--pc-gold-light);
  --bs-btn-hover-border-color: var(--pc-gold-light);
  --bs-btn-active-color: var(--pc-night);
  --bs-btn-active-bg: var(--pc-gold-light);
  --bs-btn-active-border-color: var(--pc-gold-light);
  --bs-btn-disabled-color: var(--pc-gold-light);
  --bs-btn-disabled-border-color: var(--pc-gold-light);
}

/*
 * Foco de teclado. Bootstrap define `.btn:focus-visible{outline:0}` y
 * `.nav-link:focus-visible` con un anillo azul propio; ambas reglas ganan en
 * especificidad al `:focus-visible` de base.css, así que se reponen aquí con
 * los tokens de foco (DESIGN.md › Estados).
 */
.btn:focus-visible,
.nav-link:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: 3px solid var(--pc-gold-deep);
  outline-offset: 2px;
  box-shadow: none;
}

.on-night .btn:focus-visible,
.on-night .nav-link:focus-visible {
  outline-color: var(--pc-gold-light);
}

/* Estado de carga: spinner de Bootstrap + "Enviando…" + aria-busy */
.btn[aria-busy="true"] {
  cursor: progress;
}

.btn .spinner-border {
  --bs-spinner-width: 1em;
  --bs-spinner-height: 1em;
  --bs-spinner-border-width: 0.15em;
}

/* Enlace con flecha: "Ver detalles →" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-space-sm);
  font-weight: 600;
  color: var(--pc-gold-deep);
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  width: 1em;
  height: 1em;
  background-color: currentColor;
  /* Flecha de línea (trazo 1.5) como máscara para heredar el color */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--pc-duration) var(--pc-ease-out);
}

.link-arrow:hover {
  color: var(--pc-night);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

.on-night .link-arrow { color: var(--pc-gold-light); }
.on-night .link-arrow:hover { color: var(--pc-limestone); }

/* ==================================================================
   Controles de formulario (base para contact-form, booking-bar y checkout)
   ================================================================== */
.form-label {
  margin-bottom: var(--pc-space-sm);
  font-weight: 600;
  color: var(--pc-night);
}

.form-control,
.form-select {
  min-height: 48px;
  padding: 12px 14px;
  /* Interlineado ajustado para que los controles midan ~49px y alineen con los botones de 48px */
  line-height: 1.375;
  font-size: var(--pc-fs-body);
  color: var(--pc-night);
  background-color: var(--pc-surface);
  border: 1px solid var(--pc-border-control);
  border-radius: var(--pc-radius-sm);
}

.form-select {
  padding-right: 40px;
}

.form-control::placeholder {
  color: var(--pc-ink-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pc-night);
  box-shadow: none;
}

/* :focus y no :focus-visible: en <input type="time"> el foco cae en un subcampo
   interno y Chromium no aplica :focus-visible al input */
.form-control:focus,
.form-select:focus {
  outline: 3px solid var(--pc-gold-deep);
  outline-offset: 2px;
}

.form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
  border: 1px solid var(--pc-border-control);
}

.form-check-input:checked {
  background-color: var(--pc-night);
  border-color: var(--pc-night);
}

.form-check-input:focus {
  border-color: var(--pc-night);
  box-shadow: none;
}

.form-check-input:focus-visible {
  outline: 3px solid var(--pc-gold-deep);
  outline-offset: 2px;
}

.form-text {
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

.invalid-feedback,
.valid-feedback {
  font-size: var(--pc-fs-small);
  font-weight: 600;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  box-shadow: none;
}

/* Avisos de envío (role="status" / role="alert") */
.alert {
  --bs-alert-border-radius: var(--pc-radius-sm);
  --bs-alert-padding-x: var(--pc-space-md);
  --bs-alert-padding-y: var(--pc-space-md);
}

.alert-success {
  --bs-alert-color: var(--pc-success);
  --bs-alert-bg: var(--pc-success-bg);
  --bs-alert-border-color: var(--pc-success);
}

.alert-danger {
  --bs-alert-color: var(--pc-error);
  --bs-alert-bg: var(--pc-error-bg);
  --bs-alert-border-color: var(--pc-error);
}

.form-label__optional {
  font-weight: 400;
  color: var(--pc-ink-muted);
}

/* ==================================================================
   navbar
   ================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--pc-night);
  transition:
    background-color var(--pc-duration) var(--pc-ease-out),
    box-shadow var(--pc-duration) var(--pc-ease-out);
}

/* Inicio: transparente sobre el hero con velo superior; sólida tras el scroll */
.site-header--overlay {
  position: fixed;
  inset: 0 0 auto;
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(var(--pc-night-rgb), 0.4), rgba(var(--pc-night-rgb), 0));
}

.site-header--overlay.is-scrolled,
.site-header.is-scrolled {
  background-color: var(--pc-night);
  background-image: none;
  box-shadow: var(--pc-shadow-float);
}

.site-header .navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-nav-link-padding-x: 0;
  --bs-navbar-color: var(--pc-limestone);
  --bs-navbar-hover-color: var(--pc-gold-light);
  --bs-navbar-active-color: var(--pc-limestone);
  min-height: var(--pc-navbar-height);
}

.site-header .navbar-brand {
  padding: 0;
  margin-right: auto;
}

@media (min-width: 992px) {
  .site-header .navbar-brand {
    margin-right: var(--pc-space-xl);
  }

  .site-header .offcanvas-body {
    justify-content: flex-end;
  }
}

.site-header .navbar-brand img {
  display: block;
  width: auto;
  height: 44px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--pc-space-sm);
}

.site-header .btn-sm {
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 10px;
  min-height: 44px;
}

.site-header .navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--pc-limestone);
  border: 0;
  border-radius: var(--pc-radius-xs);
}

.site-header .navbar-toggler .icon {
  width: 28px;
  height: 28px;
}

.site-header .navbar-toggler:focus {
  box-shadow: none;
}

.site-header .nav-link {
  position: relative;
  padding-block: var(--pc-space-sm);
  font-weight: 600;
  text-decoration: none;
}

.site-header .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--pc-gold);
}

/* Inicio: mientras la barra es transparente, el booking bar ya ofrece el botón
   dorado; "Reservar" pasa a contorno (regla del oro escaso) y vuelve a sólido al
   hacer scroll, cuando el booking bar sale de la vista. */
.site-header--overlay:not(.is-scrolled) .site-header__book {
  --bs-btn-color: var(--pc-gold-light);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--pc-gold-light);
  --bs-btn-hover-color: var(--pc-night);
  --bs-btn-hover-bg: var(--pc-gold-light);
  --bs-btn-hover-border-color: var(--pc-gold-light);
}

/* Offcanvas (móvil y tablet) */
.site-header .offcanvas {
  --bs-offcanvas-bg: var(--pc-night-raised);
  --bs-offcanvas-color: var(--pc-limestone);
  --bs-offcanvas-width: min(360px, 88vw);
}

.site-header .offcanvas-title {
  margin: 0;
  color: var(--pc-gold-light);
}

.btn-close-night {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin-left: auto;
  margin-right: -12px;
  color: var(--pc-limestone);
  background: none;
  border: 0;
}

.site-header .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-lg);
}

.site-header .offcanvas .nav-link {
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  font-weight: 500;
}

.site-header .offcanvas .nav-link[aria-current="page"]::after {
  right: auto;
  width: 40px;
}

/* Selector de idioma */
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--pc-space-sm);
  font-size: var(--pc-fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pc-limestone);
  background: none;
  border: 0;
  border-radius: var(--pc-radius-xs);
}

.lang-switch__toggle:hover {
  color: var(--pc-gold-light);
}

.lang-switch__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--pc-duration) var(--pc-ease-out);
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__chevron {
  transform: rotate(180deg);
}

.lang-switch .dropdown-menu {
  --bs-dropdown-bg: var(--pc-night-raised);
  --bs-dropdown-color: var(--pc-limestone);
  --bs-dropdown-border-color: rgba(var(--pc-gold-rgb), 0.35);
  --bs-dropdown-border-radius: var(--pc-radius-sm);
  --bs-dropdown-link-color: var(--pc-limestone);
  --bs-dropdown-link-hover-color: var(--pc-gold-light);
  --bs-dropdown-link-hover-bg: rgba(var(--pc-limestone-rgb), 0.06);
  --bs-dropdown-link-active-color: var(--pc-night);
  --bs-dropdown-link-active-bg: var(--pc-gold-light);
  --bs-dropdown-item-padding-y: 10px;
  --bs-dropdown-box-shadow: var(--pc-shadow-float);
  box-shadow: var(--bs-dropdown-box-shadow);
}

.lang-switch .dropdown-item[aria-current="true"] {
  color: var(--pc-gold-light);
  font-weight: 600;
}

@media (min-width: 992px) {
  .site-header .navbar-brand img {
    height: 52px;
  }

  .site-header .navbar-toggler {
    display: none;
  }

  .site-header__actions {
    order: 3;
    margin-left: var(--pc-space-lg);
  }

  .site-header .btn-sm {
    --bs-btn-padding-x: 22px;
  }

  .site-header .offcanvas {
    --bs-offcanvas-bg: transparent;
  }

  .site-header .offcanvas-body {
    flex-direction: row;
    align-items: center;
    gap: var(--pc-space-xl);
  }

  .site-header .navbar-nav {
    gap: clamp(16px, 2vw, 32px);
  }

  .site-header .offcanvas .nav-link {
    font-family: var(--pc-font-sans);
    font-size: var(--pc-fs-small);
    font-weight: 600;
  }

  .site-header .offcanvas .nav-link[aria-current="page"]::after {
    right: 0;
    width: auto;
  }
}

/* ==================================================================
   hero-home
   ================================================================== */
.hero-home {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88vh, 860px);
  min-height: min(88svh, 860px);
  padding-top: calc(var(--pc-navbar-height) + var(--pc-space-xl));
  padding-bottom: var(--pc-space-2xl);
  overflow: hidden;
  background-color: var(--pc-night);
  isolation: isolate;
}

.hero-home__media,
.hero-home__media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo noche al 55 % concentrado en el tercio inferior izquierdo, donde va el texto */
.hero-home__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(var(--pc-night-rgb), 0.55) 0%, rgba(var(--pc-night-rgb), 0.4) 45%, rgba(var(--pc-night-rgb), 0) 75%),
    linear-gradient(to top, rgba(var(--pc-night-rgb), 0.55) 0%, rgba(var(--pc-night-rgb), 0) 60%);
}

.hero-home__content {
  max-width: 40rem;
}

.hero-home__title {
  color: var(--pc-limestone);
}

.hero-home__content .lead {
  max-width: 34rem;
  margin-bottom: var(--pc-space-lg);
}

/* Móvil: hero más bajo y encuadre sobre el arco de la fachada (no sobre el muro) */
@media (max-width: 575.98px) {
  .hero-home {
    min-height: min(78svh, 680px);
    padding-bottom: var(--pc-space-xl);
  }

  .hero-home__media img {
    object-position: 34% center;
  }
}

/* Con booking-bar superpuesto, el hero deja sitio para la mitad de la barra */
@media (min-width: 992px) {
  .hero-home {
    padding-bottom: calc(var(--pc-space-2xl) + 72px);
  }
}

/* ==================================================================
   hero-page + breadcrumb
   ================================================================== */
.hero-page {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 360px;
  padding-block: var(--pc-space-2xl) var(--pc-space-xl);
  overflow: hidden;
  background-color: var(--pc-night);
  isolation: isolate;
}

.hero-page__media,
.hero-page__media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-page__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(var(--pc-night-rgb), 0.8) 0%, rgba(var(--pc-night-rgb), 0.6) 55%, rgba(var(--pc-night-rgb), 0.4) 100%);
}

.hero-page__title {
  margin-bottom: 0;
  color: var(--pc-limestone);
}

.hero-page__lead {
  margin-top: var(--pc-space-md);
  margin-bottom: 0;
}

.breadcrumb-nav {
  margin-bottom: var(--pc-space-md);
}

.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-divider: "/";
  --bs-breadcrumb-divider-color: var(--pc-gold-light);
  --bs-breadcrumb-item-active-color: var(--pc-limestone);
  --bs-breadcrumb-item-padding-x: 10px;
  font-size: var(--pc-fs-small);
}

.breadcrumb a {
  color: var(--pc-gold-light);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--pc-limestone);
  text-decoration: underline;
}

/* Fuera de un hero (fondo claro) */
.breadcrumb-nav:not(.on-night *) .breadcrumb {
  --bs-breadcrumb-divider-color: var(--pc-gold-deep);
  --bs-breadcrumb-item-active-color: var(--pc-ink-muted);
}

.breadcrumb-nav:not(.on-night *) .breadcrumb a {
  color: var(--pc-night);
}

/* ==================================================================
   booking-bar
   ================================================================== */
.booking-bar {
  position: relative;
  z-index: 2;
}

/* Con el panel de ocupación abierto, la barra queda sobre las secciones siguientes
   (p. ej. las fichas sticky de Habitaciones) */
.booking-bar:has(.occupancy.is-open) {
  z-index: 10;
}

.booking-bar__form {
  display: grid;
  gap: var(--pc-space-md);
  padding: var(--pc-space-lg);
  background-color: var(--pc-surface);
  border-radius: var(--pc-radius-md);
}

.booking-bar__heading {
  margin-bottom: 0;
}

.booking-bar__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  color: var(--pc-night);
}

.booking-bar__submit .btn {
  width: 100%;
}

.booking-bar__error {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--pc-space-sm);
  margin: 0;
  font-size: var(--pc-fs-small);
  font-weight: 600;
  color: var(--pc-error);
}

/* Campos de fecha mejorados con flatpickr (input de texto de solo lectura) */
.booking-bar__field--date .form-control[readonly] {
  background-color: var(--pc-surface);
  cursor: pointer;
}

.booking-bar__field--date {
  position: relative;
}

.booking-bar__field--date .form-control {
  padding-left: 44px;
}

.booking-bar__icon {
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: var(--pc-night);
  pointer-events: none;
}

/* Variante superpuesta (Inicio): flota sobre el borde inferior del hero desde lg */
.booking-bar--overlay {
  background-color: var(--pc-sand);
}

.booking-bar--overlay .booking-bar__form {
  border-radius: 0;
}

.booking-bar--overlay .booking-bar__form,
.booking-bar--inline .booking-bar__form {
  grid-template-columns: 1fr 1fr;
  gap: var(--pc-space-md) 12px;
}

.booking-bar--overlay .booking-bar__submit,
.booking-bar--inline .booking-bar__submit {
  grid-column: 1 / -1;
}

/* Fechas en dos columnas desde 360px: texto e icono más compactos */
@media (max-width: 575.98px) {
  .booking-bar__field--date .form-control {
    padding-left: 38px;
    font-size: 1rem;
  }

  .booking-bar__icon {
    left: 11px;
  }

  .booking-bar__form {
    padding: var(--pc-space-md);
  }
}

@media (min-width: 992px) {
  .booking-bar--overlay {
    max-width: 1320px;
    margin: -72px auto 0;
    padding-inline: calc(var(--bs-gutter-x, 2rem) * 0.5);
    background: none;
  }

  .booking-bar--overlay .booking-bar__form {
    border-radius: var(--pc-radius-md);
    box-shadow: var(--pc-shadow-float);
  }

  .booking-bar--overlay .booking-bar__form,
  .booking-bar--inline .booking-bar__form {
    grid-template-columns: 1.1fr 1.1fr 1.4fr auto;
    align-items: end;
    padding: var(--pc-space-lg) var(--pc-space-xl);
  }

  .booking-bar--overlay .booking-bar__submit,
  .booking-bar--inline .booking-bar__submit {
    grid-column: auto;
  }
}

/* Variante en línea (Habitaciones): sobre sand, sin sombra */
.booking-bar--inline .booking-bar__form {
  border: 1px solid var(--pc-warm-gray);
}

/* Variante compacta (ficha de habitación): campos apilados en dos columnas */
.booking-bar--compact {
  margin-top: var(--pc-space-xl);
}

.booking-bar--compact .booking-bar__form {
  grid-template-columns: 1fr 1fr;
  background-color: var(--pc-sand);
  border-radius: var(--pc-radius-sm);
}

.booking-bar--compact .booking-bar__heading,
.booking-bar--compact .booking-bar__submit,
.booking-bar--compact .occupancy {
  grid-column: 1 / -1;
}

.booking-bar--compact .booking-bar__heading {
  font-size: var(--pc-fs-title);
}

/* Huéspedes a todo el ancho en móvil (fechas en dos columnas arriba) */
@media (max-width: 991.98px) {
  .booking-bar--overlay .occupancy,
  .booking-bar--inline .occupancy {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------
   Selector de ocupación (dentro de booking-bar)
   ------------------------------------------------------------------ */
.occupancy {
  position: relative;
}

.occupancy__toggle {
  display: flex;
  align-items: center;
  gap: var(--pc-space-sm);
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.occupancy__toggle .icon {
  flex-shrink: 0;
  color: var(--pc-night);
}

.occupancy__toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.occupancy.is-open .occupancy__toggle {
  border-color: var(--pc-night);
}

/* Panel desplegable: flota bajo el campo en tablet y escritorio */
.occupancy__panel {
  position: absolute;
  top: calc(100% + var(--pc-space-sm));
  left: 0;
  z-index: 1040;
  width: max(100%, 340px);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pc-space-lg);
  color: var(--pc-ink);
  background-color: var(--pc-surface);
  border: 1px solid var(--pc-warm-gray);
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-shadow-float);
}

.occupancy__panel[hidden] {
  display: none;
}

/* Móvil: el panel se abre en línea y empuja el resto del formulario */
@media (max-width: 575.98px) {
  .occupancy__panel {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: var(--pc-space-sm);
    padding: var(--pc-space-md);
    box-shadow: none;
  }
}

.occupancy__room {
  margin: var(--pc-space-md) 0 0;
  padding: var(--pc-space-md) 0 0;
  border-top: 1px solid var(--pc-warm-gray);
}

.occupancy__room-title {
  float: none;
  width: auto;
  margin-bottom: var(--pc-space-sm);
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  color: var(--pc-ink-muted);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-md);
  min-height: 52px;
}

.stepper__label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--pc-night);
}

.stepper__help {
  font-size: var(--pc-fs-small);
  font-weight: 400;
  color: var(--pc-ink-muted);
}

.stepper__controls {
  display: flex;
  align-items: center;
  gap: var(--pc-space-sm);
}

.stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--pc-night);
  background-color: var(--pc-surface);
  border: 1px solid var(--pc-border-control);
  border-radius: 50%;
  transition: background-color var(--pc-duration) var(--pc-ease-out), border-color var(--pc-duration) var(--pc-ease-out);
}

.stepper__btn:hover:not(:disabled) {
  background-color: var(--pc-sand);
  border-color: var(--pc-night);
}

.stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stepper__value {
  min-width: 2ch;
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  text-align: center;
  color: var(--pc-night);
}

.occupancy__ages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pc-space-sm) var(--pc-space-md);
}

.occupancy__ages:not(:empty) {
  margin-top: var(--pc-space-sm);
}

.occupancy__age-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink);
}

.occupancy__hint,
.occupancy__error {
  margin: var(--pc-space-xs) 0 0;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

.occupancy__error {
  margin-top: var(--pc-space-md);
  font-weight: 600;
  color: var(--pc-error);
}

.occupancy__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--pc-space-lg);
}

/* Con JS (clase .js puesta en <head>) el respaldo no se pinta y el disparador sí,
   así el contenido no se desplaza cuando occupancy.js toma el control */
.js .occupancy__fallback {
  display: none;
}

.js .occupancy__toggle[hidden] {
  display: flex;
}

/* Respaldo sin JS: una habitación con selects nativos */
.occupancy__fallback {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pc-space-sm) var(--pc-space-md);
}

/* Calendario flatpickr adaptado a los tokens */
.flatpickr-calendar {
  font-family: var(--pc-font-sans);
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-shadow-float), 0 0 0 1px var(--pc-warm-gray);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
  color: var(--pc-night);
  fill: var(--pc-night);
}

.flatpickr-current-month {
  font-family: var(--pc-font-serif);
  font-size: 1.05rem;
  font-weight: 600;
}

.flatpickr-day {
  color: var(--pc-night);
  border-radius: var(--pc-radius-xs);
}

.flatpickr-day.today {
  border-color: var(--pc-gold);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--pc-sand);
  border-color: var(--pc-sand);
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: var(--pc-sand);
  border-color: var(--pc-sand);
  box-shadow: -5px 0 0 var(--pc-sand), 5px 0 0 var(--pc-sand);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  color: var(--pc-limestone);
  background: var(--pc-night);
  border-color: var(--pc-night);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--pc-ink-muted);
  opacity: 0.55;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--pc-gold-deep);
}

/* ==================================================================
   media-text
   ================================================================== */
.media-text__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--pc-radius-sm);
}

.media-text--arch .media-text__media img {
  aspect-ratio: 3 / 4;
  border-radius: 0;
  object-position: 42% center;
}

/* Datos prácticos opcionales (facts[]) entre el texto y el enlace */
.media-text__body .fact-list {
  margin-block: var(--pc-space-lg);
}

.media-text__body > :last-child {
  margin-bottom: 0;
}

/* Sin imagen (campo opcional vacío): el texto ocupa el ancho de lectura */
.media-text .row > .media-text__body:only-child {
  width: 100%;
  max-width: calc(var(--pc-measure) + 4rem);
  margin-left: 0;
}

@media (min-width: 992px) {
  .media-text--reverse .media-text__media {
    order: 2;
  }
}

/* Sección de ritmo corto (p. ej. booking-bar en línea bajo el hero interno) */
.section-compact {
  padding-block: var(--pc-space-xl);
}

/* Enlace "ver todo" al pie de un listado (habitaciones, experiencias) */
.section-more {
  margin: var(--pc-space-xl) 0 0;
  text-align: center;
}

/* ==================================================================
   day-index
   Índice del día bajo el hero de Servicios y Experiencias. Más compacto que una sección
   normal: orienta y reparte por anclas, no compite con las secciones.
   ================================================================== */
.day-index {
  padding-block: var(--pc-space-2xl);
}

.day-index .section-header {
  margin-bottom: var(--pc-space-xl);
}

.day-index__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pc-warm-gray);
}

.day-index__item {
  border-bottom: 1px solid var(--pc-warm-gray);
}

.day-index__link {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--pc-space-md);
  row-gap: var(--pc-space-xs);
  align-items: start;
  height: 100%;
  padding-block: var(--pc-space-md);
  color: var(--pc-night);
  text-decoration: none;
}

.day-index__link .icon {
  grid-row: span 2;
  color: var(--pc-gold-deep);
}

.day-index__title {
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  font-weight: 600;
  line-height: 1.3;
  /* Columnas angostas con 5 momentos o traducciones largas: guion silábico antes que corte duro */
  hyphens: auto;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--pc-duration) var(--pc-ease-out);
}

.day-index__link:hover .day-index__title {
  text-decoration-color: currentColor;
}

.day-index__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--pc-space-sm);
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

.day-index__time::before {
  content: "·";
  margin-right: var(--pc-space-sm);
}

.day-index__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-xs) var(--pc-space-md);
  margin: var(--pc-space-lg) 0 0;
  color: var(--pc-ink);
}

@media (min-width: 768px) {
  .day-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--pc-space-xl);
  }
}

/* Escritorio: una sola fila para 3 a 5 momentos, separados por filetes verticales */
@media (min-width: 992px) {
  .day-index__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 0;
    border-bottom: 1px solid var(--pc-warm-gray);
  }

  .day-index__item {
    border-bottom: 0;
  }

  .day-index__item + .day-index__item {
    border-left: 1px solid var(--pc-warm-gray);
  }

  /* align-content: los momentos de la fila arrancan a la misma altura aunque un título ocupe más líneas */
  .day-index__link {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: var(--pc-space-sm);
    padding: var(--pc-space-lg);
  }

  .day-index__item:first-child .day-index__link {
    padding-left: 0;
  }

  .day-index__link .icon {
    grid-row: auto;
    margin-bottom: var(--pc-space-xs);
  }

  /* En columna, momento y hora van apilados: el separador quedaría suelto al inicio de línea */
  .day-index__meta {
    flex-direction: column;
  }

  .day-index__time::before {
    content: none;
  }
}

/* Con 5 momentos, la fila única espera a 1200px; entre 992 y 1199 queda la rejilla de 2 columnas */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .day-index__list:has(> :nth-child(5)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--pc-space-xl);
    border-bottom: 0;
  }

  .day-index__list:has(> :nth-child(5)) .day-index__item {
    border-bottom: 1px solid var(--pc-warm-gray);
  }

  .day-index__list:has(> :nth-child(5)) .day-index__item + .day-index__item {
    border-left: 0;
  }

  /* Mismo trazo que en tablet: icono a la izquierda, momento y hora en línea */
  .day-index__list:has(> :nth-child(5)) .day-index__link {
    grid-template-columns: auto 1fr;
    row-gap: var(--pc-space-xs);
    padding: var(--pc-space-md) 0;
  }

  .day-index__list:has(> :nth-child(5)) .day-index__link .icon {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .day-index__list:has(> :nth-child(5)) .day-index__meta {
    flex-direction: row;
  }

  .day-index__list:has(> :nth-child(5)) .day-index__time::before {
    content: "·";
  }
}

/* ==================================================================
   feature-grid
   ================================================================== */
.feature-grid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--pc-space-xl) var(--pc-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-grid__item {
  padding-top: var(--pc-space-lg);
  border-top: 1px solid var(--pc-border-control);
}

.feature-grid__item .icon {
  margin-bottom: var(--pc-space-md);
  color: var(--pc-night);
}

.feature-grid__title {
  font-size: var(--pc-fs-title);
}

.feature-grid__item p {
  margin-bottom: 0;
  color: var(--pc-ink);
}

.on-night .feature-grid__item {
  border-top-color: rgba(var(--pc-gold-rgb), 0.4);
}

.on-night .feature-grid__item .icon {
  color: var(--pc-gold);
}

/* ==================================================================
   proximity
   ================================================================== */
.proximity__heading {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-sm);
  margin-bottom: var(--pc-space-lg);
}

.proximity__figure {
  display: flex;
  align-items: baseline;
  gap: var(--pc-space-sm);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* La cifra es el gesto de la página: el tamaño más grande fuera del H1 */
.proximity__number {
  font-size: clamp(5rem, 9vw + 1rem, 8.5rem);
  font-weight: 500;
}

.proximity__unit {
  font-size: var(--pc-fs-headline);
  font-weight: 500;
  font-style: italic;
  color: var(--pc-gold-deep);
}

.proximity__label {
  max-width: 22ch;
  font-size: var(--pc-fs-headline);
  font-weight: 500;
  line-height: var(--pc-lh-headline);
}

/* Esquema de ruta hotel → entrada (decorativo) */
.proximity-route {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--pc-space-xl);
  min-height: 56px;
}

.proximity-route__line {
  position: absolute;
  inset: 50% 28px auto;
  width: calc(100% - 56px);
  height: 24px;
  transform: translateY(-50%);
  overflow: visible;
}

.proximity-route__line path {
  fill: none;
  stroke: var(--pc-gold-deep);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.proximity-route__stop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--pc-night);
  background-color: var(--pc-limestone);
  border: 1px solid var(--pc-gold);
  border-radius: 50%;
}

.proximity-route__stop--to {
  color: var(--pc-limestone);
  background-color: var(--pc-night);
  border-color: var(--pc-night);
}

.proximity-route__stop .icon {
  width: 26px;
  height: 26px;
}

.proximity-route__walk {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: var(--pc-fs-small);
  font-weight: 600;
  color: var(--pc-night);
  background-color: var(--pc-sand);
}

.proximity-route__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--pc-space-md);
  margin: var(--pc-space-sm) 0 0;
  font-size: var(--pc-fs-small);
  font-weight: 600;
  color: var(--pc-night);
}

.proximity-route__labels span:last-child {
  text-align: right;
}

/* Lista de datos (fact-list): icono, título con detalle y valor opcional a la derecha.
   La usan proximity (lugares cercanos) y el resumen de sustentabilidad de Inicio. */
.fact-list__heading {
  margin-bottom: var(--pc-space-md);
  font-family: var(--pc-font-sans);
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  color: var(--pc-ink-muted);
}

.fact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pc-border-control);
}

.fact-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--pc-space-md);
  padding-block: var(--pc-space-md);
  border-bottom: 1px solid var(--pc-border-control);
}

.fact-list .icon {
  color: var(--pc-night);
}

.fact-list__title {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--pc-night);
}

.fact-list__detail {
  font-size: var(--pc-fs-small);
  font-weight: 400;
  color: var(--pc-ink-muted);
}

.fact-list__value {
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  color: var(--pc-night);
  white-space: nowrap;
}

.fact-list--plain li {
  grid-template-columns: auto 1fr;
}

/* Gastronomía: iconos en terracota (DESIGN.md › Iconografía) */
.fact-list--food .icon {
  color: var(--pc-terracotta);
}

.proximity__note {
  display: flex;
  align-items: flex-start;
  gap: var(--pc-space-sm);
  margin: var(--pc-space-lg) 0 0;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink);
}

.proximity__note .icon {
  margin-top: 2px;
  color: var(--pc-night);
}

/* Dato de cercanía en el hero de Inicio */
.hero-home__fact {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--pc-space-sm);
  margin-bottom: var(--pc-space-xl);
  padding-top: var(--pc-space-md);
  font-weight: 600;
  color: var(--pc-limestone);
  border-top: 1px solid rgba(var(--pc-gold-rgb), 0.6);
}

.hero-home__fact .icon {
  color: var(--pc-gold-light);
}

/* ==================================================================
   room-card
   ================================================================== */
.room-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--pc-surface);
  border: 1px solid var(--pc-warm-gray);
  border-radius: var(--pc-radius-sm);
  overflow: hidden;
}

.room-card__media img,
.service-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.room-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--pc-space-lg);
}

.room-card__title a {
  color: inherit;
  text-decoration: none;
}

.room-card__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--pc-gold);
}

.room-card__text {
  color: var(--pc-ink);
}

.room-card__capacity,
.room-detail__capacity {
  display: flex;
  align-items: center;
  gap: var(--pc-space-sm);
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

.room-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-md);
  margin-top: auto;
  padding-top: var(--pc-space-md);
  border-top: 1px solid var(--pc-warm-gray);
}

.room-card .btn-sm {
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 10px;
  min-height: 44px;
}

/* Lista de comodidades (room-card, room-detail) */
.amenities {
  display: grid;
  gap: var(--pc-space-sm);
  margin: 0 0 var(--pc-space-md);
  padding: 0;
  list-style: none;
  font-size: var(--pc-fs-small);
}

.amenities li {
  display: flex;
  align-items: center;
  gap: var(--pc-space-sm);
}

.amenities .icon {
  color: var(--pc-night);
}

@media (min-width: 576px) {
  .amenities--columns {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--pc-space-lg);
  }
}

/* ==================================================================
   room-detail
   ================================================================== */
.room-detail + .room-detail {
  padding-top: 0;
}


/* Anclas de cada ficha: debajo de la navbar y, en desktop, del formulario sticky */
.room-detail {
  scroll-margin-top: calc(var(--pc-navbar-height) + var(--pc-space-md));
}

@media (min-width: 992px) {
  .room-detail {
    scroll-margin-top: calc(var(--pc-navbar-height) + var(--pc-booking-sticky-height, 0px) + var(--pc-space-md));
  }
}

.room-detail__highlight {
  margin-bottom: var(--pc-space-lg);
  max-width: 40ch;
}

/* Fila de datos: camas, capacidad, tamaño y vista */
.room-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pc-space-md) var(--pc-space-lg);
  margin: 0 0 var(--pc-space-lg);
  padding: var(--pc-space-md) 0;
  border-block: 1px solid var(--pc-warm-gray);
}

.room-facts__item dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  color: var(--pc-ink-muted);
}

.room-facts__item dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--pc-night);
}

.room-detail__cta {
  margin-top: var(--pc-space-lg);
}

.room-detail__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--pc-space-sm) 0 0;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

/* ==================================================================
   room-gallery
   ================================================================== */
.room-gallery__track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.room-gallery__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--pc-radius-sm);
  background-color: var(--pc-sand);
  cursor: zoom-in;
}

.room-gallery__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--pc-ease-out);
}

.room-gallery__link:hover img {
  transform: scale(1.03);
}

.room-gallery__link:focus-visible {
  outline: 3px solid var(--pc-gold-deep);
  outline-offset: 2px;
}

/* "+N" sobre la última miniatura visible cuando hay más fotos */
.room-gallery__item[data-more] .room-gallery__link::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  color: var(--pc-limestone);
  background-color: rgba(var(--pc-night-rgb), 0.55);
}

.room-gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-md);
  margin-top: var(--pc-space-sm);
}

.room-gallery__count {
  font-size: var(--pc-fs-small);
  font-weight: 600;
  color: var(--pc-ink-muted);
}

.room-gallery__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--pc-space-sm);
  font-size: var(--pc-fs-small);
  font-weight: 600;
  color: var(--pc-night);
  background: none;
  border: 0;
  border-radius: var(--pc-radius-xs);
}

.room-gallery__open:hover {
  color: var(--pc-gold-deep);
}

/* Móvil y tablet: tira con scroll-snap; asoma la foto siguiente */
@media (max-width: 991.98px) {
  .room-gallery__track {
    display: flex;
    gap: var(--pc-space-sm);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--bs-gutter-x) * -0.5);
    padding-inline: calc(var(--bs-gutter-x) * 0.5);
    scroll-padding-inline: calc(var(--bs-gutter-x) * 0.5);
  }

  .room-gallery__track::-webkit-scrollbar {
    display: none;
  }

  .room-gallery__item {
    flex: 0 0 88%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }

  .room-gallery__item:only-child {
    flex-basis: 100%;
  }

  .room-gallery__item[data-more] .room-gallery__link::after {
    content: none;
  }
}

/* Desktop: imagen principal + hasta 4 miniaturas; el resto vive en el visor */
@media (min-width: 992px) {
  .room-gallery__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--pc-space-sm);
  }

  .room-gallery__item:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }

  .room-gallery__item:not(:first-child) {
    aspect-ratio: 1;
  }

  .room-gallery__item:nth-child(n + 6) {
    display: none;
  }

  .room-gallery__count {
    display: none;
  }
}

/* Visor GLightbox con los tokens de la marca */
.glightbox-container .goverlay {
  background: rgba(var(--pc-night-rgb), 0.94);
}

.glightbox-clean .gslide-description {
  background: var(--pc-night);
}

.glightbox-clean .gslide-desc {
  font-family: var(--pc-font-sans);
  font-size: var(--pc-fs-small);
  color: var(--pc-limestone);
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background-color: rgba(var(--pc-night-rgb), 0.6);
}

.glightbox-clean .gbtn:focus-visible {
  outline: 3px solid var(--pc-gold-light);
  outline-offset: 2px;
}

/* ==================================================================
   room-index
   ================================================================== */
.room-index {
  padding-block: var(--pc-space-lg) 0;
}

.room-index__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: var(--pc-space-sm);
  margin: 0;
  padding: 0 0 var(--pc-space-xs);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Desktop: los cinco tipos en una fila; debajo de lg se desliza horizontalmente */
@media (min-width: 992px) {
  .room-index__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    overflow: visible;
  }
}

.room-index__link {
  display: flex;
  align-items: center;
  gap: var(--pc-space-sm);
  height: 100%;
  padding: var(--pc-space-sm);
  text-decoration: none;
  background-color: var(--pc-surface);
  border: 1px solid var(--pc-warm-gray);
  border-radius: var(--pc-radius-sm);
  transition: border-color var(--pc-duration) var(--pc-ease-out);
}

.room-index__link:hover {
  border-color: var(--pc-night);
}

.room-index__link img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--pc-radius-xs);
}

.room-index__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.room-index__name {
  font-weight: 600;
  line-height: 1.3;
  color: var(--pc-night);
}

.room-index__fact {
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

/* ==================================================================
   booking-sticky + sticky-cta
   ================================================================== */
/* Desktop: el formulario de disponibilidad de Habitaciones acompaña el scroll */
@media (min-width: 992px) {
  .booking-sticky {
    position: sticky;
    top: var(--pc-navbar-height);
    z-index: 1020;
    padding-block: var(--pc-space-md);
  }

  .booking-sticky .booking-bar__form {
    padding: var(--pc-space-md) var(--pc-space-lg);
    box-shadow: var(--pc-shadow-float);
  }
}

/* Móvil: botón fijo abajo cuando el formulario sale de la vista */
.sticky-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 1025;
  padding: var(--pc-space-sm) var(--pc-space-md) calc(var(--pc-space-sm) + env(safe-area-inset-bottom));
  background-color: var(--pc-surface);
  border-top: 1px solid var(--pc-warm-gray);
  box-shadow: 0 -8px 24px rgba(var(--pc-night-rgb), 0.08);
}

.sticky-cta .btn {
  width: 100%;
}

@media (min-width: 992px) {
  .sticky-cta {
    display: none !important;
  }
}

body.has-sticky-cta {
  padding-bottom: 72px;
}

/* Con el botón fijo o el de la banda CTA a la vista, "Reservar" de la navbar pasa a contorno (oro escaso) */
.has-sticky-cta .site-header__book,
.site-header.has-gold-in-view .site-header__book {
  --bs-btn-color: var(--pc-gold-light);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--pc-gold-light);
  --bs-btn-hover-color: var(--pc-night);
  --bs-btn-hover-bg: var(--pc-gold-light);
  --bs-btn-hover-border-color: var(--pc-gold-light);
}

/* ==================================================================
   service-card / experience-card
   ================================================================== */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--pc-surface);
  border: 1px solid var(--pc-warm-gray);
  border-radius: var(--pc-radius-sm);
  overflow: hidden;
  transition:
    box-shadow var(--pc-duration) var(--pc-ease-out),
    transform var(--pc-duration) var(--pc-ease-out);
}

/* Hover solo en tarjetas que son un enlace completo */
.service-card:has(.stretched-link):hover {
  box-shadow: var(--pc-shadow-card-hover);
  transform: translateY(-2px);
}

.service-card:has(.stretched-link:focus-visible) {
  outline: 3px solid var(--pc-gold-deep);
  outline-offset: 2px;
}

.service-card .stretched-link:focus-visible {
  outline: none;
}

.service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--pc-space-lg);
}

.service-card__category {
  display: flex;
  align-items: center;
  gap: var(--pc-space-sm);
  margin-bottom: var(--pc-space-sm);
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  color: var(--pc-gold-deep);
}

.service-card__title a {
  color: inherit;
  text-decoration: none;
}

.service-card__text {
  color: var(--pc-ink);
}

.service-card .link-arrow {
  margin-top: auto;
}

.service-card:has(.stretched-link):hover .link-arrow::after {
  transform: translateX(4px);
}

/* Gastronomía: etiqueta en terracota profunda (texto pequeño) e icono en terracota */
.service-card--food .service-card__category {
  color: var(--pc-terracotta-deep);
}

.service-card--food .service-card__category .icon {
  color: var(--pc-terracotta);
}

.experience-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-sm) var(--pc-space-lg);
  margin: auto 0 0;
  padding: var(--pc-space-md) 0 0;
  list-style: none;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
  border-top: 1px solid var(--pc-warm-gray);
}

.experience-card__meta:empty {
  display: none;
}

.experience-card__meta li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==================================================================
   cta-band
   ================================================================== */
.cta-band {
  position: relative;
  padding-block: var(--pc-space-section);
  overflow: hidden;
  border-top: 1px solid var(--pc-gold);
  isolation: isolate;
}

.cta-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Con imagen, la banda gana altura arriba para que la foto se lea; el velo
   noche se aclara hacia arriba y se cierra (≥ 75 %) donde están texto y botones. */
.cta-band:has(.cta-band__media) {
  padding-top: calc(var(--pc-space-section) * 2);
}

.cta-band__media {
  object-position: center 35%;
}

.cta-band:has(.cta-band__media)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    to bottom,
    rgba(var(--pc-night-rgb), 0.3) 0%,
    rgba(var(--pc-night-rgb), 0.75) 40%,
    rgba(var(--pc-night-rgb), 0.9) 100%
  );
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pc-space-xl);
}

.cta-band__text {
  max-width: 40rem;
}

.cta-band__text > :last-child {
  margin-bottom: 0;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-md);
}

/* ==================================================================
   faq
   ================================================================== */
.faq .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--pc-ink);
  --bs-accordion-border-color: var(--pc-border-control);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: var(--pc-space-lg);
  --bs-accordion-btn-color: var(--pc-night);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--pc-night);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-btn-icon-width: 1.125rem;
}

.faq .accordion-item {
  border-width: 0 0 1px;
}

.faq .accordion-item:first-of-type {
  border-top-width: 1px;
}

.faq .accordion-button {
  gap: var(--pc-space-md);
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  font-weight: 600;
  line-height: var(--pc-lh-title);
}

.faq .accordion-button::after {
  background-color: currentColor;
  background-image: none;
  /* Más / menos de trazo como máscara: hereda el color del texto (tokens) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M8 2v12M2 8h12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M8 2v12M2 8h12'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: none;
}

.faq .accordion-button:not(.collapsed)::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 8h12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 8h12'/%3E%3C/svg%3E");
}

.faq .accordion-button:focus-visible {
  outline: 3px solid var(--pc-gold-deep);
  outline-offset: 2px;
}

.faq .accordion-body {
  max-width: var(--pc-measure);
  padding-bottom: var(--pc-space-lg);
}

/* ==================================================================
   testimonials
   ================================================================== */
.testimonials__item {
  height: 100%;
  margin: 0;
  padding-left: var(--pc-space-lg);
  border-left: 1px solid var(--pc-gold);
}

.testimonials__item blockquote {
  margin-bottom: var(--pc-space-md);
}

.testimonials__item blockquote p {
  margin: 0;
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  line-height: 1.5;
  color: var(--pc-night);
}

.testimonials__name {
  display: block;
  font-weight: 600;
  color: var(--pc-night);
}

.testimonials__origin {
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

/* ==================================================================
   contact-info
   ================================================================== */
.contact-info__list {
  display: grid;
  gap: var(--pc-space-lg);
  margin: var(--pc-space-lg) 0;
  padding: 0;
  list-style: none;
}

.contact-info__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--pc-space-md);
}

.contact-info__list .icon {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--pc-night);
}

.contact-info__list div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-info__label {
  display: block;
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  color: var(--pc-ink-muted);
}

.contact-info__list address {
  margin: 0;
}

.contact-info__directions {
  max-width: var(--pc-measure);
  margin-bottom: 0;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

.contact-info__map {
  margin: 0;
}

.contact-info__map img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--pc-warm-gray);
  border-radius: var(--pc-radius-sm);
}

.contact-info__map figcaption {
  margin-top: var(--pc-space-md);
}

/* ==================================================================
   contact-form
   ================================================================== */
.contact-form__status:empty {
  display: none;
}

.contact-form__status {
  margin-bottom: var(--pc-space-lg);
}

.contact-form__status:focus {
  outline: none;
}

/* ==================================================================
   booking-steps
   ================================================================== */
.booking-steps {
  margin-bottom: var(--pc-space-xl);
}

.booking-steps ol {
  display: flex;
  gap: var(--pc-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.booking-steps__item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--pc-space-sm);
  padding-top: var(--pc-space-sm);
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
  border-top: 2px solid var(--pc-warm-gray);
}

.booking-steps__num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-weight: 600;
  border: 1px solid var(--pc-border-control);
  border-radius: 50%;
}

.booking-steps__num .icon {
  width: 16px;
  height: 16px;
}

.booking-steps__item[aria-current="step"] {
  font-weight: 600;
  color: var(--pc-night);
  border-top-color: var(--pc-gold);
}

.booking-steps__item[aria-current="step"] .booking-steps__num {
  color: var(--pc-limestone);
  background-color: var(--pc-night);
  border-color: var(--pc-night);
}

.booking-steps__item.is-done {
  color: var(--pc-night);
  border-top-color: var(--pc-night);
}

.booking-steps__item.is-done .booking-steps__num {
  border-color: var(--pc-night);
}

@media (max-width: 575.98px) {
  .booking-steps__item:not([aria-current="step"]) .booking-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .booking-steps__item[aria-current="step"] {
    flex: 3;
  }
}

/* ==================================================================
   booking-cart / booking-checkout (resumen compartido)
   ================================================================== */
.booking-cart__title,
.booking-checkout__title {
  font-size: var(--pc-fs-headline);
  margin-bottom: var(--pc-space-xl);
}

.cart-list {
  margin: 0 0 var(--pc-space-lg);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pc-warm-gray);
}

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--pc-space-md);
  padding-block: var(--pc-space-lg);
  border-bottom: 1px solid var(--pc-warm-gray);
}

.cart-item__media {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--pc-radius-sm);
}

.cart-item__title {
  font-size: var(--pc-fs-title);
  font-weight: 600;
  line-height: var(--pc-lh-title);
}

.cart-item__meta {
  margin: 0;
  font-size: var(--pc-fs-small);
}

.cart-item__meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--pc-space-sm);
}

.cart-item__meta dt {
  font-weight: 400;
  color: var(--pc-ink-muted);
}

.cart-item__meta dt::after {
  content: ":";
}

.cart-item__meta dd {
  margin: 0;
}

.cart-item__aside {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-md);
}

.cart-item__amount {
  margin: 0;
  font-weight: 600;
  color: var(--pc-night);
}

.cart-item__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--pc-space-sm);
  font-size: var(--pc-fs-small);
  font-weight: 600;
  color: var(--pc-ink-muted);
  background: none;
  border: 0;
  border-radius: var(--pc-radius-xs);
}

.cart-item__remove:hover {
  color: var(--pc-error);
}

@media (min-width: 768px) {
  .cart-item {
    grid-template-columns: 136px 1fr auto;
    align-items: start;
  }

  .cart-item__media {
    width: 136px;
    height: 102px;
  }

  .cart-item__aside {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
  }
}

.booking-summary {
  padding: var(--pc-space-lg);
  background-color: var(--pc-sand);
  border-radius: var(--pc-radius-sm);
}

@media (min-width: 992px) {
  .booking-summary {
    position: sticky;
    top: calc(var(--pc-navbar-height) + var(--pc-space-lg));
  }
}

.booking-summary__title {
  font-size: var(--pc-fs-title);
  font-weight: 600;
  margin-bottom: var(--pc-space-md);
}

.booking-summary__items {
  display: grid;
  gap: var(--pc-space-md);
  margin: 0 0 var(--pc-space-md);
  padding: 0 0 var(--pc-space-md);
  list-style: none;
  border-bottom: 1px solid var(--pc-border-control);
}

.booking-summary__items li {
  display: grid;
  font-size: var(--pc-fs-small);
}

.booking-summary__items strong {
  color: var(--pc-night);
}

.booking-summary__totals {
  margin: 0 0 var(--pc-space-lg);
}

.booking-summary__totals div {
  display: flex;
  justify-content: space-between;
  gap: var(--pc-space-md);
  padding-block: 6px;
}

.booking-summary__totals dt {
  font-weight: 400;
}

.booking-summary__totals dd {
  margin: 0;
}

.booking-summary__total {
  margin-top: var(--pc-space-sm);
  padding-top: var(--pc-space-md) !important;
  font-size: var(--pc-fs-lead);
  font-weight: 600;
  color: var(--pc-night);
  border-top: 1px solid var(--pc-border-control);
}

.booking-summary__total dt {
  font-weight: 600;
}

.booking-summary__note {
  display: flex;
  gap: var(--pc-space-sm);
  margin: var(--pc-space-md) 0 0;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

.booking-summary__note .icon {
  margin-top: 2px;
}

/* Checkout */
.booking-checkout__form fieldset {
  margin-bottom: var(--pc-space-xl);
}

.booking-checkout__legend {
  margin-bottom: var(--pc-space-lg);
  padding-bottom: var(--pc-space-sm);
  font-family: var(--pc-font-serif);
  font-size: var(--pc-fs-title);
  font-weight: 600;
  color: var(--pc-night);
  border-bottom: 1px solid var(--pc-warm-gray);
}

.booking-checkout__policies {
  margin-bottom: var(--pc-space-lg);
}

.payment-slot {
  min-height: 160px;
  padding: var(--pc-space-lg);
  background-color: var(--pc-surface);
  border: 1px dashed var(--pc-border-control);
  border-radius: var(--pc-radius-sm);
}

.payment-slot__note {
  display: flex;
  align-items: flex-start;
  gap: var(--pc-space-sm);
  margin: 0;
  font-size: var(--pc-fs-small);
  color: var(--pc-ink-muted);
}

.payment-slot__note .icon {
  margin-top: 2px;
  color: var(--pc-success);
}

/* Estados vacío y confirmación */
.empty-state,
.booking-confirmation {
  max-width: 36rem;
  margin-inline: auto;
  padding-block: var(--pc-space-2xl);
  text-align: center;
}

.empty-state:focus,
.booking-confirmation:focus {
  outline: none;
}

.empty-state .icon,
.booking-confirmation .icon {
  margin-bottom: var(--pc-space-md);
  color: var(--pc-gold-deep);
}

.booking-confirmation .icon {
  color: var(--pc-success);
}

.empty-state p,
.booking-confirmation p {
  margin-inline: auto;
}

/* ==================================================================
   footer
   ================================================================== */
.site-footer {
  padding-block: var(--pc-space-2xl) var(--pc-space-xl);
  font-size: var(--pc-fs-small);
}

/* Si la página termina con la banda CTA (también noche), un filete separa ambos bloques */
main:has(> .cta-band:last-child) + .site-footer {
  border-top: 1px solid rgba(var(--pc-gold-rgb), 0.35);
}

.site-footer__brand img {
  display: block;
  width: 132px;
  height: auto;
  margin-bottom: var(--pc-space-lg);
}

.site-footer__intro {
  max-width: 30ch;
}

.site-footer__title {
  margin-bottom: var(--pc-space-md);
  font-family: var(--pc-font-sans);
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  color: var(--pc-gold-light);
}

.site-footer__list,
.site-footer__social,
.site-footer__langs,
.site-footer__legal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li + li {
  margin-top: 4px;
}

.site-footer__list a,
.site-footer__langs a,
.site-footer__legal a {
  display: inline-block;
  padding-block: 4px;
}

.site-footer a {
  color: var(--pc-on-night-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--pc-gold-light);
  text-decoration: underline;
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--pc-space-sm);
}

.site-footer__contact .icon {
  margin-top: 3px;
  color: var(--pc-gold);
}

.site-footer__contact address {
  font-style: normal;
}

/* Correos y direcciones reales pueden ser largos: se cortan en vez de desbordar */
.site-footer__contact a,
.site-footer__contact address {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-footer__social {
  display: flex;
  gap: var(--pc-space-sm);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--pc-limestone);
  border: 1px solid rgba(var(--pc-gold-rgb), 0.45);
  border-radius: var(--pc-radius-xs);
}

.site-footer__social a:hover {
  color: var(--pc-night);
  background-color: var(--pc-gold-light);
  border-color: var(--pc-gold-light);
}

.site-footer__langs {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0 var(--pc-space-lg);
}

.site-footer__langs a[aria-current="true"] {
  color: var(--pc-limestone);
  font-weight: 600;
}

.site-footer__rule {
  margin-block: var(--pc-space-xl) var(--pc-space-lg);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pc-space-md);
}

.site-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-md) var(--pc-space-lg);
}

/* ==================================================================
   coming-soon (página previa al lanzamiento)
   Toda la vista es la única banda noche de la página. El contador es
   informativo: cambia el texto cada segundo, sin transiciones.
   ================================================================== */
.coming-soon {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--pc-space-lg);
  overflow: hidden;
  background-color: var(--pc-night);
  isolation: isolate;
}

.coming-soon__media,
.coming-soon__media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Móvil: velo casi uniforme, porque el texto cubre todo el ancho */
.coming-soon__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(var(--pc-night-rgb), 0.6) 0%, rgba(var(--pc-night-rgb), 0.82) 35%, rgba(var(--pc-night-rgb), 0.9) 100%);
}

/* Desktop: el texto va a la izquierda sobre ≥ 75 %; la foto respira a la derecha */
@media (min-width: 992px) {
  .coming-soon__veil {
    background:
      linear-gradient(to right, rgba(var(--pc-night-rgb), 0.88) 0%, rgba(var(--pc-night-rgb), 0.78) 50%, rgba(var(--pc-night-rgb), 0.25) 85%),
      linear-gradient(to top, rgba(var(--pc-night-rgb), 0.5) 0%, rgba(var(--pc-night-rgb), 0) 40%);
  }
}

.coming-soon__top,
.coming-soon__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-md);
}

.coming-soon__logo {
  width: auto;
  height: 52px;
}

.coming-soon__langs,
.coming-soon__channels,
.coming-soon__social {
  margin: 0;
  padding: 0;
  list-style: none;
}

.coming-soon__langs {
  display: flex;
  gap: var(--pc-space-xs);
}

.coming-soon__langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--pc-space-sm);
  font-size: var(--pc-fs-label);
  font-weight: 600;
  letter-spacing: var(--pc-tracking-label);
  color: var(--pc-on-night-muted);
  text-decoration: none;
}

.coming-soon__langs a:hover {
  color: var(--pc-gold-light);
}

.coming-soon__langs a[aria-current="true"] {
  color: var(--pc-limestone);
  text-decoration: underline;
  text-decoration-color: var(--pc-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.coming-soon__body {
  display: flex;
  flex: 1;
  align-items: center;
  padding-block: var(--pc-space-2xl);
}

.coming-soon__content {
  max-width: 42rem;
}

.coming-soon__title {
  margin-bottom: var(--pc-space-md);
  font-size: var(--pc-fs-display);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tracking-display);
  color: var(--pc-limestone);
}

.coming-soon__content .lead {
  max-width: 34rem;
}

.coming-soon__date {
  display: flex;
  gap: var(--pc-space-sm);
  align-items: flex-start;
  margin-bottom: 0;
  color: var(--pc-limestone);
}

.coming-soon__date .icon {
  margin-top: 0.2em;
  color: var(--pc-gold);
}

/* Contador: cuatro celdas con filete dorado superior y divisores tenues */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 34rem;
  margin-top: var(--pc-space-lg);
  border-top: 1px solid var(--pc-gold);
}

.countdown[hidden] {
  display: none;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-xs);
  min-width: 0;
  padding: var(--pc-space-md) var(--pc-space-md) 0;
}

.countdown__unit:first-child {
  padding-left: 0;
}

.countdown__unit + .countdown__unit {
  border-left: 1px solid rgba(var(--pc-limestone-rgb), 0.18);
}

.countdown__value {
  font-family: var(--pc-font-serif);
  font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--pc-limestone);
}

.countdown__label {
  font-size: var(--pc-fs-label);
  font-weight: 600;
  line-height: var(--pc-lh-title);
  letter-spacing: var(--pc-tracking-label);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
  color: var(--pc-on-night-muted);
}

/* Móvil estrecho: 2 × 2 para que las etiquetas traducidas no se corten */
@media (max-width: 479.98px) {
  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .countdown__unit:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .countdown__unit:nth-child(n + 3) {
    padding-top: var(--pc-space-lg);
  }
}

.coming-soon__ended {
  margin: var(--pc-space-lg) 0 0;
  font-family: var(--pc-font-serif);
  font-style: italic;
  font-size: var(--pc-fs-lead);
  color: var(--pc-limestone);
}

.coming-soon__ended .link-arrow {
  margin-left: var(--pc-space-sm);
  font-family: var(--pc-font-sans);
  font-style: normal;
  font-size: var(--pc-fs-body);
}

.coming-soon__contact {
  margin-top: var(--pc-space-xl);
  padding-top: var(--pc-space-lg);
  border-top: 1px solid rgba(var(--pc-limestone-rgb), 0.18);
}

.coming-soon__contact p {
  max-width: 34rem;
}

.coming-soon__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-sm) var(--pc-space-xl);
  margin-bottom: var(--pc-space-lg);
}

.coming-soon__channels li {
  display: flex;
  gap: var(--pc-space-sm);
  align-items: center;
}

.coming-soon__channels .icon {
  color: var(--pc-gold);
}

.coming-soon__channels a {
  display: inline-block;
  padding-block: 4px;
  color: var(--pc-limestone);
}

.coming-soon__social {
  display: flex;
  gap: var(--pc-space-sm);
}

.coming-soon__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--pc-limestone);
  border: 1px solid rgba(var(--pc-gold-rgb), 0.45);
  border-radius: var(--pc-radius-xs);
}

.coming-soon__social a:hover {
  color: var(--pc-night);
  background-color: var(--pc-gold-light);
  border-color: var(--pc-gold-light);
}

.coming-soon__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pc-space-sm) var(--pc-space-lg);
  font-size: var(--pc-fs-small);
}

.coming-soon__legal a {
  display: inline-block;
  padding-block: 4px;
  color: var(--pc-on-night-muted);
}

.coming-soon__legal a:hover {
  color: var(--pc-gold-light);
}