/* ============================================================
   Mundo Inova — Landing Page (static export)
   Tokens + components + page styles in one file.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --blue-50:#EFF7FE; --blue-100:#D6EBFC; --blue-200:#A9D5F8; --blue-300:#6FB7F4;
  --blue-400:#2B9BF4; --blue-500:#0077CC; --blue-600:#0063AE; --blue-700:#0055AA;
  --blue-800:#003F80; --blue-900:#003366; --blue-950:#021F40;
  --n-0:#FFFFFF; --n-50:#F6F9FC; --n-100:#EDF2F7; --n-200:#DCE4EE; --n-300:#C2CEDD;
  --n-400:#93A2B8; --n-500:#64748B; --n-600:#475569; --n-700:#334155; --n-800:#1E293B;
  --n-900:#0F1B2D; --n-950:#08111E;
  --success:#16A34A; --success-50:#E9F8EF;
  --grad-brand:linear-gradient(150deg,#2B9BF4 0%,#0077CC 52%,#0055AA 100%);
  --grad-deep:linear-gradient(160deg,#0077CC 0%,#003F80 60%,#003366 100%);
  --grad-ink:linear-gradient(165deg,#042A52 0%,#021F40 100%);
  --grad-glow:radial-gradient(60% 60% at 50% 0%,rgba(43,155,244,0.16) 0%,rgba(43,155,244,0) 70%);

  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-display:clamp(2.75rem,1.6rem + 4.6vw,4.5rem);
  --fs-display-2:clamp(2.25rem,1.5rem + 3vw,3.25rem);
  --fs-h1:clamp(2rem,1.4rem + 2.2vw,2.75rem);
  --fs-lead:1.1875rem;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --sh-sm:0 2px 6px rgba(8,17,30,.07),0 1px 2px rgba(8,17,30,.05);
  --sh-md:0 8px 24px rgba(8,30,60,.10),0 2px 6px rgba(8,30,60,.06);
  --sh-lg:0 20px 48px rgba(8,30,60,.14),0 6px 14px rgba(8,30,60,.08);
  --sh-xl:0 40px 80px rgba(3,40,82,.18),0 12px 28px rgba(3,40,82,.10);
  --sh-brand:0 12px 30px rgba(0,119,204,.28);

  --container:1200px; --pad:clamp(20px,5vw,48px); --section-y:clamp(64px,8vw,120px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.6;
  color:var(--n-700); background:var(--n-50); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--n-900); margin:0; letter-spacing:-.02em; line-height:1.15; font-weight:800;}
p{margin:0;}
a{color:var(--blue-600); text-decoration:none;}
img{display:block; max-width:100%;}
ul{margin:0; padding:0; list-style:none;}
::selection{background:var(--blue-200); color:var(--blue-950);}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad);}
.eyebrow{font-weight:700; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500);}
.gradient-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}
.section{padding:var(--section-y) 0;}
.section--white{background:var(--n-0);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:.9375rem; letter-spacing:-.01em;
  padding:12px 22px; min-height:46px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .12s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn--lg{padding:16px 30px; min-height:56px; font-size:1.0625rem;}
.btn--sm{padding:8px 16px; min-height:38px; font-size:.875rem;}
.btn--primary{background:var(--grad-brand); color:#fff; box-shadow:var(--sh-brand);}
.btn--primary:hover{box-shadow:0 20px 48px rgba(0,119,204,.34);}
.btn--white{background:#fff; color:var(--blue-700); box-shadow:0 12px 30px rgba(0,0,0,.18);}
.btn--ghost{background:transparent; color:var(--n-700);}
.btn--ghost:hover{background:var(--n-100); transform:none;}
.btn--whatsapp{background:#25D366; color:#08311B; box-shadow:0 12px 30px rgba(37,211,102,.30);}
.btn svg{width:18px; height:18px;}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  font-weight:700; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
  border-radius:var(--r-pill); background:rgba(255,255,255,.7); color:var(--blue-700);
  border:1px solid var(--blue-200);
}
.badge svg{width:14px; height:14px;}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:50; transition:all .2s var(--ease); border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--n-200);}
.nav__inner{display:flex; align-items:center; height:72px; gap:24px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:36px;}
.brand__wm{display:flex; flex-direction:column; line-height:.9; font-family:var(--font-display); font-weight:800; color:var(--blue-700); font-size:17px; letter-spacing:.02em;}
.nav__links{display:flex; gap:28px; margin-left:24px;}
.nav__links a{font-size:14.5px; font-weight:600; color:var(--n-700); transition:color .15s;}
.nav__links a:hover{color:var(--blue-500);}
.nav__cta{margin-left:auto; display:flex; align-items:center; gap:12px;}
.nav__burger{margin-left:auto; display:none; background:none; border:none; cursor:pointer; color:var(--n-900); padding:6px;}
.nav__burger svg{width:26px; height:26px;}
.mobile-menu{display:none; flex-direction:column; gap:4px; background:#fff; border-bottom:1px solid var(--n-200); padding:12px var(--pad) 20px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 8px; font-size:16px; font-weight:600; color:var(--n-700); border-radius:8px;}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding-top:40px; padding-bottom:var(--section-y);}
.hero__glow{position:absolute; inset:0; background:var(--grad-glow); pointer-events:none;}
.hero__orb{position:absolute; top:-120px; right:-80px; width:520px; height:520px; background:radial-gradient(circle,rgba(0,119,204,.12),transparent 65%); pointer-events:none;}
.hero__grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center;}
.hero h1{font-size:var(--fs-display); line-height:1.04; letter-spacing:-.025em; margin:20px 0; text-wrap:balance;}
.hero__lead{font-size:var(--fs-lead); color:var(--n-500); max-width:540px; margin-bottom:32px; text-wrap:pretty;}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero__trust{display:flex; align-items:center; gap:20px; margin-top:36px; flex-wrap:wrap;}
.hero__trust-label{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--n-400);}
.hero__trust-items{display:flex; gap:18px; flex-wrap:wrap;}
.hero__trust-items span{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--n-700);}
.hero__trust-items svg{width:15px; height:15px; color:var(--blue-500);}
.hero__visual{position:relative;}
.hero__visual-blur{position:absolute; inset:-8% -4%; background:var(--grad-brand); filter:blur(60px); opacity:.18; border-radius:50%;}
.hero__dash{position:relative; transform:perspective(1600px) rotateY(-8deg) rotateX(3deg);}
.hero__chip{position:absolute; bottom:-18px; left:-18px; background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-lg); border:1px solid var(--n-200); padding:12px 14px; display:flex; align-items:center; gap:10px;}
.hero__chip-ic{width:38px; height:38px; border-radius:var(--r-sm); background:var(--blue-50); color:var(--blue-500); display:grid; place-items:center;}
.hero__chip-ic svg{width:20px; height:20px;}
.hero__chip b{font-size:16px; font-weight:800; font-family:var(--font-display); color:var(--n-900); display:block; line-height:1.1;}
.hero__chip small{font-size:11px; color:var(--n-500);}

/* ---------- Dashboard mock ---------- */
.dash{background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-xl); border:1px solid var(--n-200); overflow:hidden;}
.dash__bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--n-200); background:var(--n-50);}
.dash__dot{width:10px; height:10px; border-radius:50%;}
.dash__title{margin-left:10px; font-size:12px; font-weight:700; color:var(--n-500);}
.dash__live{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--success); font-weight:700;}
.dash__live i{width:7px; height:7px; border-radius:50%; background:var(--success);}
.dash__body{padding:20px; display:flex; flex-direction:column; gap:14px;}
.dash__kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.kpi{background:var(--n-50); border:1px solid var(--n-200); border-radius:var(--r-md); padding:12px 14px;}
.kpi__l{font-size:11px; color:var(--n-500); font-weight:600;}
.kpi__v{font-size:19px; font-weight:800; font-family:var(--font-display); color:var(--n-900); letter-spacing:-.02em; margin-top:2px;}
.kpi__d{font-size:11px; font-weight:700; color:var(--success); margin-top:2px;}
.dash__chart{background:#fff; border:1px solid var(--n-200); border-radius:var(--r-md); padding:16px;}
.dash__chart-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px;}
.dash__chart-head b{font-size:12px; color:var(--n-900);}
.dash__chart-head span{font-size:11px; color:var(--n-500);}
.dash__bars{display:flex; align-items:flex-end; gap:10px; height:96px;}
.dash__bars .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%;}
.dash__bars .col i{display:block; border-radius:6px 6px 2px 2px; background:var(--blue-100);}
.dash__bars .col:last-child i{background:var(--grad-brand);}
.dash__pay{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.pay{display:flex; flex-direction:column; gap:6px;}
.pay__row{display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--n-700);}
.pay__track{height:6px; border-radius:999px; background:var(--n-100); overflow:hidden;}
.pay__fill{height:100%; border-radius:999px;}

