/* ==========================================================================
   03 · Servicios (bloque de iconos del original, .bloque-150074)
   Fondo primary, texto blanco. 3 tarjetas con imagen circular, título, raya,
   texto y botón «LEER MÁS» que abre un popup .vf-modal (componente compartido).
   Medidas tomadas del original a 1440px y 390px.
   ========================================================================== */
.vf-s03 {
	--vf-s03-title-size: 47px;          /* el original no reduce el h2 en móvil */
	--vf-s03-close: #dddddd;            /* aspa del popup (.close-icon) */
	/* El .wrapper-popup original empieza siempre a 76px del borde superior (bajo una cabecera de 82px
	   en escritorio y de 70px en móvil); el .vf-modal compartido empieza en --vf-header-h.
	   Este desfase (-6px escritorio, +6px ≤992px) recoloca título y aspa donde los pinta el original. */
	--vf-s03-pop-shift: calc(76px - var(--vf-header-h, 82px));
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-align: center;
}

/* TT25 pone text-wrap: pretty en h1–h6 y p; el original corta las líneas de forma normal */
.vf-s03 :is(h2, h3, p) {
	text-wrap: wrap;
}

/* Título «Servicios»: 47px/700, margen 10px 0 90px (vf-title vf-title--lg) */
.vf-s03 > .vf-title {
	color: var(--wp--preset--color--base);
	font-size: var(--vf-s03-title-size);
}

/* --------------------------------------------------------------------------
   Tarjetas (col-lg-4 → 3 columnas de 350px con gutter 30px; apiladas < 992px)
   -------------------------------------------------------------------------- */
.vf-s03 > .wp-block-columns {
	margin-block: 0;
	row-gap: 0;
}

.vf-s03 .wp-block-columns > .wp-block-column {
	margin-bottom: 45px;   /* .icono { margin-bottom: 45px } */
	text-align: center;
}

.vf-s03 .wp-block-column > * {
	margin-block: 0;
}

/* Imagen circular 160px con borde blanco de 1px (.fa-stack) */
.vf-s03 .wp-block-column > .wp-block-image {
	width: 160px;
	height: 160px;
	margin: 0 auto;
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 50%;
	overflow: hidden;
}

.vf-s03 .wp-block-column > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Título de la tarjeta (.icono-title): 24px, alto mínimo 60px centrado */
.vf-s03 .wp-block-column > h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	margin: 15px 0;
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--base);
}

/* Raya (.separator): 60% del ancho, 2px, blanca */
.vf-s03 .wp-block-column > hr.wp-block-separator {
	width: 60%;
	max-width: none;
	height: 0;
	margin: 0 auto 30px;
	border: 1px solid var(--wp--preset--color--base);
	background: none;
	opacity: 1;
}

/* Texto (.icono-texto): 20px/35px, padding lateral 20px */
.vf-s03 .wp-block-column > p {
	margin: 0 0 20px;
	padding: 0 20px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 35px;
	color: var(--wp--preset--color--base);
}

/* Botón «LEER MÁS» (.icono .boton): blanco con texto primary */
.vf-s03 .wp-block-column > .wp-block-buttons {
	justify-content: center;
}

.vf-s03 .wp-block-column .wp-block-button__link {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--bubbler-one);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	transition: all .15s ease-in-out;
}

/* Sin anillo de foco al usar el ratón (el original no lo muestra al cerrar el popup, que devuelve
   el foco a «LEER MÁS»); con teclado se mantiene el de :focus-visible del tema. */
.vf-s03 .wp-block-button__link:focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   Popups «Leer más» (.vf-modal compartido): ajustes del .wrapper-popup original
   -------------------------------------------------------------------------- */
/* Abajo: 60px del .wrapper-popup + 55px del <p>&nbsp;</p> final de cada texto (20px de margen
   + 35px de línea), que el conversor no trae como bloque vacío. */
.vf-s03 .vf-modal {
	max-width: none;
	padding: 0 15px 115px;
	text-align: left;
	font-size: var(--wp--preset--font-size--medium);
}

