/**
 * Vela Destinos — cayos de pernocta.
 *
 * Medidas leídas del PDF del equipo de diseño, no estimadas. La baraja de la
 * maqueta tiene cuatro tarjetas; medido sobre la página de 1920 px:
 *
 *   · anchos            466 · 391,5 · 313,5 · 236,9
 *   · altos             682 · 615,5 · 492,9 · 372,4
 *   · ejes en x         944 · 753,4 · 574,8 · 411,1
 *   · borde derecho de la tarjeta frontal en 1177
 *
 * De ahí salen las tres constantes de la baraja: cada tarjeta encoge un 16,4%
 * respecto a la de delante —una progresión lineal, no geométrica— y los ejes
 * van separados 177,7 px, un 38,1% del ancho de la frontal. El radio es el
 * 28,5% del ancho, que es justo lo que hace que encoja solo con la escala.
 *
 *   · titular           Einer Grotesk 39 px, Light + Heavy
 *   · rótulo            Tamara Falies 82 px
 *   · descripción       Montserrat 18/24 px
 *   · fondo             #0C3846 a sangre, franja de 749,9 px de alto
 *
 * Las medidas van en cqi —tantos por ciento del ancho de la sección— y no en
 * vw: así la baraja se comporta igual en la portada, en la previsualización
 * del panel y dentro de una columna estrecha de Elementor. 1 cqi = 17,72 px,
 * el 1% de los 1772 px de la maqueta. Ver docs/marca.md.
 *
 * El alineado y las familias salen de los tokens del tema; los valores de
 * reserva permiten usar el plugin sin él.
 */

.destinos {
	--destinos-fondo: #0c3846;
	--destinos-texto: #fff;
	--destinos-script: #fff;
	--destinos-prof: 4;
	--destinos-merma: .164;
	/* Fracción del contenedor que puede ocupar la tarjeta frontal para que el
	   abanico entero quepa, y cuánto hay que correrlo a la derecha para que no
	   se salga por ese lado. Los calcula el PHP a partir de la profundidad. */
	--destinos-encaje: .527;
	--destinos-centrado: .4185;
	--destinos-velo: .22;

	/* 38,1% del ancho de la tarjeta entre eje y eje. Va en porcentaje porque
	   translateX() lo resuelve contra el ancho del propio elemento, así que
	   la baraja conserva su forma a cualquier tamaño. */
	--destinos-salto: 38.1%;

	position: relative;
	/* Las tarjetas del fondo se salen por la izquierda a propósito: en la
	   maqueta la última la corta el borde de la pantalla. */
	overflow: hidden;
	background: var(--destinos-fondo);
	color: var(--destinos-texto);
	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);
}

/* (749,9 - 682) / 2 = 34 px de aire arriba y abajo: la tarjeta frontal ocupa
   casi toda la franja. */
/*
 * Dos elementos y no uno: el interior fija el ancho y hace de contenedor de
 * consulta, y la rejilla, que cuelga de él, es la que se reorganiza. Tienen
 * que ser distintos porque una consulta de contenedor no alcanza al propio
 * contenedor, solo a sus descendientes: con la cuadrícula puesta en el
 * interior, el corte a una columna no llegaba a aplicarse nunca.
 */
.destinos__interior {
	container-type: inline-size;
	container-name: destinos;

	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-ancho, 1772px));
	margin-inline: auto;
}

.destinos__rejilla {
	display: grid;
	/* La divisoria cae donde acaba la tarjeta frontal en la maqueta: 1103 px
	   de los 1772 de la franja. Con la baraja pegada al final de su columna y
	   el texto al final de la suya, las dos caen donde el diseño las pone sin
	   necesidad de posicionar nada a mano. */
	grid-template-columns: 62.24% 1fr;
	align-items: center;
	gap: 0;

	padding-block: clamp(24px, 1.92cqi, 34px);
}

/* ================================================================= baraja */

.destinos__baraja {
	position: relative;
	justify-self: end;
	width: clamp(190px, 26.3cqi, 466px);
	aspect-ratio: 466 / 682;
}

/*
 * Cada tarjeta se coloca sola a partir de su profundidad: --destinos-d vale 0
 * en la de delante, 1 en la siguiente, y así. El JavaScript no calcula
 * posiciones ni toca estilos uno a uno; solo reparte ese número, y el CSS
 * hace el resto. Es lo que permite que la baraja salga bien montada aunque el
 * JavaScript no llegue nunca.
 */
