/* ============================================================
   pie.css · VISIONLOVERS · Sistema VL 1.0 (24/09/2026)
   El pie (bloque HTML 10867 «FOOTER VISIONLOVERS», reescrito en
   04-bloques/pie-bloque-10867.html). Cuatro columnas en escritorio,
   una en móvil. Colores del pie de Sergio como variables. Cero !important.
   ============================================================ */
.vl-footer { background: var(--vl-footer-bg); color: var(--vl-footer-text); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); }
.vl-footer a:not([class*="vl-btn"]) { color: var(--vl-footer-text); }
.vl-footer a:not([class*="vl-btn"]):hover { color: var(--vl-on-color); text-decoration: underline; }
.vl-footer p { margin: 0 0 var(--vl-space-sm); }

/* Franja de arriba del pie: la llamada a la acción final */
.vl-footer__cta { border-bottom: 1px solid rgba(255, 255, 255, .12); padding: var(--vl-space-xl) 0; display: flex; flex-direction: column; gap: var(--vl-space-md); }
@media (min-width: 900px) { .vl-footer__cta { flex-direction: row; align-items: center; justify-content: space-between; } }
.vl-footer__cta-titulo { font-family: var(--font-titulos); font-size: var(--vl-font-h3); line-height: var(--vl-lh-h3); font-weight: 700; color: var(--vl-on-color); margin: 0 0 var(--vl-space-xs); }
.vl-footer__cta-texto { margin: 0; color: var(--vl-footer-muted); }
.vl-footer__cta-botones { display: flex; flex-wrap: wrap; gap: var(--vl-space-sm); flex: 0 0 auto; }

/* Botón fantasma sobre el pie oscuro: letra y borde blancos */
.vl-footer .vl-btn--ghost { color: var(--vl-on-color); border-color: var(--vl-on-color); }
.vl-footer .vl-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: var(--vl-on-color); }

/* Columnas */
.vl-footer__top { padding: var(--vl-space-2xl) 0 var(--vl-space-xl); display: grid; gap: var(--vl-space-xl); grid-template-columns: 1fr; }
@media (min-width: 640px) { .vl-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vl-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--vl-space-2xl); } }
.vl-footer__brand { max-width: 360px; }
.vl-footer__logo { display: inline-block; margin-bottom: var(--vl-space-md); }
.vl-footer__logo img { height: 40px; width: auto; display: block; }
.vl-footer__title { font-family: var(--font-titulos); font-size: var(--vl-font-caption); line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--vl-on-color); margin: 0 0 var(--vl-space-md); }
.vl-footer__links { list-style: none; margin: 0; padding: 0; }
.vl-footer__links li { margin-bottom: var(--vl-space-xs); }
.vl-footer__links a { display: inline-flex; align-items: center; min-height: 36px; }
.vl-footer__text--small { font-size: var(--vl-font-caption); line-height: 1.5; color: var(--vl-footer-muted); }
/* La colegiada en el pie: nombre entero, número entero */
.vl-footer__colegiada { display: flex; gap: var(--vl-space-md); align-items: center; margin-top: var(--vl-space-md); padding: var(--vl-space-md); background: rgba(255, 255, 255, .06); border-radius: var(--vl-radius-md); }
.vl-footer__colegiada b { color: var(--vl-on-color); display: block; }
.vl-footer__colegiada .vl-avatar { background: var(--vl-on-color); color: var(--vl-footer-bg); }

/* Barra final */
.vl-footer__bottom { background: var(--vl-footer-bg-deep); padding: var(--vl-space-md) 0; font-size: var(--vl-font-caption); line-height: 1.5; color: var(--vl-footer-muted); }
.vl-footer__bottom .vl-container { display: flex; flex-direction: column; gap: var(--vl-space-sm); }
@media (min-width: 900px) { .vl-footer__bottom .vl-container { flex-direction: row; align-items: center; justify-content: space-between; } }
.vl-footer__legal { display: flex; flex-wrap: wrap; gap: var(--vl-space-xs) var(--vl-space-md); list-style: none; margin: 0; padding: 0; }
.vl-footer__legal a { color: var(--vl-footer-muted); display: inline-flex; align-items: center; min-height: 36px; }
.vl-footer__copy { margin: 0; }

/* El envoltorio del tema no estrecha el pie */
.wd-footer .container, .wd-footer .container-fluid, .footer-container .container { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; }
.site-footer, .footer-container, .footer-wrapper { padding: 0; margin: 0; background: transparent; }
/* Contraste alto: el pie sigue oscuro, pero los grises se van a blanco */
html[data-vl-contraste="alto"] .vl-footer { --vl-footer-text: #ffffff; --vl-footer-muted: #ffffff; }