/* Fudlees — estilos compartidos (index.html cliente + negocios.html) */
:root{
  --carbon:#0E0E10; --surface:#17171A; --surface2:#212126; --border:#2E2E33;
  --ink:#FAFAF7; --muted:#9A9AA2; --dim:#6B6B73;
  --lime:#D4FF3F; --lime-press:#B8E62F; --lime-dark:#4E7A00; --coral:#FF6B4A;
  --si:#3DD68C; --amber:#FFC53D;
  --ease:cubic-bezier(0.23,1,0.32,1);
  --mx:clamp(20px,5vw,72px);
  --maxw:1180px;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --brand:'Unbounded',var(--sans);
  --z-nav:40; --z-tooltip:60;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--carbon); color:var(--ink); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--brand); font-weight:700; line-height:1.04; letter-spacing:-0.035em; text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--mx)}
.eyebrow{display:inline-block; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--lime); margin-bottom:14px}
.muted{color:var(--muted)}

/* ---- Fondo de doodles (sutil, como en la app) ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("/assets/brand/doodles-tile.png");
  background-repeat:repeat; background-size:300px auto;
  opacity:.05;
}
.nav, main, footer, .progress{position:relative; z-index:1}

.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans); font-weight:700; font-size:16px; padding:14px 22px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .16s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease); will-change:transform}
.btn:active{transform:scale(.97)}
.btn-lime{background:var(--lime); color:var(--carbon)}
.btn-lime:hover{background:#E4FF6B}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--carbon); color:var(--ink)}
.btn-dark:hover{background:#1c1c20}

.nav{position:sticky; top:0; z-index:var(--z-nav); background:rgba(14,14,16,.72); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border); transition:box-shadow .3s var(--ease)}
.nav.scrolled{box-shadow:0 10px 34px -14px rgba(0,0,0,.7)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px}
.nav .logo{height:24px; width:auto}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--muted); transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav .cta{padding:9px 16px; font-size:14.5px; color:var(--carbon)}
@media (max-width:760px){ .nav-links a:not(.cta){display:none} }

.hero{position:relative; padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,90px); overflow:hidden}
.hero::before{content:""; position:absolute; inset:-20% 30% auto -10%; height:70%; background:radial-gradient(60% 60% at 30% 30%, rgba(212,255,63,.16), transparent 70%); filter:blur(30px); pointer-events:none; animation:glowDrift 16s ease-in-out infinite}
@keyframes glowDrift{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(7%,5%) scale(1.1)}}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:center; position:relative}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem)}
.hero h1 .hl{color:var(--lime)}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.32rem); color:var(--muted); max-width:34ch; margin-top:22px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-note{margin-top:20px; font-size:14px; color:var(--dim); display:flex; align-items:center; gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--si)}
.hero-solo{padding:clamp(84px,11vw,140px) 0 clamp(36px,5vw,60px)}

.phone{justify-self:center; width:min(300px,80vw); aspect-ratio:390/844; background:var(--surface); border:1px solid var(--border); border-radius:40px; padding:11px; box-shadow:0 40px 80px -30px rgba(0,0,0,.8); position:relative}
.phone::before{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:90px; height:6px; border-radius:99px; background:#000; z-index:1}
.screen{height:100%; background:var(--carbon); border-radius:29px; overflow:hidden; position:relative}
.track{display:flex; height:100%; will-change:transform}
.slide{flex:0 0 100%; height:100%; width:100%; object-fit:contain; object-position:center; display:block; background:var(--carbon)}

section{padding:clamp(56px,9vw,104px) 0}
.sec-head{max-width:640px; margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.1rem)}
.sec-head p{color:var(--muted); font-size:clamp(1rem,1.6vw,1.15rem); margin-top:14px; max-width:52ch}

.modos{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:760px){ .modos{grid-template-columns:1fr} }
.modo{position:relative; border:1px solid var(--border); border-radius:24px; padding:clamp(24px,3vw,34px); overflow:hidden; background:var(--surface); min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .3s var(--ease), border-color .3s var(--ease)}
.modo .ic{position:absolute; top:26px; left:26px; width:46px; height:46px; border-radius:13px; display:grid; place-items:center}
.modo .ic svg{width:26px;height:26px;stroke-width:1.9;fill:none}
.modo.dom .ic{background:rgba(212,255,63,.14)} .modo.dom .ic svg{stroke:var(--lime)}
.modo.ir .ic{background:var(--surface2); border:1px solid rgba(212,255,63,.22)} .modo.ir .ic svg{stroke:var(--lime)}
.modo h3{font-size:1.55rem; margin-bottom:8px}
.modo p{color:var(--muted); font-size:15px; max-width:34ch}
.modo.dom{background:linear-gradient(160deg,#191b12,var(--surface) 60%)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,34px)}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-top:20px; border-top:2px solid var(--border); transition:border-color .3s var(--ease)}
.step .n{font-family:var(--brand); font-weight:700; font-size:1.1rem; color:var(--lime)}
.step h3{font-size:1.35rem; margin:12px 0 8px}
.step p{color:var(--muted); font-size:15px}

.cobertura{background:rgba(23,23,26,.55); border-block:1px solid var(--border)}
.map-head{text-align:center; max-width:640px; margin:0 auto clamp(28px,4vw,44px)}
.map-head h2{font-size:clamp(2rem,4.6vw,3.1rem)}
.map-head p{color:var(--muted); margin-top:14px}
.map-wrap{position:relative; max-width:940px; margin-inline:auto}
.map-wrap svg{width:100%; height:auto; overflow:visible}
.comuna{cursor:pointer}
.comuna .side{fill:#101013; transform:translateY(9px)}
.comuna .face{transition:transform .35s var(--ease)}
.comuna .top{fill:#242429; transition:fill .35s var(--ease)}
.comuna .num{fill:var(--dim); font-family:var(--brand); font-weight:700; font-size:32px; text-anchor:middle; dominant-baseline:central; pointer-events:none; transition:fill .35s var(--ease)}
.comuna:hover .top,.comuna:focus-visible .top,.comuna.sel .top{fill:var(--lime)}
.comuna:hover .num,.comuna:focus-visible .num,.comuna.sel .num{fill:var(--carbon)}
.comuna:hover .face,.comuna:focus-visible .face,.comuna.sel .face{transform:translateY(-3px)}
.comuna:focus,.comuna:focus-visible{outline:none}
.map-legend{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:26px; font-size:14px; color:var(--muted)}
.map-legend span{display:inline-flex; align-items:center; gap:8px}
.swatch{width:14px;height:14px;border-radius:4px}
.tooltip{position:fixed; z-index:var(--z-tooltip); pointer-events:none; background:var(--ink); color:var(--carbon); font-weight:700; font-size:13px; padding:6px 11px; border-radius:99px; transform:translate(-50%,-140%); opacity:0; transition:opacity .12s var(--ease); white-space:nowrap}
.tooltip.on{opacity:1}

/* ---- Instalar la app (cliente) ---- */
.instalar{background:rgba(23,23,26,.55); border-block:1px solid var(--border)}
.inst-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:860px){ .inst-grid{grid-template-columns:1fr; gap:40px} }
.inst-copy h2{font-size:clamp(2rem,4.6vw,3.1rem)}
.inst-copy .lead{color:var(--muted); font-size:clamp(1.02rem,1.7vw,1.18rem); margin-top:16px; max-width:44ch}
.inst-phrases{list-style:none; display:flex; flex-direction:column; gap:12px; margin:26px 0 4px}
.inst-phrases li{display:flex; gap:11px; align-items:flex-start; font-size:16px; color:#d7d7d2}
.inst-phrases li svg{width:20px;height:20px;flex:none;stroke:var(--lime);stroke-width:2;fill:none;margin-top:2px}
.inst-steps{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px}
@media (max-width:480px){ .inst-steps{grid-template-columns:1fr} }
.inst-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:18px 18px 20px; transition:transform .3s var(--ease), border-color .3s var(--ease)}
.inst-card .os{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; margin-bottom:10px}
.inst-card .os svg{width:18px;height:18px;fill:var(--ink)}
.inst-card ol{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:9px}
.inst-card li{counter-increment:s; position:relative; padding-left:28px; font-size:14px; color:var(--muted); line-height:1.4}
.inst-card li::before{content:counter(s); position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%; background:rgba(212,255,63,.14); color:var(--lime); font-weight:700; font-size:11px; display:grid; place-items:center}
.inst-card b{color:var(--ink); font-weight:700}
.inst-cta{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.inst-fine{font-size:13.5px; color:var(--dim)}

/* ---- Negocios ---- */
.negocios{background:transparent}
.negocios .eyebrow{color:var(--lime)}
.neg-head{max-width:720px; margin-bottom:clamp(32px,5vw,52px)}
.neg-head h2{font-size:clamp(2.1rem,5vw,3.4rem)}
.neg-head p{color:var(--muted); font-size:clamp(1.05rem,1.8vw,1.2rem); margin-top:16px; max-width:56ch}
.neg-perks{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,4vw,44px)}
.perk{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); color:var(--ink); font-weight:600; font-size:14px; padding:9px 15px; border-radius:99px}
.perk svg{width:16px;height:16px;stroke:var(--lime);stroke-width:2;fill:none}
.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:980px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:20px; padding:24px 20px; display:flex; flex-direction:column; gap:6px; position:relative; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)}
.plan.pop{border-color:var(--lime); box-shadow:0 24px 44px -26px rgba(212,255,63,.35); transform:translateY(-6px)}
@media (max-width:980px){ .plan.pop{transform:none} }
.plan .pill{position:absolute; top:-11px; left:20px; background:var(--lime); color:var(--carbon); font-size:11px; font-weight:700; padding:4px 12px; border-radius:99px}
.plan .pname{font-family:var(--brand); font-weight:500; font-size:1.15rem}
.plan .cost{font-weight:700; font-size:1.6rem; color:var(--lime); font-variant-numeric:tabular-nums; margin-top:4px}
.plan .cost small{font-size:.8rem; color:var(--muted); font-weight:600}
.plan .who{font-size:13px; color:var(--muted); min-height:34px}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:8px; font-size:13.5px}
.plan li{display:flex; gap:8px; color:#d7d7d2}
.plan li::before{content:"✓"; color:var(--lime); font-weight:700}
.neg-foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:clamp(30px,4vw,44px)}
.neg-foot .fine{font-size:14px; color:var(--muted)}
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:980px){ .steps3{grid-template-columns:1fr} }

