/* -------------------------------------------------------------------------
 * Nacascolo Air – Flight Booking
 * Paleta y tipografía tomadas de nacascoloair.proyectoscoralcr.com
 * ---------------------------------------------------------------------- */

.naab-widget,
.naab-overlay,
.naab-dropdown {
	--naab-accent: #a79e87;
	--naab-accent-dark: #8d846e;
	--naab-ink: #2a2a2a;
	--naab-ink-soft: #6b6b6b;
	--naab-line: #e2ded4;
	--naab-surface: #ffffff;
	--naab-surface-alt: #f7f5f1;
	--naab-radius: 3px;
	--naab-font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--naab-shadow: 0 18px 44px rgba(20, 18, 14, .16);
	--naab-error: #b4432f;
	/* Hover unificado: negro translúcido con letra blanca. Se declara aquí para
	   que ningún hover del tema (el rosa/rojo de la plantilla) se cuele. */
	--naab-hover-bg: rgba(26, 26, 26, .84);
	--naab-hover-ink: #ffffff;
	/* Fondo de la pestaña activa; el tema oscuro lo redefine. */
	--naab-tab-active-bg: var(--naab-surface);
}

.naab-widget,
.naab-overlay,
.naab-dropdown,
.naab-widget *,
.naab-overlay *,
.naab-dropdown * {
	box-sizing: border-box;
}

.naab-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Contenedor
 * ---------------------------------------------------------------------- */

.naab-widget {
	font-family: var(--naab-font);
	color: var(--naab-ink);
	line-height: 1.4;
	text-align: left;
	position: relative;
	z-index: 5;
}

.naab-widget__title {
	font-family: var(--naab-font);
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 14px;
	color: inherit;
}

/* Pestañas ---------------------------------------------------------------- */

/* Las pestañas nunca reflúyen: una fila siempre. Si el sitio se queda sin
   ancho, el título se recorta con puntos suspensivos, que estorba mucho menos
   para navegar que una pestaña suelta en una segunda línea. */
.naab-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin-bottom: -1px;
	position: relative;
	z-index: 2;
}

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

.naab-widget .naab-tab {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(42, 42, 42, .72);
	color: rgba(255, 255, 255, .82);
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--naab-radius) var(--naab-radius) 0 0;
	padding: 12px 20px;
	font-family: var(--naab-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	line-height: 1.25;
	text-align: left;
	min-width: 0;
}

.naab-widget .naab-tab:hover,
.naab-widget .naab-tab:focus-visible {
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-widget .naab-tab .naab-icon {
	font-size: 16px;
	color: var(--naab-accent);
}

.naab-widget .naab-tab:hover .naab-icon {
	color: var(--naab-accent);
}

/* Pestaña activa: borde dorado que se continúa en el borde del panel,
   de modo que pestaña y panel se leen como una sola pieza. */
.naab-widget .naab-tab.is-active {
	background: var(--naab-surface);
	color: var(--naab-ink);
	border-color: var(--naab-accent);
	position: relative;
	z-index: 3;
}

.naab-widget .naab-tab.is-active:hover {
	background: var(--naab-surface) !important;
	color: var(--naab-ink) !important;
}

.naab-widget .naab-tab.is-active .naab-icon {
	color: var(--naab-accent-dark);
}

/* Tapa la línea dorada del panel justo debajo de la pestaña activa. */
.naab-widget .naab-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--naab-tab-active-bg);
}

/* Panel y fila ------------------------------------------------------------ */

.naab-panel {
	background: var(--naab-surface);
	border: 1px solid var(--naab-accent);
	border-radius: 0 var(--naab-radius) var(--naab-radius) var(--naab-radius);
	box-shadow: var(--naab-shadow);
	position: relative;
	z-index: 1;
}

.naab-panel[hidden] {
	display: none;
}

.naab-row {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

/* Campos ------------------------------------------------------------------ */

.naab-field {
	position: relative;
	flex: 1 1 150px;
	min-width: 0;
	padding: 14px 16px 12px;
	border-right: 1px solid var(--naab-line);
}

/* Los campos que no aplican a la categoría elegida se ocultan desde JS.
   Hace falta !important porque en la barra .naab-field es display:flex. */
.naab-field[hidden] {
	display: none !important;
}

.naab-field--wide {
	flex: 1.6 1 220px;
}

.naab-field--pax {
	flex: 0 1 150px;
}

.naab-field--action {
	flex: 0 0 auto;
	border-right: 0;
	padding: 8px;
	display: flex;
	align-items: stretch;
}

.naab-field__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--naab-accent-dark);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.naab-field__label .naab-icon {
	font-size: 13px;
}

