/* ============================================================
   ADVERSIVE × MERCURY v2 — editorial fintech
   Oscuro · tipografía gigante · mono para datos · grano sutil
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:        #090c0a;
  --bg-2:      #0c100e;
  --surface:   rgba(255,255,255,.032);
  --surface-2: rgba(255,255,255,.06);
  --border:    rgba(255,255,255,.08);
  --border-2:  rgba(255,255,255,.15);
  --text:      #f1f3f0;
  --muted:     rgba(241,243,240,.58);
  --dim:       rgba(241,243,240,.32);
  --faint:     rgba(241,243,240,.14);

  --accent:      oklch(0.78 0.10 162);
  --accent-2:    oklch(0.72 0.105 162);
  --accent-ink:  #061009;
  --accent-soft: oklch(0.78 0.10 162 / .12);
  --accent-line: oklch(0.78 0.10 162 / .28);
  --accent-glow: oklch(0.78 0.10 162 / .22);

  /* crema editorial de contraste */
  --cream:    #e9e4d6;
  --cream-2:  #f3efe4;
  --cream-ink:#161412;
  --cream-muted: rgba(22,20,18,.56);
  --cream-dim:   rgba(22,20,18,.40);
  --cream-border:rgba(22,20,18,.12);

  /* dashboard claro */
  /* dashboard glass — transparente sobre el dark */
  --paper:rgba(255,255,255,.045); --paper-2:rgba(255,255,255,.06); --paper-3:rgba(255,255,255,.09);
  --ink:var(--text); --ink-muted:var(--muted); --ink-dim:var(--dim);
  --paper-border:rgba(255,255,255,.09); --paper-accent:var(--accent);

  --ff:  'Onest', -apple-system, system-ui, sans-serif;
  --mono:'Onest', -apple-system, system-ui, sans-serif;
  --cx: 1240px;
  --sec: 150px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--ff); background:var(--bg); color:var(--text);
  line-height:1.55; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* grano + ambiente */
#grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
#amb{position:fixed; inset:0; z-index:0; pointer-events:none}
.amb-glow{position:absolute; left:62%; top:-340px; width:1000px; height:820px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%, var(--accent-glow), transparent 60%)}
.amb-grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:84px 84px;
  mask-image:radial-gradient(ellipse 80% 55% at 60% 12%, #000, transparent 75%)}

.wrap{max-width:var(--cx); margin:0 auto; padding:0 48px; position:relative; z-index:2}
.mono{font-family:var(--mono); font-feature-settings:"ss01"}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:9px}
.eyebrow.dim{color:var(--dim)}
.eyebrow::before{content:''; width:22px; height:1px; background:currentColor; opacity:.6}

.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-family:var(--ff);
  font-weight:550; text-decoration:none; cursor:pointer; border-radius:9px;
  transition:transform .15s, background .2s, border-color .2s, opacity .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink); padding:11px 22px; font-size:14.5px; border:none}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:transparent; color:var(--text); padding:11px 22px; font-size:14.5px; border:1px solid var(--border-2)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{padding:14px 28px; font-size:15px; border-radius:11px}
.btn-md{padding:11px 22px; font-size:14px; border-radius:10px; font-weight:600}
.btn-xl{padding:13px 26px; font-size:15px; border-radius:11px; font-weight:600}

/* ───── TICKER ───── */
.ticker{position:fixed; top:0; left:0; right:0; z-index:101; height:34px; overflow:hidden;
  background:var(--bg-2); border-bottom:1px solid var(--border); display:flex; align-items:center}
.ticker-track{display:flex; gap:46px; white-space:nowrap; animation:scroll-x 32s linear infinite; padding-left:46px}
.ticker-track span{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); display:inline-flex; align-items:center; gap:9px}
.ticker-track span b{color:var(--accent); font-weight:400}
.ticker-track span::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.7}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ───── NAV ───── */
nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:flex-start;
  padding:30px 48px 22px; transition:transform .5s, background .3s, backdrop-filter .3s}
nav.solid{background:rgba(9,12,10,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.nav-logo{display:flex; align-items:center; justify-content:flex-start; text-decoration:none; color:var(--text)}
.nav-mark{display:none; width:auto; opacity:.98; filter:drop-shadow(0 0 10px rgba(255,255,255,.05))}
.nav-links{display:flex; gap:30px; list-style:none; position:absolute; left:50%; transform:translateX(-50%)}
.nav-links a{font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--text)}

/* ───── HERO ───── */
.hero{padding:182px 48px 110px; position:relative; z-index:2; max-width:var(--cx); margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center}
.hero::after{content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:1000px; height:640px; max-width:92vw; border-radius:50%; background:radial-gradient(ellipse at 50% 50%, var(--accent-glow), transparent 62%); z-index:-1; pointer-events:none}
.hero .eyebrow{justify-content:center}
.hero-tag{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border-2); border-radius:100px; padding:8px 20px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:52px}
.hero-tag-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:gvBlink 2.4s ease-in-out infinite}
.hero h1{font-size:clamp(52px,7.6vw,104px); font-weight:600; line-height:.96; letter-spacing:-.055em; margin:0 auto; max-width:16ch; text-wrap:balance}
.hero h1 .accent{color:var(--accent); font-style:italic; font-weight:500}
.hero-lead{font-size:clamp(18px,1.65vw,24px); color:var(--muted); line-height:1.5; margin:42px auto 0; max-width:620px; text-wrap:pretty}
.hero-btns{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:50px}
.hero-btns .btn{min-width:186px; padding:15px 30px; font-size:16px; border-radius:12px; font-weight:650}
.hero-meta{margin-top:34px; display:flex; gap:48px; justify-content:center}
.hm{display:flex; flex-direction:column; gap:5px; align-items:center}
.hm .v{font-size:24px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.hm .v.g{color:var(--accent)}
.hm .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim)}

