/* ============================================================================
   FINO OURO JÓIAS — sistema visual
   Conceito: "Certificado de Autenticidade".
   Toda joia da casa sai com certificado, porta-anel e nota fiscal. A interface
   toma emprestada a linguagem do documento lavrado: guilhochê (as linhas
   gravadas de certificado e cédula), filetes de ouro, selos e tipografia
   capitular. O ouro nunca é cor chapada — é luz varrendo metal polido.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    /* Base: preto quente de veludo de mostruário, nunca #000 puro */
    --breu:        #0a0908;
    --carvao:      #12100d;
    --grafite:     #1b1813;
    --fumo:        #262119;

    /* Ouro 18k */
    --ouro:        #cc9933;
    --ouro-claro:  #e8c766;
    --ouro-palido: #f3e0a8;
    --ouro-escuro: #8f6b1f;
    --ouro-sombra: #5a4413;

    /* Neutros quentes */
    --marfim:      #f5f0e6;
    --pergaminho:  #ddd4c2;
    --cinza:       #8a8271;
    --cinza-fundo: #4a443a;

    /* Placa de marfim onde as joias são montadas.
       O acervo é todo fotografado em fundo branco; a placa + mix-blend-mode
       multiply fundem esse branco e eliminam o quadrado cru sobre o preto. */
    --placa:       #f4f0e7;

    /* Ouro como luz: o gradiente que simula metal polido captando reflexo */
    --lamina-ouro: linear-gradient(100deg,
        var(--ouro-escuro) 0%,   var(--ouro) 16%,
        var(--ouro-palido) 32%,  var(--ouro-claro) 43%,
        var(--ouro) 56%,         var(--ouro-sombra) 68%,
        var(--ouro-claro) 84%,   var(--ouro) 100%);

    --filete: linear-gradient(90deg,
        transparent 0%, var(--ouro-sombra) 12%, var(--ouro) 50%,
        var(--ouro-sombra) 88%, transparent 100%);

    /* Tipografia */
    --display: 'Cinzel', 'Times New Roman', serif;
    --corpo:   'Jost', 'Century Gothic', system-ui, sans-serif;

    /* Escala tipográfica — razão 1.28 */
    --t-xs:   0.735rem;
    --t-sm:   0.86rem;
    --t-base: 1rem;
    --t-md:   1.18rem;
    --t-lg:   1.5rem;
    --t-xl:   2rem;
    --t-2xl:  2.75rem;
    --t-3xl:  3.9rem;
    --t-4xl:  clamp(3rem, 9vw, 7.5rem);

    /* Ritmo espacial */
    --e-1: 0.5rem;   --e-2: 1rem;    --e-3: 1.5rem;
    --e-4: 2.5rem;   --e-5: 4rem;    --e-6: 6.5rem;
    --e-7: 10rem;

    /* Altura do cabeçalho fixo — é ela que empurra o conteúdo pra baixo.
       O valor aqui é só o ponto de partida: o site.js mede o cabeçalho de
       verdade e reescreve esta variável, porque a altura muda com o tamanho
       da fonte carregada e com a quebra do menu. */
    --topo-h: 15.5rem;

    --limite:  1280px;
    --limite-texto: 62ch;

    --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
    --curva-lenta: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------ 2. FUNDAÇÃO */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--breu);
    color: var(--pergaminho);
    font-family: var(--corpo);
    font-size: var(--t-base);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.012em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Grão sobre tudo: tira o "digital" da tela e dá textura de papel-moeda */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--marfim);
}

p { margin: 0 0 var(--e-2); }

::selection { background: var(--ouro); color: var(--breu); }

:focus-visible {
    outline: 1px solid var(--ouro);
    outline-offset: 3px;
}

/* ------------------------------------------------------- 3. UTILITÁRIOS */
.env  { width: min(100% - 2.5rem, var(--limite)); margin-inline: auto; }
.env-estreito { width: min(100% - 2.5rem, 880px); margin-inline: auto; }

.oculto-visual {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* Ouro aplicado ao texto — o gradiente recortado pela letra */
.ouro {
    background: var(--lamina-ouro);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Filete: a linha fina de ouro que separa blocos, como num diploma */
.filete {
    height: 1px;
    border: 0;
    background: var(--filete);
    margin: var(--e-4) 0;
}

/* Capitular de seção: numeração romana miúda que marca o documento */
.marca-secao {
    font-family: var(--corpo);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ouro);
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-2);
}
.marca-secao::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--ouro-sombra), transparent);
}
.marca-secao.centro { justify-content: center; }
.marca-secao.centro::after { display: none; }
.marca-secao.centro::before {
    content: '';
    width: 3rem; height: 1px;
    background: linear-gradient(90deg, transparent, var(--ouro));
}

