/* ---------------------------------------------------------------------------
   BASE — el piso técnico de las páginas a medida
   ---------------------------------------------------------------------------
   Acá NO hay diseño. Solo lo que toda página a medida necesita para convivir
   con Astra sin pelearse: la frontera de estilos, accesibilidad y el ancho
   completo del contenedor.

   El diseño de cada página vive en su propio archivo.
   --------------------------------------------------------------------------- */

/* --- La frontera ---
   Todo cuelga de .sbl-page. Astra no entra acá adentro y nuestros estilos no
   se escapan a la tienda, el blog ni el checkout. */
.sbl-page,
.sbl-page *,
.sbl-page *::before,
.sbl-page *::after {
	box-sizing: border-box;
}

.sbl-page img,
.sbl-page video,
.sbl-page svg {
	max-width: 100%;
	height: auto;
}

/* --- Astra fuera del camino ---
   Astra envuelve el contenido en un contenedor angosto con padding propio.
   Lo neutralizamos solo dentro de nuestras plantillas. */
.sabalma-template .site-content .ast-container,
.sabalma-template .entry-content,
.sabalma-template .ast-container > .site-main {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

.sabalma-template .site-content {
	padding: 0;
}

/* --- Navegación por anclas ---
   Sin esto, al hacer clic en un enlace interno la cabecera de Astra tapa el
   título de la sección. */
html:has(.sbl-page) {
	scroll-behavior: smooth;
}

.sbl-page [id] {
	scroll-margin-top: var(--sbl-offset-ancla);
}

/* --- Piso de accesibilidad --- */
.sbl-page :focus-visible {
	outline: 2px solid var(--sbl-acento);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html:has(.sbl-page) {
		scroll-behavior: auto;
	}

	.sbl-page *,
	.sbl-page *::before,
	.sbl-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}