/* ========================================================================= MG LIQUIGÁS — estilos (mobile-first, leve) Crítico above-the-fold fica inline no ; aqui o restante. ========================================================================= */ :root{ --verde:#1F9D57; --verde-d:#157a43; --laranja:#F47A20; --laranja-d:#d9650f; --tinta:#1b2520; --cinza:#5b6660; --linha:#e7ece8; --fundo:#ffffff; --creme:#f5f8f4; --zap:#25D366; --zap-d:#1aaf52; --raio:14px; --raio-sm:10px; --maxw:1120px; --sombra:0 6px 24px rgba(20,40,28,.08); --sombra-sm:0 2px 8px rgba(20,40,28,.07); --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none} body{font-family:var(--ff);color:var(--tinta);background:var(--fundo); line-height:1.55;-webkit-font-smoothing:antialiased;font-size:16px} .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px} .muted{color:var(--cinza)} .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)} /* ---------- botões / CTAs ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:14px 22px;border-radius:999px;font-weight:800;font-size:1.02rem; line-height:1;transition:transform .15s ease,box-shadow .15s ease,background .15s ease; width:100%;text-align:center} .btn svg{flex:none} .btn-zap{background:var(--zap);color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.35)} .btn-zap:hover{background:var(--zap-d);transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.42)} .btn-tel{background:#fff;color:var(--verde-d);border:2px solid var(--verde)} .btn-tel:hover{background:var(--creme);transform:translateY(-2px)} .btn-orange{background:var(--laranja);color:#fff;box-shadow:0 6px 18px rgba(244,122,32,.32)} .btn-orange:hover{background:var(--laranja-d);transform:translateY(-2px);box-shadow:0 10px 24px rgba(244,122,32,.4)} .btn-ghost{background:#fff;color:var(--tinta);border:1.5px solid var(--linha)} .btn-ghost:hover{border-color:var(--verde);color:var(--verde-d)} /* ---------- topo ---------- */ .topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--linha)} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px} .topbar img{height:38px;width:auto} .top-cta{display:flex;gap:8px;align-items:center} .top-tel{display:none;font-weight:800;color:var(--verde-d);font-size:1rem;align-items:center;gap:7px} .top-zap{display:inline-flex;align-items:center;gap:8px;background:var(--zap);color:#fff; font-weight:800;font-size:.92rem;padding:10px 16px;border-radius:999px;min-height:44px} .top-zap:hover{background:var(--zap-d)} /* ---------- hero ---------- */ .hero{position:relative;background: radial-gradient(120% 90% at 100% 0%, #eafaef 0%, rgba(234,250,239,0) 55%), linear-gradient(180deg,#ffffff 0%,var(--creme) 100%);overflow:hidden;padding:26px 0 8px} .hero .wrap{display:flex;flex-direction:column} .badge-auth{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--linha); border-radius:999px;padding:7px 14px 7px 9px;font-weight:700;font-size:.82rem;color:var(--verde-d); box-shadow:var(--sombra-sm);align-self:flex-start} .badge-auth img{height:20px;width:auto} .hero h1{font-size:clamp(1.9rem,7.2vw,2.7rem);line-height:1.08;font-weight:900;letter-spacing:-.02em;margin:16px 0 12px} .hero h1 .hl{color:var(--laranja)} .hero p.lead{font-size:1.08rem;color:var(--cinza);max-width:34ch;margin-bottom:18px} .price-pill{display:inline-flex;align-items:baseline;gap:10px;background:#fff;border:1px solid var(--linha); border-radius:var(--raio);padding:12px 16px;box-shadow:var(--sombra-sm);margin-bottom:18px;flex-wrap:wrap} .price-pill .lab{font-size:.8rem;font-weight:700;color:var(--cinza);text-transform:uppercase;letter-spacing:.06em} .price-pill .val{font-size:1.7rem;font-weight:900;color:var(--verde-d);line-height:1} .price-pill .val small{font-size:.95rem;font-weight:800;vertical-align:.35em} .price-pill .obs{flex-basis:100%;font-size:.8rem;color:var(--cinza);font-weight:600} .hero-cta{display:flex;flex-direction:column;gap:10px;margin-bottom:8px} .hero-media{position:relative;margin:14px auto 0;max-width:420px;width:100%} .hero-media img.man{width:100%;height:auto;filter:drop-shadow(0 22px 28px rgba(20,40,28,.18))} .trust-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:.86rem;font-weight:700;color:var(--cinza)} .trust-row span{display:inline-flex;align-items:center;gap:7px} .trust-row .dot{width:7px;height:7px;border-radius:50%;background:var(--verde)} /* ---------- seções ---------- */ section.blk{padding:46px 0} section.blk.alt{background:var(--creme)} .h2{font-size:clamp(1.5rem,5.5vw,2rem);font-weight:900;letter-spacing:-.02em;line-height:1.12;margin-bottom:8px} .sub{color:var(--cinza);font-size:1.02rem;max-width:46ch;margin-bottom:26px} /* pitch (coluna esquerda do bloco pedido) */ .pitch-list{list-style:none;margin:4px 0 22px;display:grid;gap:13px} .pitch-list li{display:flex;gap:11px;align-items:flex-start;font-weight:700;font-size:1rem;color:var(--tinta)} .pitch-list li svg{flex:none;margin-top:1px} .pitch{display:flex;flex-direction:column} .pitch-photo{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--linha);box-shadow:var(--sombra-sm);position:relative;flex:1 1 auto;min-height:230px} .pitch-photo img{width:100%;height:100%;min-height:230px;object-fit:cover;object-position:center 28%} .pitch-photo figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(10,20,14,.72));color:#fff;font-size:.84rem;font-weight:700;padding:26px 16px 13px;display:flex;align-items:center;gap:8px} /* passos como funciona */ .steps{display:grid;gap:14px} .step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--linha); border-radius:var(--raio);padding:18px;box-shadow:var(--sombra-sm)} .step .n{flex:none;width:42px;height:42px;border-radius:12px;background:var(--verde);color:#fff; font-weight:900;font-size:1.2rem;display:grid;place-items:center} .step h3{font-size:1.06rem;font-weight:800;margin-bottom:3px} .step p{color:var(--cinza);font-size:.95rem} /* diferenciais */ .feats{display:grid;gap:14px} .feat{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:20px;box-shadow:var(--sombra-sm)} .feat .ic{width:46px;height:46px;border-radius:12px;background:#eafaef;display:grid;place-items:center;margin-bottom:12px} .feat .ic svg{width:24px;height:24px} .feat h3{font-size:1.08rem;font-weight:800;margin-bottom:5px} .feat p{color:var(--cinza);font-size:.95rem} /* ---------- formulário adiante seu pedido ---------- */ .order{background:#fff;border:1px solid var(--linha);border-radius:18px;box-shadow:var(--sombra); padding:22px;max-width:560px;margin:0 auto} .order h3{font-size:1.18rem;font-weight:900;margin-bottom:4px} .order .hint{color:var(--cinza);font-size:.9rem;margin-bottom:18px} .field{margin-bottom:16px} .field>label{display:block;font-weight:800;font-size:.9rem;margin-bottom:8px} .prod-fixed{display:flex;align-items:center;gap:14px;background:var(--creme);border:1px solid var(--linha); border-radius:var(--raio-sm);padding:12px 14px} .prod-fixed img{width:46px;height:46px;object-fit:contain} .prod-fixed .pn{font-weight:800;font-size:.98rem} .prod-fixed .pp{font-size:.85rem;color:var(--cinza)} .qty{display:inline-flex;align-items:center;border:1.5px solid var(--linha);border-radius:999px;overflow:hidden} .qty button{width:48px;height:48px;font-size:1.4rem;font-weight:800;color:var(--verde-d);display:grid;place-items:center} .qty button:active{background:var(--creme)} .qty input{width:56px;height:48px;border:0;text-align:center;font-size:1.15rem;font-weight:900;color:var(--tinta); -moz-appearance:textfield} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .seg{display:grid;grid-template-columns:1fr 1fr;gap:10px} .seg label{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px; border:1.5px solid var(--linha);border-radius:var(--raio-sm);font-weight:800;font-size:.96rem;cursor:pointer; transition:border-color .15s,background .15s,color .15s;padding:0 8px;text-align:center} .seg input{position:absolute;opacity:0;pointer-events:none} .seg input:checked+label,.seg label.on{border-color:var(--verde);background:#eafaef;color:var(--verde-d)} .pay{display:grid;gap:10px} .pay label{display:flex;align-items:center;gap:11px;min-height:52px;border:1.5px solid var(--linha); border-radius:var(--raio-sm);padding:0 16px;font-weight:700;font-size:.98rem;cursor:pointer;transition:border-color .15s,background .15s} .pay input{width:20px;height:20px;accent-color:var(--verde)} .pay label.on{border-color:var(--verde);background:#eafaef} input.txt{width:100%;min-height:52px;border:1.5px solid var(--linha);border-radius:var(--raio-sm); padding:0 16px;font-size:1rem;font-family:inherit;color:var(--tinta);background:#fff} input.txt:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(31,157,87,.14)} .collapse{display:none} .collapse.show{display:block;animation:slidein .25s ease} .order .btn-zap{margin-top:4px} .order .reassure{text-align:center;font-size:.82rem;color:var(--cinza);margin-top:10px;display:flex; align-items:center;justify-content:center;gap:7px} /* ---------- prova social ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px} .stat{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:16px 10px;text-align:center;box-shadow:var(--sombra-sm)} .stat b{display:block;font-size:1.6rem;font-weight:900;color:var(--verde-d);line-height:1} .stat span{font-size:.78rem;color:var(--cinza);font-weight:700} .reviews{display:grid;gap:14px} .review{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:18px;box-shadow:var(--sombra-sm)} .review .stars{color:#f5b50a;font-size:1rem;letter-spacing:2px;margin-bottom:8px} .review p{font-size:.96rem;margin-bottom:12px} .review .who{display:flex;align-items:center;gap:10px} .review .av{width:38px;height:38px;border-radius:50%;background:var(--verde);color:#fff;font-weight:900;display:grid;place-items:center;font-size:1rem} .review .who b{font-size:.92rem} .review .who span{font-size:.78rem;color:var(--cinza)} /* ---------- lojas ---------- */ .stores{display:grid;gap:14px} .store{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:20px;box-shadow:var(--sombra-sm)} .store .tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--laranja-d);background:#fff1e6;padding:4px 10px;border-radius:999px;margin-bottom:10px} .store h3{font-size:1.12rem;font-weight:900;margin-bottom:8px} .store .line{display:flex;gap:9px;align-items:flex-start;font-size:.94rem;color:var(--cinza);margin-bottom:7px} .store .line svg{flex:none;margin-top:2px} .store .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .store .acts .btn{font-size:.92rem;min-height:48px;padding:10px 12px} /* ---------- CTA faixa ---------- */ .cta-band{background:linear-gradient(135deg,var(--verde) 0%,var(--verde-d) 100%);color:#fff;text-align:center;padding:42px 0} .cta-band h2{font-size:clamp(1.5rem,5.5vw,2rem);font-weight:900;margin-bottom:8px} .cta-band p{opacity:.92;margin-bottom:22px;max-width:40ch;margin-inline:auto} .cta-band .btn{max-width:360px;margin-inline:auto} .cta-band .btn-zap{background:#fff;color:var(--verde-d)} .cta-band .btn-zap:hover{background:#f3f3f3} /* ---------- rodapé ---------- */ footer.ft{background:#13201a;color:#cdd8d1;padding:40px 0 120px} footer.ft img.lg{height:40px;width:auto;margin-bottom:14px} footer.ft .cols{display:grid;gap:26px} footer.ft h4{color:#fff;font-size:.95rem;font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em} footer.ft a:hover{color:#fff} footer.ft .fline{font-size:.92rem;margin-bottom:8px;display:flex;gap:8px} footer.ft .legal{border-top:1px solid #24332b;margin-top:26px;padding-top:18px;font-size:.8rem;color:#8a988f;display:flex;flex-direction:column;gap:6px} footer.ft .legal a{text-decoration:underline} /* ---------- whatsapp flutuante ---------- */ .fab{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px; background:var(--zap);color:#fff;font-weight:800;padding:13px 18px 13px 15px;border-radius:999px; box-shadow:0 10px 30px rgba(37,211,102,.45);min-height:56px} .fab:hover{background:var(--zap-d)} .fab svg{width:26px;height:26px} .fab .lbl{font-size:.95rem} .fab .pulse{position:absolute;inset:0;border-radius:999px;border:2px solid var(--zap);animation:pulse 2.4s ease-out infinite} /* ---------- banner cookies ---------- */ .cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;background:#fff;border:1px solid var(--linha); border-radius:var(--raio);box-shadow:0 12px 40px rgba(20,40,28,.2);padding:16px;display:none} .cookie.show{display:block;animation:slidein .3s ease} .cookie p{font-size:.86rem;color:var(--cinza);margin-bottom:12px} .cookie p a{color:var(--verde-d);text-decoration:underline} .cookie .row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cookie .btn{min-height:46px;font-size:.92rem} /* ---------- animações ---------- */ @keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}} @keyframes flame{0%,100%{transform:scale(1) rotate(-2deg);opacity:.95}50%{transform:scale(1.12) rotate(2deg);opacity:1}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} .flame{transform-origin:center bottom;animation:flame 1.6s ease-in-out infinite} .hero-media img.man{animation:floaty 5s ease-in-out infinite} /* ---------- desktop ---------- */ @media(min-width:760px){ .wrap{padding:0 28px} .top-tel{display:flex} .hero{padding:40px 0 20px} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center} .hero h1{font-size:clamp(2.2rem,3.6vw,3.1rem)} .hero p.lead{font-size:1.16rem} .hero-cta{flex-direction:row;flex-wrap:wrap} .hero-cta .btn{width:auto;min-width:220px;flex:1} .hero-media{margin-top:0;max-width:480px} section.blk{padding:64px 0} .steps{grid-template-columns:repeat(3,1fr)} .feats{grid-template-columns:repeat(3,1fr)} .stores{grid-template-columns:1fr 1fr} .reviews{grid-template-columns:repeat(3,1fr)} .stats{max-width:560px} footer.ft{padding-bottom:48px} footer.ft .cols{grid-template-columns:1.4fr 1fr 1fr} .cookie{left:auto;right:20px;bottom:20px;max-width:420px} .order-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;max-width:var(--maxw)} .order-grid .pitch h2{font-size:2rem} } @media(min-width:760px){ .order-side-img{display:block} } .order-side-img{display:none} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} }