/* Formación para empresas (formacion-para-empresas.html) · estilos propios.
   Se carga después de css/home-sistema.css (sistema compartido: tipografía, módulos, botones, formulario, cierre y pie).
   Cada bloque del documento tiene una composición según su función:
   · metodología → tres ejes complementarios que convergen en «Formación práctica» (puntos y trazos, sin numeración);
   · líneas de formación → cada frente se ramifica en sus temas (lógica de Servicios con puntos y trazos) + fotografía;
   · framework → seis etapas unidas por un trazo, iconos del sistema (trazo 2, puntos de radio 2);
   · herramientas → logo + nombre legible por herramienta, filas por ecosistema;
   · rutas → comparación de perfiles con filas alineadas. */

/* base de página (en el Home la pone css/home.css) */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Poppins', sans-serif; letter-spacing:0; background:var(--v-white); color:var(--v-navy); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }   /* el alto lo da la proporción (aspect-ratio), no el atributo */
button, input, select, textarea { font:inherit; letter-spacing:0; }   /* los controles no heredan la fuente por defecto */
.v-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
.vf-sec-t { margin-bottom:clamp(36px, 4vw, 56px); max-width:24ch; }

/* módulos del sistema en la portada (misma definición: alto = diámetro, extremos semicirculares) */
.vf-hero-mods i { display:block; flex:none; height:var(--d); width:calc(var(--d) * var(--len, 1)); border-radius:calc(var(--d) / 2); background:var(--v-white); }
.vf-hero-mods i.c2 { --len:2; }
.vf-hero-mods i.c3 { --len:3; }
.vf-hero-mods i.l { background:var(--v-lavender); }

/* ── portada: texto y fotografía protagonista; una fila de módulos cruza el borde de la foto ── */
.vf-hero { position:relative; color:var(--v-white); padding:clamp(128px, 13vw, 168px) 0 clamp(72px, 8vw, 112px);
  background:radial-gradient(ellipse 50% 60% at 18% 55%, rgba(109,74,190,.34) 0%, rgba(109,74,190,0) 72%), linear-gradient(180deg, #343858 0%, #2B2E48 30%, #25283D 62%, #1F2236 100%); }
.vf-hero-in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px, 5vw, 80px); align-items:center; }
.vf-h1 { margin:0 0 22px; font-size:clamp(40px, 5vw, 68px); font-weight:700; line-height:1.04; letter-spacing:0; text-wrap:balance; }
.vf-lead { margin:0 0 10px; font-size:clamp(20px, 1.8vw, 24px); font-weight:600; line-height:1.4; color:var(--v-white); }
.vf-sub { margin:0 0 36px; max-width:42ch; font-size:17px; line-height:1.7; color:hsl(0 0% 100% / .8); }
.vf-btn-grad { background:linear-gradient(90deg, hsl(263 45% 52%), hsl(232 24% 19%)); color:var(--v-white); box-shadow:inset 0 0 0 1px hsl(252 74% 82% / .35); }
.vf-btn-grad:hover { filter:brightness(1.1); }
.vf-btn-grad:focus-visible { outline:2px solid var(--v-white); outline-offset:3px; }
.vf-hero-fig { position:relative; margin:0; }
.vf-hero-fig img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--room-r); }
.vf-hero-mods { --d:14px; position:absolute; left:calc(var(--d) * -2.5); bottom:clamp(22px, 3vw, 36px); display:flex; gap:7px; }

/* ── metodología: tres ejes complementarios que convergen (lenguaje modular del Home) ──
   Cada acción es una cápsula del sistema con su foco al lado; de cada eje sale una pista de módulos (puntos y
   cápsulas 2u/3u, sólidos y con extremos redondos) y las tres pistas convergen en una sola cápsula morada:
   la formación práctica. Sin números: son ejes simultáneos, no etapas. Posiciones calculadas (--x/--y en
   escritorio, --mx/--my en móvil) para que la composición estática ya explique la relación. */
