/**
 * La cotización rápida: el botón y el diálogo.
 *
 * Medidas tomadas de la página 2 del esqueleto, sobre una maqueta de 956 pt de
 * ancho que representa 1772 px (1 pt = 1,853 px):
 *
 *   · diálogo ............ 531,5 × 484,8 pt  →  985 × 898 px
 *   · panel del barco .... 210 pt de 531,5   →  39,5 %
 *   · panel de pasos ..... 321,5 pt          →  60,5 %
 *   · barra del pie ...... 43,4 pt de alto, en #F5FDFF
 *
 * Y la paleta, que resultó ser la del tema salvo un dorado claro:
 *
 *   #0c3846  petróleo      → --vela-petroleo
 *   #997953  dorado        → --vela-dorado
 *   #b4e0e1  turquesa suave→ --vela-turquesa-suave   (las cifras del total)
 *   #cfbe8b  dorado claro  → propio de esta sección
 *
 * Las medidas van en `px` con `clamp` y no en `cqi`: un diálogo se mide contra
 * la ventana, que es lo único que lo contiene. El `cqi` del resto del proyecto
 * es para secciones que viven dentro de una columna.
 */

.vela-cot {
	--cot-petroleo:  var(--vela-petroleo, #0c3846);
	--cot-dorado:    var(--vela-dorado, #997953);
	--cot-dorado-cl: #cfbe8b;
	--cot-turquesa:  var(--vela-turquesa-suave, #b4e0e1);
	--cot-alterno:   var(--vela-fondo-alt, #f5fdff);
	--cot-curva:     var(--vela-curva, cubic-bezier(.22, .61, .36, 1));

	/*
	 * La escala del tema, copiada a nombres propios.
	 *
	 * Hace falta el rodeo porque una variable no puede referirse a si misma:
	 * `--vela-txt-xs: calc(var(--vela-txt-xs) * .92)` es un ciclo y el
	 * navegador lo descarta. Aqui se guardan los valores del tema y en
	 * `__marco` —que es un descendiente— se vuelven a definir ya encogidos.
	 */
	--cot-t-xs:  var(--vela-txt-xs, 11px);
	--cot-t-sm:  var(--vela-txt-sm, 13px);
	--cot-t-md:  var(--vela-txt-md, 15px);
	--cot-t-lg:  var(--vela-txt-lg, 19px);
	--cot-t-xl:  var(--vela-txt-xl, 24px);
	--cot-t-2xl: var(--vela-txt-2xl, 32px);

	position: fixed;
	inset: 0;
	/* Por encima de la burbuja de contacto (9990): un diálogo tapa lo que
	   flota, no al revés. */
	z-index: 10000;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0px, 3vw, 40px);

	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);
	color: var(--cot-petroleo);
}

.vela-cot[hidden] {
	display: none;
}

/* Con sesión iniciada, la barra de WordPress va fija arriba y tapaba el borde
   del diálogo —incluido el botón de cerrar—. Solo lo ve quien edita, pero es
   justo quien más veces lo abre. */
body.admin-bar .vela-cot {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .vela-cot {
		top: 46px;
	}
}

.vela-cot *,
.vela-cot *::before,
.vela-cot *::after {
	box-sizing: border-box;
}

/* ============================================================== el botón */

/*
 * El botón tiene que leerse sobre cualquier cosa.
 *
 * Es un shortcode: hoy vive sobre una franja con foto oscura, mañana puede
 * estar sobre fondo blanco. Antes el `hover` lo llevaba a petróleo, y sobre la
 * foto oscura de la maqueta eso lo hacía casi desaparecer —pasar el ratón lo
 * escondía en lugar de destacarlo, que es lo contrario de lo que debe hacer.
 *
 * Ahora el reposo lleva un filo blanco por dentro, que le da borde cuando el
 * fondo es de un turquesa parecido, y el `hover` ACLARA en vez de oscurecer y
 * añade un anillo. Sobre oscuro manda el anillo; sobre claro, el relleno. Se
 * ve en los dos.
 */
.vela-cot-boton {
	position: relative;
	/* El barrido se recorta contra la píldora en vez de salirse por los
	   extremos redondeados. */
	overflow: hidden;
	isolation: isolate;

	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .72em 1.5em;

	border: 0;
	border-radius: 999px;
	background: var(--vela-turquesa, #5eb0c8);
	color: #fff;

	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);
	font-size: var(--vela-txt-md, 15px);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;

	box-shadow:
		0 6px 18px rgba(8, 40, 50, .22),
		inset 0 0 0 1px rgba(255, 255, 255, .22);

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

/*
 * El relleno entra barriendo, no de golpe.
 *
 * Un cambio seco de color se ve viejo, y además en un botón grande el salto
 * es brusco. El barrido lo hace una capa propia que entra desde la izquierda:
 * se anima `translate`, que el navegador resuelve en la tarjeta gráfica, en
 * vez de `background-color`, que obliga a repintar.
 *
 * Va en blanco, y no en petróleo como antes, por lo de siempre: sobre la foto
 * oscura de la maqueta el blanco es lo que más contrasta. Para que tampoco se
 * pierda sobre una página blanca, el estado de `hover` saca un filo en
 * petróleo que le devuelve el borde.
 */
.vela-cot-boton::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;

	background: #fff;
	translate: -101% 0;

	transition: translate .42s var(--vela-curva, cubic-bezier(.22, .61, .36, 1));
}

.vela-cot-boton:hover::before,
.vela-cot-boton:focus-visible::before {
	translate: 0 0;
}

/* El contenido, por encima de esa capa. */
.vela-cot-boton__marca,
.vela-cot-boton__texto {
	position: relative;
	z-index: 1;
}

.vela-cot-boton:hover,
.vela-cot-boton:focus-visible {
	color: var(--vela-petroleo, #0c3846);
	transform: translateY(-2px);

	box-shadow:
		0 14px 32px rgba(8, 40, 50, .32),
		inset 0 0 0 1px rgba(12, 56, 70, .28);
}

/* El icono acompaña al barrido con un empujón corto. */
.vela-cot-boton:hover .vela-cot-boton__marca {
	transform: translateX(2px) scale(1.06);
}

/* Al pulsar se hunde: sin esto el botón no acusa el clic. */
.vela-cot-boton:active {
	transform: translateY(0);
	box-shadow:
		0 5px 14px rgba(8, 40, 50, .3),
		inset 0 0 0 1px rgba(12, 56, 70, .28);
}

.vela-cot-boton:focus-visible {
	outline: 2px solid var(--vela-dorado, #997953);
	outline-offset: 3px;
}

.vela-cot-boton__marca {
	display: inline-flex;
	font-size: 1.15em;
	transition: transform .42s var(--vela-curva, cubic-bezier(.22, .61, .36, 1));
}

/*
 * Dos rótulos, y se enseña el que cabe.
 *
 * Medido: «Click aquí para crear una cotización rápida» pide 401 px con el
 * relleno y el icono, y en un móvil de 390 el botón dispone de unos 330 —el
 * contenedor del hero se lleva 70 px—. Se partía en dos líneas.
 *
 * La salida fácil era encoger la letra, y es la equivocada: para que entrara
 * había que bajar a 12 px, y la llamada a la acción principal acabaría siendo
 * el texto más pequeño de la pantalla. Además el sistema de diseño dice justo
 * eso: el texto que se lee no encoge con su columna.
 *
 * Así que por debajo del corte cambia lo que dice, no cómo se ve. El corte
 * está en 600 px porque a 520 el botón medía 393 y ya no le entraba; 600 deja
 * margen para el relleno que Elementor añade según el ancho.
 *
 * Si el rótulo corto no se configuró, no se imprime y aquí no hay nada que
 * intercambiar: el largo se queda con sus dos líneas.
 */
.vela-cot-boton__texto--corto {
	display: none;
}

@media (max-width: 600px) {
	/*
	 * El `:not()` no es adorno: sin él esta regla también alcanza al rótulo
	 * corto —comparten la clase `__texto`— y con 0,3,0 de especificidad le
	 * gana al `display: inline` de abajo, que tiene 0,1,0. El resultado era un
	 * botón sin ninguna palabra dentro.
	 */
	.vela-cot-boton:has(.vela-cot-boton__texto--corto) .vela-cot-boton__texto:not(.vela-cot-boton__texto--corto) {
		display: none;
	}

	.vela-cot-boton__texto--corto {
		display: inline;
	}

	/* Con el texto corto sobra sitio: la píldora deja de ir apretada. */
	.vela-cot-boton {
		padding: .78em 1.6em;
	}
}

/* ================================================================ el telón */

.vela-cot__telon {
	position: absolute;
	inset: 0;
	background: rgba(6, 30, 38, .62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	opacity: 0;
	transition: opacity .3s var(--cot-curva);
}

.vela-cot[data-abierto] .vela-cot__telon {
	opacity: 1;
}

/* ================================================================ el marco */

/*
 * El modal se lee un punto mas pequeño que el resto del sitio.
 *
 * Es un dialogo denso: dentro caben la ficha del barco, el total, lo que
 * incluye, lo que no, los extras y cuatro pasos. Con la escala del sitio
 * tal cual, el conjunto pesa demasiado para el hueco que tiene.
 *
 * Un solo mando —`--cot-escala`— y nada mas que tocar: las 44 reglas que ya
 * usaban `var(--vela-txt-*)` encogen solas porque lo que se redefine son esas
 * mismas variables, aqui dentro. Fuera del modal no cambia nada.
 *
 * El `max()` es la parte que importa. Sin suelo, un factor que se ve bien en
 * escritorio deja las listas de «lo que incluye» en nueve pixeles en un movil,
 * y eso ya no se lee: es justo el fallo contra el que se escribio la escala
 * del tema. Ningun texto baja de 10px por mucho que se apriete el factor.
 */
.vela-cot__marco {
	--cot-escala: .92;

	--vela-txt-xs:  max(10px,   calc(var(--cot-t-xs)  * var(--cot-escala)));
	--vela-txt-sm:  max(11px,   calc(var(--cot-t-sm)  * var(--cot-escala)));
	--vela-txt-md:  max(12.5px, calc(var(--cot-t-md)  * var(--cot-escala)));
	--vela-txt-lg:  max(15px,   calc(var(--cot-t-lg)  * var(--cot-escala)));
	--vela-txt-xl:  max(18px,   calc(var(--cot-t-xl)  * var(--cot-escala)));
	--vela-txt-2xl: max(24px,   calc(var(--cot-t-2xl) * var(--cot-escala)));

	position: relative;
	display: grid;
	/* 39,5 / 60,5, medido en la maqueta. */
	grid-template-columns: 39.5fr 60.5fr;

	/*
	 * La fila, acotada a mano.
	 *
	 * Con las filas implícitas (`auto`) el grid crece con su contenido y el
	 * `max-height` del marco no lo frena: el pie con «Continuar» se quedaba
	 * fuera de la pantalla y el cuerpo no llegaba a poder desplazarse nunca.
	 * `minmax(0, 1fr)` obliga a la fila a caber, y de ahí para abajo cada
	 * columna reparte lo suyo.
	 */
	grid-template-rows: minmax(0, 1fr);

	width: min(1100px, 100%);
	height: min(92vh, 900px);
	max-height: 100%;

	border-radius: clamp(0px, 1.4vw, 22px);
	background: #fff;
	box-shadow: 0 40px 100px rgba(4, 26, 34, .45);
	overflow: hidden;

	/* Entra desde abajo y crece un pelo: es lo que hace que no parezca que
	   alguien ha encendido una luz. */
	opacity: 0;
	translate: 0 18px;
	scale: .985;
	transition:
		opacity   .32s var(--cot-curva),
		translate .32s var(--cot-curva),
		scale     .32s var(--cot-curva);
}

.vela-cot[data-abierto] .vela-cot__marco {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

/* ====================================================== panel del barco */

.vela-cot__barco {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Sin esto un hijo flexible no deja encoger a su padre, y el scroll
	   interno nunca llega a activarse. */
	min-height: 0;
	padding: 0 0 22px;

	background: var(--cot-petroleo);
	color: #fff;
	overflow-y: auto;
}

/*
 * La foto manda sobre su alto, no la imagen que le toque.
 *
 * El `min-height: 0` no es defensivo, es lo que hace que el `aspect-ratio`
 * sirva de algo. Un item flex lleva `min-height: auto`: no puede encoger por
 * debajo del alto natural de su contenido. Con una foto vertical dentro
 * —la del Leopard es 768x1024— la imagen estiraba la caja y la proporcion se
 * ignoraba: 425 de ancho por 566 de alto, que es 3:4, la inversa de lo
 * declarado. Empujaba el total 250px hacia abajo, fuera de la vista.
 *
 * Es el mismo fallo que tenian las tarjetas de extras, y se arregla igual.
 */
.vela-cot__foto {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
	min-height: 0;
}

.vela-cot__foto[hidden] {
	display: none;
}

.vela-cot .vela-cot__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Un velo por abajo para que el nombre se lea sobre cualquier foto. */
.vela-cot__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 40, 50, .92) 4%, rgba(8, 40, 50, 0) 55%);
}

.vela-cot__ficha {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 0 22px 16px;
}

.vela-cot__sede {
	display: flex;
	align-items: center;
	gap: .4em;
	margin: 0 0 2px;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .9;
}

.vela-cot__nombre {
	margin: 0;
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-2xl, 32px);
	font-weight: 200;
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.vela-cot__meta {
	margin: 6px 0 0;
	color: var(--cot-dorado-cl);
	font-size: var(--vela-txt-xs, 11px);
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ el total */

.vela-cot__total {
	margin: 18px 22px 0;
	padding: 14px 16px;
	border: 1px solid rgba(180, 224, 225, .35);
	border-radius: 14px;
}

.vela-cot__total-etq {
	margin: 0;
	font-size: var(--vela-txt-xs, 11px);
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .85;
}

.vela-cot__total-cifra {
	margin: 2px 0 0;
	color: var(--cot-turquesa);
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	/*
	 * Salia de un `clamp` a mano y por eso no seguia a la escala del modal.
	 * Ahora es `2xl` con un factor, y el factor tiene motivo: entre `xl` y
	 * `2xl` hay un salto de 23 a 32px, y bajar un escalon entero dejaba la
	 * cifra mas pequeña que el nombre del barco, que esta justo encima. El
	 * .88 la baja lo suficiente para que deje de gritar sin perder el peso
	 * que le toca por ser lo que se viene a mirar.
	 */
	font-size: calc(var(--vela-txt-2xl, 32px) * .88);
	font-weight: 200;
	line-height: 1.1;

	/* Cambia mientras se toca el contador: el salto se suaviza. */
	transition: color .2s var(--cot-curva);
}

.vela-cot__total-nota {
	margin: 6px 0 0;
	font-size: var(--vela-txt-xs, 11px);
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .65;
}

/* ---------------------------------------------------------- el carrito */

.vela-cot__carrito {
	margin: 16px 22px 0;
}

.vela-cot__carrito-cabecera {
	display: flex;
	justify-content: space-between;
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
	font-size: var(--vela-txt-xs, 11px);
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .85;
}

.vela-cot .vela-cot__carrito-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-cot__carrito-fila {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: var(--vela-txt-xs, 11px);
}

.vela-cot__carrito-nombre {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vela-cot__carrito-cant,
.vela-cot__carrito-precio {
	flex: 0 0 auto;
	color: var(--cot-dorado-cl);
	font-weight: 600;
}

.vela-cot__carrito-quitar {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 5px;
	background: none;
	color: #fff;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s var(--cot-curva);
}

.vela-cot__carrito-quitar:hover {
	background: rgba(255, 255, 255, .18);
}

/* ---------------------------------------------- incluido / no incluido */

.vela-cot__listas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 18px 22px 0;
}

.vela-cot__lista-titulo {
	margin: 0 0 6px;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vela-cot__lista-titulo--no {
	color: var(--cot-turquesa);
}

.vela-cot .vela-cot__lista ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-cot__lista li {
	position: relative;
	padding-left: 10px;
	font-size: var(--vela-txt-xs, 11px);
	line-height: 1.7;
}

.vela-cot__lista li::before {
	content: "·";
	position: absolute;
	left: 0;
}

.vela-cot__lista-titulo--no ~ ul li {
	color: var(--cot-turquesa);
}

.vela-cot__terminos {
	margin: auto 22px 0;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 8px;

	color: #fff;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;

	transition: background-color .25s var(--cot-curva);
}

.vela-cot__terminos:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* ====================================================== panel de pasos */

.vela-cot__lado {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: #fff;
}

.vela-cot__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;

	border: 1px solid rgba(12, 56, 70, .22);
	border-radius: 50%;
	background: #fff;
	color: var(--cot-petroleo);
	font-size: 18px;
	cursor: pointer;

	transition: background-color .2s var(--cot-curva), transform .2s var(--cot-curva);
}

.vela-cot__cerrar:hover {
	background: var(--cot-alterno);
	transform: rotate(90deg);
}

/* ------------------------------------------------------- los cuatro pasos */

.vela-cot__pasos {
	flex: 0 0 auto;
	padding: 20px 52px 16px 26px;
	border-bottom: 1px solid rgba(12, 56, 70, .1);
}

.vela-cot .vela-cot__pasos ol {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-cot__paso {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
}

/* La línea que une los pasos, dibujada por el propio paso hacia el anterior. */
.vela-cot__paso + .vela-cot__paso::before {
	content: "";
	position: absolute;
	top: 13px;
	right: 50%;
	left: -50%;
	height: 1px;
	background: var(--cot-dorado-cl);
}

.vela-cot__paso-n {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;

	border: 1px solid var(--cot-dorado-cl);
	border-radius: 8px;
	background: #fff;

	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-sm, 13px);
	line-height: 1;

	transition:
		background-color .3s var(--cot-curva),
		color            .3s var(--cot-curva),
		border-color     .3s var(--cot-curva);
}

.vela-cot__paso-txt {
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	transition: opacity .3s var(--cot-curva);
}

.vela-cot__paso[data-estado="falta"] .vela-cot__paso-txt { opacity: .45; }

.vela-cot__paso[data-estado="ahora"] .vela-cot__paso-n {
	background: var(--cot-dorado-cl);
	border-color: var(--cot-dorado-cl);
	color: #fff;
}

.vela-cot__paso[data-estado="hecho"] .vela-cot__paso-n {
	background: var(--cot-petroleo);
	border-color: var(--cot-petroleo);
	color: #fff;
}

/* ------------------------------------------------------------- el cuerpo */

.vela-cot__cuerpo {
	flex: 1 1 auto;
	min-height: 0;
	padding: 24px 26px;
	overflow-y: auto;
}

/* El paso entra deslizándose: el cambio se nota sin ser un espectáculo. */
.vela-cot__cuerpo[data-entrando] .vela-cot__seccion {
	animation: vela-cot-entra .32s var(--cot-curva) both;
}

@keyframes vela-cot-entra {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.vela-cot__seccion[hidden] {
	display: none;
}

/*
 * Hueco para la barra de pasos al desplazarse hasta un bloque.
 *
 * En móvil esa barra va pegada arriba, así que sin este margen el destino
 * queda justo debajo y medio tapado. `scroll-margin-top` es lo que el
 * navegador descuenta al hacer `scrollIntoView`.
 */
.vela-cot__seccion,
.vela-cot__bloque[data-cot-inicio] {
	scroll-margin-top: 78px;
}

.vela-cot__bloque {
	margin-bottom: 26px;
}

.vela-cot__bloque:last-child {
	margin-bottom: 0;
}

.vela-cot__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;

	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-lg, 19px);
	font-weight: 300;
	letter-spacing: .02em;
}

.vela-cot__marca {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 25px;
	height: 25px;

	border: 1px solid rgba(12, 56, 70, .3);
	border-radius: 7px;

	font-size: var(--vela-txt-sm, 13px);
	line-height: 1;
}

.vela-cot__marca--mas {
	border-color: rgba(12, 56, 70, .18);
	color: var(--cot-petroleo);
}

/* El del encabezado ya trae su propio recuadro dibujado. */
.vela-cot__marca--icono {
	border: 0;
	color: var(--cot-petroleo);
}

.vela-cot .vela-cot__marca--icono img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vela-cot__descripcion {
	margin: 0 0 14px;
	padding-left: 35px;
	font-size: var(--vela-txt-xs, 11px);
	line-height: 1.6;
	opacity: .75;
}

.vela-cot__nota {
	margin: 10px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--cot-dorado-cl);
	background: var(--cot-alterno);
	font-size: var(--vela-txt-xs, 11px);
	line-height: 1.6;
}

.vela-cot__vacio {
	margin: 0;
	padding: 20px;
	background: var(--cot-alterno);
	border-radius: 12px;
	font-size: var(--vela-txt-sm, 13px);
	text-align: center;
	opacity: .8;
}

/* ======================================== lo que recuerda el navegador */

.vela-cot__retomar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	padding: 14px 16px;

	border: 1px solid var(--cot-dorado-cl);
	border-radius: 12px;
	background: #fdf8ec;

	animation: vela-cot-entra .35s var(--cot-curva) both;
}

.vela-cot__retomar[hidden] {
	display: none;
}

.vela-cot__retomar-texto {
	flex: 1 1 220px;
	min-width: 0;
}

.vela-cot__retomar-titulo {
	margin: 0;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 700;
}

.vela-cot__retomar-detalle {
	margin: 2px 0 0;
	font-size: var(--vela-txt-xs, 11px);
	opacity: .8;
}

.vela-cot__retomar-mandos {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.vela-cot__retomar-mandos .vela-cot__pildora {
	flex: 0 0 auto;
	margin: 0;
}

/* El primero es el que se quiere pulsar: se marca sin esperar al `hover`. */
.vela-cot__retomar-mandos .vela-cot__pildora:first-child {
	background: var(--cot-petroleo);
	border-color: var(--cot-petroleo);
	color: #fff;
	font-weight: 600;
}

/* ------------------------------------------------- las ya enviadas */

.vela-cot__memoria {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(12, 56, 70, .1);
}

.vela-cot__memoria[hidden] {
	display: none;
}

.vela-cot__memoria-titulo {
	margin: 0 0 8px;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}

.vela-cot .vela-cot__memoria-lista {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-cot__memoria-item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 9px 12px;

	border: 1px solid rgba(12, 56, 70, .16);
	border-radius: 10px;
	background: var(--cot-alterno);
}

.vela-cot__memoria-resumen {
	flex: 1 1 180px;
	min-width: 0;
	font-size: var(--vela-txt-xs, 11px);
}

.vela-cot__memoria-total {
	flex: 0 0 auto;
	color: var(--cot-dorado);
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
}

.vela-cot__memoria-usar {
	flex: 0 0 auto;
	padding: 5px 12px;

	border: 1px solid rgba(12, 56, 70, .3);
	border-radius: 6px;
	background: #fff;
	color: var(--cot-petroleo);

	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;

	transition: background-color .2s var(--cot-curva), color .2s var(--cot-curva);
}

.vela-cot__memoria-usar:hover {
	background: var(--cot-petroleo);
	border-color: var(--cot-petroleo);
	color: #fff;
}

.vela-cot__memoria-nota {
	margin: 8px 0 0;
	font-size: 10px;
	line-height: 1.6;
	opacity: .6;
}

.vela-cot__memoria-olvidar {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;

	font-family: inherit;
	font-size: 10px;
	text-decoration: underline;
	cursor: pointer;
	opacity: .7;
}

.vela-cot__memoria-olvidar:hover {
	opacity: 1;
}

/* -------------------------------------------------------------- campos */

.vela-cot__campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.vela-cot__campo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px 14px;
	border: 1px solid rgba(12, 56, 70, .22);
	border-radius: 12px;
	transition: border-color .2s var(--cot-curva), box-shadow .2s var(--cot-curva);
}

.vela-cot__campo:focus-within {
	border-color: var(--cot-dorado-cl);
	box-shadow: 0 0 0 3px rgba(207, 190, 139, .25);
}

.vela-cot__campo[data-mal],
.vela-cot__campo input[data-mal] {
	border-color: #b3403a;
	animation: vela-cot-tiembla .4s;
}

@keyframes vela-cot-tiembla {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.vela-cot__etq {
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}

/*
 * El valor del campo, un paso por debajo del cuerpo.
 *
 * Estaba en `md` y salia a 14px, con su etiqueta justo encima a 10,2: el
 * «dd/mm/aaaa» era lo mas grande de la fila y la etiqueta parecia una nota al
 * pie de su propio campo. Con `sm` queda en 12, que es lo que miden las
 * pildoras de cayo de dos lineas mas abajo, y la tarjeta se lee como una
 * unidad en vez de como dos cosas pegadas.
 */
.vela-cot .vela-cot__campo input {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cot-petroleo);
	font-family: inherit;
	font-size: var(--vela-txt-sm, 13px);
}

.vela-cot .vela-cot__campo input:focus {
	outline: none;
}

/*
 * El campo de fecha, que no se ve igual en dos navegadores.
 *
 * Dos arreglos distintos aqui dentro:
 *
 * 1. `appearance: none`. iOS le mete al control de fecha un relleno propio
 *    que desplazaba el valor unos 30px a la derecha, de modo que «30 Sep
 *    2026» no caia bajo su etiqueta sino en mitad de la tarjeta.
 *
 * 2. El marcador. Un `<input type="date">` vacio escribe «dd/mm/aaaa» en
 *    Chrome y NADA en Safari de iOS: el campo de salida quedaba como una caja
 *    vacia sin pista de que se pudiera tocar. Se tapa el texto del navegador
 *    cuando esta vacio y se pinta el nuestro, asi que los dos enseñan lo
 *    mismo. `data-vacio` lo pone el JavaScript desde el estado.
 */
.vela-cot .vela-cot__campo input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	min-height: 1.4em;
}