/* ---------------------------------------------- 4. GUILHOCHÊ (a assinatura) */
/* Padrão de linhas gravadas, como no verso de um certificado.
   Construído com gradientes cônicos sobrepostos — sem imagem externa. */
.guilloche {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image:
        repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg 2deg, var(--ouro-sombra) 2deg 2.4deg),
        repeating-radial-gradient(circle at 50% 50%,
            transparent 0 7px, var(--ouro-sombra) 7px 7.7px);
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 0%, transparent 72%);
}

.guilloche--faixa {
    opacity: 0.1;
    background-image:
        repeating-linear-gradient(74deg,
            transparent 0 5px, var(--ouro-sombra) 5px 5.6px),
        repeating-linear-gradient(-74deg,
            transparent 0 5px, var(--ouro-sombra) 5px 5.6px);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, #000 55%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 45%, #000 55%, transparent);
}

/* Cantos art déco — quatro cantoneiras que emolduram sem fechar a caixa */
.cantoneiras { position: relative; }
.cantoneiras::before,
.cantoneiras::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border: 1px solid var(--ouro-sombra);
    transition: border-color 0.5s var(--curva), width 0.5s var(--curva), height 0.5s var(--curva);
    pointer-events: none;
}
.cantoneiras::before { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.cantoneiras::after  { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }
.cantoneiras:hover::before,
.cantoneiras:hover::after { border-color: var(--ouro); width: 30px; height: 30px; }

/* ---------------------------------------------------------- 5. CABEÇALHO */
.topo {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    transition: background 0.5s var(--curva), backdrop-filter 0.5s var(--curva),
                border-color 0.5s var(--curva);
    border-bottom: 1px solid transparent;
}
.topo--fixo {
    background: rgba(10, 9, 8, 0.86);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom-color: rgba(204, 153, 51, 0.22);
}

.topo__aviso {
    background: var(--grafite);
    border-bottom: 1px solid rgba(204, 153, 51, 0.16);
    font-size: var(--t-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.6rem 1rem;
    color: var(--ouro-claro);
    position: relative;
    overflow: hidden;
}
.topo__aviso span { position: relative; z-index: 1; }

/* Cabeçalho em dois níveis: a marca reina sozinha no centro e o menu
   ganha uma faixa própria embaixo. Com cinco itens, tentar espremer
   navegação e logo na mesma linha quebrava os nomes em duas linhas. */
.topo__barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) 0;
}

.topo__marca { justify-self: center; }
.topo__marca img {
    width: clamp(132px, 13vw, 190px);
    transition: width 0.45s var(--curva);
}

.topo__nav { border-top: 1px solid rgba(204, 153, 51, 0.14); }

.nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1.1rem, 3vw, 2.75rem);
    list-style: none;
    margin: 0 auto; padding: 0.75rem 1.25rem;
    font-size: var(--t-xs);
    letter-spacing: 0.26em;
    text-transform: uppercase;
}
.nav a {
    position: relative;
    display: block;
    padding: 0.35rem 0;
    color: var(--pergaminho);
    white-space: nowrap;          /* nome de categoria nunca quebra */
    transition: color 0.35s var(--curva);
}

/* Ao rolar, o cabeçalho se compacta — mas o menu continua acessível */
.topo--fixo .topo__barra { padding: 0.45rem 0; }
.topo--fixo .topo__marca img { width: clamp(104px, 9vw, 138px); }
.topo--fixo .nav { padding-block: 0.45rem; }
.nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--lamina-ouro);
    transition: width 0.45s var(--curva);
}
.nav a:hover { color: var(--marfim); }
.nav a:hover::after,
.nav a[aria-current]::after { width: 100%; }

.topo__acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--e-2);
}

.icone-btn {
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid transparent;
    background: none;
    color: var(--pergaminho);
    cursor: pointer;
    position: relative;
    transition: color 0.3s, border-color 0.3s;
}
.icone-btn:hover { color: var(--ouro-claro); border-color: rgba(204,153,51,0.3); }
.icone-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }

.contador {
    position: absolute;
    top: 4px; right: 2px;
    min-width: 17px; height: 17px;
    display: grid; place-items: center;
    background: var(--ouro);
    color: var(--breu);
    font-size: 0.66rem;
    font-weight: 500;
    border-radius: 50%;
    padding: 0 4px;
}

.menu-hamburguer { display: none; }

/* ------------------------------------------------------------- 6. BOTÕES */
.btn {
    --btn-cor: var(--ouro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.05rem 2.4rem;
    font-family: var(--corpo);
    font-size: var(--t-sm);
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid var(--btn-cor);
    background: transparent;
    color: var(--marfim);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.45s var(--curva), border-color 0.45s var(--curva);
}
/* o ouro sobe por baixo do texto ao passar o mouse */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--lamina-ouro);
    transform: translateY(101%);
    transition: transform 0.5s var(--curva-lenta);
}
.btn:hover { color: var(--breu); border-color: var(--ouro-claro); }
.btn:hover::before { transform: translateY(0); }

