/* M2 · estilos comunes de la web (landing, módulos y aviso legal)
   Marca del 1-nov-2026: base blanca y gris metálico, un solo acento (azul acero #3E5C76) y Geist en 400 y 500.
   Contraste (WCAG 2), calculado:
     · Carbón #2B2B2B: 14,4 sobre blanco; Hierro #565656: 7,34 sobre blanco y 6,44 sobre Bruma #F0F0F0;
     · el acero #3E5C76: 7,01 sobre blanco, 6,24 sobre su tinte; el blanco sobre el acero, 7,01;
     · sobre el metal (lo más oscuro que queda detrás, calculado punto a punto a 1440 y a 390, es #D7D7D7):
       Hierro 5,11, Carbón 9,86 y acero 4,88; Niebla y Plata, nunca como texto sobre el metal;
     · en el menú de cristal de la app dibujada (blanco al 36 % sobre el metal, peor caso #DCDCDC): Carbón 10,3 y Hierro 5,35;
     · en el cristal de la cabecera (blanco al 72 %, peor caso con negro detrás = #BABABA): Carbón 7,29;
       en el mega menú (blanco al 86 %, peor caso #DDDDDD): Hierro 5,40 y acero 5,16; el menú del móvil tapa toda
       la página y va al 94 % (peor caso #F0F0F0): Hierro 6,44;
     · rojo #B42318 sobre #FDECEA: 5,75 (solo errores y vencidos); ámbar #B45309 sobre #FDF2E3: 4,54; verde #15803D sobre #E8F6EE: 4,50.
   Los verdes y el ámbar de estado (--bien, --aviso y el ámbar #E9A23B de la cobertura) se quedan como estaban. */
