/* ============================================================
   Bloque "Nuestro servicio" + "Cuánto pierdes hoy" + "Cómo empezamos"
   y la calculadora de recuperación. Las tres secciones comparten un
   único fondo (.cn-bloque) con zonas de luz y sombra estáticas.
   ============================================================ */
.cn-bloque,.cn-ov{
  --cn-deep:#020c24;
  --cn-base:#04173d;
  --cn-fg:#f1f5ff;
  --cn-soft:#c4d3f2;
  --cn-muted:#8fa3c9;
  --cn-cyan:#3fd6f0;
  --cn-good:#3ddc97;
  --cn-bad:#ff7d7d;
  --cn-glass:rgba(16,32,64,.55);
  --cn-line:rgba(170,200,255,.14);
  --cn-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cn-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  position:relative;overflow:hidden;
  color:var(--cn-fg);font-family:var(--cn-display);line-height:1.55;
  background:
    radial-gradient(55% 22% at 12% 6%, rgba(31,99,219,.55) 0%, transparent 70%),
    radial-gradient(40% 18% at 92% 14%, rgba(43,179,230,.22) 0%, transparent 70%),
    radial-gradient(70% 16% at 50% 33%, rgba(2,12,36,.85) 0%, transparent 75%),
    radial-gradient(45% 20% at 85% 52%, rgba(31,99,219,.5) 0%, transparent 70%),
    radial-gradient(35% 16% at 8% 60%, rgba(43,179,230,.16) 0%, transparent 70%),
    radial-gradient(60% 18% at 30% 88%, rgba(31,99,219,.42) 0%, transparent 70%),
    radial-gradient(40% 14% at 95% 96%, rgba(2,12,36,.9) 0%, transparent 70%),
    linear-gradient(180deg, var(--cn-deep) 0%, var(--cn-base) 18%, #062259 48%, var(--cn-base) 78%, var(--cn-deep) 100%);
}
.cn-bloque::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);}
.cn-bloque h2,.cn-bloque h3,.cn-bloque h4{margin:0;text-wrap:balance;color:var(--cn-fg);font-family:var(--cn-display);letter-spacing:normal}
.cn-bloque p{margin:0}
.cn-ov{font-family:var(--cn-display);color:var(--cn-fg);line-height:1.55}
.cn-ov h2,.cn-ov p{margin:0;color:var(--cn-fg);font-family:var(--cn-display);letter-spacing:normal}
.cn-sec{position:relative;padding:84px 24px;scroll-margin-top:72px}
@media (max-width:560px){.cn-sec{padding:56px 16px}}
.cn-sec + .cn-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(680px,80%);height:1px;background:linear-gradient(90deg,transparent,rgba(170,200,255,.22),transparent)}
.cn-in{max-width:1080px;margin:0 auto}

