@charset "UTF-8";
.neo_pug_defaultlp {
  width: 1170px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 100px;
}

.pug_quantity {
  padding: 10px 20px 10px 15px;
  font-size: 18px;
}

.neo_np_preview_tax {
  font-size: 50%;
  opacity: 0.4;
}

.neo_pug_valid_date {
  padding-bottom: 40px;
  text-transform: uppercase;
  font-size: 16px;
  opacity: 0.4;
}

.neo_puglp_image_paceholder {
  width: 100%;
  height: 100%;
  background: #eee;
  font-size: 10em;
  color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  margin-bottom: 20px;
}

#promoLp,
.promo-lp,
.defaultPromoLpHide,
.detallepromo {
  display: none !important;
}

.pug_available_for_arrival {
  font-weight: bold;
}

.pug_loading_inventory,
.pug_no_inventory {
  background: rgba(0, 0, 0, 0.07) !important;
}

.pug_no_inventory {
  color: rgba(0, 0, 0, 0.2) !important;
}

.pug_only_available_for_departure:not(.nextMonthDay, .prevMonthDay) {
  color: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.flatpickr-calendar {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4) !important;
}

.pug_highlighted,
.flatpickr-day.pug_highlighted,
.flatpickr-day.pug_highlighted_selected,
.pug_highlighted_selected {
  background: #2196f3 !important;
  color: white !important;
  border: none !important;
}

.flatpickr-day.pug_highlighted_selected,
.pug_highlighted_selected {
  background: #0376d4 !important;
}

.pug_low_inventory_alert {
  position: absolute;
  bottom: 0.2em;
  right: 0.2em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 11px;
  color: red;
}

/* Paquete (pug.Type = 8) --------------------------------------------------------------------
   Todo el bloque de compra vive en UNA tarjeta (.pug_package_card) con secciones en el orden en
   que el huesped decide: que incluye -> quienes viajan -> cuando (y cuantas unidades) -> cuanto
   -> continuar. El <select> de Cantidad y el precio se emiten DENTRO de la tarjeta
   (pug_package_form.php), asi que no hace falta ningun hack de `order`.

   Todo esta scopeado bajo .pug_package_*: el voucher y los otros tipos no se tocan.

   Los +/- y el input de los contadores reusan las clases del selector de huespedes del motor
   (.neo_button_partyselector, .neo_partyselector_quantity), que traen color y tamano tematizados
   por POS desde core/css_themecolor.php. Lo que falta aca es el LAYOUT, porque esa parte vive en
   el <style> inline de party_type_simulator.php y esta landing no lo carga.

   Sin colores propios: superficie neutra + el primary del POS solo en el CTA y en los +/-, que ya
   lo traen del tema. Asi la tarjeta se ve igual de bien en cualquier reseller. */
.pug_package_card {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.pug_package_section {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* UNA sola etiqueta para toda la pagina: 13px / 600 / .02em / .55. Nombra lo que sigue, sea un control
   ("Cantidad"), un bloque ("Medios de pago", "Ademas incluye", "Servicios") o un valor en la misma linea
   ("Tarifa:"). Antes habia cuatro variantes y tres se veian juntas en el footer: se leia como un error.

   `.pug_package_total_label` queda aparte a proposito: "Precio total" no es andamiaje, es el encabezado
   de la fila del precio y pesa como tal. */
.pug_package_label,
.pug_package_sublabel,
.pug_package_payments_label,
.pug_package_rate_label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.55);
}

.pug_package_label,
.pug_package_payments_label {
  display: block;
  margin-bottom: 8px;
}

/* .55 y no .45: a 12px, rgba(0,0,0,.45) sobre blanco queda en ~3.9:1 y no llega al 4.5:1 de
   WCAG AA. Estos textos llevan informacion real (los rangos de edad, las noches). */
.pug_package_hint,
.pug_package_party_hint {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
}

.pug_package_hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0 0;
}

