/**
 * La ficha de un bote.
 *
 * Medidas de la página 7 del PDF, sobre una columna de contenido de 646 pt:
 *
 *   · galería principal  578 × 246 pt → relación 2,35 : 1
 *   · croquis            columna de datos a la izquierda, plano a la derecha
 *   · prestaciones       seis celdas, una de cada dos con fondo alterno
 *   · bandas oscuras     #0B3846, a sangre
 *
 * Todo en `cqi`: la sección se mide contra su propio hueco, así que la misma
 * pieza sirve en la página del bote, en una columna de Elementor y en la
 * previsualización del panel.
 */

.vela-flota {
	--flota-oscuro:  #0c3846;
	--flota-alterno: #f5fdff;
	--flota-texto:   #0c3846;
	--flota-curva:   var(--vela-curva, cubic-bezier(.22, .61, .36, 1));

	container-type: inline-size;
	container-name: flota;

	/* El mismo eje que el pie y la barra de navegación. */
	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-ancho, 1772px));
	max-width: 100%;
	margin-inline: auto;

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

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

/* El reinicio del tema lleva `ul[class]`, que con su atributo gana a una clase
   sola: hay que repetir el ancestro para que las listas de aquí no lo hereden. */
.vela-flota .vela-flota__pista,
.vela-flota .vela-flota__puntos,
.vela-flota .vela-flota__cifras,
.vela-flota .vela-flota__rejilla,
.vela-flota .vela-flota__selector,
.vela-flota .vela-flota__fotos {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ================================================================ rótulo */

.vela-flota__rotulo {
	/* Aire por encima, que la seccion suele empezar pegada a la barra de
	   navegacion. En `padding` y no en `margin`: el margen del primer hijo se
	   colapsa fuera de `.vela-flota`, que no tiene borde ni relleno, y en vez de
	   separar el rotulo movia la seccion entera. */
	padding-top: 5cqi;
	margin: 0 0 1.8cqi;
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	/* Mas grande que en la maqueta, a peticion: alli medi 1,5cqi y se leia
	   pequenio de verdad en pantalla. */
	font-size: var(--vela-txt-xl, 21px);
	font-weight: 700;
	letter-spacing: .14em;
	text-align: center;
	text-transform: uppercase;
}

/* =============================================================== galería */

.vela-flota__galeria {
	position: relative;
	/* La relación de la maqueta. Con `aspect-ratio` en el contenedor y las
	   láminas superpuestas, el bloque no da saltos mientras cargan las fotos. */
	aspect-ratio: 2.35 / 1;
	border-radius: 1.6cqi;
	overflow: hidden;
	background: var(--vela-turquesa-suave, #b4e0e1);
}

.vela-flota__pista {
	position: absolute;
	inset: 0;
}

.vela-flota__lamina {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s var(--flota-curva);
}

.vela-flota__lamina[data-activa="1"] {
	opacity: 1;
}

.vela-flota__foto {
	display: block;
	width: 100%;
	/* `!important` porque Elementor declara `.elementor img { height: auto }`,
	   que con su clase y su elemento gana a una clase sola. */
	height: 100% !important;
	object-fit: cover;
}

/* --------------------------------------------------- flechas y puntos */

.vela-flota__flecha {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2cqi;
	height: 3.2cqi;
	min-width: 34px;
	min-height: 34px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--flota-oscuro);
	font-size: 1.6cqi;
	line-height: 0;
	cursor: pointer;

	transition:
		background-color .25s var(--flota-curva),
		scale .25s var(--flota-curva);
}

.vela-flota__flecha:hover,
.vela-flota__flecha:focus-visible {
	background: #fff;
	scale: 1.08;
}

.vela-flota__flecha--prev { left: 1.6cqi; }
.vela-flota__flecha--next { right: 1.6cqi; }

.vela-flota__flecha--next .vela-flota__chevron,
.vela-flota__nav--next .vela-flota__chevron {
	rotate: 180deg;
}

.vela-flota__chevron {
	display: block;
}

.vela-flota__puntos {
	position: absolute;
	left: 50%;
	bottom: 1.4cqi;
	translate: -50% 0;
	z-index: 3;

	display: flex;
	align-items: center;
	gap: .8cqi;
}

.vela-flota__punto {
	display: block;
	width: .7cqi;
	height: .7cqi;
	min-width: 7px;
	min-height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	opacity: .45;
	cursor: pointer;
	transition: opacity .25s ease, scale .25s var(--flota-curva);
}

.vela-flota__punto[aria-current="true"] {
	opacity: 1;
	scale: 1.35;
}

/* =========================================================== descripción */

.vela-flota__descripcion {
	max-width: 78cqi;
	margin: 3.4cqi auto 0;
	font-size: var(--vela-txt-md, 15px);
	font-weight: 300;
	line-height: 1.75;
	text-align: justify;
}

.vela-flota__descripcion p {
	margin: 0 0 1em;
}

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

.vela-flota__descripcion strong {
	font-weight: 700;
}

/* =============================================================== croquis */

.vela-flota__croquis {
	display: grid;
	grid-template-columns: minmax(0, 27fr) minmax(0, 73fr);
	align-items: center;
	gap: 2cqi;
	margin-top: 6cqi;
}

.vela-flota__pista-clic {
	margin: 0 0 .6cqi;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 300;
	opacity: .8;
}

.vela-flota__config-titulo {
	margin: 0 0 1.6cqi;
	font-family: var(--vela-fuente, "Montserrat", sans-serif);
	font-size: var(--vela-txt-lg, 17px);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.vela-flota__cifra {
	display: flex;
	align-items: center;
	gap: .9cqi;
	margin-bottom: 1.1cqi;
	font-size: var(--vela-txt-md, 15px);
	font-weight: 400;
}

/* Con el ancestro delante, y no por gusto: los iconos son <img>, y la regla
   `.elementor img { height: auto }` puntua 0,1,1 y le gana a una clase sola.
   Sin esto el circulo sale aplastado dentro de Elementor. */
.vela-flota .vela-flota__cifra-icono {
	flex: 0 0 auto;
	width: 1.9cqi;
	height: 1.9cqi;
	min-width: 16px;
	min-height: 16px;
	object-fit: contain;
	color: var(--flota-oscuro);
}

/* ------------------------------------------------------------- el plano */

.vela-flota__plano {
	position: relative;
}

.vela-flota__plano-img {
	display: block;
	width: 100%;
	height: auto !important;
}

/*
 * Las etiquetas de cabina van en porcentaje sobre el plano, no en píxeles.
 *
 * Es lo que permite que esto sirva para cualquier barco: el plano del siguiente
 * catamarán tendrá otras proporciones y se verá a otro tamaño, y lo único que
 * se conserva es dónde cae el punto dentro de la imagen.
 */
.vela-flota__cabina {
	position: absolute;
	translate: -50% -50%;

	padding: .5cqi 1.2cqi;
	border: 0;
	border-radius: .7cqi;

	color: #fff;
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
	text-transform: uppercase;
	cursor: pointer;

	box-shadow: 0 .4cqi 1.2cqi rgba(8, 40, 50, .3);
	transition:
		scale .25s var(--flota-curva),
		box-shadow .25s var(--flota-curva);
}

.vela-flota__cabina:hover,
.vela-flota__cabina:focus-visible {
	scale: 1.07;
	box-shadow: 0 .6cqi 1.8cqi rgba(8, 40, 50, .42);
}

/* ============================================= el visor de las cabinas */

.vela-flota__visor {
	position: fixed;
	inset: 0;
	/* Por encima de la burbuja de contacto, que vive en 9990: un diálogo modal
	   tapa lo que flota, no al revés. */
	z-index: 9995;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 1.6vw, 22px);
	padding: clamp(14px, 4vw, 40px);
}

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

.vela-flota__telon {
	position: absolute;
	inset: 0;
	background: rgba(8, 40, 50, .55);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

.vela-flota__marco {
	position: relative;
	/*
	 * Se ajusta a la foto, no al reves.
	 *
	 * Con un ancho fijo de 680 y la pila de fotos limitada por `max-height`,
	 * el navegador rederiva el ancho de la imagen desde la altura recortada
	 * —620 x 3/4 = 465— y los 215 px que sobraban se veian como una franja
	 * blanca a un lado. `fit-content` hace que el marco mida lo que mida la
	 * foto.
	 */
	width: fit-content;
	max-width: min(680px, 100%);
	max-height: 100%;
	padding: 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(4, 26, 34, .42);
	overflow: hidden;
	animation: vela-flota-entrar .32s var(--flota-curva) both;
}

@keyframes vela-flota-entrar {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.vela-flota__etiqueta {
	position: absolute;
	top: 14px;
	left: 50%;
	translate: -50% 0;
	z-index: 4;

	margin: 0;
	padding: 6px 18px;
	border-radius: 999px;
	background: var(--flota-oscuro);
	color: #fff;

	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vela-flota__cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .88);
	color: var(--flota-oscuro);
	cursor: pointer;
}

.vela-flota__cerrar:hover,
.vela-flota__cerrar:focus-visible {
	background: #fff;
}

/*
 * Las fotos se apilan en rejilla, no en absoluto.
 *
 * Con `position: absolute` las laminas no ocupan sitio y la caja necesitaba
 * una proporcion fija, que recortaba todo lo que no fuera 3:4. Puestas en la
 * misma celda de una rejilla siguen superpuestas, pero ahora si miden: la caja
 * toma el tamano de la foto y cada una se ve entera.
 */
.vela-flota__fotos {
	display: grid;
	max-height: min(76vh, 620px);
}

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

.vela-flota__fotos li {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity .4s var(--flota-curva);
}

.vela-flota__fotos li[data-activa="1"] {
	opacity: 1;
}

.vela-flota .vela-flota__fotos img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(76vh, 620px);
	object-fit: contain;
}

.vela-flota__sin-fotos {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	font-size: var(--vela-txt-sm, 13px);
	color: var(--vela-texto-tenue, #859ba2);
}

.vela-flota__puntos--visor {
	position: absolute;
	bottom: 14px;
}

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

.vela-flota__nav {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--flota-oscuro);
	box-shadow: 0 6px 20px rgba(4, 26, 34, .28);
	font-size: 20px;
	line-height: 0;
	cursor: pointer;

	transition: background-color .2s ease, color .2s ease, scale .2s var(--flota-curva);
}

.vela-flota__nav:hover,
.vela-flota__nav:focus-visible {
	background: var(--flota-oscuro);
	color: #fff;
	scale: 1.08;
}

/* ================================================================= vídeo */

/*
 * La banda del vídeo va a sangre: en la maqueta el fondo llega a los dos bordes
 * y solo el contenido cae sobre el eje. Misma técnica que `vela-a-sangre` del
 * tema.
 */
.vela-flota__video {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block: 6cqi;

	display: flex;
	align-items: center;
	justify-content: center;

	/* La proporción horizontal que pide la anotación del diseñador. */
	aspect-ratio: 16 / 6.5;
	background: var(--flota-oscuro) center / cover no-repeat;
}

.vela-flota__play {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2cqi;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}

.vela-flota__play-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.4cqi;
	height: 5.4cqi;
	min-width: 52px;
	min-height: 52px;

	border: .28cqi solid #fff;
	border-radius: 50%;
	transition: scale .25s var(--flota-curva), background-color .25s var(--flota-curva);
}

