/* 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: 9.25rem;
   }
}

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: #6f655a;   /* el marrón del tema (#a39789) 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: debajo de 1000px manda el tema (igual que el inicio: 120px y 100px en celular, y más chico al bajar);
   entre 1000 y 1279px, el tamaño con el que se ve en el inicio a esos anchos (~130px) */
@media (min-width: 1000px) and (max-width: 1279px) {
   header.header.reserva-header figure.logo img{
      width: 8.125rem;
   }
}


/* 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: #c2b188;
   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: #efe9db; /* 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: #bfae84;   /* 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: #c2b188;
   }
   .reserva-resumen-campo small{
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #6f655a;
   }
   .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: #6f655a;
   }
   .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: #bfae84;
      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: #f6efde;
      border-color: #f6efde;
      box-shadow: -5px 0 0 #f6efde, 5px 0 0 #f6efde;
   }
   .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: #bfae84;
      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: #f1ece1 !important;
      border-color: #f1ece1 !important;
      box-shadow: none !important;
      color: #c9bd9f !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 #f1ece1 !important;
   }
   .reserva-hoja .flatpickr-day.prevMonthDay.inRange,
   .reserva-hoja .flatpickr-day.nextMonthDay.inRange{
      background: #fdfbf6 !important;
      border-color: #fdfbf6 !important;
      box-shadow: -5px 0 0 #fdfbf6, 5px 0 0 #fdfbf6 !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 #f6efde !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 #fdfbf6 !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: #3f9c99;
   --reserva-cta: #48c0c4;
   --reserva-cta-light: #5dd6dc;
}
/* 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;
}
.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.
   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);
   }
}

/* 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);
}