.naab-field__error {
	margin: 4px 0 0;
	font-size: 11px;
	color: var(--naab-error);
	line-height: 1.3;
}

.naab-field.has-error {
	background: rgba(180, 67, 47, .05);
}

.naab-field.has-error .naab-field__label {
	color: var(--naab-error);
}

/* Botones de campo (select / date / pax) ---------------------------------- */

.naab-widget .naab-select__toggle,
.naab-widget .naab-date__toggle,
.naab-widget .naab-pax__toggle {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 2px 0 3px;
	margin: 0;
	font-family: var(--naab-font);
	font-size: 15px;
	font-weight: 400;
	color: var(--naab-ink);
	text-align: left;
	cursor: pointer;
	line-height: 1.35;
	border-radius: 0;
	transition: border-color .18s ease;
}

.naab-widget .naab-select__toggle:hover,
.naab-widget .naab-date__toggle:hover,
.naab-widget .naab-pax__toggle:hover {
	border-bottom-color: var(--naab-accent);
}

.naab-widget .naab-select__toggle:focus-visible,
.naab-widget .naab-date__toggle:focus-visible,
.naab-widget .naab-pax__toggle:focus-visible {
	outline: 2px solid var(--naab-accent);
	outline-offset: 3px;
}

.naab-select__value,
.naab-date__value,
.naab-pax__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.naab-select__value.is-placeholder,
.naab-date__value.is-placeholder {
	color: #9d9a93;
}

.naab-select__toggle .naab-icon,
.naab-pax__toggle .naab-icon {
	font-size: 15px;
	color: var(--naab-accent-dark);
	transition: transform .2s ease;
}

/* Los desplegables con buscador ya llevan icono en la etiqueta: sin chevron
   ganamos ancho para nombres largos de aeropuerto. */
.naab-select[data-searchable="1"] .naab-select__toggle .naab-icon {
	display: none;
}

.naab-select.is-open .naab-select__toggle .naab-icon,
.naab-pax.is-open .naab-pax__toggle .naab-icon {
	transform: rotate(180deg);
}

/* Paneles desplegables ---------------------------------------------------- */

.naab-select,
.naab-date,
.naab-pax {
	position: relative;
}

.naab-select__panel,
.naab-date__panel,
.naab-pax__panel {
	position: absolute;
	top: calc(100% + 12px);
	left: -16px;
	min-width: calc(100% + 32px);
	background: var(--naab-surface);
	border: 1px solid var(--naab-line);
	border-radius: var(--naab-radius);
	box-shadow: var(--naab-shadow);
	z-index: 40;
	padding: 8px;
}

.naab-select__panel[hidden],
.naab-date__panel[hidden],
.naab-pax__panel[hidden] {
	display: none;
}

.naab-select__panel {
	width: 340px;
	max-width: min(340px, calc(100vw - 32px));
	padding: 0;
}

.naab-select__panel.naab-flip-right {
	left: auto;
	right: -16px;
}

/* Buscador ---------------------------------------------------------------- */

.naab-select__search {
	padding: 10px;
	border-bottom: 1px solid var(--naab-line);
}

.naab-widget .naab-select__search input,
.naab-overlay .naab-select__search input {
	width: 100%;
	border: 1px solid var(--naab-line);
	border-radius: var(--naab-radius);
	padding: 9px 11px;
	font-family: var(--naab-font);
	font-size: 14px;
	color: var(--naab-ink);
	background: var(--naab-surface-alt);
	line-height: 1.3;
	box-shadow: none;
}

.naab-select__search input:focus {
	outline: none;
	border-color: var(--naab-accent);
	background: #fff;
}

.naab-select__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.naab-select__group {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--naab-accent-dark);
	padding: 12px 10px 5px;
	margin: 0;
}

.naab-select__option {
	padding: 9px 10px;
	font-size: 14px;
	color: var(--naab-ink);
	border-radius: var(--naab-radius);
	cursor: pointer;
	margin: 0;
	line-height: 1.35;
}