.destinos__tarjeta {
	position: absolute;
	inset: 0;
	z-index: calc(100 - var(--destinos-d));

	display: block;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	/* 28,5% del ancho de la tarjeta: 133 px en la frontal de la maqueta. */
	border-radius: clamp(16px, 7.5cqi, 133px);
	background: #0e4456;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	transform:
		translateX(calc(var(--destinos-d) * var(--destinos-salto) * -1))
		scale(calc(1 - (var(--destinos-d) * var(--destinos-merma))));

	translate: 0 0;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);

	transition:
		transform .72s var(--vela-curva, cubic-bezier(.22, .61, .36, 1)),
		translate .3s var(--vela-curva, cubic-bezier(.22, .61, .36, 1)),
		box-shadow .3s ease,
		opacity .45s ease;
}

.destinos__tarjeta.is-frente {
	cursor: default;
}

/*
 * Hover y foco: la tarjeta se levanta, la foto se acerca dentro del marco y el
 * velo se abre, así que una del fondo se enciende al pasar por encima y se ve
 * que se puede clicar.
 *
 * El realce va en `translate` y en un `scale` de la imagen, y no en el
 * `transform` de la tarjeta, a propósito: ese transform es el que coloca la
 * baraja y tiene una transición larga —0,72 s— pensada para el barajado. Si el
 * hover compartiera esa propiedad, compartiría también esa lentitud y se
 * sentiría pastoso. Con propiedades separadas cada cosa lleva su tiempo.
 */
.destinos__tarjeta:hover:not(.is-oculta),
.destinos__tarjeta:focus-visible {
	translate: 0 -14px;
	box-shadow: 0 22px 46px rgba(0, 0, 0, .38);
}

.destinos__tarjeta:hover:not(.is-oculta) .destinos__img,
.destinos__tarjeta:hover:not(.is-oculta) .destinos__hueco,
.destinos__tarjeta:focus-visible .destinos__img,
.destinos__tarjeta:focus-visible .destinos__hueco {
	scale: 1.06;
}

/* El velo se abre a un tercio: la de delante ya lo tiene a cero, así que esto
   solo se nota en las de atrás, que es donde hace falta. */
.destinos__tarjeta:hover:not(.is-oculta) .destinos__velo,
.destinos__tarjeta:focus-visible .destinos__velo {
	opacity: calc(var(--destinos-d) * var(--destinos-velo) * .34);
}

/* Más allá de la profundidad elegida no hay nada que enseñar: la tarjeta se
   queda esperando su turno detrás de la última visible, sin pintarse. */
.destinos__tarjeta.is-oculta {
	opacity: 0;
	pointer-events: none;
}

/*
 * El `!important` no es pereza: Elementor declara `.elementor img{height:auto}`
 * —dos componentes de especificidad— y eso gana a una sola clase, así que sin
 * él la foto se salía de la tarjeta (602 px dentro de una de 496) y el
 * `object-fit` no llegaba ni a aplicarse, porque sin altura definida no tiene
 * caja que recortar.
 */
.destinos__img,
.destinos__hueco {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	scale: 1;
	transition: scale .45s var(--vela-curva, cubic-bezier(.22, .61, .36, 1));
}