/* DASHBOARD claro, ancho, desbordado */
.dash{width:min(912px,100%); margin:128px auto 0; color:var(--ink);
  background:
    radial-gradient(135% 100% at 50% -12%, rgba(124,192,156,.07), transparent 52%),
    linear-gradient(180deg, #101614 0%, #0a0e0c 100%);
  border:1px solid var(--border-2); border-radius:18px; overflow:hidden;
  box-shadow:0 60px 150px -50px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; z-index:2}
.dash::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  padding:1px; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--accent-glow)} 100%{box-shadow:0 0 0 7px transparent}}
.dash-kpis{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--paper-border); position:relative; z-index:1}
.kpi{padding:28px 24px 22px; border-right:1px solid var(--paper-border)}
.kpi:last-child{border-right:none}
.kpi-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:5px}
.kpi-val{font-size:50px; font-weight:600; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink)}
.kpi-val.g{color:var(--paper-accent)}
.kpi-val span{font-size:.55em; font-weight:500}
.kpi-sub{font-family:var(--mono); font-size:11px; color:var(--paper-accent); margin-top:9px}
.kpi-sub.flat{color:var(--ink-dim)}
.dash-table{padding:6px 18px 16px; position:relative; z-index:1; overflow:hidden}
.kpi-lbl,.kpi-sub,.kpi-val,.t-head span,.t-tag,.t-name,.c{font-feature-settings:"ss01"}
.t-head,.t-row{display:grid; grid-template-columns:1.8fr .82fr .66fr .54fr .54fr .8fr; gap:10px; align-items:center}
.t-head{padding:13px 8px 11px; border-bottom:1px solid var(--paper-border)}
.t-head span{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim)}
.t-head span:not(:first-child),.t-row .c{text-align:right; justify-self:end}
.t-row{padding:12px 8px; border-bottom:1px solid var(--paper-border); transition:background .15s, transform .38s cubic-bezier(.4,0,.2,1), opacity .38s}
.t-row.t-exit{transform:translateX(115%); opacity:0; pointer-events:none}
.t-row.t-enter{transform:translateY(18px); opacity:0; transition:none !important}
.t-row:last-child{border-bottom:none}
.t-row:hover{background:rgba(255,255,255,.03)}
.t-ad{display:flex; align-items:center; gap:10px; min-width:0}
.t-tag{font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:5px; flex-shrink:0}
.t-tag.ugc{background:var(--accent-soft); color:var(--accent)}
.t-tag.est{background:rgba(120,150,210,.16); color:#8aa6da}
.t-tag.vid{background:rgba(210,150,90,.18); color:#cf9a5c}
.t-name{font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.t-name .star{color:var(--paper-accent)}
.c{font-family:var(--mono); font-size:12.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums}
.c.g{color:var(--paper-accent); font-weight:500}

/* ───── MARQUEE LOGOS ───── */
.marquee{padding:150px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; position:relative; z-index:2}
.marquee::before,.marquee::after{content:''; position:absolute; top:0; bottom:0; width:140px; z-index:3; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg, var(--bg), transparent)}
.marquee::after{right:0; background:linear-gradient(270deg, var(--bg), transparent)}
.marquee-lbl{position:absolute; left:48px; top:50%; transform:translateY(-50%); z-index:4; font-family:var(--mono); font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:var(--dim); background:var(--bg); padding-right:18px}
.mq-track{display:flex; gap:72px; white-space:nowrap; animation:scroll-x 28s linear infinite; padding-left:230px}
.mq-track .logo{display:flex; align-items:center; justify-content:center; flex-shrink:0; height:42px}
.mq-track .logo img{display:block; width:auto; height:100%; opacity:.9; filter:drop-shadow(0 0 12px rgba(255,255,255,.035))}
.mq-track .logo.is-canela img{height:46px}
.mq-track .logo.is-strong img{height:30px}
.mq-track .logo.is-mikala img{height:38px}
.mq-track .logo.is-candy img{height:36px}
.mq-track .logo.is-yugen img{height:34px}

/* ───── MANIFESTO ───── */
.manifesto{padding:150px 48px; text-align:center; position:relative; z-index:2; max-width:1100px; margin:0 auto}
.manifesto .idx{font-size:11.5px; color:var(--accent); letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-bottom:34px}
.manifesto h2{font-size:clamp(38px,5vw,68px); font-weight:500; letter-spacing:-.035em; line-height:1.08}
.manifesto h2 .accent{color:var(--accent); font-style:italic; font-weight:500}
.manifesto h2 .ghost{color:var(--dim)}
/* tweak: énfasis editorial (serif) en lugar de cursiva */
.manifesto.editorial h2 .accent{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:0; font-size:1.08em}

/* ───── SISTEMA / MÉTODO GAP ───── */
.system{padding:var(--sec) 0; position:relative; z-index:2}
.sys-head{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:48px}
.sys-head h2,.sys-title{font-size:clamp(38px,5vw,68px); font-weight:600; letter-spacing:-.045em; line-height:.95; margin-top:0}
.sys-title .gap-word{color:var(--accent)}
.sys-intro{font-size:16px; color:var(--muted); line-height:1.6; max-width:420px; align-self:end; padding-bottom:8px}

/* === visual del método === */
.gap-viz{margin-bottom:60px}
.gap-viz .gv-bars{display:none}
.gap-viz[data-variant="barras"] .gv-radar{display:none}
.gap-viz[data-variant="barras"] .gv-bars{display:block}

/* variante A · radar de huecos */
.gv-radar{position:relative; height:300px; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:var(--bg-2)}
.gv-field{position:absolute; inset:0;
  background-image:radial-gradient(circle, color-mix(in oklch, var(--text) 22%, transparent) 1.5px, transparent 1.6px);
  background-size:30px 30px; background-position:15px 15px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gv-scan{position:absolute; top:0; bottom:0; left:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow:0 0 24px 6px var(--accent-glow); opacity:.9}
.gv-scan::before{content:''; position:absolute; top:0; bottom:0; right:0; width:80px;
  background:linear-gradient(90deg, transparent, var(--accent-soft)); transform:translateX(-100%)}
.gv-gap{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); pointer-events:none}
.gv-ret{display:block; width:34px; height:34px; border:1.5px solid var(--border-2); border-radius:7px;
  position:relative; transition:border-color .3s, box-shadow .3s, transform .3s; opacity:.5}
.gv-ret::before,.gv-ret::after{content:''; position:absolute; background:var(--accent); opacity:0; transition:opacity .3s}
.gv-ret::before{left:50%; top:-7px; bottom:-7px; width:1px; transform:translateX(-50%)}
.gv-ret::after{top:50%; left:-7px; right:-7px; height:1px; transform:translateY(-50%)}
.gv-lbl{position:absolute; left:46px; top:50%; transform:translateY(-50%) translateX(-6px);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--accent); white-space:nowrap;
  opacity:0; transition:opacity .35s, transform .35s}
.gv-gap.on .gv-ret{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); transform:scale(1.12); opacity:1}
.gv-gap.on .gv-ret::before,.gv-gap.on .gv-ret::after{opacity:1}
.gv-gap.on .gv-lbl{opacity:1; transform:translateY(-50%) translateX(0)}
.gv-cap{position:absolute; left:18px; bottom:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim)}
.gv-cap::before{content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent);
  margin-right:8px; vertical-align:middle; animation:gvBlink 1.6s ease-in-out infinite}
