/* ==========================================================================
   Hero Fullscreen — estilos estructurales base (v4).

   Modelo de capas independientes:
   - .eh-hero__layer--headline y .eh-hero__layer--cta son DOS capas
     absolutas que cubren todo el hero, cada una con su propio flexbox.
   - El titular se posiciona con los controles de SU capa; el CTA con los
     de la SUYA. Nunca pueden entrar en conflicto entre sí.
   - Las capas tienen pointer-events:none (no bloquean nada); solo sus
     hijos (titular, tarjeta, botón) reciben clics.

   Tarjeta estilo "marco": el fondo translúcido + blur se aplica a TODA la
   tarjeta (incluida la zona alrededor de la imagen), y la imagen va dentro
   con su propio radio interior — igual que la referencia.
   ========================================================================== */

.eh-hero__outer {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.eh-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.eh-hero * {
	box-sizing: border-box;
}

/* ----- Fondo ----- */

.eh-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.eh-hero__bg-img,
.eh-hero__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center center;
}

.eh-hero__bg-img--tablet,
.eh-hero__bg-video--tablet,
.eh-hero__bg-img--mobile,
.eh-hero__bg-video--mobile {
	display: none;
}

.eh-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ----- Capas independientes ----- */

.eh-hero__layer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	pointer-events: none; /* la capa no bloquea; los hijos sí reciben clics */
}

.eh-hero__layer > * {
	pointer-events: auto;
}

.eh-hero__layer--headline {
	z-index: 2;
	/* Valores por defecto; los controles de Elementor los sobreescriben: */
	justify-content: flex-end; /* vertical   */
	align-items: flex-start;   /* horizontal */
}

.eh-hero__layer--cta {
	z-index: 3;
	justify-content: flex-end; /* vertical   */
	align-items: flex-end;     /* horizontal */
}

/* ----- Titular ----- */

.eh-hero__headline {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

.eh-hero__line {
	display: block;
}

.eh-hero__description {
	margin: 0;
	display: block;
}

/* ----- CTA ----- */

.eh-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* evita que el botón se estire al ancho del bloque */
	max-width: 100%;
}

.eh-hero__cta > .eh-hero__card {
	align-self: stretch; /* la tarjeta sí ocupa todo el ancho del bloque */
}

/* Tarjeta con marco: fondo+blur en toda la tarjeta, imagen enmarcada dentro */
.eh-hero__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	overflow: hidden;
	width: 100%;
}

.eh-hero__card-img {
	width: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.eh-hero__card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.eh-hero__card-label {
	display: block;
	text-transform: uppercase;
}

.eh-hero__card-title-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
}

.eh-hero__card-title {
	display: block;
	min-width: 0;
}

/* Botón */
.eh-hero__button {
	display: none; /* el PHP genera las reglas por dispositivo */
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
	width: fit-content;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Icono compartido */
.eh-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.eh-hero__icon svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

/* Blindaje contra los estilos de enlace del tema (subrayados, colores de
   hover, etc.): los enlaces del hero se controlan SOLO desde el widget. */
.eh-hero a,
.eh-hero a:hover,
.eh-hero a:focus,
.eh-hero a:visited,
.eh-hero a span {
	text-decoration: none !important;
	border-bottom: none !important;
	outline: none;
}

.eh-hero__card:hover .eh-hero__card-label,
.eh-hero__card:focus .eh-hero__card-label,
.eh-hero__card:hover .eh-hero__card-title,
.eh-hero__card:focus .eh-hero__card-title {
	text-decoration: none !important;
}

.elementor-editor-active .eh-hero__bg-video {
	pointer-events: none;
}