.btn--ouro { background: var(--lamina-ouro); background-size: 200% 100%; color: var(--breu); border-color: transparent; }
.btn--ouro::before { display: none; }
.btn--ouro:hover { color: var(--breu); animation: varrer 1.1s var(--curva); }

.btn--fantasma { border-color: rgba(221, 212, 194, 0.28); }
.btn--zap { border-color: #3f9c56; }
.btn--zap::before { background: linear-gradient(100deg, #2f7a41, #45b662, #2f7a41); }
.btn--bloco { width: 100%; }
.btn--mini { padding: 0.7rem 1.4rem; font-size: var(--t-xs); }

@keyframes varrer {
    from { background-position: 200% 0; }
    to   { background-position: 0 0; }
}

/* --------------------------------------------------------------- 7. HERO */
.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: calc(var(--topo-h) + var(--e-3)) 0 var(--e-5);
    overflow: hidden;
}

.hero__fundo {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__fundo img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.42;
    filter: saturate(0.72) contrast(1.06);
    animation: respirar 26s ease-in-out infinite alternate;
}
.hero__fundo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, transparent, var(--breu) 78%),
        linear-gradient(180deg, rgba(10,9,8,0.7) 0%, transparent 32%, var(--breu) 96%);
}

@keyframes respirar {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(1.07) translateY(-1.5%); }
}

.hero__conteudo { position: relative; text-align: center; }

.hero__selo {
    font-size: var(--t-xs);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: var(--e-3);
}

.hero__titulo {
    font-size: var(--t-4xl);
    line-height: 0.94;
    letter-spacing: 0.01em;
    margin-bottom: var(--e-3);
}
.hero__titulo em {
    display: block;
    font-family: 'Cinzel Decorative', var(--display);
    font-style: normal;
    font-size: 0.62em;
    letter-spacing: 0.04em;
}

.hero__linha {
    max-width: 46ch;
    margin: 0 auto var(--e-4);
    color: var(--pergaminho);
    font-size: var(--t-md);
    font-weight: 300;
}

.hero__acoes {
    display: flex;
    gap: var(--e-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* Selos de garantia sob o hero */
.garantias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: rgba(204, 153, 51, 0.16);
    border-block: 1px solid rgba(204, 153, 51, 0.16);
    margin-top: var(--e-6);
}
.garantias__item {
    background: var(--breu);
    padding: var(--e-3) var(--e-2);
    text-align: center;
}
.garantias__item strong {
    display: block;
    font-family: var(--display);
    font-size: var(--t-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ouro-claro);
    margin-bottom: 0.25rem;
}
.garantias__item span { font-size: var(--t-xs); color: var(--cinza); letter-spacing: 0.06em; }

/* ----------------------------------------------------------- 8. SEÇÕES */
.secao { padding: var(--e-6) 0; position: relative; }
.secao--densa { padding: var(--e-5) 0; }
/* primeira seção de uma página interna: desvia do cabeçalho fixo */
.secao--pagina { padding-top: calc(var(--topo-h) + var(--e-3)); }

.secao__cabeca {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
    flex-wrap: wrap;
}
.secao__titulo { font-size: var(--t-2xl); }
.secao__titulo + p { color: var(--cinza); max-width: 48ch; margin-top: 0.6rem; }

/* -------------------------------------------------- 9. CARTÃO DE PRODUTO */
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: var(--e-3);
}

.joia {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--carvao);
    border: 1px solid rgba(204, 153, 51, 0.13);
    transition: border-color 0.55s var(--curva), transform 0.55s var(--curva-lenta);
}
.joia:hover { border-color: rgba(204, 153, 51, 0.45); transform: translateY(-5px); }

.joia__foto {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--placa, #f4f0e7);
}
.joia__foto img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 7%;
    mix-blend-mode: multiply;
    transition: transform 0.9s var(--curva-lenta), opacity 0.5s;
}
.joia:hover .joia__foto img { transform: scale(1.06); }

/* segunda foto revelada no hover, quando existe */
.joia__foto img + img { position: absolute; inset: 0; opacity: 0; }
.joia:hover .joia__foto img + img { opacity: 1; }

/* brilho que atravessa a placa — o reflexo correndo no metal.
   Sobre marfim o realce tem de ser âmbar, não branco: branco em branco some. */
.joia__foto::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 55%; height: 100%;
    z-index: 2;
    background: linear-gradient(100deg, transparent, rgba(204, 153, 51, 0.22), transparent);
    transform: skewX(-18deg);
    transition: left 0.85s var(--curva);
    pointer-events: none;
}
.joia:hover .joia__foto::after { left: 125%; }

