/*
 * LAYOUT — marco lateral, contenedores y ritmo vertical.
 *
 * Las tres piezas que sostienen la composición de la página:
 *
 *   .em-framed      la sección se separa de los bordes del viewport
 *   .em-shell       el contenedor de texto dentro de una sección
 *   .em-shell-inset igual, para secciones a sangre cuyo texto debe caer sobre la
 *                   misma vertical que el de las enmarcadas
 *
 * No todas las secciones se enmarcan: el ritmo depende de que algunas sigan llegando de
 * extremo a extremo (Hero, Tesis, Recursos, Cierre y pie).
 */

.em-framed {
	margin-inline: var(--frame);
}

.em-shell {
	margin-inline: auto;
	max-width: var(--shell);
	padding-inline: var(--shell-pad);
}

/* El fondo sigue a sangre; solo se alinea el contenido. La anchura máxima compensa el
   marco para que la caja de texto mida lo mismo que dentro de una sección enmarcada. */
.em-shell-inset {
	margin-inline: auto;
	max-width: calc(var(--shell) + 2 * var(--frame));
	padding-inline: calc(var(--frame) + var(--shell-pad));
}

/* Solo el Hero: composición aprobada, con su aire lateral original. */
.em-shell-hero {
	margin-inline: auto;
	max-width: var(--shell);
	padding-inline: var(--shell-pad-hero);
}

/* Superficie con borde propio. Reservada a UNA sección de la Home (MARO): si se aplica
   a varias, la página se convierte en una pila de tarjetas. */
.em-surface {
	background: var(--paper-pure);
	border: 1px solid var(--border);
	border-radius: var(--radius-surface);
}

/* Ritmo vertical */
.em-beat {
	padding-block: var(--beat);
}

.em-beat-lg {
	padding-block: var(--beat-lg);
}

.em-beat-sm {
	padding-block: var(--beat-sm);
}

/* --- Revelado al entrar en pantalla ---
   El estado inicial solo se aplica cuando el JS ha marcado el documento: sin JS, o con
   movimiento reducido, el contenido se ve siempre. */
[data-js-reveal] .em-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--transicion-lenta),
		transform var(--transicion-lenta);
}

[data-js-reveal] .em-reveal[data-shown="true"] {
	opacity: 1;
	transform: none;
}

/* Escalonado de los elementos de una misma lista. Tres pasos de 90 ms bastan: más
   niveles solo alargan la entrada sin que se note la diferencia. */
.em-reveal[data-delay="1"] {
	transition-delay: 90ms;
}

.em-reveal[data-delay="2"] {
	transition-delay: 180ms;
}

.em-reveal[data-delay="3"] {
	transition-delay: 270ms;
}