/*
 * layout.css
 * Estructura base del layout: header arriba, footer abajo, contenido ocupa el resto.
 * Depende de: variables.css
 */

/* -------------------------------------------------- */
/* LAYOUT PRINCIPAL — GRID                              */
/* auto (header) · 1fr (contenido) · auto (footer)     */
/* svh: estable, no salta con la UI del navegador móvil */
/* -------------------------------------------------- */

/* #page es el grid container real (hijo directo de body) */
#page.site {
	min-block-size:     100svh;
	display:            grid;
	grid-template-rows: auto 1fr auto;
	margin:             0;
	padding:            0;
}

/* El <main> ocupa el 1fr sin añadir nada propio */
#primary.site-main,
.site-main {
	margin:  0;
	padding: 0;
}

/* -------------------------------------------------- */
/* SCROLL OFFSET POR HEADER STICKY                      */
/* -------------------------------------------------- */

html {
	scroll-padding-top: calc(var(--ot-header-height) + var(--ot-space-4));
}

/* -------------------------------------------------- */
/* ELEMENTOR — ELIMINA MARGEN DEL PRIMER ELEMENTO      */
/* -------------------------------------------------- */

#primary > .elementor:first-child,
#primary > .e-con:first-child,
.elementor .elementor-section:first-child,
.elementor .e-con.e-parent:first-child {
	margin-top: 0;
}

/* -------------------------------------------------- */
/* SEPARACIÓN DE CONTENIDO SIN ELEMENTOR               */
/* -------------------------------------------------- */

body:not(.elementor-page) .site-main {
	padding-top:    var(--ot-space-16);
	padding-bottom: var(--ot-space-16);
}

/* -------------------------------------------------- */
/* CONTENEDOR                                           */
/* Ancho máximo centrado con padding lateral fijo.     */
/* Una sola declaración, sin media queries redundantes. */
/* -------------------------------------------------- */

.contenedor {
	width:         100%;
	max-width:     calc(var(--contenedor-width) + var(--contenedor-padding) * 2);
	margin-inline: auto;
	padding-inline: var(--contenedor-padding);
	position:      relative;
}

/* -------------------------------------------------- */
/* UTILIDADES                                           */
/* -------------------------------------------------- */

.ot-container {
	width:          100%;
	max-width:      var(--ot-max-width);
	margin-inline:  auto;
	padding-inline: var(--ot-gutter);
}

.ot-container--narrow {
	max-width: var(--ot-max-width-text);
}

@media (max-width: 600px) {
	.ot-container {
		padding-inline: var(--ot-gutter-sm);
	}
}