/* 3 · AGENTE VS EMPLEADO · v3.2 (02-10-2026) · «La línea de luz» (diseno-agente-vs-empleado-v3.md).
   Estado por defecto = estado FINAL (sin JS o con movimiento reducido se ve todo, quieto). Con JS:
   .anima  → estados de partida de lo que entra una vez (clase .dentro / .encendido);
   .modo-fijo (escritorio alto) → el duelo se fija 150vh y el JS pinta capas, papeles y tiras con el scroll;
   .modo-libre (escritorio bajo) → sin fijar, profundidad suave; .modo-apilado (< 1100 px) → móvil, solo disparos. */
.s-cuentas{ --e:cubic-bezier(.16,1,.3,1); --cristal:rgba(26,26,28,.92); position:relative; background:#000; color:#fff; overflow-x:clip; isolation:isolate; }
.s-cuentas sup{ font-size:.62em; line-height:0; margin-left:1px; }
.s-cuentas sup a{ color:inherit; text-decoration:none; opacity:.8; }
.s-cuentas .etiqueta{ color:rgba(255,255,255,.62); }
.s-cuentas .etiqueta::before{ box-shadow:0 0 0 4px rgba(60,193,160,.18); }

/* ===================== A · Cabecera «el haz» ===================== */
.cu-a{ --w:clamp(300px, 36vw, 540px); --h:calc(var(--w) * 1.3393); position:relative; padding:128px 0 120px; overflow:clip; isolation:isolate; }
.cu-a::before{ content:''; position:absolute; inset:0 0 auto; height:480px; background:radial-gradient(30% 60% at 50% 0%, rgba(60,193,160,.07), transparent 70%); pointer-events:none; }
.cu-a-rejilla{ position:absolute; inset:-120px 0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:56px 56px; background-position:center top;
  -webkit-mask-image:radial-gradient(42% 46% at 50% 44%, #000 45%, transparent 75%); mask-image:radial-gradient(42% 46% at 50% 44%, #000 45%, transparent 75%); }
.cu-a-cab{ position:relative; z-index:6; display:flex; flex-direction:column; align-items:center; gap:20px; max-width:1044px; text-align:center; }
.cu-titulo, .cu-c-h{ font-size:clamp(38px, 4.6vw, 68px); line-height:1.02; letter-spacing:-.045em; font-weight:500; text-wrap:balance; }
.cu-titulo .gris, .cu-c-h .gris{ color:rgba(255,255,255,.45); }
.cu-titulo .verde, .cu-c-h .verde{ color:var(--verde); }
.cu-titulo{ text-shadow:0 0 24px #000, 0 0 48px #000; }   /* el haz pasa por detrás del título */
.cu-a-zona{ position:relative; height:calc(var(--h) * .82); margin-top:40px; }
.cu-mitad{ position:absolute; z-index:2; top:0; left:calc(50% - var(--w) * .516); width:var(--w); margin:0; mix-blend-mode:lighten; }
.cu-mitad img{ display:block; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%); mask-composite:intersect; }
.cu-mitad-r{ z-index:3; }
.cu-mitad-p img{ clip-path:polygon(0 0, 51.6% 0, 51.6% 45%, 51% 49%, 49.8% 53%, 49.3% 60%, 49.3% 80%, 50% 84%, 50.6% 90%, 50.8% 100%, 0 100%); }
.cu-mitad-r img{ clip-path:polygon(51.6% 0, 100% 0, 100% 100%, 50.8% 100%, 50.6% 90%, 50% 84%, 49.3% 80%, 49.3% 60%, 49.8% 53%, 51% 49%, 51.6% 45%); }
/* el haz: halo ancho detrás de las fotos; núcleo y halo estrecho delante; crecen desde arriba (scaleY) */
.cu-haz-ancho{ position:absolute; z-index:1; left:50%; top:-28px; width:140px; margin-left:-70px; height:calc(var(--h) * .82 + 168px); background:linear-gradient(180deg, transparent, rgba(60,193,160,.14) 12%, rgba(60,193,160,.12)); filter:blur(30px); pointer-events:none; }
.cu-haz{ position:absolute; z-index:4; left:50%; top:-28px; width:40px; margin-left:-20px; height:calc(var(--h) * .82 + 168px); pointer-events:none; }
.cu-haz i{ position:absolute; top:0; bottom:0; left:50%; transform-origin:50% 0; }
.cu-haz-halo{ width:18px; margin-left:-9px; background:linear-gradient(180deg, rgba(60,193,160,0), rgba(60,193,160,.38) 8%, rgba(60,193,160,.45)); filter:blur(6px); }
.cu-haz-nucleo{ width:1.5px; margin-left:-.75px; background:linear-gradient(180deg, rgba(214,255,242,0) 0%, rgba(214,255,242,.85) 6%, #d6fff2 60%, rgba(60,193,160,.95) 100%); mix-blend-mode:screen; }
/* titular partido, en degradado: la luz sale del haz */
/* el rótulo de cada lado, encima de su mitad del titular */
.cu-quien-t{ position:absolute; z-index:6; display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.55); white-space:nowrap; }
.cu-quien-t::before{ content:''; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); }
.cu-quien-b{ color:rgba(255,255,255,.8); } .cu-quien-b::before{ background:#3cc1a0; box-shadow:0 0 0 4px rgba(60,193,160,.18); }
.cu-quien-a{ right:calc(50% + var(--w) * .516 - 40px); top:calc(var(--h) * .14 - 34px); }
.cu-quien-b{ left:calc(50% + var(--w) * .484 - 40px); top:calc(var(--h) * .46 - 34px); }
.cu-h2{ position:absolute; z-index:6; margin:0; font-size:clamp(40px, 5.3vw, 76px); font-weight:500; line-height:.98; letter-spacing:-.045em; text-wrap:balance; color:rgba(255,255,255,.75); }
.cu-h2-a{ right:calc(50% + var(--w) * .516 - 40px); top:calc(var(--h) * .14); max-width:min(420px, calc(50% - var(--w) * .516 + 16px)); text-align:right;
  background:linear-gradient(90deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.78) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cu-h2-b{ left:calc(50% + var(--w) * .484 - 40px); top:calc(var(--h) * .46); max-width:min(420px, calc(50% - var(--w) * .484 + 16px));
  background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,.62) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* el horizonte: tapa el 18 % de abajo de la foto; las figuras quedan «detrás» */
.cu-horizonte{ position:absolute; z-index:5; left:50%; top:calc(var(--h) * .82); width:2400px; height:2400px; margin-left:-1200px; border-radius:50%; background:#000; pointer-events:none; }
.cu-hz-luz{ position:absolute; left:0; right:0; top:-180px; height:180px; background:radial-gradient(35% 100% at 50% 100%, rgba(60,193,160,.20), transparent 70%); }
.cu-hz-borde{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(60,193,160,.55);
  -webkit-mask-image:radial-gradient(40% 8% at 50% 0%, #000, transparent); mask-image:radial-gradient(40% 8% at 50% 0%, #000, transparent); }
.cu-hz-destello{ position:absolute; left:50%; top:-11px; width:220px; height:22px; margin-left:-110px; border-radius:50%; background:radial-gradient(closest-side, rgba(214,255,242,.95), rgba(60,193,160,.45) 45%, transparent); }
.cu-hz-destello::after{ content:''; position:absolute; left:50%; top:50%; width:520px; height:60px; margin:-30px 0 0 -260px; border-radius:50%; background:radial-gradient(closest-side, rgba(60,193,160,.25), transparent); }
.cu-sub{ position:relative; z-index:6; max-width:600px; margin:32px auto 0; padding-inline:24px; text-align:center; font-size:clamp(18px, 1.5vw, 21px); line-height:1.45; letter-spacing:-.012em; color:rgba(255,255,255,.56); text-wrap:balance; }
.cu-sub strong{ font-weight:400; color:#fff; }

/* ===================== B · El duelo «la línea» ===================== */
.cu-pista{ position:relative; }
.cu-escena{ position:relative; height:var(--alto, 860px); overflow:hidden; }
.s-cuentas.modo-fijo .cu-pista{ height:250vh; }
.s-cuentas.modo-fijo .cu-escena{ position:sticky; top:0; height:100vh; }
.cu-lienzo{ position:absolute; left:50%; top:50%; width:1440px; height:860px; margin:-430px 0 0 -720px; transform:scale(var(--k, 1)); transform-origin:50% 50%; isolation:isolate; }

/* fondos de cada mitad (dentro del lienzo, a sangre: la escena recorta) */
.cu-fondo-p, .cu-fondo-a{ position:absolute; top:-800px; bottom:-800px; pointer-events:none; }
.cu-fondo-p{ left:-1200px; right:720px;
  background:linear-gradient(115deg, transparent 38%, rgba(245,245,247,.07) 38.2%, rgba(245,245,247,.03) 52%, transparent 52.2%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px; }
.cu-fondo-a{ left:720px; right:-1200px; }
.cu-fondo-a::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,255,255,.07) 1.5px, transparent 1.6px) 0 0/18px 18px;
  -webkit-mask-image:radial-gradient(30% 22% at 22% 50%, #000 30%, transparent 100%); mask-image:radial-gradient(30% 22% at 22% 50%, #000 30%, transparent 100%); }
.cu-fondo-a::after{ content:''; position:absolute; inset:0; background:radial-gradient(22% 22% at 24% 52%, rgba(60,193,160,.20), rgba(60,193,160,.05) 55%, transparent 75%); transition:opacity .8s; }
/* divisoria: el haz convertido en línea (el JS la ajusta a lo visible) */
.cu-divisoria{ position:absolute; z-index:20; left:720px; top:-800px; height:2460px; width:1px; margin-left:-.5px; background:rgba(255,255,255,.08); pointer-events:none; }
.cu-div-relleno{ position:absolute; inset:0; background:#3cc1a0; box-shadow:0 0 12px rgba(60,193,160,.5); transform-origin:50% 0; }
.cu-div-punta{ position:absolute; left:-3.5px; top:-4px; width:8px; height:8px; border-radius:50%; background:#d6fff2; box-shadow:0 0 0 3px rgba(60,193,160,.25), 0 0 14px 3px rgba(60,193,160,.6); opacity:0; }
.s-cuentas.modo-fijo .cu-div-punta{ opacity:1; }

/* marcador */
.cu-marcador{ position:absolute; z-index:22; left:0; top:0; width:1440px; height:360px; pointer-events:none; }
.cu-marcador a{ pointer-events:auto; }
.cu-marca{ position:absolute; top:56px; width:440px; display:flex; flex-direction:column; }
.cu-marca-p{ right:776px; align-items:flex-end; text-align:right; }
.cu-marca-a{ left:776px; align-items:flex-start; }
.cu-rotulo{ margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.cu-marca-a .cu-rotulo{ color:rgba(255,255,255,.72); }
.cu-cifra{ margin:0; font-size:112px; font-weight:300; line-height:.9; letter-spacing:-.05em; color:rgba(255,255,255,.46); }
.cu-cifra span{ font-size:.46em; font-weight:400; letter-spacing:0; margin-left:.12em; color:rgba(255,255,255,.45); }
.cu-marca-a .cu-cifra{ background:linear-gradient(90deg, #fff 40%, rgba(255,255,255,.7)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cu-linea{ margin:10px 0 0; font-size:15px; line-height:1.4; letter-spacing:-.005em; color:rgba(255,255,255,.55); }
.cu-semana{ position:relative; width:280px; margin-top:18px; }
.cu-dias{ display:flex; gap:4px; height:6px; }
.cu-dias i{ position:relative; flex:1; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.cu-dias b{ position:absolute; top:0; bottom:0; left:37.5%; width:33.3%; background:rgba(255,255,255,.55); transform-origin:0 50%; }
.cu-semana-a .cu-dias b{ left:0; width:100%; background:#3cc1a0; }
.cu-semana-a .cu-dias{ filter:drop-shadow(0 0 5px rgba(60,193,160,.55)); }
.cu-letras{ display:flex; gap:4px; margin-top:7px; }
.cu-letras span{ flex:1; text-align:center; font-size:9.5px; font-weight:500; letter-spacing:.06em; color:rgba(255,255,255,.32); }
.cu-semana-t{ position:absolute; top:-5px; font-size:11px; color:rgba(255,255,255,.4); white-space:nowrap; }
.cu-semana-p .cu-semana-t{ right:calc(100% + 12px); }
.cu-semana-a .cu-semana-t{ left:calc(100% + 12px); }
.cu-costes{ display:flex; gap:24px; margin-top:28px; }
.cu-costes p{ width:184px; margin:0; text-align:right; }   /* 05-10: más ancho, que no se parta en 3 líneas */
.cu-costes b{ display:block; font-size:26px; font-weight:300; line-height:1; letter-spacing:-.035em; color:rgba(255,255,255,.78); }
.cu-costes span{ display:block; margin-top:7px; font-size:12px; line-height:1.35; color:rgba(255,255,255,.5); }
.cu-vs{ position:absolute; z-index:25; left:698px; top:128px; width:44px; height:44px; border-radius:50%; background:#000; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 6px #000;
  display:grid; place-items:center; font-size:13px; font-weight:500; color:rgba(255,255,255,.8); }

/* --- la persona: papel, luz fría, de uno en uno --- */
.cu-lado-p, .cu-lado-a{ position:absolute; top:0; width:720px; height:860px; }
.cu-lado-p{ left:0; }
.cu-lado-a{ left:720px; }
.cu-esc-p{ position:absolute; left:-20px; top:300px; width:600px; height:600px; transition:opacity .3s; }
.cu-retrato{ display:block; width:100%; height:100%; mix-blend-mode:lighten;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 10%, #000 74%, transparent 98%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 10%, #000 74%, transparent 98%); mask-composite:intersect; }
.cu-luz-cara{ position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(245,245,247,.05) 40.2%, rgba(245,245,247,.02) 54%, transparent 54.2%); }
.cu-normal{ position:absolute; z-index:3; left:40px; top:770px; width:330px; margin:0; font-size:15px; line-height:1.4; color:rgba(255,255,255,.6); }
/* lo que trae un empleado: puntos con ✕ en una tarjeta, como la de las ventajas del agente (espejo: se inclina hacia el otro lado) */
.cu-contras{ position:absolute; z-index:4; left:372px; top:404px; width:318px; }   /* 05-10: más abajo; nunca encima de los costes */
.cu-contras-in{ padding:8px 14px 6px; transform:perspective(1200px) rotateY(12deg) rotateZ(-1.5deg); transform-origin:100% 50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -30px rgba(0,0,0,.95); }
/* la del agente: espejo de la de la persona, en el hueco entre la línea y el robot */
.cu-afavor{ left:30px; }
.cu-afavor .cu-contras-in{ transform:perspective(1200px) rotateY(-12deg) rotateZ(1.5deg); transform-origin:0 50%; }
.cu-lado-p .cu-contras-in::before{ background:radial-gradient(120% 70% at 50% 130%, rgba(240,113,113,.10), transparent 60%); }
.cu-papeles{ position:relative; margin:0; padding:0; list-style:none; }
.cu-papeles li{ display:grid; grid-template-columns:22px 1fr; align-items:start; gap:10px; padding:7px 0; border-top:1px solid rgba(255,255,255,.06); }
.cu-papeles li:first-child{ border-top:0; }
.cu-no{ width:22px; height:22px; border-radius:50%; background:rgba(240,113,113,.13); color:#f07171; display:grid; place-items:center; }
.cu-no .ico{ width:11px; height:11px; stroke-width:2.8; }
.cu-papeles b{ display:block; padding-top:2px; font-size:13.5px; font-weight:500; line-height:1.36; letter-spacing:-.01em; color:#fff; }
.cu-papeles em{ display:block; margin-top:1px; font-style:normal; font-size:12px; line-height:1.4; color:rgba(255,255,255,.55); text-wrap:pretty; }
.cu-ejemplo{ position:absolute; left:24px; top:828px; font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); }

/* --- el agente: cristal, luz verde, todo a la vez --- */
.cu-esc-a{ position:absolute; left:140px; top:300px; width:600px; height:600px; }
.cu-robot{ position:absolute; inset:0; transition:opacity .6s; }
.cu-robot img{ position:relative; display:block; width:100%; height:100%; }
.cu-red{ position:absolute; left:-50%; top:-42%; width:200%; height:184%; pointer-events:none; }
.cu-arco{ position:absolute; left:300px; top:140px; width:0; height:0; margin:0; padding:0; list-style:none; }
.cu-arco li{ --a:var(--ad); --r:var(--rd); position:absolute; left:-16px; top:-16px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-size:10px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.82);
  transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); box-shadow:0 0 0 1.5px #3cc1a0, 0 0 0 4.5px rgba(60,193,160,.15); }
.cu-arco li .ico{ width:15px; height:15px; stroke-width:1.8; } .cu-arco li .ico.relleno{ stroke:none; }
.cu-arco li::after{ content:''; position:absolute; right:-4px; bottom:-4px; width:14px; height:14px; border-radius:50%; background:#3cc1a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a141c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat; box-shadow:0 0 0 2px #000; }
.cu-contras-in{ position:relative; border-radius:16px; background:var(--cristal); border:1px solid rgba(255,255,255,.09); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px -30px rgba(0,0,0,.95); }
.cu-contras-in::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 70% at 50% 130%, rgba(60,193,160,.20), transparent 60%); }
.cu-si{ width:22px; height:22px; border-radius:50%; background:rgba(60,193,160,.14); color:#3cc1a0; display:grid; place-items:center; }
.cu-si .ico{ width:12px; height:12px; stroke-width:2.6; }
.cu-audio{ display:inline-flex !important; align-items:center; gap:8px; }
.cu-play{ width:0; height:0; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.cu-onda{ width:64px; height:14px; background:linear-gradient(90deg, rgba(255,255,255,.7) 2px, transparent 2px) 0 50%/5px 100% repeat-x;
  -webkit-mask-image:linear-gradient(90deg, #000, #000); clip-path:polygon(0 40%, 8% 20%, 16% 50%, 24% 0, 32% 30%, 40% 10%, 48% 45%, 56% 15%, 64% 35%, 72% 5%, 80% 40%, 88% 25%, 100% 45%, 100% 55%, 88% 75%, 80% 60%, 72% 95%, 64% 65%, 56% 85%, 48% 55%, 40% 90%, 32% 70%, 24% 100%, 16% 50%, 8% 80%, 0 60%); }

/* ===================== B2 · Cuenta su trabajo ===================== */
.cu-b2{ position:relative; padding:140px 0 120px; overflow:clip; }
.cu-b2-luz{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 40% at 50% 70%, rgba(60,193,160,.08), transparent); }
.cu-frase{ margin:0 auto; max-width:900px; text-align:center; font-size:clamp(36px, 4.4vw, 64px); font-weight:500; line-height:1; letter-spacing:-.04em; text-wrap:balance; }
.cu-frase > span{ display:inline-block; }
.cu-frase-a > span{ display:inline-block; background:linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.6)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cu-frase-b > span{ display:inline-block; color:#fff; }
/* ¿A quién eliges? · 3 tarjetas: título grande, el empleado, «vs» y el agente (alineados entre tarjetas con subgrid) */
.cu-elige{ display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(4, auto); gap:0; max-width:1204px; margin:72px auto 0; padding:0; list-style:none; text-align:left; }
.cu-elige > li{ position:relative; grid-row:span 4; display:grid; grid-template-rows:subgrid; padding:0 40px; text-align:center; border-left:1px solid rgba(255,255,255,.1); }
.cu-elige > li:first-child{ border-left:0; }
.cu-elige > li > *{ position:relative; }
.cu-el-t{ margin:0 0 28px; font-size:clamp(30px, 2.9vw, 42px); font-weight:500; line-height:1.04; letter-spacing:-.04em; color:#fff; text-wrap:balance; }
.cu-el-q{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.cu-el-q::before{ content:''; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); }
.cu-el-a .cu-el-q{ color:rgba(255,255,255,.8); } .cu-el-a .cu-el-q::before{ background:#3cc1a0; box-shadow:0 0 0 4px rgba(60,193,160,.18); }
.cu-el-p p, .cu-el-a p{ margin:10px 0 0; font-size:17px; line-height:1.45; letter-spacing:-.01em; text-wrap:pretty; }
.cu-el-p p{ color:rgba(255,255,255,.55); } .cu-el-p b{ font-weight:500; color:rgba(255,255,255,.8); }
.cu-el-a p{ color:#fff; } .cu-el-a b{ font-weight:500; }
.cu-el-vs{ display:flex; align-items:center; gap:12px; margin:22px 0; font-size:12px; font-weight:500; color:rgba(255,255,255,.6); }
.cu-el-vs::before, .cu-el-vs::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }
.cu-el-a .cu-el-remate{ margin-top:20px; font-size:19px; font-weight:500; line-height:1.45; letter-spacing:-.015em; }
/* subrayado de brocha (verde de la marca) debajo de lo que se gana */
.cu-brocha{ padding:0 .1em .1em; margin:0 -.04em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%233cc1a0' fill-opacity='.85' d='M5 7.5C42 4 98 6.2 148 5.2S214 3.8 235 6c3.4 1.6 3.6 9.4.4 11.6-34 .8-82 3.2-128 2.6S34 21.6 7 20.4C1.6 18.6.8 9.6 5 7.5Z'/%3E%3Cpath fill='none' stroke='%233cc1a0' stroke-opacity='.5' stroke-width='1.3' stroke-linecap='round' d='M14 3.6C80 2 160 2.8 226 2.4M10 22.6c70-1.4 150-2.2 214-2.8M30 12.4c60-.8 120-1 170-1.6'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .68em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.anima .cu-elige .cu-brocha{ background-size:0% .68em; transition:background-size 1s var(--e) .6s; }
.anima .cu-elige .ent.dentro .cu-brocha{ background-size:100% .68em; }

/* ===================== C · Cierre «el anillo» ===================== */
.cu-c{ position:relative; padding:120px 0 168px; overflow:clip; text-align:center; }
.cu-c-puntos{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle, rgba(255,255,255,.07) 1.5px, transparent 1.6px) 0 0/12px 12px;
  -webkit-mask-image:radial-gradient(38% 34% at 50% 34%, #000 30%, transparent 75%); mask-image:radial-gradient(38% 34% at 50% 34%, #000 30%, transparent 75%); }
.cu-c-in{ position:relative; }
.cu-c-cab{ display:flex; flex-direction:column; align-items:center; gap:20px; max-width:900px; margin:0 auto; }
.cu-c-sub{ margin:0; max-width:620px; font-size:clamp(17px, 1.4vw, 20px); line-height:1.45; letter-spacing:-.012em; color:rgba(255,255,255,.56); text-wrap:balance; }
.cu-hoy{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:64px auto 0; font-size:16px; line-height:1.4; color:rgba(255,255,255,.55); }
.cu-hoy b{ font-size:48px; font-weight:300; line-height:1.05; letter-spacing:-.045em; color:rgba(255,255,255,.82); }
.cu-anillo-zona{ position:relative; width:640px; height:640px; margin:8px auto 0; display:grid; place-items:center; }
.cu-anillo{ position:absolute; inset:0; pointer-events:none; }
.cu-anillo-difu{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, transparent 54%, rgba(60,193,160,.32) 62%, rgba(60,193,160,.08) 70%, transparent 72%); filter:blur(18px); }
.cu-anillo-fino{ position:absolute; inset:40px; border-radius:50%; border:1px solid rgba(214,255,242,.35); }
.cu-anillo-brillo{ position:absolute; inset:40px; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 68%, rgba(214,255,242,.95) 80%, transparent 90%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation:cu-gira 14s linear infinite; animation-play-state:paused; }
.s-cuentas.cerca .cu-anillo-brillo{ animation-play-state:running; }
@keyframes cu-gira{ to{ transform:rotate(360deg); } }
.cu-total{ position:relative; z-index:2; margin:0; display:flex; flex-direction:column; align-items:center; }
.cu-total-pre{ font-size:20px; color:rgba(255,255,255,.6); }
.cu-total b{ margin:6px 0 14px; font-size:100px; font-weight:300; line-height:.92; letter-spacing:-.055em; white-space:nowrap; background:linear-gradient(180deg, #fff 35%, rgba(255,255,255,.55)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cu-total-pie{ max-width:400px; font-size:16px; line-height:1.4; color:rgba(255,255,255,.6); }
.cu-cuenta{ max-width:640px; margin:48px auto 0; font-size:22px; line-height:1.4; letter-spacing:-.012em; color:rgba(255,255,255,.62); text-wrap:balance; }
.cu-acabaron{ margin:48px auto 0; }
.cu-acabaron p{ margin:0 0 16px; font-size:15px; font-weight:500; color:rgba(255,255,255,.72); }
.cu-acabaron ul{ width:700px; max-width:100%; margin:0 auto; padding:0; list-style:none; columns:2; column-gap:40px; text-align:left; }
.cu-acabaron li{ position:relative; break-inside:avoid; padding-left:22px; margin-bottom:10px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.6); }
.cu-acabaron li::before{ content:''; position:absolute; left:0; top:.72em; width:10px; height:1px; background:rgba(255,255,255,.3); }
.cu-remate{ max-width:760px; margin:48px auto 0; font-size:clamp(24px, 2.2vw, 32px); font-weight:500; line-height:1.15; letter-spacing:-.025em; color:#fff; }
.cu-cta{ margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.cu-cta .nota{ margin:0; color:rgba(255,255,255,.45); }

/* ===================== Entradas de una vez (solo con .anima) ===================== */
.anima .ent{ opacity:0; transform:translateY(var(--dy, 16px)); transition:opacity .6s var(--e), transform .6s var(--e); transition-delay:var(--d, 0ms); }
.anima .ent.dentro{ opacity:1; transform:none; }
.anima .cu-total.ent{ filter:blur(10px); transform:none; transition:opacity .9s var(--e), filter .9s var(--e); }   /* 05-10: sin desplazarse; fijo en el centro del aro */
.anima .cu-total.ent.dentro{ filter:none; transform:none; }
.anima .cu-normal{ opacity:0; transform:translateY(8px); transition:opacity .4s var(--e), transform .4s var(--e); }
.anima .cu-normal.dentro{ opacity:1; transform:none; }
/* tiras de la semana (modo libre y móvil; en el fijo las pinta el JS) */
.anima .cu-dias b{ transform:scaleX(0); transition:transform .5s var(--e); transition-delay:calc(var(--n, 0) * 120ms); }
.anima .cu-semana-a .cu-dias b{ transition-duration:.6s; transition-delay:0ms; }
.anima .cu-semana.dentro .cu-dias b{ transform:none; }
/* papeles (libre y móvil): caen uno a uno */
.anima .cu-papeles li{ opacity:0; transform:translateY(10px); transition:opacity .4s var(--e), transform .4s var(--e); transition-delay:calc(var(--i) * 110ms); }
.anima .cu-papeles.dentro li{ opacity:1; transform:none; }
.anima .cu-esc-p.apagada{ opacity:.62; }
/* el agente en reposo → encendido (todo a la vez) */
.anima .cu-lienzo:not(.encendido) .cu-robot{ opacity:.55; transition-duration:.25s; }
.anima .cu-lienzo:not(.encendido) .cu-fondo-a::after{ opacity:.35; transition-duration:.25s; }
.anima .cu-arco li{ transition:opacity .25s, box-shadow .25s; }
.anima .cu-arco li::after{ transition:transform .25s, opacity .25s; }
.anima .cu-lienzo:not(.encendido) .cu-arco li{ opacity:.3; box-shadow:0 0 0 1.5px rgba(255,255,255,.18); }
.anima .cu-lienzo:not(.encendido) .cu-arco li::after{ opacity:0; transform:scale(.5); }
.anima .cu-lienzo.encendido .cu-arco li{ transition:opacity .3s, box-shadow .3s; transition-delay:calc(var(--o) * 35ms); }
.anima .cu-lienzo.encendido .cu-arco li::after{ transition:transform .24s var(--e), opacity .24s; transition-delay:calc(var(--o) * 35ms + 120ms); }
/* en el modo fijo, lo atado al scroll no lleva transición (lo pinta el JS en cada fotograma) */
.modo-fijo .cu-papeles li, .modo-fijo .cu-dias b, .modo-fijo .cu-esc-p{ transition:none; }
.modo-fijo .cu-papeles li, .modo-fijo .cu-mitad, .modo-fijo .cu-esc-a > *{ will-change:transform, opacity; }

/* ===================== Móvil y tableta (< 1100 px): apilado, sin nada atado al scroll ===================== */
@media (max-width:1099.98px){
  .cu-a{ --w:calc(100vw + 32px); padding:72px 0 88px; }
  .cu-a-zona{ height:auto; margin-top:28px; display:flex; flex-direction:column; align-items:center; }
  .cu-h2{ position:relative; inset:auto; z-index:6; max-width:min(340px, calc(100% - 32px)); text-align:center; font-size:clamp(34px, 9.6vw, 44px); }
  .cu-quien-t{ position:relative; inset:auto; justify-content:center; }
  .cu-quien-a{ order:0; margin-bottom:10px; } .cu-quien-b{ order:3; margin-top:-132px; margin-bottom:10px; z-index:7; }
  .cu-h2-a{ order:1; margin-bottom:6px; background:linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,.78)); -webkit-background-clip:text; background-clip:text; }
  .cu-mitad{ position:relative; left:auto; top:auto; order:2; width:var(--w); max-width:none; mix-blend-mode:normal; }
  .cu-mitad-p img{ clip-path:none; }
  .cu-mitad-r{ display:none; }
  .cu-mitad-p::after{ content:''; position:absolute; left:50%; top:80%; width:1000px; height:1000px; margin-left:-500px; border-radius:50%; background:#000;
    box-shadow:0 -1px 0 rgba(60,193,160,.55), 0 -50px 80px -40px rgba(60,193,160,.35); }
  .cu-mitad-p::before{ content:''; position:absolute; z-index:1; left:50%; top:calc(80% - 9px); width:180px; height:18px; margin-left:-90px; border-radius:50%; background:radial-gradient(closest-side, rgba(214,255,242,.9), rgba(60,193,160,.4) 45%, transparent); }
  .cu-horizonte{ display:none; }
  .cu-h2-b{ order:4; margin-top:0; }
  .cu-haz{ top:96px; height:calc(var(--w) * 1.0714 - 104px); }
  .cu-haz-ancho{ top:96px; height:calc(var(--w) * 1.0714 - 104px); }
  .s-cuentas.cerca .cu-haz{ animation:cu-respira 5s ease-in-out infinite alternate; }
  .cu-sub{ font-size:17px; max-width:372px; margin-top:20px; }
  .anima .cu-a-zona > .cu-h2, .anima .cu-a-zona > .cu-mitad-p{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--e), transform .6s var(--e); }
  .anima .cu-a-zona.dentro > .cu-h2, .anima .cu-a-zona.dentro > .cu-mitad-p{ opacity:1; transform:none; }
  .anima .cu-a-zona.dentro > .cu-mitad-p{ transition-delay:120ms; } .anima .cu-a-zona.dentro > .cu-h2-b{ transition-delay:240ms; }

  .cu-pista, .cu-escena{ height:auto !important; position:static !important; overflow:visible; }
  .cu-lienzo{ position:relative; left:auto; top:auto; width:auto; height:auto; margin:0; transform:none !important; padding:8px 16px 96px; max-width:560px; margin-inline:auto; }
  .cu-fondo-p, .cu-fondo-a, .cu-divisoria{ display:none; }
  .cu-marcador{ position:relative; width:auto; height:auto; display:grid; grid-template-columns:1fr 36px 1fr; column-gap:12px; align-items:start;
    grid-template-areas:"rp vs ra" "cp vs ca" "sp . sa" "lp . la" "co co co"; }
  .cu-marca{ display:contents; }
  .cu-marca-p .cu-rotulo{ grid-area:rp; } .cu-marca-a .cu-rotulo{ grid-area:ra; }
  .cu-marca-p .cu-cifra{ grid-area:cp; } .cu-marca-a .cu-cifra{ grid-area:ca; }
  .cu-marca-p .cu-semana{ grid-area:sp; } .cu-marca-a .cu-semana{ grid-area:sa; }
  .cu-marca-p .cu-linea{ grid-area:lp; } .cu-marca-a .cu-linea{ grid-area:la; }
  .cu-marca-p > *{ justify-self:end; text-align:right; } .cu-marca-a > *{ justify-self:start; }
  .cu-rotulo{ font-size:10.5px; margin-bottom:8px; }
  .cu-cifra{ font-size:52px; }
  .cu-linea{ font-size:13px; margin-top:8px; }
  .cu-semana{ width:132px; margin-top:12px; }
  .cu-semana-t{ display:none; }
  .cu-vs{ position:relative; left:auto; top:auto; grid-area:vs; align-self:center; width:36px; height:36px; font-size:12px; }
  .cu-costes{ grid-area:co; justify-content:center; gap:16px; margin-top:28px; }
  .cu-costes p{ width:auto; flex:1; max-width:170px; text-align:left; }
  .cu-costes b{ font-size:22px; }

  .cu-lado-p, .cu-lado-a{ position:relative; left:auto; top:auto; width:auto; height:auto; display:flex; flex-direction:column; }
  .cu-lado-p{ margin-top:32px; }
  .cu-esc-p{ position:relative; left:auto; top:auto; order:1; width:100%; height:auto; aspect-ratio:1; }
  .cu-contras{ position:relative; left:auto; top:auto; order:2; width:100%; margin-top:-96px; z-index:5; }
  .cu-contras-in, .cu-afavor .cu-contras-in{ transform:none; }
  .cu-normal{ position:relative; left:auto; top:auto; order:3; width:auto; margin-top:20px; }
  .cu-ejemplo{ position:relative; left:auto; top:auto; order:4; margin-top:12px; }
  .cu-lado-a::before{ content:''; display:block; height:1px; margin:48px 0; background:linear-gradient(90deg, transparent, #3cc1a0 20%, #3cc1a0 80%, transparent); box-shadow:0 0 12px rgba(60,193,160,.5); }
  .cu-esc-a{ position:relative; left:auto; top:auto; width:100%; height:auto; aspect-ratio:1; margin-top:116px; }
  .cu-arco{ left:50%; top:23.4%; }
  .cu-arco li{ --a:var(--am); --r:var(--rm); left:-12px; top:-12px; width:24px; height:24px; font-size:8.5px; }
  .cu-arco li .ico{ width:11px; height:11px; }
  .cu-arco li::after{ width:11px; height:11px; right:-3px; bottom:-3px; background-size:7px; }

  .cu-b2{ padding:88px 0 88px; }
  .cu-elige{ grid-template-columns:1fr; grid-template-rows:none; gap:0; max-width:560px; margin-top:40px; }
  .cu-elige > li{ grid-row:auto; display:flex; flex-direction:column; padding:36px 8px; border-left:0; border-top:1px solid rgba(255,255,255,.1); }
  .cu-elige > li:first-child{ border-top:0; padding-top:0; }
  .cu-el-a .cu-el-remate{ font-size:18px; }
  .cu-el-t{ margin-bottom:20px; font-size:30px; }
  .cu-el-p p, .cu-el-a p{ font-size:16px; }
  .cu-el-vs{ margin:18px 0; }
  .cu-titulo, .cu-c-h{ font-size:clamp(32px, 8.6vw, 40px); }
  .cu-a-cab{ padding-inline:16px; }
  .cu-hoy{ margin-top:44px; font-size:15px; } .cu-hoy b{ font-size:36px; }
  .cu-frase{ font-size:34px; padding-inline:8px; }

  .cu-c{ padding:88px 0 124px; }
  .cu-anillo-zona{ width:320px; height:320px; margin-top:20px; }
  .cu-anillo-fino, .cu-anillo-brillo{ inset:16px; }
  .cu-total-pre{ font-size:13.5px; max-width:190px; text-align:center; }
  .cu-total b{ font-size:clamp(42px, 12.4vw, 50px); margin:4px 0 10px; }
  .cu-total-pie{ font-size:13px; max-width:200px; text-align:center; }
  .cu-cuenta{ font-size:18px; margin-top:36px; }
  .cu-acabaron ul{ columns:1; width:auto; max-width:340px; }
  .cu-remate{ font-size:22px; }
  .anima .cu-anillo{ opacity:0; transform:scale(.9); transition:opacity .6s var(--e), transform .6s var(--e); }
  .anima .cu-anillo.dentro{ opacity:1; transform:none; }
}
@keyframes cu-respira{ from{ opacity:.7; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .s-cuentas *{ animation:none !important; }
}

/* ===================== v3.6 (04-10-2026): la línea del duelo baja hasta el círculo del ahorro =====================
   OJO (05-10): se llama .cu-bajada; .cu-linea es el texto de debajo de las horas del marcador (el choque de nombres lo rompía). */
.cu-c{ padding-top:0; }
.cu-bajada{ position:relative; width:2px; height:220px; margin:0 auto -40px; z-index:1; }   /* -40px: llega justo al aro (está 40px dentro de su zona) */
.cu-bajada-luz{ position:absolute; inset:0; transform-origin:50% 0;
  background:linear-gradient(180deg, rgba(60,193,160,.95), rgba(214,255,242,.9) 70%, rgba(60,193,160,.9)); box-shadow:0 0 10px rgba(60,193,160,.55), 0 0 26px rgba(60,193,160,.3); }
.cu-bajada-punta{ position:absolute; left:50%; top:0; width:9px; height:9px; margin:-4px 0 0 -4.5px; border-radius:50%; background:#d6fff2; box-shadow:0 0 0 4px rgba(60,193,160,.25), 0 0 16px rgba(60,193,160,.9); opacity:0; }
.anima .cu-bajada .cu-bajada-luz{ transform:scaleY(0); transition:transform 1.3s cubic-bezier(.45,0,.2,1); }
.anima .cu-bajada.dentro .cu-bajada-luz{ transform:none; }
.anima .cu-bajada.dentro .cu-bajada-punta{ animation:cu-baja 1.3s cubic-bezier(.45,0,.2,1) both; }
@keyframes cu-baja{ 0%{ top:0; opacity:1; } 90%{ opacity:1; } 100%{ top:100%; opacity:0; } }
.cu-anillo-zona{ margin-top:0; }
.cu-total-base{ display:block; max-width:440px; margin-top:10px; font-size:14px; line-height:1.4; color:rgba(255,255,255,.45); }
@media (max-width:1099.98px){
  .cu-bajada{ height:140px; margin-bottom:-16px; }   /* en móvil el aro está 16px dentro */
  .cu-total-base{ max-width:200px; font-size:12px; margin-top:6px; text-align:center; }
}
/* «ahorras» con subrayado de rotulador (dueño, 04-10-2026): el mismo trazo de brocha; se pinta al aparecer el círculo */
.cu-total-pre .cu-brocha{ color:#fff; font-weight:500; }
.anima .cu-total .cu-brocha{ background-size:0% .68em; transition:background-size 1s cubic-bezier(.16,1,.3,1) .7s; }
.anima .cu-total.dentro .cu-brocha{ background-size:100% .68em; }

/* ===================== v3.7 (05-10-2026): título y subtítulo encima del círculo; la línea sale de debajo del subtítulo ===================== */
.cu-c > .cu-c-in > .cu-c-cab{ padding:112px 24px 0; }
.cu-c-cab + .cu-bajada{ margin-top:56px; height:170px; }
@media (max-width:1099.98px){
  .cu-c > .cu-c-in > .cu-c-cab{ padding:72px 16px 0; gap:14px; }
  .cu-c-sub{ font-size:16px; max-width:340px; }
  .cu-c-cab + .cu-bajada{ margin-top:36px; height:110px; }
}
.cu-c-cab + .cu-anillo-zona{ margin-top:8px; }   /* 05-10: sin línea, el aro justo debajo del subtítulo */
@media (max-width:1099.98px){ .cu-c-cab + .cu-anillo-zona{ margin-top:16px; } }

/* ===================== v3.8 (05-10-2026, dueño): el móvil, como en el ordenador =====================
   · cabecera: «Un empleado · Una cosa cada vez» a la izquierda y «Un agente IA · Todo a la vez» a la derecha, más pequeños, con el haz en medio; la foto debajo
   · el marcador se reparte: las horas y el sueldo de la persona, ENCIMA de la persona; las 168 h del agente, ENCIMA del robot; el «vs» entre los dos, sobre la línea verde */
@media (max-width:1099.98px){
  .cu-a-zona{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"qa qb" "ha hb" "im im"; column-gap:30px; align-items:start; padding-inline:16px; }
  .cu-quien-a{ grid-area:qa; justify-self:end; margin:0 0 8px; }
  .cu-quien-b{ grid-area:qb; justify-self:start; margin:0 0 8px; z-index:6; }
  .cu-a-zona > .cu-h2{ max-width:none; margin:0; font-size:clamp(22px, 6.6vw, 30px); line-height:1.06; }
  .cu-h2-a{ grid-area:ha; text-align:right; }
  .cu-h2-b{ grid-area:hb; text-align:left; }
  .cu-mitad-p{ grid-area:im; justify-self:center; margin-top:22px; }
  .cu-haz, .cu-haz-ancho{ top:0; height:calc(var(--cab, 120px) + var(--w) * 1.0714 - 104px); }   /* --cab: lo pone el JS (alto de la cabecera) */

  .cu-lienzo{ display:flex; flex-direction:column; }
  .cu-marcador{ display:contents; }
  .cu-marca{ position:relative; inset:auto; display:flex; flex-direction:column; align-items:center; text-align:center; width:auto; }   /* inset:auto: fuera el right/left:776px del escritorio */
  .cu-marca-p > *, .cu-marca-a > *{ justify-self:auto; text-align:center; }
  .cu-marca-p{ order:1; } .cu-lado-p{ order:2; } .cu-vs{ order:3; } .cu-marca-a{ order:4; } .cu-lado-a{ order:5; }
  .cu-rotulo{ margin-bottom:6px; }
  .cu-cifra{ font-size:64px; }
  .cu-semana{ width:210px; margin-top:14px; }
  .cu-linea{ margin-top:8px; }
  .cu-costes{ justify-content:center; gap:28px; margin-top:24px; }
  .cu-costes p{ flex:0 1 150px; max-width:none; text-align:center; }
  .cu-lado-p{ margin-top:4px; }
  .cu-lado-a::before{ display:none; }
  .cu-vs{ position:relative; align-self:center; margin:56px 0 44px; }
  .cu-vs::before{ content:''; position:absolute; z-index:-1; left:50%; top:50%; width:min(528px, calc(100vw - 32px)); height:1px; transform:translate(-50%, -50%);
    background:linear-gradient(90deg, transparent, #3cc1a0 20%, #3cc1a0 80%, transparent); box-shadow:0 0 12px rgba(60,193,160,.5); }
  .cu-esc-a{ margin-top:96px; }
}

/* ===================== v3.9 (05-10-2026, dueño): en el móvil, la línea crece con el scroll y se une al semicírculo, que se enciende al llegar =====================
   --haz (0-1, largo de la línea) y --hz (0-1, luz del semicírculo) los pone cuentas.js; sin JS o con movimiento reducido valen 1 (todo encendido). */
@media (max-width:1099.98px){
  .cu-haz i{ transform:scaleY(var(--haz, 1)); }
  .cu-haz-ancho{ opacity:calc(.2 + .8 * var(--haz, 1)); }
  .cu-haz::after{ content:''; position:absolute; left:50%; top:calc(var(--haz, 1) * 100%); width:9px; height:9px; margin:-5px 0 0 -4.5px; border-radius:50%;
    background:#d6fff2; box-shadow:0 0 0 4px rgba(60,193,160,.25), 0 0 16px rgba(60,193,160,.9); opacity:calc((1 - var(--hz, 1)) * min(1, var(--haz, 1) * 20)); }
  .cu-mitad-p::before{ opacity:calc(.25 + .75 * var(--hz, 1)); transform:scaleX(calc(.4 + .6 * var(--hz, 1))); }
  .cu-mitad-p::after{ box-shadow:0 -1px 0 rgba(60,193,160, calc(.2 + .45 * var(--hz, 1))), 0 -50px 80px -40px rgba(60,193,160, calc(.08 + .32 * var(--hz, 1))); }
  .s-cuentas.cerca .cu-haz{ animation:none; }
}