.pug_package_party_hint {
  margin-top: 2px;
}

/* --- Tarjeta 1: la habitacion (fotos a la izquierda, informacion a la derecha) ---
   Misma anatomia que las tarjetas de categoria del motor. Son DOS tarjetas y no una larga porque
   responden dos preguntas: esta dice QUE ES lo que se compra, la de abajo es el formulario. */
.pug_package_room_card {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: stretch;
}

/* Centrada VERTICALMENTE: cuanta info tiene esta columna lo decide el hotel (un establecimiento con la
   descripcion vacia y 3 amenities llena la mitad de lo que mide la foto). Alineada arriba, todo el aire
   quedaba junto abajo y se leia como que faltaba algo; centrada, el mismo aire se reparte y se lee como
   margen. Con contenido de sobra el centrado no hace nada. */
.pug_package_room_info {
  padding: 18px 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La galeria es el partial del motor (cart_hotel_v8/includes/sku_gallery.php) y su CSS vive en el
   modulo del carrito, que esta landing NO carga. Lo unico que hace falta es que llene la columna:
   el partial pone la altura en un style inline, asi que hay que pisarla con !important. */
.pug_package_room_photos {
  position: relative;
  /* 200 y no 240: el alto de la tarjeta es el maximo entre este minimo y el contenido de la columna, asi
     que un hotel con poca info cargada daba una tarjeta alta con la mitad vacia. Con 200 esa tarjeta
     queda compacta, y cuando hay contenido de verdad la foto crece con el (height: 100%). */
  min-height: 200px;
  background: rgba(0, 0, 0, 0.04);
}

.pug_package_room_photos .neo_cart_gallery,
.pug_package_room_photos [class*="px-auto-slider-container"] {
  height: 100% !important;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.pug_package_room_photos .px-auto-slider-slide {
  height: 100% !important;
}

/* El modal del lightbox lo mueve el propio partial al <body>, asi que no hereda nada de aca. */
/* --- Encabezado de la habitacion: eyebrow + titulo ---
   Dos renglones, como las tarjetas de categoria del motor pero con la estadia arriba: "5 noches en"
   (chico y gris) + el NOMBRE de la categoria como titulo. El nombre identifica lo que se compra; las
   noches lo califican. */
.pug_package_stay_eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.7);
}

