/* habitamotion.cl · Analizador, calculadora y muestra en 24 h (2026-10-18) */
.tool{position:relative}
.tool h2{font-size:clamp(36px,4.8vw,72px);margin-top:18px;text-wrap:balance}
.tool .sub{color:var(--mut);font-size:18px;max-width:54ch;margin-top:14px}

/* ---------- analizador ---------- */
.az{background:var(--ink);color:var(--paper);border-radius:clamp(26px,3vw,44px);margin:0 clamp(8px,1.4vw,20px);overflow:hidden;isolation:isolate}
.az::before{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(242,194,48,.18),transparent 60%);z-index:-1}
.az .lab{color:rgba(251,250,247,.6)}.az .lab b{background:var(--y);color:var(--ink)}
.az .sub{color:rgba(251,250,247,.7)}
.az h2 .hl{color:var(--ink)}.az h2 .hl::before{height:.9em;bottom:.02em}
.azf{display:flex;gap:10px;margin-top:30px;max-width:720px;background:var(--paper);border-radius:999px;padding:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.azf input{flex:1;min-width:0;border:0;background:none;font:500 clamp(16px,1.6vw,20px)/1 var(--ft);color:var(--ink);padding:0 18px;outline:none}
.azf input::placeholder{color:var(--dim)}
.azf .btn{background:var(--y);color:var(--ink);min-height:54px;white-space:nowrap}
.az .alt{margin-top:14px;font-size:15px;color:rgba(251,250,247,.6)}
.az .alt button{background:none;border:0;color:var(--y);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.az .err{margin-top:14px;color:#ffb4a8;font-size:16px;min-height:1px}
.azl{margin-top:36px;display:grid;gap:12px;max-width:620px}
.azl li{list-style:none;display:flex;align-items:center;gap:12px;font-size:17px;color:rgba(251,250,247,.45);transition:color .3s}
.azl li i{width:22px;height:22px;border-radius:50%;border:2px solid rgba(251,250,247,.25);flex:none;position:relative}
.azl li.run{color:var(--paper)}.azl li.run i{border-color:var(--y);border-top-color:transparent;animation:azspin .8s linear infinite}
.azl li.ok{color:rgba(251,250,247,.75)}.azl li.ok i{border-color:var(--y);background:var(--y)}
.azl li.ok i::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes azspin{to{transform:rotate(360deg)}}
.azr{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,44px);margin-top:40px;align-items:start}
.azs{background:rgba(251,250,247,.05);border:1px solid rgba(251,250,247,.1);border-radius:26px;padding:clamp(22px,3vw,34px);display:grid;gap:22px;justify-items:center;text-align:center}
.gauge{position:relative;width:min(230px,60vw);aspect-ratio:1}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:12}.gauge .bg{stroke:rgba(251,250,247,.1)}
.gauge .fg{stroke:var(--gc,var(--y));stroke-linecap:round;stroke-dasharray:578;stroke-dashoffset:578;transition:stroke-dashoffset 1.6s var(--e)}
.gauge b{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(64px,8vw,92px)/1 var(--fd);font-stretch:82%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gauge small{position:absolute;left:0;right:0;bottom:24%;font-size:14px;color:rgba(251,250,247,.55)}
.verd{font:800 clamp(22px,2.4vw,30px)/1.1 var(--fd);font-stretch:85%}
.verd+p{color:rgba(251,250,247,.65);font-size:15px;margin-top:-12px}
.t-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.t-chip{border-radius:14px;background:rgba(251,250,247,.06);padding:12px 10px;text-align:left}
.t-chip span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(251,250,247,.5)}
.t-chip b{font:800 22px/1.2 var(--fd);font-stretch:85%;font-variant-numeric:tabular-nums}
.t-chip b.g{color:#7ee2a1}.t-chip b.m{color:var(--y)}.t-chip b.r{color:#ff8a7a}
.t-chip.pend b{font:500 14px/1.3 var(--ft);color:rgba(251,250,247,.5)}
.t-shot{width:150px;border-radius:22px;border:6px solid #2a2d31;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.t-shot img{width:100%;display:block}
.find{display:grid;gap:10px}
.fi{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:16px;background:rgba(251,250,247,.04);border:1px solid rgba(251,250,247,.08);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s var(--e)}
.fi.in{opacity:1;transform:none}
.fi i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px}
.fi.bad i{background:#ff8a7a;color:var(--ink)}.fi.mid i{background:var(--y);color:var(--ink)}.fi.good i{background:#7ee2a1;color:var(--ink)}
.fi h4{font:650 17px/1.3 var(--ft)}.fi p{font-size:15px;color:rgba(251,250,247,.62);margin-top:3px}
.fsec{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,250,247,.5);margin:14px 0 2px}
.azc{margin-top:26px;background:var(--y);color:var(--ink);border-radius:22px;padding:clamp(22px,3vw,30px);display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.azc h3{font:850 clamp(22px,2.6vw,32px)/1.08 var(--fd);font-stretch:85%;max-width:22ch}.azc p{font-size:15px;margin-top:6px;max-width:46ch}
.azc .btn{background:var(--ink);color:var(--paper)}
.azn{font-size:13px;color:rgba(251,250,247,.45);margin-top:14px}
@media (max-width:860px){.azr{grid-template-columns:1fr}.azf{flex-direction:column;border-radius:22px}.azf input{min-height:52px}.azf .btn{width:100%}}

/* ---------- calculadora ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,30px);margin-top:10px}
.calc .box{min-width:0}
.fld{display:grid;gap:8px;margin-bottom:22px}
.fld label{font:600 13px/1 var(--ft);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fld select,.fld input[type=text]{width:100%;min-height:54px;border-radius:14px;border:1px solid var(--line);background:var(--bg);padding:0 16px;font:500 18px/1 var(--ft);color:var(--ink)}
.fld .row2{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fld output{font:850 28px/1 var(--fd);font-stretch:85%}
.fld input[type=range]{width:100%;accent-color:var(--ink);height:28px}
.fld small{color:var(--mut);font-size:14px}
.seg{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:5px;border:1px solid var(--line)}
.seg button{flex:1;min-height:44px;border:0;border-radius:999px;background:none;font:600 15px var(--ft);color:var(--mut);cursor:pointer}
.seg button.on{background:var(--ink);color:var(--paper)}
.t-big{font:900 clamp(48px,6vw,84px)/1 var(--fd);font-stretch:82%;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--y)}
.calc .k p.lead2{color:rgba(251,250,247,.7);margin:8px 0 22px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
.kpi{border-radius:16px;background:rgba(251,250,247,.06);padding:14px}
.kpi span{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,250,247,.55)}
.kpi b{font:850 26px/1.2 var(--fd);font-stretch:85%;font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:5px;height:130px;position:relative;margin-top:6px}
.bars i{flex:1;background:rgba(251,250,247,.16);border-radius:6px 6px 2px 2px;transition:height .6s var(--e),background .3s;min-height:3px}
.bars i.pos{background:var(--y)}
.bars .line{position:absolute;left:0;right:0;border-top:2px dashed rgba(255,138,122,.8);transition:bottom .6s var(--e)}
.bars .line span{position:absolute;right:0;top:-22px;font-size:12px;color:#ff8a7a}
.t-bx{display:flex;justify-content:space-between;font-size:12px;color:rgba(251,250,247,.45);margin-top:6px}
.cnote{font-size:13px;color:var(--mut);margin-top:16px;max-width:80ch}
@media (max-width:980px){.calc{grid-template-columns:1fr}}

/* ---------- muestra en 24 h ---------- */
.ms{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);align-items:start}
.ms ol{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:14px;counter-reset:s}
.ms ol li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;font-size:17px;color:var(--mut)}
.ms ol li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--y);color:var(--ink);font:800 16px var(--fd)}
.ms ol b{color:var(--ink)}
.msf{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px}
.msf .fld{margin:0}.msf .full{grid-column:1/-1}
.msf .btn{width:100%;background:var(--y);color:var(--ink);margin-top:6px}
.msf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msf .t-ok{grid-column:1/-1;display:none;background:var(--bg);border-radius:16px;padding:18px;font-size:16px}
.msf.sent .t-ok{display:block}
.msf .priv{grid-column:1/-1;font-size:13px;color:var(--mut)}
@media (max-width:860px){.ms{grid-template-columns:1fr}.msf{grid-template-columns:1fr}}