.vela-flota__play:hover .vela-flota__play-icono,
.vela-flota__play:focus-visible .vela-flota__play-icono {
	scale: 1.08;
	background: rgba(255, 255, 255, .16);
}

.vela-flota__play-texto {
	font-size: var(--vela-txt-lg, 17px);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-shadow: 0 .2cqi .8cqi rgba(4, 26, 34, .5);
}

/* El reproductor que sustituye a la portada al pulsar. */
.vela-flota__video iframe,
.vela-flota__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	border: 0;
	object-fit: cover;
}

/* ========================================================= prestaciones */

.vela-flota__prestaciones {
	margin-top: 6cqi;
	text-align: center;
}

.vela-flota__pregunta {
	margin: 0 0 3.4cqi;
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-xl, 21px);
	line-height: 1.45;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vela-flota__pregunta-fina { font-weight: 300; }
.vela-flota__pregunta-alta { font-weight: 700; }

.vela-flota__rejilla {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.vela-flota__prestacion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.2cqi;
	padding: 2.4cqi 1cqi;
	min-height: 100%;
}

/* Una de cada dos con fondo, como en la maqueta. */
.vela-flota__prestacion:nth-child(even) {
	background: var(--flota-alterno);
}

/* Con el ancestro delante: `.elementor img { height: auto }` puntua 0,1,1 y
   le gana a una clase sola, y el icono sale a la altura que quiera. */
