/* ==========================================================================
   01 · Intro (bloque de texto libre, sin imagen): párrafos centrados a lo
   ancho (container-fluid, .text con padding 0 6% también en móvil) y botón «¿Hablamos?»
   en secondary. Espaciado del original: 50px arriba, 0 abajo (+30px del botón).
   ========================================================================== */
.vf-s01 {
	background-color: var(--wp--preset--color--base);
}

.vf-s01 .vf-s01__text {
	padding: 20px 6% 30px;
	text-align: center;
}

.vf-s01 .vf-s01__text > p {
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	color: var(--wp--preset--color--contrast);
}

.vf-s01 .vf-s01__btns {
	margin-top: 20px;
}

/* Aparición (AOS del original): el bloque de texto entero hace fade (1000 ms) y el
   botón fade-up (2000 ms). Solo con JS (la clase la pone 01-texto-intro.js), así sin
   JS se ve todo. El desplazamiento va en el botón y no en su contenedor (observado). */
.vf-s01.vf-s01--js .vf-s01__text > p {
	opacity: 0;
	transition: opacity 1s ease;
}

.vf-s01.vf-s01--js .vf-s01__btns > .wp-block-button {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
	transition: opacity 2s ease, transform 2s ease;
}

.vf-s01.vf-s01--js .vf-s01__text.is-in > p,
.vf-s01.vf-s01--js .vf-s01__btns.is-in > .wp-block-button {
	opacity: 1;
	transform: none;
}