.joia__etiqueta {
    position: absolute;
    top: var(--e-1); left: var(--e-1);
    z-index: 2;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    background: rgba(10, 9, 8, 0.82);
    border: 1px solid rgba(204, 153, 51, 0.35);
    color: var(--ouro-claro);
}

.joia__corpo {
    padding: var(--e-2) var(--e-2) var(--e-3);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.55rem;
}

.joia__categoria {
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ouro-sombra);
}

.joia__nome {
    font-family: var(--display);
    font-size: var(--t-base);
    line-height: 1.32;
    color: var(--marfim);
}

/* Especificações em miniatura — a "ficha" resumida no cartão */
.joia__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--cinza);
    margin-top: auto;
    padding-top: 0.6rem;
}
.joia__specs span {
    border: 1px solid rgba(138, 130, 113, 0.24);
    padding: 0.18rem 0.5rem;
}

.joia__preco {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid rgba(204, 153, 51, 0.14);
    padding-top: 0.7rem;
    margin-top: 0.3rem;
}
.joia__valor { font-family: var(--display); font-size: var(--t-md); color: var(--ouro-claro); }
.joia__parcela { font-size: 0.68rem; color: var(--cinza); }

.joia__link { position: absolute; inset: 0; z-index: 3; }

/* ------------------------------------------ 10. CATEGORIAS EM DESTAQUE */
.trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--e-2);
}
.trio__item {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    padding: var(--e-3);
    overflow: hidden;
    border: 1px solid rgba(204, 153, 51, 0.16);
}
.trio__item img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.5;
    transition: transform 1.1s var(--curva-lenta), opacity 0.6s;
    z-index: -2;
}
.trio__item::after {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(10,9,8,0.94) 8%, rgba(10,9,8,0.24) 62%);
}
.trio__item:hover img { transform: scale(1.08); opacity: 0.66; }

.trio__texto { position: relative; width: 100%; }
.trio__numero {
    font-family: var(--display);
    font-size: var(--t-xs);
    letter-spacing: 0.4em;
    color: var(--ouro);
    display: block;
    margin-bottom: 0.5rem;
}
.trio__nome { font-size: var(--t-lg); margin-bottom: 0.3rem; }
.trio__sub  { font-size: var(--t-sm); color: var(--cinza); margin-bottom: var(--e-2); }
.trio__seta {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ouro-claro);
}
.trio__seta svg { width: 22px; transition: transform 0.45s var(--curva); }
.trio__item:hover .trio__seta svg { transform: translateX(7px); }

/* ------------------------------------------------- 11. PÁGINA DE PRODUTO */
.produto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-5);
    align-items: start;
    padding-top: calc(var(--topo-h) + var(--e-3));   /* desvia do cabeçalho fixo */
    padding-bottom: var(--e-5);
}

/* A coluna da direita é longa (ficha + medidas); a foto acompanha a rolagem
   em vez de deixar meia tela vazia à esquerda. */
.produto__galeria {
    position: sticky;
    top: calc(var(--topo-h) * 0.55 + var(--e-2));
}
@media (max-width: 1080px) {
    .produto__galeria { position: static; }
}

/* As fotos do acervo são todas em fundo branco. Em vez de brigar com isso,
   a foto vira uma PLACA de marfim montada na página — como o espécime
   montado num certificado. O `multiply` funde o branco do JPG com a placa,
   então não existe emenda visível: some o quadrado branco cru. */
.galeria__principal {
    position: relative;
    aspect-ratio: 1;
    background: var(--placa, #f4f0e7);
    border: 1px solid rgba(204, 153, 51, 0.35);
    overflow: hidden;
}
.galeria__principal img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 6%;
    mix-blend-mode: multiply;
}

.galeria__miniaturas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.galeria__mini {
    aspect-ratio: 1;
    background: var(--placa, #f4f0e7);
    border: 1px solid rgba(204, 153, 51, 0.16);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.35s, border-color 0.35s;
    padding: 0;
}
.galeria__mini img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8%;
    mix-blend-mode: multiply;
}
.galeria__mini:hover,
.galeria__mini[aria-selected='true'] { opacity: 1; border-color: var(--ouro); }

.produto__categoria {
    font-size: var(--t-xs);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: var(--e-2);
}
.produto__nome { font-size: var(--t-xl); margin-bottom: var(--e-2); }

