/* ==========================================================================
   G2 · Sección 02 «Me presento» (bloque-texto 150076 del original)
   Escritorio: imagen col-lg-4 a la izquierda, centrada en vertical y pegada al
   borde; texto col-lg-8 centrado. <992px: imagen arriba a todo el ancho.
   ========================================================================== */
.vf-s02 {
	--vf-s02-pad-x: 6%;          /* .text del original: 6% del ancho de la fila */
	--vf-s02-cta-gap: 70px;      /* 20px + párrafo &nbsp; (30px) + 20px antes del botón */
	--vf-s02-cta-after: 30px;    /* hueco bajo el botón en el original */
	background-color: var(--wp--preset--color--base);
}

/* Columna de imagen: sin padding, imagen a todo el ancho de la columna */
.vf-section.vf-s02 .vf-s02-imgcol {
	align-self: center;
	padding: 0;
}

.vf-section.vf-s02 .vf-s02-imgcol .wp-block-image {
	margin: 0;
}

.vf-section.vf-s02 .vf-s02-imgcol .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Columna de texto: en este bloque el original no lleva padding vertical y
   mantiene el 6% lateral también apilado (móvil: 23.4px a 390px) */
.vf-section.vf-s02 .vf-s02-text {
	padding: 0 var(--vf-s02-pad-x);
	text-align: center;
	color: var(--wp--preset--color--contrast);
}

.vf-section.vf-s02 .vf-s02-text > .vf-title {
	margin-top: 10px;
	margin-bottom: 45px;
	font-size: 47px;             /* el original mantiene 47px también en móvil */
	line-height: 1.1;
}

.vf-section.vf-s02 .vf-s02-text > p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;            /* 30px, como el original */
	margin-top: 20px;
	margin-bottom: 0;
	text-align: center;
}

.vf-section.vf-s02 .vf-s02-text > .vf-title + p {
	margin-top: 45px;            /* margen colapsado título/párrafo del original */
}

.vf-section.vf-s02 .vf-s02-text > .vf-title:first-child {
	margin-top: 10px;
}

.vf-section.vf-s02 .vf-s02-text strong {
	font-weight: 700;
}

.vf-section.vf-s02 .vf-s02-cta {
	margin-top: var(--vf-s02-cta-gap);
	margin-bottom: var(--vf-s02-cta-after);
	justify-content: center;
}

@media (max-width: 768px) {
	.vf-section.vf-s02 .vf-s02-text > .vf-title {
		margin-bottom: 60px;
	}

	.vf-section.vf-s02 .vf-s02-text > .vf-title + p {
		margin-top: 60px;
	}
}

/* Aparición al hacer scroll (wow fadeIn 2s / AOS fade 1s / AOS fade-up 2s).
   Las clases las pone 02-texto-me-presento.js: sin JS todo queda visible. */
.vf-s02 .vf-s02-anim {
	transition-property: opacity, transform;
	transition-timing-function: ease;
	transition-duration: 1s;
}

.vf-s02 .vf-s02-anim--slow {
	transition-duration: 2s;
}

.vf-s02 .vf-s02-anim:not(.is-in) {
	opacity: 0;
}

.vf-s02 .vf-s02-anim--up:not(.is-in) {
	transform: translate3d(0, 100px, 0);
}

/* Mientras el JS arma las clases: ocultar sin fundido de salida */
.vf-s02.vf-s02-arming .vf-s02-anim {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.vf-s02 .vf-s02-anim,
	.vf-s02 .vf-s02-anim:not(.is-in) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
