/* ===========================================================================
   Hotel Demper: la marca, encima de la base (styles.css).

   styles.css es la hoja de la web de la Hosteria Santa Teresita, limpia y con
   la paleta de Demper en sus variables (:root). Esta hoja le pone lo que es
   PROPIO de Demper y vale para todas las paginas: el encabezado y el pie en
   carbon (el toldo negro del frente) con el logo real, los botones y la
   seleccion en magenta (el "Demper" del logo), la letra de los titulos
   (Oswald, condensada como el logo) y la linea gris -> magenta del logo como
   detalle. Lo que es solo de la portada esta en portada.css.

   Reglas que se respetan (vienen de la hosteria, ver CLAUDE.md):
   - Un solo color fuerte por pantalla: el magenta, para la accion principal.
     El texto de acento va en --berry (el magenta sobre blanco da 4.9:1, justo;
     el berry da 8.5:1).
   - Nada de `display` en .primary-button / .secondary-button: los botones del
     formulario de reserva se esconden con `hidden`, y un display les ganaria.
   - Nada de transform/filter en los ancestros del calendario (#datePicker es
     position: fixed).
   =========================================================================== */

/* --------------------------------------------------------------------- base */

/* Lo que tiene `hidden` no se ve, NUNCA. En la hoja de la hosteria varios
   componentes llevan un `display` propio que le gana al atributo, y se fue
   arreglando de a uno (hay mas de veinte reglas `[hidden]` sueltas). Aca
   aparecieron dos mas: el formulario de "Ya transferi" se veia de entrada y,
   peor, la tarjeta de pago online con Mercado Pago se veia en pago.html
   aunque pago.js la oculta (Demper todavia no cobra online). Una sola regla
   cubre todos los casos. */
[hidden] {
  display: none !important;
}

::selection {
  background: rgb(var(--rgb-acento) / 0.2);
}

body {
  background: #ffffff;
  color: var(--tinta);
  font-family: var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  letter-spacing: 0.004em;
}

h2 {
  line-height: 1.06;
}

.eyebrow {
  font-family: var(--fuente-texto);
  color: var(--berry);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

a {
  color: var(--berry);
}

/* ------------------------------------------------------------------ botones */
.primary-button {
  color: #ffffff;
  background: var(--magenta);
  border: 1px solid var(--magenta);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgb(var(--rgb-acento) / 0.24);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.primary-button:hover {
  background: var(--magenta-hover);
  border-color: var(--magenta-hover);
  box-shadow: 0 12px 28px rgb(var(--rgb-acento) / 0.3);
}

.primary-button:active {
  transform: translateY(1px);
}

.primary-button:disabled,
.primary-button[disabled] {
  background: #c9c2cb;
  border-color: #c9c2cb;
  box-shadow: none;
  cursor: not-allowed;
}

.secondary-button {
  color: var(--tinta);
  background: #ffffff;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-weight: 700;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.secondary-button:hover {
  color: #ffffff;
  background: var(--carbon);
  border-color: var(--carbon);
}

/* ------------------------------------------------------- encabezado (carbon) */
.site-header {
  color: #ffffff;
  background: rgb(var(--rgb-velo) / 0.94);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: none;
}

.site-header.is-compact {
  background: rgb(var(--rgb-velo) / 0.97);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.22);
}

.site-header .marca {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
  color: #ffffff;
  text-decoration: none;
}

.marca-logo {
  display: block;
  width: auto;
  height: 42px;
  transition: height 180ms ease;
}

.site-header.is-compact .marca-logo {
  height: 36px;
}

.site-header .nav a,
.site-header .ghost-button {
  color: rgb(255 255 255 / 0.9);
  border-radius: 999px;
  font-weight: 600;
}

.site-header .nav a:hover,
.site-header .ghost-button:hover {
  color: #ffffff;
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.18);
}

.site-header .ghost-button {
  border-color: rgb(255 255 255 / 0.28);
}

/* WhatsApp en el encabezado oscuro: el verde de WhatsApp, claro. */
.site-header .whatsapp-link,
.site-header .results-whatsapp-link {
  color: #7ee2a8;
  background: rgb(37 211 102 / 0.1);
  border-color: rgb(37 211 102 / 0.32);
}

.site-header .whatsapp-link:hover,
.site-header .results-whatsapp-link:hover {
  color: #ffffff;
  background: rgb(37 211 102 / 0.22);
  border-color: rgb(37 211 102 / 0.5);
}

/* El boton del menu del telefono: tres rayas que pasan a cruz. */
.menu-button {
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #ffffff;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  cursor: pointer;
}