.vela-cot__valor {
	position: relative;
	display: block;
}

.vela-cot__marcador {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;

	color: var(--cot-petroleo);
	font-size: var(--vela-txt-sm, 13px);
	opacity: .45;

	/* El toque tiene que llegar al campo, no quedarse aqui. */
	pointer-events: none;
}

.vela-cot__campo input[data-vacio] + .vela-cot__marcador {
	display: flex;
}

/* Lo que escribe el propio navegador, fuera mientras no haya fecha. */
.vela-cot__campo input[type="date"][data-vacio]::-webkit-datetime-edit {
	opacity: 0;
}

/* ------------------------------------------------------------ contador */

.vela-cot__contador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.vela-cot__contador button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;

	border: 1px solid rgba(12, 56, 70, .3);
	border-radius: 50%;
	background: none;
	color: var(--cot-petroleo);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;

	transition: background-color .2s var(--cot-curva), border-color .2s var(--cot-curva);
}

.vela-cot__contador button:hover {
	background: var(--cot-petroleo);
	border-color: var(--cot-petroleo);
	color: #fff;
}

/*
 * El numero de invitados, que es el que se toca.
 *
 * Baja de `lg` a `md`: a 17,3 media exactamente lo mismo que el titulo de
 * seccion, y una cifra dentro de un campo no puede pesar lo que pesa un
 * encabezado. A 14 sigue siendo lo mas grande de su tarjeta —que es lo que
 * tiene que ser, porque es el valor que se cambia— sin competir con el resto.
 */
