/**
 * Bloque "Hero — El pulso del mundial".
 *
 * Estrategia: la IMAGEN de fondo es la que define el alto del hero.
 *   - <img class="pulso-hero__bg-img"> con width:100% + height:auto
 *     → se ve siempre entera al ancho disponible y su alto natural marca
 *       el alto del hero.
 *   - El contenido (logo, textos) se superpone en absoluto encima.
 *   - Las 3 imágenes responsive (escritorio / tablet / móvil) se cambian
 *     con <source> dentro del <picture>: el navegador elige según el
 *     viewport y se redimensiona si se cruza el breakpoint.
 *
 * Si NO hay imagen, se renderiza un placeholder con degradado y un alto
 * mínimo para que el bloque no quede a 0px.
 *
 * Nota: como el alto del hero lo marca la imagen, el contenido que cabe
 * dentro depende de la altura disponible en cada viewport. Diseñad las
 * imágenes dejando hueco en el lateral para el texto.
 */

.pulso-hero {
	position: relative;
	width: 100%;
	color: var(--color-white, #fff);
	background-color: var(--primary-red, #da001c);
	overflow: hidden;
}

/* --- Imagen como elemento que define el tamaño --- */

.pulso-hero__bg {
	display: block;
	width: 100%;
	line-height: 0;
	/* evita el espacio inferior fantasma de los inline images */
}

.pulso-hero__bg-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Fallback cuando no hay ninguna imagen asignada */
.pulso-hero__bg--placeholder {
	min-height: 380px;
	background-image: linear-gradient(115deg, var(--primary-red, #da001c) 0%, var(--primary-red, #da001c) 45%, var(--primary-blue, #0a0541) 100%);
}

/* --- Contenido superpuesto en absoluto --- */

.pulso-hero__inner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	/* Ocupa 2/3 del ancho del hero. El 1/3 derecho queda libre para
	   que el logo + textos NO tapen la copa+botella que vienen
	   incrustadas a la derecha de la imagen de fondo. */
	right: 33.3333%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 25px;
	padding: 4%;
	box-sizing: border-box;
}

.pulso-hero__logo {
	width: clamp(150px, 20vw, 275px);
	height: auto;
	flex: 0 0 auto;
	margin: 0;
}

.pulso-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	max-width: 520px;
}

.pulso-hero__title {
	line-height: 1.05;
	font-family: var(--font-secondary, serif);
	font-size: clamp(22px, 4vw, 40px);
	font-weight: 700;
	text-align: center;
}

.pulso-hero__desc {
	font-family: var(--font-roboto);
	font-size: clamp(14px, 2vw, 19px);
	line-height: 1.4;
	margin: 0 0 2%;
}

.pulso-hero__legal {
	font-size: clamp(10px, 1vw, 14px);
	font-style: italic;
	opacity: 0.85;
	margin: 0;
}

.pulso-hero__legal a {
	color: var(--color-white, #fff);
	text-decoration: underline;
}

.pulso-hero__legal a:hover {
	opacity: 0.8;
}

/* --- Ajustes responsive del contenido superpuesto --- */

@media (max-width: 768px) {

	/* En móvil la imagen suele componerse distinta (la copa/botella
	   puede ir arriba o más pequeña), así que el contenido vuelve a
	   ocupar todo el ancho. */
	.pulso-hero__inner {
		right: 0;
		padding: 18% 12%;
		justify-content: flex-start;
	}

	.pulso-hero__desc {
		max-width: 100%;
	}
}