/* ---------- Section heading ---------- */
.head{display:flex; flex-direction:column; gap:12px; text-align:center; align-items:center; max-width:720px; margin:0 auto;}
.head--left{text-align:left; align-items:flex-start; margin:0;}
.head h2{font-size:var(--fs-h1); text-wrap:balance;}
.head p{font-size:var(--fs-lead); color:var(--n-500); max-width:640px; text-wrap:pretty;}

/* ---------- Problems ---------- */
.prob-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px;}
.prob{display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--n-50); border:1px solid var(--n-200); border-radius:var(--r-md);}
.prob__ic{width:42px; height:42px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--n-200); color:var(--n-500); display:grid; place-items:center; flex:none;}
.prob__ic svg{width:21px; height:21px;}
.prob span{font-weight:600; font-size:15px; color:var(--n-900);}

/* ---------- Feature cards ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px;}
.feat{position:relative; background:#fff; border:1px solid var(--n-200); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease); overflow:hidden;}
.feat:hover{transform:translateY(-4px); box-shadow:var(--sh-lg);}
.feat--accent{background:var(--grad-deep); border-color:rgba(255,255,255,.12);}
.feat__ic{width:52px; height:52px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--blue-50); color:var(--blue-500); margin-bottom:16px;}
.feat__ic svg{width:24px; height:24px;}
.feat--accent .feat__ic{background:rgba(255,255,255,.14); color:#fff;}
.feat h3{font-size:1.25rem; letter-spacing:-.01em; line-height:1.25; font-weight:700; margin-bottom:8px;}
.feat p{font-size:.9375rem; color:var(--n-500);}
.feat--accent h3{color:#fff;}
.feat--accent p{color:rgba(255,255,255,.82);}

/* ---------- Finance split ---------- */
.split{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(32px,5vw,72px); align-items:center;}
.split h2{font-size:var(--fs-h1); line-height:1.12; margin:12px 0 18px; text-wrap:balance;}
.split__lead{font-size:var(--fs-lead); color:var(--n-500); margin-bottom:24px; text-wrap:pretty;}
.checklist{display:flex; flex-direction:column; gap:14px; margin-bottom:32px;}
.checklist li{display:flex; gap:12px; align-items:flex-start;}
.checklist .c{width:24px; height:24px; border-radius:50%; background:var(--blue-50); color:var(--blue-500); display:grid; place-items:center; flex:none; margin-top:1px;}
.checklist .c svg{width:15px; height:15px;}
.checklist span{font-size:15.5px; color:var(--n-700); font-weight:500;}
.split__visual{position:relative;}
.split__visual-blur{position:absolute; inset:-6%; background:var(--grad-brand); filter:blur(70px); opacity:.12; border-radius:50%;}
.split__visual .dash{position:relative;}