@keyframes gvBlink{0%,100%{opacity:1}50%{opacity:.2}}

/* variante B · barras de saturación */
.gv-bars{border:1px solid var(--border); border-radius:16px; background:var(--bg-2); padding:34px 34px 26px}
.gv-bar{display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:center; margin-bottom:22px}
.gvb-name{font-size:18px; font-weight:600; letter-spacing:-.01em}
.gvb-track{position:relative; height:30px; border-radius:7px; overflow:hidden;
  background:repeating-linear-gradient(135deg, color-mix(in oklch,var(--text) 7%,transparent) 0 6px, transparent 6px 12px),
             var(--surface)}
.gvb-fill{position:absolute; inset:0 auto 0 0; width:0; border-radius:7px 0 0 7px;
  background:repeating-linear-gradient(135deg, color-mix(in oklch,var(--text) 16%,transparent) 0 6px, color-mix(in oklch,var(--text) 9%,transparent) 6px 12px);
  border-right:1px solid var(--border-2); transition:width 1.1s cubic-bezier(.4,0,.1,1)}
.gv-bars.drawn .gvb-fill{width:var(--sat)}
.gvb-gap{position:absolute; top:0; bottom:0; left:var(--sat); right:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--accent);
  background:var(--accent-soft); border:1px dashed var(--accent-line); border-radius:0 7px 7px 0;
  opacity:0; transition:opacity .5s .9s}
.gv-bars.drawn .gvb-gap{opacity:1}
.gvb-foot{display:flex; justify-content:space-between; margin-left:118px; margin-top:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}

.mod-list{border-top:1px solid var(--border)}
.mod-row{display:grid; grid-template-columns:140px 1fr auto; gap:40px; align-items:center; padding:38px 8px; border-bottom:1px solid var(--border);
  position:relative; transition:padding-left .35s, background .3s; cursor:default}
.mod-row::after{content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--accent); transition:width .5s ease}
.mod-row:hover{padding-left:24px; background:linear-gradient(90deg, var(--accent-soft), transparent 60%)}
.mod-row:hover::after{width:100%}
.mod-row:hover .mod-idx{color:var(--accent); -webkit-text-stroke-color:var(--accent)}
.mod-idx{font-size:64px; font-weight:600; letter-spacing:-.04em; line-height:.8; color:transparent; -webkit-text-stroke:1.2px var(--border-2); transition:color .35s, -webkit-text-stroke-color .35s; font-variant-numeric:tabular-nums}
.mod-body h3{font-size:25px; font-weight:600; letter-spacing:-.02em; margin-bottom:7px}
.mod-body p{font-size:15px; color:var(--muted); line-height:1.5; max-width:520px}
.mod-tag{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.04em; white-space:nowrap; padding:7px 14px; border:1px solid var(--border); border-radius:100px; transition:border-color .3s, color .3s}
.mod-row:hover .mod-tag{border-color:var(--accent-line); color:var(--accent)}

/* ───── PROCESO (stepper grande) ───── */
.process{padding:var(--sec) 0; position:relative; z-index:2}
.proc-head{text-align:center; margin-bottom:80px}
.proc-head h2{font-size:clamp(30px,3.6vw,50px); font-weight:600; letter-spacing:-.03em; margin-top:18px}
.proc-wrap{position:relative}
.proc-rail{position:absolute; top:33px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-line) 8%, var(--accent-line) 92%, transparent)}
.proc-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative}
.pstep{text-align:center; display:flex; flex-direction:column; align-items:center; padding:0 14px}
.pstep .circ{width:66px; height:66px; border-radius:50%; background:var(--bg-2); border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:18px; color:var(--accent);
  margin-bottom:28px; position:relative; z-index:2; transition:border-color .3s, transform .3s, box-shadow .3s}
.pstep:hover .circ{border-color:var(--accent); transform:translateY(-4px); box-shadow:0 14px 36px -14px var(--accent-glow)}
.pstep h3{font-size:22px; font-weight:600; letter-spacing:-.02em; margin-bottom:11px}
.pstep p{font-size:14px; color:var(--muted); line-height:1.6; max-width:240px; margin:0 auto 16px}
.pstep .out{font-family:var(--mono); font-size:12px; color:var(--accent); padding-top:14px; border-top:1px solid var(--border); width:100%}