.naab-widget .naab-select__option:hover,
.naab-overlay .naab-select__option:hover,
.naab-select__option.is-highlighted {
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-select__option.is-selected {
	background: var(--naab-accent);
	color: #fff;
}

.naab-select__option[hidden],
.naab-select__group[hidden] {
	display: none;
}

.naab-select__empty {
	padding: 16px 10px;
	font-size: 13px;
	color: var(--naab-ink-soft);
	text-align: center;
	list-style: none;
}

/* Pasajeros --------------------------------------------------------------- */

.naab-pax__panel {
	width: 250px;
}

.naab-pax__stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 4px;
}

.naab-widget .naab-pax__btn,
.naab-overlay .naab-pax__btn {
	appearance: none;
	-webkit-appearance: none;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border: 1px solid var(--naab-line);
	border-radius: 50%;
	background: #fff;
	color: var(--naab-ink);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	font-family: var(--naab-font);
	transition: border-color .18s ease, color .18s ease;
}

.naab-widget .naab-pax__btn:hover:not(:disabled),
.naab-overlay .naab-pax__btn:hover:not(:disabled) {
	border-color: var(--naab-hover-bg) !important;
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-pax__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.naab-pax__count {
	font-size: 17px;
	font-weight: 500;
	min-width: 28px;
	text-align: center;
}

.naab-pax__note {
	margin: 6px 4px 2px;
	font-size: 11px;
	color: var(--naab-ink-soft);
	line-height: 1.4;
}

/* Calendario -------------------------------------------------------------- */

.naab-date__panel {
	width: 300px;
	padding: 10px;
}

.naab-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px 2px 10px;
}

.naab-cal__month {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
}

.naab-widget .naab-cal__nav,
.naab-overlay .naab-cal__nav {
	appearance: none;
	-webkit-appearance: none;
	width: 30px;
	height: 30px;
	border: 1px solid var(--naab-line);
	border-radius: 50%;
	background: #fff;
	color: var(--naab-ink);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	font-family: var(--naab-font);
}

.naab-widget .naab-cal__nav:hover:not(:disabled),
.naab-overlay .naab-cal__nav:hover:not(:disabled) {
	border-color: var(--naab-hover-bg) !important;
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-cal__nav:disabled {
	opacity: .3;
	cursor: not-allowed;
}

.naab-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.naab-cal__dow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--naab-accent-dark);
	text-align: center;
	padding: 4px 0 6px;
}

.naab-widget .naab-cal__day,
.naab-overlay .naab-cal__day {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	font-family: var(--naab-font);
	font-size: 13px;
	color: var(--naab-ink);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}