.vela-cot__contador output {
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-md, 15px);
	font-weight: 300;
}

.vela-cot__contador--mini button {
	width: 19px;
	height: 19px;
	font-size: 12px;
}

.vela-cot__contador--mini output {
	font-size: var(--vela-txt-sm, 13px);
}

/* ------------------------------------------------------------ píldoras */

.vela-cot__pildoras {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.vela-cot__pildora {
	flex: 1 1 auto;
	padding: 9px 16px;

	border: 1px solid rgba(12, 56, 70, .22);
	border-radius: 8px;
	background: #fff;
	color: var(--cot-petroleo);

	font-family: inherit;
	font-size: var(--vela-txt-sm, 13px);
	cursor: pointer;

	transition:
		background-color .25s var(--cot-curva),
		border-color     .25s var(--cot-curva),
		color            .25s var(--cot-curva);
}

.vela-cot__pildora:hover {
	border-color: var(--cot-dorado-cl);
}

.vela-cot__pildora[aria-checked="true"] {
	background: var(--cot-dorado-cl);
	border-color: var(--cot-dorado-cl);
	color: #fff;
	font-weight: 600;
}

.vela-cot__cayo-foto {
	margin: 12px 0 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 5;
	animation: vela-cot-entra .3s var(--cot-curva) both;
}

.vela-cot__cayo-foto[hidden] {
	display: none;
}

.vela-cot .vela-cot__cayo-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------- extras */

.vela-cot .vela-cot__extras {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vela-cot__extra {
	display: flex;
	flex-direction: column;
	padding-bottom: 10px;

	border: 1px solid rgba(12, 56, 70, .16);
	border-radius: 12px;
	overflow: hidden;

	transition: border-color .25s var(--cot-curva), box-shadow .25s var(--cot-curva);
}

.vela-cot__extra[data-elegido="1"] {
	border-color: var(--cot-dorado-cl);
	box-shadow: 0 0 0 2px rgba(207, 190, 139, .3);
}

.vela-cot__extra-foto {
	/*
	 * `min-height: 0` no es un adorno: sin él la proporción no se respeta.
	 *
	 * Esta caja es un ítem flex, y los ítems flex llevan `min-height: auto`,
	 * que impide encoger por debajo del alto natural del contenido. Con una
	 * foto vertical dentro, la tarjeta se estiraba hasta los 339 px en vez de
	 * los 121 que pide el 16/10, y la rejilla quedaba desigual.
	 */
	flex: 0 0 auto;
	min-height: 0;

	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cot-alterno);
}

.vela-cot .vela-cot__extra-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vela-cot__extra-nombre {
	margin: 10px 12px 0;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.vela-cot__extra-precio {
	margin: 4px 12px 0;
	color: var(--cot-dorado);
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 600;
}

.vela-cot__extra-mando {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 10px 12px 0;
}

.vela-cot__extra-boton {
	padding: 5px 12px;
	border: 1px solid rgba(12, 56, 70, .3);
	border-radius: 6px;
	background: none;
	color: var(--cot-petroleo);

	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;

	transition: background-color .2s var(--cot-curva), color .2s var(--cot-curva);
}

.vela-cot__extra-boton[aria-pressed="true"] {
	background: var(--cot-petroleo);
	border-color: var(--cot-petroleo);
	color: #fff;
}

.vela-cot__extra-nota {
	margin: 8px 12px 0;
	font-size: 9px;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
}

/* ------------------------------------------------------------ catering */

.vela-cot__catering {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.vela-cot__opcion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 12px 14px;

	border: 1px solid rgba(12, 56, 70, .18);
	border-radius: 12px;
	background: #fff;
	color: var(--cot-petroleo);

	font-family: inherit;
	text-align: center;
	cursor: pointer;

	transition:
		background-color .25s var(--cot-curva),
		border-color     .25s var(--cot-curva),
		transform        .25s var(--cot-curva);
}

.vela-cot__opcion:hover {
	transform: translateY(-2px);
	border-color: var(--cot-dorado-cl);
}

.vela-cot__opcion[aria-checked="true"] {
	background: #fdf8ec;
	border-color: var(--cot-dorado-cl);
}

/*
 * El icono de la opción, en sus dos estados.
 *
 * Sin fondo ni recorte: los PNG del diseño ya vienen redondos y con su
 * sombra. Poner un círculo detrás dibujaba dos.
 */
.vela-cot__opcion-icono {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
}

.vela-cot .vela-cot__opcion-icono img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;

	transition: opacity .25s var(--cot-curva);
}

/* En reposo se ve el dorado; al elegir, el petróleo. */
.vela-cot .vela-cot__opcion-on {
	opacity: 0;
}

.vela-cot__opcion[aria-checked="true"] .vela-cot__opcion-off {
	opacity: 0;
}

.vela-cot .vela-cot__opcion[aria-checked="true"] .vela-cot__opcion-on {
	opacity: 1;
}

.vela-cot__opcion-nombre {
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 600;
	line-height: 1.35;
}

.vela-cot__opcion-nota {
	font-size: 9.5px;
	line-height: 1.5;
	opacity: .7;
}

/* ------------------------------------------------------------- resumen */

.vela-cot__resumen {
	margin-top: 12px;
	border: 1px solid var(--cot-dorado-cl);
	border-radius: 12px;
	overflow: hidden;
}

.vela-cot__resumen-titulo {
	margin: 0;
	padding: 12px 16px 6px;
	color: var(--cot-dorado);
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vela-cot .vela-cot__resumen dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	margin: 0;
	padding: 0 16px 12px;
}

.vela-cot .vela-cot__resumen dt {
	font-size: var(--vela-txt-xs, 11px);
	opacity: .8;
}

.vela-cot .vela-cot__resumen dd {
	margin: 0;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	text-align: right;
}

.vela-cot__resumen-total {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	background: var(--cot-dorado-cl);
	color: #fff;
}

.vela-cot__resumen-total span {
	font-size: var(--vela-txt-xs, 11px);
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .9;
}

.vela-cot__resumen-total strong {
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-xl, 24px);
	font-weight: 600;
}

