/* LOS ACEBOS: header de reservas. El botón "Reservar" va en verde, con un degradé visible pero no estridente,
   sin Tax Free (Los Acebos no tiene) y los detalles (días elegidos, rango, bordes) con el verde del sitio (--gold #7f917f) */
:root{
   --font-text: 'Muller Regular', 'Muller', sans-serif;
   --brown-dark: #566153;   /* el verde del sitio más oscuro */
}

/* BASE DEL HEADER: el header de reservas necesita un reset de botones y campos y la regla que pone el calendario
   debajo de su campo. Divi no los tiene (los botones salían con el borde del navegador y el calendario lejos del campo), así que acá van
   solo para las piezas del header, con :where() (especificidad 0) para que el resto de este archivo siga mandando */
:where(header.reserva-header, .reserva-hoja, a.btn-reservar-mobile, .nights-tooltip) :where(*, *::before, *::after){
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
:where(header.reserva-header, .reserva-hoja) :where(button, input, select, textarea){
   font: inherit;
   font-weight: 400;   /* Divi hereda 500 */
   color: inherit;
   background: none;
   border: none;
   outline: none;
}
:where(header.reserva-header, .reserva-hoja) :where(a){
   text-decoration: none;
   color: inherit;
}
:where(header.reserva-header, .reserva-hoja) :where(ul, ol){
   list-style: none;
}
:where(header.reserva-header, .reserva-hoja) :where(h1, h2, h3, h4, h5, h6){
   font-size: inherit;
   font-weight: inherit;
}
:where(header.reserva-header, .reserva-hoja) :where(b, strong){
   font-weight: normal;
}
/* el calendario va pegado debajo de su campo (flatpickr le pone la posición de la página, que dentro del campo queda corrida) */
header.reserva-header .flatpickr-calendar{
   position: absolute !important;
   top: 100% !important;
   left: 0 !important;
   z-index: 999999 !important;
}

/* DIVI: el header sale de las cajas de Divi (lo hace header-block.php) y la caja vacía se oculta */
.reserva-divi-vacio{
   display: none !important;
}
.reserva-header-wrap{
   position: relative;
   z-index: 100;
}
/* Divi usa interlineado 1.7; el header de reservas está hecho con 1.2: con 1.7 los campos quedaban 4px más altos */
header.header.reserva-header,
header.header.reserva-header .form-wrap label,
header.header.reserva-header .form-wrap [type="submit"],
.reserva-hoja,
.flatpickr-calendar{
   line-height: 1.2;
}
/* fuente: el header de reservas va en Muller. Divi pone Open Sans (y peso 700 en el
   botón), así que se fija la Muller del sitio con peso normal en todas las piezas del formulario */
header.header.reserva-header,
.reserva-hoja,
a.btn-reservar-mobile,
.flatpickr-calendar,
.nights-tooltip{
   font-family: var(--font-text);
}
header.header.reserva-header .form-wrap [type="submit"],
header.header.reserva-header .form-wrap label,
.reserva-resumen-boton,
.reserva-hoja .themeMainButton,
a.btn-reservar-mobile{
   font-family: var(--font-text);
   font-weight: 400;
}
/* botón "Reservar" fijo del celular: la base que en los otros sitios trae style.css (oculto hasta que lo muestra
   el resto de este archivo); sin esto en escritorio aparecía una tira de 23px antes del footer */
.btn-reservar-mobile{
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   text-align: center;
   text-transform: uppercase;
   font-size: 0.9375rem;
   letter-spacing: 0.15625rem;
   font-family: var(--font-text);
   z-index: 999;
   background: var(--gold);
   color: var(--white);
   padding: 1.125rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38) !important;
}
@media (max-width: 999px){
   .btn-reservar-mobile{
      display: block;
   }
}

/* alto del header fijo para todos los tamaños: el relleno va en el header (no en .box) y la caja tiene un alto mínimo
   (la del logo). El logo de Los Acebos (1346 x 784) es apenas bajo: va un poco más ancho */
header.header.reserva-header .box{
   padding: 0;
}
.reserva-header-wrap header.header.reserva-header:not(.reserva-bloque){
   padding: 1rem 0;
   border-bottom: 0.0625rem solid transparent;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}
.reserva-header-wrap header.header.reserva-header:not(.reserva-bloque) .box{
   min-height: 5.625rem;   /* 90px */
}
/* ancho del contenido del header (el tema de Los Acebos lo tenía en 1180px) */
header.header.reserva-header .c-wrap{
   max-width: 81.25rem;
   width: 100%;
   padding: 0 3.125rem;
   margin: 0 auto;
}
@media (max-width: 1279px){
   .reserva-header-wrap header.header.reserva-header:not(.reserva-bloque) .box{
      min-height: 4.9375rem;   /* 79px (logo de 130px) */
   }
}
@media (max-width: 1024px){
   header.header.reserva-header .c-wrap{
      padding: 0 1.875rem;
   }
}
@media (max-width: 999px){
   .reserva-header-wrap header.header.reserva-header:not(.reserva-bloque) .box{
      min-height: 4.5625rem;   /* 73px (logo de 120px) */
   }
   header.header.reserva-header figure.logo img{
      width: 6.375rem;   /* 102px */
      min-width: 6.375rem;
      max-width: none;
   }
}
@media (max-width: 690px){
   .reserva-header-wrap header.header.reserva-header:not(.reserva-bloque){
      padding: 0.625rem 0;
   }
   .reserva-header-wrap header.header.reserva-header:not(.reserva-bloque) .box{
      min-height: 3.8125rem;   /* 61px (logo de 100px) */
   }
   header.header.reserva-header .c-wrap{
      padding: 0 1.5625rem;
   }
   header.header.reserva-header figure.logo img{
      width: 5.5rem;   /* 88px */
      min-width: 5.5rem;
   }
}

/* HEADER DE RESERVAS
   ----------------------------- */

.reserva-header-wrap header.header{
   /* el tema anima todo (0.3s), también el z-index: el cambio de capa tiene que ser inmediato */
   transition: all 0.3s, z-index 0s;
}
/* con algo abierto (calendario o grilla), el header queda por encima de todo */
.reserva-header-wrap header.header.reserva-activo{
   z-index: 10000;
}

/* logo de tamaño fijo en escritorio (el del sitio mide ~146-151px y se achica según el espacio que deje el formulario) */
@media (min-width: 1280px) {
   header.reserva-header figure.logo{
      flex-shrink: 0;
   }
   header.reserva-header figure.logo img{
      width: 7.5rem;   /* 120px: el verde oscuro en negrita pesa mucho y a más ancho se ve grande */
   }
}

header.reserva-header .form-wrap form{
   gap: 1.5rem;
}
header.reserva-header .form-wrap .field-group{
   position: relative;
}
/* el formulario no se selecciona como texto al tocarlo */
header.reserva-header .reserva-form{
   -webkit-user-select: none;
   user-select: none;
}
/* columnas fijas: cambiar adultos / menores ("2 adultos" → "12 adultos") no las mueve */
header.reserva-header .form-wrap .field-group:not(:last-child){
   box-sizing: border-box;
   flex: 1 1 8rem;   /* base igual para todas y mayor que su relleno: unir las fechas tampoco las mueve */
   min-width: 0;
}


/* todo el campo se puede tocar (etiqueta incluida), no solo el texto */
header.reserva-header .form-wrap .field-group:not(:last-child),
header.reserva-header .form-wrap .field-group:not(:last-child) label{
   cursor: pointer;
}
header.reserva-header .form-wrap .field-group .flatpickr-calendar{
   cursor: default;
}
header.reserva-header .form-wrap .field-group:last-child{
   width: auto;
}
header.reserva-header .form-wrap [type="submit"]{
   padding-inline: 3.25rem;
}
header.reserva-header .form-wrap select.c-select{
   padding: 0.5rem 1.25rem 0.5rem 0;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 0.25rem center / 0.625rem;
}
header.reserva-header .form-wrap input.c-input{
   cursor: pointer;
   background: none;
   outline: none;
   border-radius: 0;
}
header.reserva-header .form-wrap .c-input.reserva-error{
   border-bottom-color: var(--booking-error);
}

/* desplegable propio de adultos / menores (solo escritorio) */
header.reserva-header select.c-select.reserva-reemplazado{
   display: none;
}
header.reserva-header .reserva-desplegable{
   position: relative;
}
header.reserva-header .reserva-desplegable-boton{
   position: relative;
   display: block;
   width: 100%;
   padding: 0.5rem 1.25rem 0.5rem 0;
   border: 0;
   border-bottom: 0.0625rem solid var(--grey-400);
   border-radius: 0;
   background: none;
   font: inherit;
   font-size: 0.9375rem;
   line-height: inherit;
   color: var(--black);
   text-align: left;
   white-space: nowrap;
   cursor: pointer;
   outline: none;
}
header.reserva-header .reserva-desplegable-boton:after{
   content: "";
   position: absolute;
   right: 0.25rem;
   top: 50%;
   width: 0.625rem;
   height: 0.375rem;
   margin-top: -0.1875rem;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
   transition: transform 0.25s cubic-bezier(.25,1,.33,1);
}
header.reserva-header .reserva-desplegable.reserva-abierto .reserva-desplegable-boton:after{
   transform: rotate(180deg);
}
header.reserva-header .reserva-desplegable-boton:focus-visible{
   border-bottom-color: var(--gold);
}
header.reserva-header .reserva-desplegable-lista{
   position: absolute;
   top: calc(100% + 0.75rem);
   left: 0;
   z-index: 999999;
   min-width: 100%;
   margin: 0;
   padding: 0.5rem;
   list-style: none;
   background: var(--white);
   border-radius: 0.625rem;
   box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.15);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-0.375rem);
   transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.25,1,.33,1), visibility 0.2s;
}
/* listas largas (hasta 20 adultos): scroll dentro de la lista */
header.reserva-header .reserva-desplegable-lista{
   max-height: 17rem;
   overflow-y: auto;
   overscroll-behavior: contain;
}
header.reserva-header .reserva-desplegable-lista.reserva-hacia-arriba{
   top: auto;
   bottom: calc(100% + 0.75rem);
   transform: translateY(0.375rem);
}
header.reserva-header .reserva-desplegable.reserva-abierto .reserva-desplegable-lista{
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}