.vela-flota .vela-flota__prestacion-icono {
	width: 7cqi;
	height: 7cqi;
	min-width: 58px;
	min-height: 58px;
	object-fit: contain;
}

.vela-flota__prestacion-nombre {
	font-family: var(--vela-fuente-titulo, "Einer Grotesk", sans-serif);
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ========================================================== actividades */

.vela-flota__actividades {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-top: 6cqi;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3cqi 0 2.4cqi;
	background: var(--flota-oscuro);
	color: #fff;
	overflow: hidden;
}

.vela-flota__selector {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.1cqi;
	flex-wrap: wrap;
}

/*
 * El circulo lo trae el icono, no el boton.
 *
 * Los PNG del equipo de diseno ya vienen redondos: turquesa con el glifo en
 * blanco cuando esta encendido, blanco con el glifo en petroleo cuando no.
 * Pintar aqui otro circulo debajo dibujaba dos.
 */
.vela-flota__selector-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.9cqi;
	height: 4.9cqi;
	min-width: 52px;
	min-height: 52px;
	padding: 0;

	border: 0;
	background: none;
	overflow: visible;   /* la sombra del encendido se sale, y debe */
	cursor: pointer;
}

.vela-flota .vela-flota__selector-boton img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: scale .25s var(--flota-curva);
}