/* La trampa para robots: fuera de la vista, pero no con `display: none`,
   que algunos robots detectan. */
.vela-cot__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vela-cot__error {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-left: 3px solid #b3403a;
	background: #fdf1f0;
	color: #7d2b26;
	font-size: var(--vela-txt-sm, 13px);
}

/* ---------------------------------------------------------------- pie */

.vela-cot__pie {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: 14px 26px;

	border-top: 1px solid rgba(12, 56, 70, .1);
	background: var(--cot-alterno);
}

.vela-cot__atras {
	padding: 10px 22px;
	border: 1px solid rgba(12, 56, 70, .25);
	border-radius: 8px;
	background: #fff;
	color: var(--cot-petroleo);

	font-family: inherit;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s var(--cot-curva);
}

.vela-cot__atras:hover {
	background: #fff;
	border-color: var(--cot-petroleo);
}

.vela-cot__atras[hidden] {
	display: none;
}

.vela-cot__pie-total {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 0 auto;
	text-align: right;
}

.vela-cot__pie-total[hidden] {
	display: none;
}

.vela-cot__pie-etq {
	font-size: var(--vela-txt-xs, 11px);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .75;
}

.vela-cot__pie-cifra {
	color: var(--cot-dorado);
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-lg, 19px);
	font-weight: 300;
}

