/*
Theme Name:   Astra Child - New Travelers
Theme URI:    https://newtravelers.co
Description:  Tema hijo de Astra para newtravelers.co. Contiene las plantillas personalizadas del sitio (como single-hotel.php para las fichas de hoteles), de modo que las actualizaciones del tema padre Astra no las sobrescriban.
Author:       Finderyx
Template:     astra
Version:      1.0.9
Text Domain:  astra-child-newtravelers
*/

/* Los estilos generales del sitio los sigue manejando Astra + Spectra.
   Este archivo queda disponible para ajustes de CSS específicos de las
   plantillas personalizadas (por ejemplo, single-hotel.php) a medida
   que se vaya refinando el diseño visual contra el prototipo de Spectra. */

/* ==========================================================================
   Ficha de hotel (single-hotel.php)
   Basado en el diseño de Figma "Fichas hotel New Travelers".
   ========================================================================== */

:root {
	--nt-radio: 8px; /* Redondeo de esquinas usado en todo el diseño (Figma). */
	--nt-color-primario: #f69223;
	--nt-color-primario-hover: #e20e1a;
	--nt-color-texto: #22252a;
	--nt-color-titulos: #006eb6;
	--nt-color-texto-suave: #304c75;
	--nt-color-borde: #c5d3e8;
	--nt-color-fondo-suave: #d9e4f5;
	--nt-color-fondo-titulos-tabla: #b6c5de;
	--nt-espaciado-seccion: 2.5rem;
}

.hotel-ficha {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2.5rem 1rem 0;
	color: var(--nt-color-texto);
}

.hotel-ficha section,
.hotel-ficha > header {
	margin-bottom: var(--nt-espaciado-seccion);
}

.hotel-ficha h2 {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
	color: var(--nt-color-titulos);
}

/* -------------------- Espacios reservados (widgets futuros) -------------------- */
/* Sin estilo visible mientras no exista el widget real: solo son un punto
   de anclaje en el layout para no reestructurar la página después. */
.widget-placeholder {
	height: 0;
}

/* -------------------- Encabezado -------------------- */
.hotel-header-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.hotel-nombre {
	margin-top: 0;
	margin-bottom: 0.25rem;
	font-size: 1.75rem;
}

.hotel-destino {
	color: var(--nt-color-texto-suave);
	margin: 0;
}

.hotel-cta-boton-header {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* -------------------- Imagen + Sobre el hotel + Mapa (bloque combinado) -------------------- */
.hotel-resumen {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 1.25rem;
	align-items: stretch;
}

.hotel-resumen-imagen {
	position: relative;
	min-height: 260px;
}

.hotel-resumen-imagen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--nt-radio);
}

.hotel-resumen-info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hotel-sobre-card {
	background: var(--nt-color-fondo-suave);
	border-radius: var(--nt-radio);
	padding: 1rem 1.25rem;
}

.hotel-sobre-card h2 {
	font-size: 1rem;
	margin-bottom: 0.5rem;
}

.hotel-ubicacion-detalle {
	color: var(--nt-color-texto-suave);
	margin: 0 0 0.75rem;
}

/* -------------------- Destacados (3 comodidades principales, dentro de la tarjeta "Sobre el hotel") -------------------- */
.destacados-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--nt-color-borde);
}

.destacado-item {
	position: relative;
	padding-left: 0;
	font-weight: 500;
	font-size: 0.9rem;
}

.destacado-item + .destacado-item {
	padding-left: 1rem;
	border-left: 1px solid var(--nt-color-borde);
}

/* -------------------- Mapa -------------------- */
.mapa-embed {
	border-radius: var(--nt-radio);
	overflow: hidden;
}

.mapa-embed iframe {
	display: block;
	width: 100%;
}

/* -------------------- Galería / carrusel -------------------- */
.galeria-carrusel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.galeria-track {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.25rem;
	/* Oculta la barra de scroll nativa sin quitar la función (las flechas
	   siguen siendo la forma principal de navegar). */
	scrollbar-width: none;
}
.galeria-track::-webkit-scrollbar {
	display: none;
}

.galeria-item {
	flex: 0 0 auto;
	width: 31%;
	min-width: 220px;
	margin: 0;
	scroll-snap-align: start;
}

.galeria-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var(--nt-radio);
	display: block;
}

.galeria-flecha {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	border-radius: var(--nt-radio);
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	color: var(--nt-color-texto);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}
.galeria-flecha:hover {
	background: var(--nt-color-primario);
	color: #fff;
}

