/* =================================================================
   Hero Block
   Styles: Centrado | Texto + Imagen (split) | Cover + Overlay
   ================================================================= */

/* --- Base --- */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 50vh;
	display: grid;
	background-attachment: scroll;
}

.hero__container {
	position: relative;
	z-index: 1;
}

.wrap_hero_container {
	padding: 0 100px 0 200px;
}

.hero__content {
	margin-inline: auto;
	margin-left: 100px;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--32);
	align-items: center;
	height: 100%;
}

/* --- Content elements --- */
.hero__tagline {
	margin: 0 0 var(--wp--preset--spacing--2);
	opacity: 1;
	font-size: var(--wp--preset--font-size--22);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(2rem, 6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.3;
	position: relative;
	text-wrap: pretty;
	text-transform: uppercase;
}

.hero__title:before {
	background: var(--wp--preset--color--gold);
	content: '';
	display: block;
	height: 110%;
	/* margin-top: -5%; */
	left: -50px;
	position: absolute;
	top: -5%;
	width: 10px;
}

.hero__subtitle {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(1.125rem, 2vw, 1.25rem);
	opacity: 0.9;
	line-height: 160%;
}

.hero__text {
	margin-bottom: var(--wp--preset--spacing--20);
}

.hero__actions {
	display: flex;
	gap: var(--wp--preset--spacing--8);
	flex-wrap: wrap;
}

/* --- Padding variants --- */
.hero--py-sm {
	padding-block: var(--wp--preset--spacing--32);
}
.hero--py-md {
	padding-block: var(--wp--preset--spacing--48);
}
.hero--py-lg {
	padding-block: var(--wp--preset--spacing--64);
}

/* --- Background colors --- */
.hero--bg-default {
	background-color: var(--wp--preset--color--bg);
}
.hero--bg-light {
	background-color: var(--wp--preset--color--bg-secondary);
}
.hero--bg-dark {
	background-color: var(--wp--preset--color--bg-dark);
}
.hero--bg-primary {
	background-color: var(--wp--preset--color--primary);
}
.hero--bg-accent {
	background-color: var(--wp--preset--color--accent);
}

/* --- Text on dark / media backgrounds --- */
.hero--text-light {
	color: var(--wp--preset--color--bg-secondary);
}

.hero--text-light .hero__title {
	color: var(--wp--preset--color--white);
}

.hero--text-light .hero__subtitle,
.hero--text-light .hero__tagline {
	color: var(--wp--preset--color--bg-secondary);
	opacity: 0.9;
}

.hero--text-light .hero__text,
.hero--text-light .hero__text p,
.hero--text-light .hero__text strong,
.hero--text-light .hero__text p strong {
	color: var(--wp--preset--color--bg-secondary);
	/* opacity: 0.85; */
}

/* --- Vertical alignment --- */
.hero--valign-top .hero__grid {
	align-items: start;
}
.hero--valign-center .hero__grid {
	align-items: center;
}
.hero--valign-bottom .hero__grid {
	align-items: end;
}

/* --- Content alignment --- */
.hero--text-center .hero__grid {
	text-align: center;
}

.hero--text-center .hero__actions {
	justify-content: center;
}

/* --- Overlay --- */
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--black);
	pointer-events: none;
}

/* --- Style: Centrado --- */
.is-style-centered .hero__grid {
	justify-items: center;
	text-align: center;
	max-width: 100%;
	margin-inline: auto;
}

.is-style-centered .hero__actions {
	justify-content: center;
}

/* --- Style: Split (Texto + Imagen) --- */
.is-style-split .hero__media {
	height: 100%;
}

.is-style-split .hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--8);
}

/* --- Form column (independent of style) --- */
.hero__form {
	width: 100%;
	/* background-color: var(--wp--preset--color--bg); */
	border-radius: var(--wp--custom--radius--8, 0.5rem);
	padding: 1.5rem 150px 0 0;
	color: var(--wp--preset--color--text);
	box-sizing: border-box;
}

/* The title/description already live in .hero__content — hide the form
   plugin's own heading if its shortcode renders one (e.g. Gravity Forms
   without title="false"/description="false"). */
.hero__form .gform_heading,
.hero__form .wpcf7-form-title {
	display: none;
}

.hero__form  .gfield_checkbox label.gform-field-label {
	color: white;
}

/* --- Style: Overlay (Cover) --- */
.is-style-overlay .hero__content {
	position: relative;
	z-index: 1;
	margin-left: 100px;
}

/* --- Background image --- */
.hero[style*="background-image"] {
	background-size: cover;
	background-position: center;
}

/* --- Background video --- */
.hero__bg-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero__bg-video-element {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.77vh;
	transform: translate(-50%, -50%);
	object-fit: cover;
	pointer-events: none;
}

.hero__bg-video-placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
	border-radius: var(--wp--custom--radius--8);
	font-size: var(--wp--preset--font-size--14);
	text-align: center;
	z-index: 1;
}

/* --- Flecha de "scroll down" (bottom-right) ---
   Imagen por background (no <img>) para que el sistema de reveal al
   hacer scroll no la capture y le pise la animación. */
.hero__scroll {
	display: none; /* se activa en escritorio para el hero con vídeo */
	position: absolute;
	bottom: 1.5rem;
	right: 2.75rem;
	z-index: 2;
	width: 15px;
	height: 71px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	animation: hero-scroll-bob 2s ease-in-out infinite;
}

/* Loop continuo sube y baja (sin pausa) */
@keyframes hero-scroll-bob {
	0%,
	60% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-10px);
	}
}

/* =================================================================
   Responsive
   ================================================================= */