.produto__preco {
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.produto__valor { font-family: var(--display); font-size: var(--t-2xl); }
.produto__parcela { color: var(--cinza); font-size: var(--t-sm); }
.produto__pix {
    font-size: var(--t-sm);
    color: var(--ouro-claro);
    margin-bottom: var(--e-3);
}

/* O SELO — ficha técnica tratada como certificado lavrado.
   É a peça de identidade mais forte da página de produto. */
.selo {
    position: relative;
    border: 1px solid rgba(204, 153, 51, 0.3);
    padding: var(--e-3);
    margin: var(--e-3) 0;
    background: linear-gradient(160deg, rgba(27,24,19,0.9), rgba(18,16,13,0.9));
    overflow: hidden;
}
.selo__titulo {
    font-family: var(--display);
    font-size: var(--t-xs);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ouro);
    text-align: center;
    margin-bottom: var(--e-2);
    position: relative;
}
.selo__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem var(--e-2);
    margin: 0;
    position: relative;
}
.selo__lista div { border-top: 1px solid rgba(204, 153, 51, 0.14); padding-top: 0.5rem; }
.selo__lista dt {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cinza);
    margin-bottom: 0.15rem;
}
.selo__lista dd {
    margin: 0;
    font-family: var(--display);
    font-size: var(--t-sm);
    color: var(--marfim);
}

/* ------------------------------------------- 12. FORMULÁRIO DE MEDIDA */
.medida { margin: var(--e-3) 0; }

.campo { margin-bottom: var(--e-2); }
.campo__rotulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--t-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pergaminho);
    margin-bottom: 0.5rem;
}
.campo__rotulo em { font-style: normal; color: var(--ouro-sombra); letter-spacing: 0.06em; text-transform: none; }
.campo__ajuda { font-size: var(--t-xs); color: var(--cinza); margin-top: 0.35rem; line-height: 1.5; }
.campo__erro  { font-size: var(--t-xs); color: #d98b7a; margin-top: 0.35rem; }

.entrada, .selecao {
    width: 100%;
    padding: 0.95rem 1rem;
    background: var(--carvao);
    border: 1px solid rgba(204, 153, 51, 0.22);
    color: var(--marfim);
    font-family: var(--corpo);
    font-size: var(--t-base);
    letter-spacing: 0.04em;
    transition: border-color 0.35s, background 0.35s;
}
.entrada:focus, .selecao:focus {
    outline: none;
    border-color: var(--ouro);
    background: var(--grafite);
}
.entrada::placeholder { color: var(--cinza-fundo); }

.selecao {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cc9933' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 17px;
    padding-right: 2.6rem;
    cursor: pointer;
}
.selecao option { background: var(--carvao); color: var(--marfim); }

/* Seletor de cor da pedra (anel de formatura) */
.pedras { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pedra input { position: absolute; opacity: 0; width: 0; height: 0; }
.pedra span {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid rgba(204, 153, 51, 0.24);
    cursor: pointer;
    transition: border-color 0.3s, transform 0.3s var(--curva);
    position: relative;
}
.pedra span::before {
    content: '';
    width: 24px; height: 24px;
    background: var(--cor-pedra);
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.5), 0 0 12px -2px var(--cor-pedra);
    transform: rotate(45deg);
}
.pedra input:checked + span { border-color: var(--ouro); transform: scale(1.08); }
.pedra input:focus-visible + span { outline: 1px solid var(--ouro); outline-offset: 3px; }

/* Contador de caracteres da gravação */
.contagem { font-size: var(--t-xs); color: var(--cinza); letter-spacing: 0.1em; }
.contagem--cheio { color: var(--ouro); }

/* Pré-visualização da gravação: mostra o nome como sairá no buril */
.gravacao-previa {
    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(204, 153, 51, 0.3);
    background: var(--breu);
    text-align: center;
    font-family: 'Cinzel Decorative', var(--display);
    font-size: var(--t-md);
    letter-spacing: 0.16em;
    color: var(--ouro-claro);
    min-height: 3.4rem;
    display: grid;
    place-items: center;
}
.gravacao-previa:empty::before {
    content: 'sem gravação';
    font-family: var(--corpo);
    font-size: var(--t-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cinza-fundo);
}

/* --------------------------------------------------------- 13. CARRINHO */
.carrinho-linha {
    display: grid;
    grid-template-columns: 108px 1fr auto;
    gap: var(--e-2);
    padding: var(--e-2) 0;
    border-bottom: 1px solid rgba(204, 153, 51, 0.13);
    align-items: start;
}
.carrinho-linha__foto { aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(204,153,51,0.16); }
.carrinho-linha__foto img { width: 100%; height: 100%; object-fit: cover; }
.carrinho-linha__nome { font-family: var(--display); font-size: var(--t-base); color: var(--marfim); }

.personalizacao-lista {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid rgba(204, 153, 51, 0.12);
    font-size: var(--t-xs);
    color: var(--cinza);
    display: grid;
    gap: 0.22rem;
}
.personalizacao-lista strong {
    color: var(--pergaminho);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.66rem;
}

.qtd { display: inline-flex; border: 1px solid rgba(204, 153, 51, 0.24); }
.qtd button {
    width: 34px; height: 34px;
    background: none; border: 0;
    color: var(--ouro); cursor: pointer;
    font-size: var(--t-md); line-height: 1;
    transition: background 0.3s;
}
.qtd button:hover { background: rgba(204, 153, 51, 0.12); }
.qtd input {
    width: 44px;
    background: none; border: 0;
    border-inline: 1px solid rgba(204, 153, 51, 0.24);
    color: var(--marfim);
    text-align: center;
    font-family: var(--corpo);
}

.resumo {
    background: var(--carvao);
    border: 1px solid rgba(204, 153, 51, 0.2);
    padding: var(--e-3);
    position: sticky;
    top: 120px;
}
.resumo__linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    font-size: var(--t-sm);
    color: var(--pergaminho);
}
.resumo__linha--total {
    border-top: 1px solid rgba(204, 153, 51, 0.24);
    margin-top: 0.6rem;
    padding-top: var(--e-2);
    font-family: var(--display);
    font-size: var(--t-md);
    color: var(--marfim);
}
.resumo__gratis { color: var(--ouro-claro); }