/* ───── CASOS (franjas full-width: narrativa + panel) ───── */
.cases{padding:var(--sec) 0; position:relative; z-index:2}
.cases-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:80px; flex-wrap:wrap; gap:16px}
.cases-head h2{font-size:clamp(30px,3.6vw,50px); font-weight:600; letter-spacing:-.03em; margin-top:18px}
.cases-head p{font-family:var(--mono); font-size:12.5px; color:var(--muted); max-width:280px; text-align:right}
.case-rows{display:flex; flex-direction:column}
.case-row{display:grid; grid-template-columns:1fr 1.12fr; gap:72px; align-items:start; padding:96px 0; border-top:1px solid var(--border)}
.case-copy{display:flex; flex-direction:column; align-items:flex-start; gap:32px}
.cr-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.cr-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim)}
.case-badge{font-family:var(--mono); font-size:11px; padding:4px 11px; border-radius:100px; background:var(--accent-soft); color:var(--accent)}
.cr-headline{font-size:clamp(28px,3vw,42px); font-weight:600; letter-spacing:-.03em; line-height:1.06; text-wrap:balance; margin:-4px 0 0}
.cr-headline .g{color:var(--accent)}
.cr-headline .from{color:var(--muted)}
.cr-headline .sus{display:block; margin-top:6px; font-size:.52em; font-weight:500; letter-spacing:-.01em; color:var(--dim)}
.cr-desc{font-size:16px; color:var(--muted); line-height:1.62; max-width:48ch; margin:0}
.cr-stats{display:flex; gap:32px; flex-wrap:nowrap; width:100%}
.cr-stat{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
.cr-stat .v{font-size:22px; font-weight:600; color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.cr-stat .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); line-height:1.3; min-height:2.6em}
.cr-quote{font-size:16px; color:var(--text); line-height:1.5; border-top:1px solid var(--border); padding-top:20px; margin:2px 0 0; max-width:48ch}
.cr-quote cite{display:block; margin-top:9px; font-style:normal; font-family:var(--mono); font-size:12px; color:var(--dim)}
.case-panel{position:relative}
.case-panel .meta-shot{margin:0}

/* panel "Resumen del rendimiento" — réplica fiel de Meta Ads Manager */
.meta-shot{
  --m-ink:#1c2b33; --m-sec:#65676b; --m-line:#e9ebed; --m-line2:#ccd0d5;
  --m-teal:#1ec8be; --m-teal-soft:rgba(30,200,190,.13);
  background:#fff; border-radius:16px; padding:20px 22px 16px;
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--m-ink); display:flex; flex-direction:column; gap:18px;
  box-shadow:0 22px 48px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.05);
  -webkit-font-smoothing:antialiased}
