@font-face { font-family: 'ArchivoWeb'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(vendor/ArchivoWeb.woff2) format('woff2'); }
  .grano-fijo { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .10; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
  :root { --bg: #ecebf2; --ink: #16121f; --suave: #5b5470; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }
  * { box-sizing: border-box; }
  html { background: var(--bg); }
  body { margin: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); overflow-x: hidden; }
  #escena { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  main { position: relative; z-index: 1; }

  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(20px, 6vw, 96px) 22px; font-size: 13px; pointer-events: none; background: linear-gradient(rgba(236,235,242,.92), rgba(236,235,242,0)); }
  .nav > * { pointer-events: auto; }
  .nav b { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 17px; }
  .nav b i { font-style: normal; color: var(--acento); }
  .nav span { display: flex; gap: 4px; }
  .nav a { text-decoration: none; color: var(--suave); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
  .nav a { transition: color .15s ease, background-color .15s ease; }
  @media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); background: rgba(255,255,255,.5); } }
  .nav a.cta { color: var(--ink); font-weight: 500; }
  @media (max-width: 760px) { .nav a:not(.cta) { display: none; } }
  .pantalla { min-height: 100vh; padding: 120px clamp(20px, 6vw, 96px) 80px; display: flex; align-items: center; }
  .pantalla.der { justify-content: flex-end; }
  .grande { font-family: 'ArchivoWeb', var(--font-titular); font-stretch: 112%; font-weight: 250; letter-spacing: -.035em; line-height: .98; font-size: clamp(48px, 9vw, 150px); margin: 0; }
  .grande em { font-style: normal; color: var(--violeta-500); font-weight: 400; }

  .vidrio { background: rgba(255,255,255,.34); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); border: 1px solid rgba(255,255,255,.75); border-radius: 26px; padding: 28px; box-shadow: 0 20px 60px rgba(72,18,140,.10), inset 0 1px 0 rgba(255,255,255,.9); }
  .etq { font: 700 12px/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--violeta-500); }
  .vidrio h3 { font-family: var(--font-display); font-size: 30px; line-height: 1.1; margin: 10px 0 8px; font-weight: 600; }
  .vidrio p { color: var(--suave); font-size: 16px; line-height: 1.55; margin: 0; }
  .fila { display: grid; gap: 18px; width: min(1100px, 100%); }
  .fila.dos { grid-template-columns: 1fr 1fr; }
  @media (max-width: 860px) { .fila.dos { grid-template-columns: 1fr; } }

  .hero-tarjeta { max-width: 470px; margin-top: 34px; }
  .boton { display: inline-block; margin-top: 20px; padding: 14px 24px; border-radius: 14px; background: var(--violeta-500); color: #fff; text-decoration: none; font-weight: 500; }
  .boton.sec { background: transparent; color: var(--ink); border: 1px solid rgba(22,18,31,.25); margin-left: 8px; }

  .cifras { display: flex; gap: 34px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(22,18,31,.12); }
  .cifras b { display: block; font: 300 46px/1 var(--font-titular); font-stretch: 112%; letter-spacing: -.03em; }
  .cifras span { font-size: 12px; letter-spacing: .08em; color: var(--suave); text-transform: uppercase; }

  .barra { height: 8px; border-radius: 8px; background: rgba(22,18,31,.10); overflow: hidden; margin-top: 8px; }
  .barra i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--violeta-500); transition: width 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
  .in .barra i { width: var(--w); }
  .paso { display: flex; justify-content: space-between; font-size: 14px; margin-top: 14px; }
  .paso b { font-weight: 500; }

  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .chips span { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(22,18,31,.10); font-size: 13px; }
  .chips span.on { background: var(--ink); color: #fff; }

  .flujo { display: flex; align-items: center; gap: 0; margin-top: 20px; flex-wrap: wrap; }
  .flujo .n { padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid rgba(22,18,31,.12); font-size: 14px; }
  .flujo .n.f { background: var(--violeta-500); color: #fff; border-color: var(--violeta-500); }
  .flujo .l { width: 28px; height: 2px; background: rgba(22,18,31,.3); }

  .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; text-align: center; font-size: 13px; }
  .cal span { padding: 9px 0; border-radius: 10px; background: rgba(255,255,255,.55); border: 1px solid rgba(22,18,31,.08); }
  .cal span.h { background: transparent; border: 0; color: var(--suave); font-size: 11px; letter-spacing: .06em; }
  .cal span.s { background: var(--ink); color: #fff; }

  .rev { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
  .rev.in { opacity: 1; transform: none; }
  footer { position: relative; z-index: 1; padding: 30px clamp(20px,6vw,96px); font-size: 13px; color: var(--suave); display: flex; justify-content: space-between; }

  /* --- contenido v3 (24 sep 2026): título solo, cómo funcionamos en banda, dos bloques de servicio que se abren, formulario --- */
  .ia { font-style: normal; color: var(--acento); }
  .caja { width: min(1180px, 100%); margin: 0 auto; }
  .seccion { padding: 0 clamp(20px, 6vw, 96px); }
  .etq { display: block; }

  /* 1 · Título */
  .hero { min-height: 62vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 110px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(38px, 5.2vw, 78px); max-width: 15ch; margin: 0 auto; text-wrap: balance; }

  /* 2 · Cómo funcionamos: banda horizontal */
  .banda { padding: 18px 22px 16px; display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
  .banda .txt p { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--suave); }
  .banda svg { width: 100%; height: auto; display: block; }
  @media (max-width: 860px) { .banda { grid-template-columns: 1fr; } }
  .dib .nodo rect { fill: rgba(255,255,255,.85); stroke: rgba(22,18,31,.16); }
  .dib .nodo.f rect { fill: var(--violeta-500); stroke: var(--violeta-500); }
  .dib .nodo text { font: 500 13px var(--font-sans); fill: var(--ink); }
  .dib .nodo.f text { fill: #fff; font-weight: 600; }
  .dib .nodo tspan.k { font: 600 10px var(--font-mono); fill: var(--violeta-500); }
  .dib .nodo.f tspan.k { fill: rgba(255,255,255,.8); }
  .dib .cap { font: 700 10px var(--font-sans); letter-spacing: .09em; text-transform: uppercase; fill: var(--suave); }
  .dib .via { fill: none; stroke: var(--violeta-500); stroke-width: 1.6; stroke-linecap: round; opacity: .55; stroke-dasharray: 500; stroke-dashoffset: 500; animation: trazo 1.1s var(--ease-in-out) forwards; }
  .dib .nodo { opacity: 0; animation: aparecer .5s var(--ease-out) forwards; }
  .dib .senal { fill: #fff; stroke: var(--violeta-500); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(112,30,218,.7)); }
  @keyframes trazo { to { stroke-dashoffset: 0; } }
  @keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* 3 · Dos bloques de servicio */
  .servicios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
  @media (max-width: 760px) { .servicios { grid-template-columns: 1fr; } }
  .serv { appearance: none; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; border-radius: 20px; overflow: hidden; position: relative; color: #fff; font-family: var(--font-sans); display: block; width: 100%; }
  .serv .foto { position: relative; aspect-ratio: 16 / 9.6; overflow: hidden; border-radius: 20px; background: #0a0f1c; }
  .serv .foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease-out), filter .3s ease; filter: saturate(.85); }
  .serv.on .foto img { transform: scale(1.04); filter: saturate(1); }
  @media (hover: hover) and (pointer: fine) { .serv:hover .foto img { transform: scale(1.04); filter: saturate(1); } }
  .serv .velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,28,.05) 0%, rgba(10,15,28,.45) 45%, rgba(10,15,28,.97) 100%); }
  @media (max-width: 760px) { .serv .foto { aspect-ratio: 4 / 3.3; } .serv .kw span:nth-child(n+4) { display: none; } }
  .serv .sobre { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px 18px; }
  .serv .sobre .etq { color: var(--violeta-300); }
  .serv h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; margin: 8px 0 10px; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
  .serv .kw { display: flex; flex-wrap: wrap; gap: 6px; }
  .serv .kw span { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(6px); }
  .serv .kw span.on { background: var(--violeta-500); border-color: var(--violeta-300); }
  .serv .mas { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(6px); display: grid; place-items: center; transition: transform .35s, background .35s; }
  .serv .mas::before, .serv .mas::after { content: ""; position: absolute; background: #fff; border-radius: 2px; }
  .serv .mas::before { width: 14px; height: 2px; } .serv .mas::after { width: 2px; height: 14px; transition: transform .35s; }
  .serv.on .mas { background: var(--violeta-500); transform: rotate(45deg); }
  .serv:focus-visible { outline: 3px solid var(--violeta-500); outline-offset: 3px; }
  .serv .pista { position: absolute; top: 20px; left: 22px; font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); }

  /* Detalle desplegado */
  .detalle { display: none; margin-top: 12px; }
  .detalle.on { display: block; }
  .detalle .intro { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
  .detalle .intro p { margin: 6px 0 0; color: var(--suave); font-size: 15px; line-height: 1.5; max-width: 62ch; }
  .detalle .frase { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.2; margin: 6px 0 0; max-width: 30ch; }
  .tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  @media (max-width: 1000px) { .tres { grid-template-columns: 1fr; } }

  /* Ejemplos de desarrollos: cifra arriba, flujo con carril y señal */
  .ejemplo { padding: 20px 20px 18px; }
  .ejemplo .cifra { margin: 6px 0 0; font: 300 clamp(28px, 2.3vw, 34px)/1.05 'ArchivoWeb', var(--font-titular); font-stretch: 112%; letter-spacing: -.035em; }
  .ejemplo .cifra s { color: var(--suave); text-decoration-color: rgba(91,84,112,.6); font-size: .72em; }
  .ejemplo .cifra em { font-style: normal; color: var(--violeta-500); }
  .ejemplo .que { font-size: 14px; color: var(--suave); margin: 2px 0 0; }
  .ejemplo .nom { font: 600 13px var(--font-display); margin: 12px 0 0; }
  .flujo-v { position: relative; margin: 10px 0 0; padding: 0 0 0 40px; list-style: none; }
  .flujo-v li { position: relative; padding: 7px 0; font-size: 13.5px; line-height: 1.3; min-height: 34px; display: flex; align-items: center; }
  .flujo-v li.h { color: var(--ink); font-weight: 500; }
  .flujo-v svg { position: absolute; left: 0; top: 0; width: 40px; height: 100%; overflow: visible; }
  .flujo-v .rail { fill: none; stroke: rgba(112,30,218,.35); stroke-width: 1.6; }
  .flujo-v .rail.loop { stroke-dasharray: 3 4; }
  .flujo-v .nd { fill: #fff; stroke: var(--violeta-500); stroke-width: 1.6; }
  .flujo-v .nd.h { stroke-dasharray: 3 3; }
  .flujo-v .nt { font: 600 10px var(--font-mono); fill: var(--violeta-500); text-anchor: middle; }
  .flujo-v .dot { fill: #fff; stroke: var(--violeta-500); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(112,30,218,.7)); }
  .flujo-v .h span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--violeta-500); margin-left: 8px; }

  /* Capacitaciones: planes como bandas, igual que el deck */
  .planes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  .plan-chip { appearance: none; border: 1px solid rgba(22,18,31,.12); background: rgba(255,255,255,.6); color: var(--ink); font: 500 13.5px var(--font-sans); padding: 9px 14px; border-radius: 999px; cursor: pointer; }
  .plan-chip.on { background: var(--violeta-500); color: #fff; border-color: var(--violeta-500); }
  .plan { display: none; padding: 14px; }
  .plan.on { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
  .plan .cab { flex: 0 0 210px; padding: 6px 8px; }
  .plan .cab .k2 { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
  .plan .cab .pn { font: 600 20px/1.15 var(--font-display); margin-top: 8px; display: inline-block; padding-bottom: 8px; border-bottom: 3px solid var(--violeta-500); }
  .plan .cab .pm { font: 500 13px var(--font-mono); margin-top: 10px; color: var(--suave); }
  .cd { flex: 1 1 120px; min-width: 0; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; background: rgba(255,255,255,.8); border: 1px solid rgba(22,18,31,.10); box-shadow: 0 6px 18px rgba(72,18,140,.06); }
  .cd .s { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--violeta-500); }
  .cd .tt { font: 600 15px/1.2 var(--font-display); margin-top: 6px; }
  .cd .tl { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; padding-top: 10px; }
  .cd .tl span { display: inline-flex; align-items: center; padding: 4px 6px; background: #fff; border: 1px solid rgba(22,18,31,.10); border-radius: 8px; }
  .cd .tl span img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; display: block; }
  .cd.res { background: rgba(112,30,218,.12); border-color: rgba(112,30,218,.36); }

  /* Clientes */
  .logos-fila { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: center; }
  .logos-fila span { font: 700 11px/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--suave); margin-right: 6px; }
  .logos-fila img { height: 24px; width: auto; max-width: 104px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: opacity .2s ease, filter .2s ease; }
  @media (hover: hover) and (pointer: fine) { .logos-fila img:hover { filter: none; opacity: 1; } }

  /* Formulario */
  .cierre { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  @media (max-width: 860px) { .cierre { grid-template-columns: 1fr; } }
  .cierre h2 { font-size: clamp(30px, 3.4vw, 50px); margin: 10px 0 0; max-width: 16ch; }
  .cierre .sub { color: var(--suave); font-size: 15.5px; line-height: 1.5; margin: 14px 0 0; max-width: 46ch; }
  .contacto { margin-top: 16px; font-size: 14.5px; color: var(--suave); line-height: 1.7; }
  .contacto a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(22,18,31,.25); }
  .form { display: grid; gap: 10px; padding: 22px; }
  .form label { font: 700 11px/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--suave); display: block; margin-bottom: 6px; }
  .form input, .form textarea { width: 100%; font: 400 14.5px var(--font-sans); color: var(--ink); padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(22,18,31,.16); background: rgba(255,255,255,.8); outline: none; }
  .form input:focus, .form textarea:focus { border-color: var(--violeta-500); box-shadow: 0 0 0 3px rgba(112,30,218,.15); }
  .form textarea { min-height: 84px; resize: vertical; }
  .form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 560px) { .form .dos { grid-template-columns: 1fr; } }
  .form button { appearance: none; border: 0; cursor: pointer; font: 500 15px var(--font-sans); margin-top: 2px; }
  .form .nota { margin: 0; font-size: 12.5px; color: var(--suave); }

  /* Botón fijo a la derecha */
  .cta-fijo { position: fixed; right: 0; top: 50%; z-index: 10; transform: translateY(-50%); writing-mode: vertical-rl; rotate: 180deg; background: var(--ink); color: #fff; text-decoration: none; font: 600 12px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; padding: 16px 12px; border-radius: 0 12px 12px 0; box-shadow: 0 10px 30px rgba(22,18,31,.25); transition: background .25s; }
  @media (hover: hover) and (pointer: fine) { .cta-fijo:hover { background: var(--violeta-500); } }
  @media (max-width: 760px) { .cta-fijo { top: auto; bottom: 16px; right: 16px; transform: none; rotate: 0deg; writing-mode: horizontal-tb; border-radius: 999px; padding: 14px 18px; } }

  .esp { height: clamp(28px, 4vw, 48px); }
  #servicios, #hablemos, .detalle, #como { scroll-margin-top: 76px; }
  .dibw { min-width: 0; }
  @media (max-width: 860px) { .dibw { overflow-x: auto; padding-bottom: 6px; } .dibw svg { min-width: 720px; } }
  footer { flex-wrap: wrap; gap: 8px; padding-top: 18px; }
  footer a { color: var(--suave); text-decoration: none; }
  @media (max-width: 760px) { .rev { opacity: 1; transform: none; transition: none; } }


  /* --- v4 (24 sep 2026): título a lo ancho, bloques con cabecera, flujos de íconos y rutas --- */
  .hero { min-height: 0; padding-top: 118px; padding-bottom: 34px; text-align: left; display: block; }
  .hero h1 { font-size: clamp(34px, 4.6vw, 66px); max-width: none; margin: 0; text-wrap: pretty; line-height: 1.02; }
  .hero h1 em { display: inline; }
  .hero .caja { display: block; }

  .cabeceras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; margin-bottom: 4px; }
  @media (max-width: 760px) { .cabeceras { display: none; } }
  .cabeceras h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 26px); margin: 0; padding: 12px 12px 8px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; }
  .cabeceras h3 i { font: 600 11px var(--font-mono); letter-spacing: .1em; color: var(--violeta-500); font-style: normal; }
  .serv .sobre h3 { display: none; }
  @media (max-width: 760px) { .serv .sobre h3 { display: block; } }
  .serv .mas { display: none; }
  .serv .pista { display: none; }
  .serv .foto { aspect-ratio: 16 / 8.2; }
  .serv::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: var(--violeta-500); transform: scaleX(0); transition: transform .25s var(--ease-out); }
  .serv.on::after { transform: scaleX(1); }
  .serv .foto { border-radius: 20px 20px 16px 16px; }
  .serv .velo { background: linear-gradient(180deg, rgba(10,15,28,.02) 0%, rgba(10,15,28,.25) 50%, rgba(10,15,28,.9) 100%); }
  .serv .kw span { font-size: 12px; padding: 6px 11px; }

  /* Detalle: cabecera con cifra grande */
  .detalle .intro { align-items: center; }
  .detalle .intro .num { font: 300 clamp(34px, 3.4vw, 52px)/1 'ArchivoWeb', var(--font-titular); font-stretch: 112%; letter-spacing: -.035em; color: var(--violeta-500); }
  .detalle .intro .num small { font: 400 13px var(--font-sans); color: var(--suave); letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; }

  /* Ejemplos como flujo de íconos */
  .ejemplo { padding: 20px 20px 22px; }
  .ejemplo .cifra { margin: 6px 0 0; }
  .ejemplo .que { font-size: 14.5px; color: var(--suave); margin: 2px 0 0; }
  .ejemplo .nom { display: none; }
  .flujo-i { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 22px; padding-top: 6px; }
  .flujo-i .linea { position: absolute; left: 24px; right: 24px; top: 30px; height: 2px; background: linear-gradient(90deg, rgba(112,30,218,.15), rgba(112,30,218,.45), rgba(112,30,218,.15)); border-radius: 2px; }
  .flujo-i .punto { position: absolute; top: 25px; left: 24px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--violeta-500); box-shadow: 0 0 0 4px rgba(112,30,218,.15), 0 0 12px rgba(112,30,218,.7); z-index: 2; }
  .flujo-i .nd { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 62px; text-align: center; }
  .flujo-i .ic { width: 48px; height: 48px; border-radius: 15px; background: #fff; border: 1px solid rgba(22,18,31,.12); box-shadow: 0 8px 22px rgba(72,18,140,.10); display: grid; place-items: center; transition: transform .35s, box-shadow .35s, border-color .35s; }
  .flujo-i .ic img { width: 26px; height: 26px; object-fit: contain; display: block; }
  .flujo-i .ic svg { width: 24px; height: 24px; stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .flujo-i .nd.h .ic { border: 2px dashed rgba(22,18,31,.4); background: rgba(255,255,255,.6); box-shadow: none; }
  .flujo-i .nd.h .ic svg { stroke: var(--violeta-500); }
  .flujo-i .nd.on .ic { transform: translateY(-4px) scale(1.06); border-color: var(--violeta-500); box-shadow: 0 12px 28px rgba(112,30,218,.25); }
  .flujo-i .nd span { font: 500 11.5px/1.2 var(--font-sans); color: var(--suave); }
  .flujo-i .nd.on span { color: var(--ink); }
  .flujo-i .vuelta { position: absolute; left: 24px; right: 24px; top: 30px; height: 72px; border: 1.5px dashed rgba(112,30,218,.4); border-top: 0; border-radius: 0 0 22px 22px; pointer-events: none; }
  .flujo-i .vuelta::after { content: "aprende"; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font: 600 9.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--violeta-500); background: rgba(236,235,242,.95); padding: 0 6px; }
  .flujo-i.loop { padding-bottom: 36px; }

  /* Capacitaciones como ruta */
  .ruta-w { padding: 18px 22px 20px; }
  .ruta-w .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
  .ruta-w .top h4 { font: 600 20px/1.15 var(--font-display); margin: 0; }
  .ruta-w .top .num { font: 300 34px/1 'ArchivoWeb', var(--font-titular); font-stretch: 112%; letter-spacing: -.035em; color: var(--violeta-500); }
  .ruta-w .top .num small { font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin-left: 6px; }
  .rutas .plan { display: none; }
  .rutas .plan.on { display: block; }
  .ruta-sc { overflow-x: auto; padding-bottom: 4px; }
  .ruta { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; min-width: 700px; padding-top: 10px; }
  .ruta .linea { position: absolute; left: 8%; right: 8%; top: 27px; height: 2px; background: rgba(112,30,218,.28); border-radius: 2px; }
  .ruta .punto { position: absolute; top: 22px; left: 8%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--violeta-500); box-shadow: 0 0 0 4px rgba(112,30,218,.15), 0 0 12px rgba(112,30,218,.7); z-index: 2; }
  .ruta .st { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .ruta .st .c { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--violeta-500); display: grid; place-items: center; font: 600 10.5px var(--font-mono); color: var(--violeta-500); transition: transform .35s, background .35s, color .35s; }
  .ruta .st.res .c { background: var(--violeta-500); color: #fff; }
  .ruta .st.on .c { transform: scale(1.12); box-shadow: 0 8px 20px rgba(112,30,218,.3); }
  .ruta .st .s { font: 600 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
  .ruta .st .t { font: 500 13px/1.25 var(--font-sans); color: var(--ink); max-width: 15ch; }
  .ruta .st .tl { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
  .ruta .st .tl img { width: 18px; height: 18px; object-fit: contain; background: #fff; border: 1px solid rgba(22,18,31,.1); border-radius: 6px; padding: 2px; }
  .frase-cap { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; margin: 4px 0 0; max-width: 34ch; }

  /* --- pulido (8 oct 2026, skill emil-design-eng): respuesta al toque, transiciones interrumpibles, escalonado, señales por transform --- */
  /* Todo lo que se presiona responde */
  .boton, .plan-chip, .cta-fijo, .serv { transition: transform .16s var(--ease-out), background-color .15s ease, color .15s ease, border-color .15s ease; }
  .boton:active, .plan-chip:active { transform: scale(.97); }
  .serv:active { transform: scale(.99); }
  .cta-fijo:active { transform: translateY(-50%) scale(.97); }
  @media (max-width: 760px) { .cta-fijo:active { transform: scale(.97); } }
  @media (hover: hover) and (pointer: fine) {
    .boton:not(.sec):hover { background: var(--violeta-600, #5a14b8); }
    .plan-chip:not(.on):hover { background: rgba(255,255,255,.95); border-color: rgba(112,30,218,.35); }
  }
  .boton:focus-visible, .plan-chip:focus-visible, .cta-fijo:focus-visible, .nav a:focus-visible { outline: 3px solid var(--violeta-500); outline-offset: 3px; }
  .form input, .form textarea { transition: border-color .15s ease, box-shadow .15s ease; }

  /* Detalle del servicio: entra en 220 ms, sale en 150 ms, y se puede interrumpir al cambiar de bloque */
  .detalles { display: grid; }
  .detalles > .detalle { grid-area: 1 / 1; }
  .detalle { opacity: 0; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, display .15s allow-discrete; }
  .detalle.on { opacity: 1; transform: none; transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), display .22s allow-discrete; }
  @starting-style { .detalle.on { opacity: 0; transform: translateY(8px); } }

  /* Entrada escalonada: 50 ms entre tarjetas y entre paradas */
  .detalle .ejemplo, .ruta .st { transition: opacity .32s var(--ease-out), transform .32s var(--ease-out); }
  @starting-style { .detalle.on .ejemplo, .plan.on .st { opacity: 0; transform: translateY(8px); } }
  .detalle.on .ejemplo:nth-child(2), .plan.on .st:nth-of-type(4) { transition-delay: 50ms; }
  .detalle.on .ejemplo:nth-child(3), .plan.on .st:nth-of-type(5) { transition-delay: 100ms; }
  .plan.on .st:nth-of-type(6) { transition-delay: 150ms; }
  .plan.on .st:nth-of-type(7) { transition-delay: 200ms; }
  .plan.on .st:nth-of-type(8) { transition-delay: 250ms; }

  /* La señal se mueve con transform (no con left) y la enciende la propia animación */
  .flujo-i .punto, .ruta .punto { left: 0; margin-left: 0; opacity: 0; will-change: transform, opacity; }
  .flujo-i .ic, .ruta .st .c { transition: none; }

  /* Menos movimiento: se conservan los fundidos, se quita el desplazamiento y las señales */
  @media (prefers-reduced-motion: reduce) {
    .dib .via, .dib .nodo { animation: none; opacity: 1; stroke-dashoffset: 0; }
    .dib .via { opacity: .55; }
    .rev, .detalle, .detalle .ejemplo, .ruta .st, .dib .nodo { transform: none !important; }
    .boton:active, .plan-chip:active, .serv:active { transform: none; }
    .serv .foto img { transition: filter .3s ease; transform: none !important; }
  }

  /* --- v5 (8 oct 2026): título Servicios, bloques que llevan a su subpágina, menú desplegable y subpáginas --- */
  .tit-sec { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; flex-wrap: wrap; }
  .tit-sec h2 { font-size: clamp(30px, 3.4vw, 48px); margin: 0; }
  .tit-sec p { margin: 0; color: var(--suave); font-size: 15px; }

  a.serv { text-decoration: none; }
  .serv .sobre { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
  .serv .ir { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 14px var(--font-sans); box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: background-color .15s ease, color .15s ease; }
  .serv .ir svg, .flecha svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .serv:hover .ir { background: var(--violeta-500); color: #fff; }
    .serv:hover .ir svg, .flecha:hover svg { transform: translateX(3px); }
    .serv:hover::after { transform: scaleX(1); }
  }
  @media (max-width: 1000px) { .serv .sobre { flex-direction: column; align-items: flex-start; } }

  /* Menú Servicios */
  .nav a.marca { display: block !important; padding: 0; color: var(--ink); background: none !important; }
  .menu { position: relative; }
  .menu > button { appearance: none; border: 0; background: none; font: inherit; color: var(--suave); padding: 6px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color .15s ease, background-color .15s ease; }
  .menu > button svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
  .menu.abierto > button { color: var(--ink); background: rgba(255,255,255,.5); }
  .menu.abierto > button svg { transform: rotate(180deg); }
  .menu > button:focus-visible { outline: 3px solid var(--violeta-500); outline-offset: 3px; }
  .menu .lista { position: absolute; right: 0; top: calc(100% + 8px); width: min(310px, calc(100vw - 32px)); padding: 8px; border-radius: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 20px 50px rgba(72,18,140,.18); display: grid; gap: 2px; transform-origin: top right; opacity: 0; transform: scale(.97) translateY(-4px); visibility: hidden; transition: opacity .12s ease, transform .12s ease, visibility 0s .12s; }
  .menu.abierto .lista { opacity: 1; transform: none; visibility: visible; transition: opacity .18s ease, transform .18s var(--ease-out); }
  .menu .lista::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .nav .menu .lista a { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; padding: 10px 12px; border-radius: 11px; white-space: normal; color: var(--ink); }
  .menu .lista a i { font: 600 11px var(--font-mono); font-style: normal; color: var(--violeta-500); grid-row: span 2; padding-top: 4px; }
  .menu .lista a b { font: 600 15px var(--font-display); letter-spacing: 0; margin: 0; }
  .menu .lista a small { grid-column: 2; color: var(--suave); font-size: 12.5px; line-height: 1.35; }
  .menu .lista a[aria-current] { background: rgba(112,30,218,.08); }

  /* Subpáginas */
  .sub-hero { padding-top: 104px; padding-bottom: 30px; }
  .sub-hero .caja { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 52px); align-items: center; }
  @media (max-width: 860px) { .sub-hero .caja { grid-template-columns: 1fr; } }
  .volver { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--suave); text-decoration: none; margin-bottom: 16px; }
  .volver svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { .volver:hover { color: var(--ink); } .volver:hover svg { transform: translateX(-3px); } }
  .sub-hero h1 { font-size: clamp(36px, 4.6vw, 68px); margin: 10px 0 0; text-wrap: balance; }
  .sub-hero .lead { color: var(--suave); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; margin: 16px 0 0; max-width: 52ch; }
  .sub-hero .chips { margin-top: 18px; }
  .sub-hero .boton { margin-top: 22px; }
  .sub-hero .foto { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10.5; border: 1px solid rgba(255,255,255,.85); box-shadow: 0 30px 70px rgba(72,18,140,.22); background: #0a0f1c; }
  .sub-hero .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sub-tit { margin: 0 0 14px; }
  .sub-tit h2 { font-size: clamp(26px, 2.8vw, 40px); margin: 8px 0 0; }
  .sub-tit p { color: var(--suave); font-size: 15.5px; line-height: 1.5; margin: 8px 0 0; max-width: 60ch; }
  .pila { display: grid; gap: 14px; }

  /* Un caso de desarrollo: título grande, cifra, una frase y el flujo */
  .caso { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(18px, 3vw, 44px); align-items: center; padding: 28px 30px; }
  @media (max-width: 960px) { .caso { grid-template-columns: 1fr; padding: 22px 20px; } }
  .caso h3 { font: 600 clamp(28px, 2.8vw, 40px)/1.08 var(--font-display); letter-spacing: -.01em; margin: 8px 0 0; }
  .caso .cifra { margin: 14px 0 0; font: 300 clamp(26px, 2.3vw, 34px)/1.05 'ArchivoWeb', var(--font-titular); font-stretch: 112%; letter-spacing: -.035em; }
  .caso .cifra s { color: var(--suave); text-decoration-color: rgba(91,84,112,.6); font-size: .72em; }
  .caso .cifra em { font-style: normal; color: var(--violeta-500); }
  .caso .que { font-size: 14px; color: var(--suave); margin: 2px 0 0; }
  .caso .desc { color: var(--suave); font-size: 15px; line-height: 1.55; margin: 14px 0 0; max-width: 44ch; }
  .caso .lado { min-width: 0; }
  .flujo-sc { overflow-x: auto; padding: 4px 2px 8px; }
  .flujo-i.g { margin-top: 12px; min-width: 580px; }
  .flujo-i.g .nd { width: 112px; gap: 9px; }
  .flujo-i.g .nd span { font-size: 12.5px; line-height: 1.3; color: var(--ink); }
  .flujo-i.g .ic { width: 56px; height: 56px; border-radius: 17px; }
  .flujo-i.g .ic svg { width: 27px; height: 27px; }
  .flujo-i.g .ic img { width: 30px; height: 30px; }
  .flujo-i.g .linea { top: 34px; left: 56px; right: 56px; }
  .flujo-i.g .punto { top: 28px; }
  .flujo-i.g.loop { padding-top: 44px; padding-bottom: 0; }
  .flujo-i.g.loop .linea { top: 72px; }
  .flujo-i.g.loop .punto { top: 66px; }
  .flujo-i.g .vuelta { top: 14px; height: 30px; left: calc(56px + (100% - 112px) / 4); right: 56px; border: 1.5px dashed rgba(112,30,218,.45); border-bottom: 0; border-radius: 20px 20px 0 0; }
  .flujo-i.g .vuelta::after { content: "aprende de cada respuesta"; bottom: auto; top: -8px; background: rgba(243,241,250,1); }

  /* Un plan de capacitación completo */
  .plan-b { padding: 22px 26px 22px; }
  .plan-b .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
  .plan-b h3 { font: 600 clamp(22px, 2.1vw, 28px)/1.12 var(--font-display); margin: 8px 0 0; }
  .plan-b .num { font: 300 clamp(30px, 2.8vw, 40px)/1 'ArchivoWeb', var(--font-titular); font-stretch: 112%; letter-spacing: -.035em; color: var(--violeta-500); }
  .plan-b .num small { font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin: 0 10px 0 6px; }

  /* Cierre de subpágina */
  .cierre-sub { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 24px 28px; }
  .cierre-sub p { margin: 0; font: 600 clamp(19px, 1.8vw, 24px)/1.25 var(--font-display); color: var(--ink); max-width: 34ch; }
  .cierre-sub .boton { margin-top: 0; }
  .flecha { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; margin-left: 18px; }
  @media (max-width: 560px) { .flecha { margin-left: 0; margin-top: 12px; } }

  /* Ajustes tras revisar capturas (8 oct 2026) */
  a.serv { line-height: 1.25; }
  .serv .kw span, .serv .ir { line-height: 1.2; }
  @media (max-width: 760px) {
    /* En teléfono el contenido del bloque define su alto, así el título no se corta */
    .serv .foto { aspect-ratio: auto; }
    .serv .foto img { position: absolute; inset: 0; }
    .serv .sobre { position: relative; padding-top: 120px; }
    .serv .sobre h3 { margin-top: 0; }
    /* El menú ocupa el ancho de la pantalla en vez de salirse por la izquierda */
    .menu .lista { position: fixed; left: 16px; right: 16px; top: 54px; width: auto; transform-origin: top center; }
  }
  .serv .sobre h3 { color: #fff; }