690b15ece1
All checks were successful
Build and deploy / Validate source (push) Successful in 5s
Build and deploy / Integration suite on a real stack (push) Successful in 2m21s
Build and deploy / Secret scan and release gate (push) Successful in 7s
Build and deploy / Publish images (push) Successful in 1m47s
A complete CEP now looks up its address on the server (ViaCEP, rate limited, keeping the Site's CSP to its own origin) and fills street, district, city and state, moving the cursor to the first field left, and quotes the freight without pressing Calcular. The CEP keeps its mask when the cart is restored. Freight and its delivery time appear in the order summary instead of a line under the CEP, the delivery option says it ships with Jadlog, and the address reminder is a hint rather than an error. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
313 lines
22 KiB
CSS
313 lines
22 KiB
CSS
/* Site DTF — redesign (2026-09). Loaded after the page's own styles and only
|
|
restyles: every element and class the scripts use keeps its meaning. The
|
|
previous look is in git tag ui-v1. */
|
|
:root{
|
|
--laranja:#FFA81A; --laranja2:#FF7F0A; --laranja-escuro:#C25E00;
|
|
--preto:#03060B; --texto2:#45484D; --fraco:#5C5F64; --linha:#E6E6E6; --cinza:#F9F9F9;
|
|
--verde:#1E7A45; --verde-ml:#1E7A45; --verde-fundo:#E3F5EA; --aviso-fundo:#FFF8EC; --aviso-linha:#F6D9A6;
|
|
--raio:14px; --raio2:10px;
|
|
}
|
|
body{background:#fff}
|
|
.w{max-width:1200px;padding:0 24px}
|
|
h1,h2,h3,h4{font-family:"Inter",sans-serif}
|
|
.et{font-family:"Inter",sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja-escuro)}
|
|
|
|
/* Pages (site-pages.js): the home, a product page and the cart show only their own parts. */
|
|
html[data-rota="inicio"] :is(#passos,#foco,#qual,#prev,#carr,.checkout,#carrVazio),
|
|
html[data-rota="produto"] :is(.hero2,.etapas2,#cards,#carr,.checkout,#carrVazio,#info),
|
|
html[data-rota="carrinho"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,.pagCab,.pagResumo){display:none!important}
|
|
html:is([data-rota="pagamento"],[data-rota="pix"]) :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info,#carr,#carrVazio,#desfazer){display:none!important}
|
|
html[data-sem-itens] #carr{display:none!important}
|
|
html:not([data-rota="inicio"]) #envio{padding-top:0;padding-bottom:64px;min-height:70vh}
|
|
#envio,#foco,#qual,#prev,#checkoutStatus{scroll-margin-top:var(--topo-passos,128px)}
|
|
.carrVazio{max-width:520px;margin:48px auto 0;padding:0 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
|
|
.carrVazio[hidden]{display:none}
|
|
.carrVazio h2{font-size:28px;font-weight:800;letter-spacing:-.02em}
|
|
.carrVazio p{color:var(--fraco);font-size:16px}
|
|
|
|
/* Hero */
|
|
.hero2{background:var(--preto);color:#fff;padding:64px 0}
|
|
.hero2-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
|
|
.hero2-text{display:flex;flex-direction:column;gap:24px}
|
|
.chips{display:flex;gap:10px;flex-wrap:wrap}
|
|
.chip2{font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:6px;border:1px solid #3A3D42;color:#E4E4E4}
|
|
.chip2.destaque{background:var(--laranja);border-color:var(--laranja);color:var(--preto);font-weight:800}
|
|
.hero2 h1{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1.04;font-weight:900;letter-spacing:-.03em}
|
|
.hero2 h1 em{font-style:normal;color:var(--laranja)}
|
|
.hero2-text>p{font-size:18px;line-height:1.55;color:#C9CCD1;max-width:560px}
|
|
.hero2-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
|
|
.hero2-cta span{font-size:14px;color:#9EA3AA}
|
|
.btn-laranja{height:56px;padding:0 28px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:17px;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
|
|
.btn-laranja:hover{background:#FFB53D}
|
|
.hero2-folha{background:#14171B;border:1px solid #262A2F;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px}
|
|
.hf-cab{display:flex;align-items:baseline;gap:10px}
|
|
.hf-cab b{font-family:"Inter",sans-serif;font-size:15px}
|
|
.hf-cab span{margin-left:auto;font-size:13px;color:#9EA3AA}
|
|
.hf-area{position:relative;height:260px;border-radius:10px;background:#0B0D10;border:1px dashed #3A3D42;overflow:hidden}
|
|
.hf-area i{position:absolute;border-radius:6px;opacity:.88}
|
|
.hf-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
|
|
.hf-num span{display:block;font-size:12px;color:#9EA3AA}
|
|
.hf-num b{font-family:"Inter",sans-serif;font-size:18px}
|
|
.hf-num .verde{color:#57D68A}.hf-num .laranja{color:var(--laranja)}
|
|
|
|
/* Steps strip */
|
|
.etapas2{padding:32px 0;border-bottom:1px solid var(--linha)}
|
|
.etapas2 .w{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
|
|
.etapas2 .w>div{display:flex;gap:14px;align-items:flex-start}
|
|
.etapas2 span{width:36px;height:36px;flex-shrink:0;border-radius:999px;background:#FFF1DB;color:var(--laranja-escuro);font-family:"Inter",sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center}
|
|
.etapas2 b{font-family:"Inter",sans-serif;font-size:15.5px}
|
|
.etapas2 p{margin-top:3px;font-size:14px;color:var(--fraco)}
|
|
section+section{border-top:0}
|
|
|
|
/* Product chooser */
|
|
#envio{padding-top:56px}
|
|
.cards-cab{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
|
|
.cards-cab h2{margin-top:8px;font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.02em}
|
|
.cards-cab p{margin-left:auto;max-width:440px;font-size:15px;color:var(--fraco)}
|
|
.escolha{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
|
|
.ec{text-align:left;padding:26px;gap:14px;border:1px solid var(--linha);border-radius:16px;box-shadow:none;cursor:pointer;font:inherit;color:inherit}
|
|
.ec::before,.ec::after{display:none}
|
|
.ec:hover{border-color:var(--laranja);box-shadow:0 10px 30px rgba(3,6,11,.08);transform:translateY(-2px)}
|
|
.ec.f,.ec.f:hover{border-color:var(--linha)}
|
|
.ec.f:hover{border-color:var(--laranja)}
|
|
.ec-top{display:flex;align-items:center;gap:10px}
|
|
.ec-kind{font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.05em;color:#707070}
|
|
.marc2{margin-left:auto;font-family:"Inter",sans-serif;font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--preto);color:var(--laranja)}
|
|
.ec h3{font-size:25px;font-weight:800;letter-spacing:-.01em;color:var(--preto)}
|
|
.ec>p{font-size:15px;line-height:1.5;color:var(--texto2);flex:1}
|
|
.ec-pe{display:flex;align-items:flex-end;gap:12px;padding-top:14px;border-top:1px solid #EFEFEF}
|
|
.ec-preco{display:flex;flex-direction:column;gap:2px}
|
|
.ec-preco span{font-size:13px;color:#707070}
|
|
.ec-preco em{font-style:normal}
|
|
.ec-preco b{font-family:"Inter",sans-serif;font-size:29px;font-weight:900;letter-spacing:-.02em;color:var(--preto)}
|
|
.ec-go{margin-left:auto;height:46px;padding:0 18px;border-radius:var(--raio2);background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:15px;display:flex;align-items:center;white-space:nowrap}
|
|
.ec:hover .ec-go{background:var(--laranja);color:var(--preto)}
|
|
|
|
/* Progress bar */
|
|
.passos{position:sticky;top:var(--topo,64px);z-index:30;display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 22px;padding:14px 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linha);font-family:"Inter",sans-serif;font-size:14px}
|
|
.passos[hidden]{display:none}
|
|
.passos a{display:flex;align-items:center;gap:8px;color:#707070;font-weight:600;text-decoration:none}
|
|
.passos a span{width:26px;height:26px;border-radius:999px;border:2px solid #D0D0D0;display:flex;align-items:center;justify-content:center;font-size:13px}
|
|
.passos a.atual{color:var(--preto);font-weight:800}
|
|
.passos a.atual span{background:var(--laranja);border-color:var(--laranja)}
|
|
.passos a.feito{color:var(--verde)}
|
|
.passos a.feito span{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
|
|
.passos i{width:48px;height:2px;background:#E0E0E0}
|
|
|
|
/* Product page (Montagem): artworks on the left; on the right a buy box that
|
|
stays in view with the live sheet, the grade, the price, the total and the
|
|
add-to-cart button. The old quality and preview panels are not shown: their
|
|
parts live in the buy box, and the rest repeated it (the findings list too:
|
|
each row already says what was checked). */
|
|
#qual,#prev,#rA,.qb2,#qitens{display:none!important}
|
|
.voltar{height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:14px;font-weight:500;color:var(--fraco);margin:24px 0 14px}
|
|
.voltar:hover{color:var(--laranja-escuro)}
|
|
.focoGrid{grid-template-columns:minmax(0,1fr);gap:20px}
|
|
.cat,.cat.file{border:0;background:transparent;box-shadow:none;overflow:visible}
|
|
.cabfoco,.cat.file .cabfoco{padding:0 0 20px!important;background:transparent;border:0;display:grid;
|
|
grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t e" "s e" "p e";column-gap:24px;align-items:end}
|
|
.cabfoco>div:first-child{grid-area:t;display:flex;flex-direction:column-reverse;gap:4px}
|
|
.cabfoco .lg{font-size:12px;color:#707070;letter-spacing:.05em}
|
|
.cabfoco h3{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
|
|
.cabfoco p{grid-area:s;margin-top:6px;font-size:15px;color:var(--texto2)}
|
|
.cabfoco .pr2{grid-area:p;margin-top:4px;font-size:14px;font-weight:600;color:var(--fraco);white-space:normal}
|
|
.tipoEnvio{grid-area:e;margin:0}
|
|
.tipoEnvio:not([hidden]){display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:#EFEFEF}
|
|
.tipoEnvio .cam,.tipoEnvio .cam.on{border:0;box-shadow:none;background:transparent;padding:0 14px;min-height:40px;border-radius:8px;align-items:center}
|
|
.tipoEnvio .cam.on{background:#fff;box-shadow:0 1px 2px rgba(3,6,11,.14)}
|
|
.tipoEnvio .cam .mk2,.tipoEnvio .cam span,.tipoEnvio .cam em{display:none}
|
|
.tipoEnvio .cam b{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap}
|
|
.tipoEnvio .cam.on b{font-weight:800}
|
|
.tipoEnvio .cam:disabled{cursor:default}
|
|
.tipoEnvio .cam:disabled:not(.on){opacity:.5}
|
|
.cat .in{padding:0!important}
|
|
.foco2{grid-template-columns:minmax(0,1fr) 420px;gap:32px}
|
|
.fila{display:flex;flex-direction:column;gap:12px}
|
|
.fila>*{margin:0}
|
|
.cam{border-radius:var(--raio2)}
|
|
.cam.on{border-color:var(--laranja);background:var(--aviso-fundo)}
|
|
#larguraFolhaPronta{display:inline}
|
|
.zona{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;text-align:left;padding:16px 20px;margin:0;border:2px dashed #F2B25A;background:var(--aviso-fundo);border-radius:var(--raio)}
|
|
.zona .ico{grid-row:1/4;width:44px;height:44px;line-height:44px;margin:0;border-radius:10px;background:var(--laranja);color:var(--preto);box-shadow:none}
|
|
.zona b{font-size:15px;margin:0}
|
|
.zona span{max-width:none;margin:0;font-size:13px;color:var(--fraco)}
|
|
.zona .bt{display:none}
|
|
.zona:hover,.zona.sobre{border-color:var(--laranja2);box-shadow:none}
|
|
#lista{display:flex;flex-direction:column;gap:10px}
|
|
#lista:empty{display:none}
|
|
.art{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
|
|
.art.nova{background:#fff;box-shadow:0 0 0 2px rgba(255,168,26,.45)}
|
|
.art .l1 b{font-size:15px;font-weight:700}
|
|
.art label{font-size:12px}
|
|
.art input{height:42px;font-size:15px;font-weight:600;border-radius:8px}
|
|
.art .cps{grid-template-columns:repeat(2,minmax(0,160px))}
|
|
.rep{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
|
|
.calc{font-size:13px;margin-top:8px}
|
|
.dica{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border:0;border-radius:8px;background:var(--verde-fundo);font-size:13px;color:#14532D}
|
|
.dica.av{background:var(--aviso-fundo);color:#5A3A00}
|
|
.dica button{display:inline-flex;width:auto;margin:0 0 0 auto;flex:none;height:34px;align-items:center;padding:0 12px;border-radius:7px;border:1px solid var(--verde);background:#fff;color:var(--verde);box-shadow:none;font-size:13px}
|
|
.dica button:hover{background:var(--verde);color:#fff;box-shadow:none}
|
|
.req{position:static;padding:16px 20px 6px;border-radius:12px;box-shadow:none}
|
|
.reqcab{font-size:15px;margin-bottom:6px}
|
|
|
|
/* The buy box */
|
|
.mont{position:sticky;top:var(--topo-passos,128px);padding:20px;border-radius:16px;background:#fff;box-shadow:none;display:flex;flex-direction:column;gap:12px}
|
|
.mont>*{margin:0}
|
|
.montcab b{font-size:17px;font-weight:800}
|
|
.montpe{font-size:12px;text-align:center}
|
|
.compra{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid #EFEFEF}
|
|
.compra .aoVivo{margin:0}
|
|
.compra .aoVivo.pronto{display:none}
|
|
#compraVals{display:flex;flex-direction:column;gap:10px;font-size:15px}
|
|
#compraVals[hidden]{display:none}
|
|
.cNota{display:flex;align-items:center;gap:12px}
|
|
.cNota span,.cLin>span:first-child{color:var(--texto2)}
|
|
.cNota>i{flex:1;height:6px;border-radius:999px;background:#EFEFEF;overflow:hidden}
|
|
.cNota>i i{display:block;height:100%;border-radius:999px;background:#C9CCD1}
|
|
.cNota>i i.ok{background:var(--verde)}.cNota>i i.av{background:var(--laranja)}.cNota>i i.er{background:var(--vermelho)}
|
|
.cNota b{font-family:"Inter",sans-serif;font-weight:800}
|
|
.cLin{display:flex;align-items:baseline;gap:8px}
|
|
.cLin>span:last-child,.cLin>b{margin-left:auto;display:flex;gap:8px;align-items:baseline}
|
|
.cLin s{font-size:13px;color:#707070}
|
|
.cObs{margin:-4px 0 0;font-size:13px;color:var(--verde)}
|
|
.cObs:empty{display:none}
|
|
.cTot{display:flex;align-items:baseline;padding-top:12px;border-top:1px solid #EFEFEF}
|
|
.cTot span{font-family:"Inter",sans-serif;font-weight:700}
|
|
.cTot b{margin-left:auto;font-family:"Inter",sans-serif;font-size:30px;font-weight:900;letter-spacing:-.01em}
|
|
#qmsg{font-size:13px;line-height:1.45}
|
|
.compra .ciente{margin:0;padding:12px 14px}
|
|
.compra .ciente h4{font-size:13.5px}
|
|
.compra .ciente p,.compra .ciente .lista{font-size:13px}
|
|
.cAdd{height:54px;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;cursor:pointer}
|
|
.cAdd:hover:not(:disabled){background:#FFB53D}
|
|
.cAdd:disabled{background:#EDEDED;color:#8A8D92;cursor:not-allowed}
|
|
.cPe{margin:0;font-size:13px;color:var(--fraco);text-align:center}
|
|
@media(max-width:1100px){.foco2{grid-template-columns:1fr}.mont{position:static}}
|
|
@media(max-width:620px){.montcab b{font-size:15px}
|
|
.cabfoco,.cat.file .cabfoco{grid-template-columns:1fr;grid-template-areas:"t" "s" "p" "e"}
|
|
.tipoEnvio:not([hidden]){display:grid;grid-template-columns:1fr 1fr;margin-top:14px}}
|
|
|
|
/* The quality, preview, cart and checkout panels sit directly in #envio,
|
|
outside .w; they share the page column so nothing runs edge to edge. */
|
|
#envio>.qual,#envio>.prev,#envio>.carr,#envio>.checkout{width:min(1152px,calc(100% - 48px));margin-left:auto;margin-right:auto}
|
|
@media(max-width:820px){#envio>.qual,#envio>.prev,#envio>.carr,#envio>.checkout{width:calc(100% - 32px)}}
|
|
|
|
/* Cart */
|
|
.itensCab{display:flex;align-items:baseline;gap:12px;margin-bottom:11px}
|
|
.itensCab h4{margin:0}
|
|
.esvaziar{margin-left:auto;border:0;background:none;padding:6px 0;font-size:13.5px;font-weight:600;color:var(--fraco);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
|
|
.esvaziar:hover{color:#B8391C}
|
|
.esvaziar[hidden]{display:none}
|
|
.item{align-items:center}
|
|
.item .x{flex:none;height:36px;padding:0 12px;border-radius:8px;border:1px solid #D6D6D6;background:#fff;color:var(--texto2);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
|
|
.item .x:hover{border-color:#B8391C;color:#B8391C}
|
|
.desfazer{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:16px;padding:12px 14px 12px 18px;border-radius:12px;background:var(--preto);color:#fff;font-size:14px;box-shadow:0 10px 30px rgba(3,6,11,.25);max-width:calc(100% - 32px);box-sizing:border-box}
|
|
.desfazer[hidden]{display:none}
|
|
.desfazer button{flex:none;height:36px;padding:0 14px;border-radius:8px;border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:14px;cursor:pointer}
|
|
@media(max-width:820px){.desfazer{bottom:100px}}
|
|
.carrAviso{grid-column:1/-1;font-size:13px;color:var(--fraco)}
|
|
.carrAviso:empty{display:none}
|
|
.carr{border-radius:16px}
|
|
.carr h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
|
|
.cxE{border-radius:var(--raio);border-color:var(--linha)}
|
|
.cxE h4,.resumo h4{font-family:"Inter",sans-serif;font-weight:800;font-size:17px}
|
|
.cp input,.cepL input{height:46px;border-radius:var(--raio2)}
|
|
.cp input:focus,.cepL input:focus{border-color:var(--laranja2);box-shadow:0 0 0 3px rgba(255,168,26,.18)}
|
|
.opE{border-radius:12px}
|
|
.opE.on{border:2px solid var(--laranja);background:var(--aviso-fundo)}
|
|
.resumo{position:sticky;top:var(--topo-passos,128px);border-radius:16px}
|
|
.tot b{font-family:"Inter",sans-serif;font-weight:900}
|
|
#bPagar{height:54px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);border:0;font-family:"Inter",sans-serif;font-weight:800;font-size:16px}
|
|
#bPagar:hover:not(:disabled){background:#FFB53D}
|
|
#bPagar:disabled{background:#EDEDED;color:#8A8D92}
|
|
#bMais{height:46px;border-radius:var(--raio2);font-family:"Inter",sans-serif;font-weight:600}
|
|
.checkout{max-width:760px;margin:20px auto 0}
|
|
.checkout #checkoutStatus:not(:empty){padding:16px 18px;border-radius:var(--raio);background:var(--verde-fundo);border:1px solid #BFE6CE;color:#14532D;font-size:15px}
|
|
#checkoutActions{margin-top:12px}
|
|
#checkoutActions input{height:44px;border-radius:var(--raio2);border:1px solid #D6D6D6;padding:0 12px}
|
|
/* The payment pages: paying on the left, the order summary on the right */
|
|
html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
|
|
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
|
.dicaEnd{font-size:13px;color:var(--texto2);margin-top:12px}
|
|
.dicaEnd:empty{display:none}
|
|
.pagCab{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
|
|
.pagCab h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
|
|
.pagVolta{font-size:14px;color:var(--texto2)}
|
|
.pagEsq h4{font-size:17px;font-weight:800;margin-bottom:12px}
|
|
.pagNota{font-size:14px;color:var(--texto2);margin:4px 0 16px;line-height:1.5}
|
|
.pagResumo{position:sticky;top:var(--topo-passos,128px);border:1px solid var(--linha);border-radius:16px;background:#fff;padding:20px 22px}
|
|
.pagResumo h4{font-size:17px;font-weight:800;margin-bottom:10px}
|
|
.pagResumo .l{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0}
|
|
.pagResumo .l span{color:var(--texto2)}
|
|
.pagResumo .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #EFEFEF;margin-top:10px;padding-top:12px}
|
|
.pagResumo .tot b{font-family:"Inter",sans-serif;font-weight:900;font-size:24px}
|
|
.metodos{display:grid;grid-template-columns:1fr;gap:10px;max-width:420px;margin-bottom:20px}
|
|
.metodo{height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border:2px solid var(--linha);border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;text-align:left;cursor:pointer}
|
|
.metodo::before{content:"";width:18px;height:18px;flex-shrink:0;border-radius:50%;border:2px solid #B5B8BD;box-sizing:border-box}
|
|
.metodo[aria-checked="true"]{border-color:var(--laranja);background:var(--aviso-fundo)}
|
|
.metodo[aria-checked="true"]::before{border:6px solid var(--laranja)}
|
|
.pagBtn{height:48px;padding:0 24px;margin:0 10px 0 0;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:15px;cursor:pointer}
|
|
.pagBtn:hover:not(:disabled){background:#FFB53D}
|
|
.pagBtn:disabled{background:#EDEDED;color:#8A8D92;cursor:default}
|
|
.pagBtn.sec{background:#fff;border:1px solid #D6D6D6}
|
|
.desafio{display:block;width:100%;max-width:520px;height:560px;border:1px solid var(--linha);border-radius:12px;background:#fff}
|
|
.pixBox{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
|
|
.pixBox img{border:1px solid var(--linha);border-radius:12px;padding:8px;background:#fff}
|
|
.pixBox .codigo{display:flex;gap:10px;width:100%}
|
|
.pixBox .codigo input{flex:1;min-width:0;font-size:13px}
|
|
.pixBox .aguarda{font-size:14px;color:var(--texto2)}
|
|
.pixBox .prazo{font-family:"Inter",sans-serif;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
|
|
.confirmado{border:1px solid #BFE6CE;background:var(--verde-fundo);border-radius:16px;padding:24px}
|
|
.confirmado h4{font-size:22px;color:#14532D;margin-bottom:8px}
|
|
.confirmado p{font-size:15px;color:#14532D;margin-bottom:18px;line-height:1.5}
|
|
@media(max-width:820px){
|
|
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{grid-template-columns:1fr;gap:20px}
|
|
.pagResumo{position:static;order:-1}
|
|
.metodos{grid-template-columns:1fr}
|
|
}
|
|
|
|
/* Price and benefits */
|
|
.info2{background:var(--cinza);padding:64px 0}
|
|
.info2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
|
|
.info2-preco{display:flex;flex-direction:column;gap:16px}
|
|
.info2 h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em}
|
|
.info2-preco>p{font-size:15px;color:var(--texto2)}
|
|
.info2 table{border-collapse:collapse;background:#fff;border:1px solid var(--linha);border-radius:12px;overflow:hidden;font-size:15px}
|
|
.info2 th{text-align:left;background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-size:13px;padding:12px 18px}
|
|
.info2 td{padding:11px 18px;border-top:1px solid #EFEFEF}
|
|
.info2 td.melhor{font-weight:700;color:var(--verde)}
|
|
.info2 .nota2{font-size:13px;color:#707070}
|
|
.info2-vant{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
|
|
.info2-vant>div{padding:22px;border-radius:var(--raio);background:#fff;border:1px solid var(--linha);display:flex;flex-direction:column;gap:6px}
|
|
.info2-vant b{font-family:"Inter",sans-serif;font-size:16px}
|
|
.info2-vant b.n{font-size:32px;font-weight:900;color:var(--laranja2)}
|
|
.info2-vant span{font-size:14px;color:var(--fraco)}
|
|
|
|
/* Phone total bar */
|
|
.barraM{display:none}
|
|
@media (max-width:820px){
|
|
.barraM:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linha);box-shadow:0 -6px 20px rgba(3,6,11,.08)}
|
|
.barraM div{display:flex;flex-direction:column}
|
|
.barraM span{font-size:12px;color:#707070}
|
|
.barraM b{font-family:"Inter",sans-serif;font-size:21px;font-weight:900}
|
|
.barraM a{margin-left:auto;height:50px;padding:0 22px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;display:flex;align-items:center;text-decoration:none}
|
|
.w{padding:0 16px}
|
|
.hero2{padding:40px 0}
|
|
.hero2-grid,.info2-grid{grid-template-columns:1fr;gap:28px}
|
|
.etapas2 .w{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
.escolha{grid-template-columns:1fr}
|
|
.cards-cab p{margin-left:0}
|
|
.ec-pe{flex-wrap:wrap}
|
|
.ec-go{margin-left:0;width:100%;justify-content:center}
|
|
.focoGrid{grid-template-columns:1fr}
|
|
.mont,.resumo{position:static}
|
|
.passos{gap:8px;font-size:12.5px;margin:0 0 16px;padding:10px 16px}
|
|
.passos i{width:14px}
|
|
.passos a{flex-direction:column;gap:4px;text-align:center}
|
|
.info2-vant{grid-template-columns:1fr}
|
|
footer{padding-bottom:84px}
|
|
}
|
|
@media (max-width:480px){
|
|
.etapas2 .w{grid-template-columns:1fr}
|
|
}
|