/*
 * Estilos del tema Raima que theme.json no puede expresar:
 * cabecera fija, el boleto (tarjeta de tour), la portada con el trayecto del avión,
 * secciones y pie. Colores y tipografía salen siempre de las variables de theme.json.
 */

:root {
	--raima-fondo-seccion: var(--wp--preset--color--blanco);
	--raima-borde: #e2e8f0;
	--raima-perforado: #cbd5e1;
}

/* ───── Estructura general ───── */

.raima-principal {
	margin-block-start: 0;
}
.raima-principal--texto {
	padding-block: var(--wp--preset--spacing--60);
}
.raima-principal--completa > .wp-block-post-content > :first-child,
.raima-principal--completa {
	margin-block-start: 0;
}
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

.raima-seccion {
	padding-block: var(--wp--preset--spacing--70);
}
.raima-seccion--gris {
	--raima-fondo-seccion: var(--wp--preset--color--gris-claro);
}
.raima-seccion--arena {
	--raima-fondo-seccion: var(--wp--preset--color--arena);
}
.raima-seccion__cabeza {
	max-width: 46rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.raima-seccion__cabeza > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}
.raima-seccion__pie {
	margin-top: var(--wp--preset--spacing--50);
	justify-content: center;
}
.raima-nota,
.raima-portada__nota {
	color: var(--wp--preset--color--gris-medio);
}
p:empty {
	display: none;
}

/* ───── Cabecera ───── */

.raima-cabecera {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-block: 10px;
	border-bottom: 1px solid var(--raima-borde);
}
.admin-bar .raima-cabecera {
	top: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 600px) {
	.admin-bar .raima-cabecera {
		top: 0;
	}
}
.raima-cabecera__fila {
	gap: var(--wp--preset--spacing--30);
}
.raima-cabecera__logo img {
	display: block;
	height: auto;
}
.raima-cabecera__derecha {
	gap: var(--wp--preset--spacing--40);
}
.raima-cabecera__menu .wp-block-navigation-item__content {
	padding-block: 6px;
	color: var(--wp--preset--color--gris-oscuro);
}
.raima-cabecera__menu .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--naranja-profundo);
}
.raima-cabecera__accion .wp-block-button__link {
	padding: 0.55em 1.2em;
	font-size: 0.95rem;
}
@media (max-width: 420px) {
	.raima-cabecera__accion {
		display: none;
	}
}