/* ----------------------------------------------------- 14. PROVA SOCIAL */
.mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2px;
}
.mosaico figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; }
.mosaico img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(0.55) contrast(1.05);
    transition: filter 0.7s var(--curva), transform 0.9s var(--curva-lenta);
}
.mosaico figure:hover img { filter: grayscale(0) contrast(1); transform: scale(1.05); }
.mosaico figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 0.8rem;
    background: linear-gradient(0deg, rgba(10,9,8,0.9), transparent);
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ouro-claro);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s, transform 0.45s var(--curva);
}
.mosaico figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------ 15. RODAPÉ */
.rodape {
    position: relative;
    margin-top: var(--e-6);
    border-top: 1px solid rgba(204, 153, 51, 0.2);
    background: var(--carvao);
    padding: var(--e-5) 0 var(--e-3);
    overflow: hidden;
}
.rodape__grade {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--e-4);
    position: relative;
}
.rodape h4 {
    font-size: var(--t-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: var(--e-2);
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--t-sm); }
.rodape a { color: var(--pergaminho); transition: color 0.3s; }
.rodape a:hover { color: var(--ouro-claro); }
.rodape__logo { width: 168px; margin-bottom: var(--e-2); }
.rodape__sobre { font-size: var(--t-sm); color: var(--cinza); max-width: 34ch; }

.rodape__base {
    margin-top: var(--e-4);
    padding-top: var(--e-2);
    border-top: 1px solid rgba(204, 153, 51, 0.14);
    display: flex;
    justify-content: space-between;
    gap: var(--e-2);
    flex-wrap: wrap;
    font-size: var(--t-xs);
    color: var(--cinza);
    letter-spacing: 0.08em;
}

.sociais { display: flex; gap: 0.7rem; }
.sociais a {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(204, 153, 51, 0.26);
    transition: background 0.35s, border-color 0.35s, color 0.35s;
}
.sociais a:hover { background: var(--ouro); border-color: var(--ouro); color: var(--breu); }
.sociais svg { width: 17px; height: 17px; fill: currentColor; }

/* --------------------------------------------------- 16. WHATSAPP FLUTUA */
.zap-flutua {
    position: fixed;
    right: 1.4rem; bottom: 1.4rem;
    z-index: 90;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 26px -6px rgba(37, 211, 102, 0.55);
    transition: transform 0.4s var(--curva);
}
.zap-flutua:hover { transform: scale(1.09) rotate(-6deg); }
.zap-flutua svg { width: 28px; height: 28px; fill: currentColor; }

