:root {
  --navy: #091a38;
  --navy-2: #12306a;
  --royal: #1e4fd8;
  --gold: #f0bc3e;
  --gold-d: #d9a228;
  --ink: #0f1b33;
  --text: #2a3550;
  --muted: #5a6580; /* 5,4:1 sobre --bg e 5,8:1 sobre branco (AA) */
  --line: #e4e8f0;
  --bg: #f5f7fb;
  --card: #ffffff;
  --wa: #25d366;
  --wa-d: #1eb457;
  --danger: #c2410c;
  --r: 18px;
  --shadow: 0 10px 30px -12px rgba(9, 26, 56, .25);
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
#app { flex: 1 0 auto; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--head); color: var(--ink); line-height: 1.05; margin: 0 0 .4em; letter-spacing: .2px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* só para leitores de tela */
#app:focus { outline: none; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 26px; font-weight: 700; font-size: 16px; transition: transform .15s, background .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn--wa { background: var(--wa); color: #fff; box-shadow: 0 8px 22px -8px rgba(37, 211, 102, .6); }
.btn--wa:hover { background: var(--wa-d); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-d); }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px #fff; }
.btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--full { width: 100%; }
.btn svg { flex: none; width: 20px; height: 20px; }

/* ---------- topo: no modelo do site da HOMME ----------
   Três zonas: menu à esquerda, nome da loja ao centro, atalhos à direita. O botão "Menu" abre um painel claro que
   desce do topo, em colunas (navegação, departamentos, atendimento). No celular, uma barra de atalhos fica presa embaixo.
   Nas páginas que começam em bloco azul (início, catálogo, como funciona, dúvidas) o topo fica transparente, com texto
   claro; ao rolar, na página de produto ou com o painel aberto, vira vidro claro com texto azul-marinho. */
:root { --topo-h: 76px; }

.topo { --topo-txt: var(--navy); --topo-txt-2: rgba(9, 26, 56, .68); --topo-wa: #128c4a; --foco: var(--royal); /* #128c4a: 4,3:1 no vidro claro */
  position: sticky; top: 0; z-index: 70; color: var(--topo-txt);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(9, 26, 56, .07); box-shadow: 0 10px 28px -22px rgba(9, 26, 56, .5);
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
/* página que começa em bloco azul: topo transparente até rolar (navegador sem :has fica com ele claro, que também funciona) */
html:not(.menu-aberto) .topo:has(+ #app > :is(.hc, .cat-topo):first-child):not(.topo--rolado) {
  --topo-txt: #fff; --topo-txt-2: rgba(255, 255, 255, .74); --topo-wa: var(--wa); --foco: var(--gold);
  background: transparent; border-bottom-color: rgba(255, 255, 255, .1); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* o bloco azul do topo sobe por baixo do cabeçalho; o padding devolve o espaço, então nada fica encoberto */
#app > .hc:first-child { margin-top: calc(-1 * var(--topo-h)); padding-top: calc(var(--topo-h) + 28px); }
#app > .cat-topo:first-child { margin-top: calc(-1 * var(--topo-h)); padding-top: calc(var(--topo-h) + 40px); }

.topo__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(var(--topo-h) - 1px); } /* -1px: a borda de baixo do .topo completa --topo-h */
.topo__esq { justify-self: start; display: flex; align-items: center; gap: 30px; }
.topo__dir { justify-self: end; display: flex; align-items: center; gap: 26px; }

/* nome da loja ao centro, em caixa alta espaçada, com o losango dourado (o rodapé continua com .marca--claro) */
.marca { font-family: var(--head); font-size: 26px; font-weight: 700; letter-spacing: .3px; color: #fff; }
.marca--claro { color: #fff; }
.marca--claro::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--gold); margin-right: 10px; transform: translateY(-3px) rotate(45deg); }
.topo .marca { justify-self: center; display: inline-flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--topo-txt); transition: opacity .3s; }
.topo .marca::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.topo .marca span { margin-right: -.3em; } /* o espaçamento depois da última letra não desloca o nome do centro */
.topo .marca:hover { opacity: .7; }

/* itens de texto: versalete miúdo com filete que cresce no hover (fica no link da página atual) */
.topo__item { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: var(--topo-txt-2); transition: color .3s; }
.topo__item:hover, .topo__item[aria-expanded="true"], .topo__link[aria-current="page"] { color: var(--topo-txt); }
.topo__item::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: currentColor; transition: right .4s cubic-bezier(.2, .7, .3, 1); }
.topo__item:hover::after, .topo__link[aria-current="page"]::after { right: 0; }
.topo__link[aria-current="page"]::after { background: var(--gold); height: 2px; }

/* traços do menu: viram X quando o painel abre */
.tracos { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.tracos i { display: block; height: 0; border-top: 1.5px solid currentColor; transition: transform .4s cubic-bezier(.2, .7, .3, 1); } /* borda, não fundo: aparece no alto contraste do Windows */
.menu-btn[aria-expanded="true"] .tracos i:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .tracos i:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* ícones da direita, sem rótulo: busca e WhatsApp (com a logo, na cor do WhatsApp) */
.topo__ic { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -8px; border-radius: 50%; color: var(--topo-txt-2); transition: color .3s, transform .3s; }
.topo__ic:hover { color: var(--topo-txt); transform: translateY(-1px); }
.topo__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.topo__ic--wa, .topo__ic--wa:hover { color: var(--topo-wa); }
.topo__ic--wa svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }

/* contorno de foco: azul sobre fundo claro, dourado sobre azul (3:1 ou mais nos dois) */
.topo a:focus-visible, .topo button:focus-visible, .painel a:focus-visible, .barra-baixo a:focus-visible { outline: 2px solid var(--foco, var(--gold)); outline-offset: 4px; border-radius: 6px; }