.ms-metrics{display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); gap:12px}
.ms-metric{display:flex; flex-direction:column; gap:9px; padding:16px 18px; border:1px solid transparent; border-radius:8px; min-width:0}
.ms-metric.sel{border-color:var(--m-line2)}
.ms-m-lbl{display:flex; align-items:flex-start; justify-content:space-between; gap:6px; font-size:11px; font-weight:700; line-height:1.25; color:var(--m-ink); min-height:2.4em}
.ms-m-lbl span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0}
.ms-info{display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex-shrink:0; margin-top:1px;
  border-radius:50%; background:#bcc0c4; color:#fff; font:700 9px/1 inherit; font-style:normal}
.ms-m-val{font-size:16px; font-weight:600; letter-spacing:-.035em; color:var(--m-ink); font-variant-numeric:tabular-nums; line-height:1.1; white-space:nowrap}
.ms-chart-title{font-size:13px; font-weight:700; color:var(--m-ink); margin-top:16px}
.ms-chart{height:150px; margin:0 -2px}
.ms-chart svg{width:100%; height:100%; display:block; overflow:visible}
.ms-grid{stroke:var(--m-line); stroke-width:1}
.ms-base{stroke:#d8dade; stroke-width:1}
.ms-yl{fill:#8a8d91; font-family:inherit; font-size:10px}
.ms-xl{fill:#8a8d91; font-family:inherit; font-size:10px; text-anchor:middle}
.ms-area{fill:var(--m-teal-soft); opacity:0; transition:opacity 1s ease .5s}
.ms-line{fill:none; stroke:var(--m-teal); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
  transition:stroke-dashoffset 1.9s cubic-bezier(.4,0,.1,1)}
.ms-dot{fill:var(--m-teal); stroke:#fff; stroke-width:2}
.meta-shot.drawn .ms-area{opacity:1}
.ms-legend{display:flex; justify-content:center; gap:24px; padding-top:16px; border-top:1px solid var(--m-line);
  font-size:12px; color:var(--m-sec); flex-wrap:wrap}
.ms-leg{display:inline-flex; align-items:center; gap:7px; min-width:0}
.ms-sq{width:11px; height:11px; border-radius:2px; background:var(--m-teal)}
.ms-revicon{width:13px; height:13px; border-radius:50%; border:1.5px solid var(--m-sec);
  border-top-color:transparent; transform:rotate(45deg)}

/* ───── CTA ───── */
.cta{padding:150px 48px; position:relative; z-index:2; overflow:hidden; text-align:center}
.cta#contacto{scroll-margin-top:104px}
.cta-glow{position:absolute; left:50%; bottom:-160px; transform:translateX(-50%); width:820px; height:540px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%, var(--accent-glow), transparent 64%)}
.cta .big-bg{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-size:32vw; font-weight:600;
  color:rgba(255,255,255,.018); letter-spacing:-.05em; pointer-events:none; white-space:nowrap; z-index:-1}
.cta h2{font-size:clamp(38px,5vw,68px); font-weight:600; letter-spacing:-.045em; line-height:.96; margin-bottom:22px; position:relative}
.cta h2 .accent{color:var(--accent); font-style:italic; font-weight:500}
.cta p{font-size:18px; color:var(--muted); margin-bottom:40px}
.cta-form{display:flex; gap:10px; justify-content:center; max-width:480px; margin:0 auto 16px}
.cta-in{flex:1; background:var(--surface); border:1px solid var(--border-2); border-radius:11px; padding:15px 18px; font-size:15px; color:var(--text); font-family:var(--ff); outline:none; transition:border-color .2s}
.cta-in::placeholder{color:var(--dim)}
.cta-in:focus{border-color:var(--accent-line)}
.cta-fn{font-family:var(--mono); font-size:11px; color:rgba(212,219,215,.48)}

/* ───── FOOTER ───── */
footer{border-top:1px solid var(--border); padding:150px 0; position:relative; z-index:2}
.ft-word{font-size:clamp(60px,13vw,180px); font-weight:600; letter-spacing:-.05em; line-height:.85; color:var(--text);
  margin-bottom:64px; display:flex; align-items:baseline; gap:18px}
.ft-word .dotmark{width:.12em; height:.12em; border-radius:50%; background:var(--accent); flex-shrink:0}
.ft-grid{display:grid; grid-template-columns:2fr minmax(160px,1fr) minmax(220px,1.2fr); gap:40px; margin-bottom:54px}
.ft-brand p{font-size:13.5px; color:var(--muted); line-height:1.6; max-width:220px; margin-bottom:20px}
.ft-soc{display:flex; gap:9px}
.ft-soc a{width:34px; height:34px; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; font-family:var(--mono); font-size:11px; transition:border-color .2s, color .2s}
.ft-soc a:hover{border-color:var(--accent-line); color:var(--accent)}
.ft-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:18px}
.ft-col ul{list-style:none; display:flex; flex-direction:column; gap:11px}
.ft-col a{color:var(--muted); text-decoration:none; font-size:13.5px; transition:color .2s}
.ft-col a:hover{color:var(--text)}
.ft-ci{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted)}
.ft-ci svg{color:var(--accent); flex-shrink:0}
.ft-contact{display:flex; flex-direction:column; gap:12px}
.ft-bot{border-top:1px solid var(--border); padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
.ft-bot p{font-family:var(--mono); font-size:11.5px; color:var(--dim)}
.ft-bl{display:flex; gap:22px}
.ft-bl a{font-family:var(--mono); font-size:11.5px; color:var(--dim); text-decoration:none; transition:color .2s}
.ft-bl a:hover{color:var(--muted)}

/* reveal */
.fu{opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease}
.fu.vis{opacity:1; transform:none}

/* ───── TWEAKS ───── */
.tw-btn{position:fixed; bottom:26px; right:26px; z-index:300; width:42px; height:42px; border-radius:12px;
  background:rgba(9,12,10,.9); border:1px solid var(--border-2); color:var(--accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(10px); transition:background .2s}
.tw-btn:hover{background:var(--surface-2)}
.tw-panel{position:fixed; bottom:78px; right:26px; z-index:300; width:244px; padding:20px;
  background:rgba(11,15,12,.95); border:1px solid var(--border-2); border-radius:16px; backdrop-filter:blur(16px);
  display:none; flex-direction:column; gap:20px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.tw-panel.open{display:flex}
.tw-h{font-family:var(--mono); font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--accent)}
.tw-lbl{font-size:12px; color:var(--muted); margin-bottom:10px; display:block; font-weight:500}
.tw-sw{display:flex; gap:9px}
.tw-sw i{width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .2s, border-color .2s}
.tw-sw i:hover{transform:scale(1.12)}
.tw-sw i.on{border-color:#fff}
.tw-seg{display:flex; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:3px}
.tw-seg button{flex:1; font-family:var(--ff); font-size:12px; font-weight:500; padding:6px; border:none; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; transition:background .2s, color .2s}
.tw-seg button.on{background:var(--accent); color:var(--accent-ink); font-weight:600}
.tw-range{-webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px; background:var(--border-2); outline:none}
.tw-range::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--accent); cursor:pointer}

/* dashboard oscuro (tweak) */
.dash.dark{background:#0e1310; color:var(--text); border-color:var(--border-2); box-shadow:0 60px 140px -40px rgba(0,0,0,.85), 0 0 0 1px var(--accent-line)}
.dash.dark .dash-bar{background:#10160f; border-color:var(--border)}
.dash.dark .dash-bar .tl i{background:#2a322d}
.dash.dark .dash-bar .title{color:var(--text)}
.dash.dark .dash-kpis,.dash.dark .kpi,.dash.dark .t-head,.dash.dark .t-row{border-color:var(--border)}
.dash.dark .kpi-lbl,.dash.dark .t-head span,.dash.dark .kpi-sub.flat{color:var(--dim)}
.dash.dark .kpi-val{color:var(--text)}
.dash.dark .kpi-val.g,.dash.dark .c.g,.dash.dark .kpi-sub,.dash.dark .dash-bar .live{color:var(--accent)}
.dash.dark .dash-bar .live i{background:var(--accent); animation:none}
.dash.dark .t-name{color:var(--text)}
.dash.dark .t-name .star{color:var(--accent)}
.dash.dark .c{color:var(--muted)}
.dash.dark .t-row:hover{background:rgba(255,255,255,.03)}
.dash.dark .t-tag.ugc{background:var(--accent-soft); color:var(--accent)}
.dash.dark .t-tag.est{background:rgba(120,150,210,.16); color:#88a4d8}
.dash.dark .t-tag.vid{background:rgba(210,150,90,.16); color:#d09a5a}

/* ═══ HAMBURGER + MOBILE NAV ══════════════════════════════ */
.nav-ham{display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px;
  background:transparent; border:1px solid var(--border-2); border-radius:8px; cursor:pointer; padding:7px; flex-shrink:0; margin-left:auto}
.nav-ham span{display:block; height:1.5px; background:var(--text); border-radius:2px;
  transition:transform .25s, opacity .2s}
.nav-ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-mob{display:none; position:fixed; top:62px; left:0; right:0; z-index:98;
  background:rgba(9,12,10,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); padding:20px 28px 28px; flex-direction:column; gap:6px}
.nav-mob.open{display:flex}
.nav-mob ul{list-style:none; display:flex; flex-direction:column}
.nav-mob li a{display:block; padding:14px 0; font-size:17px; color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--border); transition:color .2s}
.nav-mob li:last-child a{border-bottom:none}
.nav-mob li a:hover{color:var(--text)}
.nav-mob .btn-cta{margin-top:18px; align-self:flex-start;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink); padding:12px 22px; border-radius:9px;
  font-family:var(--ff); font-weight:600; font-size:14.5px; text-decoration:none; border:none}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media(max-width:980px){
  .nav-links{display:none}
  .nav-ham{display:flex}
  .sys-head{grid-template-columns:1fr; gap:30px}
  .mod-row{grid-template-columns:80px 1fr; gap:24px}
  .mod-tag{display:none}
  .mod-idx{font-size:48px}
  .proc-steps{grid-template-columns:1fr 1fr; gap:48px 24px}
  .proc-rail{display:none}
  .case-row{grid-template-columns:1fr; gap:40px; padding:72px 0}
  .cr-desc,.cr-quote{max-width:none}
  .ft-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  nav{padding:14px 20px}
  .nav-mark{display:block; height:30px}
  .wrap,.hero,.manifesto,.cta{padding-left:20px; padding-right:20px}
  .hero{padding-top:96px; padding-bottom:28px}
  .hero-tag{font-size:10.5px; margin-bottom:36px; padding:5px 14px}
  .hero h1{font-size:clamp(38px,9.5vw,56px); max-width:13ch; line-height:1.0}
  .hero-lead{margin-top:22px; font-size:15px}
  .hero-btns{margin-top:30px}

  /* Dashboard — KPIs 2×2, tabla bajo el fold */
  .dash{margin-top:52px; border-radius:14px}
  .dash-kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:26px 8px 22px; border-right:1px solid var(--paper-border); border-bottom:none}
  .kpi:nth-child(even){border-right:none}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--paper-border)}
  .kpi-lbl{font-size:10px; letter-spacing:.05em}
  .kpi-val{font-size:clamp(44px,13vw,60px) !important; letter-spacing:-.04em}
  .kpi-val span{font-size:.5em !important}
  .kpi-num{font-size:clamp(44px,13vw,60px) !important; letter-spacing:-.04em !important; font-family:var(--ff) !important}
  .kpi-sub{font-size:10px; margin-top:7px}

  /* Table — Anuncio + Inversión + ROAS */
  .dash-table{padding:4px 10px 12px}
  .t-head,.t-row{grid-template-columns:1.8fr 0.75fr 0.65fr; gap:6px}
  .t-head .c:nth-child(3),.t-row .c:nth-child(3),
  .t-head .c:nth-child(5),.t-row .c:nth-child(5),
  .t-head .c:nth-child(6),.t-row .c:nth-child(6){display:none}
  .t-tag{font-size:10px; padding:2px 5px}
  .t-name{font-size:13px}
  .c{font-size:11px}

  /* Secciones generales */
  .marquee{padding:64px 0}
  .manifesto{padding:68px 20px}
  .manifesto h2{font-size:clamp(23px,6.2vw,50px); line-height:1.16}
  .marquee::before,.marquee::after{width:72px}
  .marquee-lbl{left:20px; top:24px; transform:none; padding-right:0}
  .mq-track{gap:44px; padding-left:20px}
  .mq-track .logo{height:34px}
  .mq-track .logo.is-canela img{height:38px}
  .mq-track .logo.is-strong img{height:24px}
  .mq-track .logo.is-mikala img{height:31px}
  .mq-track .logo.is-candy img{height:29px}
  .mq-track .logo.is-yugen img{height:28px}
  .system,.process,.cases{padding:72px 0}
  .sys-head{margin-bottom:30px}
  .gap-viz{margin-bottom:34px}
  .mod-row{padding:26px 0}
  .sys-title{font-size:clamp(30px,7vw,52px); line-height:1}
  .sys-intro{font-size:14px; padding-bottom:0}
  .proc-head{margin-bottom:24px}
  .proc-steps{grid-template-columns:1fr 1fr; gap:32px 16px}
  .pstep h3{font-size:18px}
  .pstep p{font-size:13px}
  .cases-head{margin-bottom:34px}
  .case-row{padding:52px 0; gap:32px}
  .cr-headline{font-size:clamp(22px,5.5vw,34px)}
  .cr-desc{font-size:14px; max-width:none}
  .case-copy{gap:24px}
  .cr-stats{gap:24px}
  .cr-stat .v{font-size:18px}
  .cr-stat .l{font-size:9.5px}
  .cta{padding:76px 20px 84px}
  .cta#contacto{scroll-margin-top:88px}
  .cta h2{font-size:clamp(30px,7vw,52px)}
  .cta p{margin-bottom:28px}
  .cta-form{flex-direction:column}
  .cta-in,.btn-lg{width:100%}
  footer{padding:88px 0}
  .ft-word{font-size:clamp(44px,11vw,90px); margin-bottom:32px}
  .ft-grid{grid-template-columns:1fr 1fr; gap:24px}
  .ft-brand{grid-column:1 / -1}
  .ft-bot{padding-top:24px}
}

@media(max-width:430px){
  .hero h1{font-size:38px}
  .hero-tag{font-size:10px; padding:5px 12px; margin-bottom:28px}
  .hero-btns{flex-direction:row; gap:8px; flex-wrap:nowrap}
  .hero-btns .btn{flex:1; justify-content:center; padding:11px 14px; font-size:13.5px}
  .meta-shot{padding:16px 16px 14px}
  .ms-metrics{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:8px}
  .ms-metric{padding:14px 14px 12px}
  .ms-m-lbl{font-size:10.5px; min-height:2.25em}
  .ms-m-val{font-size:14px}
  .ms-legend{gap:10px 14px; font-size:11px}
  .manifesto{padding-top:60px; padding-bottom:60px}
  .system,.process,.cases{padding:60px 0}
  .cases-head{margin-bottom:26px}
  .case-row{padding:44px 0; gap:28px}
  .cta{padding-top:68px; padding-bottom:76px}
  .cta#contacto{scroll-margin-top:82px}
  footer{padding:76px 0}
  .mod-row{grid-template-columns:52px 1fr; gap:14px}
  .mod-idx{font-size:38px}
  .ft-grid{grid-template-columns:1fr; gap:20px}
  .ft-brand{grid-column:auto}
  .cases-head h2{font-size:clamp(26px,7vw,40px)}
}

/* Final v3 refinements */
.kpi{
  display:grid;
  justify-items:center;
  align-content:start;
  row-gap:10px;
  text-align:center;
}

.kpi-lbl{
  margin-bottom:0;
  text-align:center;
}

.kpi-val{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  font-size:60px;
  text-align:center;
}

.kpi-sub{
  margin-top:0;
  text-align:center;
}

.t-head span:first-child{
  justify-self:start;
  text-align:left;
}

.cta-form-modal{
  max-width:none;
}

.audit-modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:32px 20px;
  z-index:140;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}

.audit-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.audit-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5, 8, 6, .76);
  backdrop-filter:blur(12px);
}