/* ───── Botones: estilos "Enlace" y "Oscuro" ───── */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--gris-oscuro);
	border: 2px solid currentColor;
	padding: calc(0.8em - 2px) calc(1.6em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--gris-oscuro);
	color: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--gris-oscuro);
}
.wp-block-button.is-style-oscuro > .wp-block-button__link {
	background: var(--wp--preset--color--gris-oscuro);
	color: var(--wp--preset--color--blanco);
}
.wp-block-button.is-style-oscuro > .wp-block-button__link:hover {
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--gris-oscuro);
}
.wp-block-button.is-style-enlace > .wp-block-button__link {
	background: none;
	padding: 0;
	border-radius: 0;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.wp-block-button.is-style-enlace > .wp-block-button__link:hover {
	background: none;
	color: var(--wp--preset--color--naranja);
}
.raima-lista-enlaces,
.raima-pie__enlaces {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* ───── Portada con el trayecto del avión ───── */

.raima-portada {
	--raima-fondo-seccion: var(--wp--preset--color--turquesa-claro);
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.raima-portada > .wp-block-html {
	margin: 0;
}
.raima-trayecto {
	position: absolute;
	inset: 6% 0 auto 0;
	width: 100%;
	height: 70%;
	pointer-events: none;
}
.raima-trayecto__linea {
	stroke: var(--wp--preset--color--turquesa);
	stroke-width: 2.5;
	stroke-dasharray: 10 12;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: 0.55;
}
.raima-trayecto__avion {
	fill: var(--wp--preset--color--naranja);
}
/* El único movimiento del sitio: la línea "se dibuja" una vez al cargar. */
@media (prefers-reduced-motion: no-preference) {
	.raima-trayecto__linea {
		animation: raima-trazar 2.4s ease-out both;
	}
	@keyframes raima-trazar {
		from { stroke-dashoffset: 1400; }
		to { stroke-dashoffset: 0; }
	}
}
.raima-portada__columnas {
	position: relative;
	gap: var(--wp--preset--spacing--60);
}
.raima-portada__titulo {
	font-size: clamp(2.75rem, 7vw, 5.25rem);
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-block: 0 var(--wp--preset--spacing--40);
	max-width: 11ch;
}
.raima-portada__texto {
	max-width: 34rem;
}
.raima-portada__etiqueta {
	font-weight: 700;
	color: var(--wp--preset--color--turquesa-profundo);
	margin-bottom: var(--wp--preset--spacing--20);
}
.raima-proxima-salida .wp-block-post-template {
	display: block;
}
.raima-proxima-salida .raima-boleto {
	transform: rotate(-1.5deg);
	box-shadow: var(--wp--preset--shadow--elevada);
}

/* ───── El boleto ───── */

.wp-block-post-template:has(.raima-boleto) {
	gap: var(--wp--preset--spacing--50);
}
.raima-boleto {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--blanco);
	border-radius: 22px;
	box-shadow: var(--wp--preset--shadow--suave);
	overflow: hidden;
}
.raima-boleto__imagen {
	margin: 0;
}
.raima-boleto__imagen img {
	border-radius: 0;
	display: block;
}
/* Sin foto: el ícono de Raima flotando sobre turquesa claro (lo genera functions.php). */
.raima-sin-foto {
	margin: 0;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--turquesa-claro);
	border-radius: 16px;
}
.raima-boleto .raima-sin-foto {
	border-radius: 0;
}
.raima-sin-foto > a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.raima-sin-foto__icono {
	width: clamp(56px, 22%, 120px) !important;
	height: auto !important;
	filter: drop-shadow(0 14px 16px rgba(45, 55, 72, 0.22));
}
.raima-boleto__cuerpo {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 24px 20px;
	border-top: 2px dashed var(--raima-perforado);
}
/* Las muescas del perforado toman el color del fondo de la sección. */
.raima-boleto__cuerpo::before,
.raima-boleto__cuerpo::after {
	content: "";
	position: absolute;
	top: -13px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--raima-fondo-seccion);
}
.raima-boleto__cuerpo::before {
	left: -12px;
}
.raima-boleto__cuerpo::after {
	right: -12px;
}
.raima-boleto__cuerpo > * {
	margin: 0;
}
.raima-boleto__tipo {
	color: var(--wp--preset--color--turquesa-profundo);
}
.raima-boleto__titulo {
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.15;
}
.raima-boleto__titulo a {
	color: inherit;
	text-decoration: none;
}
/* Todo el boleto es clicable sin anidar enlaces: el enlace del título se estira. */
.raima-boleto__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.raima-boleto__fechas {
	font-weight: 700;
	font-size: 1.1rem;
}
.raima-boleto__duracion {
	color: var(--wp--preset--color--gris-medio);
	font-size: 0.95rem;
}
.raima-boleto__pie {
	margin-top: auto !important;
	padding-top: 14px;
	gap: 12px;
}
.raima-boleto__precio {
	margin: 0;
	font-weight: 800;
	color: var(--wp--preset--color--naranja-profundo);
	font-size: 1.1rem;
}
.raima-boleto__enlace {
	position: relative;
	z-index: 2;
	font-weight: 700;
	white-space: nowrap;
}
.raima-boleto:focus-within {
	outline: 3px solid var(--wp--preset--color--turquesa-profundo);
	outline-offset: 3px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.raima-boleto {
		transition: transform 0.18s ease;
	}
	.raima-boleto:hover {
		transform: translateY(-3px);
	}
}

/* ───── Servicios y valores ───── */

.raima-servicios,
.raima-servicios-detalle,
.raima-contacto {
	gap: var(--wp--preset--spacing--60);
}
.raima-lista-servicios {
	list-style: none;
	padding: 0;
	margin: 0;
}
.raima-lista-servicios li {
	padding-block: 14px;
	border-bottom: 1px solid var(--raima-borde);
}
.raima-lista-servicios li:first-child {
	padding-top: 0;
}
.raima-lista-servicios strong {
	color: var(--wp--preset--color--gris-oscuro);
}
.raima-pasos {
	counter-reset: paso;
	list-style: none;
	padding: 0;
}
.raima-pasos li {
	counter-increment: paso;
	position: relative;
	padding: 0 0 14px 44px;
}
.raima-pasos li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: -2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--naranja);
	font-weight: 800;
}
.raima-seccion__titulo-ancho {
	max-width: 20ch;
	margin-bottom: var(--wp--preset--spacing--50);
}
.raima-valores {
	gap: var(--wp--preset--spacing--50);
}
.raima-valor {
	border-top: 3px solid var(--wp--preset--color--naranja);
	padding-top: var(--wp--preset--spacing--30);
}
.raima-valor > * {
	margin-block: 0 8px;
}

