/* letrero.app — estilo "cálido y cercano" */
:root{
  --ink:#1f2d3a; --ink2:#55636f; --sky:#eaf5fb; --sky2:#d3eaf7; --white:#fff; --cream:#fffaf0;
  --green:#178a66; --green2:#106e51; --sun:#ffc93c; --pink:#ff7a8a; --line:#dbe6ee;
  --r:22px; --sh:0 14px 34px -16px rgba(31,45,58,.35);
  --hf:"Baloo 2", system-ui, sans-serif; --bf:"Figtree", system-ui, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font:400 17px/1.6 var(--bf);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--green2)}
h1,h2,h3{font-family:var(--hf);line-height:1.08;margin:0 0 .35em;letter-spacing:-.01em}
h2{font-size:clamp(32px,4.6vw,48px);font-weight:800;text-align:center}
h3{font-size:21px;font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.narrow{max-width:800px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 17px/1.1 var(--bf);padding:15px 24px;border-radius:999px;border:0;cursor:pointer;
  background:var(--green);color:#fff;text-decoration:none;box-shadow:0 4px 0 var(--green2);transition:transform .15s, box-shadow .15s;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--green2)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green2)}
.btn.sm{font-size:15px;padding:10px 18px;box-shadow:0 3px 0 var(--green2)}
.btn.big{font-size:18px;padding:17px 28px}
.btn.soft{background:var(--white);color:var(--ink);box-shadow:0 0 0 2px var(--line) inset, 0 4px 0 var(--line)}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:0 4px 0 #d9a21c}
.btn.ghost{background:transparent;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* cabecera */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:inline-flex;align-items:center;font:800 25px/1 var(--hf);color:var(--ink);text-decoration:none}
.logo span{color:var(--green)}
.logo i{width:26px;height:22px;border:3px solid var(--ink);border-radius:7px;background:var(--sun);position:relative;margin:0 9px 6px 0}
.logo i::after{content:"";position:absolute;left:50%;top:100%;width:3px;height:7px;margin-left:-1.5px;background:var(--ink)}
.top nav{display:flex;gap:24px;margin-left:auto}
.top nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.top nav a:hover{color:var(--green)}
@media (max-width:860px){.top nav{display:none}.top .btn{margin-left:auto}}

/* portada */
.hero{background:linear-gradient(180deg,var(--sky) 0%,#f6fbfe 100%);padding:60px 0 64px;position:relative;overflow:hidden;overflow:clip}
.hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#fff1bf 0%,rgba(255,241,191,0) 68%);right:-120px;top:-160px}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;position:relative}
.kick{display:inline-block;font-weight:700;font-size:15px;color:var(--green2);background:#fff;border-radius:999px;padding:6px 14px;margin:0 0 16px;box-shadow:0 0 0 1px var(--line)}
.hero h1{font-size:clamp(40px,5.4vw,64px);font-weight:800}
.hero.sm h1{font-size:clamp(36px,4.8vw,56px)}
.lead{font-size:clamp(18px,2vw,21px);color:var(--ink2);margin:0 0 26px;max-width:560px}
.lead b{color:var(--ink)}
.for{font-weight:700;color:var(--green2);margin:0 0 10px;font-size:18px}
.fine{font-size:15px;color:var(--ink2);margin:16px 0 0}
.hcopy .promesas{margin-top:30px}

/* collage de diseños */
.collage{position:relative;aspect-ratio:1/.86}
.collage .browser{position:absolute;width:64%}
.collage .c1{left:0;top:2%;transform:rotate(-4deg)}
.collage .c2{right:0;top:0;transform:rotate(3deg)}
.collage .c3{left:16%;top:30%;width:70%;z-index:2;box-shadow:0 30px 60px -24px rgba(31,45,58,.5)}
.collage .c4{position:absolute;right:2%;bottom:-2%;width:26%;z-index:3}

/* navegador y celular */
.browser{border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh);border:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f2f6f9;border-bottom:1px solid var(--line)}
.bar i{flex:none;width:9px;height:9px;border-radius:50%;background:#d5dee5}
.bar i:first-child{background:var(--pink)}.bar i:nth-child(2){background:var(--sun)}.bar i:nth-child(3){background:#5ccf9f}
.burl{margin-left:8px;font-size:12.5px;color:var(--ink2);background:#fff;border-radius:99px;padding:3px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.vp{aspect-ratio:16/11;min-height:0;overflow:hidden;position:relative;background:#f4f6f8}
.vp>div,.scr>div{pointer-events:none}
.phone{aspect-ratio:9/18.5;background:var(--ink);border-radius:15% / 7.5%;padding:5%;box-shadow:0 26px 50px -18px rgba(31,45,58,.55);position:relative;overflow:hidden}
.phone::before{content:"";position:absolute;left:50%;top:3.2%;width:30%;height:3%;margin-left:-15%;border-radius:20px;background:var(--ink);z-index:2}
.scr{position:absolute;inset:4.5%;border-radius:11% / 5.4%;overflow:hidden;background:#fff}

/* franja de promesas */
.promesas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.promesas li{display:flex;gap:10px;align-items:center;min-width:0;font-size:16px}
.promesas b{font-weight:700}
.pi{flex:none;width:40px;height:40px;border-radius:13px;background:#fff3c4;display:grid;place-items:center}
.pi svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.promesas li:nth-child(2) .pi{background:#ffe0e4}.promesas li:nth-child(3) .pi{background:#d6f0e6}.promesas li:nth-child(4) .pi{background:var(--sky2)}
.band{background:#fff;padding:24px 0;border-bottom:1px solid var(--line)}
.band .promesas{grid-template-columns:repeat(4,minmax(0,1fr))}

/* secciones */
.sec{padding:84px 0}
.sec.sky{background:var(--sky)}
.sub{text-align:center;color:var(--ink2);font-size:19px;margin:0 auto 34px;max-width:680px}
.sub.left{text-align:left;margin-left:0}

/* galería de diseños */
.namebox{max-width:560px;margin:0 auto 26px;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:var(--sh)}
.namebox label{display:block;font-weight:700;font-size:15.5px;margin:0 0 8px}
.namebox input{width:100%;font:600 18px var(--bf);padding:13px 15px;border:2px solid var(--line);border-radius:12px;color:var(--ink);background:#fbfdfe}
.namebox input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 4px #d6f0e6}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:820px;margin:0 auto 34px}
.tabs button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;font:700 18px/1.15 var(--hf);padding:14px 16px;border-radius:18px;border:2px solid transparent;background:#fff;color:var(--ink);cursor:pointer}
.tabs button svg{grid-row:span 2;width:40px;height:40px;padding:8px;border-radius:12px;background:var(--sky);fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs small{font:500 14px var(--bf);color:var(--ink2)}
.tabs button[aria-selected=true]{border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.tabs button[aria-selected=true] svg{background:var(--sun)}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
.tcard{min-width:0}
.tprev{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;text-align:left;font:inherit;border-radius:14px}
.tprev .browser{transition:transform .2s, box-shadow .2s}
.tprev:hover .browser{transform:translateY(-4px);box-shadow:0 24px 44px -20px rgba(31,45,58,.5)}
.tver{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:#fff;font:700 14px var(--bf);padding:9px 16px;border-radius:999px;opacity:0;transition:opacity .2s;white-space:nowrap}
.tprev:hover .tver,.tprev:focus-visible .tver{opacity:1}
.tmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 2px 0}
.tmeta h3{margin:0;font-size:19px;line-height:1.15}
.tmeta h3 a{color:var(--ink);text-decoration:none}
.tmeta h3 a:hover{color:var(--green)}
.tmeta .btn{flex:none}
.tother{display:grid;border:2px dashed #b9cfdc;border-radius:16px;padding:26px;align-items:center;background:rgba(255,255,255,.5)}
.tother h3{margin:14px 0 6px}.tother p{margin:0 0 16px;color:var(--ink2)}
.more{text-align:center;margin:34px 0 0;font-weight:700}

/* pasos */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps li{background:#fff;border-radius:var(--r);padding:0 26px 28px;box-shadow:var(--sh);border:1px solid var(--line);overflow:hidden}
.sec.sky .steps li{border-color:#fff}
.sart{margin:0 -26px 22px;height:150px;display:grid;place-items:center;background:var(--cream);border-bottom:1px solid var(--line)}
.steps li:nth-child(2) .sart{background:#eaf8f1}.steps li:nth-child(3) .sart{background:var(--sky)}
.mini{width:72%;background:#fff;border-radius:12px;padding:14px;box-shadow:var(--sh);display:grid;gap:8px}
.ln{display:block;height:9px;border-radius:5px;background:#e4ebf0}
.w40{width:40%}.w60{width:60%}.w90{width:90%}
.ln.edit{height:auto;background:#fff6d6;outline:2px dashed var(--sun);outline-offset:2px;font:700 14px var(--bf);padding:4px 8px;position:relative}
.ln.edit i{display:inline-block;width:2px;height:15px;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.chat{display:grid;gap:8px;width:78%}
.chat span{font-size:13.5px;padding:8px 12px;border-radius:14px;max-width:88%;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.chat .b1{background:#d9fdd3;justify-self:end;border-bottom-right-radius:4px}
.chat .b2{background:#fff;justify-self:start;border-bottom-left-radius:4px}
.mini.url{grid-template-columns:1fr auto;align-items:center;padding:12px 14px}
.lock{font:600 14px var(--bf);color:var(--green2)}
.ok{width:28px;height:28px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.ok svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sun);font:800 21px/1 var(--hf);margin-bottom:10px}
.steps li:nth-child(2) .sn{background:var(--pink);color:#fff}.steps li:nth-child(3) .sn{background:var(--green);color:#fff}
.steps p{margin:0;color:var(--ink2)}

/* google */
#google{background:linear-gradient(180deg,#fff, var(--cream))}
.gsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.gtxt h2{text-align:left}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.ticks svg,.plan li svg{flex:none;width:20px;height:20px;margin-top:3px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gmock{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh);border:1px solid var(--line);display:grid;gap:14px}
.gsearch{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:999px;padding:11px 18px;box-shadow:0 1px 6px rgba(32,33,36,.2);font-size:16px}
.gl{width:20px;height:20px;fill:none;stroke:#4285f4;stroke-width:2.4;stroke-linecap:round}
.gres{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:#fff;border:2px solid var(--green)}
.gres.dim{border:1px solid var(--line);gap:8px;opacity:.7}
.gsite{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#4d5156}
.gsite i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#e85d04;color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.gres b{color:#1a0dab;font-weight:500;font-size:19px;line-height:1.3}
.gdesc{font-size:14.5px;color:#4d5156}
.gbtns{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.gbtns em{font-style:normal;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid #dadce0;color:#1a0dab}

/* precios */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:840px;margin:0 auto}
.plan{background:#fff;border-radius:var(--r);padding:30px;border:2px solid var(--line);position:relative;display:flex;flex-direction:column}
.plan.top{border:3px solid var(--green);box-shadow:var(--sh)}
.badge{position:absolute;top:-15px;left:26px;background:var(--sun);font:800 14px/1 var(--hf);padding:8px 14px;border-radius:999px}
.price{margin:4px 0 0;color:var(--ink2)}
.price b{font:800 48px/1 var(--hf);color:var(--ink)}
.pdir{display:inline-block;margin:10px 0 16px;background:var(--sky);border-radius:999px;padding:4px 12px;font-weight:600;font-size:15px;color:var(--green2);align-self:flex-start}
.plan ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.plan li{display:flex;gap:10px;padding:6px 0}
.guarantee{display:flex;gap:14px;align-items:flex-start;max-width:840px;margin:26px auto 0;background:#fff;border-radius:18px;padding:18px 20px;border:2px dashed var(--pink);font-size:15.5px;color:var(--ink2)}
.guarantee svg{flex:none;width:28px;height:28px;fill:#ffe0e4;stroke:var(--pink);stroke-width:2}
.guarantee b{color:var(--ink)}

/* rubro y diseño */
.incl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.incl>div{background:var(--cream);border-radius:var(--r);padding:24px}
.incl .pi{margin-bottom:14px}
.incl p{margin:0;color:var(--ink2)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14.5px;color:var(--ink2);margin:0 0 14px}
.crumbs a{color:var(--ink2)}
.tgrid2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center;position:relative}
.duo{position:relative;padding:0 8% 6% 0}
.duo .phone{position:absolute;right:0;bottom:0;width:24%}
.secs{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;max-width:860px}
.secs li{display:flex;align-items:center;gap:14px;background:var(--cream);border-radius:16px;padding:12px 16px;font-weight:600}
.secs small{display:block;font:700 12px var(--bf);color:var(--ink2);letter-spacing:.08em}
.rubros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:34px 0 0;font-size:15px}
.rubros a{color:var(--ink2)}

/* preguntas */
.faq details{background:#fff;border-radius:16px;margin:0 0 12px;border:2px solid var(--line)}
.sec.sky .faq details{border-color:#fff}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 20px;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--sky);display:grid;place-items:center;font:800 20px/1 var(--hf)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 20px 18px;color:var(--ink2)}

.ctaband{background:var(--green);color:#fff;padding:70px 0;text-align:center;position:relative;overflow:hidden;overflow:clip}
.ctaband::before,.ctaband::after{content:"";position:absolute;border-radius:50%}
.ctaband::before{width:300px;height:300px;left:-90px;top:-120px;background:rgba(255,255,255,.08)}
.ctaband::after{width:220px;height:220px;right:-60px;bottom:-110px;background:rgba(255,201,60,.25)}
.ctaband h2{color:#fff;position:relative;margin-bottom:8px}
.ctaband p{position:relative;margin:0;opacity:.9;font-size:18px}
.ctaband .cta{justify-content:center;margin-top:24px;position:relative;z-index:1}

.foot{background:var(--ink);color:#cfd8df;padding:56px 0 26px;font-size:15px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:30px}
.foot .logo{color:#fff}
.foot .logo i{border-color:#fff}.foot .logo i::after{background:#fff}
.fbrand p{max-width:320px}
.fcol{display:flex;flex-direction:column;gap:6px}
.fcol a{color:#cfd8df;text-decoration:none}
.fcol a:hover{color:#fff}
.fcol .fh{color:#fff;font:700 17px/1.2 var(--hf);margin-bottom:6px}
.fcopy{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;padding-top:20px;border-top:1px solid #3a4a58;font-size:14px}
.fcopy a{color:#cfd8df}

.wafab{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;align-items:center;gap:10px;background:#25d366;color:#fff;text-decoration:none;font-weight:700;padding:12px 18px 12px 14px;border-radius:999px;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.wafab svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8}
.wafab svg .f{fill:#fff;stroke:none}

/* vista completa */
.pv{width:min(1240px,96vw);height:92vh;max-height:none;max-width:none;padding:0;border:0;border-radius:18px;overflow:hidden;background:#e9eef2;box-shadow:0 40px 80px rgba(0,0,0,.4)}
.pv[open]{display:flex;flex-direction:column}
.pv::backdrop{background:rgba(20,30,40,.6)}
.pvbar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pvbar b{font:800 19px var(--hf);margin-right:auto}
.seg{display:flex;background:var(--sky);border-radius:999px;padding:3px}
.seg button{font:700 14px var(--bf);border:0;background:none;padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--ink)}
.seg button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.x{width:40px;height:40px;border-radius:50%;border:0;background:var(--sky);font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.pvbody{flex:1;overflow:auto;padding:18px}
.pvframe{background:#fff;margin:0 auto;max-width:1180px;border-radius:10px;overflow:hidden;box-shadow:var(--sh);transition:max-width .25s}
.pvframe.cel{max-width:390px;border-radius:28px;border:10px solid var(--ink)}

@media (max-width:980px){
  .hgrid,.tgrid2,.gsplit{grid-template-columns:minmax(0,1fr);gap:40px}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band .promesas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collage{max-width:640px;width:100%;margin:0 auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:36px 0 44px}
  .sec{padding:60px 0}
  .tgrid,.steps,.plans,.secs,.fgrid{grid-template-columns:minmax(0,1fr)}
  .tabs{grid-template-columns:minmax(0,1fr);gap:8px}
  .tabs button{padding:10px 14px}
  .tabs button svg{width:34px;height:34px;padding:6px}
  .promesas{gap:10px 12px}
  .promesas li{font-size:14.5px}
  .pi{width:36px;height:36px}
  .incl{grid-template-columns:minmax(0,1fr)}
  .tver{opacity:1;bottom:12px;font-size:13px;padding:7px 13px}
  .tmeta{flex-wrap:wrap}
  .wafab span{display:none}
  .wafab{padding:13px}
  .cta .btn{flex:1 1 100%}
  .pv{width:100vw;height:100vh;border-radius:0}
  .pvbar b{font-size:16px;width:100%}
  .pvbody{padding:8px}
  .pvframe.cel{border-width:0;border-radius:0}
  .collage .c1,.collage .c2{display:none}
  .collage{aspect-ratio:1/.78}
  .collage .c3{left:0;top:4%;width:84%}
  .collage .c4{width:34%;right:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== mini pasos en la portada ===== */
.mini3{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center;font-weight:700;font-size:15.5px}
.mini3 li{display:flex;align-items:center;gap:8px}
.mini3 li+li::before{content:"";width:22px;height:2px;background:#b9cfdc;margin-right:4px}
.mini3 b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sun);font:800 15px/1 var(--hf)}
.mini3 li:nth-child(2) b{background:var(--pink);color:#fff}.mini3 li:nth-child(3) b{background:var(--green);color:#fff}

/* ===== cómo funciona (demo animada) ===== */
.how{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.demo{position:relative;padding:0 0 30px}
.demo .browser{box-shadow:0 30px 60px -24px rgba(31,45,58,.45)}
.demo .bar{position:relative}
.burl{transition:background .3s,color .3s}
.demo.s3 .burl{background:#e3f6ee;color:var(--green2);font-weight:700}
.dok{display:flex;align-items:center;gap:4px;margin-left:auto;font:700 12.5px var(--bf);color:#fff;background:var(--green);border-radius:999px;padding:3px 10px 3px 6px;opacity:0;transform:scale(.6);transition:.35s}
.dok svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.demo.s3 .dok{opacity:1;transform:none}
.dchat{position:absolute;right:-14px;bottom:0;width:min(270px,62%);display:grid;gap:8px;background:#efe7dd;border-radius:18px;padding:14px;box-shadow:var(--sh);opacity:0;transform:translateY(16px);transition:.4s;z-index:3}
.dchat span{font-size:13.5px;padding:7px 11px;border-radius:12px;max-width:92%;opacity:0;transform:translateY(6px);transition:.3s}
.dchat .b1{background:#d9fdd3;justify-self:end}.dchat .b2{background:#fff;justify-self:start}
.demo.s2 .dchat{opacity:1;transform:none}
.demo.s2 .dchat span:nth-child(1){opacity:1;transform:none;transition-delay:.3s}
.demo.s2 .dchat span:nth-child(2){opacity:1;transform:none;transition-delay:1s}
.demo.s2 .dchat span:nth-child(3){opacity:1;transform:none;transition-delay:1.7s}
.dhand{position:absolute;left:30%;top:46%;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.4);opacity:0;transition:left .7s,top .7s,opacity .3s;z-index:4;pointer-events:none}
.dhand svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo.s1 .dhand{opacity:1}
.dhand.tap{animation:tap .4s}
@keyframes tap{50%{transform:scale(.82)}}
.demo .w h1.dsel{box-shadow:0 0 0 4px #2a4bf5;border-radius:6px;background:rgba(42,75,245,.08)}
.hsteps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.hsteps li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:18px;border:2px solid transparent;transition:.3s;opacity:.55}
.hsteps li.on{opacity:1;background:#fff;border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.sec.sky .hsteps li.on{background:#fff}
.hsteps .sn{flex:none;margin:0}
.hsteps h3{margin:2px 0 2px;font-size:21px}
.hsteps p{margin:0;color:var(--ink2);font-size:16px}
.hsteps li:nth-child(4) .sn{background:var(--ink);color:#fff}
.hfine{text-align:center;color:var(--ink2);font-size:15px;margin:30px 0 0}
@media (max-width:980px){.how{grid-template-columns:minmax(0,1fr);gap:28px}.dchat{right:0}}
@media (max-width:640px){.hsteps li{padding:12px 14px}.hsteps h3{font-size:19px}.dchat{width:72%}}
@media (max-width:640px){.mini3{flex-wrap:nowrap;font-size:13.5px;gap:4px}.mini3 li{gap:5px;white-space:nowrap}.mini3 li+li::before{width:8px;margin-right:2px}.mini3 b{width:24px;height:24px;font-size:13px}}

/* ===== buscador de diseños ===== */
.finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;max-width:880px;margin:0 auto 22px}
.finder .namebox{margin:0;max-width:none}
.namebox label small{font-weight:500;color:var(--ink2)}
.namebox input[type=search]{width:100%;font:600 18px var(--bf);padding:13px 15px 13px 44px;border:2px solid var(--line);border-radius:12px;color:var(--ink);background:#fbfdfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355636f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 17a7 7 0 1 0 0-14a7 7 0 0 0 0 14M15 15l6 6'/%3E%3C/svg%3E") 14px 50%/20px no-repeat}
.namebox input[type=search]:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 4px #d6f0e6}
.noq{text-align:center;font-weight:600;margin:0 0 24px}
.tabs.off button{border-color:transparent;box-shadow:none}
.tabs.off button svg{background:var(--sky)}
.ttag{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);margin-top:3px}
.ttag i{width:10px;height:10px;border-radius:50%}
.tmeta h3{font-size:18px}

/* ===== tercer plan ===== */
.plans{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}
.plan.medida{background:linear-gradient(180deg,#fffaf0,#fff);border-color:#f1d48a}
.plan.medida .pdir{background:#fff3c4;color:#8a6200}
.plan .btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.plan .btn svg .f{fill:currentColor;stroke:none}

/* ===== vista completa: anterior / siguiente ===== */
.pvnav{display:flex;align-items:center;gap:6px;font:700 14px var(--bf);color:var(--ink2)}
.pvnav .x{font:800 22px/1 var(--hf)}

/* ===== guías ===== */
.art{padding:40px 0 70px}
.art h1{font-size:clamp(34px,4.6vw,52px);font-weight:800}
.prose{font-size:18px;line-height:1.7}
.prose h2{text-align:left;font-size:clamp(26px,3vw,32px);margin:38px 0 12px}
.prose h3{font-size:22px;margin:26px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 18px;display:grid;gap:8px}
.prose pre{background:var(--ink);color:#e7f4ee;border-radius:12px;padding:14px 16px;overflow-x:auto;font-size:15px;white-space:pre-wrap;word-break:break-all}
.prose code{background:var(--sky);padding:2px 6px;border-radius:6px;font-size:.92em}
.sec.sky .prose p{color:var(--ink)}
.artcta{display:flex;align-items:center;gap:16px;margin:40px 0 0;padding:22px;border-radius:var(--r);background:var(--sky);border:2px solid var(--line)}
.artcta p{margin:4px 0 0;color:var(--ink2)}
.artcta .btn{flex:none;margin-left:auto}
.glist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.glist a{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:16px;border:2px solid var(--line);text-decoration:none;color:var(--ink);background:#fff;transition:border-color .2s, transform .2s}
.glist a:hover{border-color:var(--green);transform:translateY(-2px)}
.glist b{display:block;font:700 20px/1.2 var(--hf)}
.glist small{display:block;color:var(--ink2);font-size:15px;margin-top:4px}

/* ===== barra fija en el celular ===== */
.mbar{display:none}
@media (max-width:980px){.plans{grid-template-columns:minmax(0,1fr);max-width:560px}}
@media (max-width:640px){
  .finder{grid-template-columns:minmax(0,1fr)}
  .mbar{display:flex;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;padding:8px;background:rgba(255,255,255,.96);border-radius:18px;box-shadow:0 12px 30px -10px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
  .mbar .btn{flex:1;padding:13px 16px}
  .mbar .btn.wa{flex:none;background:#25d366;box-shadow:0 4px 0 #1aa34f;width:56px;padding:0}
  .mbar .btn svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8}
  .mbar .btn svg .f{fill:#fff;stroke:none}
  .wafab{display:none}
  body{padding-bottom:84px}
  .pvnav span{display:none}
  .artcta{flex-wrap:wrap}.artcta .btn{margin-left:0;width:100%}
}
@media (max-width:400px){.mini3{font-size:12.5px;gap:3px}.mini3 li{gap:4px}.mini3 li+li::before{width:5px;margin-right:1px}.mini3 b{width:21px;height:21px;font-size:12px}}
@media (max-width:350px){.mini3{flex-wrap:wrap}}

/* vitrina de la portada */
.show{position:relative;width:100%;max-width:640px;margin:0 auto}
.sstage{position:relative;padding:0 9% 9% 0;transition:opacity .22s ease,transform .22s ease}
.sstage.out{opacity:0;transform:translateY(6px)}
.show .sb{display:block;width:100%;padding:0;cursor:pointer;text-align:left;font:inherit;box-shadow:0 34px 70px -30px rgba(31,45,58,.55);position:relative}
.show .sb .tver{position:absolute;right:12px;bottom:12px;background:var(--ink);color:#fff;font-weight:700;font-size:13px;padding:6px 12px;border-radius:99px;opacity:0;transform:translateY(4px);transition:.2s}
.show .sb:hover .tver,.show .sb:focus-visible .tver{opacity:1;transform:none}
.show .sp{position:absolute;right:0;bottom:0;width:27%;box-shadow:0 26px 50px -16px rgba(31,45,58,.6)}
.spills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.spills button{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--bf,inherit);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:9px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.spills button i{width:10px;height:10px;border-radius:50%;flex:none}
.spills button:hover{border-color:#b9cfdc}
.spills button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.spills button b{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--sun)}
.spills button.run b{animation:spfill 4.8s linear forwards}
.show:hover .spills button.run b{animation-play-state:paused}
@keyframes spfill{to{width:100%}}
@media (max-width:640px){.spills{gap:6px;justify-content:center}.spills button{font-size:13px;padding:8px 11px}.show .sp{width:30%}}