:root{
  color-scheme: light;
  /* La escala neutra */
  --negro:#0A0A0A; --carbon:#2B2B2B; --hierro:#565656; --niebla:#848484; --plata:#B3B3B3; --nube:#E0E0E0; --bruma:#F0F0F0;
  --tinta:#0A0A0A; --texto:#2B2B2B; --texto2:#565656; --texto3:#565656;
  --borde:#E0E0E0; --borde2:#B3B3B3; --fondo:#FFFFFF; --gris:#F0F0F0;
  /* El acento único, el azul acero (los nombres --azul se quedan para no tocar cada regla) */
  --azul:#3E5C76; --azul-h:#324B61; --azul-s:rgba(62,92,118,.08); --azul-barra:rgba(62,92,118,.25);
  --bien:#15803D; --bien-s:#E8F6EE; --aviso:#B45309; --aviso-s:#FDF2E3; --mal:#B42318; --mal-s:#FDECEA;
  --sans:'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r:14px; --r2:20px;
  /* El metal: blanco arriba, gris plata abajo y un toque de acero. Nunca más oscuro que #D7D7D7 detrás de texto */
  --metal:radial-gradient(1100px 560px at 82% -12%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    radial-gradient(900px 520px at 6% 105%, rgba(179,179,179,.32) 0%, rgba(179,179,179,0) 62%),
    radial-gradient(760px 420px at 46% 108%, rgba(62,92,118,.07) 0%, rgba(62,92,118,0) 60%),
    linear-gradient(180deg, #F5F5F5 0%, #E8E8E8 100%);
  --sombra:0 1px 2px rgba(43,43,43,.05), 0 30px 70px -36px rgba(43,43,43,.45);
  --brillo:0 0 0 1px rgba(255,255,255,.9), 0 40px 90px -40px rgba(43,43,43,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
.env{max-width:1200px;margin:0 auto;padding:0 24px}
/* Geist solo en 400 y 500: también lo que el navegador pondría en negrita */
b,strong,th,h4,h5,h6{font-weight:500}
h1,h2,h3{margin:0;color:var(--tinta);font-weight:500;letter-spacing:-.025em}
h1{font-size:clamp(42px,6.2vw,76px);line-height:1.02;letter-spacing:-.045em;font-weight:500}
h2{font-size:clamp(30px,3.9vw,48px);line-height:1.07;letter-spacing:-.035em}
h3{font-size:20px;line-height:1.3;letter-spacing:-.015em}
.num{font-variant-numeric:tabular-nums}
.sobre{font-size:14px;font-weight:500;color:var(--azul);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.sobre::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.luz{color:var(--azul)}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:500;font-size:15.5px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;font-family:inherit}
.btn svg{width:16px;height:16px}
/* El principal, en acero con un brillo suave arriba; el secundario, blanco y opaco */
.btn-luz{color:#fff;background:var(--azul);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -10px rgba(43,43,43,.5)}
.btn-luz:hover{background:var(--azul-h)}
.btn-cristal{color:var(--texto);background:#fff;border-color:var(--borde);box-shadow:0 1px 2px rgba(43,43,43,.06)}
.btn-cristal:hover{border-color:var(--borde2)}
.btn-borde{color:var(--tinta);background:#fff;border-color:var(--borde2)}
.btn-borde:hover{border-color:var(--tinta)}
.btn-negro{color:#fff;background:var(--carbon)}
.btn-negro:hover{background:var(--negro)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--azul);outline-offset:3px}

/* Cabecera */
/* De cristal: flota sobre lo que pasa por debajo. Sin cristal (navegador o preferencia), blanca y opaca */
.cab{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(43,43,43,.06);transition:box-shadow .2s}
.cab.pegada{box-shadow:0 1px 0 rgba(43,43,43,.08),0 18px 40px -30px rgba(43,43,43,.5)}
/* La cabecera va encima del primer bloque de metal: el metal empieza detrás del cristal */
.cab + main > .metal:first-child{margin-top:-74px;padding-top:74px}
.cab .env{display:flex;align-items:center;gap:30px;height:74px}
.cab .logo img{height:44px;width:auto;display:block}
.cab nav.menu{display:flex;gap:6px;align-items:center}
.cab nav.menu > a,.cab nav.menu > .desp > button{color:#2B2B2B;text-decoration:none;font-size:15.5px;font-weight:500;padding:9px 12px;border-radius:10px;background:none;border:0;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cab nav.menu > a:hover,.cab nav.menu > .desp > button:hover,.cab nav.menu > .desp.abierto > button{color:var(--tinta);background:rgba(255,255,255,.7)}
.desp{position:relative}
.desp > button svg{width:14px;height:14px;transition:transform .2s}
.desp.abierto > button svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 12px);left:-12px;width:760px;background:#fff;border:1px solid rgba(255,255,255,.75);border-radius:20px;box-shadow:0 40px 90px -40px rgba(43,43,43,.55),0 0 0 1px rgba(43,43,43,.06),inset 0 1px 0 rgba(255,255,255,.95);padding:14px;display:none;grid-template-columns:1fr 1fr;gap:4px}
.desp.abierto .mega{display:grid}
.mega a{display:flex;gap:14px;align-items:flex-start;padding:13px 14px;border-radius:14px;text-decoration:none;color:var(--texto)}
.mega a:hover{background:rgba(255,255,255,.75)}
.mega .ic{width:38px;height:38px;border-radius:11px;background:var(--azul-s);color:var(--azul);display:grid;place-items:center;flex:none}
.mega .ic svg{width:19px;height:19px}
.mega b{display:block;font-weight:500;color:var(--tinta);font-size:15px}
.mega small{display:block;color:var(--texto2);font-size:13.5px;line-height:1.4;margin-top:2px}
.mega .todos{grid-column:1/-1;justify-content:center;font-weight:500;color:var(--azul);border-top:1px solid var(--borde);border-radius:0 0 12px 12px;margin-top:4px}
.cab .der{margin-left:auto;display:flex;align-items:center;gap:6px}
.cab .der .acc{color:#2B2B2B;text-decoration:none;font-weight:500;font-size:15.5px;padding:9px 12px;border-radius:10px}
.cab .der .acc:hover{color:var(--tinta);background:rgba(255,255,255,.7)}
.cab .btn{min-height:44px;padding:0 20px;font-size:15px}
.abrir-menu{display:none;margin-left:auto;background:#fff;border:1px solid var(--borde);color:var(--texto);border-radius:12px;height:44px;width:44px;align-items:center;justify-content:center;cursor:pointer}
.abrir-menu svg{width:20px;height:20px}
.menu-movil{display:none}

/* Bloques de metal (antes oscuros): blanco y gris metálico, el texto en Carbón y Hierro */
.metal{position:relative;background:var(--metal);color:var(--texto2);overflow:hidden;isolation:isolate}
.metal h1,.metal h2,.metal h3{color:var(--tinta)}
.metal .sobre{color:var(--azul)}
/* Un filo de luz arriba y una trama muy fina, como el metal cepillado */
.metal::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 2px)}
.metal::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(43,43,43,.07) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 20%,#000,transparent)}

/* Héroe */
.hero{padding:88px 0 0;text-align:center}
.hero .chapa{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--texto);background:#fff;border:1px solid var(--borde);border-radius:999px;padding:7px 16px 7px 10px;box-shadow:0 1px 2px rgba(43,43,43,.06)}
.hero .chapa i{width:8px;height:8px;border-radius:50%;background:var(--azul)}
.hero h1{max-width:940px;margin:28px auto 0}
.hero .intro{max-width:680px;margin:26px auto 0;font-size:19.5px;color:#565656;line-height:1.5}
.hero .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.hero .nota{margin-top:16px;font-size:13.5px;color:#565656}
.escena{position:relative;margin:70px auto 0;max-width:1120px}
.orbita{position:absolute;left:50%;top:-150px;width:1400px;height:700px;transform:translateX(-50%);pointer-events:none;z-index:0;opacity:.95}
.pantalla{position:relative;z-index:1;border-radius:16px 16px 0 0;overflow:hidden;background:#FFFFFF;box-shadow:var(--brillo);border:1px solid var(--borde);border-bottom:0}
.pantalla .barra-v{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#F0F0F0;border-bottom:1px solid var(--borde)}
.pantalla .barra-v i{width:10px;height:10px;border-radius:50%;background:#B3B3B3}
.pantalla .barra-v span{margin-left:14px;font-size:12px;color:#565656}
.pantalla img{display:block;width:100%;height:auto}

/* Marco de captura (secciones claras) */
.marco{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--borde);box-shadow:0 1px 2px rgba(10,10,10,.04),0 24px 60px -28px rgba(10,10,10,.28)}
.marco img{display:block;width:100%;height:auto}
.marco.oscura{border-color:var(--borde);box-shadow:var(--brillo)}
.telefono{width:300px;max-width:100%;margin:0 auto;border-radius:44px;padding:10px;background:var(--carbon);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 70px -25px rgba(43,43,43,.55)}
.telefono img{display:block;width:100%;height:auto;border-radius:34px}

/* Clientes */
.clientes{padding:60px 0 30px}
.clientes p{text-align:center;font-size:15px;color:var(--texto2);margin-bottom:28px}
.cinta{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pista{display:flex;align-items:center;width:max-content;animation:pasar 40s linear infinite}
.cinta:hover .pista{animation-play-state:paused}
.pista img{height:50px;width:156px;object-fit:contain;margin:0 38px}
.pista img.alto{height:66px;width:110px}
@keyframes pasar{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.pista .copia{display:none}}

/* Secciones */
.sec{padding:110px 0}
.sec.gris{background:var(--gris)}
.cabeza{max-width:720px}
.cabeza.centro{margin:0 auto;text-align:center}
.cabeza p{font-size:18.5px;color:var(--texto2);margin-top:18px}
.metal .cabeza p{color:var(--texto2)}

/* Escaparate del sistema de ventas */
.escaparate{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px;margin-top:56px;align-items:start}
.pestanas{display:grid;gap:10px}
.pestana{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:16px;padding:18px 20px;cursor:pointer;font-family:inherit;color:var(--texto);transition:border-color .2s,box-shadow .2s}
.pestana b{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--tinta)}
.pestana b em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--azul);background:var(--azul-s);border-radius:999px;padding:2px 9px}
.pestana span{display:none;margin-top:8px;color:var(--texto2);font-size:15px}
.pestana.activa{border-color:transparent;box-shadow:0 0 0 2px var(--azul),0 16px 40px -18px rgba(43,43,43,.35)}
.pestana.activa span{display:block}
.vistas{position:relative}
.vista{display:none}
.vista.activa{display:block}
.vista .pie-v{margin-top:14px;font-size:14px;color:var(--texto2)}

/* Tarjetas de módulos */
.rejilla-mod{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:56px}
.rejilla-mod .tmod{grid-column:span 2}
.rejilla-mod .tmod:nth-child(-n+4){grid-column:span 3}
.tmod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borde);border-radius:22px;overflow:hidden;text-decoration:none;color:var(--texto);transition:transform .2s,box-shadow .2s,border-color .2s}
.tmod:hover{transform:translateY(-3px);border-color:#B3B3B3;box-shadow:0 24px 50px -24px rgba(43,43,43,.4)}
.tmod .img{aspect-ratio:16/10;overflow:hidden;background:var(--gris);border-bottom:1px solid var(--borde)}
.tmod .img img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.tmod .txt{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.tmod .txt h3{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tmod .txt h3 span{width:32px;height:32px;border-radius:50%;border:1px solid var(--borde);display:grid;place-items:center;flex:none;transition:background .2s,color .2s,border-color .2s}
.tmod:hover .txt h3 span{background:var(--azul);border-color:var(--azul);color:#fff}
.tmod .txt h3 svg{width:15px;height:15px}
.tmod .txt p{color:var(--texto2);font-size:15px}

/* Órbita: un solo sistema */
.orbe{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.diagrama{position:relative;aspect-ratio:1;max-width:520px;margin-left:auto;width:100%}
.diagrama .anillo{position:absolute;inset:9%;border-radius:50%;border:1.5px dashed #B3B3B3}
.diagrama .anillo.dos{inset:27%;border-style:solid;border-color:#E0E0E0}
.diagrama .centro{position:absolute;left:50%;top:50%;width:26%;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 30px rgba(43,43,43,.3))}
.diagrama .nodo{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--borde);border-radius:999px;padding:9px 16px;font-weight:500;font-size:14.5px;color:var(--tinta);box-shadow:0 10px 24px -14px rgba(10,10,10,.35);white-space:nowrap;display:flex;align-items:center;gap:8px}
.diagrama .nodo i{width:8px;height:8px;border-radius:50%;background:var(--azul)}
.lista-pasos{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px;counter-reset:p}
.lista-pasos li{display:flex;gap:14px;align-items:baseline;color:var(--texto2)}
.lista-pasos li b{color:var(--tinta);font-weight:500}
.lista-pasos li::before{counter-increment:p;content:counter(p);flex:none;width:26px;height:26px;border-radius:50%;background:var(--azul-s);color:var(--azul);font-weight:500;font-size:13px;display:grid;place-items:center;transform:translateY(-2px)}

/* Bloque de metal con captura */
.banda{margin:0 16px;border-radius:32px;padding:100px 0}
.banda .dos{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.banda .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.banda ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.banda li{display:flex;gap:12px;color:#2B2B2B}
.banda li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--azul);margin-top:8px;flex:none}

/* Cómo trabajamos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px}
.paso{padding:0 32px;border-left:1px solid var(--borde)}
.paso:first-child{padding-left:0;border-left:0}
.paso small{display:block;color:var(--azul);font-weight:500;font-size:14px;margin-bottom:12px}
.paso h3{font-size:22px;margin-bottom:10px}
.paso p{color:var(--texto2)}

/* Llamada final */
.final{margin:0 16px 16px;border-radius:32px;padding:110px 0;text-align:center}
.final h2{max-width:780px;margin:0 auto}
.final p{max-width:580px;margin:20px auto 34px;font-size:18.5px;color:#565656}
.final .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Páginas de módulo */
.hero-mod{padding:80px 0 0}
.hero-mod .dos{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:end}
.hero-mod .txt{padding-bottom:70px}
.hero-mod .intro{font-size:19px;color:#565656;margin-top:22px;max-width:520px}
.hero-mod .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-mod .migas{font-size:14px;color:#565656;margin-bottom:22px}
.hero-mod .migas a{color:#2B2B2B;text-decoration:none}
.hero-mod .pantalla{border-radius:16px 16px 0 0}
.resuelve{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.resuelve div{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:24px}
.resuelve b{display:block;font-size:17px;color:var(--tinta);font-weight:500;margin-bottom:6px}
.resuelve span{color:var(--texto2);font-size:15px}
.fila-p{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--borde)}
.fila-p:first-of-type{border-top:0}
.fila-p.al-reves{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.fila-p.al-reves .txt{order:2}
.fila-p .txt small{display:block;font-size:13.5px;font-weight:500;color:var(--azul);margin-bottom:10px}
.fila-p .txt h3{font-size:26px;letter-spacing:-.025em;margin-bottom:12px}
.fila-p .txt p{color:var(--texto2);font-size:16.5px}
.fila-p .txt a{display:inline-flex;gap:6px;align-items:center;margin-top:18px;color:var(--azul);font-weight:500;text-decoration:none}
.fila-p .txt a svg{width:15px;height:15px}
.otros{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.otros a{text-decoration:none;border:1px solid var(--borde);border-radius:999px;padding:10px 16px;font-weight:500;font-size:14.5px;color:var(--texto);background:#fff}
.otros a:hover{border-color:var(--azul);color:var(--azul)}
.siguiente{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--gris);border:1px solid var(--borde);border-radius:22px;padding:28px 32px;text-decoration:none;color:var(--texto)}
.siguiente small{color:var(--texto2);font-size:14px}
.siguiente b{display:block;font-size:22px;color:var(--tinta);letter-spacing:-.02em;font-weight:500}
.siguiente span.f{width:48px;height:48px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 10px 24px -12px rgba(43,43,43,.5)}

/* Texto legal */
.legal-txt{max-width:760px;padding:80px 0 100px}
.legal-txt h1{font-size:44px;margin-bottom:26px}
.legal-txt h2{font-size:22px;margin:34px 0 10px}
.legal-txt p,.legal-txt li{color:var(--texto2);margin-bottom:10px}

/* Pie */
.pie{padding:60px 0 40px;font-size:14px;color:var(--texto2)}
.pie .arr{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;padding-bottom:30px;border-bottom:1px solid var(--borde)}
.pie .arr img{height:46px;width:auto}
.pie .arr p{margin-top:14px;max-width:300px}
.pie h4{margin:0 0 12px;font-size:14px;color:var(--tinta);font-weight:500}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie a{text-decoration:none}
.pie a:hover{color:var(--tinta)}
.pie .leg{padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--texto3)}

/* Adaptable */
@media (max-width:1080px){
  .cab nav.menu,.cab .der{display:none}
  .abrir-menu{display:inline-flex}
  .menu-movil.abierto{display:block;position:fixed;inset:74px 0 0 0;background:#fff;border-top:1px solid rgba(255,255,255,.75);z-index:49;overflow:auto;padding:16px 16px 40px}
  .menu-movil a{display:block;color:var(--texto);text-decoration:none;font-size:17px;font-weight:500;padding:14px 8px;border-bottom:1px solid rgba(43,43,43,.08)}
  .menu-movil .tit{color:var(--texto2);font-size:13px;font-weight:500;padding:18px 8px 6px}
  .menu-movil .btn{display:flex;margin-top:20px;border-bottom:0}
  .escaparate,.orbe,.banda .dos,.hero-mod .dos,.fila-p,.fila-p.al-reves{grid-template-columns:1fr}
  .fila-p.al-reves .txt{order:0}
  .hero-mod .txt{padding-bottom:10px}
  .rejilla-mod{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rejilla-mod .tmod,.rejilla-mod .tmod:nth-child(-n+4){grid-column:span 1}
  .diagrama{margin:0 auto}
  .pie .arr{grid-template-columns:1fr 1fr}
  .pie .arr > div:first-child{grid-column:1/-1}
}
@media (max-width:767px){
  .env{padding:0 16px}
  .cab .env{height:66px}
  .cab .logo img{height:38px}
  .cab + main > .metal:first-child{margin-top:-66px;padding-top:66px}
  .menu-movil.abierto{top:66px}
  .hero{padding-top:52px}
  .hero .intro{font-size:17.5px}
  .hero .chapa{font-size:13px;padding:6px 12px 6px 9px;gap:8px}
  .hero .acciones .btn,.banda .acciones .btn,.final .acciones .btn,.hero-mod .acciones .btn{width:100%}
  .escena{margin-top:44px}
  .orbita{width:900px;height:450px;top:-90px}
  .sec{padding:76px 0}
  .banda,.final{margin-left:8px;margin-right:8px;border-radius:24px;padding:72px 0}
  .rejilla-mod,.resuelve,.pasos{grid-template-columns:1fr}
  .paso,.paso:first-child{padding:0;border-left:0}
  .pasos{gap:30px}
  .diagrama .nodo{font-size:12.5px;padding:7px 11px}
  .fila-p{gap:28px;padding:40px 0}
  .fila-p .txt h3{font-size:22px}
  .hero-mod{padding-top:48px}
  .siguiente{padding:22px}
  .pie .arr{grid-template-columns:1fr}
}

/* ═══ Viñetas: la interfaz de M2 dibujada en código (nítida a cualquier tamaño) ═══ */
.v-esc{position:relative;border-radius:28px;padding:34px;background:var(--metal);border:1px solid var(--borde);overflow:hidden;isolation:isolate}
.v-esc::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(43,43,43,.07) 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:radial-gradient(80% 70% at 30% 20%,#000,transparent);mask-image:radial-gradient(80% 70% at 30% 20%,#000,transparent)}
.v-esc.azul{background:radial-gradient(500px 300px at 85% 0%,rgba(62,92,118,.08),transparent 70%),var(--metal)}
/* La app dibujada, como la demo: el fondo de metal, el menú de cristal encima y la hoja de trabajo opaca */
.v-app{position:relative;display:flex;background:radial-gradient(240px 260px at 0% 30%,#FFFFFF 0%,rgba(255,255,255,0) 70%),radial-gradient(220px 220px at 0% 85%,rgba(179,179,179,.55) 0%,rgba(179,179,179,0) 70%),linear-gradient(160deg,#F4F4F4 0%,#E4E4E4 100%);border-radius:16px;border:1px solid var(--borde);box-shadow:var(--brillo);overflow:hidden;font-size:13.5px;color:var(--texto);text-align:left;line-height:1.45}
.v-lat{width:58px;flex:none;margin:8px 0 8px 8px;border-radius:14px;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid rgba(255,255,255,.75);box-shadow:0 20px 40px -24px rgba(43,43,43,.5),inset 0 1px 0 rgba(255,255,255,.95)}
.v-lat img{width:30px;height:30px;margin-bottom:10px}
.v-lat i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--texto)}
.v-lat i svg{width:18px;height:18px}
.v-lat i.on{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55));color:var(--texto);box-shadow:0 10px 24px -12px rgba(43,43,43,.45),inset 0 1px 0 #fff}
.v-main{flex:1;min-width:0;padding:20px 22px 22px;margin:8px;background:#fff;border-radius:12px;border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(43,43,43,.05)}
.v-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.v-cab b{display:block;font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--tinta)}
.v-cab small{display:block;color:var(--texto3);font-size:12.5px;margin-top:2px}
/* Las pestañas de arriba de una vista, como las de la demo (Contabilidad: Resumen y Bancos, cobros y pagos) */
.v-pestanas{display:flex;gap:2px;margin:-6px 0 14px;border-bottom:1px solid #E0E0E0;overflow-x:auto;scrollbar-width:none}
.v-pestanas::-webkit-scrollbar{display:none}
.v-pestanas button{flex:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;padding:6px 10px 8px;font:inherit;font-size:12.5px;font-weight:500;color:var(--texto2);cursor:pointer;white-space:nowrap;border-radius:6px 6px 0 0}
.v-pestanas button:hover{color:var(--tinta);background:#F0F0F0}
.v-pestanas button.on{color:var(--azul);border-bottom-color:var(--azul)}
.v-pestanas button:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.v-bts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.v-bt{font-size:12.5px;font-weight:500;border:1px solid #E0E0E0;border-radius:9px;padding:6px 11px;background:#fff;color:var(--texto);white-space:nowrap}
.v-bt.az{background:var(--azul);border-color:var(--azul);color:#fff}
.v-kpis{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px;margin-bottom:12px}
.v-kpi{border:1px solid #E0E0E0;border-radius:12px;padding:12px 14px;background:#fff}
.v-kpi span{display:block;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--texto3)}
.v-kpi b{display:block;font-size:22px;font-weight:500;letter-spacing:-.03em;color:var(--tinta);margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.v-kpi small{display:block;font-size:12px;color:var(--texto2);margin-top:3px}
.v-kpi small.s{color:var(--bien);font-weight:500}.v-kpi small.m{color:var(--mal);font-weight:500}.v-kpi small.a{color:var(--aviso);font-weight:500}
.v-caja{border:1px solid #E0E0E0;border-radius:12px;padding:14px 16px;background:#fff}
.v-caja + .v-caja{margin-top:10px}
.v-caja .t{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:13.5px;color:var(--tinta);margin-bottom:12px}
.v-caja .t span{font-weight:500;font-size:12px;color:var(--texto3)}
.v-fila2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}
.v-fila2 > .v-caja + .v-caja{margin-top:0}   /* lado a lado: las dos cajas, a la misma altura */
.v-graf{display:flex;align-items:flex-end;gap:8px;height:130px;border-bottom:1px solid #F0F0F0;padding-top:4px}
.v-graf .c{flex:1;display:flex;gap:3px;align-items:flex-end;height:100%}
.v-graf .c i{flex:1;border-radius:5px 5px 1px 1px;background:rgba(62,92,118,.25)}
.v-graf .c i.p{background:var(--azul)}
.v-graf .c i.g{background:#B3B3B3}
.v-graf .c i.f{background:repeating-linear-gradient(45deg,rgba(62,92,118,.16) 0 4px,rgba(62,92,118,.05) 4px 8px)}
.v-eje{display:flex;gap:8px;margin-top:6px;font-size:11px;color:var(--texto3)}
.v-eje span{flex:1;text-align:center}
.v-ley{display:flex;gap:14px;font-size:12px;color:var(--texto2);margin-top:10px}
.v-ley span{display:inline-flex;align-items:center;gap:6px}
.v-ley span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--azul)}
.v-ley span.g::before{background:#B3B3B3}
.v-ley span.b::before{background:var(--aviso)}
.v-tab{width:100%;border-collapse:collapse;font-size:13px}
.v-tab th{text-align:left;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--texto3);padding:0 10px 9px 0;border-bottom:1px solid #F0F0F0;white-space:nowrap}
.v-tab td{padding:10px 10px 10px 0;border-bottom:1px solid #F0F0F0;vertical-align:middle}
.v-tab tr:last-child td{border-bottom:0}
.v-tab td b{font-weight:500;color:var(--tinta)}
.v-tab td small{display:block;color:var(--texto3);font-size:11.5px}
.v-tab .d{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.v-tab tr.sel td{background:rgba(62,92,118,.08)}
.v-tab tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--azul)}
.v-tab tr.av td{background:#FFF8EE}
.v-tab tr.av td:first-child{box-shadow:inset 3px 0 0 var(--aviso)}
.ch{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;border-radius:999px;padding:3px 9px;white-space:nowrap;background:#F0F0F0;color:var(--texto2)}
.ch.az{background:var(--azul-s);color:var(--azul)}.ch.ok{background:var(--bien-s);color:var(--bien)}.ch.av{background:var(--aviso-s);color:var(--aviso)}.ch.mal{background:var(--mal-s);color:#B42318}
.v-li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #F0F0F0}
.v-li:first-of-type{border-top:0;padding-top:2px}
.v-li .q{flex:1;min-width:0}
.v-li .q b{display:block;font-weight:500;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-li .q small{display:block;color:var(--texto3);font-size:12px}
.v-li .n{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tinta)}
.v-av{width:30px;height:30px;border-radius:50%;background:#F0F0F0;color:#2B2B2B;font-weight:500;font-size:11.5px;display:grid;place-items:center;flex:none}
.v-av.az{background:var(--azul-s);color:var(--azul)}
.v-barra{height:7px;border-radius:99px;background:#F0F0F0;overflow:hidden;margin-top:6px}
.v-barra i{display:block;height:100%;border-radius:99px;background:var(--azul)}
.v-dos{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;align-items:start}
.v-doc{background:#fff;border:1px solid #E0E0E0;border-radius:10px;padding:22px 24px;box-shadow:0 1px 2px rgba(10,10,10,.04)}
.v-doc .h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.v-doc .h img{height:30px}
.v-doc .h .tit{text-align:right}
.v-doc .h .tit b{display:block;font-size:20px;font-weight:500;letter-spacing:.06em;color:var(--tinta)}
.v-doc .h .tit small{color:var(--texto3);font-size:12px}
.v-doc .emi{font-size:11.5px;color:var(--texto2);line-height:1.5;margin-bottom:14px}
.v-doc .emi b{color:var(--tinta);font-size:12px}
.v-doc .cli{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.v-doc .cli div{border:1px solid #F0F0F0;border-radius:8px;padding:9px 11px;font-size:11.5px;color:var(--texto2);line-height:1.45}
.v-doc .cli div span{display:block;font-size:10px;font-weight:500;letter-spacing:.06em;color:var(--texto3);margin-bottom:3px}
.v-doc .cli div b{color:var(--tinta);font-size:12px}
.v-doc table{width:100%;border-collapse:collapse;font-size:12px}
.v-doc th{background:#F0F0F0;text-align:left;font-size:10px;letter-spacing:.06em;color:var(--texto3);padding:7px 8px;font-weight:500}
.v-doc td{padding:8px;border-bottom:1px solid #F0F0F0}
.v-doc td.d,.v-doc th.d{text-align:right;font-variant-numeric:tabular-nums}
.v-doc .tot{display:flex;justify-content:flex-end;margin-top:12px}
.v-doc .tot div{min-width:210px;font-size:12px;color:var(--texto2)}
.v-doc .tot p{display:flex;justify-content:space-between;padding:3px 0}
.v-doc .tot p.g{font-size:15px;font-weight:500;color:var(--tinta);border-top:1px solid #E0E0E0;margin-top:6px;padding-top:8px}
.v-doc .qr{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:10.5px;color:var(--texto3)}
.v-doc .qr svg{width:44px;height:44px}
.v-kv{display:grid;gap:9px;font-size:12.5px}
.v-kv p{display:flex;justify-content:space-between;gap:10px;color:var(--texto2)}
.v-kv p b{color:var(--tinta);font-weight:500;text-align:right}
.v-pest{display:flex;background:#F0F0F0;border-radius:10px;padding:3px;margin-bottom:14px}
.v-pest span{flex:1;text-align:center;font-size:12.5px;font-weight:500;padding:7px;border-radius:8px;color:var(--texto2)}
.v-pest span.on{background:var(--azul);color:#fff}
.v-movil{width:290px;max-width:100%;margin:0 auto;background:var(--carbon);border-radius:42px;padding:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 70px -30px rgba(43,43,43,.6)}
.v-movil .pan{background:#fff;border-radius:34px;overflow:hidden;font-size:13px;color:var(--texto);text-align:left;min-height:520px}
.v-movil .not{height:30px;display:flex;justify-content:center;align-items:center}
.v-movil .not i{width:90px;height:22px;border-radius:12px;background:var(--carbon)}
.v-movil .mc{padding:6px 18px 12px;border-bottom:1px solid #F0F0F0}
.v-movil .mc b{display:block;font-size:17px;font-weight:500;color:var(--tinta);letter-spacing:-.02em}
.v-movil .mc small{color:var(--texto3);font-size:12px}
.v-movil .mb{padding:12px 16px 18px}
.v-prod{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #F0F0F0}
.v-prod:first-child{border-top:0}
.v-prod .img{width:44px;height:44px;border-radius:10px;background:var(--azul-s);display:grid;place-items:center;color:var(--azul);flex:none;font-weight:500;font-size:12px}
.v-prod .q{flex:1;min-width:0}
.v-prod .q b{display:block;font-size:12.5px;font-weight:500;color:var(--tinta);line-height:1.3}
.v-prod .q small{color:var(--texto3);font-size:11.5px}
.v-prod .pre{text-align:right;font-weight:500;font-size:13px;color:var(--tinta);white-space:nowrap}
.v-prod .pre small{display:block;font-weight:500;color:var(--texto3);font-size:11px}
.v-cant{display:inline-flex;align-items:center;border:1px solid #E0E0E0;border-radius:9px;overflow:hidden;margin-top:6px}
.v-cant i{width:26px;height:26px;display:grid;place-items:center;font-style:normal;color:var(--azul);font-weight:500}
.v-cant span{min-width:28px;text-align:center;font-weight:500;font-size:12.5px}
.v-btg{display:block;text-align:center;background:var(--azul);color:#fff;font-weight:500;border-radius:12px;padding:12px;margin-top:14px;font-size:14px}
.v-btg.n{background:var(--carbon)}
.v-flota{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E0E0E0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500;color:var(--tinta);box-shadow:0 14px 30px -12px rgba(43,43,43,.35);white-space:nowrap}
.v-flota i{width:8px;height:8px;border-radius:50%;background:var(--bien)}
.v-flota i.az{background:var(--azul)}
.v-plano{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.v-plano i{aspect-ratio:1;border-radius:5px;background:#F0F0F0}
.v-plano i.a{background:rgba(62,92,118,.25)}.v-plano i.b{background:rgba(62,92,118,.55)}.v-plano i.c{background:var(--azul)}.v-plano i.x{background:#FDECEA;box-shadow:inset 0 0 0 1px rgba(180,35,24,.35)}
.v-burb{background:#F0F0F0;border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--texto)}
.v-burb.yo{background:var(--azul);color:#fff;border-radius:16px 16px 4px 16px;margin-left:auto}
.v-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11px;text-align:center}
.v-cal span{padding:6px 0;border-radius:7px;color:var(--texto2)}
.v-cal span.h{font-weight:500;color:var(--texto3)}
.v-cal span.v{background:var(--azul-s);color:var(--azul);font-weight:500}
.v-cal span.b{background:var(--aviso-s);color:var(--aviso);font-weight:500}
.v-cal span.f{background:#F0F0F0;color:#565656}
.v-org{display:flex;flex-direction:column;align-items:center;gap:14px}
.v-org .fila{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative}
.v-org .p{border:1px solid #E0E0E0;border-radius:12px;padding:9px 12px;background:#fff;text-align:center;min-width:120px;font-size:12px}
.v-org .p b{display:block;font-weight:500;color:var(--tinta);font-size:12.5px}
.v-org .p small{color:var(--texto3)}
.v-org .p.top{border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-s)}
.v-mini{transform-origin:top left}
.tmod .img.v{background:var(--metal);padding:18px 18px 0;display:flex;align-items:flex-end;overflow:hidden}
.tmod .img.v .v-app{border-radius:12px 12px 0 0;border-bottom:0;width:100%;height:100%;font-size:12px;box-shadow:0 10px 30px -18px rgba(43,43,43,.4)}
.tmod .img.v .v-main{padding:14px 16px}
@media (max-width:767px){
  .v-esc{padding:14px;border-radius:20px}
  .v-lat{display:none}
  .v-main{padding:14px}
  .v-kpis{--n:2 !important}
  .v-fila2,.v-dos{grid-template-columns:1fr}
  .v-opc{display:none}
  .v-flota{display:none}
  .v-doc{padding:14px}
  .v-doc .cli{grid-template-columns:1fr}
  .v-bts .v-bt:not(.az){display:none}
}
.v-cm{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}
.v-cinco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
/* La app que se puede usar desde la web */
.v-app.vivo{height:604px;max-width:1160px;margin:0 auto}
.v-app.vivo .v-lat{width:78px;padding:14px 6px;gap:2px;overflow-y:auto}
.v-app.vivo .v-lat button{width:66px;border:1px solid transparent;background:none;border-radius:12px;padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--texto);font-family:inherit;font-size:10.5px;font-weight:400;cursor:pointer;transition:background .15s,color .15s}
.v-app.vivo .v-lat button:hover{background:rgba(255,255,255,.55);color:var(--tinta)}
.v-app.vivo .v-lat button.on{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55));border-color:rgba(255,255,255,.95);color:var(--tinta);font-weight:500;box-shadow:0 10px 24px -12px rgba(43,43,43,.45),inset 0 1px 0 #fff}
.v-app.vivo .v-lat button:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.v-app.vivo .v-main{position:relative;overflow:hidden}
.v-app.vivo .v-main::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
.v-vista{display:none;animation:aparecer .25s ease}
.v-vista.on{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.v-vista{animation:none}}
.pista-app{margin-top:16px;font-size:14px;color:var(--texto2);display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap}
/* En el inicio, debajo de la narración y lejos de las tarjetas de las esquinas (1-nov-2026) */
.hero > .env > .escena > .relato{margin-top:30px}
.hero > .env > .escena > .pista-app{margin-top:30px;font-size:15px}
.pista-app a{color:var(--azul);text-decoration:none;font-weight:500}
.hero .escena .v-app{box-shadow:0 0 0 1px rgba(255,255,255,.9),0 40px 100px -40px rgba(43,43,43,.6)}
.mini-c{overflow:hidden;height:100%;position:relative}
.mini{width:520px;transform-origin:top left}
.tmod .img.v{aspect-ratio:16/10;background:var(--metal);padding:16px 16px 0;overflow:hidden;display:block}
.tmod .img.v .v-caja,.tmod .img.v .v-doc{box-shadow:0 10px 30px -18px rgba(43,43,43,.35)}
.tmod .img.v .v-movil{width:260px;margin:0 auto}
.fila-p .v-esc{min-height:0}
@media (max-width:1080px){.v-app.vivo{height:600px}}
@media (max-width:767px){
  .v-app.vivo{flex-direction:column;height:auto;max-height:none}
  .v-app.vivo .v-lat{display:flex;flex-direction:row;width:auto;overflow-x:auto;overflow-y:hidden;margin:8px 8px 0;padding:6px;gap:4px}
  .v-app.vivo .v-lat img{display:none}
  .v-app.vivo .v-lat button{flex:none;width:auto;min-width:72px;padding:7px 8px}
  .v-app.vivo .v-main::after{display:none}
  .v-cm{grid-template-columns:1fr}
  .v-cinco{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.v-tab td b{white-space:nowrap}
.v-tab tr.sel td:first-child,.v-tab tr.av td:first-child{padding-left:10px}
.v-prod .q small{display:block}
.v-movil .pan{min-height:470px}
.v-com{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.v-com .v-kpi b{font-size:17px}
@media (max-width:767px){.v-com{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Escaparate del sistema de ventas: pestañas arriba y la pantalla a todo el ancho */
.escaparate{display:block;margin-top:40px}
.escaparate .pestanas{display:flex;flex-wrap:wrap;gap:8px}
.escaparate .pestana{width:auto;border-radius:999px;padding:11px 18px;border:1px solid var(--borde2);background:#fff;box-shadow:none}
.escaparate .pestana b{font-size:15px;font-weight:500}
.escaparate .pestana:hover{border-color:var(--tinta)}
.escaparate .pestana.activa{background:var(--azul);border-color:var(--azul);box-shadow:none}
.escaparate .pestana.activa b{color:#fff}
.escaparate .vistas{margin-top:22px}
.escaparate .vista-txt{font-size:17px;color:var(--texto2);margin:0 0 18px;max-width:680px}
.v-par{display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:center;max-width:980px;margin:0 auto}
.mini{width:440px}
.v-caja{min-width:0}
@media (max-width:767px){
  .escaparate .pestanas{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .escaparate .pestana{flex:none}
  .v-par,.v-fila2,.v-dos,.v-cm{grid-template-columns:minmax(0,1fr)}
  .v-app.vivo .v-main{max-height:760px}
  .v-app.vivo .v-main::after{display:block}
}
.v-eje span{min-width:0;overflow:hidden}
@media (max-width:767px){.v-graf,.v-eje{gap:4px}.v-eje{font-size:9.5px}}
/* Cobertura de stock: lo que queda frente a lo que tarda el proveedor (la marca negra) */
.v-cob{position:relative;height:8px;border-radius:99px;background:#F0F0F0;margin:4px 0 4px;min-width:130px}
.v-cob i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--azul)}
.v-cob i.av{background:#E9A23B}
.v-cob i.mal{background:var(--mal)}
.v-cob b{position:absolute;top:-4px;width:2px;height:16px;border-radius:1px;background:var(--tinta)}
.v-cob-t{display:block;font-size:11.5px;color:var(--texto3);white-space:nowrap}
.v-tot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:12px;border-top:1px solid #F0F0F0;font-size:12.5px;color:var(--texto2)}
.v-tot b{color:var(--tinta);font-size:15px;white-space:nowrap}
.v-app.vivo{height:640px}
@media (max-width:1080px){.v-app.vivo{height:620px}}
@media (max-width:767px){.v-app.vivo{height:auto}.v-tab td b{white-space:normal}}
/* Mapa de módulos: tres grupos con su icono, sin imágenes */
.mapa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px;align-items:stretch}
.env > .mapa:first-child{margin-top:0}
.grupo{background:#fff;border:1px solid var(--borde);border-radius:24px;padding:26px 18px 12px}
.grupo-cab{display:flex;gap:14px;align-items:flex-start;padding:0 8px 18px;border-bottom:1px solid var(--borde);margin-bottom:6px}
.grupo-n{font-size:12.5px;font-weight:500;color:var(--azul);background:var(--azul-s);border-radius:8px;padding:5px 8px;line-height:1;margin-top:5px;font-variant-numeric:tabular-nums}
.grupo-cab h3{font-size:24px;letter-spacing:-.025em}
.grupo-cab p{font-size:14.5px;color:var(--texto2);margin-top:2px}
.mf{display:flex;align-items:center;gap:14px;padding:14px 10px;border-radius:14px;text-decoration:none;color:var(--texto);transition:background .15s}
.mf:hover{background:var(--gris)}
.mf-ic{width:46px;height:46px;border-radius:13px;background:var(--azul-s);color:var(--azul);display:grid;place-items:center;flex:none;transition:background .15s,color .15s}
.mf-ic svg{width:22px;height:22px}
.mf:hover .mf-ic{background:var(--azul);color:#fff}
.mf-t{flex:1;min-width:0}
.mf-t b{display:block;font-size:16.5px;font-weight:500;color:var(--tinta);letter-spacing:-.01em}
.mf-t small{display:block;font-size:14px;color:var(--texto2);line-height:1.4;margin-top:2px}
.mf-fl{color:#848484;flex:none;display:grid;transition:transform .15s,color .15s}
.mf-fl svg{width:18px;height:18px}
.mf:hover .mf-fl{color:var(--azul);transform:translateX(3px)}
@media (max-width:900px){.mapa{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.grupo{padding:20px 10px 8px}.mapa{margin-top:36px}}
/* VERI*FACTU */
.vf-lista{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.vf-lista li{padding-left:22px;position:relative;color:var(--texto2)}
.vf-lista li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--azul)}
.vf-lista b{color:var(--tinta);font-weight:500}
.vf-pila{position:relative;padding-bottom:40px}
.vf-pila .v-doc{max-width:520px}
.vf-flota{position:absolute;right:-6px;bottom:0;width:300px;box-shadow:0 24px 50px -20px rgba(43,43,43,.45);border-radius:12px}
.vf-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;margin-top:56px;text-align:left;align-items:start}
.vf-hero > div:last-child{display:grid;gap:12px}
.vf-hero .v-doc,.vf-hero .v-caja{box-shadow:0 30px 70px -30px rgba(43,43,43,.5)}
.vf-hero .v-caja + .v-caja{margin-top:0}
.vf-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.vf-c{background:#fff;border:1px solid var(--borde);border-radius:20px;padding:26px;display:grid;gap:10px}
.vf-c b{font-size:19px;color:var(--tinta);font-weight:500;letter-spacing:-.015em;margin-top:6px}
.vf-c span:last-child{color:var(--texto2)}
.vf-rej{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px}
.vf-f{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--borde);border-radius:18px;padding:20px}
.vf-f b{display:block;font-size:16.5px;color:var(--tinta);font-weight:500;letter-spacing:-.01em}
.vf-f small{display:block;color:var(--texto2);font-size:14.5px;line-height:1.45;margin-top:3px}
.vf-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:48px;counter-reset:p}
.vf-p{padding:0 24px 0 0;position:relative}
.vf-p + .vf-p{padding-left:24px;border-left:1px solid var(--borde)}
.vf-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;font-weight:500;font-size:14px;margin-bottom:16px;box-shadow:0 8px 20px -12px rgba(43,43,43,.5)}
.vf-p b{display:block;font-size:19px;color:var(--tinta);font-weight:500;letter-spacing:-.015em;margin-bottom:6px}
.vf-p span:last-child{color:var(--texto2);font-size:15px}
.vf-fechas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.vf-fechas div{background:#fff;border:1px solid var(--borde);border-radius:20px;padding:26px;box-shadow:0 1px 2px rgba(43,43,43,.05)}
.vf-fechas small{display:block;color:var(--azul);font-weight:500;font-size:15px;margin-bottom:8px}
.vf-fechas b{display:block;color:var(--tinta);font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.vf-nota{max-width:760px;margin-top:24px;color:#565656;font-size:16px}
.faqs{margin-top:36px;display:grid;gap:10px}
.faq{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:0 22px}
.faq summary{list-style:none;cursor:pointer;padding:20px 30px 20px 0;font-weight:500;font-size:17px;color:var(--tinta);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--azul)}
.faq[open] summary::after{content:"−"}
.faq p{color:var(--texto2);padding:0 0 20px;margin:0}
.faq summary:focus-visible{outline:3px solid var(--azul);outline-offset:4px;border-radius:6px}
@media (max-width:1080px){
  .vf-hero,.vf-tres{grid-template-columns:minmax(0,1fr)}
  .vf-rej{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-pasos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .vf-p:nth-child(3){padding-left:0;border-left:0}
  .sec .env.dos{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:767px){
  .vf-rej,.vf-pasos,.vf-fechas{grid-template-columns:minmax(0,1fr)}
  .vf-p,.vf-p + .vf-p{padding:0;border-left:0}
  .vf-flota{position:static;width:auto;margin-top:12px}
  .vf-pila{padding-bottom:0}
  .vf-fechas b{font-size:19px}
}
.v-doc,.v-caja,.v-movil .pan{color:var(--texto)}
.v-doc td.d{white-space:nowrap}
.vf-pila{display:grid;gap:12px;padding-bottom:0}
.v-qr{display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid #F0F0F0;font-size:12px;color:var(--texto3)}
.v-qr svg{width:50px;height:50px;flex:none}
/* Menos aire entre el carrusel de clientes y el sistema de ventas */
.clientes{padding:56px 0 0}
.clientes + .sec{padding-top:64px}
@media (max-width:767px){.clientes{padding-top:44px}.clientes + .sec{padding-top:48px}}

/* La app del inicio se puede pulsar: que se note (aviso encima y cursor que la enseña sola) */
.aviso-app{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;margin:0 auto 20px;padding:9px 18px 9px 14px;border-radius:999px;background:#FFFFFF;border:1px solid var(--borde);box-shadow:0 8px 24px -14px rgba(43,43,43,.45);color:var(--texto);font-size:14.5px;line-height:1.4}
.aviso-app b{color:var(--tinta);font-weight:500}
.aviso-app .movil{display:none}
.aviso-app .punto{flex:none;width:8px;height:8px;border-radius:50%;background:#3E5C76;animation:latido 1.8s ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(62,92,118,.7)}100%{box-shadow:0 0 0 10px rgba(62,92,118,0)}}
.pista-app{color:var(--texto2)}
.pista-app a{display:inline-flex;align-items:center;gap:6px}
.pista-app a svg{width:14px;height:14px}
.v-cursor{position:absolute;left:0;top:0;z-index:6;width:26px;height:26px;pointer-events:none;opacity:0;transition:transform .75s cubic-bezier(.45,.05,.25,1),opacity .3s}
.v-cursor.ve{opacity:1}
.v-cursor svg{display:block;width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(10,10,10,.35))}
.v-cursor i{position:absolute;left:-6px;top:-9px;width:22px;height:22px;border-radius:50%;background:rgba(62,92,118,.35);opacity:0}
.v-cursor.clic i{animation:clic .45s ease-out}
@keyframes clic{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.9);opacity:0}}
@media (max-width:767px){
  .aviso-app{border-radius:14px;font-size:13.5px;text-align:left;margin-bottom:16px}
  .aviso-app .ancho{display:none}.aviso-app .movil{display:inline}
  .v-cursor{display:none}
}
@media (prefers-reduced-motion:reduce){.aviso-app .punto{animation:none}.v-cursor{display:none}}

/* Marco de la app del inicio */
.marco-app{position:relative;z-index:1}
.aviso-app .baja{display:none}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (max-width:767px){
  .aviso-app .baja{display:inline-flex;flex:none;color:#3E5C76;animation:baja 1.1s ease-in-out infinite}
  .aviso-app .baja svg{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){.aviso-app .baja{animation:none!important}}

/* ═══ La app del inicio cuenta una historia (m2.js): narración, avisos y lo que cambia en cada paso ═══ */
.relato{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:14px;min-height:24px;margin:18px auto 0;font-size:14.5px;line-height:1.4;color:var(--texto2);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.relato.ve{opacity:1;visibility:visible}
.relato-puntos{display:inline-flex;align-items:center;gap:6px;flex:none}
.relato-puntos i{display:block;width:6px;height:6px;border-radius:99px;background:rgba(62,92,118,.25);transition:width .4s ease,background-color .4s}
.relato-puntos i.hecho{background:rgba(62,92,118,.6)}
.relato-puntos i.on{width:22px;background:#3E5C76}
.relato-t{transition:opacity .22s}
.relato-t.cambia{opacity:0}
.relato-t b{color:var(--tinta);font-weight:500}
/* Avisos pequeños dentro de la app, al terminar cada acción */
.v-toast{position:absolute;left:94px;right:0;bottom:22px;z-index:5;display:flex;justify-content:center;pointer-events:none}
.v-toast span{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #E0E0E0;border-radius:999px;padding:8px 16px 8px 9px;font-size:13px;font-weight:500;color:var(--tinta);white-space:nowrap;box-shadow:0 16px 36px -16px rgba(43,43,43,.45),0 1px 2px rgba(10,10,10,.05);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.v-toast span.ve{opacity:1;transform:none}
.v-toast i{width:20px;height:20px;border-radius:50%;background:var(--bien-s);color:var(--bien);display:grid;place-items:center;flex:none}
.v-toast i svg{width:12px;height:12px}
/* Novedad en un módulo: un punto azul en su botón de la barra, hasta que se abre */
.v-app.vivo .v-lat button{position:relative;transition:background .15s,color .15s,transform .14s}
.v-app.vivo .v-lat button.r-nuevo::after{content:"";position:absolute;top:6px;right:16px;width:8px;height:8px;border-radius:50%;background:var(--azul);box-shadow:0 0 0 2px #FFFFFF;animation:r-pop .3s ease-out}
/* El clic del cursor hunde un poco lo que pulsa */
.v-app.vivo .v-bt,.v-app.vivo .v-btg,.v-app.vivo .v-cant i{transition:transform .14s ease,background-color .3s,color .3s,border-color .3s}
.v-app.vivo .r-pulsa{transform:scale(.94)}
/* Hecho: en verde, como los demás estados */
.v-bt.az.hecho,.v-bt.hecho,.v-btg.hecho{background:var(--bien-s);border-color:var(--bien-s);color:var(--bien)}
.v-bt svg,.v-btg svg,.ch svg{vertical-align:-2px}
.v-btg svg{margin-left:3px}
/* Lo que entra o cambia: aparece sin saltos y se ilumina un momento en azul suave */
.r-num{display:inline-block}
.r-pop{animation:r-pop .35s ease-out}
@keyframes r-pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.r-s{color:var(--bien);font-weight:500}
.r-nueva,.r-brillo{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;border-radius:10px}
.r-nueva{overflow:hidden;animation:r-abre .55s cubic-bezier(.2,.7,.2,1) both,r-fondo 3.4s ease-out .35s both}
.r-brillo{animation:r-fondo 3.4s ease-out .35s both}
.v-doc tr.r-luz td{animation:r-fondo 3.4s ease-out .45s both}
.r-aparece{animation:r-entra .45s ease-out both}
@keyframes r-abre{from{max-height:0;opacity:0;padding-top:0;padding-bottom:0}to{max-height:90px;opacity:1}}
@keyframes r-fondo{0%{background-color:rgba(62,92,118,0)}14%,55%{background-color:rgba(62,92,118,.1)}100%{background-color:rgba(62,92,118,0)}}
@keyframes r-entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.v-app.vivo .v-barra i{transition:width .8s ease}
/* VERI*FACTU en el pedido, con su QR */
.r-vf-c{display:flex;gap:14px;align-items:center}
.r-vf-c > svg{width:58px;height:58px;flex:none;border:1px solid #F0F0F0;border-radius:8px;padding:4px;background:#fff}
.r-vf-c .v-kv{flex:1;min-width:0;gap:7px}
/* Conciliar: el importe y el botón, uno encima del otro */
.r-der{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.r-der .v-bt{padding:4px 10px;font-size:12px}
/* Firma en el móvil del repartidor */
.v-firma{position:relative;border:1.5px dashed #B3B3B3;border-radius:12px;height:86px;margin-top:10px;display:grid;place-items:center;color:var(--texto3);font-size:12px}
.v-firma span{transition:opacity .3s}
.v-firma.firmando span{opacity:0}
.r-firma{position:absolute;left:8px;top:4px;width:calc(100% - 16px);height:calc(100% - 8px)}
.r-firma path{fill:none;stroke:var(--tinta);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:767px){.relato{display:none}}
@media (prefers-reduced-motion:reduce){.relato{display:none}.r-nueva,.r-brillo,.r-pop,.r-aparece,.v-doc tr.r-luz td{animation:none}}
/* Ganchos del recorrido dentro de las cifras: que no hereden el estilo de la etiqueta de la tarjeta */
.v-kpi b span,.v-kpi small span{display:inline;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.v-kpi b .r-num{display:inline-block}
.v-kpi small span.r-s{color:var(--bien);font-weight:500}
.v-toast{bottom:12px}
/* La fila más antigua sale por abajo cuando entra una nueva arriba: la caja no crece */
.r-sale{overflow:hidden;animation:r-cierra .5s ease-in both}
@keyframes r-cierra{from{max-height:90px;opacity:1}to{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-width:0}}
@media (prefers-reduced-motion:reduce){.r-sale{animation:none}}

/* ═══ Cristal (1-nov-2026): solo en lo que flota (cabecera fija, mega menú, menú del móvil y el menú de la app
   dibujada). Valores del tablero «Cristal» del lienzo de marca; la cabecera y los menús llevan más blanco que el
   menú de la app porque flotan sobre cualquier cosa (contraste calculado arriba). Sin backdrop-filter, o si la
   persona pide menos transparencia, se quedan en blanco sólido (los valores por defecto de arriba). ═══ */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* El cristal de la cabecera va en su ::before: si fuera en la propia cabecera, el mega menú (que va dentro) solo
     podría difuminar la cabecera y no la página que tiene debajo */
  .cab{background:transparent}
  .cab::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%)}
  .mega{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%)}
  .menu-movil.abierto{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%)}
  .v-lat{background:rgba(255,255,255,.36);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%)}
}
@media (prefers-reduced-transparency:reduce){
  .cab,.cab::before,.mega,.menu-movil.abierto,.v-lat{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ═══ Movimiento (1-nov-2026): profundidad, luz y ritmo, siempre en calma ═══════════════════════════════════════
   Lo que se mueve lo enciende m2.js o una animación CSS que termina en el estado quieto: sin JS, la web se ve completa
   (la app del inicio queda inclinada y quieta). Con «reducir movimiento», nada se mueve (último bloque).
   Contraste de lo nuevo (WCAG 2), calculado:
     · tarjetas de cristal (blanco al 82 %; lo más oscuro que puede quedar detrás, la esfera #A8A8A8 → #EFEFEF):
       Carbón 12,31, Hierro 6,38 y acero 6,09;
     · tira de actividad sobre el metal (peor caso #D7D7D7): Carbón 9,84, Hierro 5,10 y la hora más nueva en acero, 4,87;
     · paso resaltado de la órbita (acero al 9 % sobre Bruma → #E0E3E5): Carbón 10,98 y Hierro 5,69; el número, blanco
       sobre acero, 7,01;
     · lo seleccionado en las piezas (acero al 8 % sobre blanco → #F0F2F4): Hierro 6,54 y Carbón 12,62;
     · relato de los módulos: el paso que no toca va en Hierro sobre blanco (7,34), nunca con opacidad. */

/* La entrada del héroe: solo CSS, termina quieto y a la vista aunque falle el JS */
@media (prefers-reduced-motion:no-preference){
  .hero > .env > *,.hero-mod .txt > *{animation:m2-sube .9s cubic-bezier(.2,.7,.2,1) both}
  .hero > .env > :nth-child(2),.hero-mod .txt > :nth-child(2){animation-delay:.06s}
  .hero > .env > :nth-child(3),.hero-mod .txt > :nth-child(3){animation-delay:.12s}
  .hero > .env > :nth-child(4),.hero-mod .txt > :nth-child(4){animation-delay:.18s}
  .hero > .env > :nth-child(5),.hero-mod .txt > :nth-child(5){animation-delay:.24s}
  .hero > .env > .escena,.hero-mod .escena{animation:m2-sube 1.1s cubic-bezier(.2,.7,.2,1) .3s both}
  .hero > .env > .directo{animation-delay:.7s}
}
@keyframes m2-sube{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}

/* Botones: un brillo que cruza al pasar el ratón (y una vez al cargar, en el principal del inicio) */
.btn-luz{overflow:hidden;isolation:isolate}
.btn-luz::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 68%);transform:translateX(-130%)}
.btn-luz:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -12px rgba(62,92,118,.85)}
.btn-cristal:hover{box-shadow:0 0 0 4px rgba(62,92,118,.07),0 1px 2px rgba(43,43,43,.06)}
@media (prefers-reduced-motion:no-preference){
  .btn-luz:hover::after{transform:translateX(130%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .hero .acciones .btn-luz::after{animation:m2-brillo 1.4s cubic-bezier(.2,.7,.2,1) 1.3s backwards}
}
@keyframes m2-brillo{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* ── Inicio: la app en 3D, la esfera de metal y las tarjetas de cristal ── */
@media (min-width:768px){.hero{padding-top:72px}.hero h1{margin-top:24px}}
.hero .escena{margin-top:104px}
.escena{perspective:1150px;perspective-origin:50% 0%}
.marco-app{transform-origin:50% 0%;transform-style:preserve-3d}
@media (prefers-reduced-motion:no-preference){
  .marco-app[data-inclina]{transform:rotateX(22deg) scale(.92)}
}
.esfera{position:absolute;left:50%;top:-84px;width:780px;height:780px;margin-left:-390px;border-radius:50%;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate;
  background:radial-gradient(closest-side,rgba(255,255,255,0) 89%,rgba(255,255,255,.75) 97.5%,rgba(255,255,255,0) 100%),
    radial-gradient(42% 34% at 37% 19%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 30%,rgba(255,255,255,0) 72%),
    radial-gradient(circle at 42% 30%,#F4F4F4 0%,#DADADA 16%,#BEBEBE 32%,#A3A3A3 50%,#8F8F8F 64%,#9A9A9A 80%,#B9B9B9 96%);
  box-shadow:inset 0 -60px 120px rgba(62,92,118,.22),inset 0 2px 1px rgba(255,255,255,.8);
  /* Solo se ve la cúpula, por encima de la app: la mitad de abajo se desvanece y nunca asoma bajo la app ni detrás de texto */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 44%,transparent 62%);mask-image:linear-gradient(180deg,#000 0%,#000 44%,transparent 62%)}
.esfera::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(18% 9% at 50% 9%,rgba(255,255,255,.95) 0,rgba(255,255,255,.45) 45%,rgba(255,255,255,0) 100%);transform:rotate(-30deg)}
.esfera::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:soft-light;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.55) 34deg,rgba(255,255,255,0) 76deg,rgba(43,43,43,.12) 130deg,rgba(255,255,255,0) 182deg,rgba(255,255,255,.45) 236deg,rgba(255,255,255,0) 282deg,rgba(43,43,43,.1) 322deg,rgba(255,255,255,0) 360deg)}
@media (prefers-reduced-motion:no-preference){
  .esfera::before{animation:m2-reflejo 18s ease-in-out infinite alternate}
  .esfera::after{animation:m2-gira 80s linear infinite}
}
@keyframes m2-reflejo{from{transform:rotate(-42deg)}to{transform:rotate(42deg)}}
@keyframes m2-gira{to{transform:rotate(360deg)}}
/* Tarjetas de cristal (flotan: van con cristal aunque estén sobre la app) */
.flota{position:absolute;z-index:4;pointer-events:none;transform:translate3d(0,0,var(--z,60px))}
.flota-c{display:flex;align-items:center;gap:11px;padding:10px 18px 10px 10px;border-radius:16px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(43,43,43,.06),0 24px 48px -22px rgba(43,43,43,.5);white-space:nowrap;text-align:left}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .flota-c{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
}
.flota-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(62,92,118,.1);color:var(--azul);flex:none}
.flota-ic svg{width:17px;height:17px}
.flota-t b{display:block;font-size:14px;font-weight:500;color:var(--tinta);letter-spacing:-.01em;line-height:1.3;font-variant-numeric:tabular-nums}
.flota-t small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--texto2);line-height:1.3;margin-top:1px}
.flota-t small i{width:6px;height:6px;border-radius:50%;background:var(--bien);flex:none}
.flota-t small i.az{background:var(--azul)}
/* Montadas sobre las cuatro esquinas de la app (1-nov-2026): solapan el marco y el borde de la barra o de la hoja,
   donde no hay nada que pulsar ni que leer; lo demás, fuera. Las de arriba se abren hacia arriba al bajar y las de
   abajo hacia abajo (m2.js), así que nunca se meten en la app. */
.flota.f1{left:-58px;top:-30px}
.flota.f2{right:-58px;top:-34px}
.flota.f3{left:-58px;bottom:-16px}
.flota.f4{right:-58px;bottom:-23px}
@media (prefers-reduced-motion:no-preference){
  .flota-c{animation:m2-flota-entra 1s cubic-bezier(.2,.7,.2,1) both,m2-flotar 7s ease-in-out infinite alternate}
  .f1 .flota-c{animation-delay:1s,2s}
  .f2 .flota-c{animation-delay:1.15s,2.15s;animation-duration:1s,8s}
  .f3 .flota-c{animation-delay:1.3s,2.3s;animation-duration:1s,6.5s}
  .f4 .flota-c{animation-delay:1.45s,2.45s;animation-duration:1s,7.5s}
}
@keyframes m2-flota-entra{from{opacity:0;transform:translate3d(0,14px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes m2-flotar{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-6px,0)}}
@media (max-width:1279px){.flota.f1,.flota.f3{left:-26px}.flota.f2,.flota.f4{right:-26px}}
@media (max-width:1080px){.flota.f1,.flota.f2{display:none}.flota.f3{left:-12px}.flota.f4{right:-12px}}

/* «En directo» (al pie del héroe): una tarjeta con los tres últimos movimientos de la distribuidora de ejemplo, el
   más nuevo arriba. Entra uno, se va el más viejo, y ninguno se corta: antes era una tira que dejaba el texto a medias
   por la izquierda (1-nov-2026). Opaca: no flota. */
.directo{position:relative;z-index:1;max-width:560px;margin:52px auto 64px;padding:14px 18px 8px;border-radius:18px;background:#FFFFFF;border:1px solid #E0E0E0;
  box-shadow:0 18px 40px -28px rgba(43,43,43,.45);font-size:13.5px;line-height:1.4;color:var(--texto2);text-align:left}
.directo-cab{display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #F0F0F0}
.directo-et{display:inline-flex;align-items:center;gap:9px;font-weight:500;color:var(--tinta)}
.directo-et i{width:7px;height:7px;border-radius:50%;background:var(--azul)}
.directo-de{color:var(--texto2)}
.directo-de::before{content:"·";margin-right:8px}
.directo-lista{list-style:none;margin:0;padding:0}
.directo-lista li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid #F0F0F0;color:var(--texto);overflow:hidden}
.directo-lista li:first-child{border-top:0}
.directo-lista time{flex:none;min-width:2.6em;font-variant-numeric:tabular-nums;color:var(--texto2)}
.directo-lista li:first-child time{color:var(--azul);font-weight:500}
.directo-lista li.entra{animation:m2-entra-evento .7s cubic-bezier(.2,.7,.2,1) both}
.directo-lista li.sale{animation:m2-sale-evento .7s ease both}
@keyframes m2-entra-evento{from{max-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateY(-6px)}to{max-height:64px;opacity:1;transform:none}}
@keyframes m2-sale-evento{from{max-height:64px;opacity:1}to{max-height:0;padding-top:0;padding-bottom:0;opacity:0}}
@media (prefers-reduced-motion:no-preference){.directo-et i{animation:latido 1.8s ease-out infinite}}
@media (prefers-reduced-motion:reduce){.directo-lista li.entra,.directo-lista li.sale{animation:none}}
@media (max-width:767px){
  .hero .escena{margin-top:52px}
  .esfera{width:300px;height:300px;margin-left:-150px;top:-44px}
  .flota{display:none}
  .marco-app[data-inclina]{transform:rotateX(9deg) scale(.97)}
  .directo{margin:32px auto 40px;font-size:13px}
}

/* ── «Todo gira alrededor del mismo dato»: el punto de luz recorre la órbita ── */
.diagrama .rayos{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.diagrama .rayos line{stroke:#C4C4C4;stroke-width:.3;stroke-dasharray:.6 1.4;stroke-linecap:round;transition:stroke .5s}
.diagrama .rayos line.on{stroke:#3E5C76;stroke-width:.42;animation:m2-rayo .9s linear infinite}
@keyframes m2-rayo{to{stroke-dashoffset:-2}}
.orb-giro{display:none;position:absolute;inset:9%;border-radius:50%;pointer-events:none}
.diagrama.vivo .orb-giro{display:block}
.orb-giro::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,rgba(62,92,118,0) 0deg,rgba(62,92,118,0) 284deg,rgba(62,92,118,.65) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
.orb-giro i{position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#3E5C76;box-shadow:0 0 0 4px rgba(62,92,118,.16),0 0 20px 6px rgba(62,92,118,.38)}
.orb-giro i::after{content:"";position:absolute;left:3px;top:2px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.8)}
.diagrama .nodo{z-index:1;transition:border-color .5s,box-shadow .5s,transform .5s cubic-bezier(.2,.7,.2,1)}
.diagrama .nodo i{transition:box-shadow .5s}
.diagrama .nodo.on{border-color:rgba(62,92,118,.6);box-shadow:0 0 0 4px rgba(62,92,118,.1),0 16px 32px -14px rgba(62,92,118,.65);transform:translate(-50%,-50%) scale(1.07)}
.diagrama .nodo.on i{box-shadow:0 0 0 4px rgba(62,92,118,.2)}
.lista-pasos{gap:4px}
.lista-pasos li{margin:0 -12px;padding:8px 12px;border-radius:12px;transition:background-color .5s}
.lista-pasos li::before{transition:background-color .5s,color .5s,box-shadow .5s}
.lista-pasos li.on{background:rgba(62,92,118,.09)}
.lista-pasos li.on::before{background:var(--azul);color:#fff;box-shadow:0 6px 14px -6px rgba(62,92,118,.8)}

/* Una pieza ancha no puede ensanchar la columna de su fila: en móvil la página se salía de lado (ya pasaba antes) */
.fila-p > *{min-width:0}

/* ── Páginas de módulo: «Por dentro», paso a paso ──
   Sin JS: filas (.fila-p). Con JS y pantalla ancha (.rm-vivo): el texto a la izquierda y la escena fija a la derecha */
.rm-n{font-variant-numeric:tabular-nums;margin-right:10px}
.rm-pista,.rm-escena{display:none}
.rm.rm-vivo{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:72px;align-items:start;margin-top:36px}
.rm-vivo .rm-pasos{position:relative;padding-left:34px}
.rm-vivo .rm-pista{display:block;position:absolute;left:0;top:8vh;bottom:8vh;width:2px;border-radius:2px;background:var(--borde);overflow:hidden}
.rm-vivo .rm-barra{display:block;width:100%;height:100%;background:var(--azul);transform-origin:50% 0;transform:scaleY(0)}
.rm-vivo .rm-paso{display:flex;align-items:center;min-height:74vh;padding:0;border:0}
.rm-vivo .rm-pieza{display:none}
.rm-vivo .rm-paso .txt{max-width:430px}
.rm-vivo .rm-paso .txt h3{color:var(--hierro);transition:color .5s}
.rm-vivo .rm-paso .txt p{transition:color .5s}
.rm-vivo .rm-paso.on .txt h3{color:var(--tinta)}
.rm-vivo .rm-paso.on .txt p{color:var(--texto)}
.rm-vivo .rm-escena{display:block;position:sticky;top:max(96px,calc(50vh - 280px));height:min(580px,calc(100vh - 120px));padding:0;box-shadow:0 40px 90px -50px rgba(43,43,43,.45)}
.rm-estado{position:absolute;inset:66px 28px 28px;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translate3d(0,30px,0) scale(.97);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .7s}
.rm-estado.antes{transform:translate3d(0,-30px,0) scale(.97)}
.rm-estado.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .1s,transform .8s cubic-bezier(.2,.7,.2,1) .06s,visibility 0s}
.rm-estado > .v-esc{background:none;border:0;padding:0;border-radius:0;overflow:visible;width:100%;isolation:auto}
.rm-estado > .v-esc::before{display:none}
.rm-escena .v-cursor{z-index:6}
.rm-cab{display:none}
.rm-vivo .rm-cab{position:absolute;left:20px;top:18px;z-index:5;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(43,43,43,.05),0 12px 28px -16px rgba(43,43,43,.45);font-size:13.5px;color:var(--texto)}
.rm-cab b{font-weight:500;color:var(--tinta)}
.rm-cab-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(62,92,118,.1);color:var(--azul)}
.rm-puntos{display:inline-flex;align-items:center;gap:5px;margin-left:4px}
.rm-puntos i{display:block;width:6px;height:6px;border-radius:99px;background:rgba(62,92,118,.25);transition:width .4s ease,background-color .4s}
.rm-puntos i.hecho{background:rgba(62,92,118,.6)}
.rm-puntos i.on{width:20px;background:#3E5C76}
.rm-escena .v-btg,.rm-escena .ch,.rm-escena .v-li,.rm-escena tr,.rm-escena .v-kv p{transition:transform .14s ease,background-color .35s,color .35s,box-shadow .35s}
.rm-escena .r-pulsa{transform:scale(.96)}
/* Lo que el cursor pulsa: seleccionado en acero, o hecho en verde (como en la app) */
.p-sel{border-radius:10px;background-color:rgba(62,92,118,.08);box-shadow:0 0 0 2px rgba(62,92,118,.3)}
.v-li.p-sel{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
.v-kv p.p-sel{margin:-5px -8px;padding:5px 8px}
tr.p-sel{background:none;box-shadow:none}
.v-tab tr.p-sel td,.v-doc tr.p-sel td{background:rgba(62,92,118,.08)}
.v-tab tr.p-sel td:first-child,.v-doc tr.p-sel td:first-child{box-shadow:inset 3px 0 0 var(--azul)}
.v-graf .c.p-sel{border-radius:6px;box-shadow:0 0 0 2px rgba(62,92,118,.3);background:rgba(62,92,118,.06)}
.v-graf .c.p-sel i{background:var(--azul)}
.v-doc .qr.p-sel{padding:6px;margin-left:-6px;margin-right:-6px}
.v-caja.p-sel,.v-org .p.p-sel{border-color:var(--azul);box-shadow:0 0 0 3px rgba(62,92,118,.14);background-color:#fff}
.v-burb.p-sel{background-color:#E6EAEE}
.p-pulso{animation:m2-pulso .5s ease-out}
@keyframes m2-pulso{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}

/* ── Fondo de puntos que sigue al ratón (m2.js mete un .foco en cada bloque de metal y en las secciones grises) ── */
.sec.gris{position:relative;isolation:isolate;overflow:hidden}
.foco{position:absolute;left:0;top:0;width:560px;height:560px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background-image:radial-gradient(rgba(62,92,118,.5) 1.1px,rgba(62,92,118,0) 1.7px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%)}
.foco.ve{opacity:1}

/* ── Borde iluminado al pasar el ratón (m2.js pone .borde-luz y .luz) ── */
.borde-luz{position:relative}
.borde-luz::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--bx,50%) var(--by,50%),rgba(62,92,118,.8),rgba(62,92,118,.2) 45%,rgba(62,92,118,0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.borde-luz.luz::after{opacity:1}
.borde-luz.luz{background-image:radial-gradient(420px circle at var(--bx,50%) var(--by,50%),rgba(62,92,118,.05),rgba(62,92,118,0) 65%)}

/* ── Aparición escalonada al bajar (m2.js pone .m2-mov en <html> y .rv en cada bloque) ── */
.m2-mov .rv{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--rv-i,0) * 90ms)}
.m2-mov .rv:not(.visto){opacity:0;transform:translate3d(0,22px,0)}

/* Con «reducir movimiento», todo quieto y a la vista */
@media (prefers-reduced-motion:reduce){
  .marco-app,.flota{transform:none!important}
  .esfera::before,.esfera::after,.flota-c,.directo-et i,.diagrama .rayos line,.p-pulso{animation:none!important}
  .orb-giro,.foco,.btn-luz::after{display:none!important}
}