/* Secciones apiladas: cada una se monta sobre la anterior con las esquinas superiores redondeadas. */
.seccion {
	position: relative;
	margin-top: calc(var(--radio) * -1);
	padding-block: var(--espacio) calc(var(--espacio) + var(--radio));
	border-radius: var(--radio) var(--radio) 0 0;
	background: var(--fondo, var(--color-blanco));
	color: var(--t-texto, var(--color-texto));
}
.entry-content > .seccion:first-child { margin-top: 0; border-radius: 0; }

/* Secciones apiladas: la clase la pone main.js, que calcula --apilada-top según la altura de cada una. */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
	.seccion.es-apilada { position: sticky; top: var(--apilada-top, 0px); }
	/* Sombra para que se vea el solape también entre dos secciones blancas. */
	.entry-content > .seccion:not(:first-child) { box-shadow: 0 -14px 40px rgb(4 5 74 / 12%); }
	/* Las anclas dejan la sección arriba del todo, tapando la anterior. */
	.entry-content > .seccion { scroll-margin-top: -110px; }
}

.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }
.es-centrado { text-align: center; }

.tono-blanco {
	--fondo: var(--color-blanco);
	--t-titulo: var(--color-navy); --t-texto: var(--color-texto); --t-acento: var(--color-acento); --t-ante: var(--color-acento);
	--btn-fondo: var(--color-navy); --btn-texto: var(--color-blanco); --btn-hover: var(--color-royal);
	--tarjeta: var(--color-hielo);
}
.tono-hielo {
	--fondo: var(--color-hielo);
	--t-titulo: var(--color-navy); --t-texto: var(--color-texto); --t-acento: var(--color-acento); --t-ante: var(--color-acento);
	--btn-fondo: var(--color-navy); --btn-texto: var(--color-blanco); --btn-hover: var(--color-royal);
	--tarjeta: var(--color-blanco);
}
.tono-navy {
	--fondo: var(--color-navy);
	--t-titulo: var(--color-blanco); --t-texto: #e6e9ff; --t-acento: var(--color-neon); --t-ante: var(--color-neon);
	--btn-fondo: var(--color-neon); --btn-texto: var(--color-navy); --btn-hover: var(--color-blanco);
	--tarjeta: rgb(255 255 255 / 8%);
}
.tono-degradado {
	--t-titulo: var(--color-navy); --t-texto: var(--color-navy); --t-acento: var(--color-royal); --t-ante: var(--color-navy);
	--btn-fondo: var(--color-navy); --btn-texto: var(--color-blanco); --btn-hover: var(--color-royal);
	--tarjeta: rgb(255 255 255 / 85%);
	/* Solo tonos claros de la paleta: el texto navy cumple AA en cualquier punto. */
	background:
		radial-gradient(70% 90% at 100% 0%, rgb(3 163 255 / 90%), transparent),
		radial-gradient(120% 140% at 10% 10%, var(--color-neon) 0%, #1ac8ff 55%, var(--color-sky) 100%);
}