/* Tablet (48rem / 768px) */
@media (min-width: 48rem) {
	.hero--py-sm {
		padding-block: var(--wp--preset--spacing--32);
	}
	.hero--py-md {
		padding-block: var(--wp--preset--spacing--72);
	}
	.hero--py-lg {
		padding-block: var(--wp--preset--spacing--96);
	}

	.is-style-overlay .hero__grid {
		max-width: 66.666%;
	}

	.hero__subtitle {
		font-size: var(--wp--preset--font-size--20);
	}
}

/* Desktop (64rem / 1024px) */
@media (min-width: 64rem) {
	.wrap_hero_container {
		padding: 0 10px 0 20px;
	}
	.hero__form {
		padding: 1.5rem 10px 0 0;
	}

	.hero__form .gform_wrapper {
		padding-left: 10rem;
		padding-right: 10rem;
	}

	.hero__title {
		/* font-size: clamp(2rem, 6vw, 3.25rem); */
		font-size: 2.6rem;
	}

	.is-style-centered .hero__grid {
		max-width: 66.666%;
		margin-inline: auto;
	}

	.is-style-split .hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--48);
	}

	.is-style-split.hero--img-left .hero__media {
		order: -1;
	}

	.hero--has-form .hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--48);
	}

	/* Sin formulario pero con botón de modal: mismo mecanismo de 2
	   columnas que --has-form, pero 2fr/1fr — la segunda columna queda
	   vacía (no hay nada que mostrar ahí), así que el contenido tiene
	   más aire que en el reparto 1fr/1fr pensado para un formulario real. */
	.hero--has-modal .hero__grid {
		grid-template-columns: 2fr 1fr;
		gap: var(--wp--preset--spacing--48);
	}

	.hero__subtitle {
		font-size: var(--wp--preset--font-size--18);
		text-transform: uppercase;
	}

	.hero__text p {
		font-size: var(--wp--preset--font-size--18);
	}

	/* Vídeo de fondo: el hero toma proporción 16:9 del ancho de la
	   ventana para que el vídeo se vea entero, con tope de
	   (alto de ventana − 100px). El vídeo llena esa caja con
	   object-fit: cover. */
	.hero--has-bg-video {
		box-sizing: border-box; /* el tope incluye el padding vertical */
		min-height: min(56.25vw, calc(100vh - 100px));
		max-height: calc(100vh - 100px);
	}
	.hero--has-bg-video .hero__bg-video-element {
		inset: 0;
		top: auto;
		left: auto;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		transform: none;
		object-fit: cover;
	}

	/* Flecha "baja para ver el resto" — solo en el hero con vídeo. */
	.hero--has-bg-video .hero__scroll {
		display: block;
	}
}

/* Large desktop (80rem / 1280px) */
@media (min-width: 80rem) {
	.is-style-overlay .hero__grid {
		max-width: 50%;
	}

	.is-style-split .hero__grid {
		gap: var(--wp--preset--spacing--64);
	}
}

/* =================================================================
   Accessibility & Performance
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
	.hero__bg-video {
		display: none;
	}
	.hero[style*="background-image"] {
		/* Keep static image, just no video */
	}
	.hero__scroll {
		animation: none;
	}
}


@media (max-width: 48rem) {
	.wrap_hero_container {
		padding: 0 20px;
	}
	.hero__form {
		padding: 1.5rem 0 0 0;
	}
	/* Menos sangría en móvil (base: 100px / -50px). */
	.hero__content,
	.is-style-overlay .hero__content {
		margin-left: 30px;
	}
	.hero__title:before {
		left: -30px;
	}
}

/* ---------------------------------------------------------
   CTA modal (formulario en ventana modal)
   ".form-modal*" — markup en st_render_form_modal() (inc/helpers.php),
   JS compartido en assets/js/main.js. Mismo modal que usan los bloques
   CTA y Cabecera de Página; estas reglas están duplicadas en sus
   respectivos style.css con las mismas clases (WordPress carga el CSS
   por bloque, ver comentario equivalente sobre .accordion__* en
   blocks/core/toc/style.css).
   --------------------------------------------------------- */
.hero__cta-modal-btn {
	cursor: pointer;
}

.form-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard),
		visibility 0s linear var(--wp--custom--motion--duration--base);
}

.form-modal.is-open {
	visibility: visible;
	opacity: 1;
	transition:
		opacity var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard),
		visibility 0s;
}

.form-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.form-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 32rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--4, 0.5rem);
	padding: 2.5rem 2rem 2rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	transform: translateY(1rem) scale(0.97);
	transition: transform var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard);
}

.form-modal.is-open .form-modal-dialog {
	transform: translateY(0) scale(1);
}

.form-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard);
}

.form-modal-close:hover,
.form-modal-close:focus-visible {
	background: var(--wp--preset--color--bg-secondary);
}

.form-modal-title {
	margin: 0 0 0.75rem;
	padding-right: 1.5rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--22);
	font-weight: 700;
	color: var(--wp--preset--color--text-heading);
	text-transform: uppercase;
}

.form-modal-description {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--15, 0.9375rem);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

/* Gravity Forms' default field shadow (--gf-ctrl-shadow, Orbital theme) es
   casi invisible sobre fondo blanco — se sube su opacidad aquí sin tocar el
   resto del estilo del campo. Se sobreescribe la variable en el propio
   wrapper theme-framework (no un ancestro) para que gane sobre la misma
   declaración del plugin en ese mismo elemento. */
.form-modal-form .gform-theme--framework,
.form-modal-form .gform-theme--api {
	--gf-ctrl-shadow: 0 1px 4px rgba(18, 25, 97, 0.22);
}

/* Bloquea el scroll de la página mientras el modal está abierto */
body.has-form-modal-open {
	overflow: hidden;
}