/* 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:15px;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:17.5px} /* 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:14.5px;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:19px;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:16px;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:18px;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:16.5px} .hf-cab span{margin-left:auto;font-size:15px;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:14.5px;color:#9EA3AA} .hf-num b{font-family:"Inter",sans-serif;font-size:19px} .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:17px} .etapas2 p{margin-top:3px;font-size:16px;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:16.5px;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:14.5px;letter-spacing:.05em;color:#707070} .marc2{margin-left:auto;font-family:"Inter",sans-serif;font-weight:800;font-size:13.5px;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:16.5px;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:15px;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:16.5px;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:16px} .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:15px} .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:16px;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 24px!important;background:transparent;border:0;display:flex;flex-direction:column;gap:20px} .cabfoco>div:first-child{display:flex;flex-direction:column-reverse;gap:4px} .cabfoco .lg{font-size:15px;font-weight:800;color:var(--laranja-escuro);letter-spacing:.06em;text-transform:uppercase} .cabfoco h3{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.1} .tipoEnvio{margin:0} .tipoEnvio:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:calc(100% - 452px)} .tipoEnvio .cam,.tipoEnvio .cam.on{padding:14px 16px;min-height:0;border-radius:12px;border:1px solid var(--linha);background:#F9F9F9;box-shadow:none;align-items:flex-start} .tipoEnvio .cam.on{padding:13px 15px;border:2px solid var(--preto);background:#fff} .tipoEnvio .cam .mk2{display:none} .tipoEnvio .cam div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:baseline} .tipoEnvio .cam b{margin:0;font-size:16.5px;font-weight:700;color:var(--texto2)} .tipoEnvio .cam.on b{color:var(--preto);font-weight:800} .tipoEnvio .cam em{margin:0;font-size:15px;font-weight:500;color:var(--fraco);white-space:nowrap} .tipoEnvio .cam.on em{font-weight:600;color:var(--preto)} .tipoEnvio .cam div>span{grid-column:1/-1;font-size:15px;color:var(--fraco);line-height:1.4} .tipoEnvio .cam.on div>span{color:var(--texto2)} .tipoEnvio .cam:disabled{cursor:default} .tipoEnvio .cam:disabled:not(.on){opacity:.55} @media(max-width:1100px){.tipoEnvio:not([hidden]){max-width:none}} .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;font-size:inherit;color:inherit} .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;display:flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:1;margin:0;border-radius:10px;background:var(--laranja);color:var(--preto);font-size:20px;box-shadow:none} .zona b{font-size:16.5px;margin:0} .zona span{max-width:none;margin:0;font-size:15px;color:var(--fraco)} .zona .bt{display:none} .zona:hover,.zona.sobre{border-color:var(--laranja2);box-shadow:none} .zona .zManual{grid-column:1/-1;margin-top:12px;padding-top:12px;border-top:1px solid var(--aviso-linha);color:var(--texto2);line-height:1.5} .zona .zManual[hidden]{display:none} .zona .zManual b{display:inline;font-size:15px} .zona .zOutra{display:none} .zona.compacta{display:flex;justify-content:center;align-items:center;min-height:56px;padding:0 20px;border:1.5px dashed #D0D0D0;background:#fff;cursor:pointer} .zona.compacta>*{display:none} .zona.compacta .zOutra{display:inline;font-size:16px;color:var(--fraco)} .zona.compacta .zOutra b{display:inline;font-size:16px;font-weight:600;color:var(--preto)} .zona.compacta .zOutra b::before{content:"+";margin-right:8px;font-weight:700} .zona.compacta:hover,.zona.compacta.sobre{border-color:var(--laranja2)} #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:16.5px;font-weight:700} .art label{font-size:14.5px} .art input{height:42px;font-size:16.5px;font-weight:600;border-radius:8px} .art .cps{grid-template-columns:repeat(2,minmax(0,160px))} .listaCab{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .listaCab h4{margin:0;font-size:19px;font-weight:700} .listaCab span{font-size:15px;color:var(--fraco)} .rep{margin:0;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--linha);display:flex;flex-direction:column;gap:16px} .repTopo{display:flex;gap:16px;align-items:flex-start} .miniF{flex:none;width:52px;height:96px;border-radius:6px;border:1px solid #D6D6D6;background:#F4F4F2;display:flex;align-items:center;justify-content:center;overflow:hidden} .miniF img{width:100%;height:100%;object-fit:contain;display:block} .miniF span{font-size:13.5px;font-weight:800;color:var(--texto2)} .repInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .rep .l1{margin:0} .rep .l1 b{font-size:16px;font-weight:600;color:var(--preto)} .rep .l1 button{width:32px;height:32px;margin:-6px -6px -6px 0;border-radius:8px;font-size:19px} .rep .l1 button:hover{background:#F1F1F1;color:var(--preto)} .repMed{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .repMed b{font-family:"Inter",sans-serif;font-size:22px;font-weight:700;letter-spacing:-.01em} .repMed span,.repPeso{font-size:15px;color:var(--fraco)} .chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2} .chip::before{font-weight:800} .chip.ok{background:var(--verde-fundo);color:var(--verde)}.chip.ok::before{content:"✓"} .chip.av{background:#FFF1DB;color:#8A4B00}.chip.av::before{content:"!"} .chip.er{background:#FDE8E6;color:#B3261E}.chip.er::before{content:"×"} .chip.fix{background:#E8F0FB;color:#1F4E8C}.chip.fix::before{content:"✓"} .chip.nt{background:#F1F1F1;color:var(--texto2)} .chipSo{align-self:flex-start;padding:5px 10px;border-radius:999px;background:#F1F1F1;color:var(--texto2);font-size:15px;font-weight:600} .avisoF{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:#FDE8E6;font-size:15px;line-height:1.5;color:var(--preto)} .avisoF b{color:#B3261E} .repTxt{margin:2px 0 0;font-size:15.5px;line-height:1.5;color:var(--texto2)} .repTxt b{color:var(--preto)} .confDet{font-size:15px} .confDet summary{display:inline;cursor:pointer;list-style:none;color:var(--laranja-escuro);font-weight:500} .confDet summary::-webkit-details-marker{display:none} .confDet summary:hover{text-decoration:underline} .confDet[open] summary{display:inline-block;margin-bottom:6px} .confDet span{display:block;color:var(--texto2);line-height:1.6} .rep .cps{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin:0;padding-top:16px;border-top:1px solid #EFEFEF} .rep .campo{display:flex;align-items:center;gap:12px} .rep .campo label{margin:0;font-size:16px;font-weight:600;color:var(--preto)} .passo{display:inline-flex;border:1px solid #D6D6D6;border-radius:10px;overflow:hidden} .passo button{width:44px;height:44px;border:0;background:#F9F9F9;font-size:19px;color:var(--preto);cursor:pointer} .passo button:hover{background:#EFEFEF} .rep .passo input{width:56px;height:44px;padding:0;border:0;border-radius:0;text-align:center;font-size:17.5px;font-weight:700;-moz-appearance:textfield;appearance:textfield} .passo input::-webkit-inner-spin-button,.passo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .rep .un{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1px solid #D6D6D6;border-radius:10px} .rep .un input{width:64px;padding:0;border:0;font-size:17.5px;font-weight:700;text-align:right} .rep .un i{font-style:normal;font-size:16px;color:var(--fraco)} .rep .conta{margin-left:auto;font-size:16px;color:var(--texto2)} .rep .conta b{font-family:"Inter",sans-serif;font-size:17.5px;color:var(--preto)} .calc{font-size:15px;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:15px;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:15px} .dica button:hover{background:var(--verde);color:#fff;box-shadow:none} .req{position:static;padding:8px 0 0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px} .reqcab{margin:0;font-size:15px;font-weight:400;color:var(--fraco)} .req details,.req details:first-of-type{border:0} .reqLinks{display:contents} .reqLinks button{padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--laranja-escuro);cursor:pointer} .reqLinks button:hover{text-decoration:underline} .reqLinks button.on{font-weight:700;color:var(--preto);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--laranja)} /* The links above open and close the answers; a closed one is not shown. */ .req details:not([open]){display:none} .req summary{display:inline;padding:0;font-size:15px;font-weight:500;color:var(--laranja-escuro)} .req summary::before{display:none} .req details[open]{order:1;flex-basis:100%;padding:14px 16px 4px;border-radius:12px;background:var(--cinza)} .req details[open] summary{display:block;margin-bottom:6px;font-size:16px;font-weight:700;color:var(--preto);text-decoration:none} .req li{font-size:15px} .req .obs2{font-size:14.5px} /* 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:18px;font-weight:800} .montpe{font-size:14.5px;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:16.5px} #compraVals[hidden]{display:none} .cat.file .zoomB{display:none} .ampliar{margin-left:auto;height:32px;padding:0 12px;border-radius:8px;border:1px solid #D6D6D6;background:#fff;font-size:15px;font-weight:600;color:var(--preto);cursor:pointer} .ampliar:hover{border-color:var(--preto)} .ampliar[hidden]{display:none} .cat.file #vArea{max-height:340px} .cEscada{display:flex;flex-direction:column;gap:8px;margin-bottom:4px} .cEscada>span{font-size:15px;font-weight:600} .cEscada ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px} .cEscada li{padding:8px 2px;border-radius:8px;background:#F4F4F2;border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;gap:2px} .cEscada li span{font-size:13.5px;color:var(--fraco);white-space:nowrap} .cEscada li b{font-size:15px;font-weight:500;color:var(--texto2)} .cEscada li.on{background:var(--verde-fundo);border-color:var(--verde)} .cEscada li.on span,.cEscada li.on b{font-weight:700;color:var(--verde)} .cEscada li.on:last-child{background:#F1F1F1;border-color:var(--preto)} .cEscada li.on:last-child span,.cEscada li.on:last-child b{color:var(--preto)} .cLin>span:first-child{color:var(--texto2)} .cLin small{font-size:14.5px;color:var(--fraco)} .cEco{margin:-6px 0 0;text-align:right;font-size:15px;font-weight:600;color:var(--verde)} .cEco:empty{display:none} #cPartes{display:block} .ampliaDlg{width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:16px;box-shadow:0 20px 60px rgba(3,6,11,.3)} .ampliaDlg::backdrop{background:rgba(3,6,11,.55)} .ampliaCab{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--linha);background:#fff} .ampliaCab b{font-size:17.5px;font-weight:800} .ampliaCab button{width:40px;height:40px;border:0;border-radius:8px;background:#F1F1F1;font-size:20px;cursor:pointer} #ampliaArea .folhaPrevias{display:grid;gap:16px;padding:16px;background:#F8F9FA} #ampliaArea .folhaPrevia{margin:0;background:#fff;border:1px solid var(--linha);border-radius:8px;overflow:hidden} #ampliaArea .folhaPilha{display:flex;flex-direction:column;align-items:center;gap:4px} #ampliaArea .folhaPilha img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 180px)!important} #ampliaArea figcaption{padding:8px 12px;font-size:15px;color:var(--texto2);border-top:1px solid var(--linha)} .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:15px;color:#707070} .cObs{margin:-4px 0 0;font-size:15px;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:15px;line-height:1.45} .compra .ciente{margin:0;padding:12px 14px} .compra .ciente h4{font-size:15.5px} .compra .ciente p,.compra .ciente .lista{font-size:15px} .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:17.5px;cursor:pointer} .cAdd:hover:not(:disabled){background:#FFB53D} .cAdd:disabled{background:#EDEDED;color:#8A8D92;cursor:not-allowed} .cPe{margin:0;font-size:15px;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:16.5px} .cabfoco h3{font-size:28px} .tipoEnvio .cam div{grid-template-columns:1fr} .tipoEnvio .cam div>span{display:none} .rep{padding:16px} .repTopo{gap:12px} .miniF{width:40px;height:80px} .repMed b{font-size:20px} .rep .conta{margin-left:0}} /* 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:15.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 .marca{flex:none;display:flex;align-items:center;cursor:pointer} .item .marca input{width:20px;height:20px;margin:0;accent-color:var(--laranja);cursor:pointer} .miniItem{position:relative;flex:none;width:52px;height:52px;border-radius:8px;border:1px solid var(--linha);background:repeating-conic-gradient(#F1F1F1 0 25%,#fff 0 50%) 0 0/12px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden} .miniItem img{max-width:100%;max-height:100%;object-fit:contain} .miniItem i{font-style:normal;font-size:12px;font-weight:700;color:var(--fraco)} .miniItem em{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:5px;background:rgba(3,6,11,.75);color:#fff;font-style:normal;font-size:11px;font-weight:700} .item.fora .miniItem,.item.fora .nm2,.item.fora .vl2{opacity:.45} .item .x{flex:none;height:36px;padding:0 12px;border-radius:8px;border:1px solid #D6D6D6;background:#fff;color:var(--texto2);font-size:15px;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:16px;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:16px;cursor:pointer} @media(max-width:820px){.desfazer{bottom:100px}} .carrAviso{grid-column:1/-1;font-size:15px;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:18px} .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:auto;min-height:54px;padding:8px 14px;line-height:1.25;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);border:0;font-family:"Inter",sans-serif;font-weight:800;font-size:17.5px} #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:16.5px} #checkoutActions{margin-top:12px} /* Only our own fields: Mercado Pago's card form (its instalment radios) keeps its own styles. */ #checkoutActions .pixBox 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} .ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle} .acts a .ic{width:23px;height:23px} .cartIc{position:relative;display:inline-flex} .acts #cartLink{gap:11px} .cartN{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--laranja);color:var(--preto);font-size:13px;font-weight:800;line-height:17px;text-align:center} .cartN[hidden]{display:none} .zona .ico .ic{width:23px;height:23px} .art2 .giros .gr{display:inline-flex;align-items:center;justify-content:center} .art2 .giros .gr .ic{width:22px;height:22px} .rep .l1 button{display:inline-flex;align-items:center;justify-content:center} .rep .l1 button .ic{width:20px;height:20px} #ampliaFecha .ic{width:23px;height:23px} @media (max-width:600px){.acts .actTx{display:none}.acts{gap:16px}} .cAdd,#bPagar,#pOk,#qOk{display:flex;align-items:center;justify-content:center;gap:8px} #pOk{display:inline-flex} .cAdd .ic,#bPagar .ic{width:22px;height:22px} .item .x{display:inline-flex;align-items:center;gap:6px} .item .x .ic{width:18px;height:18px} .opE b .ic{width:19px;height:19px;margin:-2px 6px 0 0;color:var(--laranja-escuro)} .metodo .ic{width:23px;height:23px;color:var(--texto2)} .codigo .pagBtn{display:inline-flex;align-items:center;gap:7px} .codigo .pagBtn .ic{width:20px;height:20px} .pixBox .prazo{display:flex;align-items:center;gap:8px} .pixBox .prazo .ic{width:23px;height:23px} .confirmado h4{display:flex;align-items:center;gap:8px} .confirmado h4 .ic{width:24px;height:24px} .envioArq .ic{width:19px;height:19px;margin:-2px 6px 0 0} .qi .c .ic{width:15px;height:15px;stroke-width:3} .passos a span .ic{width:17px;height:17px;stroke-width:3} .obr{color:#B42318;font-weight:700} .envioNota{display:block;margin-top:4px;font-size:14px;color:var(--fraco)} .envioArq{font-size:15px;color:var(--texto2);margin-top:14px;line-height:1.5} .envioArq.ok{color:var(--verde)} .envioArq.erro{color:#B42318} .envioDeNovo{margin-left:4px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer} .envioBarra{height:6px;border-radius:999px;background:#EDEDED;overflow:hidden;margin-bottom:6px} .envioBarra i{display:block;height:100%;background:var(--laranja);border-radius:999px;transition:width .4s} .cartEnvio{font-size:15px;font-weight:700;color:var(--laranja-escuro);margin-left:6px} .cartEnvio:empty{display:none} .envioArq: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:16px;color:var(--texto2)} #checkoutActions > h4,#checkoutActions .pixBox > h4{font-size:18px;font-weight:800;margin-bottom:12px} .pagNota{font-size:16px;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:18px;font-weight:800;margin-bottom:10px} .pagResumo .l{display:flex;justify-content:space-between;gap:12px;font-size:16px;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:16.5px;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:16.5px;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:15px} .pixBox .aguarda{font-size:16px;color:var(--texto2)} .pixBox .prazo{font-family:"Inter",sans-serif;font-weight:800;font-size:19px;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:16.5px;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:16.5px;color:var(--texto2)} .info2 table{border-collapse:collapse;background:#fff;border:1px solid var(--linha);border-radius:12px;overflow:hidden;font-size:16.5px} .info2 th{text-align:left;background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-size:15px;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:15px;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:17.5px} .info2-vant b.n{font-size:32px;font-weight:900;color:var(--laranja2)} .info2-vant span{font-size:16px;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:14.5px;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:17.5px;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:15px;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} } /* Skeleton placeholders where the page really waits */ .skel{position:relative;border-radius:8px;background:linear-gradient(90deg,#EEEFF1 25%,#F7F7F8 37%,#EEEFF1 63%);background-size:400% 100%;animation:skel 1.4s ease infinite} @keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}} @media (prefers-reduced-motion:reduce){.skel{animation:none}} .folhaSkel{display:flex;align-items:center;justify-content:center;max-height:520px;min-height:180px;width:100%} .folhaSkel span{font-size:15px;color:var(--fraco);background:#fffc;padding:4px 10px;border-radius:999px} #vArea .folhaPilha{display:flex;flex-direction:column;gap:4px;max-height:520px;overflow:auto;background:#fff} #vArea .folhaPilha img{width:100%;height:auto;display:block} .folhaMais{font-size:14.5px;color:var(--texto2);text-align:center;padding:8px} .skelLinha{height:14px;margin:8px 0} .skelLinha.curta{width:40%} .skelBloco{height:160px;margin-top:8px} /* Artes avulsas: the file card of a finished sheet, plus width, rotation and sizes */ .rep.nova{box-shadow:0 0 0 2px rgba(255,168,26,.45)} .novaT{margin-left:8px;padding:2px 7px;border-radius:999px;background:#FFF1DB;color:#8A4B00;font-size:13.5px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .repMed .pede{font-size:17.5px;color:var(--texto2)} .art2 .giros{display:inline-flex;gap:6px} .art2 .giros .gr{width:44px;height:44px;border:1px solid #D6D6D6;border-radius:10px;background:#fff;font-size:17.5px;cursor:pointer} .art2 .giros .gr.on{border-color:var(--laranja);background:var(--aviso-fundo)} .art2 .atalhos{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin:0} .art2 .atalhos .tm{height:34px;padding:0 12px;border:1px solid #D6D6D6;border-radius:8px;background:#fff;font-size:15px;font-weight:600;cursor:pointer} .art2 .atalhos .tm.on{border-color:var(--verde);background:var(--verde-fundo);color:var(--verde)} .art2 .dica{margin-top:4px} .rep .l1 .novaT{margin-right:auto} /* On a computer the Site is drawn at 80%: the sizes above were chosen looking at it that way, and at 100% everything felt too big. Phones and tablets keep their own sizes. The zoom scales viewport units too, so the page's full height is 125vh there (site-shell.css keeps the footer at the bottom). */ @media (min-width:1100px){html{zoom:.8}body{min-height:125vh}}