/* -------------------- Lightbox (inyectado por gallery.js) -------------------- */
.nt-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 2rem;
}
.nt-lightbox.nt-lightbox-abierto {
	display: flex;
}
.nt-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: var(--nt-radio);
	object-fit: contain;
}
.nt-lightbox-cerrar {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.nt-lightbox-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center; /* centra el símbolo exactamente */
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nt-lightbox-flecha svg {
	display: block;
	width: 1.4rem;
	height: 1.4rem;
}
.nt-lightbox-flecha:hover,
.nt-lightbox-flecha:focus-visible {
	background: var(--nt-color-primario);
	border-color: var(--nt-color-primario);
	outline: none;
}
.nt-lightbox-prev {
	left: 1rem;
}
.nt-lightbox-next {
	right: 1rem;
}
body.nt-lightbox-bloqueo-scroll {
	overflow: hidden;
}

.nt-lightbox-una-foto .nt-lightbox-flecha {
	display: none;
}

/* -------------------- Otros servicios -------------------- */
.hotel-otros-servicios {
	display: grid;
	grid-template-columns: 12rem 1fr;
	column-gap: 1.5rem;
	align-items: start;
}

.hotel-otros-servicios h2 {
	margin: 0;
}

.otros-servicios-contenido {
	min-width: 0; /* evita que el texto largo desborde la columna de la grilla */
}

.otros-servicios-lista {
	list-style: disc;
	padding-left: 1.25rem;
	margin: 0 0 1rem;
	columns: 2;
	column-gap: 3rem;
}
.otros-servicios-lista li {
	break-inside: avoid;
	margin-bottom: 0.4rem;
}

.condiciones-texto {
	margin-top: 0.75rem;
	color: var(--nt-color-texto-suave);
}

/* -------------------- Tipos de habitación y tarifas -------------------- */
.tipos-habitacion-caja {
	background: var(--nt-color-fondo-suave);
	border: 1px solid var(--nt-color-borde);
	border-radius: var(--nt-radio);
	overflow: hidden;
}

.tipos-habitacion-tabla {
	width: 100%;
	border-collapse: collapse;
}

.tipos-habitacion-tabla th,
.tipos-habitacion-tabla td {
	text-align: left;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--nt-color-borde);
}

.tipos-habitacion-tabla thead th {
	background: var(--nt-color-fondo-titulos-tabla);
	font-weight: 600;
}

.tipos-habitacion-notas {
	padding: 0.75rem 1rem;
}

.tipos-habitacion-nota {
	margin: 0 0 0.5rem;
	color: var(--nt-color-texto-suave);
	font-size: 0.9rem;
}
.tipos-habitacion-nota:last-child {
	margin-bottom: 0;
}

/* -------------------- Llamados a la acción -------------------- */
.hotel-cta {
	padding: 1.5rem;
	text-align: center;
}

.hotel-cta-aviso {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	color: var(--nt-color-texto-suave);
}

