/* =====================================================================================================================
   Qcompra — site institucional (HTML + CSS + JS puros, sem dependências).
   Ordem: 1. fontes e variáveis · 2. base · 3. utilitários · 4. topo · 5. botões e links · 6. seções da home ·
   7. páginas internas · 8. rodapé · 9. WhatsApp flutuante · 10. animações · 11. responsivo · 12. impressão
   Cores da marca (do logo): laranja #FC9113 e grafite #454545. Laranja NÃO serve para texto pequeno em fundo
   branco (contraste 2,2:1): para texto use --laranja-texto; botão laranja leva texto escuro.
   ===================================================================================================================== */

/* ------------------------------------------------------------------ 1. fontes e variáveis */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fontes/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fontes/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fontes/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fontes/poppins-700.woff2") format("woff2"); }

:root {
    --laranja: #fc9113;
    --laranja-claro: #ffb054;
    --laranja-texto: #a65200;      /* 5,3:1 sobre branco */
    --grafite: #454545;
    --grafite-escuro: #262626;
    --texto: #1f1f1f;
    --texto-suave: #555555;         /* 7,4:1 sobre branco */
    --creme: #fff6ea;
    --cinza-fundo: #f6f5f3;
    --borda: #e8e3dc;
    --branco: #ffffff;
    --whatsapp: #25d366;

    --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --largura: 1180px;
    --margem: clamp(16px, 4vw, 32px);
    --secao: clamp(56px, 8vw, 104px);
    --raio: 18px;
    --raio-pequeno: 10px;
    --sombra: 0 10px 30px rgba(38, 38, 38, .08);
    --sombra-forte: 0 18px 40px rgba(38, 38, 38, .14);
    --altura-topo: 76px;
}

/* ------------------------------------------------------------------ 2. base */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-topo) + 16px);
}

body {
    margin: 0;
    background: var(--branco);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
    margin: 0 0 .5em;
    color: var(--grafite-escuro);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--laranja-texto); }
a:hover { color: var(--grafite-escuro); }

:focus-visible {
    outline: 3px solid var(--grafite-escuro);
    outline-offset: 3px;
    border-radius: 4px;
}

strong { font-weight: 600; }

/* ------------------------------------------------------------------ 3. utilitários */
.container {
    width: 100%;
    max-width: calc(var(--largura) + 2 * var(--margem));
    margin: 0 auto;
    padding: 0 var(--margem);
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.pular {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: var(--raio-pequeno);
    background: var(--grafite-escuro);
    color: var(--branco);
    font-weight: 600;
    text-decoration: none;
}

.pular:focus { top: 12px; color: var(--branco); }

.icone {
    width: 24px;
    height: 24px;
    flex: none;
}

.sobretitulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--laranja-texto);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sobretitulo::before {
    content: "";
    width: 24px;
    height: 3px;
    border-radius: 3px;
    background: var(--laranja);
}

.secao { padding: var(--secao) 0; }
.secao--creme { background: var(--creme); }
.secao--cinza { background: var(--cinza-fundo); }

.secao__cabeca {
    max-width: 720px;
    margin: 0 0 clamp(32px, 4vw, 48px);
}

.secao__cabeca--centro {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.secao__cabeca--centro .sobretitulo { justify-content: center; }

.secao__cabeca p:last-child { margin-bottom: 0; }

.lead {
    color: var(--texto-suave);
    font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem);
}

/* ------------------------------------------------------------------ 4. topo */
.topo {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid transparent;
    transition: box-shadow .2s ease, border-color .2s ease;
}

@supports (backdrop-filter: blur(8px)) {
    .topo {
        background: rgba(255, 255, 255, .86);
        backdrop-filter: saturate(1.4) blur(10px);
    }
}

.topo--rolado {
    border-bottom-color: var(--borda);
    box-shadow: 0 6px 20px rgba(38, 38, 38, .06);
}

.topo__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--altura-topo);
}

.topo__marca { flex: none; }
.topo__marca img { width: 168px; height: auto; }

