.mockup-gas-agua{--ink:#122033;--muted:#687386;--paper:#f4f7f6;--card:#fff;--navy:#193652;--water:#247eb5;--water2:#e4f3fb;--gas:#e9823b;--gas2:#fff0e5;--teal:#288978;--line:#dce3e6}.mockup-gas-agua *{box-sizing:border-box}.mockup-gas-agua [hidden]{display:none!important}.mockup-gas-agua{margin:0;background:var(--paper);color:var(--ink);font:16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.mockup-gas-agua button,.mockup-gas-agua input,.mockup-gas-agua select{font:inherit}.mockup-gas-agua .wrap{max-width:1180px;margin:auto;padding:0 28px}.mockup-gas-agua header{height:84px;background:#fff;border-bottom:1px solid var(--line)}.mockup-gas-agua header .wrap{height:100%;display:flex;align-items:center;gap:34px}.mockup-gas-agua .brand{display:flex;align-items:center;gap:12px;font-weight:850;font-size:20px}.mockup-gas-agua .logo{width:35px;height:35px;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff;font-size:14px}.mockup-gas-agua .nav{display:flex;gap:26px;color:#4d5869;font-weight:700;font-size:14px}.mockup-gas-agua .actions{margin-left:auto;display:flex;gap:10px}.mockup-gas-agua .ghost{border:1px solid var(--line);background:#fff;padding:11px 15px;border-radius:12px;font-weight:750;color:var(--ink)}.mockup-gas-agua .hero{padding:58px 0 50px;background:linear-gradient(115deg,#fff8f3 0 50%,#f2faff 50%)}.mockup-gas-agua .crumb{color:#3476c2;font-size:14px;margin-bottom:20px}.mockup-gas-agua .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:65px;align-items:center}.mockup-gas-agua .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:var(--teal)}.mockup-gas-agua h1{font-size:56px;line-height:1.02;letter-spacing:-.05em;margin:14px 0 19px}.mockup-gas-agua .lead{font-size:19px;color:var(--muted);max-width:670px}.mockup-gas-agua .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.mockup-gas-agua .chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:13px;font-weight:780}.mockup-gas-agua .visual{height:350px;position:relative}.mockup-gas-agua .meter{position:absolute;left:64px;top:24px;width:245px;height:245px;border-radius:50%;background:#fff;border:20px solid #e9eef0;box-shadow:0 25px 50px #27425d1a;display:grid;place-items:center}.mockup-gas-agua .meter:before{content:"";position:absolute;inset:27px;border:3px solid #dce4e8;border-radius:50%}.mockup-gas-agua .needle{position:absolute;width:83px;height:5px;background:var(--navy);left:50%;top:50%;transform-origin:left center;transform:rotate(-38deg);border-radius:4px}.mockup-gas-agua .dot{position:absolute;width:17px;height:17px;border-radius:50%;background:var(--navy)}.mockup-gas-agua .meter strong{position:absolute;bottom:42px;font-size:19px}.mockup-gas-agua .pipe-gas,.mockup-gas-agua .pipe-water{position:absolute;width:118px;height:42px;border-radius:22px;right:8px}.mockup-gas-agua .pipe-gas{top:72px;background:var(--gas)}.mockup-gas-agua .pipe-water{top:132px;background:var(--water)}.mockup-gas-agua .pipe-gas:after,.mockup-gas-agua .pipe-water:after{content:"";position:absolute;width:46px;height:46px;border-radius:50%;right:-10px;top:-2px;background:inherit;border:7px solid #fff}.mockup-gas-agua .bubble{position:absolute;right:3px;bottom:22px;background:#fff;border-radius:16px;padding:15px 18px;box-shadow:0 15px 35px #26435b1d}.mockup-gas-agua .bubble small{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em}.mockup-gas-agua .bubble strong{font-size:25px}.mockup-gas-agua .tool{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 20px 55px #253c5010;margin-bottom:70px}.mockup-gas-agua .cases{padding:22px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mockup-gas-agua .case{min-height:86px;text-align:left;border:1px solid var(--line);background:#fbfcfc;border-radius:14px;padding:14px;cursor:pointer;color:var(--ink)}.mockup-gas-agua .case b{display:block;font-size:14px;margin:3px 0}.mockup-gas-agua .case span{font-size:11px;color:var(--muted)}.mockup-gas-agua .case.active{border:2px solid var(--water);background:#eef7fc;padding:13px}.mockup-gas-agua .ico{font-size:18px}.mockup-gas-agua .calc{display:grid;grid-template-columns:.94fr 1.06fr}.mockup-gas-agua .form{padding:31px}.mockup-gas-agua .form h2{font-size:26px;letter-spacing:-.03em;margin:0 0 7px}.mockup-gas-agua .hint{color:var(--muted);margin:0 0 23px}.mockup-gas-agua .fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.mockup-gas-agua .field{display:flex;flex-direction:column;gap:7px}.mockup-gas-agua .field.full{grid-column:1/-1}.mockup-gas-agua .field label{font-size:13px;font-weight:800}.mockup-gas-agua .field input,.mockup-gas-agua .field select{border:1px solid #ccd5db;border-radius:12px;background:#fff;padding:14px;outline:none;color:var(--ink)}.mockup-gas-agua .field input:focus,.mockup-gas-agua .field select:focus{border-color:var(--water);box-shadow:0 0 0 3px #247eb51a}.mockup-gas-agua .primary{width:100%;border:0;border-radius:13px;padding:15px;background:var(--water);color:#fff;font-weight:850;margin-top:20px;cursor:pointer}.mockup-gas-agua .result{background:var(--navy);color:#fff;padding:31px;position:relative;overflow:hidden}.mockup-gas-agua .result:after{content:"";position:absolute;width:270px;height:270px;border-radius:50%;border:48px solid #ffffff08;right:-155px;bottom:-150px}.mockup-gas-agua .caps{color:#a6d7e2;font-size:10px;font-weight:900;letter-spacing:.13em}.mockup-gas-agua .big{font-size:46px;line-height:1.05;letter-spacing:-.045em;font-weight:920;margin:15px 0 7px}.mockup-gas-agua .sub{color:#d3dfeb;min-height:48px}.mockup-gas-agua .status{display:inline-block;background:#dff3e9;color:#176449;border-radius:99px;padding:8px 12px;font-size:13px;font-weight:850;margin:12px 0 22px}.mockup-gas-agua .rows{border-top:1px solid #ffffff24}.mockup-gas-agua .row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #ffffff1b;color:#d5deea}.mockup-gas-agua .row strong{color:#fff;text-align:right}.mockup-gas-agua .section{padding:10px 0 68px}.mockup-gas-agua .section-head{text-align:center;max-width:720px;margin:0 auto 30px}.mockup-gas-agua .section-head h2{font-size:39px;letter-spacing:-.04em;margin:8px 0}.mockup-gas-agua .section-head p{color:var(--muted)}.mockup-gas-agua .bill-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:16px}.mockup-gas-agua .bill{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}.mockup-gas-agua .bill h3{margin:0 0 4px}.mockup-gas-agua .bill>p{color:var(--muted);font-size:13px;margin:0 0 23px}.mockup-gas-agua .bar{display:grid;grid-template-columns:110px 1fr 65px;align-items:center;gap:10px;margin:15px 0;font-size:13px}.mockup-gas-agua .track{height:10px;background:#edf0f2;border-radius:99px;overflow:hidden}.mockup-gas-agua .fill{height:100%;border-radius:99px}.mockup-gas-agua .bar b{text-align:right}.mockup-gas-agua .water-card{background:linear-gradient(145deg,#1f74ac,#2695c5);color:#fff;border-radius:20px;padding:24px;display:grid;grid-template-columns:1fr .8fr;gap:28px}.mockup-gas-agua .water-card h3{font-size:27px;margin:0 0 8px}.mockup-gas-agua .water-card p{color:#d8edf7}.mockup-gas-agua .water-stat{display:grid;place-items:center}.mockup-gas-agua .circle{width:175px;height:175px;border-radius:50%;border:18px solid #ffffff30;display:grid;place-items:center;text-align:center}.mockup-gas-agua .circle strong{font-size:31px;display:block}.mockup-gas-agua .circle span{font-size:11px;color:#d8edf7}.mockup-gas-agua .alerts{background:#e9efec;padding:67px 0}.mockup-gas-agua .alerts-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:65px}.mockup-gas-agua .alerts h2{font-size:40px;line-height:1.08;margin:10px 0}.mockup-gas-agua .alerts p{color:var(--muted)}.mockup-gas-agua .checks{display:grid;grid-template-columns:1fr 1fr;gap:13px}.mockup-gas-agua .check{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.mockup-gas-agua .check .mark{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--gas2);color:var(--gas);font-weight:900;margin-bottom:12px}.mockup-gas-agua .check b{display:block;margin-bottom:5px}.mockup-gas-agua .check span{font-size:13px;color:var(--muted)}.mockup-gas-agua footer{background:#fff;border-top:1px solid var(--line);padding:25px 0;color:var(--muted);font-size:13px}@media(max-width:850px){.mockup-gas-agua .nav{display:none}.mockup-gas-agua .hero-grid,.mockup-gas-agua .calc,.mockup-gas-agua .bill-grid,.mockup-gas-agua .alerts-grid{grid-template-columns:1fr}.mockup-gas-agua .cases{display:flex;overflow:auto}.mockup-gas-agua .case{min-width:190px}.mockup-gas-agua .visual{height:290px}.mockup-gas-agua .checks{grid-template-columns:1fr 1fr}.mockup-gas-agua h1{font-size:45px}}@media(max-width:540px){.mockup-gas-agua .wrap{padding:0 18px}.mockup-gas-agua .hero{padding-top:35px;background:#f7fbfd}.mockup-gas-agua .visual{display:none}.mockup-gas-agua h1{font-size:39px}.mockup-gas-agua .fields,.mockup-gas-agua .checks{grid-template-columns:1fr}.mockup-gas-agua .field.full{grid-column:auto}.mockup-gas-agua .water-card{grid-template-columns:1fr}.mockup-gas-agua .tool{border-radius:18px}.mockup-gas-agua .form,.mockup-gas-agua .result{padding:25px 20px}}.mockup-gas-agua{width:100%;overflow:hidden}.mockup-gas-agua .top,.mockup-gas-agua header.top{display:none!important}.mockup-gas-agua .foot{display:none!important}.mockup-gas-agua .support-real{width:min(1160px,calc(100% - 40px));margin:auto;padding:64px 0}.mockup-gas-agua .support-real-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px}.mockup-gas-agua .support-real details{border-bottom:1px solid #dfe6ed;padding:14px 0}.mockup-gas-agua .support-real summary{cursor:pointer;font-weight:750}.mockup-gas-agua .support-real p{color:#687a8f;line-height:1.65}@media(max-width:800px){.mockup-gas-agua .support-real-grid{grid-template-columns:1fr}}