/*
 * El encendido se agranda un 45%, y no es un efecto.
 *
 * Su lienzo lleva la sombra alrededor, asi que el circulo ocupa el 68,6% de la
 * imagen; en el apagado, que no lleva sombra, ocupa el 99,3%. A la misma caja
 * el activo se veria MAS PEQUENO que sus companeros. 0,993 / 0,686 = 1,447
 * devuelve los dos circulos al mismo diametro. Medido sobre los PNG.
 */
.vela-flota .vela-flota__selector-boton[aria-current="true"] img {
	scale: 1.447;
}

.vela-flota__actividad {
	position: absolute;
	inset: 0;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .8cqi;
	/* El relleno lateral nunca baja del gutter del sitio: la banda va a sangre
	   y en el movil `6cqi` se queda en 20 px escasos. */
	padding: 8cqi max(var(--vela-gutter, 20px), 6cqi);

	background: center / cover no-repeat;
	text-align: center;
}

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

/* Un velo para que el texto blanco se lea sobre cualquier foto. */
.vela-flota__actividad::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 40, 50, .32);
}

.vela-flota__actividad > * {
	position: relative;
	z-index: 1;
}

.vela-flota__actividad-rotulo {
	margin: 0;
	font-family: var(--vela-fuente-script, "Tamara Falies", cursive);
	font-size: var(--vela-script, 44px);
	font-weight: 400;
	line-height: .95;
	text-shadow: 0 .2cqi 1cqi rgba(4, 26, 34, .45);

	/*
	 * Hueco para los rabos de la letra manuscrita.
	 *
	 * El tema le pone a Tamara Falies `descent-override: 5%` para que sus
	 * métricas desmedidas no abran un socavón bajo cada rótulo. El precio es
	 * que la caja de línea ya no cuenta el descendente real: la «y» de «Kayak»
	 * se sale por abajo y se mete en el párrafo aunque las dos cajas no se
	 * toquen. En `em`, para que siga cuadrando a cualquier tamaño.
	 */
	padding-bottom: .26em;
}

