/**
 * Hero con zoom al hacer scroll.
 *
 * Diseño de la portada de revby-story: fondo #183132, degradado
 * rgba(14,31,32) de 0.1 a 0.86, título Raleway 800 blanco, etiqueta Mulish
 * 700 #A7F3CC, subtítulo Mulish #E3FCEF y botón menta #A7F3CC.
 * Diferencia con revby-story: allí la capa fija va en top 0, y aquí va
 * debajo del header de Elementor (--rvb-header), para que no lo tape.
 */

.rvb-portada.rvb-portada {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	/* Sin overflow: anularía el sticky */
	overflow: visible;
	background: #183132;
	color: #fff;
	font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.rvb-portada .rvb-portada__pin {
	position: relative;
	height: min(92vh, 900px);
	min-height: 560px;
	overflow: hidden;
}

/* Con animación: la sección mide el recorrido y la imagen queda fija.
   En revby-story solo pasaba a ≥900 px; aquí también en móvil (en vertical).
   Los móviles en horizontal (poca altura) se quedan con la versión quieta. */
@media (min-width: 900px), (min-height: 560px) {
	html.rvb-motion .rvb-portada.rvb-portada:not(.is-static) {
		height: var(--rvb-portada-largo, 300vh);
	}

	html.rvb-motion .rvb-portada:not(.is-static) .rvb-portada__pin {
		position: sticky;
		top: var(--rvb-header, 0px);
		height: calc(100vh - var(--rvb-header, 0px));
		/* svh: en móvil, la altura con la barra del navegador visible, para que el texto no quede debajo */
		height: calc(100svh - var(--rvb-header, 0px));
		min-height: 0;
	}
}

.rvb-portada .rvb-portada__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	transform-origin: var(--rvb-portada-origen, 50% 58%);
	will-change: transform;
}

.rvb-portada .rvb-portada__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(14 31 32 / 0.1) 30%, rgb(14 31 32 / 0.86) 100%);
}

/* ---------- Texto (abajo a la izquierda, dentro de un ancho de 1280 px) ---------- */

.rvb-portada .rvb-portada__copy {
	position: absolute;
	right: 0;
	bottom: clamp(40px, 9vh, 96px);
	left: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 640px) {
	.rvb-portada .rvb-portada__copy {
		padding-inline: 24px;
	}
}

@media (min-width: 1024px) {
	.rvb-portada .rvb-portada__copy {
		padding-inline: 40px;
	}
}

.rvb-portada .rvb-portada__eyebrow {
	margin: 0;
	padding: 0;
	font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #a7f3cc;
}

.rvb-portada .rvb-portada__title {
	margin: 0;
	padding: 0;
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
	font-size: clamp(3.4rem, 9vw, 8rem);
	font-weight: 800;
	font-style: normal;
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-transform: none;
	text-wrap: balance;
	color: #fff;
}

.rvb-portada .rvb-portada__pal {
	display: inline-block;
	white-space: nowrap;
}

.rvb-portada .rvb-portada__ch {
	display: inline-block;
}

.rvb-portada .rvb-portada__sub {
	max-width: 620px;
	margin: 0;
	padding: 0;
	font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
	font-weight: 400;
	line-height: 1.4;
	color: #e3fcef;
}

.rvb-portada .rvb-portada__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	background: #a7f3cc;
	color: #183132;
	font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s, transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.rvb-portada .rvb-portada__btn svg {
	flex: none;
	width: 18px;
	height: 18px;
	transition: transform 0.35s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.rvb-portada .rvb-portada__btn:hover {
	background: #bff7d9;
	color: #183132;
	transform: translateY(-2px);
}

.rvb-portada .rvb-portada__btn:hover svg {
	transform: translateX(4px);
}

.rvb-portada .rvb-portada__btn:focus-visible {
	outline: 2px solid #a7f3cc;
	outline-offset: 3px;
}

/* "Scroll" con una línea que se desvanece (solo en pantallas anchas) */
.rvb-portada .rvb-portada__hint {
	position: absolute;
	right: 40px;
	bottom: clamp(40px, 9vh, 96px);
	display: none;
	align-items: center;
	gap: 12px;
	font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #e3fcef;
}

.rvb-portada .rvb-portada__hint span {
	display: block;
	width: 1px;
	height: 56px;
	background: linear-gradient(#a7f3cc, transparent);
}

@media (min-width: 900px) {
	.rvb-portada .rvb-portada__hint {
		display: flex;
	}
}

/* Mientras llega view.js, el texto espera oculto para la entrada. Si el script
   no llega (optimizadores que retrasan JS), aparece solo a los 2.5 s. */
html.rvb-motion .rvb-portada:not(.is-js):not(.is-static) .rvb-portada__anim {
	opacity: 0;
	animation: rvb-portada-seguro 0.6s ease 2.5s forwards;
}

@keyframes rvb-portada-seguro {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.rvb-portada .rvb-portada__btn,
	.rvb-portada .rvb-portada__btn svg {
		transition: none;
	}
}

/* Editor: una pantalla de alto, sin recorrido */
.editor-styles-wrapper .rvb-portada .rvb-portada__pin {
	height: 82vh;
	min-height: 560px;
}