.audit-modal-dialog{
  position:relative;
  width:min(100%, 760px);
  max-height:min(880px, calc(100svh - 40px));
  padding:34px 34px 30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:
    radial-gradient(circle at top center, oklch(0.78 0.10 162 / .09), transparent 48%),
    linear-gradient(180deg, rgba(13,18,15,.96), rgba(9,12,10,.98));
  box-shadow:0 32px 100px rgba(0,0,0,.42);
  overflow:auto;
  overscroll-behavior:contain;
}

.audit-modal-dialog::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.18;
  pointer-events:none;
}

.audit-modal-head,
.audit-form,
.audit-status{
  position:relative;
  z-index:1;
}

.audit-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.035);
  color:var(--text);
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color .22s ease, background-color .22s ease, transform .22s ease;
}

.audit-modal-close:hover{
  border-color:var(--accent-line);
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}

.audit-modal-close span{
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:1.5px;
  background:currentColor;
  border-radius:999px;
}

.audit-modal-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.audit-modal-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

.audit-modal-head h2{
  margin:0;
  font-size:clamp(34px, 4vw, 56px);
  line-height:.98;
  letter-spacing:-.04em;
  font-weight:600;
  color:var(--text);
}

.audit-modal-sub{
  max-width:420px;
  margin:16px 0 0;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}