.vela-flota__actividad-texto {
	max-width: 52cqi;
	font-size: var(--vela-txt-md, 15px);
	font-weight: 700;
	line-height: 1.55;
	text-shadow: 0 .15cqi .7cqi rgba(4, 26, 34, .45);
}

.vela-flota__actividad-texto p {
	margin: 0;
}

/* La banda necesita alto propio: los paneles van absolutos y no lo aportan. */
.vela-flota__actividades {
	min-height: 46cqi;
	justify-content: space-between;
}

/*
 * Los puntos, pegados al pie de la banda.
 *
 * El selector lleva el nombre de la banda por delante a propósito. Los puntos
 * son un `<ol>` con clase, y el reset del tema —`ul[class], ol[class] { margin:
 * 0 }`, que puntúa 0,1,1— le gana a una sola clase: el `margin-top: auto` se
 * quedaba en cero y el `space-between` dejaba los puntos en mitad de la foto,
 * encima del rótulo. Con el ancestro delante suma 0,2,0 y manda.
 */
.vela-flota__actividades .vela-flota__puntos--claros {
	position: relative;
	z-index: 3;
	left: auto;
	bottom: auto;
	translate: none;
	margin-top: auto;
	margin-bottom: 1.6cqi;
}

/*
 * La linea del pie, sobre el eje.
 *
 * Vive dentro de la banda a sangre, que llega de borde a borde, asi que no
 * hereda ningun aire lateral: en escritorio la frase cabe en una linea y no se
 * nota, pero en el movil envuelve y arranca pegada al borde de la pantalla.
 * Se le da el mismo ancho de contenido que al resto del sitio.
 */
.vela-flota__pie-actividades {
	position: relative;
	z-index: 3;
	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-ancho, 1772px));
	margin: 1.6cqi auto 0;
	font-size: var(--vela-txt-sm, 13px);
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

.vela-flota__pie-actividades strong { font-weight: 700; }
.vela-flota__pie-actividades span   { font-weight: 300; }

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

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

/*
 * Movil.
 *
 * Los tamanios llevan un suelo en pixeles con `max()`, y no es un adorno: el
 * bloque cubre contenedores de 350 a 760 px, mas del doble, y un valor en
 * `cqi` que se lee bien arriba del rango se queda en 10 px abajo. El suelo
 * solo entra en juego en las pantallas estrechas; de 450 px de contenedor en
 * adelante manda otra vez el `cqi` y nada cambia respecto a antes.
 */