.topo__nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topo__nav a {
    display: block;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--grafite-escuro);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.topo__nav a:hover { background: var(--creme); color: var(--laranja-texto); }

.topo__nav a[aria-current="page"] {
    background: var(--creme);
    color: var(--laranja-texto);
    font-weight: 600;
}

.topo__menu-botao {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--grafite-escuro);
    cursor: pointer;
}

.topo__menu-botao:hover { background: var(--creme); }
.topo__menu-botao .icone--fechar { display: none; }
.topo__menu-botao[aria-expanded="true"] .icone--abrir { display: none; }
.topo__menu-botao[aria-expanded="true"] .icone--fechar { display: block; }

/* ------------------------------------------------------------------ 5. botões e links */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.botao:hover { transform: translateY(-2px); }

.botao--primario {
    background: var(--laranja);
    color: var(--grafite-escuro);
    box-shadow: 0 10px 24px rgba(252, 145, 19, .35);
}

.botao--primario:hover { background: var(--laranja-claro); color: var(--grafite-escuro); }

.botao--secundario {
    border-color: var(--grafite-escuro);
    background: transparent;
    color: var(--grafite-escuro);
}

.botao--secundario:hover { background: var(--grafite-escuro); color: var(--branco); }

.link-seta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
}

.link-seta .icone { width: 20px; height: 20px; transition: transform .15s ease; }
.link-seta:hover .icone { transform: translateX(4px); }

/* ------------------------------------------------------------------ 6. seções da home */

/* 6.1 abertura */
.abertura {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px);
    background:
        radial-gradient(1200px 520px at 100% 0%, var(--creme) 0%, rgba(255, 246, 234, 0) 60%),
        var(--branco);
}

.abertura__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 8px 16px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--branco);
    color: var(--grafite);
    font-size: .88rem;
    font-weight: 500;
    box-shadow: var(--sombra);
}

.selo .icone { width: 18px; height: 18px; color: var(--laranja); }

/* grifo laranja atrás do texto — acompanha a quebra de linha (o pedaço de cada linha ganha o seu grifo) */
.destaque {
    padding: 0 .06em;
    background: linear-gradient(transparent 62%, rgba(252, 145, 19, .55) 62%, rgba(252, 145, 19, .55) 90%, transparent 90%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@media (min-width: 641px) {
    .destaque { white-space: nowrap; }   /* na tela larga a expressão grifada fica numa linha só */
}

.abertura__sub {
    max-width: 560px;
    margin-bottom: 32px;
    color: var(--texto-suave);
    font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem);
}

.abertura__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.abertura__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    width: 100%;
    margin-left: auto;
}

.abertura__circulo {
    position: absolute;
    inset: 6%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, var(--laranja-claro) 0%, var(--laranja) 55%, #e67c00 100%);
    box-shadow: 0 30px 60px rgba(252, 145, 19, .35), inset 0 -18px 40px rgba(0, 0, 0, .08);
}

.abertura__circulo::before {
    content: "";
    position: absolute;
    inset: -5%;
    border: 2px dashed rgba(252, 145, 19, .35);
    border-radius: 50%;
}

.abertura__q { width: 52%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .15)); }

.flutuante {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 14px;
    background: var(--branco);
    color: var(--grafite-escuro);
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--sombra-forte);
}

.flutuante__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--creme);
    color: var(--laranja-texto);
}

.flutuante__icone .icone { width: 20px; height: 20px; }

.flutuante--1 { top: 4%; left: -4%; }
.flutuante--2 { top: 22%; right: -6%; }
.flutuante--3 { bottom: 20%; left: -8%; }
.flutuante--4 { bottom: 3%; right: 4%; }

/* 6.2 números */
.numeros {
    background: var(--grafite-escuro);
    color: var(--branco);
}

.numeros__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
    list-style: none;
}

.numeros__lista li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 32px 24px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.numeros__lista li:first-child { border-left: 0; padding-left: 0; }

.numeros__lista strong {
    color: var(--laranja);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.1;
}

