/* ==========================================================================
   Sano Equilibrio - overrides de maquetacion (portada full-bleed)
   Se carga despues de style.css. La mayoria de reglas actuan solo en la home.
   Referencia: docs/07-direccion-arte.md y docs/08-wireframe-home.md
   ========================================================================== */

/* --- Contenedor de GeneratePress a ancho completo (solo home) ------------ */
body.home .site.grid-container {
	max-width: none;
	padding-inline: 0;
}
body.home .site-content { padding-inline: 0; }
body.home .separate-containers .inside-article,
body.home .inside-article {
	padding: 0;
	max-width: none;
}
body.home .entry-content {
	margin: 0;
	max-width: none;
}
body.home .site-main { margin-block: 0; }
body.home .site { overflow-x: clip; }

/* --- Anclas y encabezados ------------------------------------------------ */
:where([id].se-section) { scroll-margin-top: 96px; }
h1, h2, h3, .wp-block-heading { text-wrap: balance; }

/* El destino del enlace «Saltar al contenido» recibe el foco con `tabindex="-1"`
   (inc/a11y.php). No es un control, así que no lleva anillo: el salto se
   percibe por el desplazamiento y por dónde arranca el tabulado. */
#content:focus { outline: none; }

/* --- Ritmo de color por seccion (alterno) -------------------------------- */
.se-hero { background: linear-gradient(180deg, var(--color-background) 0%, #ffffff 70%); }
.se-servicios { background-color: var(--color-background); }
.se-sobre { background-color: var(--color-surface); }
.se-proceso { background-color: var(--color-background); }
.se-faq { background-color: var(--color-surface); }
.se-cta { background-color: #e6f3ed; } /* tinte menta ~30% (docs/07 seccion 6) */

/* --- Hero: jerarquia tipografica ----------------------------------------- */
.se-hero { padding-block: clamp(48px, 8vw, 112px); }

.se-hero .wp-block-heading {
	font-size: clamp(2.25rem, 4.8vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.se-hero__lead {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	max-width: 46ch;
}

/* --- Hero: mancha de acuarela detras del visual -------------------------- */
.se-hero__visual {
	position: relative;
	display: grid;
	place-items: center;
}
.se-hero__visual::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 116%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	background: url("../img/watercolor-hero.webp") center / contain no-repeat;
	opacity: 0.92;
	z-index: 0;
	pointer-events: none;
}
.se-hero__visual > * { position: relative; z-index: 1; }
.se-hero__logo img {
	filter: drop-shadow(0 14px 30px rgba(47, 47, 48, 0.16));
}

/* --- Páginas secundarias: contenido a ancho completo --------------------- */
body.full-width-content .site.grid-container {
	max-width: none;
	padding-inline: 0;
}
body.full-width-content .site-content { padding-inline: 0; }
body.full-width-content .separate-containers .inside-article,
body.full-width-content .inside-article {
	padding: 0;
	max-width: none;
}
body.full-width-content .entry-content {
	margin: 0;
	max-width: none;
}
body.full-width-content .site-main { margin-block: 0; }
body.full-width-content .site { overflow-x: clip; }

/* --- Footer (base; FASE D lo completa) ----------------------------------- */
.site-footer,
.se-footer {
	background-color: var(--color-surface-dark);
	color: #fff;
}
.site-footer a,
.se-footer a { color: #fff; }
.site-footer .site-info,
.se-footer .site-info { background-color: transparent; }

/* --- Botones de bloque: anula el padding/display de GeneratePress -------- */
.wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	line-height: 1;
}

@media (max-width: 767px) {
	.wp-block-buttons .wp-block-button { width: 100%; }
}

/* --- Elevacion consistente en tarjetas ----------------------------------- */
.se-card {
	box-shadow: var(--shadow-small);
}
a.se-card:hover,
.se-card--link:hover {
	box-shadow: var(--shadow-medium);
}

/* --- Responsive: la acuarela no interfiere con el texto ------------------ */
@media (max-width: 767px) {
	.se-hero__visual::before { width: 92%; opacity: 0.85; }
	:where([id].se-section) { scroll-margin-top: 96px; }
}