.hotel-cta-botones {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Base común a los dos botones: tamaño, forma y tipografía. */
.hotel-cta-boton {
	display: inline-block;
	padding: 0.6rem 1.5rem;
	line-height: 1.3;
	border-radius: var(--nt-radio);
	border: 1px solid transparent; /* mantiene la misma altura en ambos botones */
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* Botón principal: "Verificar disponibilidad".
   El color se repite en :visited, :hover y :focus porque Astra define
   sus propios colores para los enlaces y podría pisar el blanco. */
.hotel-cta-boton-primario,
.hotel-cta-boton-primario:visited {
	background: var(--nt-color-primario);
	color: #fff;
}
.hotel-cta-boton-primario:hover,
.hotel-cta-boton-primario:focus {
	background: var(--nt-color-primario-hover);
	color: #fff;
}

/* Botón secundario: "Contacta a un asesor". */
.hotel-cta-boton-secundario,
.hotel-cta-boton-secundario:visited {
	background: #fff;
	border-color: #d4d7da;
	color: #515151;
}
.hotel-cta-boton-secundario:hover,
.hotel-cta-boton-secundario:focus {
	background: #f0f0f0;
	color: #515151;
}

/* ==========================================================================
   Responsive / mobile
   Resuelto a partir del patrón de diseño de escritorio del Figma: en
   pantallas angostas se apilan las columnas, la tabla de tarifas pasa a
   tarjetas (una tabla ancha no cabe en el celular) y los botones de CTA
   ocupan todo el ancho.
   ========================================================================== */
@media (max-width: 768px) {
	.hotel-ficha {
		/* ancho completo en celular y menos espacio superior */
		width: 100%;
		padding: 1.5rem 1rem 0;
	}

	.hotel-nombre {
		font-size: 1.4rem;
	}

	.hotel-header-top {
		flex-direction: column;
		align-items: stretch;
	}
	.hotel-cta-boton-header {
		width: 100%;
		text-align: center;
	}

	.hotel-resumen {
		grid-template-columns: 1fr;
	}
	/* la imagen vuelve a su proporción natural al apilarse las columnas */
	.hotel-resumen-imagen {
		min-height: 0;
	}
	.hotel-resumen-imagen img {
		position: static;
		height: auto;
	}

	.destacados-lista {
		flex-direction: column;
		gap: 0.5rem;
	}
	.destacado-item + .destacado-item {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid var(--nt-color-borde);
		padding-top: 0.5rem;
	}

	.galeria-item {
		width: 80%;
		min-width: 0;
	}

	.hotel-otros-servicios {
		grid-template-columns: 1fr;
		row-gap: 0.75rem;
	}
	.otros-servicios-lista {
		columns: 1;
	}

	/* Tabla de tarifas -> tarjetas apiladas. */
	.tipos-habitacion-tabla,
	.tipos-habitacion-tabla thead,
	.tipos-habitacion-tabla tbody,
	.tipos-habitacion-tabla th,
	.tipos-habitacion-tabla td,
	.tipos-habitacion-tabla tr {
		display: block;
		width: 100%;
	}
	.tipos-habitacion-tabla thead {
		display: none; /* Las etiquetas se repiten con data-label en cada celda. */
	}
	.tipos-habitacion-tabla tr {
		border-bottom: 1px solid var(--nt-color-borde);
		padding: 0.75rem 1rem;
	}
	.tipos-habitacion-tabla td {
		border: none;
		padding: 0.25rem 0;
		display: flex;
		justify-content: space-between;
		gap: 1rem;
	}
	.tipos-habitacion-tabla td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--nt-color-texto-suave);
	}

	.hotel-cta-botones {
		flex-direction: column;
	}
	.hotel-cta-boton {
		width: 100%;
		text-align: center;
	}

	.nt-lightbox {
		padding: 1rem;
	}
	.nt-lightbox-flecha {
		width: 2.5rem;
		height: 2.5rem;
	}
	.nt-lightbox-flecha svg {
		width: 1.2rem;
		height: 1.2rem;
	}
}

/* ==========================================================================
   Cotizador (#motor-precios-widget) — js/cotizador.js
   ========================================================================== */
.nt-cotizador {
	background: var(--nt-color-fondo-suave);
	border: 1px solid var(--nt-color-borde);
	border-radius: var(--nt-radio);
	padding: 1.25rem 1.5rem 1.5rem;
}
.nt-cotizador[hidden],
.nt-cotizador [hidden] {
	display: none !important;
}
.hotel-ficha .nt-cotizador h2 {
	margin-top: 0;
}
.nt-cot-intro {
	margin: 0 0 1rem;
	color: var(--nt-color-texto-suave);
}

.nt-cot-campos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	align-items: end;
}
.nt-cot-campo {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.nt-cot-campo label,
.nt-cot-edades-titulo {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--nt-color-texto-suave);
	margin: 0;
}
.nt-cotizador input[type="date"],
.nt-cotizador select,
.nt-cot-viajeros-btn {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	background: #fff;
	border: 1px solid var(--nt-color-borde);
	border-radius: var(--nt-radio);
	color: var(--nt-color-texto);
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
}
.nt-cot-viajeros-btn {
	text-align: left;
	cursor: pointer;
}
.nt-cotizador input:focus-visible,
.nt-cotizador select:focus-visible,
.nt-cotizador button:focus-visible {
	outline: 2px solid var(--nt-color-titulos);
	outline-offset: 2px;
}