.numeros__lista span { color: rgba(255, 255, 255, .82); font-size: .95rem; }

/* 6.3 duas colunas (texto + foto) */
.dupla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.dupla--invertida > :first-child { order: 2; }

.foto {
    position: relative;
    margin: 0;
}

.foto img {
    width: 100%;
    border-radius: var(--raio);
    object-fit: cover;
    box-shadow: var(--sombra-forte);
}

.foto::before {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -14px;
    z-index: -1;
    width: 55%;
    height: 70%;
    border-radius: var(--raio);
    background: var(--laranja);
    opacity: .9;
}

.foto--esquerda::before { right: auto; left: -14px; }

.lista-check {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.lista-check li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lista-check .icone {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--laranja-texto);
}

/* 6.4 categorias */
.categorias {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.categoria {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--branco);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.categoria:hover {
    border-color: var(--laranja-claro);
    box-shadow: var(--sombra);
    transform: translateY(-3px);
}

.categoria__icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--creme);
    color: var(--laranja-texto);
}

.categoria__icone .icone { width: 26px; height: 26px; }

.categoria h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.categoria p {
    margin: 2px 0 0;
    color: var(--texto-suave);
    font-size: .85rem;
    line-height: 1.4;
}

/* 6.5 marcas: lista estática sem JS ou com preferência por movimento reduzido */
.marcas-acoes { display: flex; justify-content: flex-end; margin-bottom: 8px; }

.marcas-pausar {
    padding: 8px 14px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--branco);
    color: var(--texto-suave);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.marcas-pausar[hidden] { display: none; }
.marcas-pausar:hover { border-color: var(--laranja); color: var(--laranja-texto); }
.marcas-janela { padding: 12px 0 18px; }

.marcas-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marcas-lista[aria-hidden="true"] { display: none; }

.marca {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 160px;
    min-height: 140px;
    padding: 22px 16px 18px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--branco);
    box-shadow: 0 6px 16px rgba(38, 38, 38, .04);
}

.marca__logo { display: grid; place-items: center; width: 126px; height: 52px; }
.marca__logo img { width: 116px; height: 46px; object-fit: contain; }
.marca__nome { color: var(--grafite); font-size: .82rem; font-weight: 600; letter-spacing: .08em; }

.marcas-carrossel[data-animado] .marcas-janela {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.marcas-carrossel[data-animado] .marcas-faixa {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: marcas-deslizar 36s linear infinite;
}

.marcas-carrossel[data-animado] .marcas-lista { flex: none; flex-wrap: nowrap; }
.marcas-carrossel[data-animado] .marcas-lista[aria-hidden="true"] { display: flex; }
.marcas-carrossel[data-pausado] .marcas-faixa,
.marcas-janela:hover .marcas-faixa { animation-play-state: paused; }

@keyframes marcas-deslizar {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 12px)); }
}

.nota {
    margin: 24px 0 0;
    color: var(--texto-suave);
    font-size: .85rem;
    text-align: center;
}

/* 6.6 diferenciais (faixa escura) */
.secao--escura {
    position: relative;
    overflow: hidden;
    background: var(--grafite-escuro);
    color: rgba(255, 255, 255, .86);
}

.secao--escura::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--laranja);
    opacity: .12;
}

.secao--escura h2,
.secao--escura h3 { color: var(--branco); }

.secao--escura .sobretitulo { color: var(--laranja); }

.secao--escura .lead { color: rgba(255, 255, 255, .8); }

.cartoes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cartao {
    height: 100%;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .04);
}

.cartao__icone {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--laranja);
    color: var(--grafite-escuro);
}

.cartao__icone .icone { width: 26px; height: 26px; }

.cartao h3 { margin-bottom: 8px; }

.cartao p { margin: 0; font-size: .95rem; }

/* 6.7 onde comprar */
.chamada {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    padding: clamp(28px, 5vw, 56px);
    border-radius: calc(var(--raio) + 6px);
    background: var(--branco);
    box-shadow: var(--sombra-forte);
}

