/**
 * Vela Crew — sección de tripulación.
 *
 * Medidas tomadas del PDF del equipo de diseño, no estimadas: descripción
 * en Montserrat Light 18 px negro puro y título en Tamara Falies 118,9 px
 * sobre Einer Grotesk 56,5 px, con 49,6 px entre sus líneas base.
 *
 * Dos medidas se apartan de la maqueta a propósito: la cabecera del grupo
 * va a 45 px en vez de 58 y el botón a 643 en vez de 668, por petición
 * expresa. Ambas son ajustables (--crew-cabecera y el min-width del botón).
 *
 * El alineado y las familias salen de los tokens del tema; los valores de
 * reserva permiten usar el plugin sin él.
 */

.crew {
	--crew-titulo: #0c3846;
	--crew-texto: #000;
	--crew-boton: #997952;
	--crew-cabecera: 45px;
	--crew-cargo: #997952;
	--crew-cols: 2;
	/* 83,3 px de radio a 1920 en el trazado de la maqueta. Es variable
	   porque en móvil lo comparten la foto y la barra del título: entre
	   las dos forman una sola caja redondeada. */
	--crew-radio: clamp(22px, 4.702cqi, 83px);

	padding-block: clamp(48px, 5.6vw, 108px);
	background: var(--crew-fondo, transparent);
	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);
	color: var(--crew-texto);
}

/* La sección se alinea sola con la retícula global, y nunca se sale de quien
   la contenga.

   Las tres piezas del cálculo importan:
     · 100% - 2 gutter  → el aire lateral del sitio, si hay sitio para él
     · --vela-ancho     → el tope de 1772 px de la maqueta
     · max-width: 100%  → y por encima de todo, no desbordar al padre

   Así cae sobre el mismo eje que la barra de navegación y el pie dentro de un
   contenedor a ancho completo, y se adapta sin pelear si la meten en una
   columna estrecha.

   Y es además el contenedor de consulta de toda la sección. Las medidas de
   dentro se expresan en cqi —tantos por ciento de ESTE ancho— y no en vw,
   porque la ventana no dice nada útil sobre el espacio del que dispone el
   bloque: la misma sección mide 1772 px en la portada y unos 1100 en la
   previsualización del panel, con la ventana igual de ancha en los dos
   casos. Con vw la previsualización mentía; con cqi las dos son la misma
   pieza a distinta escala.

   La referencia es la maqueta: 1 cqi = 17,72 px, que es el 1% de los 1772 px
   de ancho del diseño. */
.crew__interior {
	container-type: inline-size;
	container-name: crew;
	width: min(100% - (2 * var(--vela-gutter, 20px)), var(--vela-ancho, 1772px));
	max-width: 100%;
	margin-inline: auto;
}

/* ================================================================ título */

.crew__titulo {
	margin-bottom: clamp(22px, 2.817cqi, 50px);
	text-align: center;
	color: var(--crew-titulo);
}

/* La script se apoya sobre el encabezado sin llegar a pisarlo.

   La medida del PDF es de línea base a línea base: 49,6 px entre «conoce a»
   (118,88 px) y «TU TRIPULACIÓN» (56,54 px), y de ahí sale este 0,94.

   El número depende de las métricas de Tamara Falies, que el tema corrige en
   su @font-face (ascent 105%, descent 5%, sin interlínea) porque las que trae
   el archivo son desmedidas: 2 em de caja para una tinta de 0,26 em. Si esos
   descriptores cambian, hay que recalcular este interlineado:

       line-height = (ascent - descent) - 0,0597

   Antes se cuadraba con un 0,45 y las métricas originales. Funcionaba, pero
   solo con la fuente cargada: durante el «swap» —o sin el archivo— la de
   reserva tiene la tinta mucho más alta y se montaba sobre el titular. */
.crew__script {
	display: block;
	margin-bottom: 0;
	font-family: var(--vela-fuente-script, "Tamara Falies", "Brush Script MT", cursive);
	font-size: var(--vela-script, 44px);
	line-height: .94;
}

