/*
 * Espacio Deco — hero de la home (brief 3.1).
 *
 * El hero anterior era un bloque Custom HTML con tres fotos en triptico, un
 * gradiente a mano y problemas de posicionamiento (tapaba la barra de
 * beneficios, no llegaba al borde, se apilaban 3 fotos en mobile). El brief
 * pide rehacerlo como un unico bloque Portada (Cover) a ancho completo: una
 * foto, overlay Cacao al 35-45 %, punto focal, H1 "Tu casa tiene linea." y
 * botones "Ver productos" (/tienda/) y "Ver ofertas" (/categoria-producto/ofertas/).
 *
 * Este CSS estiliza ese bloque y sus elementos internos (H1, lead y botones)
 * para que se vean como el boceto aprobado, sin depender del CSS muerto del
 * hero anterior.
 */

.edc-hero-cover {
	max-height: 820px;
}

.edc-hero-cover .wp-block-cover__inner-container {
	padding: 0 clamp(18px, 4vw, 48px) clamp(40px, 7vw, 88px);
}

.edc-hero-cover .edc-hero-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--edc-display);
	font-size: clamp(56px, 9vw, 132px);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.035em;
	max-width: 9ch;
	color: #fff;
}

.edc-hero-cover .edc-hero-lead {
	margin: 22px 0 0;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.45;
	max-width: 40ch;
	color: rgba(255, 255, 255, 0.9);
}

.edc-hero-cover .edc-hero-buttons {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Boton secundario: outline blanco sobre la imagen. */
.edc-hero-cover .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border-color: #fff !important;
	color: #fff !important;
}

.edc-hero-cover .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--wp--preset--color--edc-cacao) !important;
	border-color: #fff !important;
}

@media (max-width: 760px) {
	.edc-hero-cover .edc-hero-title {
		font-size: clamp(42px, 12vw, 72px);
	}

	.edc-hero-cover .edc-hero-buttons {
		gap: 10px;
	}
}