body {
	background-color: var(--black-5);
}

/*--------------------------------------------------------------
# Contenedores
--------------------------------------------------------------*/

.contenedor {
	margin: 0 auto;
	padding-left: var(--contenedor-padding);
	padding-right: var(--contenedor-padding);
	width: 100%;
	max-width: calc(var(--contenedor-width) + var(--contenedor-padding) + var(--contenedor-padding));
	position: relative;
}

/* Misma lógica que .contenedor pero con --header-width (cabecera del sitio y modal de menú). */
.contenedor-header {
	margin: 0 auto;
	padding-left: var(--contenedor-padding);
	padding-right: var(--contenedor-padding);
	width: 100%;
	max-width: calc(var(--header-width) + var(--contenedor-padding) + var(--contenedor-padding));
	position: relative;
}

.contenedor-fluido {
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

/*--------------------------------------------------------------
# Contenido principal
--------------------------------------------------------------*/

.site-main {
	margin-top: 0;
}

/* Margen superior del contenido en desktop */
/* Excluimos .home ya que el menú es transparente en esa página */
@media (min-width: 992px) {
	.site-main {
		margin-top: var(--altura-contenido);
	}
	
	.home .site-main {
		margin-top: 0;
	}
}

/* Margen superior del contenido en mobile (menor que desktop: header más compacto) */
@media (max-width: 991px) {
	.site-main {
		margin-top: var(--altura-contenido-mobile);
	}
	
	.home .site-main {
		margin-top: 0;
	}
}

/*--------------------------------------------------------------
# Utilidades de visibilidad
--------------------------------------------------------------*/

/* Desktop: min-width 992px */
@media (min-width: 992px) {
	.solo-desktop {
		display: block;
	}

	.solo-mobile {
		display: none;
	}
}

/* Mobile: max-width 991px */
@media (max-width: 991px) {
	.solo-mobile {
		display: block;
	}

	.solo-desktop {
		display: none;
	}
}

/*--------------------------------------------------------------
# Fondos reutilizables
--------------------------------------------------------------*/

/*
 * Malla de círculos: opacidad con --bg-circulos-opacity (0–1; por defecto 0.35).
 * Tamaño fijo al ancho del viewBox del SVG (no se escala al ancho del bloque); anclado a la derecha;
 * lo que sobresale por la izquierda se recorta (overflow-x clip en el contenedor).
 * Ancho del motivo: --bg-circulos-width (por defecto 1386px, coherente con fondo-circulos.svg).
 */
.bg-circulos {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.bg-circulos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: var(--bg-circulos-opacity, 0.35);
	pointer-events: none;
	background-image: url("../img/SVG/fondo-circulos.svg");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: var(--bg-circulos-width, 1386px) auto;
}

.bg-circulos > * {
	position: relative;
	z-index: 1;
}