.vf-method { padding-block:var(--hx-sec) calc(var(--hx-sec) * .7); }
.vf-method-head { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px, 6vw, 96px); align-items:end; margin-bottom:clamp(36px, 4vw, 64px); }
.vf-method-head .hx-deck { font-size:19px; color:var(--v-navy); }
.vf-mx { --rowh:clamp(96px, 8.4vw, 120px); --u:clamp(22px, 1.9vw, 28px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; }
.vf-mx-axes { list-style:none; margin:0; padding:0; display:grid; grid-template-rows:repeat(3, var(--rowh)); }
.vf-mx-axes li { display:flex; align-items:center; gap:clamp(16px, 1.8vw, 24px); }
.vf-cap { --d:clamp(44px, 3.6vw, 52px); flex:none; display:inline-flex; align-items:center; height:var(--d); padding:0 calc(var(--d) * .5); border-radius:calc(var(--d) / 2); background:var(--v-navy); color:var(--v-white); font-size:clamp(15px, 1.2vw, 17px); font-weight:600; line-height:1; white-space:nowrap; }
.vf-mx-axes span { font-size:clamp(15px, 1.25vw, 18px); font-weight:500; line-height:1.35; color:var(--v-ink-2); }
/* flujo: tres pistas (una por eje) que se estrechan hasta formar un haz de tres filas separadas .3u —la
   convergencia de Servicios— y entran en la cápsula. Posiciones en u, ancladas a la cápsula: no se cruzan. */
.vf-mx-flow { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:calc(var(--u) * .3); height:calc(var(--rowh) * 3); }
.vf-mx-field { position:relative; height:100%; }
.vf-mx-field i { position:absolute; right:calc(var(--r) * var(--u)); top:calc(var(--yp) + var(--yo) * var(--u)); display:block; height:var(--u); width:calc(var(--u) * var(--len, 1)); border-radius:calc(var(--u) / 2); transform:translateY(-50%); background:var(--v-mist-2); }
.vf-mx-field i.c2 { --len:2; } .vf-mx-field i.c3 { --len:3; }
.vf-mx-field i.l { background:hsl(252 74% 82% / .7); }
.vf-mx-field i[style*="--t:5"], .vf-mx-field i[style*="--t:6"] { background:hsl(263 45% 52% / .55); }   /* al llegar a la síntesis, los módulos toman el morado */
.vf-mx-out { margin:0; }
.vf-cap--out { --d:clamp(52px, 4.4vw, 64px); background:var(--v-purple); font-size:clamp(16px, 1.4vw, 19px); font-weight:700; }

/* ── líneas de formación: tres agrupaciones modulares ──
   Mismo campo que Servicios (.hx-fld: alto = diámetro, huecos .3u, navy con un acento morado, módulos claros).
   La fotografía entra como un módulo grande: una cápsula fotográfica con extremos semicirculares. Cada frente
   tiene su propia disposición y las tres columnas se escalonan para dar ritmo. */
.vf-lines { padding-block:calc(var(--hx-sec) * .7) var(--hx-sec); }
.vf-fronts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(28px, 3vw, 48px); align-items:start; }
.vf-front-2 { margin-top:clamp(40px, 6vw, 96px); }
.vf-front-3 { margin-top:clamp(20px, 3vw, 48px); }
.vf-front-t { margin:0 0 clamp(20px, 2vw, 28px); font-size:clamp(22px, 2vw, 28px); font-weight:700; line-height:1.15; color:var(--v-navy); }
.vf-front-n { display:block; margin-bottom:8px; font-size:14px; font-weight:600; color:var(--v-purple); }
.vf-cluster { --u:clamp(28px, 2.5vw, 34px); }
.vf-cluster .r { width:max-content; transform:translateX(calc(var(--u) * var(--x, 0))); }   /* la fila mide su contenido: el desplazamiento no crea desbordamiento */
.vf-cluster b { font-size:clamp(13px, 1.05vw, 14.5px); }
.vf-cluster b.a { background:var(--v-purple); }
.vf-pill { flex:none; display:block; height:calc(var(--u) * 3.4); width:calc(var(--u) * 6); border-radius:calc(var(--u) * 1.7); overflow:hidden; background:var(--v-mist); }
.vf-pill img { width:100%; height:100%; object-fit:cover; }
.vf-cluster.is-pre i, .vf-cluster.is-pre b, .vf-cluster.is-pre .vf-pill { opacity:0; }