/* ---------- AI cards ---------- */
.ai-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px;}
.ai{display:flex; gap:14px; padding:20px; background:#fff; border:1px solid var(--n-200); border-radius:var(--r-lg); box-shadow:var(--sh-sm);}
.ai__ic{width:44px; height:44px; border-radius:var(--r-md); background:var(--grad-brand); color:#fff; display:grid; place-items:center; flex:none;}
.ai__ic svg{width:22px; height:22px;}
.ai h3{font-size:16.5px; font-weight:700; margin:2px 0 6px; letter-spacing:-.01em;}
.ai p{font-size:14px; line-height:1.55; color:var(--n-500);}

/* ---------- Benefits (dark) ---------- */
.benefits{position:relative; overflow:hidden; background:var(--grad-ink); color:#fff;}
.benefits__glow{position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:700px; height:300px; background:radial-gradient(ellipse,rgba(43,155,244,.25),transparent 70%);}
.benefits .container{position:relative;}
.benefits__head{text-align:center; max-width:680px; margin:0 auto 48px;}
.benefits__head .eyebrow{color:var(--blue-300);}
.benefits__head h2{color:#fff; margin-top:12px; text-wrap:balance;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat{display:flex; flex-direction:column; gap:6px; padding:24px; border-radius:var(--r-lg); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);}
.stat__v{font-family:var(--font-display); font-weight:800; font-size:clamp(2.25rem,1.6rem + 2vw,3rem); line-height:1; letter-spacing:-.02em; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; display:flex; align-items:baseline; gap:2px;}
.stat__v .px{font-size:.55em; font-weight:700;}
.stat__l{font-size:.9375rem; font-weight:600; color:rgba(255,255,255,.82);}
.benefits__extra{display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:36px;}
.benefits__extra span{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:rgba(255,255,255,.9);}
.benefits__extra svg{width:20px; height:20px; color:var(--blue-300);}

/* ---------- Cases ---------- */
.cases-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px;}
.case{display:flex; flex-direction:column; gap:16px; background:#fff; border:1px solid var(--n-200); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.case:hover{transform:translateY(-4px); box-shadow:var(--sh-lg);}
.case__stars{display:flex; gap:3px; color:var(--blue-400);}
.case__stars svg{width:18px; height:18px;}
.case blockquote{margin:0; font-weight:500; font-size:1.0625rem; line-height:1.6; color:var(--n-900); letter-spacing:-.01em; flex:1; text-wrap:pretty;}
.case__author{display:flex; align-items:center; gap:12px;}
.case__avatar{width:46px; height:46px; border-radius:var(--r-pill); background:var(--grad-brand); display:grid; place-items:center; color:#fff; font-weight:800; font-family:var(--font-display); flex:none;}
.case__name{font-weight:700; color:var(--n-900); font-size:.9375rem;}
.case__role{color:var(--n-500); font-size:.8125rem;}
.logos{display:flex; justify-content:center; gap:clamp(20px,4vw,52px); flex-wrap:wrap; margin-top:56px; opacity:.55;}
.logos span{font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--n-500); letter-spacing:-.01em;}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--grad-deep); padding:clamp(40px,6vw,72px); text-align:center; box-shadow:var(--sh-xl);}
.cta__glow{position:absolute; top:-80px; right:-40px; width:360px; height:360px; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%);}
.cta__inner{position:relative; max-width:700px; margin:0 auto;}
.cta h2{font-size:var(--fs-display-2); line-height:1.1; color:#fff; margin-bottom:18px; text-wrap:balance;}
.cta p{font-size:var(--fs-lead); color:rgba(255,255,255,.86); margin:0 auto 32px; max-width:560px; text-wrap:pretty;}
.cta__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.footer{background:var(--blue-950); color:rgba(255,255,255,.7); padding-top:80px;}
.footer__grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:64px;}
.footer__brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.footer__brand img{height:34px;}
.footer__brand .brand__wm{color:#fff; font-size:16px; letter-spacing:.03em;}
.footer p{font-size:14px; max-width:280px;}
.footer__col h4{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:16px; font-family:var(--font-body);}
.footer__col ul{display:flex; flex-direction:column; gap:10px;}
.footer__col a{font-size:14px; color:rgba(255,255,255,.7); transition:color .15s;}
.footer__col a:hover{color:#fff;}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px;}
.footer__bottom a{color:rgba(255,255,255,.7);}
.footer__legal{display:flex; gap:20px;}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; place-items:center; background:rgba(2,31,64,.55); backdrop-filter:blur(4px); padding:20px;}
.modal.open{display:grid; animation:fade .2s ease;}
.modal__card{width:100%; max-width:460px; background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-xl); padding:40px; position:relative; animation:pop .25s var(--ease);}
.modal__close{position:absolute; top:16px; right:16px; background:var(--n-100); border:none; border-radius:50%; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; color:var(--n-500);}
.modal__close svg{width:18px; height:18px;}
.modal h3{font-size:24px; font-weight:800; letter-spacing:-.01em; margin:14px 0 6px;}
.modal__sub{color:var(--n-500); font-size:14.5px; margin-bottom:22px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:.875rem; font-weight:600; color:var(--n-900);}
.field input{height:48px; padding:0 14px; border:1.5px solid var(--n-300); border-radius:var(--r-md); font-family:var(--font-body); font-size:.9375rem; color:var(--n-900); outline:none; transition:border-color .2s,box-shadow .2s;}
.field input:focus{border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(0,119,204,.35);}
.modal__success{text-align:center; padding:20px 0; display:none;}
.modal__success.show{display:block;}
.modal__form.hide{display:none;}
.modal__success-ic{width:64px; height:64px; border-radius:50%; background:var(--success-50); color:var(--success); display:grid; place-items:center; margin:0 auto 18px;}
.modal__success-ic svg{width:32px; height:32px;}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.98)}to{opacity:1; transform:none}}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:grid; place-items:center;}
  .hero__grid,.split{grid-template-columns:1fr;}
  .prob-grid,.feat-grid,.ai-grid,.cases-grid{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .prob-grid,.feat-grid,.ai-grid,.cases-grid,.stat-grid,.footer__grid{grid-template-columns:1fr;}
}