.crew__encabezado {
	margin: 0;
	font-family: var(--vela-fuente-titulo, var(--vela-fuente, sans-serif));
	/* 56,54 px a 1920 en la maqueta. */
	font-size: var(--vela-txt-2xl, 26px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: .01em;
	color: inherit;
}

.crew__ligero {
	font-weight: 300;
}

.crew__fuerte {
	font-weight: 800;
}

/* ============================================== tarjetas de grupo (portada) */

.crew__grupos {
	display: grid;
	grid-template-columns: repeat(var(--crew-cols, 2), minmax(0, 1fr));
	/* 164,7 px entre las dos tarjetas de la maqueta (880,8 → 1045,5): es un
	   9,29% del ancho de la sección, y lo que deja cada tarjeta en los
	   801,9 px sobre los que están medidas todas las proporciones de abajo. */
	gap: clamp(28px, 9.294cqi, 165px);
	align-items: start;
}

/* Proporciones leídas de los trazados del PDF, no del ojo. Sobre la tarjeta
   de 801,9 px de la maqueta:

     · foto     78,9 → 367,1  (288,2 px = 35,94%)
     · barra   287,8 → 880,8  (593,0 px = 73,95%)

   La barra empieza 79,3 px antes de que acabe la foto —un 9,89% de la
   tarjeta—: ese solape es lo que une la foto con el título por la esquina
   superior derecha, y es el margen negativo de aquí abajo. */
.crew-grupo {
	display: flex;
	align-items: flex-start;
}

.crew-grupo__foto {
	position: relative;
	z-index: 2;
	flex: 0 0 35.94%;
	margin-right: -9.89%;
	/* 288,2 x 303,5 en la maqueta: la foto es más alta que ancha. */
	aspect-ratio: 288 / 303;
	overflow: hidden;
	/* La «gota»: tres esquinas redondeadas y la superior derecha recta, que es
	   por donde la foto se une con la barra del título. */
	border-radius: var(--crew-radio) 0 var(--crew-radio) var(--crew-radio);
	background: #e7eef1;
}

.crew-grupo__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
}

.crew-grupo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.crew-grupo__hueco {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #dbe6ea, #eef4f6);
}

