/* tokens.css e as fontes agora entram por no de cada página. O @import daqui criava uma fila de downloads e segurava a primeira pintura. */ /* ---------------------------------------------------------- base */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{background:var(--void);color:var(--bone);font-family:var(--f-texto);line-height:1.55;overflow-x:hidden;min-height:100vh;min-height:100svh} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit} :focus-visible{outline:2px solid var(--cy);outline-offset:3px} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} .osd{font-family:var(--f-osd);font-size:17px;letter-spacing:.06em;color:var(--cy);text-transform:uppercase;line-height:1} .dim{color:var(--dim)} .soft{color:var(--soft)} h1,h2,h3{font-variation-settings:var(--w-display);text-transform:uppercase;letter-spacing:-.02em;line-height:.88} h1{font-size:clamp(38px,8vw,88px)} h2{font-size:clamp(26px,5.2vw,52px)} h3{font-variation-settings:var(--w-titulo);font-size:19px;line-height:1.08} .sec{padding:var(--sec) 0} .sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:24px} /* varredura + chuvisco (a assinatura da marca) */ body::before{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.55; background:repeating-linear-gradient(180deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px)} body::after{content:"";position:fixed;inset:-60%;z-index:98;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); will-change:transform} @media(hover:hover) and (min-width:900px){body::after{animation:grain 700ms steps(4) infinite}} @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,1%)}} /* ---------------------------------------------------------- glitch */ .gl{position:relative;display:inline-block} .gl::before,.gl::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;pointer-events:none;overflow:hidden;clip-path:inset(100% 0 0 0)} .gl::before{color:var(--cy);transform:translate3d(-2px,0,0);animation:g1 6.5s infinite steps(1)} .gl::after{color:var(--mg);transform:translate3d(2px,0,0);animation:g2 6.5s infinite steps(1)} @keyframes g1{0%,71%,100%{clip-path:inset(100% 0 0 0)}72%{clip-path:inset(12% 0 62% 0);transform:translate3d(-5px,0,0)}74%{clip-path:inset(58% 0 24% 0);transform:translate3d(4px,0,0)}76%{clip-path:inset(32% 0 48% 0);transform:translate3d(-3px,0,0)}78%{clip-path:inset(100% 0 0 0)}92%{clip-path:inset(74% 0 8% 0);transform:translate3d(3px,0,0)}94%{clip-path:inset(100% 0 0 0)}} @keyframes g2{0%,71%,100%{clip-path:inset(100% 0 0 0)}73%{clip-path:inset(46% 0 34% 0);transform:translate3d(5px,0,0)}75%{clip-path:inset(18% 0 66% 0);transform:translate3d(-4px,0,0)}77%{clip-path:inset(66% 0 16% 0);transform:translate3d(3px,0,0)}79%{clip-path:inset(100% 0 0 0)}93%{clip-path:inset(6% 0 78% 0);transform:translate3d(-3px,0,0)}95%{clip-path:inset(100% 0 0 0)}} .gl-h::before,.gl-h::after{animation:none} .gl-h:hover::before{animation:g1 .5s steps(1) 2} .gl-h:hover::after{animation:g2 .5s steps(1) 2} /* .gl-h só disparava no hover — ou seja, NUNCA no celular, que é onde a maioria vai ver o site. A classe .vendo é posta pelo JS quando o título entra na tela: o glitch acontece uma vez, como quem sintoniza o canal. Uma vez e para. Loop infinito em 4 títulos vira ruído e come bateria. */ .gl-h.vendo::before{animation-name:g1;animation-duration:.55s;animation-timing-function:steps(1); animation-iteration-count:2;animation-delay:var(--atraso,0s)} .gl-h.vendo::after{animation-name:g2;animation-duration:.55s;animation-timing-function:steps(1); animation-iteration-count:2;animation-delay:var(--atraso,0s)} /* SINTONIZE e MODO estouravam no mesmo instante, o que entrega que é um loop. Delay negativo desencontra as duas sem atrasar nada. */ .hero h1 .gl:last-of-type::before,.hero h1 .gl:last-of-type::after{animation-delay:-2.1s} /* Palavras semanticamente destacadas. O JS envolve apenas palavras com letras; valores, preços e códigos continuam estáveis e totalmente legíveis. */ .gl-palavra{position:relative;display:inline-block;isolation:isolate} .gl-palavra::before,.gl-palavra::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none; overflow:hidden;clip-path:inset(100% 0 0 0);opacity:.9} .gl-palavra::before{color:var(--cy);transform:translate3d(-1px,0,0)} .gl-palavra::after{color:var(--mg);transform:translate3d(1px,0,0)} @media(prefers-reduced-motion:no-preference){ .gl-palavra.gl-visivel::before{animation:g1 7.8s infinite steps(1);animation-delay:var(--gl-delay,0s)} .gl-palavra.gl-visivel::after{animation:g2 7.8s infinite steps(1);animation-delay:calc(var(--gl-delay,0s) - .13s)} .gl-palavra:hover::before{animation:g1 .45s steps(1) 2} .gl-palavra:hover::after{animation:g2 .45s steps(1) 2} } /* ---------------------------------------------------------- crawl + topo */ .crawl{background:var(--bone);color:var(--void);overflow:hidden} .crawl-track{display:flex;width:max-content;animation:slide 30s linear infinite} .crawl-track span{font-family:var(--f-osd);font-size:18px;text-transform:uppercase;padding:5px 24px;white-space:nowrap} .crawl-track b{color:#B8006A} @keyframes slide{to{transform:translateX(-50%)}} .top{position:sticky;top:0;z-index:60;background:rgba(8,8,10,.93);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)} .top-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0} .brand{display:flex;align-items:center;gap:10px} .brand img{width:38px;height:38px;flex:none;transition:filter .18s ease,opacity .18s ease,transform .18s ease} .wm{font-variation-settings:"wdth" 118,"wght" 900;text-transform:uppercase;font-size:clamp(19px,3.4vw,25px);letter-spacing:-.02em;line-height:1} .nav{display:none;gap:20px} @media(min-width:920px){.nav{display:flex}} .nav a{font-family:var(--f-osd);font-size:19px;color:var(--dim)} .nav a:hover,.nav a[aria-current="page"]{color:var(--cy)} .cart-link{font-family:var(--f-osd);font-size:18px;border:1px solid var(--cy);color:var(--cy);padding:5px 13px;white-space:nowrap} .cart-link:hover{background:var(--cy);color:var(--void)} /* ---------------------------------------------------------- botões */ .btn{display:inline-block;text-align:center;cursor:pointer;text-transform:uppercase;letter-spacing:.05em; font-variation-settings:"wdth" 108,"wght" 800;font-size:13px;padding:13px 22px;border:1px solid var(--bone); background:var(--bone);color:var(--void);transition:background .12s,color .12s,border-color .12s} .btn:hover{background:var(--cy);border-color:var(--cy)} .btn-mg{background:var(--mg);border-color:var(--mg);color:#0A0A0C} .btn-mg:hover{background:transparent;color:var(--mg)} .btn-ghost{background:transparent;color:var(--bone);border-color:var(--line)} .btn-ghost:hover{background:transparent;border-color:var(--cy);color:var(--cy)} .btn[disabled],.btn[aria-disabled="true"]{background:transparent;color:var(--dim);border-color:var(--line);pointer-events:none} .btn-full{display:block;width:100%} /* ---------------------------------------------------------- chips / tamanhos */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{font-family:var(--f-osd);font-size:18px;text-transform:uppercase;cursor:pointer;background:transparent; border:1px solid var(--line);color:var(--dim);padding:5px 13px} .chip:hover{border-color:var(--cy);color:var(--cy)} .chip[aria-pressed="true"]{background:var(--cy);border-color:var(--cy);color:var(--void)} .tams{display:flex;flex-wrap:wrap;gap:6px} .tam{font-family:var(--f-osd);font-size:17px;min-width:38px;padding:5px;text-align:center;cursor:pointer; background:transparent;border:1px solid var(--line);color:var(--bone)} .tam:hover{border-color:var(--cy);color:var(--cy)} .tam[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--void)} .tam[disabled]{opacity:.28;cursor:not-allowed;text-decoration:line-through} @keyframes foto-pb-rapido{ 0%,87.49%{filter:grayscale(0) contrast(1) brightness(1)} 87.5%,99.99%{filter:grayscale(1) contrast(1.35) brightness(.95)} 100%{filter:grayscale(0) contrast(1) brightness(1)} } @media(prefers-reduced-motion:reduce){ .tela img,.miniaturas img,.linha .thumb img{animation:none;filter:grayscale(0) contrast(1) brightness(1)} } /* ---------------------------------------------------------- telas / cards */ .tela{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0D0D11;border-bottom:1px solid var(--line)} .tela img{width:100%;height:100%;object-fit:cover;filter:grayscale(0) contrast(1) brightness(1);animation:foto-pb-rapido 8s linear infinite;transition:transform .2s} .tela::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px), radial-gradient(115% 115% at 50% 50%,transparent 55%,rgba(0,0,0,.6) 100%)} .tela .vazio{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-family:var(--f-osd); font-size:18px;color:#4A4A52;text-transform:uppercase; background:repeating-linear-gradient(-45deg,#0E0E12 0 10px,#121217 10px 20px)} .ch{position:absolute;top:8px;left:9px;z-index:2;font-family:var(--f-osd);font-size:17px;color:var(--cy);text-shadow:0 0 8px rgba(33,231,240,.5)} .selo{position:absolute;top:8px;right:9px;z-index:2;font-family:var(--f-osd);font-size:16px;background:var(--mg);color:#0A0A0C;padding:1px 7px} .grid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)} @media(min-width:780px){.grid{grid-template-columns:repeat(3,1fr);gap:24px}} @media(min-width:1080px){.grid{grid-template-columns:repeat(4,1fr)}} .item{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .15s} .item:hover{border-color:var(--cy)} .item:hover .tela img{transform:scale(1.02)} .item-body{padding:13px;display:flex;flex-direction:column;flex:1;gap:4px} .item-body h3{min-height:2.16em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .meta{font-family:var(--f-osd);font-size:16px;color:var(--dim);text-transform:uppercase} .preco{font-variation-settings:"wdth" 100,"wght" 800;font-size:18px;margin-top:5px} .preco s{font-weight:400;font-size:12.5px;color:var(--dim);margin-left:7px} .parc{font-family:var(--f-osd);font-size:15px;color:var(--dim)} .item .btn{margin-top:auto} /* ---------------------------------------------------------- hero */ .hero{padding:clamp(26px,5vw,54px) 0} .hero-grid{display:grid;gap:26px} @media(min-width:960px){.hero-grid{grid-template-columns:.85fr 1.15fr;align-items:center;gap:46px}} .tv{position:relative;background:radial-gradient(120% 120% at 50% 40%,#17171D 0%,#0B0B0F 70%);border:1px solid var(--line);padding:26px;overflow:hidden} .tv::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)} .tv img{width:100%;max-width:320px;height:auto;aspect-ratio:1/1;margin:0 auto;filter:drop-shadow(0 0 22px rgba(33,231,240,.22))} .tv-osd{display:flex;justify-content:space-between;margin-bottom:16px} .rec{color:var(--mg);animation:blink 1.6s steps(1) infinite} @keyframes blink{50%{opacity:.15}} .lede{margin-top:18px;max-width:46ch;color:var(--soft);font-size:clamp(14.5px,1.6vw,17px)} /* ---------------------------------------------------------- painel de vantagens */ .painel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel-2)} .painel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)} @media(min-width:880px){.painel-grid{grid-template-columns:repeat(4,1fr)}} .painel-item{background:var(--panel-2);padding:22px 18px} .painel-item h4{font-variation-settings:var(--w-titulo);text-transform:uppercase;font-size:17px;color:var(--cy);line-height:1} .painel-item p{font-size:13px;color:#A5A29B;margin-top:7px} /* ---------------------------------------------------------- página de produto */ .prod{display:grid;gap:28px} @media(min-width:900px){.prod{grid-template-columns:1.1fr .9fr;gap:46px;align-items:start}} .galeria{display:grid;gap:10px} .galeria .principal{border:1px solid var(--line)} .miniaturas{display:flex;gap:8px;flex-wrap:wrap} .miniaturas button{width:64px;aspect-ratio:4/5;border:1px solid var(--line);background:#0D0D11;cursor:pointer;padding:0;overflow:hidden} .miniaturas button[aria-pressed="true"]{border-color:var(--cy)} .miniaturas img{width:100%;height:100%;object-fit:cover;filter:grayscale(0) contrast(1) brightness(1);animation:foto-pb-rapido 8s linear infinite} .campo{display:flex;flex-direction:column;gap:6px;margin-top:16px} .campo label{font-family:var(--f-osd);font-size:17px;color:var(--dim);text-transform:uppercase} .qtd{display:flex;align-items:center;gap:0;width:max-content;border:1px solid var(--line)} .qtd button{width:38px;height:38px;background:transparent;border:0;color:var(--bone);cursor:pointer;font-size:18px} .qtd button:hover{color:var(--cy)} .qtd span{min-width:44px;text-align:center;font-family:var(--f-osd);font-size:19px} /* ---------------------------------------------------------- formulários */ input,select{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--bone); font-family:var(--f-texto);font-size:15px;padding:11px 12px} input:focus,select:focus{border-color:var(--cy);outline:none} input::placeholder{color:#5A5852} .form-grid{display:grid;gap:12px} @media(min-width:640px){.form-grid.duas{grid-template-columns:1fr 1fr}} .erro{color:var(--mg);font-family:var(--f-osd);font-size:17px;margin-top:10px;min-height:20px} /* ---------------------------------------------------------- carrinho */ .carrinho{display:grid;gap:26px} @media(min-width:960px){.carrinho{grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}} .linha{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center} .linha .thumb{aspect-ratio:4/5;background:#0D0D11;border:1px solid var(--line);overflow:hidden} .linha .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(0) contrast(1) brightness(1);animation:foto-pb-rapido 8s linear infinite} .linha .remover{background:none;border:0;color:var(--dim);font-family:var(--f-osd);font-size:16px;cursor:pointer;text-transform:uppercase} .linha .remover:hover{color:var(--mg)} .resumo{background:var(--panel);border:1px solid var(--line);padding:20px} .resumo .l{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px;color:var(--soft)} .resumo .l.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;color:var(--bone); font-variation-settings:"wdth" 106,"wght" 800;font-size:19px;text-transform:uppercase} .opcao-frete{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line); padding:10px 12px;cursor:pointer;margin-bottom:8px} .opcao-frete[aria-pressed="true"]{border-color:var(--cy)} .opcao-frete b{font-family:var(--f-osd);font-size:18px} /* ---------------------------------------------------------- tabelas */ table.tab{width:100%;border-collapse:collapse;font-family:var(--f-osd);font-size:18px;border:1px solid var(--line)} table.tab th,table.tab td{padding:8px 11px;text-align:right;border-bottom:1px solid var(--line)} table.tab th:first-child,table.tab td:first-child{text-align:left} table.tab thead th{background:var(--panel);color:var(--cy);text-transform:uppercase} table.tab tbody tr:last-child td{border-bottom:0} table.tab tbody tr:hover{background:var(--panel)} /* ---------------------------------------------------------- estados */ .aviso{border:1px solid var(--line);background:var(--panel);padding:26px;text-align:center} .aviso .osd{margin-bottom:8px} .carregando{font-family:var(--f-osd);font-size:19px;color:var(--dim);text-transform:uppercase;padding:40px 0;text-align:center} .conta-transmitida{position:relative;overflow:hidden;border:1px solid var(--cy);background:var(--panel); padding:22px;margin-bottom:18px;box-shadow:inset 4px 0 0 var(--mg)} .conta-transmitida::after{content:"";position:absolute;right:-55px;top:-75px;width:180px;height:180px; border:1px solid rgba(33,231,240,.22);transform:rotate(18deg);pointer-events:none} .conta-transmitida h3{margin:8px 0 9px;font-size:clamp(22px,4vw,32px)} .conta-transmitida p{max-width:65ch;color:var(--soft)} .conta-transmitida .email-status{margin-top:8px;font-size:13px;color:var(--dim);word-break:break-word} .conta-transmitida.email-falhou{border-color:var(--mg)} /* ---------------------------------------------------------- rodapé */ footer{background:var(--panel);border-top:1px solid var(--line);padding:42px 0 30px;margin-top:auto} .foot{display:grid;gap:24px} @media(min-width:820px){.foot{grid-template-columns:1.5fr 1fr 1fr}} .foot .brand img{width:50px;height:50px} footer h5{font-family:var(--f-osd);font-size:18px;text-transform:uppercase;color:var(--cy);margin-bottom:8px} footer p,footer a{color:var(--dim);font-size:13.5px;line-height:1.8;display:block} footer a:hover{color:var(--bone)} .legal{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--f-osd);font-size:15px;color:#5E5C58;text-transform:uppercase} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .gl::before,.gl::after{display:none} body::after{display:none} } /* ============================================================================= AJUSTES DE CELULAR · agosto/2026 Tudo abaixo existe por um motivo medido no PageSpeed ou por um problema real de uso no telefone. Cada bloco diz qual. ============================================================================= */ /* ---------------------------------------------------------- menu do celular Antes: .nav sumia abaixo de 920px e NÃO existia substituto. No celular dava para chegar em Peças, Medidas e Dúvidas pelo cabeçalho — só o carrinho aparecia. Agora tem botão MENU. O painel é absolute: abre por cima, não empurra a página (zero layout shift). */ .top-acoes{display:flex;align-items:center;gap:9px} .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--toque); min-height:38px;padding:0 12px;gap:7px;cursor:pointer;background:transparent;border:1px solid var(--line); color:var(--dim);font-family:var(--f-osd);font-size:18px;text-transform:uppercase;line-height:1} .menu-btn:hover,.menu-btn[aria-expanded="true"]{border-color:var(--cy);color:var(--cy)} .menu-btn i{display:block;width:15px;height:12px;position:relative; border-top:2px solid currentColor;border-bottom:2px solid currentColor} .menu-btn i::after{content:"";position:absolute;top:5px;left:0;width:100%;border-top:2px solid currentColor} .menu-mob{position:absolute;left:0;right:0;top:100%;z-index:59;background:var(--void); border-bottom:1px solid var(--cy);box-shadow:0 18px 40px rgba(0,0,0,.6);padding:6px var(--gut) 14px} .menu-mob[hidden]{display:none} .menu-mob::before{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)} .menu-mob a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line); font-family:var(--f-osd);font-size:23px;text-transform:uppercase;color:var(--bone)} /* era um "CH" antes de cada item; com um canal único no site inteiro o prefixo virava contradição. Ficou o LED de canal ligado. */ .menu-mob a::before{content:"";width:7px;height:7px;background:var(--cy);flex:none;margin-right:12px; box-shadow:0 0 7px rgba(33,231,240,.7)} .menu-mob a:last-child{border-bottom:0} .menu-mob a:active,.menu-mob a[aria-current="page"]{color:var(--cy)} @media(min-width:920px){.menu-btn{display:none}.menu-mob{display:none!important}} /* ---------------------------------------------------------- alvos de toque Dedo não é cursor. Abaixo de ~44px o erro de toque dispara. */ .cart-link{display:inline-flex;align-items:center;min-height:38px;min-width:118px;justify-content:center} @media(pointer:coarse){ .chip,.tam{min-height:var(--toque);display:inline-flex;align-items:center;justify-content:center;padding:0 15px} .tam{min-width:var(--toque)} .qtd button{width:var(--toque);height:var(--toque);font-size:21px} .qtd span{min-width:52px} .remover{min-height:var(--toque);padding:0 4px} .opcao-frete{min-height:56px} .menu-mob a,.nav a{-webkit-tap-highlight-color:rgba(33,231,240,.18)} footer a{min-height:38px;display:flex;align-items:center} } /* ---------------------------------------------------------- formulários Abaixo de 16px o Safari do iPhone dá zoom sozinho ao focar o campo e o usuário fica com a página torta. 16px resolve sem mudar o visual. */ input,select,textarea{font-size:16px} @media(min-width:640px){input,select,textarea{font-size:15px}} /* ---------------------------------------------------------- esqueleto O grid de peças chega por fetch. Antes entrava um "sintonizando..." de uma linha e depois 4 cards inteiros: a página descia de uma vez. O esqueleto usa a MESMA marcação e as MESMAS classes do card real — a altura é idêntica por construção, não por chute. */ .esq{pointer-events:none;user-select:none} .esq h3,.esq .meta,.esq .preco,.esq .parc,.esq .btn{color:transparent;background:#1A1A20;border-radius:2px} .esq .btn{background:#15151A;border-color:#1A1A20} .esq .meta{width:72%} .esq .parc{width:52%} .esq .tela::before{content:"sem sinal";position:absolute;inset:0;z-index:1;display:grid;place-content:center; font-family:var(--f-osd);font-size:17px;color:#33333C;text-transform:uppercase; background:repeating-linear-gradient(-45deg,#0E0E12 0 10px,#121217 10px 20px)} @media(prefers-reduced-motion:no-preference){ .esq h3,.esq .meta,.esq .preco,.esq .parc,.esq .btn{animation:pulsa 1.5s ease-in-out infinite} } @keyframes pulsa{50%{opacity:.5}} /* ---------------------------------------------------------- perguntas As dúvidas saíram do JS e foram para o HTML: aparecem antes do script, não empurram o rodapé e o Google consegue ler. */ .faq-item{border-bottom:1px solid var(--line);padding:15px 0} .faq-item>summary{cursor:pointer;list-style:none;font-variation-settings:var(--w-titulo); text-transform:uppercase;font-size:18px;line-height:1.2;min-height:26px; display:flex;align-items:center;justify-content:space-between;gap:14px} .faq-item>summary::-webkit-details-marker{display:none} .faq-item>summary::after{content:"+";font-family:var(--f-osd);font-size:24px;color:var(--cy);flex:none;line-height:1} .faq-item[open]>summary::after{content:"−"} .faq-item>p{margin-top:9px;max-width:66ch} @media(pointer:coarse){.faq-item>summary{min-height:var(--toque)}} /* ---------------------------------------------------------- reserva de altura Páginas que montam o conteúdo por JS (peça, carrinho, obrigado): o miolo já nasce alto o bastante para o rodapé começar fora da tela. Conteúdo que aparece fora da janela não conta como layout shift. */ .reserva{min-height:74vh;min-height:74svh} /* ---------------------------------------------------------- tabela no celular 5 colunas em tela de 360px estouravam a largura e travavam o scroll lateral da página inteira. Agora só a tabela rola. */ .rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .rolagem>table.tab{min-width:340px} /* ---------------------------------------------------------- respiro geral */ @media(max-width:520px){ /* em card de 2 colunas num celular de 360px o selo ESGOTADO encostava no selo do canal. Vale também quando o catálogo passar de 99 e o canal virar 3 dígitos. */ .ch{font-size:15px;top:6px;left:7px} .selo{font-size:14px;top:6px;right:7px;padding:1px 6px} .sec-head{align-items:flex-start} .top-in{gap:8px} .wm{font-size:19px} .grid{gap:12px} .item-body{padding:11px} .btn{padding:14px 18px} .hero .tv{padding:18px} } /* ============================================================================= FICHA TÉCNICA / MEDIDAS · painel HUD Reconstruído em HTML a partir da arte da ficha. Os números ficam em texto de verdade: legíveis em qualquer tela, indexáveis pelo Google e editáveis sem voltar no editor de imagem. Só a foto continua sendo foto. ============================================================================= */ .hud{position:relative;background:var(--panel);border:1px solid var(--line);padding:14px} .hud i.cantos{position:absolute;inset:0;pointer-events:none} .hud::before,.hud::after,.hud i.cantos::before,.hud i.cantos::after{ content:"";position:absolute;width:20px;height:20px;border:2px solid var(--cy);pointer-events:none} .hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0} .hud::after{bottom:-1px;right:-1px;border-left:0;border-top:0} .hud i.cantos::before{top:-1px;right:-1px;border-left:0;border-bottom:0} .hud i.cantos::after{bottom:-1px;left:-1px;border-right:0;border-top:0} .hud-bar{display:flex;justify-content:space-between;align-items:center;gap:12px; padding-bottom:12px;border-bottom:1px solid var(--line)} .hud-grid{display:grid;gap:18px;padding-top:16px} @media(min-width:820px){.hud-grid{grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}} .hud-foto{position:relative;background:#0B0B0F;border:1px solid var(--line);overflow:hidden} .hud-foto img{width:100%;height:auto;display:block} .hud-foto::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)} /* tabela da ficha: linhas = medida, colunas = tamanho (mesma leitura da arte) */ .tab-hud{width:100%;border-collapse:collapse;font-family:var(--f-osd)} .tab-hud th,.tab-hud td{padding:12px 6px;text-align:center;border-bottom:1px dashed var(--line)} .tab-hud thead th{font-size:23px;color:var(--cy);line-height:1} .tab-hud thead th:first-child{border-bottom-color:transparent} .tab-hud tbody th{text-align:left;padding-left:2px;font-weight:400;font-size:19px;color:var(--cy); border-right:2px solid var(--mg);white-space:nowrap} .tab-hud tbody td{font-family:var(--f-texto);font-size:15px;color:var(--bone); font-variation-settings:"wdth" 100,"wght" 600} .tab-hud tbody tr:last-child th,.tab-hud tbody tr:last-child td{border-bottom:0} .tab-hud caption{caption-side:bottom;padding-top:12px;text-align:left;font-family:var(--f-osd); font-size:16px;color:var(--dim);text-transform:uppercase;line-height:1.3} @media(max-width:400px){ .tab-hud thead th{font-size:20px} .tab-hud tbody th{font-size:17px} .tab-hud tbody td{font-size:14px} .tab-hud th,.tab-hud td{padding:11px 3px} } /* passo a passo abaixo do painel */ .medir{display:grid;gap:14px;margin-top:22px} @media(min-width:760px){.medir{grid-template-columns:repeat(2,1fr);gap:14px 34px}} .medir li{list-style:none;display:flex;gap:12px;align-items:flex-start; border-top:1px solid var(--line);padding-top:12px} .medir li b.n{font-family:var(--f-osd);font-size:20px;color:var(--cy);line-height:1.1;flex:none;min-width:26px} .medir li p{font-size:14px;color:var(--soft);line-height:1.5} .medir li p strong{color:var(--bone);font-variation-settings:var(--w-titulo);text-transform:uppercase; font-size:13.5px;letter-spacing:.02em} /* ---------------------------------------------------------- troca de foto Duas fotos empilhadas no mesmo box 4:5. A segunda entra por opacidade — nada muda de tamanho, então não existe layout shift. Quem tem mouse: passa o mouse, vê a peça vestida. Quem não tem: o JS reveza sozinho (classe .foto-2) enquanto o card está na tela. Fora da tela ninguém reveza nada, para não gastar bateria à toa. */ .tela .f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .tela .f-2{opacity:0;transition:opacity .45s ease} .tela.tem-2 .f-1{transition:opacity .45s ease} .item .tela.foto-2 .f-2{opacity:1} @media(hover:hover) and (pointer:fine){ .item:hover .tela.tem-2 .f-2{opacity:1} } @media(prefers-reduced-motion:reduce){ .tela .f-2,.tela.tem-2 .f-1{transition:none} } /* a moldura do card já é o link inteiro; o cursor precisa dizer isso */ .tela.tem-2{cursor:pointer} /* ---------------------------------------------------------- glitch no topo O logo do cabeçalho ficava de fora de propósito: ele está sempre visível e piscaria junto com o resto no carregamento. Resolvido com tempo próprio — ciclo mais longo que o do H1 e atraso negativo, então nunca estoura junto com SINTONIZE/MODO nem no primeiro segundo da página. */ @media(prefers-reduced-motion:no-preference){ .gl-topo::before{animation:g1 11s infinite steps(1) -3.5s} .gl-topo::after {animation:g2 11s infinite steps(1) -3.5s} } /* marca do rodapé: mesma linguagem do resto, mas só uma vez, quando aparece */ footer .wm.gl{font-size:inherit} /* ========================================================================== LEITURA — número pequeno é dado, não decoração (agosto/2026) Duas causas somadas, não uma: 1. A VARREDURA é uma faixa preta de 1px a cada 3px, fixa, por cima de TUDO (body::before, z-index 99). Em letra grande ela escurece. Em haste fina ela não escurece: apaga um pedaço da haste. 2. VT323 É FONTE DE PIXEL. Foi desenhada para um grid fixo. A 15–18px a haste não chega a 1px de tela e o antialias já devolve cinza. O x-height dela é minúsculo — por isso o site usa 17px onde o Archivo usaria 14. Ou seja: não é texto grande, é texto pequeno com número grande no CSS. Regra adotada: NÚMERO É ARCHIVO, PALAVRA CONTINUA VT323. A identidade vive em CALCULAR FRETE, SUBTOTAL, CORREIOS PAC — não em R$ 36,90. E o painel onde o cliente confere dinheiro sobe acima da varredura: fica limpo, enquanto o resto da página segue com o tubo ligado. Ninguém erra um valor por causa de estética. ========================================================================== */ /* utilitário: qualquer leitura numérica nova usa isto */ .dado{font-family:var(--f-texto);font-variation-settings:"wdth" 104,"wght" 700; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; letter-spacing:0;text-shadow:none} /* o painel de valores sai de baixo da varredura */ .resumo{position:relative;z-index:100} /* ---- opções de frete ---- */ .opcao-frete>span{font-variation-settings:"wdth" 104,"wght" 700;font-size:13.5px; text-transform:uppercase;letter-spacing:.04em;line-height:1.35} .opcao-frete b{font-family:var(--f-texto);font-variation-settings:"wdth" 104,"wght" 800; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; font-size:16px;letter-spacing:0;color:var(--bone);white-space:nowrap} .opcao-frete[aria-pressed="true"] b{color:var(--cy)} .opcao-frete .parc{display:inline-block;margin-top:2px} /* ---- linhas do resumo: subtotal, frete, total ---- */ .resumo .l{font-size:14px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .resumo .l>span:first-child{font-variation-settings:"wdth" 102,"wght" 500; text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;color:var(--dim)} .resumo .l>span:last-child{font-variation-settings:"wdth" 102,"wght" 700;color:var(--bone)} .resumo .l.total>span:first-child{font-size:14px;color:var(--soft)} .resumo .l.total>span:last-child{font-variation-settings:"wdth" 106,"wght" 900} /* ---- parcelamento e prazo ---- */ .parc{font-family:var(--f-texto);font-size:12.5px;color:var(--soft); font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; letter-spacing:.01em;text-transform:none} /* ---- quantidade e preço na linha do item ---- */ .qtd span{font-family:var(--f-texto);font-size:16px; font-variation-settings:"wdth" 104,"wght" 700; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .preco{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ---- tabelas de números (medidas, ficha) ---- */ table.tab tbody td,.tab-hud tbody td{font-family:var(--f-texto);font-size:14px; font-variation-settings:"wdth" 102,"wght" 600; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} table.tab thead th,.tab-hud thead th{font-size:15px} /* ---- rodapé: #5E5C58 sobre #08080A dá 3,00:1 e reprova para texto pequeno (o mínimo é 4,5:1). #8A8781 sobe para 5,4:1 sem clarear a ponto de competir com o conteúdo. ---- */ .legal{color:#8A8781} /* ---- celular: a varredura pesa mais em tela densa ---- */ @media(max-width:520px){ .opcao-frete b{font-size:15px} .resumo .l{font-size:13.5px} } /* ============================================================================= TEMA SIGNAL ON / SIGNAL OFF ============================================================================= */ .tema-chave{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 10px; border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer; font-family:var(--f-osd);font-size:16px;text-transform:uppercase;white-space:nowrap} .tema-chave:hover,.tema-chave[aria-pressed="true"]{border-color:var(--cy);color:var(--cy)} .tema-led{width:8px;height:8px;border:1px solid currentColor;background:transparent; box-shadow:none;transition:background .12s,box-shadow .12s} .tema-chave[aria-pressed="true"] .tema-led{background:var(--cy);box-shadow:0 0 8px rgba(33,231,240,.65)} .conta-link{font-family:var(--f-osd);font-size:18px;color:var(--dim);white-space:nowrap} .conta-link:hover,.conta-link[aria-current="page"]{color:var(--cy)} @media(max-width:720px){ .top-acoes>.conta-link{display:none} .tema-chave{padding:0 8px} .tema-chave .tema-texto{display:none} .tema-chave::after{content:attr(data-estado)} } html[data-theme="light"] body::before{opacity:.10} html[data-theme="light"] body::after{opacity:.025} html[data-theme="light"] .top{background:rgba(242,238,229,.94)} html[data-theme="light"] .menu-mob{background:var(--void);box-shadow:0 18px 40px rgba(40,35,30,.22)} html[data-theme="light"] .tela, html[data-theme="light"] .linha .thumb, html[data-theme="light"] .miniaturas button{background:#DDD7CC} html[data-theme="light"] .tela .vazio{color:#777169;background:repeating-linear-gradient(-45deg,#E2DDD3 0 10px,#D8D2C7 10px 20px)} html[data-theme="light"] .tv{background:radial-gradient(120% 120% at 50% 40%,#FFFFFF 0%,#E2DDD3 72%)} html[data-theme="light"] .painel-item p{color:var(--dim)} html[data-theme="light"] input::placeholder{color:#777169} html[data-theme="light"] .crawl-track b{color:#A60058} /* Frete: preço explícito em todas as linhas, selecionadas ou não. */ .opcao-frete{width:100%;background:transparent;color:var(--bone);text-align:left; appearance:none;-webkit-appearance:none} .opcao-frete .frete-info{min-width:0;flex:1} .opcao-frete .frete-valor{display:block;flex:none;color:var(--bone);opacity:1;visibility:visible; font-family:var(--f-texto);font-variation-settings:"wdth" 104,"wght" 800; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; font-size:16px;letter-spacing:0;white-space:nowrap} .opcao-frete[aria-pressed="true"]{background:rgba(33,231,240,.08)} .aviso-frete{margin:4px 0 10px;font-size:12px;color:var(--dim);line-height:1.35} /* Minha conta */ .conta-shell{display:grid;gap:24px;max-width:920px} .conta-card{background:var(--panel);border:1px solid var(--line);padding:clamp(18px,4vw,28px)} .conta-card h3{margin-bottom:16px} .conta-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .conta-auth-grid{display:grid;gap:18px} @media(min-width:760px){.conta-auth-grid{grid-template-columns:1fr 1fr}} .pedido-card{border:1px solid var(--line);padding:16px;margin-top:12px;background:var(--void)} .pedido-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap} .pedido-card .status{font-family:var(--f-osd);text-transform:uppercase;color:var(--cy);font-size:17px} .pedido-itens{margin-top:10px;color:var(--soft);font-size:13.5px} .pedido-itens div{padding:4px 0;border-bottom:1px solid var(--line)} .pedido-itens div:last-child{border-bottom:0} @media(max-width:520px){.opcao-frete .frete-valor{font-size:15px}} input[readonly]{opacity:.82;cursor:not-allowed;background:var(--panel-2)} /* Cabeçalho em celulares estreitos: o nome por extenso repetia a marca do ícone e empurrava o botão MENU para fora da tela. */ @media(max-width:480px){ .top-in{gap:8px} .top-in>.brand .wm{display:none} } @media(max-width:340px){ .cart-link{min-width:58px;width:58px;padding:5px 7px;font-size:0} .cart-link::after{content:"C (" attr(data-qtd) ")";font-family:var(--f-osd);font-size:16px} } /* ============================================================================= PERFORMANCE MOBILE + ASSINATURA DO TEMA CLARO — agosto/2026 ============================================================================= */ .crawl-track{will-change:transform;contain:layout paint} @supports(content-visibility:auto){ main>.sec{content-visibility:auto;contain-intrinsic-size:auto 900px} footer{content-visibility:auto;contain-intrinsic-size:auto 320px} } @media(max-width:720px){ /* A camada de ruído ocupa 220% da tela e não agrega leitura no telefone. A varredura leve permanece; o custo de pintura contínua desaparece. */ body::after{display:none} body::before{opacity:.36} .tela img{transition:filter .16s} .item:hover .tela img{transform:none} } /* No tema claro a arte branca da TV ficava quase invisível. Ela muda para preto, ganha sombra de canal e emite uma falha breve, repetida com intervalo longo. É destaque contínuo sem virar estrobo. */ html[data-theme="light"] .brand img{filter:brightness(0) saturate(100%) drop-shadow(1px 0 0 rgba(255,45,142,.78)) drop-shadow(-1px 0 0 rgba(0,126,134,.72))} @keyframes logoSignalLight{ 0%,91%,94%,100%{opacity:1;transform:translate3d(0,0,0)} 92%{opacity:.28;transform:translate3d(-2px,0,0)} 93%{opacity:.8;transform:translate3d(2px,0,0)} } @keyframes logoTrocaTema{ 0%{opacity:1;transform:none} 18%{opacity:.18;transform:translate3d(-4px,0,0) scaleX(1.05)} 32%{opacity:1;transform:translate3d(3px,0,0)} 50%{opacity:.35;transform:translate3d(-2px,0,0) scaleY(.92)} 72%,100%{opacity:1;transform:none} } @media(prefers-reduced-motion:no-preference){ html[data-theme="light"] #topo .brand img{animation:logoSignalLight 7.4s steps(1,end) infinite} html.tema-em-transmissao #topo .brand img{animation:logoTrocaTema .7s steps(1,end) 1!important} } /* ============================================================================= PLAYMODE 2026.08 — CONTA VERIFICADA, CONSENTIMENTO E ACABAMENTO PREMIUM ============================================================================= */ .conta-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:5px 13px; border:1px solid var(--line);background:transparent;color:var(--dim);transition:border-color .15s,color .15s,background .15s} .conta-link:hover,.conta-link[aria-current="page"]{border-color:var(--cy);color:var(--cy);background:rgba(33,231,240,.06)} @media(max-width:720px){ .top-acoes>.conta-link{display:inline-flex;min-width:44px;padding:5px 8px;font-size:0} .top-acoes>.conta-link::after{content:"CONTA";font-family:var(--f-osd);font-size:14px} } @media(max-width:480px){ .top-acoes>.conta-link{display:none} } .conta-shell{max-width:1120px} .conta-card-auth{position:relative;overflow:hidden;min-height:100%} .conta-card-auth::after{content:"";position:absolute;right:-70px;bottom:-95px;width:190px;height:190px;border:1px solid var(--line);transform:rotate(18deg);pointer-events:none} .conta-card-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid var(--line)} .status-dot,.verificado{font-family:var(--f-osd);font-size:14px;letter-spacing:.04em;color:var(--cy);white-space:nowrap} .status-dot::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--cy);box-shadow:0 0 9px rgba(33,231,240,.55)} .conta-intro{min-height:44px;margin:-6px 0 18px} .campo-label{font-family:var(--f-osd);font-size:15px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em;margin-bottom:-6px} .conta-card input{width:100%} .link-acao{display:inline-flex;align-items:center;justify-content:flex-start;margin-top:12px;padding:0;border:0;background:none;color:var(--soft);font-family:var(--f-osd);font-size:16px;cursor:pointer;text-decoration:underline;text-underline-offset:4px} a.link-acao{width:max-content} .conta-card-auth .link-acao{display:flex;width:max-content} .link-acao:hover,.destaque-link{color:var(--cy)} .consentimento{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin-top:16px;color:var(--soft);font-size:12.5px;line-height:1.5;cursor:pointer} .consentimento input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--cy)} .nota-privacidade{position:relative;z-index:1;margin-top:12px;color:var(--dim);font-size:11.5px;line-height:1.5} .nota-privacidade a{color:var(--soft);text-decoration:underline;text-underline-offset:3px} .conta-msg{min-height:22px;margin-top:16px;font-size:13px;line-height:1.45} .conta-msg.erro{color:var(--mg)} .conta-msg.sucesso{color:var(--cy)} .conta-fluxo{max-width:650px} .conta-identidade{border-color:rgba(33,231,240,.55)} .conta-status-col{display:flex;align-items:flex-end;flex-direction:column;gap:12px} .conta-painel-grid{display:grid;gap:18px;align-items:start} @media(min-width:900px){.conta-painel-grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr)}} .conta-preferencias{position:sticky;top:116px} .switch-marketing{display:flex;align-items:center;gap:12px;margin-top:20px;color:var(--bone);font-family:var(--f-osd);font-size:17px;cursor:pointer} .switch-marketing input{position:absolute;opacity:0;pointer-events:none} .switch-trilho{position:relative;width:46px;height:24px;border:1px solid var(--line);background:var(--void);transition:.18s} .switch-trilho::after{content:"";position:absolute;left:4px;top:4px;width:14px;height:14px;background:var(--dim);transition:.18s} .switch-marketing input:checked+.switch-trilho{border-color:var(--cy);background:rgba(33,231,240,.10)} .switch-marketing input:checked+.switch-trilho::after{left:26px;background:var(--cy);box-shadow:0 0 8px rgba(33,231,240,.55)} .switch-marketing input:focus-visible+.switch-trilho{outline:2px solid var(--mg);outline-offset:3px} /* TV DE TUDO + CANAIS */ .hero-grid-canais{align-items:stretch} .tv-tudo{position:relative;display:flex;flex-direction:column;min-height:470px;padding:22px;border:1px solid var(--line);background:radial-gradient(115% 100% at 50% 34%,#1a1a20 0%,#08080a 72%);overflow:hidden;isolation:isolate} .tv-tudo::before{content:"";position:absolute;inset:10px;border:1px solid rgba(237,234,227,.08);pointer-events:none} .tv-tudo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.11) 50%);background-size:100% 4px;opacity:.38;pointer-events:none;z-index:-1} .tv-tudo .tv-osd{position:relative;z-index:2} .tv-tudo-centro{display:grid;place-items:center;flex:1;text-align:center;padding:28px 12px 16px} .tv-tudo-centro img{width:min(180px,44vw);height:auto;margin:0 auto 16px;filter:drop-shadow(0 0 20px rgba(33,231,240,.08))} .tv-tudo-centro strong{display:block;font-family:var(--f-osd);font-size:clamp(34px,6vw,58px);line-height:.9;letter-spacing:.02em} .signal-identity-title{display:block!important;text-align:center;line-height:.9;letter-spacing:.01em} .signal-identity-title .signal-identity-line{color:#FFF;white-space:nowrap;text-shadow:0 0 12px rgba(255,255,255,.10)} .signal-identity-title .signal-identity-line.gl-success-line::before,.signal-identity-title .signal-identity-line.gl-success-line::after{color:#9DFF4D;text-shadow:0 0 10px rgba(157,255,77,.52)} .gl-conclusao{position:relative;display:inline-block;isolation:isolate;color:inherit} .gl-conclusao::before,.gl-conclusao::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;overflow:hidden;clip-path:inset(100% 0 0 0);color:#9DFF4D;text-shadow:0 0 10px rgba(157,255,77,.48)} .gl-conclusao::before{transform:translate3d(-2px,0,0);animation:g1 6.5s infinite steps(1)} .gl-conclusao::after{transform:translate3d(2px,0,0);animation:g2 6.5s infinite steps(1);animation-delay:-.13s} @media(prefers-reduced-motion:reduce){.gl-conclusao::before,.gl-conclusao::after{display:none}} .tv-tudo-centro small{display:block;margin-top:12px;color:var(--dim);font-family:var(--f-osd);font-size:16px;letter-spacing:.08em} .canais-tv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:relative;z-index:2} .canal-tv{display:flex;align-items:center;justify-content:space-between;gap:8px;height:54px;min-height:54px;padding:10px 12px;border:1px solid rgba(33,231,240,.35);background:rgba(8,8,10,.76);color:var(--soft);transition:.15s} .canal-tv:hover{border-color:var(--cy);color:var(--bone);transform:translateY(-1px);background:rgba(33,231,240,.06)} .canal-tv b{display:block;font-family:var(--f-osd);font-size:15px;line-height:1.05;text-transform:uppercase} .canal-tv span{font-family:var(--f-osd);font-size:13px;color:var(--cy);white-space:nowrap} .canal-tv.principal{border-color:rgba(33,231,240,.35)} .canal-tv:last-child{grid-column:1/-1;width:calc((100% - 8px)/2);justify-self:center} .hero-copy-premium{display:flex;flex-direction:column;justify-content:center} .hero-selo{display:inline-flex;width:max-content;align-items:center;gap:8px;margin-bottom:18px;padding:6px 10px;border:1px solid var(--line);font-family:var(--f-osd);font-size:14px;color:var(--cy)} .hero-selo::before{content:"";width:7px;height:7px;background:var(--cy);box-shadow:0 0 8px rgba(33,231,240,.65)} .trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px} .trust-item{padding:12px;border:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--soft)} .trust-item strong{display:block;margin-bottom:3px;font-family:var(--f-osd);font-size:15px;color:var(--bone)} .trust-item strong::before{content:"✓ ";color:var(--cy)} @media(min-width:960px){.hero-grid.hero-grid-canais{grid-template-columns:1.05fr .95fr}.tv-tudo{min-height:590px}.canais-tv{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.tv-tudo{min-height:520px;padding:16px}.canais-tv{grid-template-columns:1fr}.canal-tv:last-child{grid-column:auto;width:100%;justify-self:stretch}.trust-grid{grid-template-columns:1fr}} html[data-theme="light"] .tv-tudo{background:radial-gradient(115% 100% at 50% 34%,#fff 0%,#dcd6ca 72%)} html[data-theme="light"] .tv-tudo-centro img{filter:brightness(0) saturate(100%) drop-shadow(1px 0 0 rgba(255,45,142,.65)) drop-shadow(-1px 0 0 rgba(0,126,134,.65))} html[data-theme="light"] .signal-identity-title .signal-identity-line{color:#151311;text-shadow:0 0 1px rgba(255,255,255,.75)} html[data-theme="light"] .canal-tv{background:rgba(242,238,229,.82);border-color:rgba(0,126,134,.35)} /* Página de canais/catálogo */ .filtros-canais{display:flex;flex-wrap:wrap;gap:8px} .chip[data-categoria]{position:relative;padding-left:32px} .chip[data-categoria]::before{content:attr(data-ch);position:absolute;left:9px;color:var(--cy);font-family:var(--f-osd);font-size:12px} /* Política de privacidade */ .legal-page{max-width:860px} .legal-page h1{margin-bottom:10px} .legal-page h2{margin:34px 0 10px;font-size:clamp(22px,4vw,32px)} .legal-page p,.legal-page li{color:var(--soft);line-height:1.75} .legal-page ul{padding-left:20px} .legal-box{margin:22px 0;padding:18px;border:1px solid var(--line);background:var(--panel)} /* Paleta da camisa lisa — extensão discreta dos controles já existentes. */ .paleta-cores{display:flex;flex-wrap:wrap;gap:7px} .cor-opcao{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 9px;border:1px solid var(--line);background:transparent;color:var(--dim);font-family:var(--f-osd);font-size:15px;text-transform:uppercase;cursor:pointer} .cor-opcao:hover{border-color:var(--cy);color:var(--cy)} .cor-opcao[aria-pressed="true"]{border-color:var(--bone);color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)} .cor-opcao[disabled]{opacity:.28;cursor:not-allowed;text-decoration:line-through} .cor-amostra{display:block;width:18px;height:18px;flex:0 0 18px;background:var(--cor);border:1px solid rgba(127,127,127,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .campo-cores label strong{color:var(--bone);font-weight:700} @media(max-width:620px){.cor-opcao{padding:6px 8px;font-size:14px}.cor-amostra{width:20px;height:20px;flex-basis:20px}} /* Ajuste 2026-08-06: remove somente as listras de varredura sobre fotos e página */ body::before{display:none!important;content:none!important;background:none!important} .tela::after,.tv::after,.tv-tudo::after,.hud-foto::after{content:"";background:none!important} .tela.principal::after{content:"";background:none!important} /* Ajuste 2026-08-06: mais contraste e nitidez para os canais */ .ch{top:10px;left:10px;padding:3px 8px;border:1px solid rgba(33,231,240,.42);background:rgba(6,10,14,.82);backdrop-filter:blur(1px);font-size:19px;letter-spacing:.04em;color:#7EF7FF;text-shadow:0 0 10px rgba(33,231,240,.55),0 1px 0 rgba(0,0,0,.9);box-shadow:0 0 0 1px rgba(0,0,0,.28) inset} .canal-tv{background:rgba(8,8,10,.88);border-color:rgba(33,231,240,.35)} .canal-tv b{font-size:16px;color:var(--bone);letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.7)} .canal-tv span{font-size:14px;font-weight:700;color:#7EF7FF;text-shadow:0 0 8px rgba(33,231,240,.38)} .canal-tv:hover b,.canal-tv:hover span{color:#fff} .chip[data-categoria]{padding-left:36px} .chip[data-categoria]::before{left:10px;font-size:13px;color:#7EF7FF;text-shadow:0 0 8px rgba(33,231,240,.35)} /* AUTH HEADER UX 2026 */ .auth-topo{display:flex;align-items:center;gap:8px;position:relative} .auth-btn,.perfil-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:5px 12px;border:1px solid var(--line);background:transparent;color:var(--dim);font-family:var(--f-osd);font-size:15px;text-transform:uppercase;cursor:pointer;white-space:nowrap} .auth-btn:hover,.perfil-btn:hover{border-color:var(--cy);color:var(--cy)} .auth-create{border-color:rgba(33,231,240,.35)} .perfil-menu-wrap{position:relative} .perfil-icone{font-size:16px;line-height:1} .perfil-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:190px;padding:8px;background:#09090b;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.35)} .perfil-dropdown a,.perfil-dropdown button{display:block;width:100%;padding:10px 12px;background:none;border:0;text-align:left;color:var(--soft);font-family:var(--f-osd);font-size:14px;cursor:pointer} .perfil-dropdown a:hover,.perfil-dropdown button:hover{color:var(--cy);background:rgba(33,231,240,.06)} @media(max-width:560px){.auth-btn{padding:5px 8px;font-size:12px}.auth-create{display:none}.perfil-btn span:last-child{display:none}} .auth-topo{display:flex;align-items:center;gap:6px;position:relative} .auth-btn,.perfil-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 11px;border:1px solid rgba(237,234,227,.18);background:rgba(8,8,10,.5);color:var(--soft);font-family:var(--f-osd);font-size:14px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:.15s} .auth-btn:hover,.perfil-btn:hover{border-color:var(--cy);color:var(--cy);background:rgba(33,231,240,.04)} .auth-create{border-color:rgba(237,234,227,.28)} .perfil-icone{font-size:15px;color:var(--cy);line-height:1} .perfil-btn{border-color:rgba(33,231,240,.38);color:var(--bone);background:rgba(33,231,240,.03)} .perfil-menu-wrap{position:relative} .perfil-dropdown{position:absolute;right:0;top:calc(100% + 7px);z-index:50;min-width:185px;padding:6px;background:#08080a;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.45)} .perfil-dropdown a,.perfil-dropdown button{display:block;width:100%;padding:9px 11px;background:none;border:0;text-align:left;color:var(--soft);font-family:var(--f-osd);font-size:13px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer} .perfil-dropdown a:hover,.perfil-dropdown button:hover{color:var(--cy);background:rgba(33,231,240,.06)} @media(max-width:560px){.auth-btn{padding:0 8px;font-size:12px}.auth-create{display:inline-flex}.perfil-btn span:last-child{display:inline}} /* UX conta, favoritos e carrinho vazio — 2026-08-06 */ .item{position:relative} .favorito-btn{position:absolute;z-index:7;top:10px;right:10px;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(237,234,227,.34);background:rgba(8,8,10,.82);color:var(--bone);font:700 26px/1 Arial,sans-serif;cursor:pointer;backdrop-filter:blur(6px);transition:border-color .16s,color .16s,background .16s,transform .16s} .favorito-btn:hover{border-color:var(--mg);color:var(--mg);transform:translateY(-1px)} .favorito-btn.ativo{border-color:var(--mg);background:rgba(255,45,142,.12);color:var(--mg);box-shadow:0 0 16px rgba(255,45,142,.16)} .favorito-btn:focus-visible{outline:2px solid var(--cy);outline-offset:3px} .favorito-btn:disabled{opacity:.55;cursor:wait;transform:none} .produto-titulo-fav{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .produto-titulo-fav .favorito-btn{position:static;flex:0 0 46px;width:46px;height:46px;margin-top:4px;background:var(--panel)} .carrinho-vazio{max-width:760px;margin:0 auto;padding:clamp(34px,6vw,72px) clamp(22px,5vw,54px);border-color:rgba(33,231,240,.34)} .carrinho-vazio h3{margin:8px 0 10px;font-size:clamp(27px,5vw,46px)} .carrinho-vazio .soft{max-width:54ch;margin:0 auto} .carrinho-vazio-acoes{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px} .conta-atalhos{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .conta-atalhos a{padding:8px 12px;border:1px solid var(--line);font-family:var(--f-osd);font-size:15px;text-transform:uppercase;color:var(--soft)} .conta-atalhos a:hover{border-color:var(--cy);color:var(--cy)} #pedidos,#favoritos,#configuracoes,#privacidade{scroll-margin-top:120px} .conta-favoritos,.conta-configuracoes{margin-top:18px} .conta-secao-titulo{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px} .conta-secao-titulo h3{margin-bottom:4px} .conta-favoritos-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .conta-favoritos-grid .item{min-width:0} .config-grid{display:grid;gap:28px;align-items:start} @media(min-width:820px){.config-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.config-grid>div{padding-right:28px;border-right:1px solid var(--line)}} .config-grid h3{margin-bottom:8px} .config-grid .campo-label{display:block;margin-top:18px;margin-bottom:7px} .config-grid input[readonly]{color:var(--soft);background:rgba(127,127,127,.05);cursor:not-allowed} .conta-login-aviso{margin-bottom:18px} @media(max-width:620px){.conta-secao-titulo{display:block}.conta-secao-titulo .btn{margin-top:14px;width:100%}.carrinho-vazio-acoes .btn{width:100%}.produto-titulo-fav{gap:10px}.favorito-btn{width:40px;height:40px}} html[data-theme="light"] .favorito-btn{background:rgba(242,238,229,.9);border-color:rgba(8,8,10,.22)} html[data-theme="light"] .favorito-btn.ativo{background:rgba(255,45,142,.10)} html[data-theme="light"] .perfil-btn{background:rgba(255,255,255,.74);border-color:rgba(33,231,240,.42);color:#181614} html[data-theme="light"] .perfil-dropdown{background:#F4EEE2;border-color:rgba(8,8,10,.16);box-shadow:0 12px 30px rgba(40,35,30,.18)} html[data-theme="light"] .perfil-dropdown a,html[data-theme="light"] .perfil-dropdown button{color:#2E2823} html[data-theme="light"] .perfil-dropdown a:hover,html[data-theme="light"] .perfil-dropdown button:hover{color:#007E86;background:rgba(33,231,240,.10)} .senha-visor-wrap{position:relative;display:block;width:100%}.senha-visor-wrap>input{width:100%;padding-right:108px}.senha-visor{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 8px;border:1px solid var(--line);background:var(--void);color:var(--dim);font-family:var(--f-osd);font-size:13px;letter-spacing:.04em;cursor:pointer;text-transform:uppercase}.senha-visor:hover,.senha-visor:focus-visible,.senha-visor.ativo{border-color:var(--cy);color:var(--cy);outline:none}.senha-visor-olho{font-size:16px;line-height:1}.senha-visor.ativo .senha-visor-olho{text-shadow:0 0 10px var(--cy)}.conta-ultimo-acesso{margin:8px 0 0;color:var(--dim);font-family:var(--f-osd);font-size:14px;letter-spacing:.035em;text-transform:uppercase}.config-pendente{margin:14px 0 18px;padding:12px 14px;border:1px dashed var(--cy);background:rgba(33,231,240,.05);color:var(--soft)}#enderecos{scroll-margin-top:110px}.endereco-form{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}#enderecos-lista{display:grid;gap:10px;margin-top:12px}.endereco-card{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:15px;border:1px solid var(--line);background:var(--panel)}.endereco-card strong{display:block;margin:5px 0 3px}.endereco-card p{margin:0}.endereco-acoes{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.endereco-acoes .link-acao{margin:0}.estoque-baixo{color:var(--mg)!important;border-color:var(--mg)!important}.carrinho-enderecos{margin:0 0 14px;padding:12px;border:1px dashed var(--line);background:var(--panel)}.carrinho-enderecos label{display:block;margin-bottom:6px;font-family:var(--f-osd);font-size:14px;color:var(--cy);text-transform:uppercase;letter-spacing:.04em}.carrinho-enderecos select{width:100%}.salvar-destino-check{display:flex!important;align-items:center;gap:9px;margin-top:10px!important;color:var(--soft)!important;font-family:inherit!important;font-size:13px!important;text-transform:none!important;letter-spacing:0!important}.salvar-destino-check input{width:auto}@media(max-width:700px){.conta-atalhos{position:sticky;top:67px;z-index:8;display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-14px;margin-right:-14px;padding:9px 14px;background:var(--void);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.conta-atalhos::-webkit-scrollbar{display:none}.conta-atalhos a{flex:0 0 auto;white-space:nowrap}.endereco-card{display:block}.endereco-acoes{justify-content:flex-start;margin-top:10px}.senha-visor-wrap>input{padding-right:100px}.senha-visor{font-size:12px}} /* Central de marketing / cupom — mantém a gramática visual PlayMode. */ .pm-announcement{border-bottom:1px solid var(--cy);background:linear-gradient(90deg,rgba(33,231,240,.06),rgba(255,45,142,.05));color:var(--bone)} .pm-announcement .wrap{min-height:42px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;padding-top:7px;padding-bottom:7px} .pm-announcement .osd{color:var(--cy);white-space:nowrap}.pm-announcement strong{font-size:13px;letter-spacing:.02em} .cupom-campo{padding-top:14px;border-top:1px dashed var(--line)} .cupom-linha{display:flex;gap:8px}.cupom-linha input{min-width:0;flex:1;text-transform:uppercase;letter-spacing:.05em}.cupom-linha .btn{white-space:nowrap} .resumo .l.desconto{color:var(--cy)} .cy{color:var(--cy)!important} @media(max-width:560px){.pm-announcement .wrap{align-items:flex-start;flex-direction:column;gap:2px}.cupom-linha{flex-direction:column}.cupom-linha .btn{width:100%}} .pm-home-banner{padding-top:18px;padding-bottom:18px} .pm-home-banner-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);min-height:260px;border:1px solid var(--line);background:var(--panel);color:var(--bone);text-decoration:none;overflow:hidden} .pm-home-banner-copy{padding:clamp(24px,5vw,54px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.pm-home-banner-copy .osd{color:var(--cy)}.pm-home-banner-copy h2{font-family:var(--f-texto);font-variation-settings:var(--w-display);font-size:clamp(32px,5vw,64px);line-height:.92;margin:8px 0 14px}.pm-home-banner-copy p{max-width:56ch;color:var(--soft);margin:0 0 20px}.pm-home-banner-image{min-height:260px;background:var(--panel-2)}.pm-home-banner-image img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03)} @media(max-width:760px){.pm-home-banner-inner{grid-template-columns:1fr}.pm-home-banner-image{min-height:220px;order:-1}.pm-home-banner-copy{padding:24px}} /* PLAYMODE 2026.08 — IDENTIFICAÇÃO LEGAL MEI */ .legal-empresa-endereco{margin-top:6px;opacity:.72;font-size:11px;line-height:1.5} .fornecedor-legal{margin:14px 0 2px;padding:14px 15px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);font-size:12px;line-height:1.55;color:var(--dim)} .fornecedor-legal strong{display:block;color:var(--ink);margin:2px 0 4px} .fornecedor-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px} .dados-empresa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px} .dados-empresa-item{border:1px solid var(--line);padding:16px;background:var(--panel)} .dados-empresa-item .osd{margin-bottom:6px} .dados-empresa-item strong{display:block;line-height:1.45} @media(max-width:700px){.dados-empresa-grid{grid-template-columns:1fr}} /* Privacidade e direitos do titular · v10 */ #privacidade{scroll-margin-top:120px}.conta-privacidade{margin-top:18px}.privacidade-grid{display:grid;gap:28px;align-items:start;margin-top:10px}.privacidade-grid>div{min-width:0}.zona-exclusao{padding:18px;border:1px solid rgba(255,45,142,.35);background:rgba(255,45,142,.025)}.zona-exclusao .osd{color:var(--mg)}.form-excluir-conta{margin-top:18px;padding-top:18px;border-top:1px dashed rgba(255,45,142,.35)}.form-excluir-conta .btn-mg{background:transparent;color:var(--mg);border-color:var(--mg)}.form-excluir-conta .btn-mg:hover{background:var(--mg);color:var(--void)}@media(min-width:820px){.privacidade-grid{grid-template-columns:1fr 1fr}.privacidade-grid>div:first-child{padding-right:28px;border-right:1px solid var(--line)}}html[data-theme="light"] .zona-exclusao{background:rgba(255,45,142,.04)} /* ===== v20 · enquadramento manual das fotos ===== O painel grava x/y (object-position) e zoom por imagem. Sem cadastro os valores caem no padrão antigo: centralizado, escala 1. O hover do card multiplica o zoom em vez de sobrescrevê-lo. */ .tela img,.tela .f,.miniaturas img,.linha .thumb img{object-position:var(--pm-fx,50%) var(--pm-fy,50%)} .tela img,.tela .f{transform:scale(var(--pm-zoom,1))} .item:hover .tela img,.item:hover .tela .f{transform:scale(calc(var(--pm-zoom,1) * 1.02))} @media(max-width:720px){ .item:hover .tela img,.item:hover .tela .f{transform:scale(var(--pm-zoom,1))} }