/**
 * Tarjetas apiladas con título fijo.
 *
 * Diseño de la captura de Revby: fondo blanco, título Raleway 800 #183132,
 * tarjetas blancas (rectas) con borde #DFE6EA y la imagen de ondas verdes a la
 * derecha. Con animación se ve la primera y, al hacer scroll, cada una sube
 * desde abajo y se apila sobre la anterior (view.js).
 */

.rvb-capac.rvb-capac {
	--rvb-stack-top: 24px;
	--rvb-stack-paso: 10px;
	--rvb-stack-gap: 40px;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(56px, 8vw, 112px) clamp(16px, 4vw, 40px);
	/* Sin overflow: anularía el sticky */
	overflow: visible;
	background: var(--rvb-capac-bg, #fff);
	color: #282827;
	font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.rvb-capac .rvb-capac__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}

/* ---------- Título fijo a la izquierda ---------- */

.rvb-capac .rvb-capac__lado {
	align-self: stretch;
}

.rvb-capac .rvb-capac__fijo {
	position: sticky;
	top: calc(var(--rvb-header, 0px) + var(--rvb-stack-top) + 4px);
}

.rvb-capac .rvb-capac__eyebrow {
	margin: 0 0 clamp(16px, 2.6vw, 36px);
	padding: 0;
	font-family: 'Raleway', 'Segoe UI', sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.3;
	color: #183132;
}

.rvb-capac .rvb-capac__title {
	margin: 0;
	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-transform: none;
	color: #183132;
}

/* ---------- Tarjetas ---------- */

/* Lista normal (editor, sin animación o si la escena no cabe en la pantalla) */
.rvb-capac .rvb-capac__card {
	position: relative;
	z-index: calc(var(--i, 0) + 1);
	margin: 0 0 var(--rvb-stack-gap);
}

.rvb-capac .rvb-capac__card:last-child {
	margin-bottom: 0;
}

/* La caja es lo que se ve (borde, ondas y sombra); la tarjeta es la que mueve GSAP,
   así el hover no pisa su transform. */
.rvb-capac .rvb-capac__caja {
	box-sizing: border-box;
	height: 100%;
	padding: clamp(28px, 3.2vw, 44px) clamp(22px, 2.9vw, 40px) clamp(28px, 3.2vw, 44px);
	border: 1px solid #dfe6ea;
	border-radius: 12px;
	background: #fff var(--rvb-capac-img) right bottom / cover no-repeat;
	box-shadow: 0 18px 44px -32px rgb(24 49 50 / 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
	.rvb-capac--hover .rvb-capac__card:hover .rvb-capac__caja {
		transform: scale(1.03);
		box-shadow: 0 24px 56px -30px rgb(24 49 50 / 0.36);
	}
}

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

/* ---------- Con animación: escena fija y tarjetas que suben ---------- */

/* view.js (.is-scroll) da alto a la lista y mide la tarjeta más alta: todas
   miden lo mismo y quedan apiladas, con un escalón de --rvb-stack-paso. */
html.rvb-motion .rvb-capac.is-scroll .rvb-capac__escena {
	position: sticky;
	top: var(--rvb-capac-top, var(--rvb-header, 0px));
	height: var(--rvb-capac-alto);
}

html.rvb-motion .rvb-capac.is-scroll .rvb-capac__card {
	position: absolute;
	top: calc(var(--i, 0) * var(--rvb-stack-paso));
	right: 0;
	left: 0;
	height: var(--rvb-capac-card-h);
	margin: 0;
	will-change: transform;
}

/* El título se queda arriba, a la altura de la escena */
html.rvb-motion .rvb-capac.is-scroll .rvb-capac__fijo {
	top: var(--rvb-capac-top, var(--rvb-header, 0px));
}

.rvb-capac .rvb-capac__label {
	margin: 0 0 clamp(18px, 2.4vw, 30px);
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
}

.rvb-capac .rvb-capac__h {
	max-width: 17em;
	margin: 0 0 clamp(8px, 1vw, 12px);
	padding: 0;
	font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	font-weight: 700;
	font-style: normal;
	line-height: 1.375;
	letter-spacing: normal;
	text-transform: none;
	color: #282827;
}

.rvb-capac .rvb-capac__text {
	max-width: 30em;
	margin: 0;
	padding: 0;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 2;
	color: #282827;
}

/* ---------- Tablet y móvil: una columna ---------- */

@media (max-width: 860px) {
	.rvb-capac .rvb-capac__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rvb-capac .rvb-capac__fijo {
		position: static;
	}
}

/* La imagen (2162×727) llena la tarjeta de borde a borde. Con una tarjeta casi
   cuadrada, cover o un ancho fijo la cortaban y dejaban una línea recta arriba;
   así se ve entera (las ondas son suaves y aguantan el estiramiento). */
@media (max-width: 860px) {
	.rvb-capac .rvb-capac__caja {
		background-size: 100% 100%;
	}
}

@media (max-width: 600px) {
	.rvb-capac .rvb-capac__text {
		line-height: 1.75;
	}
}

/* Editor: sin fijar ni apilar */
.editor-styles-wrapper .rvb-capac .rvb-capac__fijo {
	position: relative;
	top: auto;
}