/* Panel de viajeros */
.nt-cot-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin-top: 0.25rem;
	padding: 0.75rem 1rem;
	min-width: 16rem;
	background: #fff;
	border: 1px solid var(--nt-color-borde);
	border-radius: var(--nt-radio);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.nt-cot-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
}
.nt-cot-fila small {
	color: var(--nt-color-texto-suave);
}
.nt-cot-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
.nt-cot-stepper button {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--nt-color-borde);
	border-radius: 50%;
	background: #fff;
	color: var(--nt-color-texto);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.nt-cot-stepper button:hover:not(:disabled) {
	background: var(--nt-color-primario);
	border-color: var(--nt-color-primario);
	color: #fff;
}
.nt-cot-stepper button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.nt-cot-stepper output {
	min-width: 1.5rem;
	text-align: center;
	font-weight: 600;
}
.nt-cot-aviso-limite {
	margin: 0.25rem 0;
	font-size: 0.85rem;
	color: var(--nt-color-texto-suave);
}
.nt-cot-listo {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.5rem;
	border: 1px solid var(--nt-color-borde);
	border-radius: var(--nt-radio);
	background: #fff;
	cursor: pointer;
}

/* Parte que aparece al ingresar datos */
.nt-cot-resto {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--nt-color-borde);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.nt-cot-edades-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.25rem;
}
.nt-cot-edad {
	width: 8rem;
}
.nt-cot-alojamiento {
	max-width: 36rem;
}

/* Resultado */
.nt-cot-resultado {
	background: #fff;
	border: 1px solid var(--nt-color-borde);
	border-radius: var(--nt-radio);
	padding: 1rem 1.25rem;
}
.nt-cot-resultado p {
	margin: 0;
}
.nt-cot-mensaje {
	color: var(--nt-color-texto-suave);
}
.nt-cot-resultado-aviso,
.nt-cot-resultado-error {
	border-color: var(--nt-color-primario);
}
.nt-cot-etiqueta {
	font-weight: 600;
	margin-bottom: 0.5rem !important;
}
.nt-cot-total-titulo {
	font-size: 0.9rem;
	color: var(--nt-color-texto-suave);
}
.nt-cot-total {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--nt-color-titulos);
	line-height: 1.2;
}
.nt-cot-detalle {
	color: var(--nt-color-texto-suave);
	margin-top: 0.25rem !important;
}
.nt-cot-notas {
	margin: 0.75rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	color: var(--nt-color-texto-suave);
}
.nt-cot-notas li {
	margin-bottom: 0.25rem;
}
.nt-cot-acciones {
	display: flex;
}