.chamada__icone {
    display: grid;
    place-items: center;
    width: clamp(88px, 10vw, 120px);
    height: clamp(88px, 10vw, 120px);
    border-radius: 28px;
    background: var(--laranja);
    color: var(--grafite-escuro);
}

.chamada__icone .icone { width: 52%; height: 52%; stroke-width: 1.6; }

.chamada h2 { margin-bottom: 12px; }

.chamada p { color: var(--texto-suave); }

.chamada__aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 16px 18px;
    border-radius: var(--raio-pequeno);
    background: var(--creme);
    color: var(--texto);
}

.chamada__aviso .icone { margin-top: 2px; color: #128c4a; }

.chamada--marketplaces { row-gap: 28px; }
.chamada--marketplaces .chamada__texto > p:last-child { margin-bottom: 0; }
.chamada--marketplaces .marketplaces,
.chamada--marketplaces .chamada__aviso { grid-column: 1 / -1; }
.chamada--marketplaces .chamada__aviso { margin: 0; }

.marketplaces {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketplace {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 98px;
    padding: 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--branco);
    color: var(--grafite-escuro);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.marketplace:hover {
    transform: translateY(-3px);
    border-color: var(--laranja);
    box-shadow: var(--sombra);
    color: var(--grafite-escuro);
}

.marketplace__marca {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
}

.marketplace__marca img { width: 40px; height: 40px; object-fit: contain; }
.marketplace__marca--magalu { border-radius: 10px; background: #0086ff; }
.marketplace__marca--martins { border-radius: 10px; background: #174b87; }
.marketplace__texto { min-width: 0; }
.marketplace__texto strong { display: block; font-size: 1rem; line-height: 1.35; }
.marketplace__acao { display: block; margin-top: 4px; color: var(--texto-suave); font-size: .8rem; }
.marketplace > .icone { width: 18px; height: 18px; margin-left: auto; color: var(--laranja-texto); transform: rotate(-45deg); }

/* ------------------------------------------------------------------ 7. páginas internas */
.cabecalho-pagina {
    padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 64px);
    background:
        radial-gradient(900px 400px at 100% 0%, var(--creme) 0%, rgba(255, 246, 234, 0) 65%),
        var(--branco);
}

.cabecalho-pagina h1 { max-width: 820px; }

.cabecalho-pagina .lead { max-width: 720px; margin-bottom: 0; }

.trilha {
    margin: 0 0 16px;
    padding: 0;
    color: var(--texto-suave);
    font-size: .88rem;
    list-style: none;
}

.trilha li { display: inline; }
.trilha li + li::before { content: "›"; margin: 0 8px; color: var(--laranja-texto); }
.trilha a { color: var(--texto-suave); }

.valores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.valor {
    height: 100%;
    padding: 28px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--branco);
}

.valor .categoria__icone { margin-bottom: 16px; }

.valor p { margin: 0; color: var(--texto-suave); }

/* texto corrido (política) */
.texto-legal {
    max-width: 780px;
}

.texto-legal h2 {
    margin-top: 2.2em;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
}

.texto-legal h2:first-child { margin-top: 0; }

.texto-legal ul { padding-left: 1.25em; }
.texto-legal li { margin-bottom: .5em; }

.texto-legal .atualizacao {
    margin-bottom: 2em;
    color: var(--texto-suave);
    font-size: .92rem;
}

/* 404 */
.erro {
    padding: clamp(64px, 10vw, 120px) 0;
    text-align: center;
}

.erro__numero {
    margin: 0;
    color: var(--laranja);
    font-size: clamp(5rem, 3rem + 10vw, 9rem);
    font-weight: 700;
    line-height: 1;
}

.erro .lead { max-width: 560px; margin: 0 auto 32px; }

.erro .abertura__acoes { justify-content: center; }

/* ------------------------------------------------------------------ 8. rodapé */
.rodape {
    padding: clamp(48px, 6vw, 72px) 0 calc(32px + env(safe-area-inset-bottom));
    background: var(--grafite-escuro);
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
}

.rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.rodape__logo { width: 168px; margin-bottom: 18px; }

.rodape h2 {
    margin: 0 0 14px;
    color: var(--branco);
    font-size: 1rem;
    font-weight: 600;
}

.rodape ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rodape li + li { margin-top: 8px; }

.rodape a {
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
}

.rodape a:hover { color: var(--laranja); text-decoration: underline; }

.redes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.redes li + li { margin-top: 0; }

.redes a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    color: var(--branco);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.redes a:hover {
    border-color: var(--laranja);
    background: var(--laranja);
    color: var(--grafite-escuro);
}

.redes .icone { width: 20px; height: 20px; }

.rodape__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 24px;
    font-size: .85rem;
}

.rodape__legal p { margin: 0; }

/* ------------------------------------------------------------------ 9. WhatsApp flutuante */
.whatsapp {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right));
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 150;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: var(--branco);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--whatsapp);
    opacity: .5;
    animation: pulso 2.6s ease-out infinite;
    z-index: -1;
}