.pug_package_stay_title {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.pug_package_stay_sub {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 4px;
}

/* Extras del paquete: subseccion propia (es lo que el hotelero armo para ESTE paquete). En filas y
   no en chips porque son texto libre, de largo arbitrario. */
.pug_package_sublabel {
  display: block;
  margin: 16px 0 6px;
}

.pug_package_extras {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pug_package_extras > li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  font-size: 14px;
  line-height: 1.5;
  /* Reparte el corte de linea para que un extra largo no termine con una palabra sola en el ultimo
     renglon (se veia un "SADA" huerfano). Donde no esta soportado, se ignora. */
  text-wrap: pretty;
}

.pug_package_extras > li > i {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

/* NO se oculta la descripcion de la tarjeta cuando se abre el detalle.
   Estuvo, con un `:has()`, para no repetir el texto — y producia un SALTO: el parrafo desaparecia de
   arriba y reaparecia abajo. La tarjeta muestra un RESUMEN y el detalle es la FICHA COMPLETA (nombre +
   descripcion + capacidad + servicios), igual que la tarjeta de categoria del motor y su modal: que el
   resumen se repita en la ficha no es un duplicado. No volver a esconder nada al abrir. */

/* "Ver mas" (descripcion recortada) y "Mas" (resto de los servicios): el MISMO control, con el mismo
   look, y los dos abren el detalle de abajo. Es lo que hace la tarjeta del motor, que tiene sus
   "Ver Mas ->" y "Mas ->" apuntando a su modal. */
.pug_package_more_link {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pug_package_more_link > span,
.pug_package_more_link {
  text-decoration: none;
}

.pug_package_more_link:hover {
  text-decoration: underline;
}

.pug_package_more_link > i {
  font-size: 15px;
}

/* Tira corta de servicios en la columna, en DOS columnas como el motor. Con la lista completa la
   columna crecia sin techo; sin ninguno quedaba medio vacia al lado de una foto de 280px. */
.pug_package_room_chips {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.pug_package_room_chips > li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
}

.pug_package_room_chips > li > i {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

/* Una etiqueta larga ("Secador de cabello y amenities") no puede empujar la columna: se recorta con
   puntos suspensivos y el texto completo queda en el `title` y en el detalle. */
.pug_package_room_chips > li > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La tira NO lleva indicador de "+N mas". Se probo de las dos formas y las dos molestan: como boton
   debajo de la lista quedaban dos controles pegados apuntando al mismo destino, y como celda de la
   grilla se lee como un servicio mas (misma posicion y tamano que los otros items, el ojo lo cuenta
   entre ellos). El unico control es "Ver detalles de la habitacion", a lo ancho y siempre visible. */

/* Ver detalles de la habitacion: colapsado por defecto para que la columna siga midiendo lo que las
   fotos. Adentro va lo mismo que el modal del motor (descripcion completa + Capacidad + Servicios),
   reusando sus partials. */
.pug_package_room_more {
  /* A lo ancho de la tarjeta (debajo de la foto y de la info): en la columna derecha, abierto,
     estiraba la tarjeta y dejaba media foto de vacio al lado. */
  grid-column: 1 / -1;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* El padding vive en el `<summary>` y en el cuerpo, NO en el `<details>`: ahi dejaba un anillo muerto
   de 14/20px alrededor del rotulo —parte del control a la vista, inerte al click—. Asi el area
   clickeable es la franja completa, y el click sigue sin extenderse a la ficha que se despliega (que
   por eso se puede seleccionar y copiar).

   `user-select: none` porque el rotulo es un CONTROL: sin eso, un doble click selecciona "Ver" en vez
   de abrir. */
.pug_package_room_more > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  -webkit-user-select: none;
  user-select: none;
}

.pug_package_room_more[open] > summary {
  padding-bottom: 0;
}

.pug_package_room_more > summary::-webkit-details-marker {
  display: none;
}

.pug_package_room_more > summary > i {
  transition: transform 0.2s ease-out;
  color: rgba(0, 0, 0, 0.45);
}

/* "y 9 servicios mas": la señal de que la tira de arriba esta cortada. La descripcion recortada avisa
   sola (termina en "..."), la lista de servicios no. Va en la barra —o sea EN el control— y no en la
   grilla, porque ahi cualquier cosa se lee como un servicio mas. Tono tenue y peso normal para que el
   rotulo siga mandando. */
.pug_package_room_more_count {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
}

.pug_package_room_more[open] > summary > i {
  transform: rotate(180deg);
}

.pug_package_room_more_body {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
  /* 16 y no 10: el rotulo del desplegable es un CONTROL y lo que sigue es contenido; con 10px se leian
     como un titulo y su subtitulo. */
  margin-top: 16px;
  /* El padding lateral e inferior lo pone el cuerpo y no el `<details>`, para que el del rotulo sea
     area clickeable (ver arriba). */
  padding: 0 20px 14px;
}

/* Capacidad y Servicios comparten la MISMA grilla (`pug_package_feature_grid`), y por eso la
   Capacidad NO sale del partial `sku_distribution.php` del motor: ese emite filas de ancho completo
   con iconos de 20px y margenes del carrito, asi que al lado de la grilla de Servicios quedaban dos
   items sueltos con el doble de aire. El dato es el mismo (`pxPackageCapacityLines()` reusa
   `findMaxs()` y la misma frase); lo que cambia es el markup.

   Filas de un renglon, icono chico, alineadas al centro y columnas que se acomodan solas: las dos
   listas se leen como una sola ficha. */
.pug_package_feature_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px 18px;
}

.pug_package_feature_grid > li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}

.pug_package_feature_grid > li > i {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

/* CAPACIDAD: filas de ancho completo, una por renglon.
   Una de sus filas es la lista de configuraciones de cama, y hay categorias con DIECIOCHO ("4 singles +
   Sofa Cama Doble", "QUEEN + CUCHETA + DIVAN CAMA"...): en una celda de la grilla de 3 columnas daba un
   parrafo de 15 renglones y dejaba la fila de al lado centrada contra un bloque de 300px. A lo ancho
   entran siempre (~380 caracteres son 3 renglones) y NO hace falta recortar, ni un `title`, ni un toggle
   para ver el resto — todo eso estuvo y era maquinaria para pelear con el layout.

   El alto esta acotado por construccion: Capacidad tiene como maximo 3 filas (ocupacion, camas, cama
   extra) y no hay una cuarta fuente en la respuesta de la categoria. */
.pug_package_feature_stacked {
  grid-template-columns: minmax(0, 1fr);
}

/* Con varios renglones el icono va arriba, no centrado contra el bloque. */
.pug_package_feature_stacked > li {
  align-items: flex-start;
}

.pug_package_feature_stacked > li > i {
  /* Alinea el icono con la primera linea del texto (line-height 1.45 sobre 13px). */
  margin-top: 1px;
}

.pug_package_room_more_body i {
  color: rgba(0, 0, 0, 0.45);
}

/* El primer subtitulo del desplegable ya tiene el aire del propio desplegable arriba. */
.pug_package_room_more_body > .pug_package_sublabel:first-child {
  margin-top: 0;
}

/* La ficha NO abre con el nombre de la habitacion. Estuvo, copiando al modal del motor, y molestaba por
   una diferencia de fondo: el modal del motor TAPA la tarjeta y esta ficha no. El nombre quedaba a tres
   renglones del titulo de la tarjeta, en el mismo viewport y con el mismo peso que el rotulo del
   desplegable de arriba: los tres se leian como un encabezado repetido. */
.pug_package_room_more_desc {
  margin-bottom: 4px;
}

/* Descripcion de la categoria: doble recorte (220 chars server-side + 3 lineas aca). Sin el clamp,
   una descripcion corta pero con una palabra larguisima igual rompe el alto de la columna. */
/* El selector es compuesto a proposito: los temas de reseller pintan los `p` con el color de marca y la
   descripcion salia en marron. Una clase sola (0,1,0) pierde contra cualquier `#wrap p`. */
.pug_package_room_info p.pug_package_room_desc {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tarjeta 2: lo que agrega el paquete. A lo ancho y en dos columnas antes de crecer para abajo —
   con 6 extras en la columna de la habitacion la tarjeta quedaba al doble del alto de la galeria. */
.pug_package_extras_card {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  padding: 18px 20px;
  margin-bottom: 16px;
}

/* Columnas CSS y NO grid. En una grilla las filas se ALINEAN: un extra de tres renglones estira su fila
   entera y el vecino corto queda arriba, con el resto de la fila en blanco — un hueco de dos renglones
   en medio de la lista. Con `columns` el contenido FLUYE: cada item ocupa lo que necesita, el de al lado
   no se entera, y el navegador equilibra el alto de las dos columnas solo. Nunca hay hueco interno; a lo
   sumo una columna termina antes que la otra, que es como se lee cualquier lista a dos columnas.

   `column-width` (320px) y no `column-count`: en angosto cae a una sola columna sin media query, y con
   un extra largo esa columna es el ancho completo de la tarjeta — donde una frase de 90 caracteres entra
   en un renglon y medio en vez de tres. El `2` la topea: con 3 columnas de 280px cualquier texto largo
   se parte en cinco renglones. */
.pug_package_extras_card .pug_package_extras {
  columns: 320px 2;
  column-gap: 28px;
}

/* Un extra no se puede partir entre columnas: media frase al pie de una y la otra mitad arriba de la
   siguiente es ilegible. */
.pug_package_extras_card .pug_package_extras > li {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

/* Tarifa + cancelacion: viven en el FOOTER de la tarjeta de compra, arriba de los medios de pago.
   Los tres cuelgan del mismo `policy_id` y responden lo mismo (bajo que condiciones se compra), asi que
   comparten el ritmo: cada bloque cierra con su linea, como los medios de pago con el precio. */
.pug_package_rate_block {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* Solo el bloque PLANO (el caso sin nada que plegar) apila filas: en el `<details>` el espaciado lo
   pone `.pug_package_rate_body`, y `display:grid` sobre un `<details>` es terreno resbaloso. */
div.pug_package_rate_block {
  display: grid;
  gap: 7px;
}

/* --- Desplegable de condiciones: el rotulo ES el control --- */
/* Mismo control nativo que "Ver detalles de la habitacion" (`pug_package_room_more`): sin JS y con el
   alto de la tarjeta acotado por construccion. La diferencia es que este rotulo LLEVA EL VALOR
   ("Politica de cancelacion: NO REEMBOLSABLE"): es la unica parte que el huesped necesita para decidir,
   asi que se lee cerrado y lo que se abre es el parrafo de condiciones. */
/* El area clickeable es TODO el renglon del contenedor, y por eso el padding inferior vive en el
   `<summary>` y no en el `<details>`: ahi dejaba una franja de 12px que se ve parte del control y no
   hace nada. Abierto, ese aire pasa al cuerpo — el click NO se extiende a lo que se despliega, asi el
   parrafo de condiciones se puede seleccionar y copiar.

   `user-select: none` porque el rotulo es un CONTROL: sin eso, un doble click (o el segundo click
   rapido de alguien que abre y cierra) selecciona el texto de la etiqueta en vez de plegar. */
.pug_package_rate_fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 12px;
  -webkit-user-select: none;
  user-select: none;
}

.pug_package_rate_block.pug_package_rate_fold {
  padding-bottom: 0;
}

/* Abierto, el rotulo separa del cuerpo con 10px (antes eran los 12 que cerraban la seccion). Sigue
   siendo padding DEL control: el renglon del rotulo se puede clickear entero, el cuerpo no. */
.pug_package_rate_fold[open] > summary {
  padding-bottom: 10px;
}

.pug_package_rate_fold > summary::-webkit-details-marker {
  display: none;
}

.pug_package_rate_fold > summary > i {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

/* Al extremo derecho y no pegado al texto: el area clickeable es todo el renglon, y con el chevron a
   la derecha se lee que lo que se despliega es la SECCION, no una aclaracion del nombre. */
.pug_package_rate_chevron {
  margin-left: auto;
  transition: transform 0.2s ease-out;
}

.pug_package_rate_fold[open] > .pug_package_rate_chevron,
.pug_package_rate_fold[open] > summary > .pug_package_rate_chevron {
  transform: rotate(180deg);
}

.pug_package_rate_summary {
  min-width: 0;
  color: rgba(0, 0, 0, 0.9);
}

.pug_package_rate_body {
  display: grid;
  gap: 7px;
  padding-bottom: 12px;
}

/* El panel de condiciones trae su propio `margin-top` para el caso en que cuelga de una fila; dentro
   del desplegable el aire lo pone el `gap`, y sumados quedaban 15px. */
.pug_package_rate_body > .pug_package_policy_text {
  margin-top: 0;
}

.pug_package_rate_row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.pug_package_rate_row > i {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

/* Medios de pago: chips, no lista. Agrupados por tipo son 4 o 5, y en una franja no empujan el precio
   ni el boton hacia abajo. */
.pug_package_payments_block {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.pug_package_payments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pug_package_payments > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 13px;
  line-height: 1.4;
}

.pug_package_payments > li > i {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

/* "Tarifa:" y "Politica de cancelacion:" usan la etiqueta canonica (arriba): mismo tono y mismo peso que
   "Medios de pago" o "Cantidad". El valor va al 90% de negro, asi la etiqueta se lee como etiqueta y no
   como el principio del valor. */
.pug_package_rate_row > div {
  min-width: 0;
  color: rgba(0, 0, 0, 0.9);
}

/* El parrafo de condiciones, dentro del desplegable. Panel tenue para que se lea como una nota y no
   como cuerpo de la tarjeta, con `max-height` + scroll: incluso abierto, un hotel con 40 clausulas no
   puede empujar el precio y el CTA fuera de la pantalla.

   Escondido detras de un clic NO queda escondido lo que importa: el rotulo del desplegable dice el
   NOMBRE de la politica ("NO REEMBOLSABLE"), que es la parte con la que se decide; lo que se abre es
   el detalle legal. Estuvo impreso directo, sin control, y en la mitad de los POS mandaba el boton de
   compra abajo del fold. */
.pug_package_policy_text {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  max-height: 130px;
  overflow-y: auto;
}

/* --- Ocupacion exacta: frase + rangos de edad, sin controles --- */
.pug_package_occupancy_fixed {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pug_package_occupancy_fixed > i {
  font-size: 22px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.45);
}

.pug_package_occupancy_text {
  font-size: 16px;
  line-height: 1.5;
}

/* --- Ocupacion editable: un contador por categoria --- */
.pug_package_party_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pug_package_party_row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pug_package_party_row:first-child {
  padding-top: 0;
}

.pug_package_party_name {
  font-size: 16px;
  line-height: 1.4;
}

.pug_package_stepper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Los margenes verticales vienen del tema (.neo_button_partyselector { margin: 10px 0 }) y aca
   sobran: la fila ya tiene su padding. */
.pug_package_stepper .neo_button_partyselector {
  margin: 0;
}

/* Tope alcanzado: el boton se apaga. El tema no trae regla `:disabled`
   (`core/css_themecolor.php:290`) y sus `:hover`/`:active` SI se disparan sobre un boton
   deshabilitado, asi que hay que neutralizarlos los tres juntos: sin eso el `+` gris se pintaba
   del color del tema al pasar el mouse, o sea volvia a prometer que hacia algo. */
.pug_package_stepper .neo_button_partyselector:disabled,
.pug_package_stepper .neo_button_partyselector:disabled:hover,
.pug_package_stepper .neo_button_partyselector:disabled:active {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.25);
  background: transparent;
  cursor: default;
  box-shadow: none;
}

.pug_package_qty {
  width: 54px;
  margin: 0 8px;
  padding: 8px 4px;
  text-align: center;
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  -moz-appearance: textfield;
}

/* Quitar las flechitas del input number (mismo criterio que el selector del motor). */
.pug_package_qty::-webkit-outer-spin-button,
.pug_package_qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* El formulario del paquete NO pide la edad de cada nino: el huesped declara la categoria
   (adulto / nino / bebe) y la edad exacta no cambia ni el precio ni los cargos. Ver el comentario
   de pxPackageChildAges() en pug_package_js.php. */
/* --- Cantidad + fechas en UNA fila --- */
/* Cantidad es un select de 1..N: darle una seccion propia gastaba una franja entera de la tarjeta
   para un control de 100px. Va como primera columna, angosta, de la fila de fechas. Sin unidades
   elegibles la columna no se emite y el grid queda en 2. */
.pug_package_datesrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: start;
}

.pug_package_datesrow.with_units {
  grid-template-columns: 100px 1fr 1fr;
}

.pug_package_field {
  min-width: 0;
}

/* Ancho garantizado incluso si el altInput de flatpickr no heredara las clases del original. */
.pug_package_field input:not([type=hidden]),
.pug_package_field select {
  width: 100%;
  box-sizing: border-box;
}

.pug_package_field .flatpickr-input.form-control {
  display: block;
}

/* El select comparte alto con los inputs de fecha, que traen padding 15px de .neo_generic_input. */
.pug_package_field .pug_quantity {
  padding: 15px 10px;
  font-size: 16px;
}

/* --- Total + CTA --- */
.pug_package_footer {
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.02);
}

.pug_package_total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.pug_package_total_label {
  font-size: 15px;
  font-weight: 600;
}

.pug_package_total_amount {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.pug_package_total_amount .pug_package_currency {
  font-size: 16px;
  font-weight: 600;
  opacity: 0.6;
  margin-right: 2px;
}

.pug_package_recap_detail {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  margin-top: 4px;
}

.pug_package_recap_detail:empty {
  display: none;
}

.pug_package_error {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.pug_package_error li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pug_package_cta {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
  padding: 15px 20px;
}

.pug_package_cta_loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* --- Descripcion y terminos (fuera de la tarjeta, solo en paquetes) --- */
/* La descripcion venia a 14px sin ancho maximo, y los terminos como un parrafo suelto pegado
   abajo: dos bloques de texto sin jerarquia justo antes del bloque de compra. */
.pug_package_prose {
  font-size: 16px;
  line-height: 1.65;
  max-width: 65ch;
  color: rgba(0, 0, 0, 0.8);
}

.pug_package_prose p:not(:last-child) {
  margin-bottom: 0.8em;
}

/* 40px: es lo ultimo antes de la tarjeta de compra y necesita separarse de ella. El hueco que se
   veia antes NO era esto: eran el contenedor de precio vacio + los 30px de margin-xs-top-30 que
   arrastraba la tarjeta, los dos ya sacados en neo_pug_lp.php. */
.pug_package_terms {
  margin-bottom: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Mismo criterio que los otros dos desplegables: el `padding-top` que separa del borde vive en el
   `<summary>`, asi esa franja tambien pliega; el rotulo no se puede seleccionar (es un control) y el
   click no se extiende al cuerpo, que se sigue pudiendo copiar. */
.pug_package_terms > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 15px;
  -webkit-user-select: none;
  user-select: none;
}

.pug_package_terms > summary::-webkit-details-marker {
  display: none;
}

.pug_package_terms > summary > i {
  transition: transform 0.2s ease-out;
  color: rgba(0, 0, 0, 0.45);
}

.pug_package_terms[open] > summary > i {
  transform: rotate(90deg);
}

.pug_package_terms_body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.7);
  max-width: 65ch;
  margin-top: 12px;
}

@media (max-width: 767px) {
  .neo_pug_defaultlp {
    padding-top: 50px;
  }

  /* En mobile la tarjeta de la habitacion se apila: fotos arriba, informacion abajo (igual que
     las tarjetas de categoria del motor). */
  .pug_package_room_card {
    grid-template-columns: 1fr;
  }

  .pug_package_room_more > summary {
    padding: 14px 16px;
  }

  .pug_package_room_more_body {
    padding: 0 16px 14px;
  }

  .pug_package_room_photos {
    min-height: 200px;
    max-height: 220px;
  }

  .pug_package_room_info {
    padding: 16px;
  }
  .pug_package_section,
  .pug_package_footer {
    padding: 16px;
  }
  /* Cantidad + entrada comparten la primera fila; salida pasa abajo a lo ancho. Dos fechas lado a
     lado no entran sin cortar el texto. */
  .pug_package_datesrow {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pug_package_datesrow.with_units {
    grid-template-columns: 80px 1fr;
  }
  .pug_package_datesrow.with_units .pug_package_field_out {
    grid-column: 1/-1;
  }
  .pug_package_total_amount {
    font-size: 24px;
  }
  .pug_package_prose {
    font-size: 15px;
  }
}

/*# sourceMappingURL=neo_pug_lp.css.map */