/* ---- Muestra de la app en la página de negocios ---- */
.showcase{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:center; margin-top:clamp(30px,4vw,48px)}
@media (max-width:860px){ .showcase{grid-template-columns:1fr; gap:36px} }
.show-copy h3{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:12px}
.show-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:18px}
.show-list li{display:flex; gap:11px; align-items:flex-start; color:#d7d7d2; font-size:15.5px}
.show-list li svg{width:19px;height:19px;flex:none;stroke:var(--lime);stroke-width:2;fill:none;margin-top:2px}

.cierre{text-align:center}
.cierre h2{font-size:clamp(1.9rem,4.4vw,2.9rem); max-width:16ch; margin-inline:auto}
.cierre p{color:var(--muted); margin:16px auto 30px; max-width:46ch}
.pays{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.pay{font-size:13px; color:var(--muted); border:1px solid var(--border); border-radius:99px; padding:7px 14px}

footer{border-top:1px solid var(--border); padding:48px 0 40px}
.foot-in{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start}
footer .logo{height:22px; margin-bottom:14px}
.foot-tag{color:var(--muted); font-size:14px; max-width:34ch}
.foot-col h4{font-family:var(--sans); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:12px}
.foot-col a,.foot-col span{display:block; color:var(--muted); font-size:14.5px; margin-bottom:9px; transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--lime)}
.foot-legal{margin-top:34px; padding-top:22px; border-top:1px solid var(--border); color:var(--dim); font-size:13px}

/* ---- Barrios panel ---- */
.barrios{max-width:820px; margin:24px auto 0; min-height:74px; text-align:center}
.bhead{display:inline-flex; align-items:baseline; gap:10px; margin-bottom:14px}
.bhead .bn{font-family:var(--brand); font-weight:700; color:var(--lime); font-size:1.05rem}
.bhead .bc{font-size:13px; color:var(--muted)}
.bhint{font-size:14px; color:var(--muted); padding-top:16px}
.bchips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.bchip{font-size:13px; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:6px 13px; opacity:0; transform:translateY(6px); animation:chipIn .4s var(--ease) forwards}
@keyframes chipIn{to{opacity:1; transform:none}}

/* ---- Efectos ---- */
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--lime); z-index:100; transition:width .12s linear; pointer-events:none}
@media (hover:hover){
  .plan:hover{transform:translateY(-8px); border-color:#3a3a40; box-shadow:0 26px 46px -28px rgba(0,0,0,.75)}
  .plan.pop:hover{border-color:var(--lime); box-shadow:0 26px 50px -26px rgba(212,255,63,.4)}
  .modo:hover{transform:translateY(-5px); border-color:#3a3a40}
  .step:hover{border-top-color:var(--lime)}
  .inst-card:hover{transform:translateY(-4px); border-color:#3a3a40}
  .btn-lime:hover{box-shadow:0 0 0 4px rgba(212,255,63,.16), 0 16px 32px -14px rgba(212,255,63,.5)}
  .bchip{transition:border-color .2s var(--ease), color .2s var(--ease)}
  .bchip:hover{border-color:var(--lime)}
}

.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal[data-d="1"]{transition-delay:.06s}
.js .reveal[data-d="2"]{transition-delay:.12s}
.js .reveal[data-d="3"]{transition-delay:.18s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1 !important; transform:none !important; transition:none}
  .comuna .face,.comuna .top,.comuna .num,.btn{transition:none}
  .hero::before{animation:none}
  .bchip{opacity:1; transform:none; animation:none}
  .plan,.modo,.step,.inst-card{transition:none}
}