/* Visual do site da TN4 (todas as páginas usam este arquivo).
   As cores mudam com o tema: o escuro é o normal e o claro vale quando a página tem data-tema="claro". */

/* cantos arredondados: os mesmos no site todo */
:root { --raio-p: 12px; --raio: 16px; --raio-g: 22px; --raio-gg: 28px; }

/* cores do tema escuro (o normal) */
:root {
  color-scheme: dark;
  --fundo: #000; --fundo-topo: #050505; --cartao: #0d0d0d; --menu: #111; --hover: #1a1a1a;
  --linha: #1a1a1a; --borda: #222; --borda-2: #333; --borda-menu: #262626;
  --texto: #fff; --texto-2: #bbb; --texto-3: #999; --texto-4: #777; --rodape-texto: #ccc;
  --azul: #5aa9e6; --azul-forte: #7cbcf0; --no-azul: #04121f; --destaque: linear-gradient(90deg, #5aa9e6, #b9e0ff, #5aa9e6);
  --busca-fundo: #fff; --busca-borda: transparent; --busca-texto: #111;
  --montar-fundo: #fff; --montar-texto: #111;
  --sombra: rgba(0,0,0,.6); --sombra-azul: rgba(90,169,230,.35); --marca-filtro: grayscale(1) brightness(1.6);
  --rodape-fundo: linear-gradient(135deg, #111, #000); --rodape-borda: #000;
  --faixa-cheia: rgba(90,169,230,.22); --faixa-contorno: rgba(255,255,255,.14); --faixa-fraca: rgba(255,255,255,.06);
  /* globo (as cores com 3 números são "vermelho, verde, azul") */
  --globo-ponto: 226,240,255; --globo-brilho: 160,205,255; --globo-borda: 200,225,255; --globo-corpo1: #121a24; --globo-corpo2: #030507;
  --globo-linha: 90,169,230; --globo-cabeca: 234,246,255; --globo-mistura: lighter;
  --erro: #f87171; --ok: #4ade80;
}
/* cores do tema claro */
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f4f6f9; --fundo-topo: #fff; --cartao: #fff; --menu: #fff; --hover: #eef3f9;
  --linha: #e2e8f0; --borda: #e2e8f0; --borda-2: #cbd5e1; --borda-menu: #e2e8f0;
  --texto: #0f172a; --texto-2: #475569; --texto-3: #556274; --texto-4: #556274; --rodape-texto: #334155;
  --azul: #1868ad; --azul-forte: #135a96; --no-azul: #fff; --destaque: linear-gradient(90deg, #135a96, #1f7ccc, #135a96);
  --busca-fundo: #fff; --busca-borda: #cbd5e1; --busca-texto: #0f172a;
  --montar-fundo: #eef3f9; --montar-texto: #0f172a;
  --sombra: rgba(15,23,42,.15); --sombra-azul: rgba(31,124,204,.25); --marca-filtro: grayscale(1) invert(1) brightness(.45);
  --rodape-fundo: linear-gradient(135deg, #fff, #e8eef5); --rodape-borda: #e2e8f0;
  --faixa-cheia: rgba(31,124,204,.16); --faixa-contorno: rgba(15,23,42,.12); --faixa-fraca: rgba(15,23,42,.05);
  /* no claro o globo fica azul-marinho, com pontinhos claros e um brilho azul em volta, "flutuando" no fundo claro */
  --globo-ponto: 214,234,255; --globo-brilho: 31,124,204; --globo-borda: 140,200,255; --globo-corpo1: #1e3d63; --globo-corpo2: #06101c;
  --globo-linha: 110,185,245; --globo-cabeca: 235,247,255; --globo-mistura: lighter;
  --erro: #b91c1c; --ok: #15803d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* escondido é escondido, mesmo nas peças que têm display próprio */
html, body { margin: 0; min-height: 100%; background: var(--fundo); color: var(--texto); font-family: "Montserrat", "Segoe UI", Arial, sans-serif; }
body { transition: background-color .25s, color .25s; }
a { color: inherit; text-decoration: none; }
html { scroll-padding-top: 130px; } /* links da página não param escondidos atrás da barra de cima */

/* barra de cima: acompanha a página ao rolar (com sombra depois que começa a descer) */
.topo { background: var(--fundo-topo); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 30; transition: box-shadow .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.topo.rolou { box-shadow: 0 8px 24px var(--sombra); }
/* linha 1: logo, busca, conta e ícones */
.topo-linha1 { display: flex; align-items: center; gap: 24px; padding: 14px 16px 10px; }
.logo { flex: none; display: flex; align-items: center; width: 140px; height: 48px; color: #61a8ef; }
.logo svg { height: 42px; width: auto; }

.busca { flex: 1; display: flex; align-items: center; background: var(--busca-fundo); border: 1px solid var(--busca-borda); border-radius: 999px; height: 46px; padding-left: 22px; overflow: hidden; }
.busca input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--busca-texto); font: inherit; font-size: 16px; }
.busca input::placeholder { color: #666; }
.busca:focus-within { box-shadow: 0 0 0 3px var(--azul); } /* mostra onde está o cursor para quem usa o teclado */
.busca button:focus-visible { outline: 3px solid var(--busca-texto); outline-offset: -6px; }
.busca button { height: 100%; width: 60px; border: 0; cursor: pointer; background: var(--azul); color: #fff; display: grid; place-items: center; }
.busca button:hover { background: var(--azul-forte); }

/* botões Entrar e Cadastrar */
.conta { display: flex; align-items: center; gap: 10px; }
.botao-conta { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: transform .2s, background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.botao-conta.contorno { border: 1.5px solid var(--borda-2); }
.botao-conta.contorno:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }
.botao-conta.cheio { background: var(--azul); color: var(--no-azul); }
.botao-conta.cheio:hover { background: var(--azul-forte); transform: translateY(-2px); box-shadow: 0 8px 20px var(--sombra-azul); }

.icones { display: flex; align-items: center; gap: 22px; }
.icones a { display: flex; align-items: center; }
.icones a:hover, .tema:hover { color: var(--azul); }
.tema { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 50%; transition: background-color .2s; }
.tema:hover { background: var(--hover); } /* área de toque de 40px: fácil de acertar no celular */
.tema .lua, :root[data-tema="claro"] .tema .sol { display: none; }
:root[data-tema="claro"] .tema .lua { display: block; }
/* o sol e a lua entram girando quando aparecem */
.tema svg { animation: icone-entra .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes icone-entra { from { transform: rotate(-140deg) scale(.3); opacity: 0; } }
/* troca de tema: o navegador tira uma "foto" da página e o tema novo aparece num círculo que cresce a partir do botão */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.trocando-tema, .trocando-tema * { transition: none !important; }
/* as 3 barrinhas: abrem o menu com Atendimento e Rastrear pedido */
.mais { position: relative; }
.mais summary { list-style: none; cursor: pointer; display: flex; padding: 4px; border-radius: var(--raio-p); }
.mais summary::-webkit-details-marker { display: none; }
.mais summary:hover, .mais[open] summary { color: var(--azul); background: var(--hover); }
.gaveta { position: absolute; right: 0; top: calc(100% + 12px); background: var(--menu); border: 1px solid var(--borda-menu); border-radius: var(--raio-g); padding: 10px; min-width: 230px; display: flex; flex-direction: column; box-shadow: 0 12px 30px var(--sombra); z-index: 40; }
.icones .gaveta .item { gap: 12px; padding: 12px 14px; border-radius: var(--raio-p); font-size: 15px; font-weight: 600; white-space: nowrap; }
.icones .gaveta .so-celular { display: none; } /* Entrar e Cadastrar só aparecem aqui no celular */
.gaveta .separador { height: 1px; background: var(--borda-menu); margin: 6px 4px; }
.gaveta .item svg { color: var(--azul); flex: none; }
.gaveta .item:hover { background: var(--hover); }
.carrinho { position: relative; }
.carrinho .qtd { position: absolute; top: -8px; right: -12px; background: var(--azul); color: var(--no-azul); font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; }

/* linha 2: departamentos, atalhos e "monte seu PC" */
.topo-linha2 { display: flex; align-items: center; gap: 10px; padding: 4px 16px 12px; }
/* os atalhos ficam numa linha só; se não couber, dá para arrastar para o lado (o Departamentos fica fora, para o menu dele não ser cortado) */
.atalhos { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.atalhos::-webkit-scrollbar { display: none; }
.dep { position: relative; }
.dep > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--borda-2); border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.dep > summary::-webkit-details-marker { display: none; }
.dep > summary:hover, .dep[open] > summary { border-color: var(--azul); color: var(--azul); }
.dep-lista { position: absolute; left: 0; top: calc(100% + 8px); background: var(--menu); border: 1px solid var(--borda-menu); border-radius: var(--raio-g); padding: 10px; min-width: 290px; display: flex; flex-direction: column; box-shadow: 0 12px 30px var(--sombra);
  max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; } /* lista comprida rola por dentro */
.topo:has(details[open]) { z-index: 50; } /* menu aberto fica por cima do botão do chat */
.dep-cat summary, .dep-link { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--raio-p); font-size: 14px; font-weight: 600; }
.dep-cat summary::-webkit-details-marker { display: none; }
.dep-cat summary::after { content: "›"; color: var(--azul); font-size: 18px; line-height: 1; transition: transform .2s; }
.dep-cat[open] summary::after { transform: rotate(90deg); }
.dep-cat summary:hover, .dep-link:hover { background: var(--hover); color: var(--azul); }
.dep-cat .sub { display: flex; flex-direction: column; padding: 2px 0 6px 18px; }
.dep-cat .sub a { padding: 7px 12px; border-radius: var(--raio-p); font-size: 14px; color: var(--texto-2); }
.dep-cat .sub a:hover { background: var(--hover); color: var(--azul); }
.dep-cat .sub a.ver-tudo { color: var(--azul); font-weight: 700; }

.chip { padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.chip.roxo { background: #e9dcff; color: #4c1d95; }
.chip.escuro { background: #1e3a5f; color: #fff; }
.chip:hover { filter: brightness(1.15); }
.atalho { padding: 9px 13px; font-weight: 600; font-size: 14px; white-space: nowrap; border-radius: 999px; }
.atalho:hover { color: var(--azul); background: var(--hover); }

.montar { margin-left: auto; flex: none; display: flex; align-items: center; background: var(--montar-fundo); color: var(--montar-texto); border-radius: 999px; padding-left: 18px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.montar b { color: #1868ad; } /* a pílula é clara nos 2 temas: o azul escuro lê bem em cima dela */
.montar .seta-azul { margin-left: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.montar:hover .seta-azul { background: var(--azul-forte); }

/* início: frase à esquerda e o globo girando à direita (dá para arrastar o globo) */
.hero { position: relative; overflow: hidden; background: var(--fundo); min-height: clamp(520px, 78vh, 760px); display: flex; align-items: center; transition: background-color .25s; }
.hero-texto { position: relative; z-index: 2; width: min(50%, 700px); padding-left: clamp(16px, 6vw, 110px); }
.hero h1 { margin: 0; font-size: clamp(38px, 5vw, 78px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; animation: aparecer .9s ease both; }
.hero h1 .destaque { background: var(--destaque); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho-texto 6s linear infinite; }
@keyframes brilho-texto { to { background-position: 200% center; } }
.globo { position: absolute; z-index: 1; right: -9vw; top: 50%; width: min(1000px, 64vw); aspect-ratio: 1; transform: translateY(-50%); touch-action: pan-y; }
@keyframes aparecer { from { opacity: 0; transform: translateY(24px); } }

.caixa { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* vantagens */
.vantagens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 32px 0; }
.vantagem { display: flex; gap: 14px; align-items: center; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 16px 18px; transition: transform .25s ease, border-color .25s, box-shadow .25s; }
.vantagem:hover { transform: translateY(-4px); border-color: var(--azul); box-shadow: 0 12px 26px var(--sombra); }
.vantagem:hover svg { animation: pulinho .6s ease; }
@keyframes pulinho { 40% { transform: translateY(-6px) scale(1.12); } }
.vantagem svg { color: var(--azul); flex: none; }
.vantagem b { display: block; font-size: 15px; }
.vantagem span { font-size: 13px; color: var(--texto-2); }

/* 4 banners pequenos */

h2.titulo { text-align: center; font-size: 26px; margin: 24px 0; text-transform: uppercase; }
h2.titulo::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin: 10px auto 0; background: var(--destaque); }
h2.titulo.normal { text-transform: none; }
.subtitulo { text-align: center; color: var(--azul); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: -6px 0 24px; }

/* categorias redondas */
/* círculos grandes: 4 por fileira no computador (2 fileiras) */
.categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; padding-bottom: 48px; }
.categoria { text-align: center; font-size: 17px; font-weight: 600; transition: color .25s; }
.categoria .bola { width: min(100%, 240px); margin-inline: auto; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1e6fb5, #0b2c4d 70%); overflow: hidden; margin-bottom: 10px; display: grid; place-items: center; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; }
.categoria:hover { color: var(--azul); }
.categoria:hover .bola { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 0 3px var(--azul), 0 14px 30px var(--sombra-azul); }
.categoria img { width: 100%; height: 100%; object-fit: cover; }

/* produtos */
.fileira-box { position: relative; padding-bottom: 32px; }
.fileira { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 8px 28px; margin: -12px -8px -20px; scroll-padding: 0 8px; } /* espaço extra para o produto subir sem ser cortado */
.fileira::-webkit-scrollbar { display: none; }
.seta { position: absolute; top: 40%; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borda-2); background: var(--menu); color: var(--texto); font-size: 20px; cursor: pointer; z-index: 2; }
.seta.esq { left: -8px; } .seta.dir { right: -8px; }
.seta:hover { background: var(--azul); color: var(--no-azul); }
.produto { flex: 0 0 calc((100% - 64px) / 5); scroll-snap-align: start; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 14px; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, opacity .3s; }
/* produto com o mouse em cima: sobe, cresce um pouco e brilha em azul; os outros ficam um pouco apagados */
.produto:hover { transform: translateY(-8px) scale(1.03); border-color: var(--azul); box-shadow: 0 18px 36px var(--sombra), 0 0 26px var(--sombra-azul); z-index: 1; }
.produto .foto { position: relative; background: #fff; border-radius: var(--raio); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.produto .foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease; }
.produto:hover .foto img { transform: scale(1.08); }
/* faixa de brilho que passa por cima da foto */
.produto .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); translate: -120% 0; pointer-events: none; }
.produto:hover .foto::after { translate: 120% 0; transition: translate .8s ease; }
.produto .selos { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.produto .selo { background: var(--azul); color: var(--no-azul); font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.produto .selo.novo { background: #22c55e; color: #04121f; }
/* nome do produto: até 3 linhas inteiras, com "..." no fim se não couber */
.produto h3 { font-size: 13px; font-weight: 600; line-height: 1.35; margin: 12px 0 8px; height: 4.05em; overflow: hidden; text-transform: uppercase;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.produto .de { font-size: 13px; color: var(--texto-3); }
.produto .pix { font-size: 20px; font-weight: 800; color: var(--azul); }
.produto .pix small { display: block; font-size: 11px; font-weight: 500; color: var(--texto-2); }
.produto .btns { margin-top: auto; padding-top: 12px; display: grid; gap: 8px; }
.btn { display: block; text-align: center; padding: 11px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; text-transform: uppercase; transition: background-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.azul { background: var(--azul); color: var(--no-azul); }
.btn.azul:hover { background: var(--azul-forte); box-shadow: 0 6px 16px var(--sombra-azul); }
.btn.zap { background: #15803d; color: #fff; } /* verde mais escuro: o texto branco fica fácil de ler */
.btn.zap:hover { background: #166534; }

/* 2 banners lado a lado */
.duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0 40px; }
.duplo a { display: block; border-radius: var(--raio-g); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.duplo a:hover { transform: translateY(-5px); box-shadow: 0 16px 32px var(--sombra), 0 0 22px var(--sombra-azul); }
.duplo img { width: 100%; height: auto; border-radius: var(--raio-g); display: block; }

/* marcas: faixa que passa sozinha (as logos são repetidas 2x para o loop não dar salto) */
.marcas { overflow: hidden; padding-bottom: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marcas-trilho { display: flex; width: max-content; animation: passar 18s linear infinite; }
.marca { flex: none; width: 260px; height: 130px; margin-right: 40px; display: grid; place-items: center; padding: 16px; }
.marca img { max-width: 100%; max-height: 80px; filter: var(--marca-filtro); transition: filter .2s; }
.marca:hover img { filter: none; }
@keyframes passar { to { transform: translateX(-50%); } }

/* redes sociais: cartões em pé com a capa dos vídeos do Instagram (clicou, o vídeo abre numa janela) */
.insta p { text-align: center; color: var(--texto-2); margin: -6px 0 24px; }
.videos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding-bottom: 40px; }
.video { display: block; width: 100%; padding: 0; font: inherit; color: inherit; text-align: center; cursor: pointer; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.video:hover { transform: translateY(-6px); border-color: var(--azul); box-shadow: 0 16px 32px var(--sombra), 0 0 22px var(--sombra-azul); }
.video-tela { position: relative; overflow: hidden; aspect-ratio: 3 / 4; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #1e4f80, #0b1a2b 75%); }
.video-tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.video-tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%); }
.video:hover .video-tela img { transform: scale(1.07); }
.video-nome { padding: 16px 10px; text-align: center; font-weight: 700; font-size: 15px; }

/* janela do vídeo: abre por cima da página, com o fundo escurecido */
.player { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.player:not([open]) { display: none; } /* navegador antigo sem <dialog>: não aparece um quadrado vazio */
.player::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(4px); }
.player[open] { animation: abre-player .35s cubic-bezier(.2,.7,.2,1); }
@keyframes abre-player { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.player iframe { display: block; width: min(400px, 92vw); height: min(740px, 86vh); border: 0; border-radius: var(--raio-g); background: #fff; }
.player-fechar { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--azul); color: var(--no-azul); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: transform .2s; }
.player-fechar:hover { transform: scale(1.1) rotate(90deg); }

/* rodapé: faixas "TN4" deslizando atrás (igual ao fundo da Respawn), com o conteúdo por cima */
.rodape { position: relative; overflow: hidden; perspective: 900px; border-top: 3px solid var(--rodape-borda); border-radius: var(--raio-gg) var(--raio-gg) 0 0; background: var(--rodape-fundo); padding: 48px 0 24px; font-size: 14px; color: var(--rodape-texto); }
.rodape > .caixa { position: relative; z-index: 2; }
/* "folha" inclinada: as faixas ficam deitadas, vistas de cima e de lado */
.folha { position: absolute; left: -60%; right: -60%; top: -250%; bottom: -250%; display: flex; flex-direction: column; justify-content: center; gap: 4px; transform: rotateX(58deg) rotateZ(-18deg); transform-origin: 50% 50%; pointer-events: none; }
.faixa { display: flex; width: max-content; white-space: nowrap; user-select: none; }
.faixa span { font-family: "Arial Black", "Segoe UI", system-ui, sans-serif; font-weight: 900; font-size: 40px; line-height: 1.05; letter-spacing: .02em; white-space: pre; word-spacing: 26px; text-transform: uppercase; }
.folha.parada .faixa { animation-play-state: paused; } /* rodapé fora da tela: as faixas param (economiza o computador) */
.faixa.cheia span { color: var(--faixa-cheia); }
.faixa.contorno span { color: transparent; -webkit-text-stroke: 1.2px var(--faixa-contorno); }
.faixa.fraca span { color: var(--faixa-fraca); }
/* esteira infinita: cada faixa tem a palavra repetida; desliza metade e recomeça sem emenda */
.faixa.esq { animation: desliza-esq 110s linear infinite; }
.faixa.dir { animation: desliza-dir 125s linear infinite; }
.faixa.rapida { animation-duration: 85s; }
.faixa:nth-child(3n) { animation-duration: 140s; }
@keyframes desliza-esq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes desliza-dir { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.rodape .colunas { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 32px; }
.rodape h5 { color: var(--azul); font-size: 13px; text-transform: uppercase; margin: 0 0 14px; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.rodape a:hover { color: var(--azul); }
/* botão do Instagram, com as cores do Instagram */
.rodape .botao-insta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); color: #fff; font-size: 14px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.rodape .botao-insta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(220,39,67,.4); }
.rodape .contato { display: grid; gap: 14px; }
.rodape .contato b { display: block; color: var(--texto); font-size: 16px; }
.rodape .fim { border-top: 1px solid var(--linha); margin-top: 32px; padding-top: 20px; text-align: center; color: var(--texto-4); font-size: 13px; }

/* assistente: botão redondo no canto (em cima do WhatsApp) e a janela de conversa */
.chat-botao { position: fixed; right: 20px; bottom: 92px; z-index: 46; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: var(--azul); color: var(--no-azul); display: grid; place-items: center; box-shadow: 0 8px 22px var(--sombra-azul), 0 4px 12px rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .2s; }
.chat-botao:hover { transform: scale(1.08); background: var(--azul-forte); }
.chat-botao svg { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.chat-icone-fechar, .chat-botao.aberto .chat-icone-abrir { opacity: 0; transform: rotate(-90deg) scale(.5); }
.chat-botao.aberto .chat-icone-fechar { opacity: 1; transform: none; }
.chat-dica { position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%; white-space: nowrap; background: var(--menu); color: var(--texto); border: 1px solid var(--borda-menu); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 20px var(--sombra); opacity: 0; scale: .9; pointer-events: none; transition: opacity .25s, scale .25s; }
.chat-botao:hover .chat-dica, .chat-botao.chamando .chat-dica { opacity: 1; scale: 1; }
.chat-botao.aberto .chat-dica { opacity: 0; }
.chat-botao.chamando { animation: chamar 1s ease 2; }
@keyframes chamar { 30% { transform: translateY(-8px); } 60% { transform: none; } 80% { transform: translateY(-3px); } }
.chat { position: fixed; right: 20px; bottom: 162px; z-index: 46; width: 370px; height: min(560px, calc(100vh - 190px)); display: flex; flex-direction: column; background: var(--menu); color: var(--texto); border: 1px solid var(--borda-menu); border-radius: var(--raio-gg); box-shadow: 0 24px 60px var(--sombra), 0 0 30px var(--sombra-azul); overflow: hidden; transform-origin: bottom right; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.94); transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s .3s; }
.chat.aberto { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.chat-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #1f6fb5, #0b2c4d); color: #fff; flex: none; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); display: grid; place-items: center; flex: none; }
.chat-nome { flex: 1; display: grid; gap: 2px; }
.chat-nome small { font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 6px; }
.chat-nome i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); }
.chat-fechar { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .85; }
.chat-fechar:hover { opacity: 1; }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; animation: msg-entra .3s cubic-bezier(.2,.7,.2,1); }
.msg p { margin: 0; }
.msg p + p { margin-top: 6px; }
.msg.bot { align-self: flex-start; background: var(--hover); border-bottom-left-radius: 4px; }
.msg.eu { align-self: flex-end; background: var(--azul); color: var(--no-azul); border-bottom-right-radius: 4px; }
@keyframes msg-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.digitando { display: flex; gap: 4px; padding: 14px; }
.digitando span { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); animation: pontinho 1s infinite ease-in-out; }
.digitando span:nth-child(2) { animation-delay: .15s; }
.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes pontinho { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-link { display: inline-block; padding: 7px 12px; border-radius: 20px; background: var(--azul); color: var(--no-azul); font-size: 13px; font-weight: 700; transition: transform .2s, background-color .2s; }
.chat-link:hover { background: var(--azul-forte); transform: translateY(-1px); }
.chat-produto { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 8px; border-radius: var(--raio); background: var(--menu); border: 1px solid var(--borda); }
.chat-produto img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 10px; flex: none; }
.chat-produto div { display: grid; gap: 3px; min-width: 0; }
.chat-produto b { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-produto span { font-size: 13px; font-weight: 800; color: var(--azul); }
.chat-produto .chat-link { justify-self: start; padding: 5px 10px; font-size: 12px; }
.chat-sugestoes { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chat-sugestoes::-webkit-scrollbar { display: none; }
/* quem usa mouse vê uma barrinha fina para arrastar as sugestões e os atalhos de cima */
@media (hover: hover) and (pointer: fine) { .chat-sugestoes, .atalhos { scrollbar-width: thin; } }
.chat-sugestao { flex: none; padding: 7px 12px; border-radius: 20px; border: 1px solid var(--borda-2); background: none; color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.chat-sugestao:hover { border-color: var(--azul); color: var(--azul); background: var(--hover); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--borda-menu); flex: none; }
.chat-form input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--borda-2); background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px; outline: 0; }
.chat-form input:focus { border-color: var(--azul); }
.chat-form button { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--azul); color: var(--no-azul); cursor: pointer; display: grid; place-items: center; transition: transform .2s; }
.chat-form button:hover { transform: scale(1.08); }

/* botão do WhatsApp */
.zap-flutuante { position: fixed; right: 20px; bottom: 20px; width: 58px; height: 58px; border-radius: 50%; background: #22c55e; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.5); z-index: 20; transition: transform .2s; }
.zap-flutuante:hover { transform: scale(1.08); }
/* onda que sai do botão do WhatsApp de tempos em tempos */
.zap-flutuante::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; z-index: -1; animation: onda-zap 2.4s ease-out 3; }
@keyframes onda-zap { from { transform: scale(1); opacity: .5; } to { transform: scale(1.8); opacity: 0; } }

/* conta na barra de cima: depois de entrar, "Olá, nome" no lugar de Entrar e Cadastrar */
.ola { display: flex; align-items: center; gap: 10px; height: 42px; max-width: 230px; padding: 0 18px 0 6px; border-radius: 999px; border: 1.5px solid var(--borda-2); font-size: 14px; font-weight: 700; white-space: nowrap; transition: border-color .2s, color .2s, transform .2s; }
.ola:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }
.ola span { overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: var(--no-azul); font-size: 14px; font-weight: 800; text-transform: uppercase; }
.sair { background: none; border: 0; padding: 8px 6px; font: inherit; font-size: 14px; font-weight: 700; color: var(--texto-2); cursor: pointer; }
.sair:hover { color: var(--azul); }
.gaveta button.item { width: 100%; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; }
[data-conta][hidden] { display: none !important; } /* Entrar/Cadastrar ou Olá/Sair: só um par aparece */

/* ---------- páginas de categoria e de busca ---------- */
.pagina { padding-top: 24px; padding-bottom: 64px; }
.cat-faixa { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: 28px clamp(20px, 4vw, 44px); border: 1px solid var(--borda); border-radius: var(--raio-gg); background: radial-gradient(circle at 88% 50%, var(--sombra-azul), transparent 58%), var(--cartao); animation: aparecer .7s cubic-bezier(.2,.7,.2,1) both; }
.cat-faixa > div:first-child { min-width: 0; }
.cat-faixa h1:focus { outline: none; } /* o título recebe o foco depois do "Ver todos na loja" do chat, só para o leitor de tela */
.cat-faixa h1 { margin: 8px 0 6px; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.cat-faixa p { margin: 0; color: var(--texto-2); font-size: 15px; }
.cat-faixa p b { color: var(--azul); }
.cat-bola { flex: none; width: clamp(96px, 13vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1e6fb5, #0b2c4d 70%); box-shadow: 0 0 0 6px var(--cartao), 0 0 0 7px var(--borda-2), 0 18px 40px var(--sombra-azul); animation: flutuar 5s ease-in-out infinite; }
.cat-bola img { width: 100%; height: 100%; object-fit: cover; }
.cat-bola svg { color: #fff; }
@keyframes flutuar { 50% { transform: translateY(-8px); } }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-3); }
.trilha a:hover { color: var(--azul); }
.trilha [aria-current] { color: var(--texto); font-weight: 600; }
.cat-barra { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.subs { position: relative; flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 36px 4px 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); } /* a ponta some aos poucos: mostra que dá para arrastar */
.subs::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .subs { scrollbar-width: thin; } }
.sub-chip { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--borda-2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .2s, color .2s, background-color .2s, transform .2s; }
.sub-chip small { font-size: 12px; color: var(--texto-3); }
.sub-chip:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }
.sub-chip[aria-current="page"] { background: var(--azul); border-color: var(--azul); color: var(--no-azul); }
.sub-chip[aria-current="page"] small { color: inherit; opacity: .75; }
.ordem { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; color: var(--texto-2); }
.ordem select { font: inherit; font-size: 14px; font-weight: 600; color: var(--texto); background: var(--cartao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid var(--borda-2); border-radius: 999px; padding: 9px 38px 9px 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ordem select:hover, .ordem select:focus-visible { border-color: var(--azul); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.grade .produto { animation: surgir .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes surgir { from { opacity: 0; translate: 0 22px; } }
.mais-produtos { display: flex; justify-content: center; margin-top: 30px; }
.botao-grande { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 28px; border-radius: 999px; border: 1.5px solid var(--borda-2); background: none; color: var(--texto); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s, transform .2s, box-shadow .2s; }
.botao-grande:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); box-shadow: 0 10px 24px var(--sombra-azul); }
.botao-grande.cheio { background: var(--azul); border-color: var(--azul); color: var(--no-azul); }
.botao-grande.cheio:hover { background: var(--azul-forte); border-color: var(--azul-forte); color: var(--no-azul); }
.botao-grande.zap { background: #15803d; border-color: #15803d; color: #fff; }
.botao-grande.zap:hover { background: #166534; border-color: #166534; color: #fff; }
.vazio { text-align: center; padding: 44px 20px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-gg); }
.vazio .emoji { font-size: 44px; line-height: 1; }
.vazio h2 { margin: 14px 0 8px; font-size: 22px; }
.vazio p { color: var(--texto-2); margin: 0 auto 20px; max-width: 480px; line-height: 1.5; }
.vazio .acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.outras-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }

/* ---------- página de entrar e criar conta ---------- */
.topo-simples { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 40px); background: var(--fundo-topo); border-bottom: 1px solid var(--linha); }
.topo-simples .logo { width: auto; }
.topo-simples .icones { gap: 18px; }
.voltar-loja { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1.5px solid var(--borda-2); border-radius: 999px; font-size: 14px; font-weight: 700; transition: border-color .2s, color .2s, transform .2s; }
.voltar-loja:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }
.acesso { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(0, 470px); align-items: center; gap: 32px; min-height: calc(100vh - 77px); min-height: calc(100dvh - 77px); padding: 40px clamp(16px, 6vw, 110px); }
.acesso-lado { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* o globo fica embaixo da frase (nunca atrás dela, para o texto ler bem nos 2 temas) */
.acesso .globo { position: relative; right: auto; top: auto; transform: none; width: min(560px, 100%); margin: 0 0 -30px -4%; }
.acesso-texto { position: relative; z-index: 2; }
.acesso-texto h1 { margin: 0 0 16px; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; animation: aparecer .9s ease both; }
.acesso-texto h1 .destaque { background: var(--destaque); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho-texto 6s linear infinite; }
.acesso-texto p { max-width: 430px; margin: 0; color: var(--texto-2); font-size: 17px; line-height: 1.5; text-wrap: pretty; animation: aparecer .9s .1s ease both; }
.cartao-acesso { position: relative; z-index: 2; padding: 28px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-gg); box-shadow: 0 30px 70px var(--sombra), 0 0 44px var(--sombra-azul); animation: aparecer .7s .1s cubic-bezier(.2,.7,.2,1) both; }
.abas { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 24px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; }
.aba { position: relative; z-index: 1; padding: 11px; border: 0; border-radius: 999px; background: none; color: var(--texto-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: color .25s; }
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--no-azul); }
.aba:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.abas-marcador { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--azul); box-shadow: 0 6px 18px var(--sombra-azul); transition: transform .4s cubic-bezier(.34,1.3,.64,1); }
.abas[data-aba="cadastrar"] .abas-marcador { transform: translateX(100%); }
.abas[hidden], .painel[hidden], .aviso[hidden] { display: none; }
.painel { animation: painel-entra .35s cubic-bezier(.2,.7,.2,1); }
@keyframes painel-entra { from { opacity: 0; translate: 0 10px; } }
.painel h2 { margin: 0 0 6px; font-size: 22px; }
.painel h2:focus { outline: none; } /* o título recebe o foco só para o leitor de tela anunciar o painel */
.painel .explica { margin: 0 0 20px; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.campo { display: grid; gap: 7px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 700; }
.campo input { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid var(--borda-2); border-radius: var(--raio); background: var(--fundo); color: var(--texto); font: inherit; font-size: 16px; outline: 0; transition: border-color .2s, box-shadow .2s; }
.campo input::placeholder { color: var(--texto-4); }
.campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 4px var(--sombra-azul); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.erro-campo { min-height: 0; color: var(--erro); font-size: 13px; font-weight: 600; }
.erro-campo:empty { display: none; }
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: 54px; }
.olho { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--texto-3); cursor: pointer; display: grid; place-items: center; transition: color .2s, background-color .2s; }
.olho:hover { color: var(--azul); background: var(--hover); }
.olho svg { grid-area: 1 / 1; }
.olho .fechado, .olho[aria-pressed="true"] .aberto { display: none; }
.olho[aria-pressed="true"] .fechado { display: block; }
.forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 3px; }
.forca i { height: 5px; border-radius: 999px; background: var(--borda-2); transition: background-color .3s; }
.forca[data-nivel="1"] i:nth-child(1) { background: #ef4444; }
.forca[data-nivel="2"] i:nth-child(-n+2) { background: #f59e0b; }
.forca[data-nivel="3"] i:nth-child(-n+3) { background: #22c55e; }
.forca[data-nivel="4"] i { background: #16a34a; }
.forca-texto { font-size: 12px; color: var(--texto-3); }
.esqueci { display: flex; justify-content: flex-end; margin: -4px 0 20px; }
.link-azul { padding: 0; border: 0; background: none; color: var(--azul); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.link-azul:hover { text-decoration: underline; }
.aceite { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 20px; color: var(--texto-2); font-size: 13px; line-height: 1.45; cursor: pointer; }
.aceite input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--azul); cursor: pointer; }
.aceite a { color: var(--azul); font-weight: 700; }
.aceite a:hover { text-decoration: underline; }
.botao-enviar { width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; background: var(--azul); color: var(--no-azul); font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, transform .2s, box-shadow .2s, opacity .2s; }
.botao-enviar:hover { background: var(--azul-forte); transform: translateY(-2px); box-shadow: 0 10px 24px var(--sombra-azul); }
.botao-enviar:disabled { opacity: .7; cursor: wait; transform: none; box-shadow: none; }
.botao-enviar .girando { width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.botao-enviar.claro { background: none; color: var(--texto); border: 1.5px solid var(--borda-2); }
.botao-enviar.claro:hover { border-color: var(--azul); color: var(--azul); box-shadow: none; }
.troca-aba { margin: 18px 0 0; text-align: center; color: var(--texto-2); font-size: 14px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--raio); font-size: 14px; line-height: 1.45; animation: painel-entra .3s ease; }
.aviso.erro { background: rgba(239,68,68,.1); color: var(--erro); border: 1px solid rgba(239,68,68,.35); }
.aviso.ok { background: rgba(34,197,94,.1); color: var(--ok); border: 1px solid rgba(34,197,94,.35); }
.aviso.info { background: var(--hover); color: var(--texto); border: 1px solid var(--borda-2); }
.aviso button.link-azul { margin-top: 4px; display: block; text-align: left; }
.conectado { text-align: center; }
.conectado .avatar { width: 84px; height: 84px; margin: 4px auto 16px; font-size: 34px; box-shadow: 0 0 0 6px var(--cartao), 0 0 0 7px var(--borda-2), 0 14px 34px var(--sombra-azul); }
.conectado h2 { overflow-wrap: anywhere; }
.conectado .explica { overflow-wrap: anywhere; }
.conectado .botoes { display: grid; gap: 10px; }
.seguro { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--texto-3); font-size: 12px; }
.seguro svg { color: var(--azul); flex: none; }
.rodape-simples { padding: 22px 16px; border-top: 1px solid var(--linha); text-align: center; color: var(--texto-4); font-size: 13px; }
.rodape-simples a:hover { color: var(--azul); }
@media (max-width: 900px) {
  .acesso { grid-template-columns: minmax(0, 470px); justify-content: center; gap: 22px; min-height: 0; padding-top: 28px; padding-bottom: 48px; }
  .acesso .globo { display: none; }
  .acesso-texto { text-align: center; }
  .acesso-texto h1 { font-size: clamp(30px, 8vw, 40px); margin-bottom: 10px; }
  .acesso-texto p { margin: 0 auto; font-size: 15px; }
}
@media (max-width: 700px) {
  .cat-faixa { gap: 16px; padding: 22px 20px; }
  .cat-bola { width: 84px; box-shadow: 0 0 0 4px var(--cartao), 0 0 0 5px var(--borda-2), 0 12px 28px var(--sombra-azul); }
  .cat-barra { flex-direction: column; align-items: stretch; gap: 12px; }
  .ordem { margin-left: 0; justify-content: space-between; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .cat-faixa h1 { font-size: 26px; } /* "Departamento" inteiro cabe ao lado da bolinha */
  .cat-bola { width: 72px; }
  .cartao-acesso { padding: 22px 18px; }
  .voltar-loja span { display: none; }
  .voltar-loja { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-faixa, .cat-bola, .grade .produto, .acesso-texto h1, .acesso-texto h1 .destaque, .acesso-texto p, .cartao-acesso, .painel, .aviso { animation: none; }
  .abas-marcador { transition: none; }
}

/* animação ao rolar: cada parte sobe e aparece quando chega na tela (as listas, uma peça de cada vez).
   Só vale com a classe "anima" (colocada no começo da página quando o navegador aceita animação). */
.anima .revelar { opacity: 0; translate: 0 32px; transition: opacity .8s ease, translate .8s cubic-bezier(.2,.7,.2,1); }
.anima .revelar.visivel { opacity: 1; translate: none; }
.anima .cascata > * { opacity: 0; translate: 0 26px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.anima .cascata.visivel > * { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  .marcas-trilho, .faixa, .hero h1, .hero h1 .destaque, .tema svg, .vantagem:hover svg, .zap-flutuante::before, .msg, .digitando span, .chat-botao.chamando { animation: none; }
  .produto:hover .foto::after { transition: none; }
}
@media (max-width: 1400px) { .montar { display: none; } }
@media (max-width: 1100px) {
  .produto { flex-basis: calc((100% - 32px) / 3); }
  .categorias { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .topo-linha1 { flex-wrap: wrap; gap: 12px; }
  .logo { width: auto; height: 36px; }
  .logo svg { height: 30px; }
  .busca { order: 3; flex: 1 1 100%; height: 44px; padding-left: 14px; }
  .conta { display: none; } /* no celular, Entrar e Cadastrar ficam dentro das 3 barrinhas */
  .topo.escondido { transform: translateY(-100%); } /* a barra é alta no celular: some ao descer e volta ao subir */
  .icones { gap: 12px; margin-left: auto; }
  .icones .gaveta .so-celular { display: flex; }
  .topo-linha2, .atalhos { gap: 8px; }
  .dep > summary, .chip, .atalho { padding: 8px 10px; font-size: 13px; }
  /* no celular: frase em cima e o globo embaixo, cortado no pé */
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 36px; }
  .hero-texto { width: auto; padding: 0 16px; text-align: center; }
  .globo { position: relative; right: auto; top: auto; transform: none; width: 128vw; margin: -4vw 0 -42vw -14vw; }
  .vantagens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duplo { grid-template-columns: 1fr; }
  .videos { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .rodape .colunas { grid-template-columns: 1fr 1fr; }
  .dep-lista { max-height: calc(100dvh - 185px); } /* a barra de cima é mais alta no celular */
}
/* telas estreitas: as setinhas das fileiras ficam na altura da foto (não tampam o nome do produto) */
@media (max-width: 700px) { .seta { top: 20%; } }
/* celular (em pé ou deitado): o chat ocupa a tela toda */
@media (max-width: 560px), (max-height: 500px) {
  .chat { right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; }
}
@media (max-width: 560px) {
  .produto { flex-basis: calc((100% - 16px) / 2); }
  .rodape .colunas { grid-template-columns: 1fr; }
  /* celular pequeno: ícone das vantagens em cima do texto e categorias em 3 colunas, para nada vazar para o lado */
  .vantagens { gap: 10px; }
  .vantagem { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .categoria { font-size: 15px; overflow-wrap: anywhere; }
}

/* ---------- avisos flutuantes (TN4.avisar), faixa do modo demo, botão Comprar e Esgotado ---------- */
#avisos-flutuantes { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.aviso-flutuante { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-radius: 999px; background: var(--menu); color: var(--texto); border: 1px solid var(--borda-menu); box-shadow: 0 10px 30px var(--sombra); font-size: 14px; font-weight: 600; animation: aviso-sobe .3s ease; }
.aviso-flutuante.ok { border-color: rgba(34,197,94,.55); }
.aviso-flutuante.erro { border-color: rgba(239,68,68,.55); color: var(--erro); }
.aviso-flutuante a { color: var(--azul); font-weight: 800; white-space: nowrap; }
.aviso-flutuante.saindo { opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
@keyframes aviso-sobe { from { opacity: 0; transform: translateY(14px); } }
.faixa-demo { background: #f59e0b; color: #111; text-align: center; font-size: 14px; font-weight: 700; padding: 8px 16px; }
.faixa-demo a { color: #111; text-decoration: underline; margin-left: 8px; }
button.btn { font: inherit; border: 0; cursor: pointer; width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.selo.esgotado { background: #6b7280; color: #fff; }
.produto.esgotado .foto img { filter: grayscale(1); opacity: .7; }
.carrinho.pulo { animation: pulo .5s ease; }
@keyframes pulo { 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }

/* ---------- páginas institucionais (institucional.html) ---------- */
.texto-institucional { max-width: 860px; margin: 0 auto; padding: 28px 16px 60px; }
.texto-institucional h1 { font-size: clamp(26px, 4vw, 36px); margin: 8px 0 18px; }
.texto-institucional .paginas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.texto-institucional .paginas a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borda-2); font-size: 13px; font-weight: 600; color: var(--texto-2); transition: border-color .2s, color .2s; }
.texto-institucional .paginas a:hover { border-color: var(--azul); color: var(--azul); }
.texto-institucional .paginas a[aria-current] { background: var(--azul); color: var(--no-azul); border-color: var(--azul); }
.texto-institucional article { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: clamp(18px, 3vw, 32px); line-height: 1.65; color: var(--texto-2); }
.texto-institucional article h2 { color: var(--texto); font-size: 20px; margin: 24px 0 8px; }
.texto-institucional article h2:first-child { margin-top: 0; }
.texto-institucional article p, .texto-institucional article ul, .texto-institucional article ol { margin: 0 0 12px; }
.texto-institucional article ul, .texto-institucional article ol { padding-left: 22px; }
.texto-institucional article strong { color: var(--texto); }
.texto-institucional article a { color: var(--azul); font-weight: 700; }
.texto-institucional .contato-rapido { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
/* no celular, o aviso fica fora do caminho dos botões flutuantes (WhatsApp e chat) */
@media (max-width: 560px) { #avisos-flutuantes { left: 16px; translate: none; width: calc(100% - 110px); } }