/* ── framework: seis etapas unidas por un mismo trazo ── */
.vf-fw { background:linear-gradient(180deg, #2E3150 0%, var(--v-navy) 38%); color:var(--v-white); padding-block:var(--hx-sec); }
.vf-fw .hx-h2 { color:var(--v-white); }
.vf-steps { --node:clamp(76px, 7vw, 100px); list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(12px, 1.6vw, 24px); position:relative; }
.vf-steps::before { content:""; position:absolute; left:calc(100% / 12); right:calc(100% / 12); top:calc(var(--node) / 2 - 1.5px); height:3px; border-radius:2px; background:linear-gradient(90deg, hsl(252 74% 82% / .5), var(--v-lavender)); }
.vf-step { position:relative; text-align:center; }
.vf-node { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:var(--node); height:var(--node); margin:0 auto 22px; border-radius:50%; background:var(--v-white); color:var(--v-purple); box-shadow:0 0 0 4px var(--v-purple); }
.vf-node svg { width:46%; height:46%; }   /* iconos del sistema: trazo 2, extremos redondos y puntos de radio 2 */
.vf-step-n { display:block; font-size:13px; font-weight:600; color:var(--v-lavender); margin-bottom:6px; }
.vf-step-t { margin:0 0 10px; font-size:clamp(16px, 1.3vw, 19px); font-weight:700; line-height:1.3; color:var(--v-white); text-wrap:balance; }
.vf-steps p { margin:0; font-size:15px; line-height:1.55; color:hsl(0 0% 100% / .78); text-wrap:balance; }

/* ── herramientas: filas por ecosistema con separadores discontinuos (como la lámina) ── */
.vf-tools { padding-block:var(--hx-sec) calc(var(--hx-sec) * .6); }
.vf-eco { margin:0; }
.vf-eco > div { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(20px, 5vw, 80px); align-items:center; padding:28px 0; border-bottom:1px dashed hsl(263 45% 52% / .45); }
.vf-eco > div:last-child { border-bottom:0; }
.vf-eco dt { font-size:clamp(19px, 1.6vw, 23px); font-weight:700; color:var(--v-navy); white-space:nowrap; }
.vf-eco dd { margin:0; }
/* cada herramienta: su logo (o el de su plataforma) + nombre legible; alturas ópticas moderadas, sin cajas */
.vf-tool-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:18px clamp(24px, 3vw, 40px); }
.vf-tool-list li { display:flex; align-items:center; gap:12px; min-height:40px; }
.vf-tool-list img { width:auto; height:var(--h, 30px); flex:none; }
.vf-tool-list span { font-size:15.5px; font-weight:500; color:var(--v-navy); white-space:nowrap; }

/* ── rutas: comparación de perfiles; Navigator en navy como en la lámina; filas alineadas ── */
.vf-routes { background:var(--v-mist); padding-block:var(--hx-sec); }
.vf-routes-head { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 5vw, 80px); align-items:end; margin-bottom:clamp(36px, 4vw, 56px); }
.vf-routes-head .hx-deck { color:var(--v-navy); font-weight:500; }
.vf-route-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto auto auto 1fr; column-gap:clamp(16px, 2vw, 28px); }
.vf-route { grid-row:span 4; display:grid; grid-template-rows:subgrid; row-gap:0; padding:clamp(24px, 2.6vw, 36px); border-radius:22px; background:var(--v-white); box-shadow:inset 0 0 0 1px var(--v-line); }
.vf-route--dark { background:var(--v-navy); box-shadow:none; color:var(--v-white); }
.vf-route-t { margin:0 0 14px; font-size:clamp(18px, 1.5vw, 21px); font-weight:700; line-height:1.25; color:var(--v-purple); }
.vf-route--dark .vf-route-t { color:var(--v-white); }
.vf-route-mode { --d:36px; align-self:start; justify-self:start; display:inline-flex; align-items:center; height:var(--d); margin:0 0 18px; padding:0 calc(var(--d) * .5); border-radius:calc(var(--d) / 2); box-shadow:inset 0 0 0 1.5px var(--v-purple); font-size:14px; font-weight:600; color:var(--v-purple); }
.vf-route--dark .vf-route-mode { box-shadow:inset 0 0 0 1.5px var(--v-lavender); color:var(--v-lavender); }
.vf-route-d { margin:0; padding-bottom:20px; border-bottom:1px dashed hsl(263 45% 52% / .45); font-size:16px; line-height:1.6; color:var(--v-ink-2); }
.vf-route--dark .vf-route-d { color:hsl(0 0% 100% / .8); border-bottom-color:hsl(252 74% 82% / .4); }
.vf-route-items { list-style:none; margin:0; padding:20px 0 0; display:flex; flex-direction:column; gap:12px; }
.vf-route-items li { position:relative; padding-left:22px; font-size:15.5px; line-height:1.45; color:var(--v-navy); }
.vf-route--dark .vf-route-items li { color:var(--v-white); }
.vf-route-items li::before { content:""; position:absolute; left:0; top:.45em; width:10px; height:10px; border-radius:50%; background:var(--v-purple); }
.vf-route--dark .vf-route-items li::before { background:var(--v-lavender); }