.menu-button span,
.menu-button span::before,
.menu-button span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 200ms ease, background-color 200ms ease;
}

.menu-button span {
  position: relative;
}

.menu-button span::before,
.menu-button span::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-button span::before {
  top: -6px;
}

.menu-button span::after {
  top: 6px;
}

.menu-button[aria-expanded="true"] span {
  background: transparent;
}

.menu-button[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 980px) {
  .menu-button {
    display: grid;
  }

  .site-header .nav {
    top: calc(100% + 8px);
    right: 12px;
    left: 12px;
    gap: 4px;
    padding: 10px;
    background: var(--carbon-2);
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 18px;
    box-shadow: 0 24px 48px rgb(0 0 0 / 0.35);
  }

  .site-header .nav a,
  .site-header .nav .ghost-button {
    justify-content: flex-start;
    min-height: 48px;
    padding: 12px 16px;
    text-align: left;
  }

  /* Las paginas internas (elegir fechas, pago, "Ver mi reserva") no tienen
     boton de menu: su nav es UN link y va siempre a la vista. En la web de la
     hosteria quedaba escondido en el telefono, sin forma de abrirlo. */
  .confirmation-header .nav {
    position: static;
    display: flex;
    flex-direction: row;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* El encabezado de las paginas internas, sticky en vez de fijo. */
.confirmation-header {
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

/* Resultados: el buscador del encabezado es una tarjeta blanca sobre el
   carbon, como el buscador de la portada. */
.results-header .header-search {
  border-color: transparent;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}

/* ---------------------------------------------------------------- resultados
   "Incluido en tu estadia" y las pastillas de confianza en neutro: con el
   magenta suave de la marca la pagina quedaba rosa entera, y el color fuerte
   es solo para la accion (Añadir, Continuar). */
.service-bundle {
  background: var(--arena-clara);
  border-color: var(--linea);
}

.service-tags span {
  color: var(--tinta);
  background: #ffffff;
  border-color: var(--linea);
}

.results-trust span {
  color: var(--tinta);
  background: #ffffff;
  border-color: var(--linea);
}

/* --------------------------------------------------------------- calendario
   Dias sin caja: un circulo magenta para la entrada y la salida y una banda
   para las noches del medio (la hosteria usa cuadraditos con borde). Vale
   para el calendario de la portada y los del proceso de reserva (todos salen
   de calendario.js). La banda llega hasta el centro del circulo de cada punta
   (:has y el hermano), asi la estadia se lee como una sola pieza. */
.calendar-week,
.calendar-grid {
  column-gap: 0;
  row-gap: 4px;
}

.calendar-day,
.calendar-day:hover:not(:disabled),
.calendar-day.is-selected,
.calendar-day.is-range,
.calendar-day:disabled {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.calendar-day {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  padding: 0;
  color: var(--tinta);
  background: transparent;
  font-weight: 600;
}

.calendar-day::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(42px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.calendar-day:hover:not(:disabled) {
  color: var(--tinta);
  background: transparent;
}

.calendar-day:hover:not(:disabled)::before {
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px var(--magenta);
}

.calendar-day.is-range,
.calendar-day.is-range:hover:not(:disabled) {
  color: var(--tinta);
  background: var(--magenta-suave);
}

.calendar-day.is-selected,
.calendar-day.is-selected:hover:not(:disabled) {
  color: #ffffff;
  background: transparent;
}

.calendar-day.is-selected::before,
.calendar-day.is-selected:hover:not(:disabled)::before {
  background: var(--magenta);
  box-shadow: 0 6px 14px rgb(var(--rgb-acento) / 0.3);
}

/* La entrada (seguida de una noche del medio, o de la salida si es una
   noche) y la salida (despues de una noche del medio o de la entrada). */
.calendar-day.is-selected:has(+ .calendar-day.is-range),
.calendar-day.is-selected:has(+ .calendar-day.is-selected) {
  background: linear-gradient(90deg, transparent 50%, var(--magenta-suave) 50%);
}

.calendar-day.is-range + .calendar-day.is-selected,
.calendar-day.is-selected + .calendar-day.is-selected {
  background: linear-gradient(90deg, var(--magenta-suave) 50%, transparent 50%);
}

.calendar-day:disabled {
  color: #c9c2cb;
  background: transparent;
  cursor: not-allowed;
}

/* Una noche del medio que no se puede elegir como salida (antes del minimo
   de noches) sigue siendo parte de la estadia: la banda no se corta. */
.calendar-day.is-range:disabled {
  color: #a8919f;
  background: var(--magenta-suave);
}

/* Cuantas noches suma cada salida: un globito arriba del dia (adentro del
   circulo no entraba "4 noches"). Aparece al pasar por encima y queda fijo
   sobre la salida elegida. */
.calendar-day small,
.calendar-day:hover:not(:disabled) small,
.calendar-day.has-nights.is-selected small,
.calendar-day.has-nights.is-range small {
  position: absolute;
  bottom: calc(100% - 8px);
  left: 50%;
  z-index: 2;
  padding: 3px 8px;
  color: #ffffff;
  background: var(--carbon);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgb(var(--rgb-sombra) / 0.25);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.calendar-day.has-nights:hover:not(:disabled) small,
.calendar-day.has-nights.is-selected small {
  opacity: 1;
}

.calendar-day.has-nights {
  gap: 0;
}

/* ------------------------------------------- habitacion sin foto todavia
   La capacidad en grande, sobre el revoque y la piedra del frente. La usan la
   portada, la pantalla de elegir fechas y las tarjetas de resultados. Nunca se
   muestra la foto de OTRA habitacion. */
.habitacion-sin-foto {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 100%;
  color: var(--carbon);
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 0.55), transparent 55%),
    linear-gradient(135deg, var(--arena) 0%, #e9dccb 100%);
  text-align: center;
}

.habitacion-sin-foto strong {
  font-family: var(--fuente-titulos);
  font-size: clamp(3.4rem, 9vw, 6rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--carbon);
}

.habitacion-sin-foto span {
  color: var(--gris);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.habitacion-sin-foto-gente {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  color: var(--magenta);
}

.habitacion-sin-foto-gente svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* En las miniaturas de una combinacion (resultados) va chica. */
.combo-thumbs .habitacion-sin-foto {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

.combo-thumbs .habitacion-sin-foto strong {
  font-size: 1.6rem;
}

.combo-thumbs .habitacion-sin-foto span {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.combo-media > .habitacion-sin-foto {
  min-height: 220px;
}

.reservar-contexto-foto .habitacion-sin-foto {
  aspect-ratio: 16 / 10;
  border-radius: inherit;
}

/* --------------------------------------------------------------------- pie */
.site-footer {
  color: rgb(255 255 255 / 0.78);
  background: var(--carbon);
}

/* La linea del logo, gris -> magenta, arriba del pie. */
.site-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--grafito), var(--magenta));
}

.footer-logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 0 18px;
}

.site-footer a {
  color: #ddd6df;
}

.site-footer a:hover {
  color: #ffffff;
}

.footer-newsletter {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 18px;
}

.footer-newsletter .eyebrow {
  color: #f39ac8;
}

.newsletter-form input {
  border-radius: 999px;
}

.newsletter-form button {
  color: #ffffff;
  background: var(--magenta);
  border-color: var(--magenta);
  border-radius: 999px;
}

.newsletter-form button:hover {
  color: #ffffff;
  background: var(--magenta-hover);
  border-color: var(--magenta-hover);
}

/* ------------------------------------------------------ paginas legales */
.legal-header img.legal-logo {
  display: block;
  width: auto;
  height: 34px;
}

/* ------------------------------------------- tarjetas de estado y avisos
   El detalle de la reserva, el resumen del pago y los avisos de resultados
   ("Sin disponibilidad", "estadia minima") usaban el fondo suave del acento:
   en Demper era rosa, y la pantalla de la reserva quedaba rosa entera. Van en
   el arena del frente; el magenta queda para el borde de lo que se destaca. */
.reservation-confirmation-card {
  background: var(--arena-clara);
  border-color: var(--linea);
  border-radius: 18px;
}

.legal-destacado {
  background: var(--arena-clara);
  border-left-color: var(--magenta);
}

/* "Ver mi reserva" (reserva-confirmacion.html): el mismo hueco que pago.html
   ya tenia corregido. .confirmation-shell es un <section> y se sumaba el
   padding generico de las secciones (74px) a los 128px de .confirmation-main,
   pensados para un encabezado FIJO; aca el encabezado es sticky y ya ocupa su
   lugar. Mismas medidas que .payment-main / .payment-shell. */
.confirmation-main {
  padding-top: 40px;
}

.confirmation-shell {
  padding: 0;
  background: transparent;
}

/* ------------------------------------- "Ver mi reserva": el modal */
.reservation-lookup-modal .modal-card {
  border-radius: 20px;
}

/* El formulario de "Ya transferi" arranca escondido (hidden) y su regla le
   pone display: grid, que le ganaba al hidden: se veia de entrada, junto al
   boton que lo abre (mismo patron que ya estaba corregido en otros lugares de
   la hoja). */
.confirmation-upload-form[hidden] {
  display: none;
}