/* Estilos compartidos por todos los bloques y la plantilla del home */
.hre-container {
	width: 100%;
	max-width: var(--hre-container);
	margin-inline: auto;
	padding-inline: var(--hre-gutter);
	box-sizing: border-box;
}

.hre-section {
	padding-block: var(--hre-section-y);
	font-family: var(--hre-font);
	color: var(--hre-text);
}

.hre-section--bg-white { background: var(--hre-white); }
.hre-section--bg-sky { background: var(--hre-sky); }
.hre-section--bg-gray { background: var(--hre-gray-100); }
.hre-section--bg-light { background: var(--hre-gray-light); }
.hre-section--bg-navy { background: var(--hre-navy); color: var(--hre-white); }

.hre-section__title {
	margin: 0 0 2rem;
	text-align: center;
	text-transform: uppercase;
	font-weight: 800;
	font-size: clamp(1.125rem, 2.4vw, 1.75rem);
	letter-spacing: 0.02em;
	line-height: 1.25;
}

.hre-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7em 1.8em;
	border: 0;
	border-radius: var(--hre-radius-pill);
	font-family: var(--hre-font);
	font-weight: 400;
	font-size: var(--hre-fs-sm);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.hre-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hre-btn--navy { background: var(--hre-navy); color: var(--hre-white); }
.hre-btn--yellow { background: var(--hre-yellow); color: var(--hre-navy); }
.hre-btn--orange { background: var(--hre-orange); color: var(--hre-white); }
.hre-btn--white { background: var(--hre-white); color: var(--hre-navy); }
.hre-btn--whatsapp { background: var(--hre-whatsapp); color: var(--hre-white); text-transform: none; }

.hre-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Neutraliza tipografía/colores del theme dentro de los bloques del plugin */
.hre-section :is(h1, h2, h3, h4, p, a, button, summary),
.hre-hero :is(h1, h2, h3, h4, p, a, button),
.hre-banner-cta :is(h1, h2, h3, h4, p, a),
.hre-franja :is(p, a),
.hre-header :is(a, p, button),
.hre-footer :is(h2, h3, h4, p, a) {
	font-family: var(--hre-font);
}
.hre-section :is(h1, h2, h3, h4),
.hre-hero :is(h1, h2, h3),
.hre-banner-cta :is(h1, h2, h3),
.hre-footer :is(h2, h3, h4) {
	color: inherit;
	letter-spacing: 0.02em;
}

/* Espaciado por bloque (panel "Espaciado"): margen superior / inferior en 3 niveles */
.hre-mt-sm { margin-top: 1rem !important; }
.hre-mt-md { margin-top: 2rem !important; }
.hre-mt-lg { margin-top: 4rem !important; }
.hre-mb-sm { margin-bottom: 1rem !important; }
.hre-mb-md { margin-bottom: 2rem !important; }
.hre-mb-lg { margin-bottom: 4rem !important; }