/* ---- painel do menu: desce do topo, em colunas ---- */
.painel { --foco: var(--royal); position: fixed; left: 0; right: 0; top: var(--topo-h); z-index: 65; max-height: calc(100vh - var(--topo-h)); max-height: calc(100dvh - var(--topo-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: 46px 0 44px; color: var(--navy);
  background: rgba(255, 255, 255, .985); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(9, 26, 56, .06); box-shadow: 0 30px 60px -36px rgba(9, 26, 56, .6);
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; }
.painel.aberto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.painel__grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(30px, 4vw, 64px); }
.painel h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.painel h4::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--gold); }
/* navegação: links grandes em serifa (a mesma do título do topo), em itálico no hover */
.painel__nav a { display: flex; align-items: center; width: fit-content; padding: 5px 0; font-family: var(--serif); font-size: clamp(32px, 3.3vw, 46px); line-height: 1.1; color: var(--navy);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; }
.painel__nav a::before { content: ""; flex: none; width: 0; height: 2px; border-radius: 2px; background: var(--gold); transition: width .35s ease, margin .35s ease; }
.painel__nav a[aria-current="page"]::before { width: 22px; margin-right: 14px; }
.painel__nav:hover a { opacity: .38; }
.painel__nav a:hover { opacity: 1; transform: translateX(10px); font-style: italic; }
.painel__nav a:focus-visible { opacity: 1; transform: translateX(10px); font-style: italic; }
/* departamentos: lista simples com a quantidade de produtos */
.painel__lista a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 12px; margin-left: -12px; border-radius: 10px; font-size: 15.5px; font-weight: 500; color: var(--text); transition: color .3s, background-color .3s; }
.painel__lista a small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.painel__lista a:hover { color: var(--navy); background: rgba(30, 79, 216, .06); }
.painel__lista .painel__todos { justify-content: flex-start; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--royal); }
/* atendimento */
.painel__info p { margin: 0; font-size: 15px; line-height: 2; color: var(--text); }
.painel__cta { margin-top: 20px; }
.painel__nota { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.painel__fecha { margin-top: 44px; margin-bottom: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* painel aberto: trava a rolagem da página (o topo fica claro pela regra :not(.menu-aberto) acima) */
html.menu-aberto { overflow: hidden; scrollbar-gutter: stable; }

/* ---- barra de atalhos (celular): sempre à vista, no lugar do botão flutuante ---- */
.barra-baixo { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(9, 26, 56, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid rgba(255, 255, 255, .1);
  --foco: var(--gold); }
.barra-baixo__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.barra-baixo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 4px 11px; text-align: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .68); transition: color .25s; }
.barra-baixo a:hover, .barra-baixo a[aria-current="page"] { color: #fff; }
.barra-baixo a[aria-current="page"] svg { color: var(--gold); }
.barra-baixo svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.barra-baixo .zap { color: #fff; }
.barra-baixo .zap svg { fill: var(--wa); stroke: none; }

/* desktop estreito / tablet: saem os links de texto, como na HOMME */
@media (max-width: 1024px) {
  .topo__link { display: none; }
  .painel__grid { grid-template-columns: 1fr 1fr; }
  .painel__nav { grid-row: span 2; }
}

/* celular: menu à esquerda, nome ao centro, busca e WhatsApp à direita; painel em uma coluna */
@media (max-width: 720px) {
  :root { --topo-h: 62px; }
  #app > .hc:first-child { padding-top: calc(var(--topo-h) + 14px); }
  .topo__rot { display: none; }
  .topo__esq, .topo__dir { gap: 22px; }
  .menu-btn { padding: 18px 12px; margin-left: -12px; } /* área de toque ~44px */
  .menu-btn::after { display: none; }
  .topo .marca { gap: 9px; font-size: 17px; letter-spacing: .2em; }
  .topo .marca span { margin-right: -.2em; }
  .topo .marca::before { width: 7px; height: 7px; }
  .painel { padding: 28px 0 calc(32px + env(safe-area-inset-bottom)); }
  .painel__grid { grid-template-columns: 1fr; gap: 34px; }
  .painel__nav { grid-row: auto; }
  .painel__nav a { font-size: clamp(32px, 9.5vw, 40px); }
  .painel__cta { width: 100%; }
  .painel__fecha { display: none; }
  .barra-baixo { display: block; }
  body.tem-barra .barra-baixo { display: none; } /* página de produto: a barra "Quero este" ocupa a base */
}
@media (max-width: 359px) {
  .topo__dir { gap: 16px; }
  .topo .marca { gap: 7px; font-size: 14px; letter-spacing: .12em; }
  .topo .marca span { margin-right: -.12em; }
  .barra-baixo a { font-size: 9px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .topo, .topo__item, .topo__item::after, .tracos i, .topo__ic, .painel, .painel__nav a, .painel__nav a::before, .barra-baixo { transition: none !important; }
}

/* ---------- hero: carrossel em cartão (slides em CONFIG.carrossel) ---------- */
.hc { position: relative; overflow: hidden; color: #fbf3e6; padding: 28px 0 0;
  background: radial-gradient(1100px 520px at 50% -12%, #17327a 0%, transparent 62%), linear-gradient(180deg, #0b1631 0%, #0a1226 70%, #091022 100%); }
/* efeito de fundo: feixes de luz diagonais (como luz de janela) + granulação fina de foto + luzes suaves em movimento lento */
.hc__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hc__fx::before { content: ""; position: absolute; inset: -10% -5%;
  background:
    linear-gradient(112deg, transparent 18%, rgba(255, 236, 200, .09) 24%, transparent 31%),
    linear-gradient(112deg, transparent 38%, rgba(255, 236, 200, .065) 46%, transparent 55%),
    linear-gradient(112deg, transparent 63%, rgba(150, 185, 255, .075) 70%, transparent 78%);
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 60%, transparent 100%);
  animation: hcFeixes 18s ease-in-out infinite alternate; }
@keyframes hcFeixes { from { transform: translateX(-2%); opacity: .8; } to { transform: translateX(2%); opacity: 1; } }
/* ---- outras opções de fundo do topo (CONFIG.fundoTopo ou ?fundo= no endereço) ---- */
.hc--aurora .hc__fx::before { inset: -20%; filter: blur(50px); -webkit-mask-image: none; mask-image: none;
  background:
    radial-gradient(38% 30% at 18% 28%, rgba(46, 98, 255, .42), transparent 70%),
    radial-gradient(32% 26% at 78% 22%, rgba(0, 190, 210, .2), transparent 70%),
    radial-gradient(40% 30% at 62% 82%, rgba(240, 188, 62, .2), transparent 70%);
  animation: hcAurora 24s ease-in-out infinite alternate; }
@keyframes hcAurora { from { transform: none; } to { transform: translate(3%, -2%) rotate(6deg) scale(1.08); } }
.hc--pontos .hc__fx::before { inset: 0; filter: none; animation: none;
  background: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 50% 35%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 85% at 50% 35%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 85%); }
.hc--ondas .hc__fx::before { inset: 0; filter: none; animation: none;
  background:
    repeating-radial-gradient(circle at 8% 115%, transparent 0 34px, rgba(255, 255, 255, .055) 35px 36px),
    repeating-radial-gradient(circle at 96% -20%, transparent 0 44px, rgba(240, 188, 62, .05) 45px 46px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 60%, transparent 100%); }
.hc--arcos .hc__fx::before { inset: 0; filter: none; animation: none;
  background: repeating-radial-gradient(circle at 50% 42%, transparent 0 78px, rgba(255, 255, 255, .05) 79px 80px);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 75%); }
.hc--losangos .hc__fx::before { inset: 0; filter: none; animation: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 15 L29 22 L22 29 L15 22 Z' fill='none' stroke='white' stroke-opacity='.12' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 85% at 50% 35%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 85% at 50% 35%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 85%); }
.hc--liso .hc__fx::before, .hc--liso .hc__grao { display: none; }
/* ---- opções com efeitos mais marcantes ---- */
/* bokeh: luzes desfocadas flutuando, como luz de casa ao entardecer */
.hc--bokeh .hc__fx::before { inset: -8%; filter: blur(3px); -webkit-mask-image: none; mask-image: none;
  background:
    radial-gradient(circle at 8% 22%, rgba(255, 214, 140, .26) 0, transparent 3.2%),
    radial-gradient(circle at 15% 70%, rgba(120, 160, 255, .22) 0, transparent 4.5%),
    radial-gradient(circle at 4% 48%, rgba(255, 200, 120, .16) 0, transparent 2.2%),
    radial-gradient(circle at 22% 88%, rgba(255, 220, 160, .2) 0, transparent 2.6%),
    radial-gradient(circle at 86% 18%, rgba(255, 214, 140, .24) 0, transparent 3.6%),
    radial-gradient(circle at 93% 55%, rgba(120, 160, 255, .2) 0, transparent 4.8%),
    radial-gradient(circle at 80% 82%, rgba(255, 200, 120, .2) 0, transparent 2.8%),
    radial-gradient(circle at 97% 32%, rgba(255, 230, 180, .16) 0, transparent 2%),
    radial-gradient(circle at 50% 6%, rgba(255, 214, 140, .14) 0, transparent 2.4%),
    radial-gradient(circle at 62% 94%, rgba(120, 160, 255, .16) 0, transparent 3%);
  animation: hcBokeh 16s ease-in-out infinite alternate; }
@keyframes hcBokeh { from { transform: translateY(0) scale(1); opacity: .85; } to { transform: translateY(-3%) scale(1.04); opacity: 1; } }

/* varredura: um brilho dourado passa na diagonal de tempos em tempos */
.hc--varredura .hc__fx::before { inset: 0 -60%; filter: blur(8px); -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 226, 170, .1) 46%, rgba(255, 226, 170, .34) 50%, rgba(255, 226, 170, .1) 54%, transparent 60%);
  animation: hcVarre 10s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes hcVarre { 0% { transform: translateX(-40%); opacity: 0; } 8% { opacity: 1; } 70% { transform: translateX(40%); opacity: 1; } 78%, 100% { transform: translateX(40%); opacity: 0; } }

/* estrelas: pontinhos de luz piscando devagar */
.hc--estrelas .hc__fx::before, .hc--estrelas .hc__fx::after { inset: 0; width: auto; height: auto; left: 0; top: 0; transform: none; border-radius: 0; filter: none; -webkit-mask-image: none; mask-image: none;
  background-image:
    radial-gradient(1.8px 1.8px at 20px 30px, #fff, transparent),
    radial-gradient(1.3px 1.3px at 90px 110px, rgba(255, 255, 255, .85), transparent),
    radial-gradient(2px 2px at 160px 60px, #ffe2a8, transparent),
    radial-gradient(1.3px 1.3px at 230px 170px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.8px 1.8px at 50px 200px, #cfe0ff, transparent),
    radial-gradient(1.3px 1.3px at 270px 40px, rgba(255, 255, 255, .75), transparent),
    radial-gradient(1.5px 1.5px at 130px 220px, #fff, transparent);
  background-size: 300px 240px; }
.hc--estrelas .hc__fx::before { animation: hcPisca 4s ease-in-out infinite alternate; }
.hc--estrelas .hc__fx::after { background-size: 420px 330px; background-position: 140px 90px; opacity: .7; animation: hcPisca 6s ease-in-out 1.5s infinite alternate-reverse; }
@keyframes hcPisca { from { opacity: .35; } to { opacity: 1; } }

/* malha: degradê vivo azul / turquesa / dourado girando bem devagar */
.hc--malha .hc__fx::before { inset: -40%; filter: blur(90px); opacity: .55; -webkit-mask-image: none; mask-image: none;
  background: conic-gradient(from 0deg at 50% 50%, #1e4fd8, #0a8fa8, #0b1631 30%, #f0bc3e 48%, #0b1631 62%, #3d5bff 80%, #1e4fd8);
  animation: hcGira 40s linear infinite; }
@keyframes hcGira { to { transform: rotate(360deg); } }

/* ondas na base: camadas de onda em movimento, marcando a passagem para a próxima seção */
.hc--ondas-base .hc__fx::before, .hc--ondas-base .hc__fx::after { inset: auto 0 0 0; top: auto; left: 0; width: auto; height: 170px; transform: none; border-radius: 0; filter: none; -webkit-mask-image: none; mask-image: none; background-repeat: repeat-x; background-size: 1200px 170px; }
.hc--ondas-base .hc__fx::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='160' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C150 40 300 120 450 80 C600 40 750 120 900 80 C1050 40 1150 100 1200 80 L1200 160 L0 160 Z' fill='%231e4fd8' fill-opacity='.22'/%3E%3C/svg%3E"); animation: hcOnda 18s linear infinite; }
.hc--ondas-base .hc__fx::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='160' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0 100 C200 60 400 140 600 100 C800 60 1000 140 1200 100 L1200 160 L0 160 Z' fill='%23f0bc3e' fill-opacity='.09'/%3E%3C/svg%3E"); animation: hcOnda 26s linear infinite reverse; }
@keyframes hcOnda { to { background-position-x: 1200px; } }

/* holofote: um cone de luz vindo de cima, balançando de leve, com poeira (grão) */
.hc--holofote .hc__fx::before { inset: -10% -20% 0; filter: blur(18px); transform-origin: 50% 0;
  background:
    conic-gradient(from 150deg at 12% -8%, transparent 0deg, rgba(255, 236, 200, .14) 10deg, rgba(255, 236, 200, .3) 22deg, rgba(255, 236, 200, .12) 34deg, transparent 46deg),
    conic-gradient(from 164deg at 88% -8%, transparent 0deg, rgba(190, 210, 255, .12) 12deg, rgba(190, 210, 255, .26) 24deg, rgba(190, 210, 255, .12) 36deg, transparent 48deg);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  animation: hcBalanca 12s ease-in-out infinite alternate; }
.hc--holofote .hc__grao { opacity: .12; }
@keyframes hcBalanca { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

.hc__grao { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hc__fx::after { content: ""; position: absolute; left: 50%; top: 46%; width: min(1150px, 94%); height: 72%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(56, 108, 255, .3), transparent 70%); filter: blur(40px); }
.hc__luz { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; will-change: transform; }
.hc__luz--a { width: 520px; height: 460px; left: max(-180px, calc(50% - 900px)); top: 4%; background: radial-gradient(circle, rgba(46, 98, 255, .55), transparent 68%); animation: hcLuzA 22s ease-in-out infinite alternate; }
.hc__luz--b { width: 560px; height: 480px; right: max(-200px, calc(50% - 920px)); top: 34%; background: radial-gradient(circle, rgba(240, 188, 62, .28), transparent 68%); animation: hcLuzB 26s ease-in-out infinite alternate; }
@keyframes hcLuzA { to { transform: translate(90px, 90px) scale(1.15); } }
@keyframes hcLuzB { to { transform: translate(-90px, -110px) scale(1.12); } }
.hc .wrap { position: relative; }
.hc__card { position: relative; aspect-ratio: 32 / 15; max-height: calc(100svh - var(--topo-h) - 150px); min-height: 420px; width: 100%; border-radius: 22px; overflow: hidden; color: #fbf3e6; background: #111a2e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -34px rgba(0, 0, 0, .75); }
.hc__card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.hc__track { display: flex; height: 100%; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.hc__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.hc__slide picture, .hc__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hc__img { object-fit: cover; object-position: 50% 50%; transform: scale(1.06); transition: transform 7s ease-out; }
.hc__slide.ativo .hc__img { transform: scale(1); }
.hc__veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 24, .88) 0%, rgba(8, 12, 24, .62) 38%, rgba(8, 12, 24, .1) 68%, transparent 100%); }
.hc__slide--dir .hc__veu { background: linear-gradient(270deg, rgba(8, 12, 24, .88) 0%, rgba(8, 12, 24, .62) 38%, rgba(8, 12, 24, .1) 68%, transparent 100%); }
.hc__slide--dir .hc__txt { left: auto; right: clamp(76px, 7vw, 96px); }
.hc__slide--abertura .hc__veu { background:
  radial-gradient(ellipse 65% 55% at 50% 50%, rgba(20, 12, 6, .5), transparent 78%),
  linear-gradient(180deg, rgba(20, 12, 6, .25) 0%, rgba(20, 12, 6, .12) 40%, rgba(12, 10, 14, .62) 100%); }

/* texto dos slides */
.hc__txt { position: absolute; left: clamp(76px, 7vw, 96px); top: 50%; transform: translateY(-50%); width: min(470px, 46%); }
.hc__txt--abertura { left: 0; right: 0; width: auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hc__txt > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.hc__slide.ativo .hc__txt > * { opacity: 1; transform: none; }
.hc__slide.ativo .hc__txt > :nth-child(2) { transition-delay: .1s; }
.hc__slide.ativo .hc__txt > :nth-child(3) { transition-delay: .2s; }
.hc__slide.ativo .hc__txt > :nth-child(4) { transition-delay: .3s; }
.hc__slide.ativo .hc__txt > :nth-child(5) { transition-delay: .4s; }
.hc__eb { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); }
.hc__txt--abertura .hc__eb { color: #fbf3e6; opacity: .9; }
.hc h1, .hc h2 { font-family: var(--serif); font-weight: 400; color: #fbf3e6; letter-spacing: -.015em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hc h1 { font-size: clamp(48px, 7.2vw, 110px); line-height: .92; margin: 18px 0 20px; }
.hc h2 { font-size: clamp(34px, 4vw, 58px); line-height: .98; margin: 12px 0 18px; }
.hc__txt p { margin: 0; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5; color: rgba(251, 243, 230, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.hc__prods { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(251, 243, 230, .18); }
.hc__prods a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(251, 243, 230, .18); font-size: 15px; color: rgba(251, 243, 230, .9); transition: color .2s, padding .2s; }
.hc__prods a:hover { color: #fff; padding-left: 4px; }
.hc__preco { white-space: nowrap; font-size: 14px; color: rgba(251, 243, 230, .75); }
.hc__preco b { font-family: var(--head); font-size: 24px; font-weight: 700; color: var(--gold); letter-spacing: .2px; }
.hc__ctas { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.hc__ctas--linha { flex-direction: row; align-items: center; gap: 22px; margin-top: 22px; }
.hc__btn { min-width: 250px; padding: 14px 30px; border-radius: 999px; border: 1px solid rgba(251, 243, 230, .75); font-size: 13.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; text-align: center; transition: background .25s, color .25s, border-color .25s; }
.hc__ctas--linha .hc__btn { min-width: 0; }
.hc__btn:hover { background: #fbf3e6; color: var(--navy); border-color: #fbf3e6; }
.hc__link { font-size: 14px; font-weight: 500; opacity: .85; border-bottom: 1px solid transparent; transition: opacity .2s, border-color .2s; }
.hc__link:hover { opacity: 1; border-color: currentColor; }
.hc__nota { display: block; margin-top: 14px; font-size: 12px; color: rgba(251, 243, 230, .6); }

/* setas e bolinhas */
.hc__seta { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(10, 16, 30, .5); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, transform .2s; }
.hc__seta svg { width: 20px; height: 20px; }
.hc__seta:hover { background: rgba(10, 16, 30, .8); transform: scale(1.06); }
.hc__seta:focus-visible, .hc__dots button:focus-visible, .hc__pausa:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hc__seta--ant { left: 16px; }
.hc__seta--prox { right: 16px; }
.hc__seta--prox svg { transform: rotate(180deg); }
.hc__ctrl { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); }
.hc__dots { display: flex; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(10, 16, 30, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hc__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .5); background-clip: content-box; transition: width .35s, background .35s; }
.hc__dots button.ativo { width: 26px; background: var(--gold); background-clip: content-box; }
/* pausar/retomar a troca automática: pendurado à direita das bolinhas, que continuam centralizadas */
.hc__pausa { position: absolute; left: calc(100% + 8px); top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(10, 16, 30, .5); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s; }
.hc__pausa svg { width: 12px; height: 12px; }
.hc__pausa:hover { background: rgba(10, 16, 30, .8); }

/* faixa de pré-análise logo abaixo do carrossel */
.hc-faixa { position: relative; display: flex; align-items: center; gap: 20px; padding: 26px 4px 34px; margin-top: 10px; }
.hc-faixa__ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-family: var(--head); font-size: 26px; font-weight: 700; color: var(--navy); background: linear-gradient(145deg, #f6cf62, var(--gold)); box-shadow: 0 10px 24px -12px rgba(240, 188, 62, .8); }
.hc-faixa__txt { flex: 1; min-width: 0; }
.hc-faixa__eb { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); padding: 3px 10px; border: 1px solid rgba(240, 188, 62, .35); border-radius: 999px; }
.hc-faixa__txt b { display: block; margin-top: 6px; font-size: 19px; font-weight: 700; color: #fff; }
.hc-faixa__txt em { font-style: normal; color: var(--gold); }
.hc-faixa__txt p { margin: 2px 0 0; font-size: 14px; color: #9fb0d4; }
.so-mobile { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hc__track, .hc__img, .hc__txt > * { transition: none !important; }
  .hc__luz, .hc__fx::before, .hc__fx::after { animation: none !important; }
}
.selo { display: inline-flex; align-items: center; gap: 8px; background: rgba(240, 188, 62, .14); color: var(--gold); border: 1px solid rgba(240, 188, 62, .35); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }

/* ---------- seções ---------- */
.secao { padding: 72px 0; }
.secao--branca { background: #fff; }
.secao.secao--colada { padding-top: 0; } /* .secao.x vence o padding de .secao no celular */
#quem { scroll-margin-top: var(--topo-h); }
.secao__topo { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.secao__topo h2 { font-size: clamp(32px, 4vw, 46px); margin: 0; }
.secao__topo p { margin: 6px 0 0; color: var(--muted); }
.eyebrow { color: var(--royal); font-weight: 700; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; }

/* categorias: departamentos (fotos de ambiente) + grade uniforme de categorias */
.deptos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 44px; }
.depto { position: relative; height: 340px; border-radius: 20px; overflow: hidden; color: #fff; background: var(--navy); isolation: isolate; box-shadow: 0 18px 40px -26px rgba(9, 26, 56, .55); }
.depto__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.depto:hover .depto__foto { transform: scale(1.06); }
.depto__veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 18, 38, .05) 30%, rgba(9, 18, 38, .55) 62%, rgba(9, 18, 38, .92) 100%); transition: background .4s; }
.depto__link { position: absolute; inset: 0; z-index: 1; }
.depto__link:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 20px; }
.depto__txt { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; pointer-events: none; }
.depto__qtd { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.depto h3 { font-family: var(--serif); font-weight: 400; color: #fff; font-size: 38px; line-height: 1; margin: 6px 0 12px; }
.depto__subs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s ease; }
.depto__subs a { pointer-events: auto; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, color .2s; }
.depto__subs a:hover { background: #fbf3e6; color: var(--navy); }
.depto:hover .depto__subs, .depto:focus-within .depto__subs { max-height: 240px; opacity: 1; }
.depto__ir { position: absolute; top: 18px; right: 18px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; transition: background .25s, color .25s, transform .25s; }
.depto__ir svg { width: 18px; height: 18px; }
.depto:hover .depto__ir { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: rotate(-45deg); }

.cats-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cats-cab h3 { font-size: 24px; margin: 0; }
.cats-cab span { font-size: 13px; color: var(--muted); }
.cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cat { display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 10px 14px; text-align: center; transition: border-color .25s, box-shadow .25s; }
.cat:hover { translate: 0 -3px; border-color: rgba(30, 79, 216, .35); box-shadow: 0 14px 30px -18px rgba(9, 26, 56, .35); }
.cat__img { width: 100%; aspect-ratio: 1; border-radius: 12px; background: #f3f5f9; display: grid; place-items: center; overflow: hidden; margin-bottom: 10px; }
.cat__img img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s ease; }
.cat:hover .cat__img img { transform: scale(1.08); }
.cat b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.cat small { margin-top: 2px; color: var(--muted); font-size: 12.5px; }

/* ---------- como funciona: painel branco numa seção própria, logo abaixo do bloco escuro (home: após o hero; página: após o .cat-topo) ---------- */
.cfx-sec { position: relative; padding: 72px 0 8px; scroll-margin-top: var(--topo-h); }
.cfx-sec--pagina { padding-bottom: 72px; }
/* a seção começa com uma sombra suave, como se passasse por baixo do topo */
.hc + .cfx-sec { box-shadow: inset 0 18px 24px -18px rgba(9, 18, 38, .28); }
/* cores do painel num lugar só: fundo, linhas divisórias, rodapé e borda */
.cfx-painel { --cfx-fundo: #e8eefb; --cfx-linha: rgba(30, 79, 216, .14); --cfx-rodape: #dfe7f9; --cfx-borda: rgba(30, 79, 216, .16); /* azul suave, da mesma família do --royal */
  position: relative; overflow: hidden; background: var(--cfx-fundo); border: 1px solid var(--cfx-borda); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(9, 26, 56, .06), 0 18px 36px -18px rgba(9, 26, 56, .22), 0 50px 90px -40px rgba(9, 26, 56, .34); }
.cfx-topo { margin: 0; padding: 34px 40px 28px; gap: 16px 32px; }
.cfx-topo h2 { font-size: clamp(30px, 3.4vw, 42px); text-wrap: balance; }
.cfx-topo p { max-width: 70ch; font-size: 15.5px; color: var(--muted); }
.cfx-saiba { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0 5px; font-size: 14.5px; font-weight: 600; color: var(--royal); border-bottom: 1.5px solid rgba(30, 79, 216, .25); transition: border-color .2s, gap .2s; }
.cfx-saiba:hover { border-color: var(--royal); gap: 11px; }
.cfx-saiba:focus-visible { outline: 2px solid var(--royal); outline-offset: 4px; border-radius: 4px; }
/* passos em colunas separadas por divisores finos recuados */
.cfx-passos { position: relative; list-style: none; margin: 0; padding: 0 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cfx-passos::before { content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px; background: var(--cfx-linha); transform-origin: left center; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .1s; }
.cfx-passos:first-child::before { content: none; } /* sem cabeçalho (página Como funciona): sem linha no topo */
.cfx-painel[data-rv]:not(.visivel) .cfx-passos::before { transform: scaleX(0); }
.cfx-passo { position: relative; min-width: 0; padding: 30px 28px 32px; }
.cfx-passo:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 32px; width: 1px; background: var(--cfx-linha); }
.cfx-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; color: var(--gold); background: linear-gradient(150deg, var(--navy-2), var(--navy)); box-shadow: 0 10px 20px -12px rgba(9, 26, 56, .7), inset 0 1px 0 rgba(255, 255, 255, .08); }
.cfx-ico svg { display: block; width: 24px; height: 24px; }
.cfx-etapa { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: 1.4px; text-transform: uppercase; color: var(--royal); }
.cfx-passo h3 { margin: 6px 0 8px; font-size: 24px; }
.cfx-passo p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
/* rodapé do painel: selos de confiança + botão do WhatsApp */
.cfx-rodape { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 20px 40px; background: var(--cfx-rodape); border-top: 1px solid var(--cfx-linha); }
.cfx-selos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.cfx-selos li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cfx-selos svg { flex: none; width: 16px; height: 16px; color: var(--wa-d); }
.cfx-rodape p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cfx-btn { flex: none; padding: 13px 24px; font-size: 15px; }
.cfx-btn:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }

/* faixa */
.faixa { background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 26px; padding: 44px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; }
.faixa h2 { color: #fff; font-size: clamp(32px, 4vw, 48px); text-wrap: balance; }
.faixa p { color: #c9d4ee; margin: 0; }
.faixa__acao { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.faixa__acao small { color: #93a3c8; font-size: 12px; }

/* ---------- cards de produto ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.prod { background: var(--card); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; }
.prod:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.prod__img { aspect-ratio: 1; background: #fff; display: grid; place-items: center; padding: 14px; position: relative; }
.prod__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.prod:hover .prod__img img { transform: scale(1.04); }
.prod__tag { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--navy); color: #fff; }
.prod__tag--video { left: auto; right: 12px; background: var(--gold); color: var(--navy); }
.prod__tag--esg { background: #e5e7eb; color: #4b5563; }
.prod__corpo { padding: 14px 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod__cat { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.prod__nome { font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.3; min-height: 2.6em; }
.prod__parc { margin-top: auto; padding-top: 8px; font-family: var(--head); font-size: 30px; color: var(--navy); line-height: 1; }
.prod__parc small { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--muted); }
.prod__ent { font-size: 13px; color: var(--muted); min-height: 3em; }
.prod__vista { display: block; white-space: nowrap; }
.prod--esg { opacity: .7; }

/* ---------- catálogo ---------- */
.cat-topo { background: linear-gradient(160deg, var(--navy), #0b2353); color: #fff; padding: 40px 0 30px; }
.cat-topo h1 { color: #fff; font-size: clamp(36px, 5vw, 56px); margin: 0; }
.cat-topo p { color: #c9d4ee; margin: 6px 0 0; }
.filtros { position: relative; z-index: 20; background: rgba(245, 247, 251, .95); border-bottom: 1px solid var(--line); padding: 14px 0; } /* rola junto: com os filtros em várias linhas, preso ocupava boa parte da tela (a lupa do topo leva à busca) */
.filtros__in { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.busca { flex: 1 1 260px; position: relative; }
.busca input { width: 100%; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; background: #fff; }
.busca input:focus { outline: none; border-color: var(--royal); }
.busca svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; color: var(--muted); }
select.ordem { padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; background: #fff; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 14px; font-weight: 500; color: var(--text); }
.chip.ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip small { opacity: .6; margin-left: 4px; }
.resultado { color: var(--muted); font-size: 14px; margin: 18px 0; }
.vazio { text-align: center; padding: 60px 0; color: var(--muted); }

/* ---------- produto ---------- */
.migalha { font-size: 14px; color: var(--muted); padding: 18px 0; }
.migalha a:hover { color: var(--royal); }
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; padding-bottom: 50px; }
.pdp > * { min-width: 0; }
.galeria { position: sticky; top: calc(var(--topo-h) + 22px); }
.galeria__main { background: #fff; border-radius: 24px; border: 1px solid var(--line); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; position: relative; }
.galeria__main img, .galeria__main video { position: absolute; inset: 0; width: 100%; height: 100%; }
.galeria__main img { object-fit: scale-down; padding: 18px; cursor: zoom-in; }
.galeria__zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galeria__zoom:focus-visible { outline: 3px solid var(--royal); outline-offset: -3px; border-radius: 24px; }
.galeria__main video { object-fit: contain; background: var(--navy); }
.galeria__main.is-video { aspect-ratio: 4 / 5; background: var(--navy); }
.galeria__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.thumb { flex: none; width: 78px; height: 78px; border-radius: 14px; border: 2px solid var(--line); background: #fff; padding: 4px; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.ativo { border-color: var(--royal); }
.thumb--video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(9, 26, 56, .55); color: #fff; border-radius: 11px; font-size: 20px; }
.info h1 { font-size: clamp(34px, 4vw, 48px); }
.info__cat { color: var(--royal); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.preco-box { background: linear-gradient(140deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 22px; padding: 24px; margin: 20px 0; }
.preco-box__eb { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.preco-box__ent { font-size: 18px; margin-top: 8px; color: #dbe3f7; }
.preco-box__parc { font-family: var(--head); font-size: 56px; color: var(--gold); line-height: 1; margin: 2px 0 10px; }
.preco-box__parc small { font-size: 24px; color: #fff; }
.preco-box__vista { font-size: 15px; color: #c9d4ee; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.preco-box .btn { margin-top: 18px; }
.preco-box__nota { font-size: 12px; color: #93a3c8; margin-top: 10px; text-align: center; }
.esgotado-aviso { background: #fff7ed; color: var(--danger); border: 1px solid #fed7aa; padding: 12px 16px; border-radius: 14px; font-weight: 600; font-size: 14px; }
.bloco { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; margin-bottom: 16px; }
.bloco h3 { font-size: 22px; margin-bottom: 12px; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista li { padding-left: 26px; position: relative; font-size: 15px; }
.lista li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 9px; height: 9px; border-radius: 3px; background: var(--gold); transform: rotate(45deg); }
.cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cores span { background: var(--bg); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.medidas { display: flex; gap: 10px; flex-wrap: wrap; }
.medidas div { background: var(--bg); border-radius: 14px; padding: 10px 16px; text-align: center; min-width: 90px; }
.medidas b { display: block; font-family: var(--head); font-size: 26px; color: var(--navy); }
.medidas small { color: var(--muted); font-size: 12px; }
.garantias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.garantias div { background: var(--bg); border-radius: 14px; padding: 12px; font-size: 13px; text-align: center; }
.garantias b { display: block; color: var(--ink); font-size: 14px; }
.ficha-link { font-size: 14px; color: var(--royal); font-weight: 600; }

/* ---------- dúvidas ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.secao__topo--centro { justify-content: center; text-align: center; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0; }
.faq summary { font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 18px 22px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--royal); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0; padding: 0 22px 18px; color: var(--muted); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(5, 12, 28, .92); display: grid; place-items: center; padding: 20px; }
.lightbox img { width: min(92vw, 1100px); height: min(86vh, 1100px); object-fit: contain; background: #fff; border-radius: 16px; }
.lightbox button { position: absolute; top: 12px; right: 14px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.lightbox button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html.zoom-aberto { overflow: hidden; }

/* ---------- rodapé ---------- */
.rodape { background: var(--navy); color: #c9d4ee; padding: 48px 0 110px; margin-top: 40px; }
.rodape__in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
.rodape p { margin: 8px 0 0; }
.rodape .muted { color: #93a3c8; }
.rodape__links { display: grid; gap: 10px; align-content: start; }
.rodape__links a:hover { color: var(--gold); }
.rodape__legal { grid-column: 1 / -1; font-size: 12px; color: #7f8db0; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 18px; }

/* ---------- WhatsApp flutuante + barra fixa mobile ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -6px rgba(37, 211, 102, .7); }
.wa-float svg { width: 32px; height: 32px; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: pulso 2s infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.barra-compra { display: none; }

/* animação de entrada */
.fade-in { animation: fade .45s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- responsivo ---------- */
@media (min-width: 721px) and (max-width: 1100px) {
  .cat b { font-size: 13px; overflow-wrap: anywhere; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .cats { gap: 10px; }
  .cat { padding: 10px 6px 12px; }
  .cat b { font-size: 12px; }
  .cat small { font-size: 11.5px; }
}
@media (min-width: 721px) and (max-width: 899px) {
  .secao .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 8 destaques e 4 relacionados: 4 colunas, sem buraco na última linha */
@media (min-width: 900px) and (max-width: 1100px) {
  .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* desktop estreito: mantém as 4 colunas do "Como funciona" com respiros menores */
@media (min-width: 961px) and (max-width: 1120px) {
  .cfx-topo, .cfx-rodape { padding-inline: 32px; }
  .cfx-passos { padding: 0 8px; }
  .cfx-passos::before { left: 32px; right: 32px; }
  .cfx-passo { padding-inline: 24px; }
  .cfx-passo h3 { font-size: 22px; }
  .cfx-passo p { font-size: 14px; }
}
@media (max-width: 960px) {
  .deptos { grid-template-columns: repeat(2, 1fr); }
  .cfx-topo { padding: 30px 32px 24px; }
  .cfx-topo p { max-width: 52ch; }
  .cfx-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 8px; }
  .cfx-passos::before { left: 32px; right: 32px; }
  .cfx-passo { padding: 28px 24px 30px; }
  .cfx-passo:nth-child(odd)::before { content: none; }
  .cfx-passo:nth-child(even)::before { top: 28px; bottom: 30px; }
  .cfx-passo:nth-child(n+3)::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: var(--cfx-linha); }
  .cfx-rodape { padding: 20px 32px; }
  .faixa { grid-template-columns: 1fr; padding: 32px; }
  .pdp { grid-template-columns: 1fr; gap: 24px; }
  .galeria { position: static; }
}
@media (max-width: 720px) {
  .hc { padding-top: 14px; }
  .hc__luz { width: 320px; height: 300px; filter: blur(50px); }
  .hc__card { aspect-ratio: 2 / 3; max-height: none; min-height: 0; border-radius: 18px; }
  .hc__img { object-position: var(--pos-m, 50%) 50%; }
  .hc__veu { background: linear-gradient(0deg, rgba(8, 12, 24, .95) 0%, rgba(8, 12, 24, .82) 45%, rgba(8, 12, 24, .55) 70%, rgba(8, 12, 24, .2) 88%, transparent 100%); }
  .hc__txt, .hc__slide--dir .hc__txt { left: 18px; right: 18px; width: auto; top: auto; bottom: 46px; transform: none; }
  .hc__slide--dir .hc__veu { background: linear-gradient(0deg, rgba(8, 12, 24, .95) 0%, rgba(8, 12, 24, .82) 45%, rgba(8, 12, 24, .55) 70%, rgba(8, 12, 24, .2) 88%, transparent 100%); }
  .hc__eb { text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
  .hc__txt--abertura { left: 0; right: 0; top: 0; bottom: 0; padding: 0 18px 30px; justify-content: center; }
  .hc h1 { font-size: clamp(46px, 13vw, 64px); margin: 14px 0 14px; }
  .hc h2 { font-size: clamp(30px, 9vw, 40px); margin: 8px 0 12px; }
  .hc__txt p { font-size: 14px; }
  .hc__txt p br { display: none; }
  .hc__prods a { font-size: 13.5px; padding: 8px 0; }
  .hc__preco b { font-size: 20px; }
  .hc__ctas { align-self: stretch; margin-top: 18px; }
  .hc__ctas--linha { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; text-align: center; }
  .hc__btn { min-width: 0; width: 100%; padding: 13px 20px; }
  .hc__nota { margin-top: 10px; font-size: 11.5px; text-align: center; } /* a parcela não aparece sem avisar que tem entrada */
  .hc__seta { width: 44px; height: 44px; margin-top: 0; top: 14px; }
  .hc__seta--ant { left: 10px; }
  .hc__seta--prox { right: 10px; }
  .hc__ctrl { bottom: 14px; }
  /* celular: bolinhas com área de toque de 24px (o desenho continua de 8px) e pausa maior */
  .hc__dots { gap: 0; padding: 0 4px; }
  .hc__dots button { width: 24px; height: 24px; padding: 8px; }
  .hc__dots button.ativo { width: 42px; }
  .hc__pausa { width: 34px; height: 34px; margin-top: -17px; }
  .hc-faixa { flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 20px 0 24px; margin-top: 16px; }
  .hc-faixa__ico { width: 44px; height: 44px; font-size: 22px; }
  .hc-faixa__txt { flex-basis: calc(100% - 60px); }
  .so-mobile { display: inline; }
  .secao { padding: 52px 0; }
  .cfx-sec { padding-top: 52px; }
  .cfx-sec--pagina { padding-bottom: 52px; }
  .cfx-painel { border-radius: 18px; }
  .cfx-topo { padding: 24px 20px 18px; gap: 10px; }
  .cfx-topo h2 { font-size: 30px; }
  .cfx-topo p { display: none; } /* o "sem cartão" já está na faixa do hero, logo acima */
  .cfx-saiba { font-size: 14px; }
  .cfx-passos { grid-template-columns: 1fr; padding: 6px 20px 10px; }
  .cfx-passos::before { left: 20px; right: 20px; }
  .cfx-passo { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 0; }
  .cfx-passo:not(:first-child)::before { content: none; }
  .cfx-ico { grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
  .cfx-ico svg { width: 21px; height: 21px; }
  .cfx-etapa, .cfx-passo h3, .cfx-passo p { grid-column: 2; }
  .cfx-etapa { font-size: 11px; padding-top: 1px; }
  .cfx-passo h3 { margin: 2px 0 3px; font-size: 21px; }
  .cfx-passo p { font-size: 14px; line-height: 1.5; }
  /* trilho: liga o ícone de um passo ao do próximo */
  .cfx-passo::after, .cfx-passo:nth-child(n+3)::after { content: ""; position: absolute; top: 60px; bottom: -8px; left: 19.5px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(30, 79, 216, .38), rgba(30, 79, 216, .12)); transform-origin: top center; transition: transform .6s ease calc(var(--d, 0ms) + 250ms); }
  .cfx-passo:last-child::after { content: none; }
  .cfx-passo.rv:not(.visivel)::after { transform: scaleY(0); }
  .cfx-rodape { flex-direction: column; align-items: stretch; padding: 18px 20px 20px; gap: 14px; }
  .cfx-selos { gap: 6px 18px; }
  .cfx-selos li { font-size: 13.5px; }
  .cfx-btn { width: 100%; }
  .grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .filtros { position: static; } /* presos, cabeçalho + filtros + atalhos cobriam até metade da tela */
  .prod__vista { white-space: normal; }
  .prod__ent { min-height: 6em; }
  .prod__parc small { display: block; margin-bottom: 2px; }
  .prod__corpo { padding: 12px; }
  .prod__nome { font-size: 14px; }
  .prod__parc { font-size: 25px; }
  .deptos { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px 32px; padding: 0 16px 6px; scrollbar-width: none; }
  .deptos::-webkit-scrollbar { display: none; }
  .depto { flex: 0 0 78%; height: auto; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; scroll-snap-align: start; }
  .depto__txt { position: relative; left: auto; right: auto; bottom: auto; padding: 120px 18px 18px; }
  .depto__subs { max-height: none; opacity: 1; }
  .depto__veu { background: linear-gradient(180deg, rgba(9, 18, 38, .25) 0%, rgba(9, 18, 38, .6) 38%, rgba(9, 18, 38, .94) 100%); }
  .depto__qtd { text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
  .depto h3 { font-size: 32px; }
  .cats-cab h3 { font-size: 20px; }
  .cats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cat { padding: 8px 6px 10px; border-radius: 14px; }
  .cat b { font-size: 12.5px; }
  .cat small { font-size: 11.5px; }
  .rodape__in { grid-template-columns: 1fr; }
  .garantias { grid-template-columns: 1fr; }
  .preco-box__parc { font-size: 46px; }
  .galeria__main { aspect-ratio: 1; height: auto; }
  .galeria__main.is-video { aspect-ratio: 4 / 5; }
  .barra-compra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .2); }
  .barra-compra div { line-height: 1.1; }
  .barra-compra b { font-family: var(--head); font-size: 24px; color: var(--navy); display: block; }
  .barra-compra small { color: var(--muted); font-size: 12px; }
  .barra-compra .btn { flex: 1; padding: 13px 14px; }
  body.tem-barra .wa-float { bottom: 90px; }
  .wa-float { display: none; } /* no celular a barra de atalhos (.barra-baixo) e a barra de compra assumem o WhatsApp */
}

/* ---------- ajustes da revisão completa ---------- */
/* botão principal da página do produto pode quebrar em 2 linhas (no celular o rótulo não cabia e a logo sumia) */
.preco-box .btn { white-space: normal; text-align: center; line-height: 1.25; }
/* catálogo no computador: todos os filtros à vista (a faixa rolava para o lado sem barra nem setas) */
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .chips { flex-wrap: wrap; overflow: visible; }
}
.chip--dep { font-weight: 600; }
.vazio .btn { white-space: normal; max-width: 100%; text-align: center; }
#busca, #resultado { scroll-margin-top: calc(var(--topo-h) + 16px); } /* lupa do topo e Enter da busca: o campo e os resultados não ficam atrás do cabeçalho */
/* telas de toque acima de 720px: as categorias dos departamentos ficam sempre à vista (sem mouse não havia hover) */
@media (hover: none) and (min-width: 721px) {
  .depto__subs { max-height: none; opacity: 1; }
}
/* computador: a galeria cabe na tela, com as miniaturas visíveis */
@media (min-width: 961px) {
  .galeria__main { max-height: calc(100svh - var(--topo-h) - 175px); min-height: 320px; margin-inline: auto; }
}
/* garantias da página do produto entre 961 e 1100px: uma por linha (em 3 colunas o texto quebrava palavra a palavra) */
@media (min-width: 961px) and (max-width: 1100px) {
  .garantias { grid-template-columns: 1fr; }
}
/* tablet: a foto não ocupa a primeira tela inteira e a barra "Quero este" fica presa embaixo, como no celular */
@media (min-width: 721px) and (max-width: 960px) {
  .galeria__main, .galeria__main.is-video { aspect-ratio: auto; height: min(62vh, 560px); }
  .barra-compra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--line); padding: 10px 24px calc(10px + env(safe-area-inset-bottom)); gap: 16px; align-items: center; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .2); }
  .barra-compra div { line-height: 1.1; }
  .barra-compra b { font-family: var(--head); font-size: 26px; color: var(--navy); display: block; }
  .barra-compra small { color: var(--muted); font-size: 12px; }
  .barra-compra .btn { flex: 1; max-width: 420px; margin-left: auto; padding: 13px 18px; }
  body.tem-barra .wa-float { bottom: 90px; }
}
/* menu aberto: o botão flutuante sai de cena (ficava visível mas sem funcionar) */
html.menu-aberto .wa-float { opacity: 0; pointer-events: none; }
/* "Pressione ESC" só faz sentido com teclado */
@media (hover: none) { .painel__fecha { display: none; } }
/* página que termina em seção branca: sem a faixa cinza antes do rodapé */
#app:has(> .secao--branca:last-child) + .rodape { margin-top: 0; }

/* =========================================================
   EFEITOS PELO SITE (sutis; desligados para quem prefere menos movimento)
   ========================================================= */
/* surgir ao rolar */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), translate .3s ease, box-shadow .3s ease, border-color .3s ease; }
/* o "subir ao passar o mouse" usa translate, separado do transform do surgir */
.prod:hover { transform: none; translate: 0 -4px; }
.rv.visivel { opacity: 1; transform: none; }


/* rótulo das seções com tracinho dourado que cresce */
.eyebrow { display: inline-flex; align-items: center; gap: 0; }
.eyebrow::before { content: ""; width: 0; height: 2px; border-radius: 2px; background: var(--gold); transition: width .7s .25s, margin .7s .25s; }
.visivel .eyebrow::before { width: 24px; margin-right: 10px; }
.secao__topo--centro .eyebrow::after { content: ""; width: 0; height: 2px; border-radius: 2px; background: var(--gold); transition: width .7s .25s, margin .7s .25s; }
.secao__topo--centro.visivel .eyebrow::after { width: 24px; margin-left: 10px; }

/* brilho que desliza nos botões principais */
.btn--gold, .btn--wa { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after, .btn--wa::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); }
.btn--gold:hover::after, .btn--wa:hover::after { transform: translateX(120%); transition: transform .75s ease; }
.btn--wa { z-index: 0; }

/* categorias: foto aproxima e sublinhado dourado */

/* produtos: brilho passando na foto */
.prod__img { overflow: hidden; }
.prod__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-130%); }
.prod:hover .prod__img::after { transform: translateX(130%); transition: transform .9s ease; }
.prod__parc { transition: color .25s; }
.prod:hover .prod__parc { color: var(--royal); }

/* faixa azul de chamada: bokeh + brilho dourado passando */
.faixa { position: relative; overflow: hidden; isolation: isolate; }
.faixa > * { position: relative; z-index: 1; }
.faixa::before { content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none; filter: blur(2px);
  background:
    radial-gradient(circle at 8% 25%, rgba(255, 214, 140, .2) 0, transparent 7%),
    radial-gradient(circle at 18% 85%, rgba(120, 160, 255, .22) 0, transparent 9%),
    radial-gradient(circle at 70% 12%, rgba(120, 160, 255, .18) 0, transparent 8%),
    radial-gradient(circle at 92% 70%, rgba(255, 214, 140, .2) 0, transparent 9%),
    radial-gradient(circle at 55% 95%, rgba(255, 230, 180, .14) 0, transparent 6%);
  animation: efFlutua 14s ease-in-out infinite alternate; }
.faixa::after { content: ""; position: absolute; inset: 0 -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 226, 170, .16) 50%, transparent 56%);
  animation: efVarre 8s ease-in-out infinite; }
@keyframes efFlutua { to { transform: translate(-2%, -3%) scale(1.05); } }
@keyframes efVarre { 0% { transform: translateX(-45%); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateX(45%); opacity: 1; } 70%, 100% { transform: translateX(45%); opacity: 0; } }

/* topo do catálogo e caixa de preço do produto: luz suave + brilho */
.cat-topo { position: relative; overflow: hidden; }
.cat-topo::before { content: ""; position: absolute; width: 600px; height: 400px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 98, 255, .45), transparent 65%); filter: blur(40px); pointer-events: none; }
.cat-topo .wrap { position: relative; }
.preco-box { position: relative; overflow: hidden; isolation: isolate; }
.preco-box > * { position: relative; z-index: 1; }
.preco-box::after { content: ""; position: absolute; inset: 0 -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 226, 170, .14) 50%, transparent 56%); animation: efVarre 9s ease-in-out 1s infinite; }

/* perguntas: resposta abre deslizando */
.faq details { transition: opacity .7s ease var(--d, 0ms), transform .7s ease var(--d, 0ms), border-color .25s, box-shadow .25s; }
.faq details:hover { border-color: rgba(30, 79, 216, .35); }
.faq details[open] { box-shadow: 0 10px 30px -18px rgba(9, 26, 56, .35); }
.faq summary::after { transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] p { animation: efAbre .4s ease; }
@keyframes efAbre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* rodapé: pontilhado suave que some para baixo */
.rodape { position: relative; overflow: hidden; }
.rodape::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000, transparent 70%); }
.rodape .wrap { position: relative; }

@media print {
  .rv { opacity: 1 !important; transform: none !important; }
  .cfx-passos::before, .cfx-passo::after { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .cfx-passos::before, .cfx-passo::after, .cfx-saiba { transition: none !important; }
  .cfx-painel[data-rv]:not(.visivel) .cfx-passos::before, .cfx-passo.rv:not(.visivel)::after { transform: none; }
  .faixa::before, .faixa::after, .preco-box::after { animation: none; }
  .faixa::after, .preco-box::after { display: none; }
  html { scroll-behavior: auto; }
  .wa-float::before { display: none; } /* pulso do botão flutuante do WhatsApp */
  .fade-in, .faq details[open] p { animation: none; }
  .faq summary::after { transition: none; }
}


/* ---------- pré-análise pelo site (#/pre-analise) ---------- */
.pa { padding: 24px 0 60px; }
.pa-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; margin-top: 14px; }
.pa-form h1 { font-size: 34px; margin-bottom: 6px; }
.pa-passo { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; }
.pa-passo span { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.pa-passo h2 { margin: 0; font-size: 22px; }
.pa-lin { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pa-campo { display: grid; gap: 6px; } .pa-cheio { grid-column: 1 / -1; }
.pa-campo span { font-size: 13px; font-weight: 600; color: var(--text); }
.pa-campo input, .pa-campo select { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.pa-campo input:focus, .pa-campo select:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(30, 79, 216, .12); }
.pa-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pa-arquivos { display: grid; gap: 10px; }
.pa-arquivo { position: relative; display: grid; grid-template-columns: 46px 1fr 70px; align-items: center; gap: 14px; padding: 14px; border: 1.5px dashed var(--line); border-radius: 14px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.pa-arquivo:hover { border-color: var(--royal); } .pa-arquivo.tem { border-style: solid; border-color: #1c8757; background: #f2faf5; }
.pa-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pa-arquivo__ico { width: 46px; height: 46px; border-radius: 12px; background: #e8eefb; color: var(--royal); display: grid; place-items: center; } .pa-arquivo__ico svg { width: 24px; height: 24px; }
.pa-arquivo.tem .pa-arquivo__ico { background: #d9f3e4; color: #1c8757; }
.pa-arquivo__tx b { display: block; font-size: 15px; } .pa-arquivo__tx small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pa-arquivo__ok { display: none; font-style: normal; color: #1c8757; font-weight: 600; font-size: 13px; margin-top: 4px; } .pa-arquivo.tem .pa-arquivo__ok { display: block; }
.pa-arquivo__prev { width: 70px; height: 54px; object-fit: cover; border-radius: 8px; justify-self: end; }
.pa-prods { display: grid; gap: 10px; }
.pa-prod { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; }
.pa-prod__img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #f3f5f9; flex: none; } .pa-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.pa-prod b { display: block; } .pa-prod small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pa-prod__troca { font-size: 14px; color: var(--muted); } .pa-prod__troca a { color: var(--royal); font-weight: 600; }
.pa-erro { background: #fdf0ea; color: var(--danger); border: 1px solid #f5cdbb; border-radius: 12px; padding: 12px 14px; font-weight: 600; margin: 16px 0 0; } .pa-erro a { color: var(--danger); }
.pa-enviar { margin-top: 22px; font-size: 17px; padding: 17px 26px; }
.pa-nota { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }
.pa-lado .bloco h3 { font-size: 20px; margin-bottom: 10px; }
.pa-lista { margin: 0; padding-left: 20px; color: var(--text); display: grid; gap: 8px; }
.pa-ok { text-align: center; padding: 20px 0; } .pa-ok__ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #d9f3e4; color: #1c8757; margin-bottom: 14px; } .pa-ok__ico svg { width: 34px; height: 34px; }
.pa-ok h1 { font-size: 30px; } .pa-ok .btn { margin-top: 18px; }
.preco-box__zap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 600; color: #128c4a; } .preco-box__zap svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .pa-grade { grid-template-columns: 1fr; } .pa-form h1 { font-size: 28px; } }
@media (max-width: 560px) { .pa-lin { grid-template-columns: 1fr; } .pa-arquivo { grid-template-columns: 40px 1fr 56px; } .pa-arquivo__prev { width: 56px; height: 44px; } }