/* ---------- antes y después ---------- */
.ba-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.ba-tabs button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:600 15px var(--ft);color:var(--mut);cursor:pointer}
.ba-tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ba{position:relative;border-radius:24px;overflow:hidden;background:var(--wire);aspect-ratio:1000/575;user-select:none;touch-action:pan-y;box-shadow:0 30px 60px -36px rgba(22,24,26,.5)}
.ba-after,.ba-clip{position:absolute;inset:0}
.ba-clip{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-br{height:100%;display:flex;flex-direction:column;background:#fff}
.ba-bar{display:flex;align-items:center;gap:6px;height:44px;flex:none;padding:0 14px;background:#eceae4;border-bottom:1px solid var(--line)}
.ba-bar i{width:10px;height:10px;border-radius:50%;background:#d0ccc2}
.ba-bar span{margin-left:10px;flex:1;max-width:340px;background:#fff;border-radius:999px;padding:5px 14px;font:500 13px var(--ft);color:var(--mut)}
.ba-after picture,.ba-after img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ba-before{height:100%;background:#e9e6df;display:flex;flex-direction:column}
.ba-before>.ba-br{flex:1}.ba-before .ba-note{margin:0;padding:12px 18px;background:#16181A;color:#fbfaf7;font-size:14px}
.ba-dead{flex:1;display:grid;place-content:center;gap:8px;text-align:center;padding:20px;background:#f6f6f6;color:#5f6368;font-family:Arial,sans-serif}
.ba-dead b{font-size:clamp(18px,2.4vw,26px);color:#202124}.ba-dead span{font-size:15px}
.ba-g{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(16px,4vw,48px)}
.ba-gtop{display:flex;align-items:center;gap:8px;font:600 13px var(--ft);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ba-dot{width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e2453c}
.ba-gcard{background:#fff;border-radius:18px;padding:clamp(16px,2.4vw,26px);max-width:520px;box-shadow:0 14px 30px -20px rgba(0,0,0,.4);font-family:Arial,sans-serif;color:#202124}
.ba-gcard>b{display:block;font-size:clamp(18px,2.2vw,24px);font-weight:500}
.ba-st{display:block;font-size:14px;color:#70757a;margin:4px 0 12px}.ba-st i{font-style:normal;color:#e8a200;letter-spacing:1px}
.ba-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #eee;font-size:14px}
.ba-row span{color:#70757a}.ba-row em{font-style:normal;color:#9aa0a6;text-align:right}
.ba-row em.ba-ig{color:#c13584}.ba-row em.ba-no{color:#e2453c}
.ba-g .ba-note{margin:0;font-size:15px;color:var(--ink);max-width:52ch;background:none;padding:0}
.ba-h{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:var(--y);pointer-events:none}
.ba-h span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--y);color:var(--ink);display:grid;place-items:center;font:800 18px var(--ft);box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.ba-lbl{position:absolute;top:58px;padding:6px 12px;border-radius:999px;background:rgba(22,24,26,.82);color:#fff;font:600 12.5px var(--ft);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.ba-lbl.l{left:14px}.ba-lbl.r{right:14px;background:var(--y);color:var(--ink)}
.ba-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none}
.ba-in:focus-visible+.ba-h,.ba:focus-within .ba-h span{outline:3px solid var(--ink)}
.ba-cap{margin-top:14px;color:var(--mut);font-size:16px}.ba-cap b{color:var(--ink)}.ba-cap a{color:var(--ink);font-weight:600;white-space:nowrap}
@media (max-width:700px){.ba{aspect-ratio:390/700}.ba-g{justify-content:flex-start;padding-top:24px}.ba-lbl{top:54px}}

/* ---------- testimonios ---------- */
.tm{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.tmc{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:18px}
.tmc .st{color:#e8a200;letter-spacing:2px}
.tmc blockquote{margin:0;font:600 clamp(19px,1.8vw,22px)/1.4 var(--ft);color:var(--ink)}
.tmc footer{display:flex;align-items:center;gap:12px;margin-top:auto;padding:0;font-size:15px;color:var(--mut)}
.tmc footer i{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--y);display:grid;place-items:center;font:800 16px var(--fd);font-style:normal;flex:none}
.tmc footer b{display:block;color:var(--ink)}.tmc footer a{color:var(--mut)}
.tmc.draft{outline:2px dashed #e2453c;outline-offset:4px}
.tmc.draft::before{content:"BORRADOR · falta aprobación del cliente";font:700 11px var(--ft);letter-spacing:.08em;color:#e2453c}
/* el "Antes" se lee completo en su mitad */
.ba-g,.ba-dead{width:48%}
.ba-dead{place-content:center start;text-align:left;padding:20px 20px 20px 5%}
.ba-before .ba-note{padding-right:52%}
.ba-gcard{max-width:none}
@media (max-width:700px){.ba-g,.ba-dead{width:60%}.ba-before .ba-note{padding-right:40%;font-size:13px}.ba-g{padding:96px 12px 16px 14px}.ba-gcard{padding:14px}.ba-row{flex-direction:column;gap:2px}.ba-row em{text-align:left}.ba-dead b{font-size:17px}}
/* antes y después v2: contraste claro en escritorio y tarjetas apiladas en celular */
.ba-before{background:#dcd8cf}
.ba-clip{filter:saturate(.55)}
.ba-dead{background:#e4e1da}
.ba-clip::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--x) - 40px);width:40px;background:linear-gradient(90deg,transparent,rgba(22,24,26,.18));pointer-events:none}
.ba-arrow{display:none}
@media (max-width:700px){
  .ba{aspect-ratio:auto;display:flex;flex-direction:column;gap:10px;background:none;box-shadow:none;overflow:visible;border-radius:0;touch-action:auto}
  .ba-lbl{position:static;align-self:flex-start;order:0}
  .ba-lbl.r{order:3}
  .ba-clip{position:relative;inset:auto;clip-path:none!important;order:1;border-radius:20px;overflow:hidden;filter:none}
  .ba-clip::after{display:none}
  .ba-after{position:relative;inset:auto;order:4;border-radius:20px;overflow:hidden;height:min(520px,120vw);box-shadow:0 20px 40px -26px rgba(22,24,26,.5)}
  .ba-h,.ba-in{display:none}
  .ba-before{height:auto}
  .ba-g,.ba-dead{width:100%}
  .ba-g{padding:18px 16px}
  .ba-dead{padding:34px 18px;min-height:150px}
  .ba-before .ba-note{padding:12px 16px}
  .ba-arrow{display:block;order:2;align-self:center;font-size:22px;color:var(--mut);line-height:1}
}