/* La cabecera arranca donde acaba la foto y llega hasta el borde. */
.crew-grupo__nombre {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: var(--crew-cabecera, 58px);
	margin: 0;
	/* 14,3 px entre «MARINEROS» y el borde de la barra en la maqueta. */
	padding-inline: clamp(10px, 0.813cqi, 15px);
	background: var(--crew-bar, #0c3846);
	color: #fff;
	font-size: var(--vela-txt-lg, 17px);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.crew-grupo__texto {
	/* En la maqueta el texto arranca en x=404,3 y la barra en x=287,8: son
	   116,5 px de sangría, un 19,65% del cuerpo. Medido desde el borde de la
	   foto (367,1) son los 37 px de aire que pedía el diseño.

	   El porcentaje va referido al cuerpo, que empieza 79,3 px ANTES de que
	   acabe la foto por el solape. Cuando la sangría se daba en píxeles sin
	   contar con eso, el solape se la comía entera y el texto quedaba pegado
	   a la imagen. */
	padding: clamp(12px, 1.084cqi, 19px) 0 0 19.65%;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 300;
	line-height: 1.34;
	text-align: justify;
	color: var(--crew-texto);
}

.crew-grupo__texto p {
	margin: 0 0 .7em;
}

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

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

.crew__acciones {
	margin: clamp(30px, 3.684cqi, 62px) 0 0;
	text-align: center;
}

.crew__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(100%, 643px);
	min-height: var(--crew-cabecera, 58px);
	padding: 0 32px;
	background: var(--crew-boton, #997952);
	color: #fff;
	font-size: var(--vela-txt-md, 15px);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	transition:
		filter .25s cubic-bezier(.22, .61, .36, 1),
		transform .25s cubic-bezier(.22, .61, .36, 1);
}

.crew__boton:hover,
.crew__boton:focus-visible {
	filter: brightness(1.09);
	transform: translateY(-2px);
	color: #fff;
}

.crew__boton:active {
	transform: none;
}

.crew__aviso {
	margin-top: 24px;
	padding: 10px 14px;
	border-left: 3px solid var(--crew-boton, #997952);
	background: rgba(153, 121, 82, .08);
	font-size: var(--vela-txt-sm, 13px);
	text-align: left;
}

/* ====================================================== equipo completo */

.crew-bloque + .crew-bloque {
	margin-top: clamp(40px, 4.767cqi, 84px);
}

/* Rótulo centrado con su filete debajo. */
.crew-bloque__rotulo {
	margin: 0 0 clamp(24px, 2.817cqi, 46px);
	text-align: center;
	font-family: var(--vela-fuente-titulo, var(--vela-fuente, sans-serif));
	font-size: var(--vela-txt-lg, 17px);
	font-weight: 400;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--crew-titulo);
}

.crew-bloque__rotulo span {
	display: inline-block;
	padding-bottom: 12px;
	border-bottom: 1px solid currentColor;
}

/* Flex y no rejilla: con menos personas que columnas, una rejilla las deja
   pegadas a la izquierda y aquí tienen que quedar centradas. */
.crew-bloque__rejilla {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(22px, 2.6cqi, 46px);
}

.crew-persona {
	flex: 0 1 calc((100% / var(--crew-cols, 4)) - clamp(22px, 2.6cqi, 46px));
	min-width: 150px;
	max-width: 220px;
	text-align: center;
}

.crew-persona__foto {
	aspect-ratio: 1 / 1.08;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: clamp(16px, 1.95cqi, 30px);
	background: #e7eef1;
}

.crew-persona__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.crew-persona__hueco {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #dbe6ea, #eef4f6);
}

.crew-persona__nombre {
	margin: 0 0 4px;
	font-size: var(--vela-txt-sm, 13px);
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--crew-titulo);
}

.crew-persona__cargo {
	margin: 0;
	font-size: var(--vela-txt-xs, 11px);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--crew-cargo, #997952);
}

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

@container crew ( max-width: 900px ) {
	.crew__grupos {
		grid-template-columns: minmax(0, 1fr);
	}

	.crew-persona {
		flex-basis: calc(50% - 24px);
	}
}

@container crew ( max-width: 560px ) {
	/* La foto pasa arriba: a lo ancho del móvil no cabe en dos columnas.

	   El radio se redeclara aquí y no en .crew porque una consulta de
	   contenedor solo alcanza a los descendientes del contenedor, y .crew es
	   su padre. Desde .crew-grupo se hereda igual hacia foto y barra. */
	.crew-grupo {
		display: block;
		/* Una medida de dedo, no el 4,7% de un contenedor ya estrecho. */
		--crew-radio: 22px;
	}

	/* Apilados, la foto y la barra del título dejan de ser dos piezas y pasan
	   a ser una sola caja: el redondeo va por fuera y la unión entre ambas es
	   recta, igual que en escritorio la foto se une a la barra por su esquina
	   superior derecha. */
	.crew-grupo__foto {
		flex: none;
		width: 100%;
		margin-right: 0;
		aspect-ratio: 16 / 10;
		border-radius: var(--crew-radio) var(--crew-radio) 0 0;
	}

	.crew-grupo__nombre {
		justify-content: flex-start;
		padding-inline: 18px;
		border-radius: 0 0 var(--crew-radio) var(--crew-radio);
	}

	.crew-grupo__texto {
		padding-left: 0;
		text-align: left;
	}

	.crew-bloque__rejilla {
		gap: 20px;
	}

	.crew-persona {
		flex-basis: calc(50% - 10px);
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.crew__boton {
		transition: none;
	}
}