/* Pie único del sitio de Verne (lo pinta js/site-footer.js). Diseño aprobado en Formación para empresas (16-10-2026).
   Autónomo: define sus propios tokens y contenedor, así funciona igual en las páginas estáticas, en el Home y en las
   páginas empaquetadas, sin depender de css/home-sistema.css.
   Principio: plano final oscuro a sangre que funciona como índice y firma. La firma tiene ancho de lectura propio
   (300 px) y las cuatro columnas miden lo que su texto necesita (max-content) y se reparten el resto; así los
   nombres completos de Servicios caben en una línea en escritorio. */
.vx-foot { --vf-navy:#25283D; --vf-navy-95:#191B2B; --vf-lav:#C0B0F4; --vf-pad:24px;
  display:block; margin:0; background:linear-gradient(180deg, var(--vf-top, var(--vf-navy)) 0%, var(--vf-navy-95) 160px); color:hsl(0 0% 100% / .74);
  padding:0 0 28px; font-family:'Poppins', sans-serif; letter-spacing:0; text-align:left; -webkit-font-smoothing:antialiased; }
/* páginas empaquetadas: su motor fija el contenedor a la altura de la ventana (#dc-root { height:100% }) y el
   contenido lo desborda; con el pie detrás, el contenedor debe medir lo que su contenido para que el pie quede al final */
#dc-root, #dc-root > .sc-host { height:auto !important; min-height:100%; }
.vx-foot *, .vx-foot *::before, .vx-foot *::after { box-sizing:border-box; letter-spacing:0; }
.vx-foot-in { position:relative; max-width:1200px; margin:0 auto; padding:clamp(48px, 5vw, 72px) var(--vf-pad) 0; }
.vx-foot-in::before { content:""; position:absolute; top:0; left:var(--vf-pad); right:var(--vf-pad); height:1px; background:hsl(0 0% 100% / .14); }
.vx-foot-main { display:grid; grid-template-columns:300px minmax(0,1fr); gap:48px; padding-bottom:clamp(40px, 5vw, 64px); }
.vx-foot-sign { display:flex; flex-direction:column; gap:18px; }
.vx-foot-logo { display:inline-block; width:max-content; border-radius:6px; }
.vx-foot-logo img { width:152px; height:auto; display:block; }
.vx-foot-sign p { margin:0; max-width:36ch; font-size:15px; font-weight:400; line-height:1.6; text-wrap:pretty; }
.vx-foot-nav { display:grid; grid-template-columns:repeat(4, max-content); justify-content:space-between; column-gap:32px; row-gap:32px; }
.vx-foot-h { margin:0 0 14px; padding:0; font-size:13px; font-weight:600; line-height:1.4; color:var(--vf-lav); text-transform:none; }
.vx-foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.vx-foot li { margin:0; padding:0; }
.vx-foot li > a, .vx-foot li > span { display:inline-block; padding:6px 0; font-size:14.5px; font-weight:400; line-height:1.4; color:hsl(0 0% 100% / .82); text-decoration:none; }
.vx-foot li > a:hover { color:#fff; }
.vx-foot a:focus-visible { outline:2px solid var(--vf-lav); outline-offset:3px; border-radius:4px; }
/* redes: símbolos oficiales en blanco, mismo peso óptico (tamaño por símbolo en --s), área táctil de 40 px */
.vx-foot .vx-social { flex-direction:row; flex-wrap:wrap; gap:2px; margin:12px 0 0 -11px; }
.vx-foot .vx-social a, .vx-foot .vx-social .vx-soc { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:50%; color:hsl(0 0% 100% / .86); transition:color .2s ease, background-color .2s ease; }
.vx-foot .vx-social svg { width:var(--s, 18px); height:var(--s, 18px); display:block; }
.vx-foot .vx-social a:hover { color:#fff; background:hsl(0 0% 100% / .08); }
.vx-foot .vx-social a:focus-visible { outline:2px solid var(--vf-lav); outline-offset:0; border-radius:50%; }
.vx-foot-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:22px; border-top:1px solid hsl(0 0% 100% / .1); font-size:13px; color:hsl(0 0% 100% / .62); }
.vx-foot-legal p { margin:0; font-size:13px; line-height:1.5; }
.vx-foot-legal a { font-size:13px; color:hsl(0 0% 100% / .74); text-decoration:none; }
.vx-foot-legal a:hover { color:#fff; }
.vx-foot .vx-review-note { contain:inline-size; margin:10px 0 0; max-width:26ch; font-size:12px; font-weight:600; line-height:1.4; color:var(--vf-lav); }   /* se retira sola cuando las cuatro redes tienen URL; contain: la nota se ajusta al ancho de la columna, no lo define */
/* hasta 1279 px la firma ocupa su propia fila: las cuatro columnas conservan sus nombres en una línea */
@media (max-width:1279px){ .vx-foot-main { grid-template-columns:minmax(0,1fr); gap:36px; } .vx-foot-sign p { max-width:52ch; } }
/* por debajo de 900 px las cuatro columnas no caben en una fila: dos por fila */
@media (max-width:899px){ .vx-foot-nav { grid-template-columns:repeat(2, minmax(0,1fr)); justify-content:stretch; gap:28px 20px; } }
@media (max-width:700px){
  .vx-foot { --vf-pad:22px; }
  .vx-foot li > a, .vx-foot li > span { overflow-wrap:anywhere; }   /* en móvil los nombres largos saltan con naturalidad */
}
/* unión con cada página (js/site-footer.js mide el color con el que termina el contenido):
   · final oscuro → el degradado del pie arranca de ese mismo color (--vf-top): sin escalón, con la línea fina;
   · final claro → variante enmarcada: el pie es la última sala sobre ese lienzo (--vf-canvas), con el margen y el
     radio de las salas del Home. El Home la declara en su HTML: <div class="vx-foot-frame"><div data-site-footer></div></div> */
.vx-foot-frame { background:var(--vf-canvas, #fff); padding:calc(clamp(6px, .9vw, 12px) * 2) clamp(6px, .9vw, 12px) clamp(6px, .9vw, 12px); }
.vx-foot-frame .vx-foot { border-radius:clamp(18px, 2vw, 28px); overflow:hidden; }
.vx-foot-frame .vx-foot-in::before { content:none; }
@media (prefers-reduced-motion: reduce){ .vx-foot .vx-social a { transition:none; } }

/* táctil: cada enlace del pie alcanza 40 px de alto (antes 32 px) sin cambiar tamaño de letra ni composición */
@media (pointer:coarse){ .vx-foot li > a, .vx-foot li > span { padding:10px 0; } .vx-foot ul { gap:0; } .vx-foot-legal a { display:inline-block; padding:12px 0; margin:-12px 0; } }