/* Portafolios ([vler_portafolios]) — tarjetas con portada vertical y botón de descarga. Tokens de sistema.css. */
.vpf { margin: 56px auto 0; padding-bottom: 88px; } /* padding: el tema anula el margen inferior del último bloque */
.vpf--banda { margin: 0 auto; padding: 0; }
/* /portafolios/ (página 1004): el texto de la cabecera no cruza la foto */
.page-id-1004 .vler-cab .stk-block-text__text { max-width: 640px; }
@media (max-width: 1023px) { .page-id-1004 .vler-cab .stk-block-text__text { margin-inline: auto; } }
.vpf__cab { margin-bottom: 36px; }
.vpf__cab .vler-sec-ante { margin-bottom: 8px; }
.vpf__cab .vler-sec-titulo { margin: 0; }
.vpf__cab .vler-sec-titulo::after { margin-left: 0; }

.vpf__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.vpf__item { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vl-borde, #e3e9f0); border-radius: 8px; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.vpf__item:hover { border-color: var(--vl-azul, #001A37); transform: translateY(-3px); box-shadow: var(--vl-sombra-2, 0 10px 28px rgba(0, 26, 55, .14)); }
.vpf__portada { display: block; aspect-ratio: 612 / 792; background: var(--vl-claro, #f3f6f9); border-bottom: 1px solid var(--vl-borde, #e3e9f0); overflow: hidden; }
.vpf__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vpf__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.vpf__titulo { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--vl-azul, #001A37); }
.vpf__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--vl-gris, #5b6b7f); }
.vpf__boton { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--vl-rojo, #E50000); color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 4px; transition: background .2s; }
.vpf__boton:hover { background: #b80000; }
.vpf__boton:focus-visible { outline: 2px solid var(--vl-azul, #001A37); outline-offset: 3px; }
.vpf__peso { font-weight: 500; opacity: .85; font-size: 13px; }

@media (max-width: 689px) {
	.vpf { margin-top: 36px; padding-bottom: 56px; }
	.vpf--banda { padding: 0; }
	.vpf__lista { grid-template-columns: 1fr; gap: 20px; }
	/* En celular la portada completa ocuparía media pantalla: tarjeta horizontal */
	.vpf__item { flex-direction: row; }
	/* portada completa (sin recorte) de 112 px de ancho, arriba a la izquierda */
	.vpf__portada { flex: 0 0 112px; align-self: flex-start; aspect-ratio: 612 / 792; border-right: 1px solid var(--vl-borde, #e3e9f0); border-bottom: 1px solid var(--vl-borde, #e3e9f0); }
	.vpf__cuerpo { padding: 16px; }
	.vpf__titulo { font-size: 17px; }
	.vpf__desc { font-size: 14px; }
	.vpf__boton { font-size: 14px; padding: 10px 14px; }
}