/* el select queda oculto: adultos y niños se eligen en la grilla (el select guarda el valor que se envía) */
header.reserva-header select.c-select.reserva-reemplazado{
   display: none;
}


/* GRILLA DE ADULTOS / NIÑOS
   ----------------------------- */

/* panel */
header.reserva-header .reserva-popover{
   min-width: 13.5rem;
   padding: 0.875rem 1rem 1rem;
   cursor: default;
}


/* fila − N + dentro de los paneles (botones más grandes: el panel no tiene límite de alto) */


header.reserva-header .reserva-popover-nombre{
   font-family: var(--font-text);
   font-size: 0.9375rem;
   color: var(--black);
}

/* grilla de números */
header.reserva-header .reserva-popover-grilla{
   min-width: 0;
   /* la grilla entra entera: sin el alto máximo (y el scroll) de las listas largas */
   max-height: none;
   overflow: visible;
}
header.reserva-header .reserva-numeros{
   display: grid;
   grid-template-columns: repeat(5, 2.25rem);
   gap: 0.25rem;
}
header.reserva-header .reserva-numero{
   height: 2.25rem;
   background: var(--grey-50);
   font-family: var(--font-text);
   font-size: 0.875rem;
   color: var(--black);
   cursor: pointer;
   transition: background 0.15s ease;
}
header.reserva-header .reserva-numero:hover{
   background: var(--grey-100);
}
header.reserva-header .reserva-numero.reserva-elegido{
   background: var(--gold);
   color: var(--white);
}


/* calendario con el mismo estilo que el popup original */
header.reserva-header .flatpickr-calendar{
   margin-top: 0.75rem;
   width: max-content !important;
   padding: 1.5rem 1.75rem 1.75rem;
   background: var(--white);
   border-radius: 0.625rem;
   box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.15);
}
header.reserva-header .flatpickr-calendar.reserva-hacia-arriba{
   top: auto !important;
   bottom: 100% !important;
   margin-top: 0;
   margin-bottom: 0.75rem;
}
header.reserva-header .flatpickr-calendar:before,
header.reserva-header .flatpickr-calendar:after{
   display: none;
}
header.reserva-header .flatpickr-months{
   position: relative;
}
header.reserva-header .flatpickr-months .flatpickr-prev-month,
header.reserva-header .flatpickr-months .flatpickr-next-month{
   top: -0.375rem;
}
header.reserva-header .flatpickr-days{
   border: 0;
}
/* fechas elegidas (entrada / salida): texto blanco, igual que el botón Reservar
   (el tema lo pone gris oscuro con !important) */
header.reserva-header .flatpickr-day.selected,
header.reserva-header .flatpickr-day.startRange,
header.reserva-header .flatpickr-day.endRange{
   color: var(--white) !important;
}
header.reserva-header .flatpickr-day.inRange{
   background: var(--grey-50);
   border-color: var(--grey-50);
   box-shadow: -5px 0 0 var(--grey-50), 5px 0 0 var(--grey-50);
}

@media (max-width: 1279px) {
   header.reserva-header .form-wrap form{
      gap: 1rem;
   }
   header.reserva-header .form-wrap [type="submit"]{
      padding-inline: 2.5rem;
   }
   header.reserva-header .reserva-desplegable-boton{
      font-size: 0.875rem;
   }
}


/* TARJETAS
   cada campo en su propia caja gris clara, se marca en dorado al usarlo
   ----------------------------- */

header.header.reserva-header .form-wrap form{
   gap: 0.625rem;
}
header.header.reserva-header .form-wrap .field-group{
   background: var(--grey-50); /* #f6f6f4 */
   border: 0.0625rem solid transparent;
   border-radius: 0.375rem;
   padding: 0.5rem 0.875rem 0.375rem;
   transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
header.header.reserva-header .form-wrap .field-group:hover{
   background: var(--grey-100);
}
/* el botón toma la misma altura que las tarjetas */
header.header.reserva-header .form-wrap form{
   align-items: stretch;
}
header.header.reserva-header .form-wrap .field-group:last-child{
   display: flex;
   background: none;
   border: 0;
   padding: 0;
}
header.header.reserva-header .form-wrap label{
   font-size: 0.75rem;   /* 12px */
   letter-spacing: 0.05em;
   color: #566153;   /* el verde del tema (#7f917f) más oscuro, para que se lea mejor */
}
header.header.reserva-header .form-wrap input.c-input,
header.header.reserva-header .form-wrap select.c-select,
header.header.reserva-header .reserva-desplegable-boton{
   border-bottom: 0;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
   background-color: transparent;
}
header.header.reserva-header .form-wrap [type="submit"]{
   border-radius: 0.375rem;
   padding: 0 2.75rem;
   height: auto;
}


/* pantallas chicas (1000 a 1200px): menos relleno para que no se corte "Seleccionar fecha" */
@media (max-width: 1279px) {
   
   header.header.reserva-header .form-wrap form{
      gap: 0.375rem;
   }
   header.header.reserva-header .form-wrap .field-group{
      padding-left: 0.5rem;
      padding-right: 0.5rem;
   }
   header.header.reserva-header .form-wrap [type="submit"]{
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }
}


/* BORDES RECTOS
   sin redondeado, como los botones del resto del sitio
   ----------------------------- */

header.header.reserva-header .form-wrap form,
header.header.reserva-header .form-wrap .field-group,
header.header.reserva-header .form-wrap [type="submit"],
header.header.reserva-header .reserva-desplegable-lista,
header.header.reserva-header .flatpickr-calendar{
   border-radius: 0;
}


/* FOCO Y ERROR
   el campo que se está completando se marca en dorado;
   si se toca Reservar sin fechas, la etiqueta y el texto pasan a un terracota suave (sin bordes rojos)
   ----------------------------- */

header.reserva-header{
   --booking-error: #b0614a;
}

/* título arriba del calendario y de las listas: "Elegí la fecha de entrada", "¿Cuántos adultos?" */
header.reserva-header .reserva-calendario-titulo{
   text-align: center;
   font-family: var(--font-text);
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--grey-600);
   white-space: nowrap;
}
header.reserva-header .reserva-calendario-titulo{
   margin-bottom: 0.875rem;
   text-align: left;
}


header.reserva-header .form-wrap .field-group label{
   transition: color 0.2s ease;
}
header.reserva-header .form-wrap .field-group.reserva-foco label{
   color: var(--brown-dark);
}
header.reserva-header .form-wrap .field-group.reserva-error label,
header.reserva-header .form-wrap .field-group.reserva-error input.c-input::placeholder{
   color: var(--booking-error);
}


/* PANTALLAS DE 1201 A 1279px
   el sitio achica separaciones y textos recién desde 1200px; con el logo fijo
   los campos no entran entre 1201 y 1279px, así que se aplica lo mismo desde 1279px
   ----------------------------- */

@media (min-width: 1201px) and (max-width: 1279px) {
   header.reserva-header .box{
      gap: 1.875rem;
   }
   header.reserva-header .form-wrap select.c-select,
   header.reserva-header .form-wrap input.c-input{
      font-size: 0.875rem;
   }
}


/* TAX FREE EN EL HEADER (al lado del menú)
   cuando el formulario sale del header (menos de 1280px) no se muestra; queda el sello flotante
   ----------------------------- */


/* AL LADO DEL MENÚ (entre Reservar y el menú)
   mismo diseño en todos los anchos; formulario, sello y menú con la misma separación */
header.header.reserva-header .reserva-taxfree{
   display: flex;
   flex-direction: column;
   align-items: center;
   flex-shrink: 0;
   gap: 0.25rem;
   width: 4.75rem;
   text-align: center;
   user-select: none;
}


header.header.reserva-header .box{
   gap: 2rem;
}
/* pantallas chicas: mismo diseño, un poco más apretado para que entre */
@media (max-width: 1279px) {
   header.header.reserva-header .box{
      gap: 1rem;
   }
   header.header.reserva-header .reserva-taxfree{
      width: 4.25rem;
   }
   header.header.reserva-header .form-wrap form{
      gap: 0.625rem;
   }
   header.header.reserva-header .form-wrap [type="submit"]{
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }
}
/* tarjetas: son las que más lugar ocupan, se aprietan un poco más */
@media (max-width: 1279px) {
   header.header.reserva-header .box{
      gap: 0.875rem;
   }
   header.header.reserva-header .reserva-taxfree{
      width: 4rem;
   }
   header.header.reserva-header .form-wrap form{
      gap: 0.375rem;
   }
   header.header.reserva-header .form-wrap .field-group:not(:last-child){
      padding-left: 0.3125rem;
      padding-right: 0.3125rem;
   }
   header.header.reserva-header .form-wrap [type="submit"]{
      padding-left: 1.25rem;
      padding-right: 1.25rem;
   }
   header.header.reserva-header .form-wrap input.c-input,
   header.header.reserva-header .form-wrap select.c-select,
   header.header.reserva-header .reserva-desplegable-boton{
      font-size: 0.8125rem;
   }
}

@media (min-width: 1280px) and (max-width: 1365px) {
   header.header.reserva-header .form-wrap .field-group:not(:last-child){
      padding-left: 0.625rem;
      padding-right: 0.625rem;
   }
}

/* sin formulario (menos de 1280px) no se muestra */
@media (max-width: 1279px) {
   header.header.reserva-header .reserva-taxfree{
      display: none;
   }
}


/* MENOS DE 1280px
   el tema oculta el formulario y muestra el botón "Reservar" de celular recién debajo de 1000px;
   acá se adelanta: de 1280px para arriba, escritorio; debajo, el formulario va fuera del header
   ----------------------------- */

@media (max-width: 1279px) {
   header.header.reserva-header .form-wrap{
      display: none;
   }
   .btn-reservar-mobile{
      display: block;
   }
}
/* logo: tamaño elegido a ojo para cada ancho */
@media (min-width: 1000px) and (max-width: 1279px) {
   header.header.reserva-header figure.logo img{
      width: 6.625rem;   /* 106px */
   }
}


/* PANELES UNIFICADOS
   calendario y grilla con el mismo estilo: misma caja y relleno, mismo título arriba,
   mismo hover y mismo elegido.
   ----------------------------- */

/* caja */
header.reserva-header .flatpickr-calendar,
header.reserva-header .reserva-popover{
   padding: 1.25rem 1.5rem 1.5rem;
}

