/*
 * Sección sobre foto: foto a todo el ancho con veladura y texto centrado en claro
 * (prototipo L797-803, L889-892). En móvil la foto baja al pie de la sección y no hay parallax.
 * Con lista de servicios o «llegar», dos columnas sobre la foto (.sec-foto, L474-489 y L602-603).
 */

.equipo {
	position: relative;
	overflow: hidden;
	min-height: clamp(520px, 44vw, 680px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--blanco);
	background: var(--wp--preset--color--tinta);
	isolation: isolate;

	@media (max-width: 900px) {
		min-height: 0;
		align-items: flex-start;
		background: var(--wp--preset--color--gris-claro);
		padding-bottom: min(42vw, 260px);
	}
}

/* Veladura de Quiénes somos: el color de la veladura del tema a 0,55 → 0,68 (tokens.json, veladura-arriba). */
.equipo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--veladura-arriba),
		var(--wp--preset--color--veladura-abajo)
	);
	background: linear-gradient(
		180deg,
		rgb(from var(--wp--preset--color--veladura-arriba) r g b / 0.55),
		rgb(from var(--wp--preset--color--veladura-abajo) r g b / 0.68)
	);
}

.equipo-foto {
	position: absolute;
	z-index: -2;
	left: 0;
	right: 0;
	top: -25%;
	height: 150%;
	will-change: transform;

	/* El núcleo pone el parallax en línea: en móvil se anula, como en el prototipo. */
	@media (max-width: 900px) {
		top: auto;
		bottom: 0;
		left: -35%;
		right: auto;
		width: 170%;
		height: auto;
		aspect-ratio: 1500 / 594;
		transform: none !important;
		mask-image: linear-gradient(
			to bottom,
			transparent 0,
			var(--wp--preset--color--tinta) 30%
		);
	}
}

.equipo-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;

	@media (max-width: 900px) {
		object-position: 50% 50%;
	}
}

.equipo-txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	max-width: 860px;
	padding-block: 96px;

	@media (max-width: 900px) {
		padding-block: 2em;
	}
}

.equipo-txt .h2 em {
	color: var(--wp--preset--color--menta);
}

.equipo-txt p {
	margin: 0;
	max-width: 640px;
	font-size: var(--wp--preset--font-size--cuerpo);
	color: var(--wp--preset--color--blanco-roto);
}

/* Dos columnas sobre la foto: cabecera a la izquierda; filas de servicios o mapa a la derecha. */
.sec-foto {
	position: relative;
	overflow: hidden;
	color: var(--wp--preset--color--blanco);
	background: var(--wp--preset--color--noche-2);
	isolation: isolate;
}

/* Veladura horizontal del color de la veladura del tema a 0,78 → 0,5 (prototipo L477). */
.sec-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--veladura-abajo),
		var(--wp--preset--color--veladura-arriba)
	);
	background: linear-gradient(
		90deg,
		rgb(from var(--wp--preset--color--veladura-abajo) r g b / 0.78),
		rgb(from var(--wp--preset--color--veladura-arriba) r g b / 0.5)
	);
}

.sec-foto-img {
	position: absolute;
	z-index: -2;
	left: 0;
	right: 0;
	top: -18%;
	height: 136%;
	will-change: transform;
}

.sec-foto-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.sec-foto-in {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--space-3);
	row-gap: var(--wp--preset--spacing--space-5);
	align-items: end;
	padding-block: 128px;

	@media (max-width: 900px) {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 3.2em;
	}
}

.sec-foto-cab {
	grid-column: 1 / span 5;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-3);
	min-width: 0;

	@media (max-width: 900px) {
		grid-column: 1 / -1;
	}
}

.sec-foto-cab .h2s em {
	color: var(--wp--preset--color--menta);
}

.sec-foto-cab p {
	margin: 0;
	max-width: 440px;
	font-size: var(--wp--preset--font-size--cuerpo-apoyo);
	color: var(--wp--preset--color--blanco-roto);
}

.sec-foto-cab .btn {
	align-self: flex-start;
}

.sec-foto-in > .lista,
.sec-foto-in > .mapa {
	grid-column: 7 / span 6;

	@media (max-width: 900px) {
		grid-column: 1 / -1;
	}
}

/* En «llegar», el aviso del mapa sobre blanco casi opaco (prototipo L489). */
.sec-foto-llegar .mapa {
	min-height: 320px;
	background: var(--wp--preset--color--blanco);
	background: rgb(from var(--wp--preset--color--blanco) r g b / 0.92);
}

/*
 * Filas claras (prototipo L165-178 y L485-488): rayas blancas al 35 %, barrido blanco al pasar o con foco y
 * círculo azul; con movimiento reducido solo cambia el color.
 */
.lista-claro {
	border-top: 1px solid var(--wp--preset--color--linea-clara);
	border-top-color: rgb(from var(--wp--preset--color--blanco) r g b / 0.35);
}

.lista-claro .fila {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: var(--wp--preset--spacing--space-3)
		var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-3)
		0;
	border-bottom: 1px solid var(--wp--preset--color--linea-clara);
	border-bottom-color: rgb(
		from var(--wp--preset--color--blanco) r g b / 0.35
	);
	position: relative;
	isolation: isolate;
	transition:
		color var(--vs-dur-interaccion) var(--vs-curva-ease),
		opacity var(--vs-dur-revelado) var(--vs-curva-ease),
		transform var(--vs-dur-revelado) var(--vs-curva-ease);
}

.lista-claro .fila::before {
	content: "";
	position: absolute;
	inset: -1px calc(-1 * var(--wp--preset--spacing--space-2));
	background: var(--wp--preset--color--blanco);
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vs-dur-estado) var(--vs-curva-ease);
}

.lista-claro .fila:hover,
.lista-claro .fila:focus-visible {
	color: var(--wp--preset--color--tinta);
}

.lista-claro .fila:hover::before,
.lista-claro .fila:focus-visible::before {
	transform: scaleX(1);
}

.lista-claro .fila-t {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	transition: transform var(--vs-dur-estado) var(--vs-curva-ease);
}

.lista-claro .fila:hover .fila-t,
.lista-claro .fila:focus-visible .fila-t {
	/* Con movimiento reducido el texto no se desplaza. */
	@media (prefers-reduced-motion: no-preference) {
		transform: translateX(var(--wp--preset--spacing--space-2));
	}
}

.lista-claro .fila-n {
	font-size: var(--wp--preset--font-size--lista-servicio);
	font-weight: var(--wp--custom--tipo--lista-servicio--font-weight);
	letter-spacing: var(--wp--custom--tipo--lista-servicio--letter-spacing);
	line-height: var(--wp--custom--tipo--lista-servicio--line-height);
}

.lista-claro .fila-d {
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--blanco-roto);
	transition: color var(--vs-dur-interaccion) var(--vs-curva-ease);
}

.lista-claro .fila:hover .fila-d,
.lista-claro .fila:focus-visible .fila-d {
	color: var(--wp--preset--color--gris);
}

.lista-claro .circ {
	border-color: var(--wp--preset--color--blanco);
	border-color: rgb(from var(--wp--preset--color--blanco) r g b / 0.6);
}

.lista-claro .fila:hover .circ,
.lista-claro .fila:focus-visible .circ {
	background: var(--wp--preset--color--azul);
	border-color: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);

	@media (prefers-reduced-motion: no-preference) {
		transform: rotate(-45deg);
	}
}