/* ------------------------------------------------------------ 17. AVISOS */
.aviso {
    padding: var(--e-2);
    border: 1px solid;
    font-size: var(--t-sm);
    margin-bottom: var(--e-3);
}
.aviso--ok   { border-color: rgba(86, 168, 106, 0.5); color: #9ed6ab; background: rgba(86,168,106,0.07); }
.aviso--erro { border-color: rgba(200, 90, 70, 0.5);  color: #e2a394; background: rgba(200,90,70,0.07); }

/* Toast — o retorno de "adicionado à sacola" flutua sobre a página em vez de
   entrar no fluxo. Assim não precisa somar a altura do cabeçalho de novo
   (o que abria um vão enorme) e a mensagem aparece onde o olho já está. */
.toast {
    position: fixed;
    z-index: 130;
    top: calc(var(--topo-h) + 0.75rem);
    left: 50%;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    width: max-content;
    max-width: min(92vw, 30rem);
    padding: 0.9rem 1rem 0.9rem 1.25rem;
    border: 1px solid var(--ouro);
    background: rgba(18, 16, 13, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
    font-size: var(--t-sm);
    color: var(--marfim);
    animation: toast-entra 0.5s var(--curva-lenta) both,
               toast-sai 0.6s var(--curva) 5.4s forwards;
}
.toast--ok   { border-color: rgba(126, 190, 142, 0.65); }
.toast--erro { border-color: rgba(214, 122, 100, 0.7); }

.toast__fechar {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: none;
    border: 1px solid rgba(204, 153, 51, 0.3);
    color: var(--ouro-claro);
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.toast__fechar:hover { background: var(--ouro); color: var(--breu); }

@keyframes toast-entra {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-sai {
    to { opacity: 0; transform: translate(-50%, -14px); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; transform: translateX(-50%); }
}

.vazio {
    text-align: center;
    padding: var(--e-6) var(--e-2);
    color: var(--cinza);
}
.vazio h2 { margin-bottom: var(--e-2); }

/* ------------------------------------------------------- 18. ANIMAÇÕES */
/* Revelação no scroll — aplicada via IntersectionObserver */
[data-revelar] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--curva-lenta), transform 0.9s var(--curva-lenta);
}
[data-revelar].visivel { opacity: 1; transform: none; }

/* Entrada do hero: escalonada, um elemento após o outro */
.entra { opacity: 0; animation: subir 1.1s var(--curva-lenta) forwards; }
.entra--1 { animation-delay: 0.15s; }
.entra--2 { animation-delay: 0.32s; }
.entra--3 { animation-delay: 0.49s; }
.entra--4 { animation-delay: 0.66s; }

@keyframes subir {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-revelar] { opacity: 1; transform: none; }
    .entra { opacity: 1; animation: none; }
}

/* ---------------------------------------------------------- 19. RESPONSIVO */
@media (max-width: 1080px) {
    .produto { grid-template-columns: 1fr; gap: var(--e-4); }
    .rodape__grade { grid-template-columns: 1fr 1fr; gap: var(--e-3); }
    .trio { grid-template-columns: 1fr; }
    .trio__item { min-height: 320px; }
}

@media (max-width: 860px) {
    /* o menu vira painel sobreposto, então o cabeçalho fica bem mais baixo */
    :root { --e-6: 4.5rem; --e-5: 3rem; --topo-h: 10rem; }

    .menu-hamburguer { display: inline-grid; }

    /* no celular o menu vira painel inteiro; a faixa some do fluxo */
    .topo__nav { border-top: 0; }

    .nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--e-3);
        padding: var(--e-4);
        background: rgba(10, 9, 8, 0.98);
        backdrop-filter: blur(10px);
        font-size: var(--t-md);
        letter-spacing: 0.2em;
        transform: translateX(100%);
        transition: transform 0.55s var(--curva-lenta);
        z-index: 120;
    }
    .nav[data-aberto='true'] { transform: none; }
    .nav a { white-space: normal; text-align: center; }

    .hero { min-height: 88svh; }
    .carrinho-linha { grid-template-columns: 84px 1fr; }
    .carrinho-linha__acoes { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
    .resumo { position: static; }
    .grade { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--e-1); }
    .joia__specs { display: none; }
}

@media (max-width: 520px) {
    .rodape__grade { grid-template-columns: 1fr; }
    .btn { padding: 0.95rem 1.6rem; }
    .hero__acoes .btn { width: 100%; }
}

/* ------------------------------------------------------------ 20. IMPRESSÃO */
@media print {
    .topo, .rodape, .zap-flutua, .btn { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ---------------------------------------------------- 21. TRILHA (SEO) */
.trilha { margin-bottom: var(--e-3); }
.trilha ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0; padding: 0;
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cinza);
}
.trilha li + li::before {
    content: '·';
    margin-right: 0.5rem;
    color: var(--ouro-sombra);
}
.trilha a { color: var(--cinza); transition: color 0.3s; }
.trilha a:hover { color: var(--ouro-claro); }
.trilha [aria-current] { color: var(--pergaminho); }

/* a trilha já desviou do cabeçalho; o bloco do produto não repete o recuo */
.produto--com-trilha { padding-top: 0; }

/* ------------------------------------------------------ 22. FAQ */
.faq details {
    border-bottom: 1px solid rgba(204, 153, 51, 0.14);
    padding: 0.2rem 0;
}
.faq summary {
    cursor: pointer;
    padding: 1rem 0;
    font-family: var(--display);
    font-size: var(--t-base);
    color: var(--marfim);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: color 0.3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    flex-shrink: 0;
    font-family: var(--corpo);
    font-size: var(--t-lg);
    line-height: 1;
    color: var(--ouro);
    transition: transform 0.35s var(--curva);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ouro-claro); }
.faq details p {
    margin: 0 0 1.1rem;
    color: var(--cinza);
    font-size: var(--t-sm);
    max-width: 62ch;
}

/* ------------------------------------- 23. HERO COM FRASE LONGA */
/* "Aqui, tudo que reluz é ouro!" tem quase quatro vezes o comprimento de
   "Ouro 18k". No tamanho original ela quebraria em qualquer tela, então a
   escala cai e cada linha ganha largura máxima para quebrar onde deve. */