.vela-cot__avanzar {
	margin-left: auto;
	padding: 11px 28px;

	border: 0;
	border-radius: 8px;
	background: var(--cot-petroleo);
	color: #fff;

	font-family: inherit;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 700;
	cursor: pointer;

	transition: background-color .25s var(--cot-curva), opacity .25s var(--cot-curva);
}

.vela-cot__pie-total:not([hidden]) ~ .vela-cot__avanzar {
	margin-left: 0;
}

.vela-cot__avanzar:hover {
	background: #08222c;
}

.vela-cot__avanzar[disabled] {
	opacity: .6;
	cursor: progress;
}

.vela-cot__avanzar[data-cargando="1"]::after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 8px;
	vertical-align: -1px;

	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: vela-cot-gira .7s linear infinite;
}

@keyframes vela-cot-gira {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------- el gracias */

.vela-cot__gracias {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 260px;
	text-align: center;
	animation: vela-cot-entra .4s var(--cot-curva) both;
}

.vela-cot__gracias[hidden] {
	display: none;
}

.vela-cot__gracias-marca {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--cot-alterno);
	color: var(--cot-dorado);
	font-size: 30px;
}

.vela-cot__gracias-texto {
	max-width: 42ch;
	margin: 0;
	font-size: var(--vela-txt-md, 15px);
	line-height: 1.6;
}

