/* ==========================================================================
   Malai · layout
   Contenedores, ritmo de sección y rejillas. Sin estilos de componente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Estructura de página
   -------------------------------------------------------------------------- */

.pagina {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.pagina > main {
	flex: 1 0 auto;
}

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

.contenedor {
	width: 100%;
	max-width: var(--ancho-max);
	margin-inline: auto;
	padding-inline: var(--pad-lateral);
}

.contenedor--estrecho {
	max-width: calc(var(--ancho-estrecho) + var(--pad-lateral) * 2);
}

/* Rompe el contenedor para llevar un hijo a sangre completa. */
.a-sangre {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.seccion {
	padding-block: var(--e-seccion);
}

.seccion--clara {
	background-color: var(--c-super-1);
}

.seccion--oscura {
	background-color: var(--c-acento);
	color: var(--c-sobre-oscuro);
}

/* Sobre fondo oscuro el contorno del icono se pierde: el trazo pasa a blanco
   por herencia y los azules suben de luminosidad. */
.seccion--oscura,
.sobre-oscuro {
	--icono-acento: #7fc4e8;
	--icono-suave: rgb(255 255 255 / 0.25);
}

.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 {
	color: var(--c-sobre-oscuro);
}

.seccion--oscura .entradilla,
.seccion--oscura p {
	color: var(--c-sobre-oscuro-suave);
}

.seccion--oscura .antetitulo {
	color: var(--c-marca);
}

/* Cabecera de sección centrada, usada en Servicios y Luxury. */
.seccion__cabecera {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	text-align: center;
}

.seccion__cabecera > * + * {
	margin-top: var(--e-s);
}

/* --------------------------------------------------------------------------
   Rejillas
   auto-fit + minmax para que el número de columnas salga del ancho
   disponible y no de un breakpoint arbitrario.
   -------------------------------------------------------------------------- */

.rejilla {
	display: grid;
	gap: var(--e-m);
}

/* El número de columnas se declara por tramo en vez de con auto-fit: con el
   contenedor a 1520 px, auto-fit colaba siempre una columna de más. */
.rejilla--3,
.rejilla--4,
.rejilla--5 {
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.rejilla--3,
	.rejilla--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.rejilla--5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64rem) {
	.rejilla--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.rejilla--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.rejilla--5 {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Bloque de dos columnas texto + medio, del hero y de los CTA. */
.duo {
	display: grid;
	gap: clamp(var(--e-l), 4vw, var(--e-2xl));
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
	.duo {
		grid-template-columns: 1fr 1fr;
	}

	/* Los modificadores se nombran por posición, no por contenido: "texto
	   estrecho" y "medio estrecho" eran ambiguos porque no decían cuál de las
	   dos columnas iba primero en el marcado. */
	.duo--primero-estrecho {
		grid-template-columns: 5fr 7fr;
	}

	.duo--primero-ancho {
		grid-template-columns: 7fr 5fr;
	}

	/* Invierte el orden visual sin tocar el orden del DOM. */
	.duo--invertido > :first-child {
		order: 2;
	}
}

/* --------------------------------------------------------------------------
   Flujo vertical
   Un solo sitio donde se decide la separación entre hermanos.
   -------------------------------------------------------------------------- */

.flujo > * + * {
	margin-top: var(--e-s);
}

.flujo--holgado > * + * {
	margin-top: var(--e-m);
}

.flujo--apretado > * + * {
	margin-top: var(--e-2xs);
}

/* --------------------------------------------------------------------------
   Rendimiento

   Aquí vivía un content-visibility: auto sobre las secciones bajo el pliegue.
   Se retira, y conviene dejar dicho por qué para que no vuelva solo.

   Medido con Lighthouse en las tres plantillas más pesadas, quitarlo no movió
   el rendimiento: las diferencias (100 -> 99 en una, 91 -> 92 en otra) están
   dentro de lo que varía entre dos pasadas seguidas, y el bloqueo del hilo
   principal era ya de 0 ms con y sin. No había nada que ganar.

   Coste sí tenía. Una sección que el navegador aún no ha pintado no deja leer
   el fondo de sus hijos, y los revisores de accesibilidad —axe, que es el que
   usan Lighthouse y PageSpeed— calculan mal el contraste: daban por malo un
   4,6:1 real leyéndolo como 1,7:1. Eso baja la nota y, peor, invita a
   «arreglar» un color que estaba bien.

   Si algún día la web crece hasta que esto importe, se vuelve a poner y se
   mide de nuevo; pero entonces habrá que contar con la lectura falsa.
   -------------------------------------------------------------------------- */