.cn-head{text-align:center;display:grid;gap:10px;margin-bottom:40px;justify-items:center}
.cn-ey{font-family:var(--cn-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cn-cyan)}
.cn-head h2{font-size:clamp(26px,3.6vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.cn-head p{color:var(--cn-soft);font-size:17px;max-width:52ch}

.cn-card{background:var(--cn-glass);border:1px solid var(--cn-line);border-radius:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 40px rgba(2,8,24,.25)}

/* Nuestro servicio */
.cn-ben{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.cn-ben{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cn-ben{grid-template-columns:minmax(0,1fr)}}
.cn-bc{padding:26px 22px;display:grid;gap:14px;align-content:start;transition:transform .2s ease,border-color .2s ease}
.cn-bc:hover{transform:translateY(-3px);border-color:rgba(63,214,240,.4)}
.cn-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(63,214,240,.22),rgba(31,99,219,.18));border:1px solid rgba(63,214,240,.35);color:var(--cn-cyan)}
.cn-ic svg{width:23px;height:23px}
.cn-bc h3{font-size:19px;font-weight:700;line-height:1.25}
.cn-bc p{font-size:14.5px;color:var(--cn-soft)}

/* Cuánto pierdes hoy */
.cn-imp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:stretch;max-width:820px;margin:0 auto}
@media (max-width:640px){.cn-imp{grid-template-columns:minmax(0,1fr)}.cn-vs{justify-self:center;transform:rotate(90deg)}}
.cn-ic2{padding:28px;display:grid;gap:8px}
.cn-ic2 .cn-lb{font-size:13px;font-weight:700}
.cn-ic2 .cn-big{font-size:clamp(48px,6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.cn-ic2 p{font-size:15px;color:var(--cn-soft)}
.cn-ic2.cn-bad .cn-lb,.cn-ic2.cn-bad .cn-big{color:var(--cn-bad)}
.cn-ic2.cn-good{border-color:rgba(61,220,151,.4);background:linear-gradient(160deg,rgba(61,220,151,.12),var(--cn-glass) 60%)}
.cn-ic2.cn-good .cn-lb,.cn-ic2.cn-good .cn-big{color:var(--cn-good)}
.cn-vs{align-self:center;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--cn-deep);border:1px solid rgba(255,255,255,.16);color:var(--cn-soft)}
.cn-foot{text-align:center;margin-top:26px;display:grid;gap:14px;justify-items:center}
.cn-foot p{font-size:17px;color:var(--cn-soft)}
.cn-foot strong{color:#fff}
.cn-calc-btn{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;border-radius:12px;padding:13px 22px;font-family:inherit;cursor:pointer;
  border:1px solid rgba(63,214,240,.55);background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(63,214,240,.15),0 0 18px rgba(63,214,240,.28),inset 0 0 12px rgba(63,214,240,.08);transition:background .2s ease,box-shadow .2s ease}
.cn-calc-btn:hover{background:rgba(63,214,240,.1);box-shadow:0 0 0 1px rgba(63,214,240,.3),0 0 26px rgba(63,214,240,.45),inset 0 0 12px rgba(63,214,240,.12)}
.cn-calc-btn:focus-visible,.cn-x:focus-visible,.cn-modal input[type=range]:focus-visible,.cn-cta:focus-visible{outline:2px solid var(--cn-cyan);outline-offset:2px}
.cn-src{font-size:12px;color:var(--cn-muted)}

/* Cómo empezamos */
.cn-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:860px){.cn-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.cn-steps{grid-template-columns:minmax(0,1fr)}}
.cn-st{padding:24px 22px;display:grid;gap:8px;align-content:start}
.cn-st .cn-k{font-family:var(--cn-mono);font-size:14px;color:var(--cn-cyan)}
.cn-st h3{font-size:18px}
.cn-st p{font-size:14.5px;color:var(--cn-soft)}

/* Calculadora (ventana) */
.cn-ov{position:fixed;inset:0;z-index:1000;background:rgba(2,8,24,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;overflow-y:auto}
.cn-ov[hidden]{display:none}
.cn-modal{width:100%;max-width:880px;background:linear-gradient(160deg,#0d2453,#08173a);border:1px solid var(--cn-line);border-radius:20px;padding:28px;display:grid;gap:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative}
@media (max-width:560px){.cn-modal{padding:20px}}
.cn-m-head{display:grid;gap:6px;padding-right:40px}
.cn-m-head h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.cn-ov .cn-m-head p{color:var(--cn-soft);font-size:14.5px}
.cn-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:10px;border:1px solid var(--cn-line);background:transparent;color:var(--cn-fg);font-size:20px;line-height:1;cursor:pointer}
.cn-x:hover{background:rgba(255,255,255,.08)}
.cn-m-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:640px){.cn-m-body{grid-template-columns:minmax(0,1fr)}}
.cn-fields{display:grid;gap:20px;align-content:start}
.cn-grp{display:grid;gap:16px}
.cn-grp + .cn-grp{padding-top:18px;border-top:1px solid var(--cn-line)}
.cn-gt{font-family:var(--cn-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cn-cyan)}
.cn-field{display:grid;gap:8px}
.cn-field label{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--cn-soft)}
.cn-field output{font-family:var(--cn-mono);color:var(--cn-cyan);white-space:nowrap;font-variant-numeric:tabular-nums}
.cn-modal input[type=range]{width:100%;accent-color:var(--cn-cyan)}
.cn-res{padding:22px;display:grid;gap:16px;align-content:start}
.cn-res .cn-k{font-size:13px;color:var(--cn-soft)}
.cn-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cn-lose{font-size:22px;font-weight:700;color:var(--cn-bad);font-variant-numeric:tabular-nums}
.cn-lose.cn-neutral{color:#fff}
.cn-win{font-size:clamp(32px,5vw,42px);font-weight:800;letter-spacing:-.03em;color:var(--cn-good);line-height:1.05;font-variant-numeric:tabular-nums}
.cn-win.cn-t{font-size:clamp(28px,4.4vw,36px)}
.cn-res hr{border:0;border-top:1px solid var(--cn-line);margin:0}
.cn-cta{display:inline-flex;justify-content:center;align-items:center;background:#2f55d4;color:#fff;font-weight:700;font-size:15px;border-radius:12px;padding:13px 20px;text-decoration:none}
.cn-cta:hover{filter:brightness(1.12);color:#fff}
.cn-ov .cn-m-note{font-size:12px;color:var(--cn-muted)}
body.cn-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.cn-bc,.cn-calc-btn{transition:none}.cn-bc:hover{transform:none}}