.audit-form{
  margin-top:28px;
}

.audit-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px 18px;
}

.audit-field{
  position:relative;
  display:block;
}

.audit-field-full{
  grid-column:1 / -1;
}

.audit-field span{
  position:absolute;
  top:50%;
  left:18px;
  transform:translateY(-50%);
  transform-origin:left top;
  font-size:15px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.01em;
  color:rgba(241,243,240,.42);
  pointer-events:none;
  transition:transform .2s ease, color .2s ease, font-size .2s ease, letter-spacing .2s ease, top .2s ease;
}

.audit-field input{
  width:100%;
  min-height:54px;
  padding:20px 18px 10px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.038);
  color:var(--text);
  font:500 15px/1.2 var(--ff);
  outline:none;
  transition:border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.audit-field input::placeholder{
  color:transparent;
}

.audit-field input:hover{
  border-color:rgba(255,255,255,.16);
}

.audit-field input:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 4px oklch(0.78 0.10 162 / .11);
  background:rgba(255,255,255,.05);
}

.audit-field input:focus + span,
.audit-field input:not(:placeholder-shown) + span{
  top:12px;
  transform:translateY(0);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(241,243,240,.54);
}

.audit-submit{
  margin-top:18px;
  min-width:220px;
}

.audit-form-note{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:rgba(241,243,240,.38);
  text-align:center;
}

.audit-form-feedback{
  min-height:20px;
  margin:10px 0 0;
  font-size:13px;
  line-height:1.45;
  text-align:center;
  color:rgba(241,243,240,.42);
}

.audit-form-feedback.is-loading{
  color:rgba(241,243,240,.5);
}

.audit-form-feedback.is-success{
  color:var(--accent);
}

.audit-form-feedback.is-error{
  color:#e4a37a;
}

.audit-status{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:34px;
  background:
    radial-gradient(circle at top center, oklch(0.78 0.10 162 / .12), transparent 52%),
    linear-gradient(180deg, rgba(13,18,15,.975), rgba(9,12,10,.985));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility .24s ease;
}

.audit-status-pane{
  display:none;
  width:min(100%, 420px);
  text-align:center;
}

.audit-status h3{
  margin:0;
  font-size:clamp(30px, 3.6vw, 42px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:600;
  color:var(--text);
}

.audit-status p{
  margin:14px auto 0;
  max-width:28ch;
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
}

.audit-status-spinner,
.audit-status-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  margin-bottom:22px;
  border-radius:999px;
}