/* título de arriba */
header.reserva-header .reserva-calendario-titulo{
   margin: 0 0 0.875rem;
   padding: 0;
   text-align: left;
   font-family: var(--font-text);
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--grey-600);
   white-space: nowrap;
}
header.reserva-header .reserva-popover-nombre{
   font-size: 0.875rem;
}

/* hover igual en calendario y grilla */
header.reserva-header .reserva-numero:hover,
header.reserva-header .flatpickr-day:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange):hover{
   background: var(--grey-100);
   border-color: var(--grey-100);
}

/* elegido igual en todos: dorado con texto blanco */
header.reserva-header .reserva-numero.reserva-elegido{
   background: var(--gold);
   color: var(--white);
}


/* DESPLEGABLES ALINEADOS CON EL CALENDARIO
   la lista y los paneles se ubican respecto de la tarjeta (como el calendario), no del texto de adentro:
   abren a la misma distancia debajo de la tarjeta y alineados con su borde izquierdo
   ----------------------------- */
header.reserva-header .form-wrap .field-group .reserva-desplegable{
   position: static;
}


/* VALORES DE LOS CAMPOS: gris muy oscuro en lugar de negro puro (más suave, mismo tono que los días del calendario) */
header.reserva-header .form-wrap input.c-input,
header.reserva-header .form-wrap select.c-select,
header.reserva-header .reserva-desplegable-boton{
   color: var(--grey-800);
}


/* CAMPO ACTIVO: mientras su calendario, lista o panel está abierto, la tarjeta lleva un borde dorado fino
   (las tarjetas ya tienen un borde transparente de 1px, así que no se mueve nada) */
header.header.reserva-header .form-wrap .field-group.reserva-foco{
   /* sutil pero notorio: borde de 1px en un dorado un poco más profundo que el del tema, la tarjeta
      apenas más clara (blanca) y la etiqueta en marrón oscuro (regla de arriba) */
   border-color: #728272;
   background: var(--white);
}


/* CALENDARIO: retoques para que combine con el resto del header
   días cuadrados (como tarjetas, grilla y botones), hoy marcado con un punto dorado,
   rango con franja #f6f6f4, mes en mayúsculas como las etiquetas
   ----------------------------- */

/* encabezado: como el calendario original del sitio ("Octubre" marcado y "2026" fino) */
header.reserva-header .flatpickr-months .flatpickr-month{
   height: 2.125rem;
}
header.reserva-header .flatpickr-current-month{
   top: 0;
   height: 2.125rem;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.35em;
   font-size: 1.125rem;
   line-height: 1;
}
header.reserva-header .flatpickr-current-month .cur-month,
header.reserva-header .flatpickr-current-month input.cur-year{
   margin: 0;
   font-family: var(--font-text);
   font-size: 1.125rem;
   text-transform: none;
   letter-spacing: 0;
   color: var(--grey-900);
}
header.reserva-header .flatpickr-current-month .cur-month{
   font-weight: 700;
}
header.reserva-header .flatpickr-current-month input.cur-year{
   font-weight: 300;
   width: 2.6em;
   height: auto;
   padding: 0;
   line-height: 1;
}
header.reserva-header .flatpickr-current-month .numInputWrapper{
   display: inline-flex;
   align-items: center;
   width: auto;
   height: auto;
}
header.reserva-header .flatpickr-current-month .numInputWrapper span.arrowUp,
header.reserva-header .flatpickr-current-month .numInputWrapper span.arrowDown{
   display: none;
}

/* flechas para cambiar de mes: botones cuadrados con borde, como los − / + de los contadores */
header.reserva-header .flatpickr-months .flatpickr-prev-month,
header.reserva-header .flatpickr-months .flatpickr-next-month{
   top: 0.125rem;
   width: 1.875rem;
   height: 1.875rem;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 0.0625rem solid var(--grey-300);
   background: var(--white);
   transition: border-color 0.15s ease;
}
header.reserva-header .flatpickr-months .flatpickr-prev-month{
   left: 0;
}
header.reserva-header .flatpickr-months .flatpickr-next-month{
   right: 0;
}
header.reserva-header .flatpickr-months .flatpickr-prev-month svg,
header.reserva-header .flatpickr-months .flatpickr-next-month svg{
   width: 0.625rem;
   height: 0.625rem;
   fill: var(--grey-800);
}
header.reserva-header .flatpickr-months .flatpickr-prev-month:hover,
header.reserva-header .flatpickr-months .flatpickr-next-month:hover{
   border-color: var(--gold);
}
header.reserva-header .flatpickr-months .flatpickr-prev-month:hover svg,
header.reserva-header .flatpickr-months .flatpickr-next-month:hover svg{
   fill: var(--grey-800);
}
/* sin meses anteriores para elegir: la flecha no se muestra (antes se veía apagada) */
header.reserva-header .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
header.reserva-header .flatpickr-months .flatpickr-next-month.flatpickr-disabled{
   display: none;
}

/* días de la semana: como las etiquetas de los campos */
header.reserva-header span.flatpickr-weekday{
   font-family: var(--font-text);
   font-size: 0.625rem;
   font-weight: normal;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--grey-500);
}

/* días: cuadrados, sin borde */
header.reserva-header .flatpickr-day{
   border-radius: 0 !important;
   border-color: transparent;
   color: var(--grey-800);
   font-size: 0.875rem;
}
header.reserva-header .flatpickr-day.flatpickr-disabled,
header.reserva-header .flatpickr-day.flatpickr-disabled:hover{
   color: var(--grey-300);
   background: transparent;
   border-color: transparent;
   cursor: default;
}

/* hover: el mismo gris claro de los paneles */
header.reserva-header .flatpickr-day:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange):hover,
header.reserva-header .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange):hover{
   background: var(--grey-100);
   border-color: var(--grey-100);
   color: var(--grey-800);
}

/* hoy: punto dorado debajo del número (en vez del círculo gris) */
header.reserva-header .flatpickr-day.today{
   border-color: transparent;
}
header.reserva-header .flatpickr-day.today:after{
   content: "";
   position: absolute;
   left: 50%;
   bottom: 0.3125rem;
   width: 0.25rem;
   height: 0.25rem;
   margin-left: -0.125rem;
   border-radius: 50%;
   background: var(--gold);
}
header.reserva-header .flatpickr-day.today.selected:after,
header.reserva-header .flatpickr-day.today.startRange:after,
header.reserva-header .flatpickr-day.today.endRange:after{
   background: var(--white);
}

/* entrada / salida: dorado con número blanco, sin las "colitas" redondeadas del tema */
header.reserva-header .flatpickr-day.selected,
header.reserva-header .flatpickr-day.startRange,
header.reserva-header .flatpickr-day.endRange{
   box-shadow: none !important;
}

/* días del medio: franja continua del mismo fondo que las tarjetas */
header.reserva-header .flatpickr-day.inRange{
   background: var(--grey-50);
   border-color: var(--grey-50);
   box-shadow: -5px 0 0 var(--grey-50), 5px 0 0 var(--grey-50);
   color: var(--grey-800);
}

/* año del calendario: solo texto (no se puede hacer clic, escribir ni cambiar con la ruedita) */
header.reserva-header .flatpickr-current-month .numInputWrapper,
header.reserva-header .flatpickr-current-month input.cur-year{
   pointer-events: none;
   cursor: default;
}
header.reserva-header .flatpickr-current-month .numInputWrapper:hover{
   background: transparent;
}


/* RANGO DE FECHAS: franja dorada suave que une entrada y salida
   (#f6f6f4 casi no se distinguía sobre el blanco del calendario)
   ----------------------------- */
header.reserva-header .flatpickr-calendar{
   --booking-range: #e0e4e0; /* el dorado del botón, muy aclarado */
}
header.reserva-header .flatpickr-day.inRange,
header.reserva-header .flatpickr-day.inRange:hover{
   background: var(--booking-range);
   border-color: var(--booking-range);
   box-shadow: -5px 0 0 var(--booking-range), 5px 0 0 var(--booking-range);
   color: var(--grey-900);
}
/* la franja se une con la entrada y la salida solo cuando hay rango al lado */
header.reserva-header .flatpickr-day.startRange:has(+ .flatpickr-day.inRange),
header.reserva-header .flatpickr-day.startRange:has(+ .flatpickr-day.endRange){
   box-shadow: 5px 0 0 var(--booking-range) !important;
}
header.reserva-header .flatpickr-day.inRange + .flatpickr-day.endRange,
header.reserva-header .flatpickr-day.startRange + .flatpickr-day.endRange{
   box-shadow: -5px 0 0 var(--booking-range) !important;
}


/* SEPARACIÓN ENTRE LOS DOS MESES: 24px, con la línea divisoria fina en el medio */
header.reserva-header .flatpickr-calendar.multiMonth .flatpickr-days{
   width: auto !important;
}
header.reserva-header .flatpickr-calendar.multiMonth .dayContainer + .dayContainer{
   margin-left: 0.75rem;
   padding-left: 0.75rem;
   border-left: 0.0625rem solid var(--grey-100);
   box-shadow: none;
}
/* título y días de la semana del segundo mes: misma separación que los números, así quedan alineados */
header.reserva-header .flatpickr-calendar.multiMonth .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer,
header.reserva-header .flatpickr-calendar.multiMonth .flatpickr-month + .flatpickr-month{
   margin-left: 0.75rem;
   padding-left: 0.75rem;
   border-left: 0.0625rem solid transparent;
}
/* título, días de la semana y números de cada mes con el mismo ancho (el de los números en flatpickr) */
header.reserva-header .flatpickr-calendar.multiMonth .flatpickr-month,
header.reserva-header .flatpickr-calendar.multiMonth .flatpickr-weekdaycontainer{
   flex: 0 0 auto;
   width: 307.875px;
   box-sizing: content-box;
}
header.reserva-header .flatpickr-calendar.multiMonth .dayContainer{
   box-sizing: content-box;
}
/* el título del segundo mes se centra sobre sus números (no sobre el espacio de separación) */
header.reserva-header .flatpickr-calendar.multiMonth .flatpickr-month + .flatpickr-month .flatpickr-current-month{
   left: calc(12.5% + 0.375rem);
}


