/* ============================================================================= AVISO DE COOKIES — css/cookies.css ----------------------------------------------------------------------------- Faixa no rodape da tela + modal de configuracao por categoria. Pedido do dono em 2026-08-21, espelhando o aviso que o site atual usa. ⚠ VISUAL DO SITE, NAO DO PRINT. O aviso de referencia e uma faixa BRANCA (padrao da plataforma antiga). Aqui esta escuro com verde, como todo o resto: uma barra branca no pe de um site preto le como erro de carregamento, nao como aviso. Se a preferencia for o branco da referencia, e trocar as tres variaveis do topo. ⚠ ELE NAO PODE COBRIR CONTEUDO CLICAVEL PARA SEMPRE. A faixa e position:fixed no rodape e sai da tela ao decidir; enquanto esta la, `padding-bottom` no nao foi usado de proposito (mexeria no calculo do ScrollSmoother e do pin das secoes). Em troca ela e baixa e translucida. ============================================================================= */ /* ⚠ ESTE TOKEN MORA AQUI POR UM MOTIVO DE CARREGAMENTO, e nao por organizacao. Ele e a cor do vidro escuro usada por esta barra E pelo véu do header (`.hdblur span:nth-child(4)` em css/header.css). Tentei primeiro em css/tokens.css, o lugar semanticamente certo — e saiu vazio no index.html, que NAO carrega o tokens.css (só as páginas de produto carregam). Levantando quem carrega o quê: `cookies.css` é o único arquivo lido pelo index E pelas sete páginas de produto; `header.css` é só do index; `tokens.css` só das de produto. Então é aqui que uma definição alcança todos. ⚠ Se este arquivo algum dia deixar de ser incluído em alguma página, o véu do header cai no fallback do `var()` — mesma cor, escrita em dois lugares. É por isso que o fallback existe, e é por isso que ele tem de continuar igual a este valor. */ :root{ --vidro: 6, 14, 8 } .igck{ /* mesma cor do véu do header, pelo token acima */ --igck-fundo:rgba(var(--vidro, 6, 14, 8),.92); --igck-borda:rgba(232,255,228,.14); --igck-tinta:#e8ffe4; --igck-fraca:rgba(232,255,228,.66); --igck-verde:#18FF00; } /* ---------------------------------------------------------------- faixa */ .igck-faixa{ position:fixed; left:0; right:0; bottom:0; z-index:9999; display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px max(20px,calc((100vw - 1320px)/2)); background:var(--igck-fundo); border-top:1px solid var(--igck-borda); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--igck-tinta); font:400 13.5px/1.6 'Inter Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* nasce fora da tela; a classe .on desce. Ver a nota de reduced-motion no fim. */ transform:translateY(110%); transition:transform .5s cubic-bezier(.22,.7,.2,1); } .igck-faixa.on{ transform:none } .igck-txt{ flex:1 1 380px; min-width:0; color:var(--igck-fraca) } .igck-txt a{ color:var(--igck-verde); text-decoration:underline; text-underline-offset:2px } .igck-txt a:hover{ text-decoration:none } .igck-acoes{ display:flex; align-items:center; gap:10px; flex:0 0 auto } .igck-bt{ font:inherit; font-weight:600; letter-spacing:.01em; cursor:pointer; padding:11px 20px; border-radius:999px; border:1px solid transparent; transition:transform .2s ease, background .2s ease, border-color .2s ease; } .igck-bt:focus-visible{ outline:2px solid var(--igck-verde); outline-offset:3px } .igck-bt.aceitar{ background:var(--igck-verde); color:#052008; box-shadow:0 0 26px rgba(24,255,0,.3) } .igck-bt.aceitar:hover{ transform:translateY(-1px); box-shadow:0 0 38px rgba(24,255,0,.45) } .igck-bt.sec{ background:transparent; border-color:var(--igck-borda); color:var(--igck-tinta) } .igck-bt.sec:hover{ border-color:rgba(24,255,0,.5) } /* ⚠ o X tem 44px de alvo mesmo parecendo pequeno: menos que isso e inclicavel no toque */ .igck-x{ width:44px; height:44px; display:grid; place-items:center; flex:none; background:none; border:0; cursor:pointer; color:var(--igck-fraca); font-size:22px; line-height:1; border-radius:50%; } .igck-x:hover{ color:var(--igck-tinta); background:rgba(232,255,228,.07) } .igck-x:focus-visible{ outline:2px solid var(--igck-verde); outline-offset:2px } /* ---------------------------------------------------------------- modal */ /* ⚠ A TRANSICAO DE `visibility` TEM DURACAO ZERO E ATRASO, e nao 0.3s como eu escrevi primeiro. Com `visibility .3s`, o elemento continua HIDDEN durante os 300ms da abertura — e navegador NAO FOCA elemento invisivel, entao o focus() no primeiro campo falhava e o Tab comecava fora do dialogo. Peguei medindo (focoDentro:false com o modal "aberto"). Do jeito certo: ao abrir, visibility vira visible NA HORA (0s); ao fechar, ela espera os 300ms do fade para so entao esconder — senao o veu desapareceria de estalo. */ .igck-veu{ position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; background:rgba(2,6,3,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; } .igck-veu.on{ opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s } .igck-caixa{ width:min(680px,100%); max-height:min(86vh,760px); overflow:auto; background:linear-gradient(180deg,rgba(10,22,13,.98),rgba(4,10,6,.99)); border:1px solid var(--igck-borda); border-radius:20px; box-shadow:0 40px 120px rgba(0,0,0,.7); color:var(--igck-tinta); font:400 14px/1.6 'Inter Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; transform:translateY(14px) scale(.985); transition:transform .34s cubic-bezier(.22,.7,.2,1); } .igck-veu.on .igck-caixa{ transform:none } .igck-cab{ display:flex; align-items:flex-start; gap:16px; padding:24px 26px 18px; border-bottom:1px solid var(--igck-borda) } .igck-cab h2{ margin:0; flex:1; font-size:21px; font-weight:500; letter-spacing:-.015em } .igck-linha{ padding:20px 26px; border-bottom:1px solid rgba(232,255,228,.07); display:grid; grid-template-columns:1fr auto; gap:14px 18px; align-items:start } .igck-linha:last-of-type{ border-bottom:0 } .igck-linha h3{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em } .igck-linha p{ margin:7px 0 0; grid-column:1; color:var(--igck-fraca); font-size:13px } /* ⚠ O CONTROLE E UM DE VERDADE, so pintado. Um

com role="switch" exigiria reimplementar teclado, foco e estado — e e o tipo de componente que se implementa mal e ninguem testa com Tab. */ .igck-sw{ position:relative; width:52px; height:30px; flex:none; grid-row:span 2 } .igck-sw input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer } .igck-sw i{ position:absolute; inset:0; border-radius:999px; pointer-events:none; background:rgba(232,255,228,.14); border:1px solid var(--igck-borda); transition:background .22s ease, border-color .22s ease; } .igck-sw i::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--igck-tinta); transition:transform .22s cubic-bezier(.22,.7,.2,1); } .igck-sw input:checked + i{ background:rgba(24,255,0,.32); border-color:rgba(24,255,0,.6) } .igck-sw input:checked + i::after{ transform:translateX(22px); background:var(--igck-verde) } .igck-sw input:focus-visible + i{ outline:2px solid var(--igck-verde); outline-offset:3px } /* travado: essenciais nao se desliga, e o controle mostra isso em vez de fingir */ .igck-sw input:disabled{ cursor:not-allowed } .igck-sw input:disabled + i{ opacity:.55 } .igck-pe{ display:flex; justify-content:flex-end; gap:10px; padding:20px 26px 24px } @media (max-width:640px){ .igck-faixa{ padding:14px 18px; gap:12px; font-size:13px } .igck-acoes{ width:100%; justify-content:space-between } .igck-bt{ padding:11px 16px } .igck-cab{ padding:20px 18px 16px } .igck-linha{ padding:16px 18px } .igck-pe{ padding:16px 18px 20px } } /* ⚠ com movimento reduzido a faixa APARECE, nao desliza. Sem esta regra ela ficaria com transform:translateY(110%) e transicao de 0.01s — visualmente um salto seco; pior, se a transicao fosse cortada de todo ela nunca sairia de fora da tela. */ @media (prefers-reduced-motion:reduce){ .igck-faixa{ transition:none } .igck-veu, .igck-caixa{ transition:none } }