/* ───── Llamado naranja ───── */

.raima-llamado {
	padding-block: var(--wp--preset--spacing--60);
}
.raima-llamado__titulo {
	margin-top: 0;
}
.raima-llamado .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--gris-oscuro);
}
.raima-llamado__botones {
	justify-content: flex-end;
}
@media (max-width: 781px) {
	.raima-llamado__botones {
		justify-content: flex-start;
	}
}

/* ───── Encabezados de página y listado ───── */

.raima-encabezado {
	padding-block: var(--wp--preset--spacing--60);
}
.raima-encabezado__titulo {
	margin-block: 0 var(--wp--preset--spacing--20);
}
.raima-encabezado > * {
	max-width: var(--wp--style--global--wide-size) !important;
}
/* Líneas de menos de 80 caracteres sin despegar el texto del borde izquierdo:
   la caja ocupa todo el ancho y el relleno derecho recorta las líneas. */
.raima-encabezado__texto {
	margin-top: 0;
	padding-inline-end: max(0px, calc(100% - 40rem));
}
.raima-listado {
	padding-top: var(--wp--preset--spacing--50);
}
.raima-listado__filtros {
	margin-bottom: var(--wp--preset--spacing--50);
}
.raima-listado .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

/* ───── Detalle del tour ───── */

.raima-principal--tour {
	padding-top: var(--wp--preset--spacing--40);
}
.raima-migas {
	font-size: var(--wp--preset--font-size--pequena);
	margin-bottom: var(--wp--preset--spacing--30);
}
.raima-detalle {
	gap: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--70);
}
.raima-detalle__terminos {
	gap: 12px;
	margin-top: var(--wp--preset--spacing--40);
}
.raima-detalle__titulo {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.raima-detalle__resumen {
	font-size: var(--wp--preset--font-size--mediana);
	color: var(--wp--preset--color--gris-medio);
}
@media (min-width: 782px) {
	.raima-detalle__lateral > .raima-ficha {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px);
	}
}

/* ───── Íconos de redes ───── */

.raima-redes {
	gap: 12px;
	margin-top: var(--wp--preset--spacing--30);
}
.raima-pie .raima-redes .wp-social-link:hover {
	color: var(--wp--preset--color--naranja) !important;
}

/* ───── Contacto ───── */

.raima-mapa {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 16px;
	margin-top: var(--wp--preset--spacing--40);
}

/* ───── Pie ───── */

.raima-pie {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	margin-top: 0;
}
.raima-pie a {
	color: inherit;
}
.raima-pie h2,
.raima-pie h3 {
	color: var(--wp--preset--color--blanco);
}
.raima-pie__logo {
	margin-top: 0;
}
.raima-pie__logo img {
	display: block;
	height: auto;
}
.raima-pie__lema {
	color: var(--wp--preset--color--turquesa);
	font-weight: 700;
}
.raima-pie__dato {
	margin-block: 0 6px;
	opacity: 0.9;
}
.raima-pie .raima-horario {
	margin-top: var(--wp--preset--spacing--20);
	opacity: 0.9;
}
.raima-pie__base {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: var(--wp--preset--font-size--pequena);
	opacity: 0.85;
	/* En celular, el RNC y el enlace a la política no caben en una línea:
	 * que el enlace baje entero a la siguiente en vez de partirse en dos. */
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--40);
}
.raima-pie__base p {
	white-space: nowrap;
}
/* Enlace a la política: blanco como el texto legal y mamey al pasar el ratón,
 * igual que los íconos sociales del pie. */
.raima-pie .raima-enlace-privacidad a:hover,
.raima-pie .raima-enlace-privacidad a:focus-visible {
	color: var(--wp--preset--color--naranja);
}
/* Deja sitio al botón flotante de WhatsApp para que no tape el texto legal. */
@media (max-width: 600px) {
	.raima-pie {
		padding-bottom: 96px;
	}
}