.destinos__hueco {
	background: linear-gradient(150deg, #135367, #0b3140);
}

/* El velo es lo que da la sensación de profundidad: cuanto más atrás está la
   tarjeta, más se la come el fondo de la sección. */
.destinos__velo {
	position: absolute;
	inset: 0;
	background: var(--destinos-fondo);
	opacity: calc(var(--destinos-d) * var(--destinos-velo));
	transition: opacity .72s var(--vela-curva, cubic-bezier(.22, .61, .36, 1));
	pointer-events: none;
}

.destinos__tarjeta:focus-visible {
	outline: 3px solid var(--destinos-texto);
	outline-offset: 4px;
}

/* ============================================================== el panel */

.destinos__panel {
	justify-self: end;
	/* 601 px de caja de texto en la maqueta; se dan 610 para que la última
	   línea del párrafo no se parta, que es donde se nota el redondeo. */
	width: min(100%, 34.42cqi);
	max-width: 610px;
	text-align: center;

	/* El bloque de texto no está centrado en la franja: la maqueta lo sube
	   85 px. Como el panel está centrado en su celda, un margen inferior lo
	   desplaza justo la mitad, así que aquí van los 171. */
	margin-bottom: clamp(0px, 9.65cqi, 171px);
}

.destinos__titulo {
	/* 89,3 px entre la línea base del titular y la del rótulo. */
	margin: 0 0 clamp(26px, 5.04cqi, 89px);
	font-family: var(--vela-fuente-titulo, var(--vela-fuente, sans-serif));
	font-size: var(--vela-txt-xl, 21px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--destinos-texto);
}

.destinos__ligero {
	font-weight: 300;
}

.destinos__fuerte {
	font-weight: 900;
}

/* Las fichas se apilan en la misma celda para que al cambiar de cayo el
   bloque no dé un salto de altura: manda la más larga. */
.destinos__fichas {
	display: grid;
}

.destinos__ficha {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity .45s ease,
		transform .45s var(--vela-curva, cubic-bezier(.22, .61, .36, 1)),
		visibility 0s linear .45s;
}

.destinos__ficha.is-activa {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s, 0s, 0s;
}

.destinos__nombre {
	margin: 0;
	font-family: var(--vela-fuente-script, "Tamara Falies", "Brush Script MT", cursive);
	font-size: var(--vela-txt-3xl, 34px);
	font-weight: 400;
	/* Con las métricas que corrige el tema, este interlineado deja el rótulo
	   justo encima del párrafo, como en la maqueta. Ver docs/marca.md. */
	line-height: 1.333;
	color: var(--destinos-script);
}

.destinos__descripcion {
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 300;
	line-height: 1.333;
	color: var(--destinos-texto);
}

.destinos__descripcion p {
	margin: 0 0 .8em;
}

.destinos__descripcion p:last-child {
	margin-bottom: 0;
}

.destinos__descripcion strong,
.destinos__descripcion b {
	font-weight: 700;
}

/* ============================================================== controles */

/*
 * Las flechas viven dentro de la rejilla, y eso tiene un motivo.
 *
 * Apilada, la baraja y el texto son dos filas y las flechas tienen que caer
 * en el hueco entre ambas, a la misma distancia de una y de otro. Estando
 * dentro, ese reparto lo hace el propio `gap` de la rejilla: no hay que medir
 * la baraja ni calcular ningún desplazamiento, y sigue cuadrando aunque
 * cambien la profundidad, las fotos o el número de cayos.
 *
 * En dos columnas se salen del flujo y se centran sobre la ventana. El bloque
 * contenedor es .destinos__interior —la contención que trae `container-type`
 * lo convierte en uno—, y como va centrado, su 50% es también el centro de la
 * ventana. De ahí que baste con 100vw para llegar a los dos bordes sea cual
 * sea el ancho de pantalla, incluso por encima de los 1772 de la maqueta.
 */
.destinos__controles {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 200;
	transform: translate(-50%, -50%);

	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100vw;
	max-width: 100vw;
	padding-inline: clamp(8px, 1.2vw, 24px);

	/* La caja cruza toda la ventana: si capturara el puntero, taparía la
	   baraja entera. Solo los botones responden. */
	pointer-events: none;
}

.destinos__flecha {
	pointer-events: auto;
	z-index: 200;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--destinos-flecha, clamp(34px, 2.6cqi, 46px));
	aspect-ratio: 1;
	padding: 0 0 3px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--destinos-texto);
	font-size: calc(var(--destinos-flecha, 40px) * .6);
	line-height: 1;
	cursor: pointer;

	transition:
		background-color .25s ease,
		border-color .25s ease,
		transform .25s var(--vela-curva, cubic-bezier(.22, .61, .36, 1));
}

.destinos__flecha:hover,
.destinos__flecha:focus-visible {
	background: rgba(255, 255, 255, .26);
	border-color: rgba(255, 255, 255, .8);
}

.destinos__flecha:focus-visible {
	outline: 2px solid var(--destinos-texto);
	outline-offset: 3px;
}

.destinos__flecha--prev:hover,
.destinos__flecha--prev:focus-visible {
	transform: translateX(-3px);
}

.destinos__flecha--next:hover,
.destinos__flecha--next:focus-visible {
	transform: translateX(3px);
}