/* "Reservar": muestra un círculo mientras busca (al pasar el mouse y al apretarlo, ver RESERVAR al final) */
header.reserva-header .themeMainButton{
   position: relative;
   flex-direction: column;
   justify-content: center;
}
/* buscando: el texto se va y aparece un círculo girando */
header.reserva-header .themeMainButton.reserva-cargando{
   color: transparent !important;
   pointer-events: none;
}
header.reserva-header .themeMainButton.reserva-cargando:after{
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: 1.125rem;
   height: 1.125rem;
   margin: -0.5625rem 0 0 -0.5625rem;
   border: 0.125rem solid rgba(255, 255, 255, 0.4);
   border-top-color: var(--white);
   border-radius: 50%;
   animation: reserva-spin 0.7s linear infinite;
}
@keyframes reserva-spin{ to { transform: rotate(360deg); } }

/* el calendario y los paneles entran bajando un poco mientras aparecen */
header.reserva-header .flatpickr-calendar.open{
   animation: reserva-panel-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
@keyframes reserva-panel-in{
   from { opacity: 0; translate: 0 -0.5rem; }
   to   { opacity: 1; translate: 0 0; }
}

/* al cambiar de mes, los días entran deslizándose desde el lado de la flecha */
header.reserva-header .flatpickr-innerContainer.reserva-mes-siguiente{
   animation: reserva-slide-next 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
header.reserva-header .flatpickr-innerContainer.reserva-mes-anterior{
   animation: reserva-slide-prev 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes reserva-slide-next{ from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes reserva-slide-prev{ from { opacity: 0; transform: translateX(-1.5rem); } to { opacity: 1; transform: none; } }

/* falta un dato: la tarjeta tiembla un instante */
header.reserva-header .field-group.reserva-temblor{
   animation: reserva-shake 0.4s ease;
}
@keyframes reserva-shake{
   0%, 100% { transform: none; }
   20% { transform: translateX(-0.375rem); }
   40% { transform: translateX(0.375rem); }
   60% { transform: translateX(-0.25rem); }
   80% { transform: translateX(0.25rem); }
}

/* quien prefiere menos movimiento (ajuste del sistema) no ve estas animaciones */
@media (prefers-reduced-motion: reduce){
   header.reserva-header *,
   header.reserva-header *:before,
   header.reserva-header *:after{
      animation: none !important;
   }
}


/* check-in + check-out unidos: con las dos fechas, el hueco entre las tarjetas se llena desde el centro,
   las esquinas de adentro se vuelven rectas y en la unión aparece el chip con las noches */
header.reserva-header .reserva-form .field-group:nth-child(1):after{
   content: "";
   position: absolute;
   top: -0.0625rem;
   bottom: -0.0625rem;
   left: 100%;
   width: calc(var(--reserva-gap, 0px) + 0.125rem);
   margin-left: 0.0625rem;
   background: inherit;
   transform: scaleX(0);
   transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   pointer-events: none;
}
header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(1):after{
   transform: scaleX(1);
}
header.reserva-header .reserva-form .field-group:nth-child(1),
header.reserva-header .reserva-form .field-group:nth-child(2){
   transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-radius 0.3s ease, padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(1){
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}
header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(2){
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   /* !important: en pantallas chicas hay reglas de relleno más específicas que lo pisaban */
   padding-left: var(--reserva-out-pad, 2.25rem) !important;   /* la fecha de salida se corre para dejarle lugar al chip (lo calcula el JS) */
}
/* simétrico: la entrada se alinea a la derecha, así las dos fechas quedan a la misma distancia del chip
   ("5 Nov 2026  [10 noches]  15 Nov 2026") */
header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(1){
   padding-right: var(--reserva-in-pad, 2.25rem) !important;   /* el bloque entero queda centrado en la tarjeta unida (lo calcula el JS) */
}
header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(1) label,
header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(1) input.c-input{
   justify-content: flex-end;
   text-align: right;
}
/* activo dentro de la tarjeta unida: la mitad abierta se vuelve blanca y se levanta un poco,
   en vez del borde dorado que cortaba la unión a la mitad */
header.header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(-n+2).reserva-foco{
   border-color: transparent;
   background: var(--white);
   box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.08);
}
header.reserva-header .reserva-form.reserva-con-noches .field-group:nth-child(1).reserva-foco:after{
   background: var(--grey-50);
}
/* las dos mitades se iluminan juntas al pasar el mouse */
header.reserva-header .reserva-form.reserva-con-noches:has(.field-group:nth-child(-n+2):hover) .field-group:nth-child(-n+2){
   background: var(--grey-100);
}

/* chip de noches: entre las dos fechas; entra apenas después de que se cierra el hueco */
header.reserva-header .reserva-noches-chip{
   position: absolute;
   top: 50%;
   left: var(--reserva-chip-x, calc(var(--reserva-gap, 0px) / -2));
   z-index: 2;
   padding: 0.125rem 0.5rem;
   border-radius: 1rem;
   background: #6f7f6f;   /* el dorado un poco más oscuro, para que resalte sobre las tarjetas */
   color: var(--white);
   font-size: 0.625rem;
   font-weight: 500;
   letter-spacing: 0.02em;
   line-height: 1.4;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   transform: translate(-50%, -50%) scale(0.6);
   transition: opacity 0.2s ease, transform 0.25s ease;
}
header.reserva-header .reserva-form.reserva-con-noches .reserva-noches-chip{
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
   transition: opacity 0.25s ease 0.18s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.4) 0.18s;
}

/* edades debajo de "Adultos" / "Niños" (como en el motor de reservas: "De 17 años o más", "De 4 a 16 años") */
header.reserva-header .reserva-popover-ayuda{
   display: block;
   margin-top: 0.125rem;
   font-family: var(--font-text);
   font-size: 0.75rem;
   letter-spacing: 0;
   text-transform: none;
   color: var(--grey-600);
   white-space: nowrap;
}
/* grilla: nombre + edad arriba de los números, con una línea debajo */
header.reserva-header .reserva-popover-nombre{
   padding-bottom: 0.625rem;
   margin-bottom: 0.75rem;
   border-bottom: 0.0625rem solid var(--grey-100);
}


/* al elegir un rango nuevo, la cinta de Tax Free late una vez */
header.reserva-header .reserva-taxfree.reserva-pulso{
   animation: reserva-tf-pulse 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes reserva-tf-pulse{
   0%, 100% { transform: none; }
   40% { transform: scale(1.12); }
}


/* TAX FREE: CINTA COLGANTE AL LADO DEL MENÚ
   ----------------------------- */

/* brillo que cruza (esquina, etiqueta) */
@keyframes reserva-cinta-brillo{
   from { transform: translateX(-120%) skewX(-20deg); }
   to   { transform: translateX(220%) skewX(-20deg); }
}


/* CINTA COLGANTE: baja desde el borde de arriba; al pasar el mouse se estira y se balancea */
header.header.reserva-header .reserva-taxfree{
   position: relative;
   align-self: stretch;
}

header.header.reserva-header .reserva-cinta{
   display: flex;
   flex-direction: column;
   align-items: center;
   position: absolute;
   top: -1rem;
   left: 50%;
   width: 3rem;
   margin-left: -1.5rem;
   padding: 0.75rem 0 1.125rem;
   background: #568fa2;
   color: var(--white);
   font-family: var(--font-text);
   font-size: 0.625rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   line-height: 1.35;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
   transform-origin: 50% 0;
   transition: padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}
header.header.reserva-header .reserva-taxfree:hover .reserva-cinta{
   padding-top: 1.125rem;
}
@keyframes reserva-cinta-vaiven{
   0%   { transform: rotate(0); }
   25%  { transform: rotate(-5deg); }
   50%  { transform: rotate(3deg); }
   75%  { transform: rotate(-1.5deg); }
   100% { transform: rotate(0); }
}


/* DETALLE AL PASAR EL MOUSE: tarjeta debajo de la cinta; el JS la ubica y la muestra */
header.reserva-header .reserva-cinta-tip{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 20;
   width: 16rem;
   padding: 0.875rem 1rem;
   background: var(--white);
   box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.12);
   font-family: var(--font-text);
   font-size: 0.75rem;
   line-height: 1.45;
   color: var(--grey-800);
   text-align: left;
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-0.375rem);
   transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s;
}
header.reserva-header .reserva-cinta-tip.reserva-visible{
   opacity: 1;
   visibility: visible;
   transform: none;
}
header.reserva-header .reserva-cinta-tip:before{
   content: "";
   position: absolute;
   top: -0.375rem;
   left: var(--arrow-x, 50%);
   width: 0.75rem;
   height: 0.75rem;
   margin-left: -0.375rem;
   background: var(--white);
   transform: rotate(45deg);
}
header.reserva-header .reserva-cinta-tip strong{
   display: block;
   margin-bottom: 0.25rem;
   color: #568fa2;
   font-size: 0.6875rem;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}
header.header.reserva-header .reserva-taxfree{
   cursor: help;
}


/* la tarjeta baja sobre el header de abajo: este queda por encima mientras está abierta */
.reserva-header-wrap header.header.reserva-con-tip{
   z-index: 10000;
}


/* pasaporte y cinta más chicos: ocupan lo mismo que el sello actual (o menos), así el formulario no se aprieta */


header.header.reserva-header .reserva-taxfree{
   width: 2.5rem;
}
header.header.reserva-header .reserva-cinta{
   width: 2.25rem;
   margin-left: -1.125rem;
   padding: 0.5rem 0 0.875rem;
   font-size: 0.5rem;
   letter-spacing: 0.12em;
}
header.header.reserva-header .reserva-taxfree:hover .reserva-cinta{
   padding-top: 0.875rem;
}

/* pasaporte y cinta un poco más grandes: apenas más anchos que el sello actual (los campos pierden 1-2px) */


header.header.reserva-header .reserva-taxfree{
   width: 2.875rem;
}
header.header.reserva-header .reserva-cinta{
   width: 2.625rem;
   margin-left: -1.3125rem;
   padding: 0.625rem 0 1rem;
   font-size: 0.5625rem;
}
header.header.reserva-header .reserva-taxfree:hover .reserva-cinta{
   padding-top: 1rem;
}


/* RESERVAR: el tema lo aclara con opacidad al pasar el mouse; acá no (el efecto está en RESERVAR, al final) */
header.reserva-header .form-wrap .themeMainButton:hover{
   opacity: 1;
}


/* cinta colgante: color del sello (#568fa2) y, al pasar el mouse, baja lo justo para que la tarjeta
   con el detalle salga por debajo del botón Reservar (sin taparlo).
   Para que baje y no se estire, la cinta es más larga y sigue por encima del borde de arriba del header
   (esa parte queda recortada): al bajar, siempre se ve entera desde el borde */
header.header.reserva-header .reserva-taxfree{
   clip-path: inset(-1rem -3rem -10rem -3rem);   /* recorta justo en el borde de arriba del header */
}
header.header.reserva-header .reserva-cinta{
   --ribbon-drop: 1.25rem;   /* 20px: la tarjeta queda apenas debajo de Reservar */
   box-sizing: border-box;
   top: calc(-1rem - var(--ribbon-drop));
   height: calc(3.875rem + var(--ribbon-drop));   /* se ven 62px en reposo */
   background: #568fa2;
   justify-content: flex-end;
   /* baja moviendo "top" (no transform): así no choca con la ondulación de cada 10 segundos, que usa transform */
   transition: top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
header.header.reserva-header .reserva-taxfree:hover .reserva-cinta{
   padding-top: 0.625rem;
   top: -1rem;
}

/* texto de la cinta como en el diseño: "TAX" grande y en negrita, "FREE" más chico, apretado (sin tanto espaciado) */
header.header.reserva-header .reserva-taxfree{
   width: 3.25rem;
}
header.header.reserva-header .reserva-cinta{
   width: 2.875rem;
   margin-left: -1.4375rem;
   padding-bottom: 0.875rem;
   letter-spacing: 0.01em;
   line-height: 1.05;
}
header.header.reserva-header .reserva-cinta span:first-child{
   font-size: 0.9375rem;
   font-weight: 700;
}
header.header.reserva-header .reserva-cinta span:last-child{
   font-size: 0.75rem;
   font-weight: 500;
}
/* corte de abajo más suave, como en el diseño: la V sube solo 8px (antes era un porcentaje del largo y con la cinta más larga quedaba muy profunda) */
header.header.reserva-header .reserva-cinta{
   clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.5rem), 0 100%);
}

/* El header queda pegado arriba al hacer scroll (sticky). En el inicio va debajo del carrusel.
   El contenedor no arma caja propia, así el sticky funciona en toda la página */
.reserva-header-wrap{
   display: contents;
}
.reserva-header-wrap header.header.reserva-header{
   position: sticky;
   top: var(--wp-admin--admin-bar--height, 0px);
   z-index: 10000;
}


/* TAX FREE FLOTANTE (abajo a la izquierda, como el de WhatsApp a la derecha), con el estilo de la cinta:
   "TAX" grande en negrita y "FREE" más chico, en blanco sobre #568fa2. El texto se arma con CSS */
.tax-free-wrap{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 0.4375rem 0.5rem 0.375rem;
   background: #568fa2;
   color: var(--white);
   font-family: var(--font-text);
   text-transform: uppercase;
   line-height: 1.05;
   letter-spacing: 0.01em;
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}
.tax-free-wrap:before{
   content: "Tax";
   font-size: 1.125rem;
   font-weight: 700;
}
.tax-free-wrap:after{
   content: "Free";
   font-size: 0.875rem;
   font-weight: 500;
}


/* Tax Free flotante: recibe el mouse / el toque y muestra la tarjeta con el detalle arriba del sello */
.tax-free-wrap{
   pointer-events: auto;
   cursor: help;
   -webkit-tap-highlight-color: transparent;
   transition: opacity 0.3s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* el sello sube apenas mientras la tarjeta está abierta; el :hover solo con mouse
   (en el celular el primer toque quedaba "en hover" y no llegaba a abrir la tarjeta) */
.tax-free-wrap:focus-visible,
.tax-free-wrap[aria-expanded="true"]{
   transform: translateY(-0.125rem);
   outline: none;
}
@media (hover: hover){
   .tax-free-wrap:hover{
      transform: translateY(-0.125rem);
   }
}
.reserva-taxfree-tip{
   position: fixed;
   z-index: 10001;
   width: 16rem;
   max-width: calc(100vw - 1.25rem);
   padding: 0.875rem 1rem;
   background: var(--white);
   box-shadow: 0 0.375rem 1.5rem rgba(0, 0, 0, 0.15);
   font-family: var(--font-text);
   font-size: 0.75rem;
   line-height: 1.45;
   color: var(--grey-800);
   text-align: left;
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   transform: translateY(0.375rem);
   transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s;
}
.reserva-taxfree-tip.reserva-visible{
   opacity: 1;
   visibility: visible;
   transform: none;
}
/* flechita abajo, apuntando al sello */
.reserva-taxfree-tip:before{
   content: "";
   position: absolute;
   bottom: -0.375rem;
   left: var(--arrow-x, 1.5rem);
   width: 0.75rem;
   height: 0.75rem;
   margin-left: -0.375rem;
   background: var(--white);
   transform: rotate(45deg);
}
.reserva-taxfree-tip strong{
   display: block;
   margin-bottom: 0.25rem;
   color: #568fa2;
   font-size: 0.6875rem;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}


/* Tax Free flotante del mismo tamaño y a la misma distancia del borde que el botón de WhatsApp,
   en cada ancho de pantalla (mismos cortes que el tema: 58px, 50px desde 1200px y 42px desde 999px) */
.tax-free-wrap{
   box-sizing: border-box;
   width: 3.625rem;
   height: 3.625rem;
   padding: 0;
   left: 1.25rem;
   bottom: 1.25rem;
}
.tax-free-wrap:before{ font-size: 1.125rem; }
.tax-free-wrap:after{ font-size: 0.875rem; }
@media (max-width: 1200px){
   .tax-free-wrap{
      width: 3.125rem;
      height: 3.125rem;
   }
   .tax-free-wrap:before{ font-size: 1rem; }
   .tax-free-wrap:after{ font-size: 0.75rem; }
}
@media (max-width: 999px){
   .tax-free-wrap{
      width: 2.625rem;
      height: 2.625rem;
      left: 0.625rem;
      bottom: 4.0625rem;
   }
   .tax-free-wrap:before{ font-size: 0.8125rem; }
   .tax-free-wrap:after{ font-size: 0.625rem; }
}


/* MOBILE (menos de 1280px): el formulario va en un bloque propio debajo del header,
   que no acompaña al scroll (el header sí). El JS mueve el formulario entre el header y este bloque
   ----------------------------- */
header.header.reserva-bloque{
   display: none;
}
@media (max-width: 1279px){
   .reserva-header-wrap header.header.reserva-header.reserva-bloque,
   header.header.reserva-bloque{
      display: block;
      position: relative;   /* no acompaña al scroll (el header de arriba sí) */
      top: auto;
      z-index: 50;   /* los calendarios quedan por encima del contenido de abajo */
      padding: 1.5rem 0 1.75rem;
      border-bottom: 0.0625rem solid var(--grey-100);
      background: var(--white);
   }
   header.header.reserva-header.reserva-bloque .form-wrap{
      display: block;
   }
   /* el botón fijo de abajo no debe tapar el final del formulario si se está usando */
   header.header.reserva-bloque .flatpickr-calendar{
      z-index: 60;
   }
}

/* mobile: los campos del bloque recuperan el relleno y la letra de escritorio
   (las reglas de pantallas chicas los apretaban para que entren en el header, acá hay lugar) */
@media (max-width: 1279px){
   header.header.reserva-header.reserva-bloque .form-wrap .field-group:not(:last-child){
      padding: 0.5rem 0.875rem 0.375rem;
   }
   header.header.reserva-header.reserva-bloque .form-wrap input.c-input,
   header.header.reserva-header.reserva-bloque .form-wrap select.c-select,
   header.header.reserva-header.reserva-bloque .reserva-desplegable-boton{
      font-size: 0.9375rem;
   }
}

/* mobile: los paneles de la columna derecha (niños) abren hacia la izquierda, así no se cortan con el borde de la pantalla */
@media (max-width: 1279px){
   header.header.reserva-bloque .form-wrap .field-group:nth-child(even) .reserva-desplegable-lista{
      left: auto;
      right: 0;
   }
}

/* mobile: el botón "Reservar" fijo se esconde (baja) mientras el formulario está en pantalla */
.btn-reservar-mobile{
   transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
.btn-reservar-mobile.reserva-form-visible{
   transform: translateY(100%);
   opacity: 0;
   pointer-events: none;
}

/* WhatsApp y Tax Free flotantes: siempre abajo; cuando aparece el botón "Reservar" fijo (mobile), suben lo que mide.
   --reserva-floating-offset lo pone el JS (0 o el alto del botón) */
:root{
   --reserva-floating-edge: 1.25rem;
}
@media (max-width: 999px){
   :root{
      --reserva-floating-edge: 0.625rem;
   }
}
.floating-whatsapp,
.tax-free-wrap{
   bottom: calc(var(--reserva-floating-edge) + var(--reserva-floating-offset, 0px)) !important;
   transition: opacity 0.3s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* MOBILE: RESUMEN TOCABLE + HOJA DE PANTALLA COMPLETA PARA RESERVAR
   en el celular el formulario queda oculto (se usa solo para enviar); en su lugar, un resumen que abre la hoja
   ----------------------------- */
.reserva-resumen,
.reserva-hoja{
   display: none;
}
@media (max-width: 899px){
   header.header.reserva-bloque .form-wrap{
      display: none !important;
   }
   .reserva-resumen{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* las dos mitades iguales aunque el texto sea largo */
      gap: 0.5rem;
      width: 100%;
      padding: 0;
      border: 0;
      background: none;
      font-family: var(--font-text);
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
   }
   .reserva-resumen-campo{
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      padding: 0.5rem 0.875rem 0.4375rem;
      background: var(--grey-50);
      border: 0.0625rem solid transparent;
      transition: border-color 0.2s ease;
   }
   .reserva-resumen:active .reserva-resumen-campo{
      border-color: #728272;
   }
   .reserva-resumen-campo small{
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #566153;
   }
   .reserva-resumen-campo span{
      font-size: 0.9375rem;
      color: var(--black);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
   .reserva-resumen-boton.themeMainButton{
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3.125rem;
      background: var(--gold);
      color: var(--white);
      font-size: 1rem;
      letter-spacing: 0.0625rem;
      text-transform: uppercase;
   }

   /* la hoja: sube desde abajo y ocupa toda la pantalla */
   .reserva-hoja{
      display: flex;
      flex-direction: column;
      position: fixed;
      inset: 0;
      z-index: 100000;
      height: 100vh;
      height: 100dvh;
      height: var(--reserva-vh, 100dvh);   /* alto visible real, lo pone el JS (cambia cuando el navegador oculta su barra) */
      bottom: auto;
      background: var(--white);
      font-family: var(--font-text);
      transform: translateY(100%);
      visibility: hidden;
      transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
   }
   .reserva-hoja.reserva-abierto{
      transform: none;
      visibility: visible;
      transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
   }
   .reserva-hoja-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      border-bottom: 0.0625rem solid var(--grey-100);
   }
   .reserva-hoja-title{
      margin: 0;
      font-size: 1.125rem;
      color: var(--black);
   }
   .reserva-hoja-close{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      margin-right: -0.5rem;
      padding: 0;
      border: 0;
      background: none;
      color: var(--black);
      cursor: pointer;
   }
   .reserva-hoja-close svg{
      width: 1.125rem;
      height: 1.125rem;
   }
   .reserva-hoja-body{
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior-y: auto;   /* deja pasar el gesto de bajar para recargar la página */
      padding: 1rem 1.25rem 1.5rem;
   }

   /* resumen de fechas: Check-in · noches · Check-out */
   .reserva-hoja-range{
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
   }
   /* las fechas de arriba solo muestran lo elegido (no son botones): sin caja, con una línea abajo */
   .reserva-hoja-date{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.125rem;
      padding: 0 0 0.375rem;
      border-bottom: 0.125rem solid var(--grey-100);
      text-align: left;
      transition: border-color 0.2s ease;
   }
   .reserva-hoja-date[data-pick="out"]{
      align-items: flex-end;
      text-align: right;
   }
   .reserva-hoja-date small{
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #566153;
   }
   .reserva-hoja-date span{
      font-size: 1rem;
      color: var(--black);
   }
   /* la que falta elegir tiene la línea dorada */
   .reserva-hoja-date.reserva-activo{
      border-bottom-color: var(--gold);
   }
   .reserva-hoja-nights{
      padding: 0.125rem 0.5rem;
      border-radius: 1rem;
      background: #6f7f6f;
      color: var(--white);
      font-size: 0.6875rem;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.4);
   }
   .reserva-hoja-nights.reserva-visible{
      opacity: 1;
      transform: none;
   }

   /* calendario a todo el ancho, días grandes para el dedo */
   .reserva-hoja-cal input{
      display: none;
   }
   .reserva-hoja .flatpickr-calendar.inline{
      position: relative !important;   /* en la hoja va en el flujo, no flotando como en el header */
      top: 0 !important;
      left: 0 !important;
      margin: 0;
      animation: none !important;
      width: 100% !important;
      max-width: none;
      box-shadow: none;
      border: 0;
      font-family: inherit;
   }
   .reserva-hoja .flatpickr-innerContainer,
   .reserva-hoja .flatpickr-rContainer,
   .reserva-hoja .flatpickr-days,
   .reserva-hoja .dayContainer{
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
   }
   .reserva-hoja .flatpickr-months .flatpickr-month{
      height: 2.75rem;
   }
   .reserva-hoja .flatpickr-current-month{
      font-size: 1.0625rem;
      padding-top: 0.625rem;
   }
   .reserva-hoja .flatpickr-weekday{
      font-size: 0.75rem;
      color: var(--grey-600);
   }
   .reserva-hoja .flatpickr-day{
      max-width: none;
      height: 2.875rem;
      line-height: 2.875rem;
      border-radius: 0;
      font-size: 0.9375rem;
   }
   .reserva-hoja .flatpickr-day.inRange{
      background: #e5e9e5;
      border-color: #e5e9e5;
      box-shadow: -5px 0 0 #e5e9e5, 5px 0 0 #e5e9e5;
   }
   .reserva-hoja .flatpickr-day.selected,
   .reserva-hoja .flatpickr-day.startRange,
   .reserva-hoja .flatpickr-day.endRange{
      background: var(--gold);
      border-color: var(--gold);
      color: var(--white) !important;   /* el tema lo pone gris oscuro con !important; blanco como en escritorio */
   }
   .reserva-hoja .flatpickr-day.today:not(.selected){
      border-color: transparent;
      font-weight: 600;
   }

   /* huéspedes con − / + grandes */
   .reserva-hoja-guests{
      margin-top: 1rem;
      border-top: 0.0625rem solid var(--grey-100);
   }
   .reserva-hoja-guest{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.875rem 0;
      border-bottom: 0.0625rem solid var(--grey-100);
   }
   .reserva-hoja-guest-name{
      display: flex;
      flex-direction: column;
   }
   .reserva-hoja-guest-name b{
      font-weight: 400;
      font-size: 1rem;
      color: var(--black);
   }
   .reserva-hoja-guest-name small{
      font-size: 0.75rem;
      color: var(--grey-600);
   }
   .reserva-hoja-stepper{
      display: flex;
      align-items: center;
      gap: 0.75rem;
   }
   .reserva-hoja-stepper button{
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      border: 0.0625rem solid var(--grey-300);
      border-radius: 50%;
      background: var(--white);
      color: var(--black);
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
   }
   .reserva-hoja-stepper button:disabled{
      opacity: 0.35;
      cursor: default;
   }
   .reserva-hoja-stepper output{
      min-width: 1.5rem;
      text-align: center;
      font-size: 1.125rem;
      color: var(--black);
   }

   /* abajo, fijo: un solo botón y la línea de Tax Free */
   .reserva-hoja-foot{
      padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
      border-top: 0.0625rem solid var(--grey-100);
      background: var(--white);
   }
   .reserva-hoja-go.themeMainButton{
      width: 100%;
      height: 3.25rem;
      border: 0;
      background: var(--gold);
      color: var(--white);
      font-family: inherit;
      font-size: 0.9375rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s ease, opacity 0.2s ease;
   }
   .reserva-hoja-go.themeMainButton:disabled{
      background: var(--grey-300);
      cursor: default;
   }
   .reserva-hoja-tf{
      margin: 0.5rem 0 0;
      font-size: 0.6875rem;
      text-align: center;
      color: var(--grey-600);
   }
   .reserva-hoja-tf strong{
      font-weight: 600;
      color: #568fa2;
      letter-spacing: 0.06em;
      text-transform: uppercase;
   }
}

@media (max-width: 899px){
   /* días que no se pueden elegir: el mismo gris que en escritorio */
   .reserva-hoja .flatpickr-day.flatpickr-disabled,
   .reserva-hoja .flatpickr-day.flatpickr-disabled:hover{
      color: var(--grey-300);
   }
   /* resumen de la página: 4 campos en dos columnas y Reservar abajo; las fechas sin elegir, en gris */
   .reserva-resumen-campo span.reserva-vacio{
      color: var(--grey-600);
   }
}

/* celular: el carrusel de portada toma el alto que quede libre para que el bloque de reserva, con su botón,
   se vea sin hacer scroll: hasta su alto original (300px) en celulares altos y nunca menos de 220px.
   svh = alto visible con las barras del navegador; 20rem ≈ header + bloque de reserva + márgenes */
@media (max-width: 768px){
   section.home-hero-carousel{
      padding: 1rem 0;
   }
   section.home-hero-carousel .carousel-wrapper{
      gap: 1rem;
   }
   section.home-hero-carousel .carousel-slide{
      height: clamp(13.75rem, calc(100vh - 20rem), 18.75rem);
      height: clamp(13.75rem, calc(100svh - 20rem), 18.75rem);
   }
   header.header.reserva-bloque{
      padding-top: 1rem;
      padding-bottom: 1.25rem;
   }
}

/* hoja de pantalla completa: los espacios, los días y los botones se achican con el alto de la pantalla
   (dvh = alto visible del celular), para que entre entera sin scroll en casi todos los teléfonos */
@media (max-width: 899px){
   .reserva-hoja-top{
      padding-top: clamp(0.5rem, 1.8dvh, 1rem);
      padding-bottom: clamp(0.5rem, 1.8dvh, 1rem);
   }
   .reserva-hoja-body{
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;   /* si hace falta scroll, se puede hacer arrastrando también sobre el calendario */
      padding-top: clamp(0.625rem, 1.8dvh, 1rem);
      padding-bottom: clamp(0.5rem, 2dvh, 1.5rem);
   }
   .reserva-hoja-range{
      margin-bottom: clamp(0.375rem, 1.6dvh, 1rem);
   }
   .reserva-hoja .flatpickr-day{
      height: clamp(1.75rem, 5.4dvh, 2.875rem);
      line-height: clamp(1.75rem, 5.4dvh, 2.875rem);
   }
   .reserva-hoja .flatpickr-months .flatpickr-month{
      height: clamp(2.25rem, 5dvh, 2.75rem);
   }
   .reserva-hoja .flatpickr-current-month{
      padding-top: clamp(0.375rem, 1.2dvh, 0.625rem);
   }
   .reserva-hoja-guests{
      margin-top: clamp(0.375rem, 1.6dvh, 1rem);
   }
   .reserva-hoja-guest{
      padding-top: clamp(0.375rem, 1.4dvh, 0.875rem);
      padding-bottom: clamp(0.375rem, 1.4dvh, 0.875rem);
   }
   .reserva-hoja-stepper button{
      width: clamp(2.125rem, 5dvh, 2.5rem);
      height: clamp(2.125rem, 5dvh, 2.5rem);
   }
   .reserva-hoja-foot{
      padding-top: clamp(0.5rem, 1.4dvh, 0.75rem);
   }
   .reserva-hoja-go.themeMainButton{
      height: clamp(2.75rem, 6.5dvh, 3.25rem);
   }
}
/* pantallas muy bajas: la línea de Tax Free y la edad de los huéspedes se ocultan para que entre todo */
@media (max-width: 899px) and (max-height: 620px){
   .reserva-hoja-tf,
   .reserva-hoja-guest-name small{
      display: none;
   }
   .reserva-hoja .flatpickr-day{
      height: 1.75rem;
      line-height: 1.75rem;
   }
}

/* el header y el bloque del formulario usan el mismo margen lateral que el resto de la página
   (el tema le da al header 30px en celular y a las secciones 25px) */
@media (max-width: 690px){
   header.header.reserva-header .c-wrap{
      padding: 0 1.5625rem;
   }
}


/* con el texto de arriba del calendario la hoja sigue entrando sin scroll: un poco menos de aire en el resumen de fechas y el mes */
@media (max-width: 899px){
   .reserva-hoja-range{
      margin-bottom: clamp(0.25rem, 1.2dvh, 1rem);
   }
   .reserva-hoja .flatpickr-months .flatpickr-month{
      height: clamp(2rem, 4.6dvh, 2.75rem);
   }
}
@media (max-width: 899px) and (max-height: 620px){
   .reserva-hoja .flatpickr-day{
      height: 1.625rem;
      line-height: 1.625rem;
   }
}

/* botón "Reservar" fijo: igual que el Reservar del formulario (16px, espaciado de 1px y 50px de alto;
   el tema le daba 15px, 2.5px y 55px) */
.btn-reservar-mobile{
   height: 3.125rem;
   padding: 0;
   font-size: 1rem;
   letter-spacing: 0.0625rem;
   line-height: 3.125rem;
}

/* hoja: fechas de arriba en tres pasos, de a uno (data-step en .reserva-hoja-range, lo pone el JS)
   in   → solo Check-in a todo el ancho, "Seleccioná la fecha de check-in"
   out  → solo Check-out a todo el ancho, "Seleccioná la fecha de check-out" (la entrada queda marcada en el calendario)
   done → las dos fechas con las noches en el medio */
@media (max-width: 899px){
   .reserva-hoja-range{
      min-height: 2.875rem;
   }
   .reserva-hoja-range[data-step="in"]{
      grid-template-columns: 1fr;
   }
   .reserva-hoja-range[data-step="out"]{
      grid-template-columns: 1fr;
   }
   .reserva-hoja-range[data-step="in"] .reserva-hoja-nights,
   .reserva-hoja-range[data-step="in"] [data-pick="out"],
   .reserva-hoja-range[data-step="out"] .reserva-hoja-nights,
   .reserva-hoja-range[data-step="out"] [data-pick="in"]{
      display: none;
   }
   /* el paso que se está completando va alineado a la izquierda, como el primero */
   .reserva-hoja-range[data-step="out"] [data-pick="out"]{
      align-items: flex-start;
      text-align: left;
   }
   /* lo que falta elegir: el texto en gris, como un aviso */
   .reserva-hoja-date.reserva-activo span{
      color: var(--grey-600);
      font-size: 0.9375rem;
   }
   /* al pasar de un paso al otro, todo entra suave (las noches tienen su propia entrada con rebote) */
   .reserva-hoja-range.reserva-cambio-paso .reserva-hoja-date{
      animation: reserva-sheet-step 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
}
@keyframes reserva-sheet-step{
   from { opacity: 0; transform: translateY(0.375rem); }
   to   { opacity: 1; transform: none; }
}

/* hoja: el paso y el resumen van en el título de arriba (en lugar de "Elegí tu estadía"),
   así no hace falta la fila de fechas debajo y el calendario sube */
@media (max-width: 899px){
   .reserva-hoja-range{
      display: none;
   }
   .reserva-hoja-title{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.25rem 0.5rem;
      min-width: 0;
      font-size: 1.0625rem;
   }
   .reserva-hoja-title.reserva-cambio-paso .reserva-hoja-title-text{
      animation: reserva-sheet-step 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
   .reserva-hoja-title-nights:empty{
      display: none;
   }
   .reserva-hoja-title-nights{
      padding: 0.125rem 0.5rem;
      border-radius: 1rem;
      background: #6f7f6f;
      color: var(--white);
      font-size: 0.6875rem;
      font-weight: 500;
      white-space: nowrap;
      animation: reserva-sheet-nights 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.4);
   }
}
@keyframes reserva-sheet-nights{
   from { opacity: 0; transform: scale(0.6); }
   to   { opacity: 1; transform: none; }
}

/* hoja: alto de los días calculado por el JS para que el calendario llene la pantalla justo (--reserva-day-h) */
@media (max-width: 899px){
   .reserva-hoja .flatpickr-calendar .flatpickr-day{
      height: var(--reserva-day-h, clamp(1.75rem, 5.4dvh, 2.875rem));
      line-height: var(--reserva-day-h, clamp(1.75rem, 5.4dvh, 2.875rem));
   }
   /* días del mes anterior/siguiente que se ven en los bordes: si son parte de la estadía, la selección
      se ve apagada, así se nota que pertenece a otro mes. Son colores sólidos (el dorado y el beige al 30%
      sobre blanco) y no opacidad, porque con opacidad las sombras que unen los días se superponían y se
      veía una franja más oscura entre uno y otro */
   .reserva-hoja .flatpickr-day.prevMonthDay.selected,
   .reserva-hoja .flatpickr-day.prevMonthDay.startRange,
   .reserva-hoja .flatpickr-day.prevMonthDay.endRange,
   .reserva-hoja .flatpickr-day.nextMonthDay.selected,
   .reserva-hoja .flatpickr-day.nextMonthDay.startRange,
   .reserva-hoja .flatpickr-day.nextMonthDay.endRange{
      /* !important porque style.css pinta estos días de dorado con !important */
      background: #e9ece9 !important;
      border-color: #e9ece9 !important;
      box-shadow: none !important;
      color: #7d8f7d !important;
   }
   .reserva-hoja .flatpickr-day.prevMonthDay.selected.startRange + .endRange:not(:nth-child(7n+1)),
   .reserva-hoja .flatpickr-day.nextMonthDay.selected.startRange + .endRange:not(:nth-child(7n+1)){
      box-shadow: -10px 0 0 #e9ece9 !important;
   }
   .reserva-hoja .flatpickr-day.prevMonthDay.inRange,
   .reserva-hoja .flatpickr-day.nextMonthDay.inRange{
      background: #f8f9f8 !important;
      border-color: #f8f9f8 !important;
      box-shadow: -5px 0 0 #f8f9f8, 5px 0 0 #f8f9f8 !important;
      color: var(--grey-600) !important;
   }
   /* donde se cruzan los dos meses, la sombra de un día no pisa al de al lado con el otro color */
   .reserva-hoja .flatpickr-day.prevMonthDay + .flatpickr-day.inRange:not(.prevMonthDay){
      box-shadow: 5px 0 0 #e5e9e5 !important;
   }
   .reserva-hoja .flatpickr-day.prevMonthDay + .flatpickr-day.endRange:not(.prevMonthDay){
      box-shadow: none !important;
   }
   .reserva-hoja .flatpickr-day:not(.nextMonthDay) + .flatpickr-day.nextMonthDay.inRange{
      box-shadow: 5px 0 0 #f8f9f8 !important;
   }
   .reserva-hoja .flatpickr-day:not(.nextMonthDay) + .flatpickr-day.nextMonthDay.endRange{
      box-shadow: none !important;
   }
}

/* resumen del título: fechas y flecha centradas en la misma línea */
@media (max-width: 899px){
   .reserva-hoja-title-text{
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
   }
   .reserva-hoja-arrow{
      flex-shrink: 0;
      width: 0.9375rem;
      height: 0.9375rem;
      color: var(--grey-600);
   }
}

/* hoja: en celulares muy altos, el calendario arriba y los huéspedes abajo, junto al botón (sin hueco al final) */
@media (max-width: 899px){
   .reserva-hoja-body{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }
}

/* hoja: "Buscar" con el mismo efecto de carga que el Reservar del formulario */
@media (max-width: 899px){
   .reserva-hoja-go.themeMainButton{
      position: relative;
   }
   .reserva-hoja-go.themeMainButton.reserva-cargando,
   .reserva-hoja-go.themeMainButton.reserva-cargando:disabled{
      color: transparent;
      background: var(--gold);
      cursor: default;
   }
   .reserva-hoja-go.themeMainButton.reserva-cargando:after{
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1.125rem;
      height: 1.125rem;
      margin: -0.5625rem 0 0 -0.5625rem;
      border: 0.125rem solid rgba(255, 255, 255, 0.4);
      border-top-color: var(--white);
      border-radius: 50%;
      animation: reserva-spin 0.7s linear infinite;
   }
}

/* hoja de pantalla completa abierta: la página de atrás no se mueve (ni scroll ni el rebote del celular);
   la clase la pone el JS al abrir, con la página ya arriba de todo. Lo de adentro de la hoja sí puede moverse */
html.reserva-hoja-abierta,
html.reserva-hoja-abierta body{
   overflow: hidden !important;
   overscroll-behavior: none;
}
html.reserva-hoja-abierta body{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
}
html.reserva-hoja-abierta .reserva-hoja{
   touch-action: pan-y;
   overscroll-behavior: contain;
}

/* hoja de pantalla completa: solo se ven los días del mes que se está mirando; los del mes anterior y siguiente
   quedan como lugar vacío (la grilla no cambia de forma ni de alto entre meses) */
@media (max-width: 899px){
   .reserva-hoja .flatpickr-day.prevMonthDay,
   .reserva-hoja .flatpickr-day.nextMonthDay{
      visibility: hidden;
      pointer-events: none;
   }
}

/* mientras carga la página, el botón "Reservar" fijo no se ve hasta que el JS decide si va (clase reserva-lista);
   sin animación hasta entonces, así no se lo ve bajar al cargar si arranca escondido */
@media (max-width: 1279px){
   html:not(.reserva-lista) .btn-reservar-mobile{
      visibility: hidden;
      transition: none;
   }
}

/* tablet (900 a 1279px): el formulario debajo del header tiene todo el ancho, así que "Reservar" no se aprieta
   como en el header: ocupa más o menos lo que una tarjeta de fecha, con la letra del Reservar de escritorio */
@media (min-width: 900px) and (max-width: 1279px){
   header.header.reserva-header.reserva-bloque .form-wrap .field-group:last-child{
      flex: 0 0 clamp(10rem, 18%, 14rem);
   }
   header.header.reserva-header.reserva-bloque .form-wrap [type="submit"],
   header.header.reserva-header.reserva-bloque .form-wrap [type="submit"]{
      width: 100%;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      font-size: 1rem;
      letter-spacing: 0.0625rem;
   }
}

/* RESERVAR: turquesa con un degradé que corre sin parar, para que llame la atención (sin sombra: no la quieren);
   más espacio entre letras. Al pasar el mouse sube 1px y el color se aclara apenas (sutil: el resplandor sigue igual);
   al apretarlo se hunde y se achica un pelo.
   Vale para el del formulario, el del resumen del celular, el "Reservar" fijo y el "Buscar" de la hoja.
   (translate y scale sueltos, no transform: así no pisan el transform que esconde el botón fijo) */
:root{
   --reserva-cta-dark: #4d7341;   /* punto medio entre los verdes del PDF (#586e52 / #698a60 / #83ad77: se veía plano) y una versión más fuerte (#447632 / #5e9d43 / #86c85b: demasiado llamativa) */
   --reserva-cta: #629451;
   --reserva-cta-light: #82ba69;
}
/* el degradé (oscuro → claro → oscuro) se repite y corre siempre hacia la derecha a velocidad pareja:
   con el fondo al 200%, mover la posición de 200% a 0% es correrlo exactamente un tramo, así la vuelta no se nota */
@keyframes reserva-cta-blend{
   from{ background-position: 200% 50%; }
   to{ background-position: 0% 50%; }
}
/* además, el ángulo del degradé se balancea apenas (de 76° a 104°, ida y vuelta) en 9 segundos: con un tiempo distinto
   al del recorrido (6 s), las dos cosas casi nunca coinciden igual y el movimiento no se ve repetitivo.
   Sin soporte para @property queda derecho (90°), como antes */
@property --reserva-cta-angulo{
   syntax: "<angle>";
   inherits: false;
   initial-value: 90deg;
}
@keyframes reserva-cta-giro{
   from{ --reserva-cta-angulo: 76deg; }
   to{ --reserva-cta-angulo: 104deg; }
}
header.header.reserva-header .form-wrap .themeMainButton[type="submit"],
header.header.reserva-header.reserva-bloque .form-wrap .themeMainButton[type="submit"],
.reserva-resumen .reserva-resumen-boton.themeMainButton,
a.btn-reservar-mobile,
.reserva-hoja .reserva-hoja-go.themeMainButton:not(:disabled),
.reserva-hoja .reserva-hoja-go.themeMainButton.reserva-cargando{
   background-color: var(--reserva-cta);
   background-image: linear-gradient(var(--reserva-cta-angulo), var(--reserva-cta-dark) 0%, var(--reserva-cta-light) 50%, var(--reserva-cta-dark) 100%);
   background-size: 200% 100%;
   background-repeat: repeat-x;
   animation: reserva-cta-blend 6s linear infinite, reserva-cta-giro 9s ease-in-out infinite alternate;
   color: var(--white);
   font-size: 1.03125rem;
   letter-spacing: 0.2em;
   text-indent: 0.2em;   /* el espaciado queda también después de la última letra: así el texto sigue centrado */
   transition: translate 0.25s cubic-bezier(0.25, 1, 0.33, 1), scale 0.12s ease, filter 0.25s ease;
}
/* botón fijo: su entrada (sube desde abajo y aparece) también tiene transición. La regla de arriba la reemplazaba
   (solo animaba el toque) y el botón aparecía de golpe */
a.btn-reservar-mobile{
   transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease,
      translate 0.25s cubic-bezier(0.25, 1, 0.33, 1), scale 0.12s ease, filter 0.25s ease;
}
.reserva-hoja .reserva-hoja-go.themeMainButton.reserva-cargando{
   color: transparent;
}
/* sin sombra: el tema le pone una negra al Reservar fijo con !important */
a.btn-reservar-mobile{
   box-shadow: none !important;
}
@media (hover: hover){
   header.header.reserva-header .form-wrap .themeMainButton[type="submit"]:hover,
   header.header.reserva-header.reserva-bloque .form-wrap .themeMainButton[type="submit"]:hover,
   .reserva-resumen .reserva-resumen-boton.themeMainButton:hover,
   a.btn-reservar-mobile:hover,
   .reserva-hoja .reserva-hoja-go.themeMainButton:not(:disabled):hover{
      translate: 0 -0.0625rem;
      filter: brightness(1.04);
   }
}
header.header.reserva-header .form-wrap .themeMainButton[type="submit"]:active,
header.header.reserva-header.reserva-bloque .form-wrap .themeMainButton[type="submit"]:active,
.reserva-resumen .reserva-resumen-boton.themeMainButton:active,
a.btn-reservar-mobile:active,
.reserva-hoja .reserva-hoja-go.themeMainButton:not(:disabled):active{
   translate: 0 0.0625rem;
   scale: 0.97;
   filter: brightness(0.94);
   transition-duration: 0.08s;
}
@media (prefers-reduced-motion: reduce){
   header.header.reserva-header .form-wrap .themeMainButton[type="submit"],
   header.header.reserva-header.reserva-bloque .form-wrap .themeMainButton[type="submit"],
   .reserva-resumen .reserva-resumen-boton.themeMainButton,
   a.btn-reservar-mobile,
   .reserva-hoja .reserva-hoja-go.themeMainButton:not(:disabled){
      animation: none;
      background-position: 50% 50%;
   }
}

/* "Buscar" de la hoja con las fechas elegidas: dos líneas, "Buscar" con el estilo de Reservar y debajo, más chico,
   las noches y los huéspedes (en minúsculas y sin el espaciado amplio, para que entre siempre) */
.reserva-hoja .reserva-hoja-go.themeMainButton{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.125rem;
   height: clamp(3.25rem, 7.5dvh, 3.75rem);   /* más alto para las dos líneas; siempre igual, así el calendario no salta al elegir */
   line-height: 1.15;
}
.reserva-hoja .reserva-hoja-go-detalle{
   font-size: 0.75rem;
   letter-spacing: 0.04em;
   text-indent: 0;
   text-transform: none;
   opacity: 0.92;
}

/* MENÚ: las tres rayas en SVG, pegadas a los píxeles de la pantalla (crispEdges) para que tengan siempre el mismo grosor.
   Al pasar el mouse, la del medio y la de abajo se acortan hacia la derecha, una después de la otra, y quedan escalonadas */
header.reserva-header .reserva-menu svg{
   display: block;
   width: 1.25rem;
   height: 0.6875rem;
   overflow: visible;
   shape-rendering: crispEdges;
}
header.reserva-header .reserva-menu-raya{
   fill: var(--grey-700);
   transform-box: fill-box;
   transform-origin: right center;
   transition: transform 0.45s cubic-bezier(0.25, 1, 0.33, 1);
}
@media (hover: hover){
   header.reserva-header .reserva-menu:hover .reserva-menu-raya:nth-child(2){
      transform: scaleX(0.65);
      transition-delay: 0.04s;
   }
   header.reserva-header .reserva-menu:hover .reserva-menu-raya:nth-child(3){
      transform: scaleX(0.35);
      transition-delay: 0.08s;
   }
}
header.reserva-header .reserva-menu:focus-visible .reserva-menu-raya:nth-child(2){
   transform: scaleX(0.65);
}
header.reserva-header .reserva-menu:focus-visible .reserva-menu-raya:nth-child(3){
   transform: scaleX(0.35);
}

/* PÁGINAS INTERNAS: abajo de 1280px no hay bloque con el formulario, solo el botón "Reservar" flotante.
   En el celular abre la hoja; en tablets despliega el formulario en una fila debajo del header (top lo pone js/reserva.js) */
@media (max-width: 1279px){
   header.header.reserva-bloque.reserva-bloque-interno{
      display: none !important;
   }
   header.header.reserva-bloque.reserva-bloque-interno.reserva-desplegado{
      display: block !important;
      position: fixed !important;
      left: 0;
      width: 100%;
      z-index: 9999;
   }
}

/* botón "Reservar" flotante: js/reserva.js lo ubica justo antes del footer, así flota abajo y al llegar al footer se detiene.
   Después sube con el footer hasta tocar el header, y ahí queda pegado debajo del header (nunca se va de la pantalla).
   --reserva-header-h lo pone el JS. Hasta que el JS lo mueve sigue fixed (y oculto), para que no ocupe lugar arriba de la página */
@media (max-width: 1279px){
   html.reserva-lista .btn-reservar-mobile{
      position: sticky;
      bottom: env(safe-area-inset-bottom, 0px);
      top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--reserva-header-h, 0px));
   }
   /* el tema le dejaba al footer 52px abajo para el botón fijo; ahora el botón frena antes del footer y quedaba una franja blanca */
   html.reserva-lista footer.footer{
      padding-bottom: 0;
   }
}

/* WhatsApp y Tax Free: js/reserva.js los pone en este contenedor justo antes del footer. Flotan abajo y al llegar al footer
   se detienen, sin desaparecer. Hasta que el JS los mueve siguen fixed, en el mismo lugar */
.reserva-flotantes{
   position: sticky;
   bottom: env(safe-area-inset-bottom, 0px);
   height: 0;
   z-index: 9999;
}
.reserva-flotantes .floating-whatsapp,
.reserva-flotantes .tax-free-wrap{
   position: absolute;
}

/* la barra de gestos del teléfono: al ocultarse la barra del navegador la página llega hasta el borde de la pantalla.
   El botón flota arriba de esa barra (safe-area, con viewport-fit=cover en header.php) y el espacio se completa con una franja
   blanca fija. El footer pasa por encima de la franja: así, cuando el botón se detiene, queda pegado al footer */
@media (max-width: 1279px){
   html.reserva-lista body:has(.btn-reservar-mobile:not(.reserva-form-visible))::after{
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: env(safe-area-inset-bottom, 0px);
      background: var(--white);
      z-index: 997;
   }
   footer.footer{
      position: relative;
      z-index: 998;
   }
}
/* con el teléfono acostado, que el contenido no quede debajo de la cámara */
body{
   padding-left: env(safe-area-inset-left, 0px);
   padding-right: env(safe-area-inset-right, 0px);
}

/* nunca scroll horizontal: si algo se sale por los costados (por ejemplo al cambiar el ancho de la ventana), se corta.
   clip y no hidden: hidden rompe el header y el botón "Reservar" pegados (sticky) */
html,
body{
   overflow-x: clip;
}