.audit-status-spinner{
  border:1.5px solid rgba(255,255,255,.14);
  border-top-color:var(--accent);
  animation:audit-spin 1s linear infinite;
}

.audit-status-check{
  border:1.5px solid rgba(255,255,255,.14);
  color:var(--accent);
  font-size:34px;
  font-weight:600;
  transform:rotate(45deg);
}

.audit-modal.is-loading .audit-status,
.audit-modal.is-success .audit-status{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.audit-modal.is-loading .audit-modal-head,
.audit-modal.is-loading .audit-form,
.audit-modal.is-success .audit-modal-head,
.audit-modal.is-success .audit-form{
  opacity:0;
  pointer-events:none;
}

.audit-modal.is-loading .audit-status-loading,
.audit-modal.is-success .audit-status-success{
  display:block;
}

.audit-submit[disabled]{
  opacity:.72;
  cursor:wait;
}

body.modal-open{
  overflow:hidden;
}

@keyframes audit-spin{
  to{transform:rotate(360deg)}
}

/* Absorbed from v3 child experiment */
body{
  min-height:100svh;
}

.hero{
  min-height:100svh;
  padding-bottom:140px;
}

.dash{
  overflow:hidden;
}

.kpi{
  overflow:hidden;
}

.kpi-lbl,
.kpi-sub{
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease, filter .55s ease;
}

.kpi-val{
  transition:transform .55s cubic-bezier(.22,1,.36,1), text-shadow .45s ease, opacity .45s ease;
  will-change:transform, text-shadow;
}

.kpi.is-primed .kpi-lbl,
.kpi.is-primed .kpi-sub{
  opacity:0;
  transform:translateY(8px);
  filter:blur(4px);
}

.kpi.is-primed .kpi-val{
  opacity:.72;
  transform:translateY(12px) scale(.96);
  text-shadow:0 0 0 transparent;
}

.kpi.is-active .kpi-lbl,
.kpi.is-active .kpi-sub{
  opacity:1;
  transform:none;
  filter:none;
}

.kpi.is-active .kpi-val{
  opacity:1;
  transform:none;
  text-shadow:0 0 28px var(--accent-soft);
}

.kpi.is-settled .kpi-val{
  text-shadow:0 0 10px transparent;
}

.dash-table{
  position:relative;
}

.dash-table::after{
  content:'';
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-line) 18%, var(--accent-line) 82%, transparent);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}

.dash.is-live .dash-table::after{
  opacity:1;
}

.t-row{
  transition:
    transform .62s cubic-bezier(.22,1,.36,1),
    opacity .58s ease,
    filter .62s ease,
    background .3s ease,
    box-shadow .45s ease;
  transform-origin:50% 50%;
  will-change:transform, opacity, filter;
}

.t-row.t-exit{
  transform:translateY(-12px) scale(.985);
  opacity:0;
  filter:blur(6px);
  pointer-events:none;
}

.t-row.t-enter{
  transform:translateY(16px) scale(.99);
  opacity:0;
  filter:blur(10px);
  transition:none !important;
}

.t-row.t-fresh{
  background:linear-gradient(90deg, var(--accent-soft), rgba(255,255,255,.02) 70%);
  box-shadow:inset 0 0 0 1px var(--accent-line);
}

@media(max-width:768px){
  .kpi-val{font-size:clamp(53px,15.6vw,72px) !important; letter-spacing:-.04em}
  .kpi-num{font-size:clamp(53px,15.6vw,72px) !important; letter-spacing:-.04em !important; font-family:var(--ff) !important}
  .kpi{row-gap:8px}

  .audit-modal{
    padding:14px;
    align-items:end;
  }

  .audit-modal-dialog{
    width:100%;
    max-height:calc(100svh - 12px);
    padding:22px 16px 18px;
    border-radius:18px 18px 0 0;
  }

  .audit-status{
    padding:24px 18px;
  }

  .audit-modal-head h2{
    font-size:clamp(26px, 8vw, 36px);
  }

  .audit-modal-sub{
    margin-top:10px;
    font-size:13.5px;
    line-height:1.45;
  }

  .audit-form{
    margin-top:18px;
  }

  .audit-form-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .audit-field span{
    left:16px;
    font-size:14px;
  }

  .audit-field input{
    min-height:48px;
    padding:18px 16px 8px;
    font-size:16px;
  }

  .audit-field input:focus + span,
  .audit-field input:not(:placeholder-shown) + span{
    top:10px;
    font-size:9.5px;
  }

  .audit-submit{
    width:100%;
    margin-top:14px;
    min-width:0;
    padding:14px 18px;
  }

  .audit-form-note{font-size:11px}
  .audit-form-feedback{font-size:12px}

  .audit-status h3{
    font-size:clamp(24px, 7vw, 32px);
  }

  .audit-status p{
    font-size:13.5px;
  }

  .audit-status-spinner,
  .audit-status-check{
    width:60px;
    height:60px;
    margin-bottom:18px;
  }

  .hero{
    padding-bottom:28px;
  }

  .dash{
    margin-top:52px;
  }

  .kpi.is-active .kpi-val{
    text-shadow:0 0 18px var(--accent-soft);
  }

  .t-head,
  .t-row{
    grid-template-columns:1.8fr .82fr .66fr;
  }

  .t-head .c:nth-child(3){
    display:inline;
  }

  .t-row .c:nth-child(3){
    display:block;
  }

  .t-head .c:nth-child(4),
  .t-row .c:nth-child(4),
  .t-head .c:nth-child(5),
  .t-row .c:nth-child(5),
  .t-head .c:nth-child(6),
  .t-row .c:nth-child(6){
    display:none;
  }
}