/* Botón de cierre: aspa de 44px arriba a la derecha (top 25px), sin ocupar alto.
   En el original (.close-icon absoluto) se desplaza con el texto: no es sticky. */
.vf-s03 .vf-modal > .vf-modal-close {
	position: relative;
	top: auto;
	height: 0;
	margin: 0 auto !important;
	align-items: flex-start;
}

.vf-s03 .vf-modal-close .wp-block-button {
	position: relative;
	top: calc(25px + var(--vf-s03-pop-shift));
	right: -5px;
}

.vf-s03 .vf-modal-close .wp-block-button__link {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	background: none;
	color: var(--vf-s03-close);
	font-size: 0;
	line-height: 0;
}

.vf-s03 .vf-modal-close .wp-block-button__link::before,
.vf-s03 .vf-modal-close .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 11px);
	width: 22px;
	height: 1.55px;
	background-color: currentColor;
	transform: rotate(45deg);
}

.vf-s03 .vf-modal-close .wp-block-button__link::after {
	transform: rotate(-45deg);
}

/* Contenido del popup: h3 28px/700 (margen 28px), p 20px/35px (margen 20px), listas 26px */
.vf-s03 .vf-modal > h3 {
	margin-block: 28px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--base);
}

/* Título del popup: 28px bajo el borde del .wrapper-popup original (ver --vf-s03-pop-shift) */
.vf-s03 .vf-modal > .vf-modal-close + h3 {
	margin-top: calc(28px + var(--vf-s03-pop-shift));
}

.vf-s03 .vf-modal > p {
	margin-block: 20px;
	line-height: 35px;
}

.vf-s03 .vf-modal > ul,
.vf-s03 .vf-modal > ol {
	margin-block: 20px;
	padding-left: 40px;
	line-height: 26px;
}

/* Elementos de lista pegados (26px por línea, sin el margen superior de 8px del tema padre) */
.vf-s03 .vf-modal li {
	margin: 0;
	line-height: 26px;
}

.vf-s03 .vf-modal strong {
	font-weight: 700;
}

@media (max-width: 768px) {
	/* .wrapper-popup .popup { padding: 45px 15px } + .container 15px */
	/* Abajo: 45px del .popup + 60px del .wrapper-popup + 55px del <p>&nbsp;</p> final */
	.vf-s03 .vf-modal {
		padding: 45px 30px 160px;
	}

	.vf-s03 .vf-modal-close .wp-block-button {
		top: calc(-20px + var(--vf-s03-pop-shift));   /* 25px desde el borde superior del .wrapper-popup */
		right: -20px;   /* 10px desde el borde derecho */
	}
}

/* Editor de bloques: los popups se ven en línea (no fijos) para poder editarlos */
.vf-s03 .vf-modal.block-editor-block-list__block {
	display: block;
	position: relative;
	inset: auto;
	z-index: auto;
	overflow: visible;
	margin-top: 30px !important;
	padding-top: 10px;
	padding-bottom: 20px;
	border-top: 1px dashed currentColor;
}

/* --------------------------------------------------------------------------
   Aparición (AOS del original: título «fade», tarjetas «fade-up» 1000ms).
   La clase .vf-aos la pone 03-iconos-servicios.js; sin JS todo se ve.
   -------------------------------------------------------------------------- */
.vf-s03.vf-aos > .vf-title,
.vf-s03.vf-aos > .wp-block-columns > .wp-block-column {
	opacity: 0;
	transition: opacity 1s ease, transform 1s ease;
}

.vf-s03.vf-aos > .wp-block-columns > .wp-block-column {
	transform: translate3d(0, 100px, 0);
}

.vf-s03.vf-aos > .vf-title.is-in,
.vf-s03.vf-aos > .wp-block-columns > .wp-block-column.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vf-s03.vf-aos > .vf-title,
	.vf-s03.vf-aos > .wp-block-columns > .wp-block-column {
		opacity: 1;
		transform: none;
		transition: none;
	}
}