/* ── cierre: mensaje del documento sobre el plano final (css/home-sistema.css → .vx-close) ── */
.vf-ok { max-width:640px; padding:clamp(28px, 3vw, 40px); border-radius:22px; background:hsl(232 24% 100% / .04); border:1px solid hsl(0 0% 100% / .1); }
.vf-ok:focus { outline:none; }
.vf-ok .hx-h3 { color:var(--v-white); margin-bottom:12px; }
.vf-ok p { margin:0; font-size:16px; line-height:1.7; color:hsl(0 0% 100% / .8); }

/* ── adaptación ── */
@media (max-width:1023px){
  /* metodología: las acciones arriba; las pistas bajan y convergen en la cápsula, centrada */
  .vf-mx { grid-template-columns:minmax(0,1fr); }
  .vf-mx-axes { grid-template-rows:none; gap:14px; }
  .vf-mx-flow { --u:clamp(11px, 2.4vw, 18px); height:clamp(120px, 26vw, 170px); margin-top:clamp(24px, 4vw, 36px); }
  .vf-cap--out { --d:clamp(44px, 9vw, 56px); }
  /* frentes: una columna, cada agrupación con aire propio */
  .vf-fronts { grid-template-columns:minmax(0,1fr); gap:clamp(48px, 8vw, 72px); }
  .vf-front-2, .vf-front-3 { margin-top:0; }
  .vf-front { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:24px; align-items:center; }
  .vf-front-t { margin:0; }
  .vf-cluster { --u:30px; }
  .vf-hero-in, .vf-method-head, .vf-routes-head { grid-template-columns:minmax(0,1fr); }
  .vf-hero-mods { left:auto; right:18px; bottom:-7px; }
  .vf-steps { grid-template-columns:minmax(0,1fr); gap:0; }
  .vf-steps::before { left:calc(var(--node) / 2 - 1.5px); right:auto; top:calc(var(--node) / 2); bottom:calc(var(--node) / 2 + 40px); width:3px; height:auto; background:linear-gradient(180deg, hsl(252 74% 82% / .5), var(--v-lavender)); }
  .vf-step { display:grid; grid-template-columns:var(--node) minmax(0,1fr); column-gap:22px; text-align:left; padding-bottom:28px; }
  .vf-node { grid-row:span 3; margin:0; }
  .vf-step-n { margin-top:10px; }
  .vf-eco > div { grid-template-columns:minmax(0,1fr); gap:14px; }
  .vf-eco dt { white-space:normal; }
  .vf-route-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:16px; }
  .vf-route { grid-row:auto; display:flex; flex-direction:column; }
}
@media (max-width:700px){
  .vf-mx-axes li { flex-direction:column; align-items:flex-start; gap:8px; }
  .vf-front { display:block; }
  .vf-front-t { margin:0 0 20px; }
  .vf-cluster { --u:25px; }
  .vf-cluster .h { display:none; }
  .vf-cluster .r { transform:translateX(calc(var(--u) * var(--x, 0) * .35)); }
  .vf-hero { padding-top:112px; }
  .vf-steps { --node:64px; }
  .vf-tool-list { gap:14px 24px; }
  .vf-tool-list span { font-size:14.5px; }
}