@media (max-width: 768px) {
	.nt-cotizador {
		padding: 1rem;
	}
	.nt-cot-campos {
		grid-template-columns: 1fr;
	}
	.nt-cot-panel {
		position: static;
		box-shadow: none;
		min-width: 0;
	}
	.nt-cot-alojamiento {
		max-width: none;
	}
	.nt-cot-acciones .hotel-cta-boton {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Precio "Desde" (inc/precios-resumen.php): tarjetas del catálogo y tabla de
   la ficha. Shortcode [nt_precio_hotel].
   ========================================================================== */
.nt-precio-card {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	color: var(--nt-color-texto);
}
.nt-precio-card p {
	margin: 0;
}
.nt-precio-linea {
	line-height: 1.35;
}
.nt-precio-desde,
.nt-precio-tipo {
	color: var(--nt-color-texto-suave);
	font-size: 0.9rem;
}
.nt-precio-valor {
	color: var(--nt-color-titulos);
	font-size: 1.15rem;
	font-weight: 700;
}
.nt-precio-plan {
	display: inline-block;
	margin-left: 0.25rem;
	padding: 0.05rem 0.5rem;
	background: var(--nt-color-fondo-suave);
	border-radius: 999px;
	color: var(--nt-color-texto-suave);
	font-size: 0.75rem;
	white-space: nowrap;
}
.nt-precio-nota {
	margin-top: 0.25rem !important;
	color: var(--nt-color-texto-suave);
	font-size: 0.8rem;
}
.nt-precio-consultar {
	color: var(--nt-color-texto-suave);
	font-weight: 600;
}
/* Etiqueta del plan en la tabla de la ficha: fondo azul #11679c y letra blanca (PC y móvil). */
.tipos-habitacion-tabla .nt-precio-plan {
	background: #11679c;
	color: #fff;
}
.tipos-habitacion-tabla .nt-precio-valor-fila {
	white-space: nowrap; /* "Desde 290.000 COP" nunca se parte en dos líneas */
}
/* En el celular la etiqueta baja a su propia línea, alineada a la derecha, debajo del precio. */
@media (max-width: 768px) {
	.tipos-habitacion-tabla .nt-precio-celda {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.3rem;
		text-align: right;
	}
	.tipos-habitacion-tabla .nt-precio-celda .nt-precio-plan {
		margin-left: 0;
	}
}

/* ==========================================================================
   Catálogo de hoteles (/hoteles/) — Constructor de bucles de Spectra
   Clases que se escriben a mano en cada bloque, en Avanzado →
   "Clase(s) CSS adicional(es)":
     nt-precio-slot    → el código reemplaza el bloque por el precio "Desde"
     nt-destino-slot   → el código reemplaza el bloque por la ciudad
     nt-destacado-slot → el código reemplaza el bloque por "★ Destacado" (solo si el hotel es destacado)
     nt-compartir-slot → el código reemplaza el bloque por moneda + compartir
     nt-card-img       → contenedor de la imagen de la tarjeta (tamaño fijo)
   (inc/precios-resumen.php e inc/compartir.php)
   ========================================================================== */
.nt-destino-card {
	margin: 0 0 0.25rem;
	color: var(--nt-color-texto-suave);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Imagen de las tarjetas del catálogo: mismo tamaño para todas */
.nt-card-img {
	flex: 0 0 400px !important;
	width: 400px !important;
	max-width: 100% !important;
}
.nt-card-img img {
	width: 100% !important;
	height: 300px !important;
	object-fit: cover !important;
	border-radius: var(--nt-radio);
	display: block;
}
@media (max-width: 768px) {
	.nt-card-img { flex: 0 0 auto !important; width: 100% !important; }
	.nt-card-img img { height: 190px !important; }
}

/* Etiqueta "★ Destacado" junto al nombre del hotel (inc/precios-resumen.php) */
.nt-destacado {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
	color: #e33273;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.nt-destacado-estrella {
	flex: 0 0 auto; /* hereda el color del texto (#e33273) */
}

/* -------------------- Ficha: etiqueta "Destacado" junto al nombre -------------------- */
.hotel-nombre-fila {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 0.9rem;
	row-gap: 0.1rem;
	margin-bottom: 0.25rem;
}
.hotel-nombre-fila .hotel-nombre {
	margin-bottom: 0;
}

/* -------------------- Ficha: carrusel de hoteles destacados -------------------- */
.nt-rel {
	margin-top: 1.5rem;
}
.nt-rel-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}
.nt-rel-cabecera h2 {
	margin: 0;
	color: var(--nt-color-titulos);
}
.nt-rel-flechas {
	display: flex;
	gap: 0.5rem;
}
.nt-rel-flechas[hidden] {
	display: none;
}
.nt-rel-flecha {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--nt-color-borde);
	border-radius: 50%;
	background: #fff;
	color: var(--nt-color-texto-suave);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.nt-rel-flecha:hover:not(:disabled),
.nt-rel-flecha:focus-visible {
	background: var(--nt-color-fondo-suave);
}
.nt-rel-flecha:disabled {
	opacity: 0.4;
	cursor: default;
}

.nt-rel-lista {
	--nt-rel-gap: 1rem;
	display: flex;
	gap: var(--nt-rel-gap);
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
.nt-rel-card {
	flex: 0 0 calc((100% - 2 * var(--nt-rel-gap)) / 3);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--nt-color-borde);
	border-radius: var(--nt-radio);
	overflow: hidden;
}
.nt-rel-enlace,
.nt-rel-enlace:visited,
.nt-rel-enlace:hover {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.nt-rel-img {
	aspect-ratio: 4 / 3;
	background: var(--nt-color-fondo-suave);
	overflow: hidden;
}
.nt-rel-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.nt-rel-enlace:hover .nt-rel-img img {
	transform: scale(1.04);
}
.nt-rel-cuerpo {
	padding: 0.85rem 1rem 1rem;
}
.nt-rel-nombre {
	margin: 0;
	font-size: 1.1rem;
	color: var(--nt-color-titulos);
}
.nt-rel-destino {
	margin: 0.1rem 0 0.5rem;
	color: var(--nt-color-texto-suave);
	font-size: 0.9rem;
}

@media (max-width: 900px) {
	.nt-rel-card {
		flex-basis: calc((100% - var(--nt-rel-gap)) / 2);
	}
}
@media (max-width: 600px) {
	.nt-rel-card {
		flex-basis: 82%;
	}
	.nt-rel-flechas {
		display: none; /* en el celular se desliza con el dedo */
	}
}