.whatsapp:hover {
    color: var(--branco);
    transform: scale(1.06);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.whatsapp:focus-visible { outline-color: var(--grafite-escuro); outline-offset: 4px; border-radius: 50%; }

.whatsapp svg { width: 32px; height: 32px; }

@keyframes pulso {
    0% { transform: scale(1); opacity: .45; }
    70% { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ------------------------------------------------------------------ 10. animações de entrada (só com JS) */
.js .surgir {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.js .surgir.visivel {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .surgir { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 11. responsivo */
@media (max-width: 1080px) {
    .categorias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .marketplaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flutuante--3 { left: -2%; }
    .flutuante--2 { right: -2%; }
}

@media (max-width: 900px) {
    :root { --altura-topo: 68px; }

    .topo__menu-botao { display: inline-flex; }

    .topo__nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        padding: 8px var(--margem) 20px;
        border-bottom: 1px solid var(--borda);
        background: var(--branco);
        box-shadow: 0 18px 30px rgba(38, 38, 38, .1);
    }

    .topo__nav.aberto { display: block; }

    .topo__nav ul { flex-direction: column; align-items: stretch; gap: 2px; }

    .topo__nav a { padding: 14px 16px; border-radius: 12px; font-size: 1.02rem; }

    .abertura__grade,
    .dupla { grid-template-columns: minmax(0, 1fr); }

    .dupla--invertida > :first-child { order: 0; }

    .abertura__visual { max-width: 440px; margin: 8px auto 0; }

    .numeros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .numeros__lista li { padding: 24px 16px; }
    .numeros__lista li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .numeros__lista li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .12); }

    .cartoes,
    .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .rodape__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rodape__sobre { grid-column: 1 / -1; }

    .foto { margin-right: 14px; }
    .foto--esquerda { margin-right: 0; margin-left: 14px; }
}

@media (max-width: 640px) {
    .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .categoria { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }

    .cartoes,
    .valores { grid-template-columns: minmax(0, 1fr); }

    .chamada { grid-template-columns: minmax(0, 1fr); }
    .marketplaces { grid-template-columns: minmax(0, 1fr); }

    .flutuante { padding: 8px 12px 8px 8px; font-size: .8rem; }
    .flutuante__icone { width: 32px; height: 32px; }
    .flutuante--1 { left: 0; }
    .flutuante--2 { right: 0; }
    .flutuante--3 { left: 0; }
    .flutuante--4 { right: 0; }

    .abertura__acoes .botao { flex: 1 1 auto; }

    .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 32px; }

    .whatsapp { width: 56px; height: 56px; }
}

@media (max-width: 380px) {
    .categorias { grid-template-columns: minmax(0, 1fr); }
    .categoria { flex-direction: row; align-items: center; }
    .topo__marca img { width: 144px; }
}

/* ------------------------------------------------------------------ 12. impressão */
@media print {
    .topo, .whatsapp, .abertura__visual, .rodape .redes { display: none !important; }
    .js .surgir { opacity: 1; transform: none; }
    body { color: #000; }
    a { color: #000; }
}