/**
 * Tarjetas que cruzan con el scroll.
 *
 * Diseño de la captura de Revby: fondo #FAFAF7, título centrado Raleway 800
 * #183132 (como el de capacidades), tarjetas #215050 en proporción
 * 6:5; las dos primeras con borde y sombra #183132, las otras con línea menta
 * #A7F3CC. Título Nunito 800 en mayúsculas y texto Segoe UI, blancos. Los
 * tamaños del texto van en cqw (ancho de la tarjeta), así la tarjeta se ve
 * igual a cualquier tamaño.
 * Efecto de getquoti.ai: con view.js activo, la fila cruza la pantalla con la
 * sección fija.
 */

.rvb-horiz.rvb-horiz {
	--rvb-horiz-gap: clamp(20px, 2.4vw, 40px);
	--rvb-horiz-w: clamp(280px, 30vw, 440px);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px);
	/* Sin overflow: anularía el sticky */
	overflow: visible;
	background: var(--rvb-horiz-bg, #fafaf7);
	color: #fff;
	font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ancho de las tarjetas durante el recorrido (los de Quoti) */
@media (max-width: 991px) {
	.rvb-horiz.rvb-horiz {
		--rvb-horiz-w: 50vw;
	}
}

@media (max-width: 767px) {
	.rvb-horiz.rvb-horiz {
		--rvb-horiz-w: 80vw;
	}
}

@media (max-width: 479px) {
	.rvb-horiz.rvb-horiz {
		--rvb-horiz-w: 85vw;
	}
}

/* ---------- Título ---------- */

.rvb-horiz .rvb-horiz__title {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto clamp(32px, 4vw, 56px);
	padding: 0;
	font-family: 'Raleway', 'Segoe UI', sans-serif;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 800;
	font-style: normal;
	line-height: 1.17;
	letter-spacing: -0.005em;
	text-align: center;
	text-transform: none;
	color: #183132;
}

/* Máscara de cada palabra (deja sitio a las letras que bajan, como la "y") */
.rvb-horiz .rvb-horiz__w {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	vertical-align: top;
}

.rvb-horiz .rvb-horiz__wi {
	display: inline-block;
}

/* ---------- Fila quieta (editor y sin animación) ---------- */

.rvb-horiz .rvb-horiz__track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--rvb-horiz-cols, 4), minmax(0, 1fr));
	/* Si el texto de una tarjeta no cabe en 6:5, todas crecen igual */
	align-items: stretch;
	gap: var(--rvb-horiz-gap);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
}

@media (max-width: 1023px) {
	.rvb-horiz .rvb-horiz__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 760px;
	}
}

@media (max-width: 599px) {
	.rvb-horiz .rvb-horiz__track {
		grid-template-columns: minmax(0, 1fr);
		max-width: 400px;
	}
}

/* ---------- Tarjeta ---------- */

.rvb-horiz .rvb-horiz__card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
	aspect-ratio: 6 / 5;
	margin: 0;
	padding: 0;
	border: 1px solid #183132;
	border-radius: 14px;
	background: #215050;
	box-shadow: 4px 4px 0 #183132;
	color: #fff;
	/* Los tamaños de dentro se miden con el ancho de la tarjeta */
	container-type: inline-size;
	transform: rotate(var(--giro, 0deg));
}

.rvb-horiz .rvb-horiz__card--menta {
	border-color: #a7f3cc;
	box-shadow: none;
}

.rvb-horiz .rvb-horiz__cuerpo {
	box-sizing: border-box;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 6cqw;
	padding: 7.6cqw 8.2cqw;
}

.rvb-horiz .rvb-horiz__h {
	margin: 0;
	padding: 0;
	font-family: 'Nunito', 'Raleway', 'Segoe UI', sans-serif;
	font-size: max(1.125rem, 6.4cqw);
	font-weight: 800;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
	color: #fff;
}

.rvb-horiz .rvb-horiz__p {
	margin: 0;
	padding: 0;
	font-size: max(0.875rem, 4.07cqw);
	font-weight: 400;
	line-height: 1.78;
	color: #fff;
}

/* Tarjeta de foto: la imagen llena la tarjeta (dentro del borde) */
.rvb-horiz .rvb-horiz__card--foto {
	overflow: hidden;
}

.rvb-horiz .rvb-horiz__card--foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

/* Sin foto todavía: degradado con icono */
.rvb-horiz .rvb-horiz__card--vacia {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #2a6060, #163838);
}

.rvb-horiz .rvb-horiz__icono {
	width: 44px;
	height: 44px;
	color: rgb(255 255 255 / 0.45);
}

/* ---------- Con animación: la sección se fija y la fila cruza ---------- */

html.rvb-motion .rvb-horiz.is-js {
	padding: 0;
}

html.rvb-motion .rvb-horiz.is-js .rvb-horiz__pin {
	position: sticky;
	/* view.js la centra en el espacio que deja el header */
	top: var(--rvb-horiz-top, var(--rvb-header, 0px));
	box-sizing: border-box;
	padding: clamp(56px, 7vw, 100px) 0;
	/* Solo se recorta a los lados: las tarjetas giradas pueden salir por arriba y por abajo */
	overflow-x: clip;
	overflow-y: visible;
}

/* El título se queda arriba de la capa fija y las tarjetas pasan por debajo */
html.rvb-motion .rvb-horiz.is-js .rvb-horiz__title {
	padding: 0 clamp(16px, 4vw, 40px);
}

/* La fila empieza y termina 120vw fuera de la pantalla, como en Quoti */
html.rvb-motion .rvb-horiz.is-js .rvb-horiz__track {
	display: flex;
	box-sizing: content-box;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 0 120vw;
	will-change: transform;
}

html.rvb-motion .rvb-horiz.is-js .rvb-horiz__card {
	flex: none;
	width: var(--rvb-horiz-w);
	will-change: transform;
}