.destinos__puntos {
	position: relative;
	z-index: 200;
	display: flex;
	justify-content: center;
	gap: 10px;
	padding-bottom: 26px;
}

.destinos__punto {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}

.destinos__punto.is-activo {
	background: var(--destinos-texto);
	transform: scale(1.35);
}

.destinos__aviso {
	margin: 24px 0;
	padding: 12px 16px;
	border-left: 3px solid #997952;
	background: rgba(153, 121, 82, .08);
	font-size: var(--vela-txt-sm, 13px);
}

/* ============================================================== responsive */

/*
 * Por debajo del ancho de la maqueta el párrafo se estrecha y sus líneas
 * llegan de lado a lado, así que la cola del rótulo manuscrito deja de caer
 * sobre el margen y cae sobre las palabras. Un poco de aire lo resuelve sin
 * tocar la composición de escritorio, donde la maqueta quiere justamente ese
 * cruce.
 */
@container destinos ( max-width: 1400px ) {
	.destinos__descripcion {
		margin-top: clamp(6px, 1.2cqi, 16px);
	}
}

/*
 * Los cortes son de contenedor y no de ventana: lo que decide si la baraja
 * cabe al lado del texto es el hueco que tiene la sección, no el tamaño de
 * la pantalla. Así la misma sección se comporta bien en la portada, en una
 * columna estrecha de Elementor y en la previsualización del panel.
 */
/* Con la franja aún a dos columnas pero ya estrecha, las flechas encogen para
   no montarse sobre el texto, que a esos anchos llega casi al gutter. */
@container destinos ( max-width: 1200px ) {
	.destinos__controles {
		--destinos-flecha: 36px;

		padding-inline: 6px;
	}
}

@container destinos ( max-width: 980px ) {
	.destinos__rejilla {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: clamp(26px, 4cqi, 48px);
	}

	/*
	 * Vuelven al flujo como fila de en medio: la baraja arriba, las flechas y
	 * el texto debajo. El hueco de arriba y el de abajo son el mismo `gap` de
	 * la rejilla, así que quedan a la misma distancia de las fotos y del texto
	 * sin más cuentas.
	 *
	 * Y crecen a 44 px: es la medida de un objetivo que se acierta con el
	 * pulgar sin apuntar.
	 */
	.destinos__controles {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
		padding-inline: 0;
		justify-content: center;
		gap: 18px;

		--destinos-flecha: 44px;
	}

	/*
	 * Apilada, la baraja ya no tiene una columna donde sangrar: lo que haya a
	 * su derecha es el borde del contenedor. Así que el ancho sale del encaje
	 * —lo que cabe del abanico— y no de una medida inventada, y el
	 * desplazamiento deja la tarjeta frontal dentro. El abanico mide casi el
	 * doble que la tarjeta de delante; fijar el ancho a ojo la desbordaba.
	 */
	.destinos__baraja {
		justify-self: center;
		width: min(466px, calc(100% * var(--destinos-encaje, .59)));
		transform: translateX(calc(var(--destinos-centrado, .32) * 100%));
	}

	.destinos__panel {
		justify-self: center;
		width: min(100%, 62cqi);
		max-width: 610px;
		margin-bottom: 0;
	}

	.destinos__titulo {
		margin-bottom: clamp(20px, 3.4cqi, 40px);
	}

}

@container destinos ( max-width: 560px ) {
	.destinos__panel {
		width: 100%;
	}

}

@media ( prefers-reduced-motion: reduce ) {
	.destinos__tarjeta,
	.destinos__velo,
	.destinos__ficha,
	.destinos__flecha,
	.destinos__punto,
	.destinos__img,
	.destinos__hueco {
		transition-duration: .01ms;
	}

	/* El realce sigue existiendo —hace falta saber qué se está señalando— pero
	   sin desplazar ni acercar nada: solo el velo y la sombra. */
	.destinos__tarjeta:hover:not(.is-oculta),
	.destinos__tarjeta:focus-visible {
		translate: 0 0;
	}

	.destinos__tarjeta:hover:not(.is-oculta) .destinos__img,
	.destinos__tarjeta:hover:not(.is-oculta) .destinos__hueco,
	.destinos__tarjeta:focus-visible .destinos__img,
	.destinos__tarjeta:focus-visible .destinos__hueco {
		scale: 1;
	}
}