.hero__titulo--frase {
    font-size: clamp(2.1rem, 6.2vw, 5rem);
    line-height: 1.02;
}
.hero__titulo--frase span {
    display: block;
    max-width: 18ch;
    margin-inline: auto;
}
.hero__titulo--frase em {
    display: block;
    font-family: 'Cinzel Decorative', var(--display);
    font-style: normal;
    font-size: 1.02em;
    letter-spacing: 0.02em;
    margin-top: 0.12em;
}

@media (max-width: 520px) {
    .hero__titulo--frase span { max-width: 12ch; }
}

/* ------------------------------------- 24. CAMPOS DO MERCADO PAGO */
/* Os campos de cartão são iframes do Mercado Pago. Herdam a moldura do
   .entrada, mas a altura precisa ser fixada porque o iframe não cresce. */
.campo-mp {
    height: 3.35rem;
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
}
.campo-mp iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ------------------------------------- 25. CONVIVÊNCIA COM O CHAT */
/* O tawk.to ocupa o canto inferior direito. Com o chat ligado, o botão de
   WhatsApp muda para o canto esquerdo: cada um no seu lado, sem disputa e
   sem um esconder o outro ao abrir. */
.zap-flutua--esquerda {
    right: auto;
    left: 1.4rem;
}

/* ------------------------------------- 26. SELO DE SEGURANÇA */
.selo-seguro {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid rgba(204, 153, 51, 0.24);
    border-radius: 3px;
    background: rgba(204, 153, 51, 0.05);
    transition: border-color 0.35s var(--curva), background 0.35s var(--curva);
}
.selo-seguro:hover {
    border-color: rgba(204, 153, 51, 0.55);
    background: rgba(204, 153, 51, 0.09);
}
.selo-seguro svg {
    width: 22px; height: 22px;
    flex-shrink: 0;
    fill: var(--ouro);
    color: var(--breu);          /* o "certo" dentro do escudo */
}
.selo-seguro span {
    display: grid;
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pergaminho);
    line-height: 1.5;
}
.selo-seguro em {
    font-style: normal;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--cinza);
}

/* Pontinho que pisca enquanto a tela do Pix espera o pagamento cair.
   Sinaliza que a página está viva — sem ele, "atualiza sozinha" é só
   uma promessa escrita, e quem acabou de pagar não confia. */
.pulso {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--ouro-claro);
    animation: pulso 1.6s ease-in-out infinite;
}
@keyframes pulso {
    0%, 100% { opacity: .25; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .pulso { animation: none; opacity: .7; }
}

/* ------------------------------------- 28. CONSENTIMENTO (LGPD) */
/* Barra rente ao rodapé da janela: informa sem tomar a tela e sem exigir
   resposta para navegar. Nasce com [hidden]; o marketing.js só a revela para
   quem ainda não escolheu. A faixa dourada no topo é a mesma do cabeçalho —
   o aviso pertence à loja, não parece um enxerto de terceiro. */
/* display:flex de autor vence o display:none que o navegador dá a [hidden] —
   sem esta linha o banner apareceria para quem já respondeu. */
.consentimento[hidden] { display: none; }

.consentimento {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-3);
    padding: 1.1rem 1.4rem;
    background: rgba(18, 16, 13, 0.96);
    border-top: 1px solid rgba(204, 153, 51, 0.3);
    box-shadow: 0 -14px 40px -18px rgba(0, 0, 0, 0.9);
    transform: translateY(100%);
    transition: transform 0.45s var(--curva);
}
@supports (backdrop-filter: blur(8px)) {
    .consentimento { background: rgba(18, 16, 13, 0.9); backdrop-filter: blur(8px); }
}
.consentimento--visivel { transform: translateY(0); }

.consentimento__texto {
    margin: 0;
    max-width: 62ch;
    font-size: var(--t-xs);
    line-height: 1.75;
    color: var(--pergaminho);
}
.consentimento__texto a {
    color: var(--ouro-claro);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.consentimento__acoes {
    display: flex;
    gap: 0.7rem;
    flex-shrink: 0;
}
/* Recusar tem o mesmo peso visual de aceitar: escolha livre não se induz com
   um botão apagado ao lado de outro em ouro. */
.consentimento .btn {
    padding: 0.75rem 1.6rem;
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
}
.btn--recusar { border-color: rgba(221, 212, 194, 0.4); }

/* Enquanto a barra está na tela, os botões flutuantes sobem — nenhum dos dois
   pode ficar por baixo dela, de qualquer um dos lados em que estejam. */
.consentimento--visivel ~ .zap-flutua { bottom: 6.4rem; }

@media (max-width: 700px) {
    .consentimento { flex-direction: column; align-items: stretch; text-align: center; }
    .consentimento__acoes { justify-content: center; }
    .consentimento__acoes .btn { flex: 1; }
    .consentimento--visivel ~ .zap-flutua { bottom: 10.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .consentimento { transition: none; }
}