.vela-cot__gracias-wa {
	padding: 11px 24px;
	border-radius: 8px;
	background: #25d366;
	color: #fff;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 700;
	text-decoration: none;
}

.vela-cot__gracias-wa[hidden] {
	display: none;
}

.vela-cot__aviso {
	margin: 16px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--vela-dorado, #997953);
	background: rgba(153, 121, 82, .08);
	font-size: var(--vela-txt-sm, 13px);
}

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

   Por debajo de 860 px el diálogo deja de ser dos columnas: el panel del
   barco se convierte en una cabecera corta —foto, nombre y total— y los
   pasos ocupan el ancho entero. El carrito y las listas de incluido se
   esconden ahí; no caben, y su información vuelve a aparecer entera en el
   resumen del paso 4.
   -------------------------------------------------------------------------- */

@media ( max-width: 860px ) {
	.vela-cot {
		padding: 0;
		align-items: stretch;
	}

	/*
	 * Una sola columna que se desplaza entera.
	 *
	 * En escritorio son dos paneles con su propio scroll cada uno. Aquí no
	 * cabe: la ficha del barco lleva foto, total y las dos listas de lo que
	 * incluye, y todo eso no entra en una cabecera fija sin dejar al
	 * formulario sin sitio. Así que el marco pasa a ser el contenedor que se
	 * desplaza y dentro va todo seguido, como una página.
	 *
	 * Lo que no se va con el scroll: los pasos, el pie y el botón de cerrar.
	 */
	/*
	 * Columna flexible, no rejilla.
	 *
	 * Con `grid` y filas `auto` dentro de un marco de alto fijo, las filas se
	 * comprimen por debajo de su contenido: el panel del barco media 442 px
	 * con 513 px dentro, y las últimas líneas de «incluido» se colaban bajo la
	 * barra de pasos. En columna flexible con `flex: 0 0 auto` cada bloque
	 * conserva su alto y lo que sobra lo desplaza el marco, que es lo que se
	 * quiere aquí.
	 */
	.vela-cot__marco {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;

		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.vela-cot__barco,
	.vela-cot__lado {
		flex: 0 0 auto;
	}

	/* La foto arriba y el importe debajo, no uno al lado del otro. */
	.vela-cot__barco {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 0 18px;
		overflow: visible;
	}

	/*
	 * Aqui el alto va explicito, y `aspect-ratio` se apaga a proposito.
	 *
	 * Tenia `aspect-ratio: 16/9` con `max-height: 190px`, y esa pareja es una
	 * trampa: cuando el alto queda recortado por el maximo, WebKit vuelve a
	 * derivar el ANCHO de la proporcion. En un iPhone de 430 px la foto salia
	 * de 338 —190 x 16/9 clavado— y dejaba una franja de fondo petroleo a la
	 * derecha. Chromium no lo hace, asi que en el portatil no se veia: el
	 * fallo llego desde un movil de verdad en produccion.
	 *
	 * Con un alto declarado no hay proporcion que aplicar, asi que no hay de
	 * donde sacar un ancho: la figura se estira como cualquier bloque y el
	 * `object-fit: cover` de la imagen se encarga del recorte.
	 *
	 * Es la segunda vez que esta pareja muerde en este proyecto —la primera
	 * fueron las fotos de cabina del modal—, y por eso esta anotada tambien en
	 * CLAUDE.md.
	 */
	.vela-cot__foto {
		flex: 0 0 auto;
		aspect-ratio: auto;
		height: clamp(150px, 44vw, 190px);
	}

	.vela-cot__ficha {
		padding: 0 16px 12px;
	}

	/*
	 * Invitados arriba a lo ancho, y las dos fechas una al lado de la otra.
	 *
	 * La rejilla automatica —`auto-fit` con un minimo de 180px— daba dos
	 * columnas en un movil, asi que salian «Invitados» y «Entrada» juntos y
	 * «Salida» sola en la fila siguiente, a media anchura y descolgada. Las
	 * dos fechas son un par y tienen que leerse como tal.
	 *
	 * Solo para este grupo: el del paso 4 son tres datos de contacto y ahi la
	 * rejilla automatica hace lo correcto.
	 */
	.vela-cot__campos--fechas {
		grid-template-columns: 1fr 1fr;
	}

	.vela-cot__campos--fechas .vela-cot__campo--contador {
		grid-column: 1 / -1;
	}

	.vela-cot__nombre {
		font-size: var(--vela-txt-xl, 24px);
	}

	.vela-cot__meta,
	.vela-cot__sede {
		font-size: 9.5px;
	}

	.vela-cot__total {
		margin: 14px 16px 0;
		padding: 12px 14px;
	}

	/*
	 * Aqui el tamaño va a mano, y con motivo: el token en esta anchura da
	 * 19px y la cifra principal se perderia. Baja de 30 a 26 para acompañar
	 * al ajuste de escritorio, que es el mismo gesto.
	 */
	.vela-cot__total-cifra {
		font-size: 26px;
	}

	.vela-cot__carrito,
	.vela-cot__listas {
		margin-inline: 16px;
	}

	.vela-cot__terminos {
		margin: 16px 16px 0;
	}

	/* Los dos paneles dejan de tener scroll propio: lo lleva el marco. */
	.vela-cot__lado,
	.vela-cot__cuerpo {
		overflow: visible;
		min-height: 0;
	}

	/*
	 * El botón de cerrar, siempre a la vista.
	 *
	 * Se le quita `position: relative` al marco y a la columna para que su
	 * ancestro posicionado más cercano pase a ser `.vela-cot`, que está fija
	 * a la ventana. Así no se va con el desplazamiento —el marco es justo lo
	 * que se desplaza aquí— y además hereda el hueco que `.vela-cot` ya deja
	 * para la barra de WordPress, en vez de tener que repetir esa cuenta.
	 */
	/*
	 * El marco, por encima del telón.
	 *
	 * El telón va `position: absolute` con `backdrop-filter`, y antes que el
	 * marco en el HTML. Si el marco queda sin posicionar, todo lo que lleva
	 * dentro y no esté posicionado a su vez —los títulos, las píldoras, el
	 * texto— se pinta DEBAJO del telón y sale desenfocado y oscurecido. Lo
	 * posicionado (la foto, los pasos, el pie) se salvaba, y esa mezcla de
	 * nítido y borroso es justo lo que delataba el fallo.
	 */
	.vela-cot__marco {
		position: relative;
		z-index: 1;
	}

	/*
	 * Y sin `translate` ni `scale`.
	 *
	 * Un elemento con cualquier transformación —aunque sea `scale: 1`, que no
	 * mueve nada— se convierte en bloque contenedor de sus descendientes
	 * absolutos Y FIJOS. Con la animación de entrada puesta, el botón de
	 * cerrar quedaba atrapado en el marco, que es justo lo que se desplaza.
	 *
	 * `position: relative` no atrapa a los fijos; una transformación sí. Por
	 * eso el marco puede estar posicionado y el botón seguir anclado a la
	 * ventana. En móvil la entrada se hace solo con opacidad.
	 */
	.vela-cot__marco,
	.vela-cot[data-abierto] .vela-cot__marco {
		translate: none;
		scale: none;
	}

	/* Anclado a la ventana, no al marco: así no se va con el desplazamiento. */
	.vela-cot__cerrar {
		position: fixed;
		top: 12px;
		right: 12px;
		z-index: 6;
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 4px 14px rgba(4, 26, 34, .28);
	}

	/* La barra de WordPress no la esquiva `.vela-cot`, porque el botón ya no
	   cuelga de ella: hay que apartarlo a mano. */
	body.admin-bar .vela-cot__cerrar {
		top: 44px;
	}

	.vela-cot__pasos {
		position: sticky;
		top: 0;
		z-index: 4;
		padding: 14px 16px 10px;
		background: #fff;
	}

	.vela-cot__paso-txt {
		font-size: 8.5px;
		letter-spacing: .04em;
	}

	.vela-cot__cuerpo {
		padding: 18px 16px;
	}

	.vela-cot__pie {
		position: sticky;
		bottom: 0;
		z-index: 4;
		padding: 12px 16px;
		/* Sitio para la barra de gestos del teléfono. */
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.vela-cot__pie-etq {
		display: none;
	}

	.vela-cot__atras,
	.vela-cot__avanzar {
		padding: 11px 16px;
	}

	.vela-cot__descripcion {
		padding-left: 0;
	}

	.vela-cot__retomar-mandos {
		width: 100%;
	}

	.vela-cot__retomar-mandos .vela-cot__pildora {
		flex: 1 1 0;
	}
}

/* Por debajo de 782 la barra de WordPress mide 46 px en vez de 32. */
@media screen and ( max-width: 782px ) {
	body.admin-bar .vela-cot__cerrar {
		top: 58px;
	}
}

@media ( max-width: 420px ) {
	.vela-cot .vela-cot__extras {
		grid-template-columns: 1fr 1fr;
	}

	.vela-cot__catering {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.vela-cot__marco,
	.vela-cot__telon,
	.vela-cot__cerrar,
	.vela-cot__opcion,
	.vela-cot-boton,
	.vela-cot-boton::before,
	.vela-cot-boton__marca {
		transition-duration: .01ms;
	}

	/* Sin barrido ni empujón: el relleno aparece y ya. */
	.vela-cot-boton:hover,
	.vela-cot-boton:focus-visible {
		transform: none;
	}

	.vela-cot-boton:hover .vela-cot-boton__marca {
		transform: none;
	}

	.vela-cot__cuerpo[data-entrando] .vela-cot__seccion,
	.vela-cot__gracias,
	.vela-cot__cayo-foto {
		animation-duration: .01ms;
	}

	.vela-cot__avanzar[data-cargando="1"]::after {
		animation-duration: 1.5s;
	}
}