.naab-widget .naab-cal__day:hover:not(:disabled),
.naab-overlay .naab-cal__day:hover:not(:disabled) {
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-cal__day:disabled {
	color: #c9c6bf;
	cursor: not-allowed;
}

.naab-cal__day.is-today {
	box-shadow: inset 0 0 0 1px var(--naab-line);
}

.naab-cal__day.is-selected {
	background: var(--naab-accent);
	color: #fff;
	font-weight: 600;
}

.naab-cal__empty {
	aspect-ratio: 1 / 1;
}

/* Borrar la fecha de regreso: es lo que deja el vuelo en solo ida. */
.naab-widget .naab-date__clear,
.naab-overlay .naab-date__clear {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 9px 10px;
	border: 0;
	border-top: 1px solid var(--naab-line);
	background: transparent;
	font-family: var(--naab-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--naab-ink-soft);
	cursor: pointer;
	border-radius: 0 0 var(--naab-radius) var(--naab-radius);
}

.naab-widget .naab-date__clear:hover,
.naab-overlay .naab-date__clear:hover {
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

/* Botón Enquire ----------------------------------------------------------- */

.naab-widget .naab-submit,
.naab-overlay .naab-submit {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--naab-accent);
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: 15px 30px;
	font-family: var(--naab-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.naab-widget .naab-submit:hover,
.naab-overlay .naab-submit:hover {
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-submit:disabled {
	opacity: .65;
	cursor: wait;
}

.naab-submit .naab-icon {
	font-size: 16px;
}

.naab-submit--full {
	width: 100%;
	padding: 16px 30px;
}

.naab-overlay .naab-submit--ghost {
	background: transparent;
	color: var(--naab-ink);
	box-shadow: inset 0 0 0 1px var(--naab-line);
}

.naab-overlay .naab-submit--ghost:hover {
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

/* Swap -------------------------------------------------------------------- */

.naab-widget .naab-swap {
	appearance: none;
	-webkit-appearance: none;
	align-self: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	margin: 0 -16px 0 -16px;
	border: 1px solid var(--naab-line);
	border-radius: 50%;
	background: #fff;
	color: var(--naab-accent-dark);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 3;
	transition: transform .25s ease, border-color .2s ease;
}

.naab-swap:hover {
	border-color: var(--naab-accent);
	transform: rotate(180deg);
}

.naab-swap .naab-icon {
	font-size: 15px;
}

/* -------------------------------------------------------------------------
 * Variantes de layout
 * ---------------------------------------------------------------------- */

/* Con cuatro categorías las pestañas van justas: aquí se compactan para que
   entren en una línea sin partir los títulos. */
.naab-layout--stacked .naab-tabs {
	gap: 3px;
}

.naab-widget.naab-layout--stacked .naab-tab {
	padding: 11px 14px;
	font-size: 12px;
	gap: 6px;
	min-width: 0;
}

.naab-layout--stacked .naab-tab span {
	white-space: nowrap;
}

.naab-layout--stacked .naab-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

.naab-layout--stacked .naab-field {
	border-right: 0;
	border-bottom: 1px solid var(--naab-line);
}

.naab-layout--stacked .naab-swap {
	display: none;
}

.naab-layout--stacked .naab-field--action {
	grid-column: 1 / -1;
	border-bottom: 0;
	border-right: 0;
	padding: 14px 16px 16px;
}

.naab-layout--stacked .naab-field--action .naab-submit {
	width: 100%;
}

.naab-layout--stacked .naab-select__panel,
.naab-layout--stacked .naab-date__panel,
.naab-layout--stacked .naab-pax__panel {
	width: 100%;
	min-width: 260px;
	max-width: none;
}

/* -------------------------------------------------------------------------
 * Layout topbar: barra horizontal con logo a la izquierda, campos a la
 * derecha y fondo negro translúcido. Pensada para sustituir el menú del
 * header o para desplegarse justo debajo de él.
 * ---------------------------------------------------------------------- */

.naab-layout--topbar {
	display: flex;
	align-items: center;
	gap: 22px;
	width: 100%;
	padding: 0 24px;
	min-height: 78px;
	background: rgba(18, 17, 15, .62);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
}

.naab-widget[data-naab-sticky="1"] {
	position: sticky;
	top: 0;
	z-index: 9998;
}

.naab-topbar__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
	max-width: 230px;
}

.naab-topbar__logo img {
	display: block;
	max-width: 100%;
	max-height: 42px;
	width: auto;
	height: auto;
}

.naab-topbar__logo img[hidden] {
	display: none;
}

/* El formulario, el panel y la fila se aplanan para que los campos sean
   hijos directos del flex de la barra. */
.naab-layout--topbar .naab-form {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

.naab-layout--topbar .naab-panel,
.naab-layout--topbar .naab-row {
	display: contents;
}

.naab-layout--topbar .naab-panel[hidden] {
	display: none;
}

.naab-layout--topbar .naab-field {
	flex: 1 1 130px;
	padding: 12px;
	border-right: 1px solid rgba(255, 255, 255, .16);
	border-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Reparto de la fila: los campos de longitud acotada (categoría, subtipo,
   pasajeros) no crecen, y el espacio sobrante se lo llevan From y To, que son
   los que llevan los nombres largos de aeropuerto. */
.naab-layout--topbar .naab-field--type {
	/* Crece un poco: en Signature Experiences sobra sitio y el nombre es largo. */
	flex: 0.6 1 185px;
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.naab-layout--topbar .naab-field--pax {
	flex: 0 1 112px;
}

.naab-layout--topbar .naab-field[data-naab-field="from"],
.naab-layout--topbar .naab-field[data-naab-field="to"],
.naab-layout--topbar .naab-field[data-naab-field="pickup"],
.naab-layout--topbar .naab-field[data-naab-field="experience"] {
	flex: 1.2 1 150px;
}

.naab-layout--topbar .naab-field--action {
	flex: 0 0 auto;
	border-right: 0;
	padding: 0 0 0 18px;
	align-items: center;
}

.naab-layout--topbar .naab-field__label {
	color: var(--naab-accent);
	margin-bottom: 3px;
}

.naab-layout--topbar .naab-select__toggle,
.naab-layout--topbar .naab-date__toggle,
.naab-layout--topbar .naab-pax__toggle {
	color: #fff;
	font-size: 13.5px;
}

/* "5 Passengers" no cabe con el chevron y la etiqueta ya dice qué es. */
.naab-layout--topbar .naab-pax__toggle .naab-icon {
	display: none;
}

.naab-layout--topbar .naab-select__value.is-placeholder,
.naab-layout--topbar .naab-date__value.is-placeholder {
	color: rgba(255, 255, 255, .62);
}

.naab-layout--topbar .naab-submit {
	padding: 14px 26px;
	font-size: 13px;
}

/* Los desplegables sí van en claro: se leen mejor sobre la barra oscura. */
.naab-layout--topbar .naab-select__panel,
.naab-layout--topbar .naab-date__panel,
.naab-layout--topbar .naab-pax__panel {
	top: calc(100% + 10px);
}

/* Desplegable bajo el header ---------------------------------------------- */

.naab-dropdown {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9998;
	transform: translateY(-14px);
	opacity: 0;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1), opacity .22s ease;
}

.naab-dropdown[hidden] {
	display: none;
}

.naab-dropdown.is-open {
	transform: none;
	opacity: 1;
}

.naab-dropdown__inner {
	position: relative;
	background: rgba(18, 17, 15, .88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 22px 48px rgba(0, 0, 0, .38);
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.naab-dropdown .naab-layout--topbar {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	max-width: 1440px;
	margin: 0 auto;
	padding-right: 46px;
}

/* Barra fija permanente: no hay nada que cerrar y el fondo va algo más opaco,
   porque se queda encima del contenido de la página. */
.naab-dropdown.naab-dropdown--persistent .naab-dropdown__close {
	display: none !important;
}

.naab-dropdown.naab-dropdown--persistent .naab-dropdown__inner {
	background: rgba(18, 17, 15, .78);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.naab-dropdown.naab-dropdown--persistent .naab-layout--topbar {
	padding-right: 24px;
}

.naab-dropdown .naab-dropdown__close {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, .7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.naab-dropdown .naab-dropdown__close:hover {
	background: rgba(255, 255, 255, .14) !important;
	color: #fff !important;
}

.naab-dropdown__close .naab-icon {
	font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
	.naab-dropdown {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Reparto de campos dentro del pop-up ancho
 * Cada categoría tiene un número distinto de campos (6, 5 o 4), así que una
 * rejilla fija dejaría huecos. Con flex y crecimiento, la última fila se
 * reparte el ancho sobrante y no queda ningún espacio vacío.
 * ---------------------------------------------------------------------- */

@media (min-width: 940px) {
	.naab-overlay__dialog--wide .naab-layout--stacked .naab-row {
		display: flex;
		flex-wrap: wrap;
	}

	/* 6 campos -> 3 + 3   |   5 campos -> 3 + 2 (a mitad cada uno) */
	.naab-overlay__dialog--wide .naab-layout--stacked .naab-field {
		flex: 1 1 28%;
		min-width: 0;
	}

	/* Experiencias tiene 4: mejor 2 + 2 que 3 + 1 a todo lo ancho. */
	.naab-overlay__dialog--wide [data-naab-panel="experiences"] .naab-field {
		flex: 1 1 45%;
	}

	.naab-overlay__dialog--wide .naab-layout--stacked .naab-field--action {
		flex: 1 1 100%;
	}
}

/* El botón no necesita todo el ancho del pop-up: se alinea a la derecha. */
.naab-overlay__body .naab-layout--stacked .naab-field--action {
	display: flex;
	justify-content: flex-end;
}

.naab-overlay__body .naab-layout--stacked .naab-field--action .naab-submit {
	width: auto;
	min-width: 210px;
}

/* Tema oscuro (widget sobre imagen clara) --------------------------------- */

.naab-theme--dark {
	--naab-tab-active-bg: #2c2c2c;
}

.naab-theme--dark .naab-panel {
	background: rgba(42, 42, 42, .92);
	backdrop-filter: blur(6px);
}

.naab-theme--dark .naab-field {
	border-right-color: rgba(255, 255, 255, .16);
}

.naab-theme--dark .naab-field__label {
	color: var(--naab-accent);
}

.naab-theme--dark .naab-select__toggle,
.naab-theme--dark .naab-date__toggle,
.naab-theme--dark .naab-pax__toggle {
	color: #fff;
}

.naab-theme--dark .naab-select__value.is-placeholder,
.naab-theme--dark .naab-date__value.is-placeholder {
	color: rgba(255, 255, 255, .6);
}

.naab-theme--dark .naab-tab {
	background: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .85);
}

.naab-theme--dark .naab-tab.is-active {
	background: rgba(42, 42, 42, .92);
	color: #fff;
}

.naab-theme--dark .naab-widget__title {
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Modales
 * ---------------------------------------------------------------------- */

.naab-overlay {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 16px;
	overflow-y: auto;
	font-family: var(--naab-font);
	color: var(--naab-ink);
	-webkit-overflow-scrolling: touch;
}

.naab-overlay[hidden] {
	display: none;
}

.naab-overlay__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 14, .62);
	backdrop-filter: blur(3px);
	animation: naab-fade .25s ease;
}

.naab-overlay__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	background: var(--naab-surface);
	border-radius: var(--naab-radius);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	padding: 34px 34px 30px;
	margin: auto 0;
	animation: naab-rise .3s cubic-bezier(.2, .7, .3, 1);
}

/* Ancho pensado para que las cuatro pestañas quepan en una sola línea. */
.naab-overlay__dialog--wide {
	max-width: 1020px;
	padding: 34px 30px 30px;
}

@keyframes naab-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes naab-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.naab-overlay .naab-overlay__close {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--naab-ink-soft);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .18s ease, color .18s ease;
}

.naab-overlay .naab-overlay__close:hover {
	background: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-overlay__close .naab-icon {
	font-size: 18px;
}

.naab-overlay__head {
	margin-bottom: 20px;
	padding-right: 36px;
}

.naab-overlay .naab-overlay__title {
	font-family: var(--naab-font);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 6px;
	color: var(--naab-ink);
}

.naab-overlay__sub {
	margin: 0;
	font-size: 14px;
	color: var(--naab-ink-soft);
	line-height: 1.5;
}

.naab-overlay__body .naab-widget {
	margin: 0;
}

.naab-overlay__body .naab-panel {
	box-shadow: none;
	border: 1px solid var(--naab-accent);
}

/* Resumen del viaje ------------------------------------------------------- */

.naab-summary {
	background: var(--naab-surface-alt);
	border-radius: var(--naab-radius);
	padding: 14px 16px;
	margin-bottom: 22px;
	font-size: 13px;
	line-height: 1.5;
}

.naab-summary__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 9px;
}

.naab-summary__tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 2px;
	background: var(--naab-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.naab-summary__route {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--naab-ink);
	margin-bottom: 6px;
}

.naab-summary__route .naab-icon {
	font-size: 15px;
	color: var(--naab-accent-dark);
}

.naab-summary__meta {
	color: var(--naab-ink-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.naab-summary__meta span {
	white-space: nowrap;
}

/* Formulario de datos ----------------------------------------------------- */

.naab-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.naab-input--full {
	grid-column: 1 / -1;
}

.naab-input label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--naab-accent-dark);
	margin-bottom: 6px;
}

.naab-overlay .naab-input input,
.naab-overlay .naab-input select,
.naab-overlay .naab-input textarea {
	width: 100%;
	background: var(--naab-surface-alt);
	border: 1px solid var(--naab-line);
	border-radius: var(--naab-radius);
	padding: 12px 13px;
	font-family: var(--naab-font);
	font-size: 15px;
	color: var(--naab-ink);
	line-height: 1.35;
	box-shadow: none;
	transition: border-color .18s ease, background .18s ease;
}

.naab-overlay .naab-input select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d846e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 5.5 6-5.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 17px;
	padding-right: 36px;
}

.naab-overlay .naab-input textarea {
	resize: vertical;
	min-height: 74px;
}

.naab-overlay .naab-input input:focus,
.naab-overlay .naab-input select:focus,
.naab-overlay .naab-input textarea:focus {
	outline: none;
	border-color: var(--naab-accent);
	background: #fff;
}

.naab-input.has-error input,
.naab-input.has-error select,
.naab-input.has-error textarea {
	border-color: var(--naab-error);
	background: rgba(180, 67, 47, .04);
}

.naab-input .naab-field__error {
	margin-top: 5px;
}

/* Consentimiento ---------------------------------------------------------- */

.naab-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--naab-ink-soft);
	line-height: 1.5;
	cursor: pointer;
}

.naab-overlay .naab-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin: 1px 0 0;
	border: 1px solid var(--naab-line);
	border-radius: 2px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
}

.naab-consent input[type="checkbox"]:checked {
	background: var(--naab-accent);
	border-color: var(--naab-accent);
}

.naab-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.naab-consent a {
	color: var(--naab-accent-dark);
	text-decoration: underline;
}

.naab-consent.has-error input[type="checkbox"] {
	border-color: var(--naab-error);
}

.naab-consent__error {
	margin: 6px 0 0 28px;
}

/* Honeypot ---------------------------------------------------------------- */

.naab-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Acciones ---------------------------------------------------------------- */

.naab-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.naab-overlay .naab-back {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 10px 4px;
	font-family: var(--naab-font);
	font-size: 13px;
	color: var(--naab-ink-soft);
	cursor: pointer;
	text-decoration: underline;
	flex: 0 0 auto;
}

.naab-back:hover {
	color: var(--naab-ink);
}

.naab-form-error {
	margin: 14px 0 0;
	padding: 11px 13px;
	background: rgba(180, 67, 47, .08);
	border-left: 2px solid var(--naab-error);
	color: var(--naab-error);
	font-size: 13px;
	line-height: 1.45;
}

.naab-spinner {
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: naab-spin .7s linear infinite;
	display: inline-block;
}

.naab-spinner[hidden] {
	display: none;
}

@keyframes naab-spin {
	to { transform: rotate(360deg); }
}

/* Éxito ------------------------------------------------------------------- */

.naab-success {
	text-align: center;
	padding: 12px 0 6px;
}

.naab-success[hidden] {
	display: none;
}

.naab-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--naab-accent);
	color: #fff;
	margin-bottom: 16px;
}

.naab-success__icon .naab-icon {
	font-size: 26px;
	stroke-width: 2;
}

.naab-overlay .naab-success h3 {
	font-family: var(--naab-font);
	font-size: 23px;
	font-weight: 500;
	margin: 0 0 10px;
	color: var(--naab-ink);
}

.naab-success__text {
	font-size: 14px;
	color: var(--naab-ink-soft);
	line-height: 1.6;
	margin-bottom: 22px;
}

.naab-success__text p {
	margin: 0 0 8px;
}

/* -------------------------------------------------------------------------
 * Blindaje frente a los hovers del tema
 * El tema de Nacascolo tiñe de rosa/rojo (rgb(204,51,102)) los enlaces y
 * botones al pasar el ratón. Estas reglas fijan el color dentro del widget.
 * ---------------------------------------------------------------------- */

.naab-widget .naab-select__toggle:hover,
.naab-widget .naab-date__toggle:hover,
.naab-widget .naab-pax__toggle:hover,
.naab-overlay .naab-select__toggle:hover,
.naab-overlay .naab-date__toggle:hover,
.naab-overlay .naab-pax__toggle:hover {
	color: var(--naab-ink) !important;
	border-bottom-color: var(--naab-accent) !important;
	background: transparent !important;
}

.naab-theme--dark .naab-select__toggle:hover,
.naab-theme--dark .naab-date__toggle:hover,
.naab-theme--dark .naab-pax__toggle:hover {
	color: #fff !important;
}

.naab-widget .naab-swap:hover {
	background: var(--naab-hover-bg) !important;
	border-color: var(--naab-hover-bg) !important;
	color: var(--naab-hover-ink) !important;
}

.naab-overlay .naab-back:hover {
	color: var(--naab-ink) !important;
	background: transparent !important;
}

.naab-overlay .naab-consent a,
.naab-overlay .naab-consent a:hover,
.naab-overlay .naab-consent a:focus {
	color: var(--naab-accent-dark) !important;
}

/* Bloqueo del scroll del body -------------------------------------------- */

body.naab-modal-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.naab-field {
		flex-basis: 130px;
		padding: 13px 13px 11px;
	}

	.naab-widget .naab-submit {
		padding: 15px 22px;
	}
}

@media (max-width: 1024px) {
	.naab-row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.naab-field {
		border-right: 0;
		border-bottom: 1px solid var(--naab-line);
	}

	.naab-swap {
		display: none;
	}

	.naab-field--action {
		grid-column: 1 / -1;
		border-bottom: 0;
		padding: 14px 16px 16px;
	}

	.naab-field--action .naab-submit {
		width: 100%;
	}

	.naab-select__panel,
	.naab-date__panel,
	.naab-pax__panel {
		width: 100%;
		min-width: 250px;
		max-width: none;
	}
}

@media (max-width: 640px) {
	.naab-row,
	.naab-layout--stacked .naab-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.naab-field,
	.naab-layout--stacked .naab-field {
		border-right: 0;
	}

	/* Cuatro pestañas repartidas en 375 px quedarían en cuatro muñones de texto.
	   Aquí la tira se desliza en horizontal: una sola fila y títulos completos. */
	.naab-tabs {
		gap: 2px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.naab-tabs::-webkit-scrollbar {
		display: none;
	}

	.naab-widget .naab-tab {
		flex: 0 0 auto;
		padding: 11px 12px;
		font-size: 11.5px;
		justify-content: center;
	}

	.naab-widget .naab-tab span {
		overflow: visible;
		text-overflow: clip;
	}

	/* Aquí sí conviene el botón a todo el ancho: es el destino del formulario. */
	.naab-overlay__body .naab-layout--stacked .naab-field--action .naab-submit {
		width: 100%;
		min-width: 0;
	}

	.naab-widget .naab-tab .naab-icon {
		display: none;
	}

	.naab-overlay {
		padding: 0;
		align-items: stretch;
	}

	.naab-overlay__dialog,
	.naab-overlay__dialog--wide {
		max-width: none;
		min-height: 100%;
		border-radius: 0;
		padding: 26px 20px 30px;
	}

	.naab-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.naab-select__panel,
	.naab-date__panel,
	.naab-pax__panel {
		left: 0;
		min-width: 100%;
	}

	.naab-overlay .naab-overlay__title {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.naab-overlay__dialog,
	.naab-overlay__backdrop {
		animation: none;
	}

	.naab-swap:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Responsive de la barra horizontal
 * Va al final para ganar a las reglas genéricas de .naab-row de arriba.
 * ---------------------------------------------------------------------- */

@media (max-width: 1280px) {
	.naab-layout--topbar {
		gap: 14px;
		padding: 0 16px;
	}

	.naab-layout--topbar .naab-topbar__logo {
		max-width: 170px;
	}

	.naab-layout--topbar .naab-field {
		padding: 12px 12px;
	}

	.naab-layout--topbar .naab-submit {
		padding: 14px 20px;
	}
}

@media (max-width: 1100px) {
	/* Dos filas: logo arriba, campos abajo. */
	.naab-layout--topbar {
		flex-wrap: wrap;
		padding: 12px 16px;
		gap: 10px;
	}

	.naab-layout--topbar .naab-form {
		flex-wrap: wrap;
		width: 100%;
	}

	.naab-layout--topbar .naab-panel,
	.naab-layout--topbar .naab-row {
		display: contents;
	}

	.naab-layout--topbar .naab-field {
		flex: 1 1 30%;
		border-left: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	.naab-layout--topbar .naab-field--type,
	.naab-layout--topbar .naab-field--pax {
		flex: 1 1 30%;
	}

	.naab-layout--topbar .naab-field--action {
		flex: 1 1 100%;
		padding: 10px 0 0;
		border-bottom: 0;
	}

	.naab-layout--topbar .naab-field--action .naab-submit {
		width: 100%;
	}

	.naab-dropdown .naab-layout--topbar {
		padding-right: 56px;
	}
}

@media (max-width: 640px) {
	.naab-layout--topbar .naab-field,
	.naab-layout--topbar .naab-field--type,
	.naab-layout--topbar .naab-field--pax {
		flex: 1 1 100%;
		border-right: 0;
	}

	.naab-layout--topbar .naab-topbar__logo {
		max-width: 150px;
	}

	.naab-dropdown__inner {
		max-height: calc(100vh - 56px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.naab-dropdown .naab-dropdown__close {
		top: 14px;
		right: 10px;
		transform: none;
	}

	.naab-dropdown .naab-layout--topbar {
		padding-right: 50px;
	}
}