/* ==========================================================================
   Sección 11 · «Publicaciones 2» (bloque_texto 153386, sin título ni ancla)
   Original: .bg.bloque-texto con fondo blanco y fila a sangre:
     col-lg-8 texto centrado (padding 75px 6%, #948e82 20px/30px, lista 26px)
     + botón COMPRAR (#948e82) + col-lg-4 foto (background-size: cover, centrada).
   Móvil (<992px): texto arriba y la foto debajo a todo el ancho con su proporción.
   Medidas tomadas de ref/desktop/11.png (1440) y ref/mobile/11.png (390).
   ========================================================================== */
.vf-s11 {
	--vf-s11-text: var(--wp--preset--color--neutral);
	--vf-s11-link: var(--wp--preset--color--accent);
	/* Hueco bajo el botón = margen inferior del .boton-generico (30px) + padding 6% de la columna,
	   como en el original (116,39px a 1440, 91,44px a 1024, 53,39px a 390). */
	--vf-s11-pb: calc(6% + 30px);
	background-color: var(--wp--preset--color--base);
	color: var(--vf-s11-text);
}

/* --- Columna de texto --- */
.vf-s11 .wp-block-column.vf-textcol {
	padding: 75px 6% var(--vf-s11-pb);
	text-align: center;
}

/* El core pone flex-grow:0 a las columnas con flex-basis (0,4,0): sin esto la fila se queda en
   1439,83px y la foto empieza en 959,89 en vez de 960. La columna de texto absorbe el resto. */
:root .vf-s11 .wp-block-columns > .wp-block-column.vf-textcol {
	flex-grow: 1;
}

.vf-s11 .vf-textcol > *,
.vf-s11 .vf-textcol li {
	margin-top: 0;
	margin-bottom: 0;
	text-wrap: wrap;                  /* TT25 pone «pretty» en h1-h6 y p; el original corta normal */
}

.vf-s11 .vf-textcol > p,
.vf-s11 .vf-textcol > ul {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--vf-s11-text);
}

.vf-s11 .vf-textcol > p {
	line-height: 30px;
}

/* Lista con viñetas, centrada como el texto (line-height 26px del original) */
.vf-s11 .vf-textcol > ul {
	padding: 0 0 0 40px;
	list-style: disc outside;
	line-height: 26px;
	text-align: center;
}

.vf-s11 .vf-textcol > ul > li {
	margin: 0;
	line-height: 26px;
}

.vf-s11 .vf-textcol a:where(:not(.wp-element-button)) {
	color: var(--vf-s11-link);
}

/* Botón COMPRAR centrado bajo el texto */
.vf-s11 .vf-textcol > .wp-block-buttons {
	justify-content: center;
	margin-top: 0;
}

/* --- Columna de la foto: cubre la columna (cover centrado) --- */
.vf-s11 .vf-s11__media {
	min-height: 1px;
}

.vf-s11 .vf-s11__media .vf-cover-img img {
	object-position: 50% 50%;
}

/* --- Aparición (WOW fadeIn 2s y AOS fade-up 2s del botón). .vf-anim solo la pone el JS --- */
.vf-s11.vf-anim .vf-textcol,
.vf-s11.vf-anim .vf-s11__media {
	opacity: 0;
	transition: opacity 2s ease;
}

.vf-s11.vf-anim .vf-textcol > .wp-block-buttons {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
	transition: opacity 2s ease, transform 2s ease;
}

.vf-s11.vf-anim .is-in,
.vf-s11.vf-anim .vf-textcol > .wp-block-buttons.is-in {
	opacity: 1;
	transform: none;
}

/* --- Tableta y móvil: apilado, foto a todo el ancho con su proporción --- */
@media (max-width: 991.98px) {
	:root .vf-s11 .vf-s11__media .vf-cover-img,
	:root .vf-s11 .vf-s11__media .vf-cover-img img {
		height: auto;
	}

	/* El original mantiene padding 75px 6% en la columna de texto también en móvil */
	:root .vf-s11 .wp-block-column.vf-textcol {
		padding: 75px 6% var(--vf-s11-pb);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vf-s11.vf-anim .vf-textcol,
	.vf-s11.vf-anim .vf-s11__media,
	.vf-s11.vf-anim .vf-textcol > .wp-block-buttons {
		opacity: 1;
		transform: none;
		transition: none;
	}
}