@container flota ( max-width: 760px ) {

	.vela-flota__galeria { aspect-ratio: 3 / 2; }

	.vela-flota__descripcion {
		max-width: none;
		margin-top: 5cqi;
		text-align: left;
	}

	/* El croquis se apila: el plano necesita el ancho entero para que las
	   etiquetas de cabina no se pisen. */
	.vela-flota__croquis {
		grid-template-columns: minmax(0, 1fr);
		gap: 4cqi;
	}

	.vela-flota__config-titulo  { }
	.vela-flota .vela-flota__cifra-icono { width: 4cqi; height: 4cqi; }
	.vela-flota__cabina         { padding: 1cqi 2cqi; border-radius: 1.4cqi; }

	.vela-flota__video          { aspect-ratio: 4 / 3; }

	/* Seis columnas no caben; tres filas de dos se leen bien. */
	.vela-flota__rejilla        { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.vela-flota__actividades    { min-height: 118cqi; padding: 5cqi 0 4cqi; }
	.vela-flota__actividad-texto  { max-width: none; }
	.vela-flota__selector-boton   { width: max(46px, 11cqi); height: max(46px, 11cqi); }
}

@media ( prefers-reduced-motion: reduce ) {
	.vela-flota__lamina,
	.vela-flota__flecha,
	.vela-flota__punto,
	.vela-flota__cabina,
	.vela-flota__nav,
	.vela-flota__marco,
	.vela-flota__selector-boton,
	.vela-flota__play-icono,
	.vela-flota__fotos li {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}
}

/* =============================================================== la flota

   El cambio de barco, para cuando la flota crezca.

   Con un solo bote publicado nada de esto llega al HTML: la seccion se pinta
   igual que siempre. A partir del segundo aparece la barra de arriba.

   Las medidas de aqui van en `px` con `clamp` y no en `cqi` como el resto del
   plugin, a proposito: esto no es la pieza de diseno, es el mando que la
   cambia. Vive fuera de `.vela-flota`, que es quien declara el contenedor, y
   abrir otro solo para la barra complicaba el anidamiento sin ganar nada.
   -------------------------------------------------------------------------- */

.vela-botes {
	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);

	/* Sitio para la barra: va fija y taparia el final de la seccion. */
	padding-bottom: clamp(58px, 7vw, 88px);
}

/*
 * Fija al pie de la ventana.
 *
 * Se apaga sola cuando la seccion no esta en pantalla —lo enciende y lo apaga
 * el JS con un observador—, porque una barra para cambiar de barco no pinta
 * nada mientras se lee el menu de a bordo o el pie del sitio.
 *
 * El `z-index` la deja por debajo de la burbuja de contacto (9990) y del visor
 * de fotos (9995): un mando de navegacion no tapa ni un dialogo ni el boton de
 * escribirnos.
 */
.vela-botes__barra {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9970;

	padding-block: clamp(10px, 1.2vw, 16px);

	background: color-mix(in srgb, var(--flota-alterno, #f5fdff) 92%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--flota-oscuro, #0c3846) 12%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

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

.vela-botes__barra[data-fuera="1"] {
	translate: 0 100%;
	opacity: 0;
	pointer-events: none;
}

.vela-botes__pista {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, .8vw, 14px);

	/* El mismo eje que el pie, la barra de navegacion y la ficha. */
	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-ancho, 1772px));
	margin-inline: auto;

	/* Con muchos barcos se arrastra en lugar de apilarse: una barra pegajosa
	   de dos filas se come media pantalla en el movil. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.vela-botes__pista::-webkit-scrollbar {
	display: none;
}

/*
 * Hueco para la burbuja de contacto.
 *
 * Vive fija abajo a la derecha, que en el movil es justo donde cae el pulgar.
 * Sin este margen la ultima pildora se esconde debajo y no hay forma de
 * pulsarla.
 */
@media ( max-width: 782px ) {
	.vela-botes__pista {
		padding-inline-end: clamp(64px, 18vw, 92px);
	}
}

.vela-botes__boton {
	flex: 0 0 auto;
	padding: clamp(7px, .8vw, 11px) clamp(14px, 1.6vw, 26px);

	border: 1px solid color-mix(in srgb, var(--flota-oscuro, #0c3846) 22%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--flota-oscuro, #0c3846);

	font-family: inherit;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;

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

.vela-botes__boton:hover {
	border-color: var(--vela-turquesa, #5eb0c8);
}

.vela-botes__boton[aria-selected="true"] {
	background: var(--flota-oscuro, #0c3846);
	border-color: var(--flota-oscuro, #0c3846);
	color: #fff;
}

.vela-botes__boton:focus-visible {
	outline: 2px solid var(--vela-turquesa, #5eb0c8);
	outline-offset: 3px;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.vela-botes__boton {
		transition-duration: .01ms;
	}
}