/* =====================================================================
   IMAVI — site novo 2026
   style.css · v2 (22/09/2026) — revisão após crítica do Felipe

   Direção: aço + vinho. Paleta fria de oficina, Montserrat em caixa alta
   como sinalização industrial, Inter no corpo, números como elemento
   gráfico — é por tonelada e por metro que o comprador escolhe.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fontes (self-hosted)
   --------------------------------------------------------------------- */
@font-face { font-family: 'Inter'; src: url('../../fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/montserrat-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ---------------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------------- */
:root {
    --vinho:        #921E30;
    --vinho-escuro: #6E1524;
    --vinho-fundo:  #4E0F1A;
    --vinho-claro:  #B13146;   /* usado no hover do mapa */
    --brasa:        #D81E3B;

    --aco-900: #0E1115;
    --aco-850: #12161B;
    --aco-800: #171C22;
    --aco-700: #222831;
    --aco-600: #333B46;
    --aco-400: #7C8794;
    --aco-300: #A8B2BD;
    --aco-200: #CBD2DA;
    --concreto:   #EFF1F4;
    --concreto-2: #E0E4E9;
    --branco:  #FFFFFF;
    --grafite: #474747;

    --display: 'Montserrat', 'Arial Black', sans-serif;
    --corpo:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --container: 1280px;
    --gutter: 28px;
    --cabecalho-h: 92px;
    --radius: 3px;

    --transicao: 300ms cubic-bezier(.2, .7, .3, 1);
    --sombra: 0 18px 44px rgba(14,17,21,.13);
}

/* ---------------------------------------------------------------------
   3. Reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--cabecalho-h);
    /* ⚠️ Sem fundo no `html`, o branco do `body` propaga para a tela do navegador
       e o VÃO DA BARRA DE ROLAGEM fica branco a página inteira — uma faixa clara
       gritando ao lado do hero escuro. Com o fundo aqui, o vão acompanha o aço
       do projeto. O `body` continua branco e cobre todo o conteúdo. */
    background: var(--aco-900);
}
body {
    margin: 0;
    background: var(--branco);
    color: var(--aco-800);
    font-family: var(--corpo);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
dl, dd { margin: 0; }
p  { margin: 0 0 1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { margin: 0 0 .6em; font-family: var(--display); line-height: 1.04; letter-spacing: -.02em; }

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

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.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;
}

/* ---------------------------------------------------------------------
   4. Peças de tipografia
   --------------------------------------------------------------------- */
.etiqueta {
    display: inline-flex; align-items: center; gap: .65em;
    font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--brasa);
    margin: 0 0 1.1rem;
}
.etiqueta::before { content: ''; width: 24px; height: 2px; background: currentColor; }
.etiqueta--vinho { color: var(--vinho); }

.titulo-secao {
    font-size: clamp(28px, 3.7vw, 46px);
    font-weight: 900; text-transform: uppercase;
    color: var(--aco-900);
    max-width: 24ch;
    text-wrap: balance;
}
.titulo-secao--claro { color: var(--branco); }

.intro { font-size: 17px; color: var(--grafite); max-width: 60ch; }
.intro--claro { color: var(--aco-300); }

/* Botões */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .7em;
    padding: 16px 28px;
    font-size: 13.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    border-radius: var(--radius); transition: var(--transicao); text-align: center;
}
.btn svg { flex: 0 0 auto; transition: transform var(--transicao); }
.btn:hover svg { transform: translateX(4px); }

.btn--principal { background: var(--vinho); color: var(--branco); }
.btn--principal:hover { background: var(--brasa); }

.btn--contorno { border: 1.5px solid rgba(255,255,255,.5); color: var(--branco); }
.btn--contorno:hover { border-color: var(--branco); background: rgba(255,255,255,.12); }

.btn--escuro { background: var(--aco-900); color: var(--branco); }
.btn--escuro:hover { background: var(--vinho); }

.btn--branco { background: var(--branco); color: var(--vinho-fundo); }
.btn--branco:hover { background: var(--aco-200); }

/* ---------------------------------------------------------------------
   5. Header
   --------------------------------------------------------------------- */
.cabecalho {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    transition: background var(--transicao), box-shadow var(--transicao), backdrop-filter var(--transicao);
}
.cabecalho::before {
    /* véu suave no topo para o menu ler sobre qualquer quadro do vídeo */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(14,17,21,.72), rgba(14,17,21,0));
    transition: opacity var(--transicao);
}
.cabecalho__inner {
    position: relative; z-index: 1;
    max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
    display: flex; align-items: center; gap: clamp(16px, 2vw, 34px);
    height: var(--cabecalho-h); transition: height var(--transicao);
}
.cabecalho.is-fixo {
    background: rgba(14,17,21,.92);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,.09), 0 12px 30px rgba(14,17,21,.3);
}
.cabecalho.is-fixo::before { opacity: 0; }
.cabecalho.is-fixo .cabecalho__inner { height: 72px; }

.cabecalho__logo { flex: 0 0 auto; }
/* Logo "Roll-On é IMAVI" (28/09/2026): 3,95:1, bem mais larga que a antiga (1,9:1) —
   176 px dá ~45 px de altura; a antiga tinha 132 × 70. */
.cabecalho__logo img { width: 176px; transition: width var(--transicao); }
.cabecalho.is-fixo .cabecalho__logo img { width: 150px; }

.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: 2px; }
.nav__link {
    display: block; padding: 10px 10px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .065em; text-transform: uppercase;
    color: rgba(255,255,255,.82); position: relative;
    transition: color var(--transicao);
    white-space: nowrap;   /* com 6 itens o rótulo quebrava em duas linhas (23/09) */
}
.nav__link::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px;
    background: var(--brasa); transform: scaleX(0); transform-origin: left;
    transition: transform var(--transicao);
}
.nav__link:hover { color: var(--branco); }
.nav__link:hover::after,
.nav__link.is-atual::after { transform: scaleX(1); }
.nav__link.is-atual { color: var(--branco); }

.cabecalho__acao { display: flex; align-items: center; gap: 12px; }
.cabecalho__tel {
    display: inline-flex; align-items: center; gap: .5em;
    font-size: 14px; font-weight: 600; color: var(--branco); white-space: nowrap;
    transition: color var(--transicao);
}
.cabecalho__tel svg { color: var(--brasa); }
.cabecalho__tel:hover { color: var(--aco-200); }
.cabecalho__cta {
    display: inline-flex; align-items: center; gap: .55em;
    padding: 11px 20px; border-radius: var(--radius);
    background: var(--vinho); color: var(--branco);
    font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap; transition: var(--transicao);
}
.cabecalho__cta:hover { background: var(--brasa); }

.menu-btn { display: none; padding: 10px; color: var(--branco); margin-left: auto; }

/* ---- Redes sociais (v20, §34) — só as preenchidas em Configurações ----
   No cabeçalho: ícones discretos antes do telefone, com um fio separando.
   No celular: descem para o fim do menu aberto. No rodapé: em círculos. */
.redes { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.redes a {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    color: rgba(255,255,255,.72);
    transition: color var(--transicao), background var(--transicao);
}
.redes a:hover { color: var(--branco); background: rgba(255,255,255,.1); }
.redes--cabecalho { padding-right: 12px; border-right: 1px solid rgba(255,255,255,.18); }
.nav__redes { display: none; }
.redes--rodape { gap: 8px; margin-top: 22px; }
.redes--rodape a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); color: var(--aco-300); }
.redes--rodape a:hover { border-color: var(--brasa); background: var(--vinho); color: var(--branco); }

/* ---------------------------------------------------------------------
   6. HERO — cabe inteiro na tela, sem scroll
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    max-height: 1000px;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--aco-900);
}
.hero__midia { position: absolute; inset: 0; z-index: 0; }
.hero__midia video, .hero__midia img { width: 100%; height: 100%; object-fit: cover; }
.hero__midia::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(14,17,21,.95) 0%, rgba(14,17,21,.62) 45%, rgba(14,17,21,.42) 100%),
        linear-gradient(110deg, rgba(78,15,26,.6) 0%, rgba(78,15,26,0) 62%),
        linear-gradient(to right, rgba(14,17,21,.5) 0%, rgba(14,17,21,0) 16%, rgba(14,17,21,0) 84%, rgba(14,17,21,.72) 100%);
}

.hero__corpo {
    position: relative; z-index: 2;
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--cabecalho-h);
    width: 100%; max-width: var(--container); margin: 0 auto;
    padding-left: var(--gutter); padding-right: var(--gutter);
}

.hero__titulo { margin: 0 0 1.5rem; display: block; }
.hero__titulo-forte {
    display: block;
    font-family: var(--display); font-weight: 900;
    font-size: clamp(31px, 5.1vw, 66px);
    line-height: .98; letter-spacing: -.025em;
    text-transform: uppercase; color: var(--branco);
    max-width: 17ch;
}
@media (max-width: 700px) { .hero__titulo-forte b { white-space: normal; } }
/* "Roll-On/Roll-Off" numa linha só (pedido do Felipe, v20): quebrava no hífen,
   "ROLL-" / "ON/ROLL-OFF". No desktop o termo é inquebrável e vai inteiro para a
   2.ª linha; no celular a ÚNICA quebra possível é o <wbr> depois da barra
   (inteiro, ele vazaria da tela em 390 px). */
/* ★ O vermelho do topo ACENDE (30/09/2026, §51). Pedido da IMAVI: "mudaria o tom do vermelho ou a
   letra para dar uma inovada". A marca fica — mesma fonte e, no fim, o mesmo brasa. O que muda é o
   movimento: ao abrir a página a linha sob "Roll-On/Roll-Off" se desenha em vinho, esquenta até um
   vermelho mais vivo com brilho e assenta no brasa; depois, a cada 7 s, um reflexo de luz corre por
   ela, como sobre aço pintado. A etiqueta "Fabricação própria desde 1966" esquenta junto (as duas
   leem --hero-risco, animada no .hero__corpo). Com movimento reduzido, tudo já nasce no estado final.
   A linha era text-decoration, que não anima: virou três camadas de fundo do <b> (reflexo, linha,
   brilho), com box-decoration-break para continuar sob cada pedaço quando o termo quebra no celular.
   POSIÇÃO MEDIDA contra o sublinhado antigo em 390, 768, 1024, 1440 e 1920 px: topo da linha a 10 px
   da linha de base, 5 px de espessura. Descida da Montserrat = .257em (medida): a caixa do texto
   termina .257em abaixo da base; o padding-bottom de 16 px estende a área pintada até o brilho. */
@property --hero-risco  { syntax: '<color>';  inherits: true; initial-value: #D81E3B; }
@property --hero-brilho { syntax: '<number>'; inherits: true; initial-value: .5; }
.hero__corpo { animation: hero-acende 2.2s cubic-bezier(.3, .6, .3, 1) .35s both; }
.hero__corpo > .etiqueta { color: var(--hero-risco); }
@keyframes hero-acende {
    0%, 30% { --hero-risco: #921E30; --hero-brilho: 0; }    /* vinho enquanto a linha se desenha */
    62%     { --hero-risco: #F23A56; --hero-brilho: 1; }    /* o pico: mais vivo, com brilho */
    100%    { --hero-risco: #D81E3B; --hero-brilho: .5; }   /* assenta no brasa da marca */
}
.hero__titulo-forte b {
    --risco-y: calc(100% - .257em - 1px);   /* fundo da linha = base + 15 px */
    --halo-y:  calc(100% - .257em + 6px);   /* brilho de 19 px centrado na linha */
    white-space: nowrap;
    color: inherit; font-weight: inherit;
    padding-bottom: 16px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background-image:
        linear-gradient(90deg, transparent 44%, rgba(255, 236, 239, .95) 50%, transparent 56%),
        linear-gradient(var(--hero-risco), var(--hero-risco)),
        linear-gradient(to bottom, transparent, rgb(242 58 86 / calc(var(--hero-brilho) * .35)), transparent);
    background-repeat: no-repeat;
    background-size: 250% 5px, 100% 5px, 100% 19px;
    background-position: 100% var(--risco-y), 0 var(--risco-y), 0 var(--halo-y);
    /* reflexo a partir de 1,05 s (a linha acabou de se desenhar): a 1.ª passagem cruza o PICO de calor */
    animation: hero-risco 700ms cubic-bezier(.6, 0, .2, 1) .35s both,
               hero-reflexo 7s ease-in-out 1.05s infinite;
}
@keyframes hero-risco { from { background-size: 250% 5px, 0% 5px, 0% 19px; } }
/* o reflexo mora numa faixa 2,5× mais larga que o termo: em 100% está fora, à esquerda; em 0%, fora, à direita */
@keyframes hero-reflexo {
    0%        { background-position: 100% var(--risco-y), 0 var(--risco-y), 0 var(--halo-y); }
    20%, 100% { background-position: 0% var(--risco-y), 0 var(--risco-y), 0 var(--halo-y); }
}

/* ★ A onda de calor atravessa o NOME (30/09/2026, §51 — "algo ainda mais destacado"). No pico da
   acendida e depois a cada 7 s, uma faixa brasa percorre as letras de "Roll-On/Roll-Off" no MESMO
   passo do reflexo branco da linha: vermelho na letra branca, branco na linha vermelha. Mesmo relógio
   (7 s, 1,05 s, 20% do ciclo atravessando) e mesma largura (a do termo): as duas andam juntas.
   Parado, o texto é branco puro, como antes — o vermelho saiu do texto em 22/09 por ficar ilegível
   sobre o caminhão vermelho do vídeo; aqui ele só PASSA. Sem suporte a background-clip: text, nada
   muda (o texto fica branco). Alto contraste do Windows: texto normal, sem a onda. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__termo {
        /* faixa estreita e de borda curta: o branco→vermelho passa pelo rosa, e rosa largo lê como doce, não como aço quente */
        background-image: linear-gradient(100deg, #FFFFFF 0 45.5%, #F23A56 48%, #D81E3B 50%, #F23A56 52%, #FFFFFF 54.5% 100%);
        background-size: 250% 100%;
        background-repeat: no-repeat;
        background-position: 100% 0;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: hero-onda 7s ease-in-out 1.05s infinite;
    }
}
@keyframes hero-onda {
    0%        { background-position: 100% 0; }
    20%, 100% { background-position: 0% 0; }
}
@media (forced-colors: active) {
    .hero__termo { background: none; -webkit-text-fill-color: currentColor; }
}
.hero__titulo-fraco {
    display: block;
    margin-top: .55em;
    font-family: var(--corpo); font-weight: 400;
    font-size: clamp(15.5px, 1.55vw, 21px);
    line-height: 1.45; letter-spacing: 0;
    text-transform: none; color: rgba(255,255,255,.82);
    /* 58ch (29/09/2026, pedido da IMAVI): com 46ch a frase (53 caracteres) quebrava e
       "cargas" ficava sozinha na 2.ª linha. No celular, onde quebra de qualquer jeito,
       `pretty` evita a palavra solta no fim. */
    max-width: 58ch;
    text-wrap: pretty;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* Botões das abas (Linhas e Poliguindastes, home) e da ficha do produto (28/09/2026).
   Não tinham regra nenhuma: ficavam lado a lado só pelo espaço do HTML e, quando o
   rótulo crescia ("Conheça o Duplo Articulado Postiço"), o segundo descia de linha
   GRUDADO no primeiro. Mesmo padrão dos outros grupos de botões do site. */
.painel__acoes, .pficha__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pficha__acoes { column-gap: 24px; }   /* o 2.º é link de texto, não botão: precisa de mais ar */

.hero__selos {
    position: relative; z-index: 2;
    flex: 0 0 auto;
    width: 100%; max-width: var(--container); margin: 0 auto;
    padding: 0 var(--gutter) clamp(20px, 3vh, 34px);
}
.hero__selos-lista {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 4px 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.2);
}
.hero__selo {
    display: flex; align-items: flex-start; gap: .6em;
    font-size: 12.5px; font-weight: 500; line-height: 1.35;
    color: rgba(255,255,255,.8);
}
.hero__selo svg { flex: 0 0 auto; margin-top: 2px; color: var(--brasa); }

/* ---------------------------------------------------------------------
   7. Seções
   --------------------------------------------------------------------- */
.secao { padding: clamp(66px, 7.5vw, 108px) 0; }
.secao--claro  { background: var(--concreto); }
.secao--escuro { background: var(--aco-850); color: var(--branco); }

/* Cabeçalho de seção em duas colunas: título à esquerda, apoio à direita.
   Resolve a "folga" que sobrava quando o título curto deixava metade vazia. */
.cabeca {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px clamp(30px, 5vw, 76px);
    align-items: end;
    margin-bottom: clamp(36px, 4.5vw, 58px);
}
.cabeca__apoio { padding-bottom: .35rem; }

/* ---------------------------------------------------------------------
   8. Segmentos
   --------------------------------------------------------------------- */
.segmentos__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: stretch;           /* nada de imagem flutuando com folga */
}
.segmentos__texto { display: flex; flex-direction: column; justify-content: center; }
.segmentos__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.chip {
    padding: 8px 15px; border: 1px solid var(--concreto-2); border-radius: 100px;
    background: var(--branco); font-size: 13.5px; font-weight: 500; color: var(--grafite);
    transition: var(--transicao);
}
.chip:hover { border-color: var(--vinho); color: var(--vinho); }

.segmentos__figura { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 380px; }
.segmentos__figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* 60%: a foto (29/09/2026, §46) é quadrada e a moldura, horizontal — com 60% o braço do gancho e os
   pneus aparecem inteiros de 1,09:1 a 1,33:1. Mais alto corta o braço; mais baixo, os pneus. */
.segmentos__placa {
    position: absolute; left: 0; bottom: 0; z-index: 1;
    display: flex; align-items: baseline; gap: 12px;
    padding: 16px 22px;
    background: var(--vinho);
    color: var(--branco);
}
.segmentos__placa strong {
    font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.segmentos__placa span { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.85); max-width: 20ch; }

/* ---------------------------------------------------------------------
   9. ★ LINHAS — abas (substituiu o filtro que apagava os cards)
   --------------------------------------------------------------------- */
.linhas { background: var(--aco-850); color: var(--branco); position: relative; overflow: hidden; }
.linhas::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 58px 58px;
}
.linhas > .container { position: relative; z-index: 1; }

.abas {
    display: flex; gap: 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
    flex: 1 1 0; min-width: 132px;
    padding: 18px 16px 16px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    border-bottom: 3px solid transparent;
    transition: var(--transicao);
    text-align: left;
}
.aba__nome {
    font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1;
    letter-spacing: -.02em; color: rgba(255,255,255,.55);
    transition: color var(--transicao);
}
.aba__cap {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    color: var(--aco-400); font-variant-numeric: tabular-nums;
    transition: color var(--transicao);
}
.aba:hover .aba__nome { color: rgba(255,255,255,.85); }
.aba[aria-selected="true"] { border-bottom-color: var(--brasa); background: rgba(255,255,255,.04); }
.aba[aria-selected="true"] .aba__nome { color: var(--branco); }
.aba[aria-selected="true"] .aba__cap { color: var(--brasa); }

.painel { display: none; padding-top: clamp(32px, 4vw, 52px); }
.painel.is-ativo { display: block; animation: surgir 420ms cubic-bezier(.2,.7,.3,1); }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.painel__grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px); align-items: center;
}
.painel__figura {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 300px;
    /* brilho por baixo para o render não flutuar sobre o escuro */
    background: radial-gradient(ellipse 66% 52% at 50% 60%, rgba(146,30,48,.36), transparent 72%);
}
/* ⚠️ Os renders do cliente têm só ~270–300 px de largura nativa. Por decisão do
   Felipe (22/09) eles aparecem GRANDES mesmo perdendo nitidez — a imagem vai ser
   trocada depois. Para o estouro doer menos, os arquivos foram reamostrados a
   640 px com LANCZOS + nitidez leve, o que fica melhor do que deixar o navegador
   esticar o original. Ao receber originais maiores, regerar e rever este teto. */
.painel__figura img { width: 100%; max-width: 640px; height: auto; }

/* ---- Palco claro (v20, §34) — a foto de estúdio dentro de uma seção escura ----
   As fotos dos Poliguindastes vieram de estúdio, com fundo branco e sombra no
   chão. Recortadas, o branco preso entre os braços do equipamento aparecia no
   fundo escuro. No palco claro, com `multiply`, o branco some e a sombra fica
   natural — o mesmo recurso das molduras do menu (§28.1). */
.palco-claro {
    margin: 0; border-radius: var(--radius);
    background: radial-gradient(ellipse 80% 70% at 50% 42%, #FFFFFF 0%, #F4F5F7 55%, #E4E7EC 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 24px 50px rgba(0,0,0,.35);
}
.palco-claro img { mix-blend-mode: multiply; }
.painel__figura.palco-claro { min-height: 340px; padding: clamp(22px, 3vw, 40px); }
/* a régua brasa embaixo do palco: liga a foto à aba escolhida */
.painel__figura.palco-claro::after {
    content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 4px;
    margin-left: -32px; background: var(--brasa); border-radius: 2px 2px 0 0;
}
.linhas--poli .painel__figura img { max-width: 600px; }
/* Moldura única nas fotos das abas (29/09/2026, §47): as fotos vão de 0,58 a 0,67 de altura por
   largura e o palco mudava de tamanho a cada aba. 3:2 comporta a mais alta; `contain` não corta
   nada, e a sobra some no palco claro (o `multiply` deixa o vazio da cor do palco). */
.linhas--poli .painel__figura img,
.pmodelo__foto img { aspect-ratio: 3 / 2; object-fit: contain; }

.painel__titulo {
    font-size: clamp(23px, 2.5vw, 33px); font-weight: 900; text-transform: uppercase;
    color: var(--branco); margin: 0 0 .5em; max-width: 20ch;
}
.painel__desc { color: var(--aco-300); font-size: 16.5px; margin-bottom: 26px; max-width: 48ch; }

.painel__modelos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.modelo {
    padding: 7px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius);
    font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: .02em;
    color: var(--branco); font-variant-numeric: tabular-nums;
}

.specs { margin-bottom: 28px; }
.specs__linha {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12);
    font-size: 14px;
}
.specs__chave { color: var(--aco-400); }
.specs__valor { color: var(--branco); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   10. Implementos
   --------------------------------------------------------------------- */
.implementos__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* Home em dois grupos, Acessórios e Reboques (30/09/2026, §51). Três colunas no computador: os 9
   acessórios fecham 3 × 3 (em 4 colunas sobrava um cartão sozinho na última linha). Fica ANTES das
   media queries de propósito — abaixo de 1080 px elas continuam valendo (3 → 2 → 1). */
.implementos__grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-grupo + .portfolio-grupo { margin-top: clamp(48px, 5.5vw, 72px); }
.portfolio-grupo__titulo {
    display: flex; align-items: center; gap: 18px;
    margin: 0 0 22px;
    font-size: clamp(19px, 1.75vw, 24px); font-weight: 900; text-transform: uppercase;
    letter-spacing: -.01em; color: var(--aco-900);
}
.portfolio-grupo__titulo::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(14,17,21,.14); }

.imp-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--branco); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 1px 0 var(--concreto-2), 0 0 0 1px var(--concreto-2);
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.imp-card:hover { transform: translateY(-6px); box-shadow: var(--sombra), 0 0 0 1px transparent; }

.imp-card__figura {
    position: relative; aspect-ratio: 16 / 11; overflow: hidden;
    background: var(--branco);
    border-bottom: 1px solid var(--concreto-2);
}
.imp-card__figura img {
    width: 100%; height: 100%; object-fit: contain; padding: 14px 16px 18px;
    transition: transform 560ms cubic-bezier(.2,.7,.3,1);
}
.imp-card:hover .imp-card__figura img { transform: scale(1.05); }
.imp-card__figura img[src$=".jpg"] { object-fit: cover; padding: 0; }

.imp-card__dado {
    position: absolute; left: 12px; top: 12px; z-index: 1;
    padding: 5px 10px; background: var(--aco-900); color: var(--branco);
    border-radius: var(--radius);
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.imp-card__corpo { padding: 18px 20px 6px; flex: 1 1 auto; display: flex; flex-direction: column; }
.imp-card__nome {
    font-family: var(--display); font-weight: 800; font-size: 16.5px; text-transform: uppercase;
    color: var(--aco-900); margin: 0 0 .5em; letter-spacing: -.01em;
}
.imp-card__texto { font-size: 13.8px; line-height: 1.55; color: var(--grafite); margin: 0 0 16px; flex: 1 1 auto; }

.imp-card__rodape {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 20px; padding: 14px 0;
    border-top: 1px solid var(--concreto-2);
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--vinho); transition: var(--transicao);
}
.imp-card__rodape svg { transition: transform var(--transicao); }
.imp-card:hover .imp-card__rodape { color: var(--brasa); }
.imp-card:hover .imp-card__rodape svg { transform: translateX(5px); }

/* ---------------------------------------------------------------------
   11. Faixa dupla — agora ALINHADA ao container
   --------------------------------------------------------------------- */
.faixa-dupla { display: grid; grid-template-columns: 1fr 1fr; }
.faixa-dupla__lado {
    padding: clamp(52px, 6.5vw, 92px) 0;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
}
.faixa-dupla__lado--vinho { background: var(--vinho); color: var(--branco); }
.faixa-dupla__lado--aco   { background: var(--vinho-fundo); color: var(--branco); }

/* A chave do alinhamento: cada lado recebe metade do container e encosta no centro */
.faixa-dupla__conteudo {
    position: relative; z-index: 1;
    width: 100%;
    max-width: calc(var(--container) / 2);
    padding: 0 var(--gutter);
}
.faixa-dupla__lado--vinho .faixa-dupla__conteudo { margin-left: auto;  padding-right: clamp(24px, 3vw, 54px); }
.faixa-dupla__lado--aco   .faixa-dupla__conteudo { margin-right: auto; padding-left:  clamp(24px, 3vw, 54px); }

.faixa-dupla__fundo { position: absolute; inset: 0; opacity: .22; }
.faixa-dupla__fundo img { width: 100%; height: 100%; object-fit: cover; }

.faixa-dupla h3 {
    font-size: clamp(22px, 2.4vw, 31px); font-weight: 900; text-transform: uppercase;
    color: var(--branco); max-width: 17ch;
}
.faixa-dupla p { color: rgba(255,255,255,.8); font-size: 15.5px; max-width: 42ch; margin-bottom: 24px; }
.faixa-dupla .btn { align-self: flex-start; }
.faixa-dupla .etiqueta { color: rgba(255,255,255,.72); }
.faixa-dupla__lado--aco .etiqueta { color: var(--brasa); }

/* ---------------------------------------------------------------------
   12. Atendimento — mapa do Brasil, em fundo escuro
       Vinha claro e encostava na seção de contato, também clara: as duas
       viravam um bloco só. Escuro separa e ainda faz o mapa brilhar.
   --------------------------------------------------------------------- */
.atendimento { background: var(--aco-900); color: var(--branco); position: relative; overflow: hidden; }
.atendimento::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 55% at 28% 42%, rgba(146,30,48,.28), transparent 70%);
}
.atendimento > .container { position: relative; z-index: 1; }

.mapa {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
}

/* --- o mapa ---
   Volta ao escuro (o palco branco virava um buraco na seção). O defeito era
   só de CONTRASTE: os estados sem representante estavam em #222831 sobre
   #0E1115 e sumiam. Aqui eles sobem para um cinza-aço bem mais claro, e o
   painel deste lado espelha o painel de contatos do outro — os dois formam
   um par, em vez de brigarem. */
.mapa__brasil {
    display: flex; flex-direction: column; gap: 18px;
    /* sem cartão de fundo: o mapa fica solto sobre a seção. O contraste vem
       dos TONS dos estados, não de um quadro atrás deles. */
}
.mapa-brasil-svg { width: 100%; height: auto; display: block; overflow: visible; }

.mapa-brasil-svg path {
    fill: #525C6B;                 /* sem representante — cinza-aço, visível sobre o escuro */
    stroke: var(--aco-900);
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 200ms ease;
    outline: none;
}
.mapa-brasil-svg path.tem-representante { fill: #D2415A; }
.mapa-brasil-svg path:hover             { fill: var(--vinho-claro); }
.mapa-brasil-svg path.is-ativo          { fill: #FF6076; }
.mapa-brasil-svg path:focus-visible     { stroke: var(--branco); stroke-width: 2.6; }

.mapa__legenda {
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14);
    font-size: 13px; color: var(--aco-300);
}
.mapa__legenda li { display: flex; align-items: center; gap: .55em; }
.mapa__ponto { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
.mapa__ponto--rep { background: #D2415A; }
.mapa__ponto--fab { background: #525C6B; }

/* --- painel do estado --- */
.mapa__painel {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    padding: clamp(18px, 2.1vw, 26px);
    display: flex; flex-direction: column; gap: 14px;
}
.mapa__seletor { display: flex; flex-direction: column; }
.mapa__seletor label {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--aco-400); margin-bottom: 8px;
}
.mapa__seletor select {
    width: 100%; padding: 13px 40px 13px 14px;
    background: var(--aco-800) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CBD2DA' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius);
    color: var(--branco); font-size: 15.5px; font-weight: 500;
    appearance: none; cursor: pointer; transition: var(--transicao);
}
.mapa__seletor select:focus { outline: none; border-color: var(--brasa); }
.mapa__seletor option { background: var(--aco-800); color: var(--branco); }

.mapa__conteudo { flex: 1 1 auto; }

/* Sem JS, os 27 estados aparecem em sequência — vira um diretório, não uma tela vazia. */
.js .uf { display: none; }
.js .uf.is-ativo { display: block; animation: surgir 320ms cubic-bezier(.2,.7,.3,1); }
html:not(.js) .uf + .uf { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.12); }

.uf__topo { margin-bottom: 14px; }
.uf__nome {
    font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.2vw, 29px);
    text-transform: uppercase; color: var(--branco); margin: 0 0 8px;
}
.uf__tag {
    display: inline-flex; align-items: center; gap: .5em;
    padding: 5px 12px; border-radius: 100px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.uf__tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.uf__tag--representante { background: rgba(216,30,59,.16); color: #FF8095; }
.uf__tag--fabrica       { background: rgba(255,255,255,.1); color: var(--aco-300); }

/* --- ficha de cada contato --- */
.fichas { display: flex; flex-direction: column; gap: 12px; }
/* Setores do estado (29/09/2026, §46): Representantes / fábrica / venda de peças /
   Pontos de assistência técnica. Só aparece com 2 setores ou mais (home.php). */
.fichas-grupo {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--aco-300);
}
.fichas-grupo::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.fichas + .fichas-grupo { margin-top: 22px; }
.ficha-contato {
    padding: 13px 16px;
    background: rgba(255,255,255,.04);
    border-left: 2px solid var(--vinho);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.ficha-contato__nome {
    font-family: var(--display); font-weight: 800; font-size: 15.5px;
    color: var(--branco); margin: 0 0 2px; letter-spacing: -.01em;
}
.ficha-contato__papel {
    display: inline-block; font-size: 11.5px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase; color: var(--brasa);
    margin-bottom: 8px;
}
.ficha-contato__detalhe { font-size: 13.5px; color: var(--aco-300); margin: 0 0 8px; }

.ficha-contato__links { display: flex; flex-direction: column; gap: 7px; }
.ficha-contato__links a {
    display: inline-flex; align-items: center; gap: .6em;
    font-size: 14.5px; color: var(--aco-200);
    transition: color var(--transicao); width: fit-content;
    font-variant-numeric: tabular-nums;
}
.ficha-contato__links a svg { flex: 0 0 auto; color: var(--brasa); }
.ficha-contato__links a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }

.uf__acao { margin-top: 16px; align-self: flex-start; }

/* ---------------------------------------------------------------------
   13. Contato — "ficha de solicitação"
   --------------------------------------------------------------------- */
.contato { background: var(--branco); }
.contato__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(34px, 4.5vw, 70px); align-items: start; }

.contato__canais { margin-top: 28px; }
.contato__canal { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--concreto-2); }
.contato__canal svg { flex: 0 0 auto; margin-top: 3px; color: var(--vinho); }
.contato__canal span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aco-400); margin-bottom: 2px; }
.contato__canal strong { font-size: 16.5px; font-weight: 600; color: var(--aco-900); }

/* A ficha: cabeçote escuro + corpo claro, como formulário técnico */
.ficha {
    background: var(--concreto);
    border: 1px solid var(--concreto-2);
    border-radius: var(--radius);
    overflow: hidden;
}
.ficha__topo {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 26px;
    background: var(--aco-900); color: var(--branco);
}
.ficha__topo h3 {
    margin: 0; font-family: var(--display); font-weight: 800; font-size: 15px;
    letter-spacing: .06em; text-transform: uppercase;
}
.ficha__topo span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aco-400); }
.ficha__corpo { padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 30px); }

.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; }
.campo--largo { grid-column: 1 / -1; }
.campo .req { color: var(--brasa); }
.campo > label {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--aco-400); margin-bottom: 7px;
}
.campo select,
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea {
    width: 100%; padding: 13px 14px;
    background: var(--branco);
    border: 1px solid var(--concreto-2); border-radius: var(--radius);
    font-size: 15.5px; transition: var(--transicao);
}
.campo textarea { resize: vertical; min-height: 102px; }
.campo select:focus, .campo input:focus, .campo textarea:focus {
    outline: none; border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(146,30,48,.12);
}
.campo input::placeholder, .campo textarea::placeholder { color: #A9B0B9; }

/* Equipamento de interesse como pastilhas — mais rápido e mais memorável que um select */
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcoes label {
    display: inline-block; padding: 9px 15px;
    border: 1px solid var(--concreto-2); border-radius: 100px;
    font-size: 13.5px; font-weight: 500; color: var(--grafite);
    cursor: pointer; transition: var(--transicao); user-select: none;
}
.opcoes label:hover { border-color: var(--vinho); color: var(--vinho); }
.opcoes input:checked + label { background: var(--vinho); border-color: var(--vinho); color: var(--branco); }
.opcoes input:focus-visible + label { outline: 3px solid var(--brasa); outline-offset: 2px; }

.form__rodape {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--concreto-2);
}
.form__nota { font-size: 12.5px; color: var(--aco-400); max-width: 36ch; margin: 0; }

.form__aviso { padding: 13px 16px; border-radius: var(--radius); font-size: 14.5px; margin-bottom: 18px; }
.form__aviso--ok   { background: #E7F6EC; border: 1px solid #9AD7B0; color: #17643A; }
.form__aviso--erro { background: #FDEAEE; border: 1px solid #F0A8B6; color: #8E1428; }

/* ---------------------------------------------------------------------
   14. Rodapé
   --------------------------------------------------------------------- */
.rodape { background: var(--aco-900); color: var(--branco); }

.rodape__chamada {
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.rodape__chamada .container {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
    padding-top: clamp(38px, 4.5vw, 58px); padding-bottom: clamp(38px, 4.5vw, 58px);
}
.rodape__chamada h2 {
    margin: 0; font-size: clamp(22px, 2.6vw, 34px); font-weight: 900; text-transform: uppercase;
    color: var(--branco); max-width: 20ch;
}
.rodape__chamada-tel {
    display: flex; flex-direction: column; gap: 2px; text-align: right;
}
.rodape__chamada-tel span { font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--aco-400); }
.rodape__chamada-tel strong {
    font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.3vw, 30px);
    letter-spacing: -.01em; color: var(--branco); font-variant-numeric: tabular-nums;
    transition: color var(--transicao);
}
.rodape__chamada-tel:hover strong { color: var(--brasa); }

.rodape__grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px;
    padding: clamp(40px, 5vw, 62px) 0;
}
.rodape__logo { width: 208px; margin-bottom: 20px; }
.rodape__sobre { font-size: 14.5px; color: var(--aco-300); max-width: 32ch; margin: 0; }
.rodape h4 {
    font-family: var(--corpo); font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brasa); margin: 0 0 16px;
}
.rodape__lista li { margin-bottom: 10px; }
.rodape__lista a, .rodape__lista span { font-size: 14.5px; color: var(--aco-200); transition: var(--transicao); }
.rodape__lista a:hover { color: var(--branco); }

.rodape__base {
    border-top: 1px solid rgba(255,255,255,.12);
}
.rodape__base .container {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    padding-top: 20px; padding-bottom: 24px;
    font-size: 12.5px; color: var(--aco-400);
}

/* ---------------------------------------------------------------------
   15. Revelação ao rolar
   --------------------------------------------------------------------- */
.js .revela { opacity: 0; transform: translateY(20px); transition: opacity 640ms ease, transform 640ms cubic-bezier(.2,.7,.3,1); }
.js .revela.is-visivel { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   16. Responsivo
   --------------------------------------------------------------------- */
/* Menu hambúrguer a partir de 1180px (era 900px). Com o item "A IMAVI" o menu
   passou a ter 6 itens e, medido em 23/09/2026, entre 901 e 1100px o cabeçalho
   VAZAVA pela direita e o logo encolhia. Acima de 1180 tudo cabe, telefone junto. */
@media (max-width: 1320px) {
    .cabecalho__tel { display: none; }   /* segue no rodapé e na seção de contato */
}
@media (max-width: 1180px) {
    .nav, .cabecalho__tel, .cabecalho__cta { display: none; }
    .menu-btn { display: block; }
    .cabecalho.is-aberto { background: var(--aco-900); }
    .cabecalho.is-aberto .nav {
        display: block; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--aco-900); padding: 6px var(--gutter) 20px;
        box-shadow: 0 18px 30px rgba(14,17,21,.4);
    }
    .cabecalho.is-aberto .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .cabecalho.is-aberto .nav__link { padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .cabecalho.is-aberto .nav__link::after { display: none; }
    .redes--cabecalho { display: none; }
    .cabecalho.is-aberto .nav__redes { display: block; padding: 18px 0 4px; }
    .cabecalho.is-aberto .redes--menu { gap: 10px; }
    .cabecalho.is-aberto .redes--menu a { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); }

}

@media (max-width: 1080px) {
    .implementos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rodape__grid { grid-template-columns: 1fr 1fr; }
    .cabeca { grid-template-columns: 1fr; align-items: start; }
    .painel__grid { grid-template-columns: 1fr; }
    .painel__figura { max-width: 520px; }
}

@media (max-width: 900px) {
    .segmentos__grid, .contato__grid, .faixa-dupla { grid-template-columns: 1fr; }
    /* Coluna única: sem isto a moldura ficava larga e baixa (até 2,2:1 com os 380 px de altura
       mínima) e cortava o braço do gancho da foto. 4:3 é a mesma proporção do computador.
       width: 100% é obrigatório: item de grade com aspect-ratio deixa de ser esticado, e a largura
       saía da altura mínima de 280 px do celular (280 × 4/3 = 373 px) — estourava a coluna em 390 px. */
    .segmentos__figura { aspect-ratio: 4 / 3; width: 100%; }
    .mapa { grid-template-columns: 1fr; }
    .mapa__brasil { max-width: 460px; margin: 0 auto; }
    .faixa-dupla__conteudo { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
    .implementos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__selos-lista { grid-template-columns: repeat(3, 1fr); }
    .rodape__chamada .container { flex-direction: column; align-items: flex-start; }
    .rodape__chamada-tel { text-align: left; }
}

@media (max-width: 620px) {
    :root { --gutter: 18px; --cabecalho-h: 68px; }
    body { font-size: 16px; }
    .hero { height: auto; min-height: 100svh; }
    .hero__corpo { padding-top: calc(var(--cabecalho-h) + 40px); padding-bottom: 34px; }
    .hero__selos-lista { grid-template-columns: 1fr 1fr; gap: 2px 14px; }
    .hero__acoes .btn, .painel__acoes .btn, .pficha__acoes .btn { width: 100%; }
    .implementos__grid { grid-template-columns: 1fr; }
    .form__grid { grid-template-columns: 1fr; }
    .rodape__grid { grid-template-columns: 1fr; gap: 30px; }
    .aba { min-width: 112px; padding: 14px 12px 12px; }
    .aba__nome { font-size: 21px; }
    .segmentos__figura { min-height: 280px; }
}

/* ---------------------------------------------------------------------
   17. Movimento reduzido
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .js .revela { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   18. Catálogo — o mockup é a peça principal
   --------------------------------------------------------------------- */
.catalogo { background: var(--vinho); color: var(--branco); position: relative; overflow: hidden; }
.catalogo::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 60% at 78% 34%, rgba(255,255,255,.12), transparent 68%);
}
.catalogo > .container { position: relative; z-index: 1; }

.catalogo__topo {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(30px, 4.5vw, 66px);
    align-items: center;
}
.catalogo__texto { display: flex; flex-direction: column; align-items: flex-start; }
.catalogo .etiqueta { color: rgba(255,255,255,.78); }
.catalogo__intro { color: rgba(255,255,255,.84); max-width: 44ch; }

.catalogo__itens { margin: 22px 0 28px; display: flex; flex-direction: column; gap: 9px; }
.catalogo__itens li {
    display: flex; align-items: flex-start; gap: .65em;
    font-size: 15px; color: rgba(255,255,255,.88);
}
.catalogo__itens li::before {
    content: ''; flex: 0 0 auto; margin-top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--branco);
}

/* o mockup vaza um pouco para a direita: dá profundidade sem cortar conteúdo */
.catalogo__figura { position: relative; margin-right: clamp(-46px, -3vw, 0px); }
/* Os transforms repetem a MESMA lista de funções no repouso e no hover — senão o
   navegador não interpola a perspectiva e o movimento "pula". */
.catalogo__livro {
    position: relative; z-index: 1; display: block;
    transform: perspective(1600px) translateY(0) rotateX(0deg) rotateY(0deg) rotate(-1.4deg) scale(1);
    transition: transform .8s cubic-bezier(.2,.8,.25,1);
}
/* o foco de luz que se acende atrás do catálogo */
.catalogo__figura::before {
    content: ''; position: absolute; inset: -8% -10%; z-index: 0; pointer-events: none;
    background: radial-gradient(50% 50% at 55% 50%, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, transparent 72%);
    opacity: 0; transform: scale(.82);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.25,1);
}
.catalogo__figura img {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 28px 44px rgba(0,0,0,.42));
    transition: filter .75s cubic-bezier(.2,.8,.25,1);
}
/* ★ "Baixar catálogo" (28/09/2026, §42): o catálogo SE LEVANTA da mesa — sobe, gira e a
   sombra se afasta — e um reflexo de luz corre pela capa, como em papel couché.
   O reflexo usa a própria imagem como máscara (--mockup): só acende sobre o catálogo,
   nunca no fundo vinho. Dispara no hover/foco do botão (:has) e no hover da imagem. */
.catalogo__livro::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    /* risco de luz NÍTIDO + um filete atrás — verniz de capa, não véu (uma faixa larga
       deixava a capa leitosa). Nas páginas brancas não aparece: o brilho é da capa escura. */
    background:
        linear-gradient(112deg, transparent 44%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.78) 50%,
                                rgba(255,255,255,.16) 53%, transparent 56%) 62% 0 / 240% 100% no-repeat,
        linear-gradient(112deg, transparent 53.2%, rgba(255,255,255,.42) 54.2%, transparent 55.2%) 62% 0 / 240% 100% no-repeat;
    -webkit-mask: var(--mockup) center / 100% 100% no-repeat;
            mask: var(--mockup) center / 100% 100% no-repeat;
}
.catalogo__topo:has(.catalogo__texto .btn:hover, .catalogo__texto .btn:focus-visible) .catalogo__livro,
.catalogo__figura:hover .catalogo__livro {
    transform: perspective(1600px) translateY(-18px) rotateX(7deg) rotateY(-11deg) rotate(-2.4deg) scale(1.035);
}
.catalogo__topo:has(.catalogo__texto .btn:hover, .catalogo__texto .btn:focus-visible) .catalogo__figura::before,
.catalogo__figura:hover::before { opacity: 1; transform: scale(1); }
.catalogo__topo:has(.catalogo__texto .btn:hover, .catalogo__texto .btn:focus-visible) .catalogo__figura img,
.catalogo__figura:hover img {
    filter: drop-shadow(0 52px 58px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(255,255,255,.07));
}
.catalogo__topo:has(.catalogo__texto .btn:hover, .catalogo__texto .btn:focus-visible) .catalogo__livro::after,
.catalogo__figura:hover .catalogo__livro::after {
    animation: catalogo-brilho 1.15s cubic-bezier(.45,.05,.3,1) .2s both;
}
@keyframes catalogo-brilho {
    /* percurso calculado para o risco começar perto da capa (≈36% da largura) e sair logo
       depois dela (≈113%): o tempo é gasto onde o brilho aparece, não nas páginas brancas */
    0%   { opacity: 0; background-position: 62% 0, 62% 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; background-position: 4% 0, 4% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .catalogo__livro, .catalogo__figura img, .catalogo__figura::before { transition: none; }
    .catalogo__livro::after { display: none; }
}

.catalogo__faixa {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 22px;
    margin-top: clamp(38px, 5vw, 62px);
    padding-top: clamp(28px, 3.5vw, 42px);
    border-top: 1px solid rgba(255,255,255,.24);
}
.catalogo__faixa-titulo {
    font-size: clamp(19px, 2vw, 25px); font-weight: 900; text-transform: uppercase;
    color: var(--branco); margin: 0 0 .5em; max-width: 22ch;
}
.catalogo__faixa p { color: rgba(255,255,255,.8); font-size: 15px; max-width: 54ch; margin: 0; }

/* ---------------------------------------------------------------------
   19. Modal "Baixar catálogo"
       Campos iguais aos do site atual; o visual é novo.

       A ideia: o lado esquerdo não é uma "imagem de apoio" — é a BANCADA
       onde o catálogo está. Fundo de aço com a mesma malha técnica da seção
       das linhas, e o impresso grande, girado, saindo pela borda. O lado
       direito repete a FICHA do formulário de orçamento (cabeçote escuro
       com o nome do documento), para os dois formulários do site parecerem
       peças do mesmo sistema.
   --------------------------------------------------------------------- */
.mcat { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mcat[hidden] { display: none; }
.mcat__fundo { position: absolute; inset: 0; background: rgba(8,10,13,.8); backdrop-filter: blur(4px); }

.mcat__caixa {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    width: 100%; max-width: 1080px; max-height: calc(100vh - 40px);
    background: var(--branco); border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(0,0,0,.5);
    animation: mcatEntra 340ms cubic-bezier(.2,.7,.3,1);
}
@keyframes mcatEntra { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }

/* fio de brasa no topo — a mesma marca das etiquetas do site */
.mcat__risco {
    position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
    background: linear-gradient(90deg, var(--vinho), var(--brasa) 55%, var(--vinho));
}

.mcat__fechar {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(14,17,21,.55); color: var(--branco);
    transition: var(--transicao);
}
.mcat__fechar:hover { background: var(--aco-900); transform: rotate(90deg); }

/* ---- a bancada ---- */
.mcat__capa {
    position: relative; overflow: hidden;
    background: var(--aco-900); color: var(--branco);
    padding: clamp(28px, 3.2vw, 42px) clamp(24px, 2.6vw, 36px) 0;
    display: flex; flex-direction: column;
}
.mcat__capa::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 46px 46px;
}
.mcat__capa::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(75% 60% at 22% 18%, rgba(146,30,48,.5), transparent 68%);
}
.mcat__capa-texto { position: relative; z-index: 2; }
.mcat__capa .etiqueta { color: var(--brasa); margin-bottom: .9rem; }

.mcat__titulo {
    font-size: clamp(21px, 2.1vw, 28px); font-weight: 900; text-transform: uppercase;
    color: var(--branco); margin: 0 0 .55em; letter-spacing: -.02em;
}
.mcat__frase { font-size: 14.5px; color: var(--aco-300); margin: 0 0 18px; max-width: 34ch; }

.mcat__marcas { display: flex; flex-wrap: wrap; gap: 7px; }
.mcat__marcas li {
    padding: 5px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 100px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.82);
}

/* o impresso: grande, girado, saindo pela borda de baixo */
.mcat__mockup {
    position: relative; z-index: 1;
    width: 126%; max-width: none; height: auto;
    margin: auto -13% -16%;
    transform: rotate(-4deg);
    filter: drop-shadow(0 26px 40px rgba(0,0,0,.55));
}

/* ---- a ficha ---- */
.mcat__corpo { display: flex; flex-direction: column; min-height: 0; background: var(--branco); }
.mcat__cabecote {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 60px 18px clamp(24px, 2.6vw, 34px);
    background: var(--aco-900); color: var(--branco);
}
.mcat__cabecote h3 {
    margin: 0; font-family: var(--display); font-weight: 800; font-size: 14.5px;
    letter-spacing: .06em; text-transform: uppercase;
}
.mcat__cabecote span { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aco-400); white-space: nowrap; }

.mcat__area { flex: 1 1 auto; overflow-y: auto; padding: clamp(22px, 2.6vw, 32px); }
.mcat__hp { position: absolute; left: -9999px; }

.mcat__erro {
    margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius);
    background: #FDEAEE; border: 1px solid #F0A8B6; color: #8E1428; font-size: 14px;
}
.mcat__erro[hidden] { display: none; }
.campo.is-invalido input, .campo.is-invalido select { border-color: var(--brasa); }

.mcat__rodape {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--concreto-2);
}
.mcat__form.is-enviando { opacity: .6; pointer-events: none; }

.mcat__sucesso { text-align: center; padding: clamp(28px, 4vw, 52px) 10px; }
.mcat__sucesso[hidden] { display: none; }
.mcat__sucesso-icone { color: #1F7A4C; margin: 0 auto 16px; }
.mcat__sucesso-titulo {
    font-family: var(--display); font-weight: 900; font-size: 24px; text-transform: uppercase;
    color: var(--aco-900); margin: 0 0 .4em;
}
.mcat__sucesso-texto { color: var(--grafite); font-size: 15px; margin-bottom: 22px; }

body.mcat-aberto { overflow: hidden; }

@media (max-width: 860px) {
    .catalogo__topo { grid-template-columns: 1fr; }
    .catalogo__figura { margin-right: 0; order: -1; }
    /* ⚠️ No celular quem rola é a CAIXA INTEIRA, não a área do formulário.
       Com `overflow: hidden` na caixa e uma única coluna, o que passava da
       altura era CORTADO — o botão de enviar ficava inalcançável. */
    .mcat__caixa {
        grid-template-columns: 1fr;
        max-height: calc(100svh - 32px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mcat__corpo { min-height: 0; }
    .mcat__area { overflow: visible; }
    /* a bancada vira uma faixa curta: a tela pequena é do formulário */
    .mcat__capa { padding-bottom: 0; }
    .mcat__capa .mcat__frase, .mcat__capa .mcat__marcas { display: none; }
    .mcat__mockup { width: 74%; margin: 14px auto -10%; }
    .mcat__cabecote { position: sticky; top: 0; z-index: 3; }
}

/* ---------------------------------------------------------------------
   20. Barra de rolagem
       A padrão do Windows é larga e clara — vira uma faixa brilhante ao
       lado do hero e das seções escuras. Aqui ela fica fina, em aço, e só
       ganha a cor da marca quando a pessoa a usa.
   --------------------------------------------------------------------- */
html {
    scrollbar-width: thin;                        /* padrão: Firefox e Chrome novo */
    scrollbar-color: #3E4655 transparent;         /* polegar · trilho */
}

/* WebKit/Blink antigos não entendem as duas linhas acima */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #3E4655;
    border-radius: 10px;
    /* borda transparente + clip no conteúdo = polegar mais fino, com respiro */
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color var(--transicao);
}
::-webkit-scrollbar-thumb:hover  { background: var(--vinho); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--brasa); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Dentro do modal o fundo é claro: o polegar escuro continua legível,
   mas o trilho não pode puxar o aço da página. */
.mcat__area { scrollbar-color: var(--aco-400) transparent; }
.mcat__area::-webkit-scrollbar-thumb { background: var(--aco-400); background-clip: content-box; }
.mcat__area::-webkit-scrollbar-thumb:hover { background: var(--vinho); background-clip: content-box; }

/* =====================================================================
   21. Página A IMAVI (23/09/2026) — ver .claude/CLAUDE.md §22
       Mesma linguagem da home: aço + vinho, Montserrat em caixa alta,
       números como elemento gráfico. A peça que só esta página tem é o
       HODÔMETRO da linha do tempo — o ano "roda" como o marcador de um
       caminhão conforme a pessoa passa pelos marcos.
   ===================================================================== */

/* ---- Topo: ver a seção 22 (topo das páginas internas) ---- */
/* "Roll-On/Roll-Off" quebrava no hífen ("ROLL-" / "ON/ROLL-OFF") e o "no"
   ficava sozinho numa linha. "Roll-On/" e "Roll-Off" são blocos
   inquebráveis, e o <wbr> entre eles é a única quebra possível. ⚠️ O <wbr> é
   obrigatório: o navegador não quebra depois de "/" seguida de letra, e sem
   ele o título VAZAVA da tela no celular (medido em 390 px). */
.inteiro { white-space: nowrap; }

/* ---- Sobre (v19): os dois parágrafos que seguem a abertura do topo ----
   O segundo é o marco que define a empresa — o Roll-On/Roll-Off — e ganha o
   bloco em destaque, com a régua brasa das faixas da home. */
.sobre { padding-top: clamp(56px, 6.5vw, 92px); padding-bottom: clamp(56px, 6.5vw, 92px); }
.sobre__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 76px); align-items: center;
}
.sobre__texto { margin: 0; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.6; color: var(--aco-900); }
.sobre__marco {
    margin: 0; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px);
    background: var(--concreto); border-left: 4px solid var(--brasa); border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 16.5px; line-height: 1.65; color: var(--grafite);
}
.sobre__marco strong { color: var(--vinho); font-weight: 700; }

/* ---- ★ Nossa história ---- */
.historia { background: var(--aco-900); color: var(--branco); position: relative; overflow: clip; }
.historia::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(50% 40% at 18% 30%, rgba(146,30,48,.3), transparent 72%);
}
.historia > .container { position: relative; z-index: 1; }

/* A abertura usa AS MESMAS colunas da linha do tempo: o título fica sobre o
   hodômetro e o relato sobre os marcos — a página lê em duas colunas só. */
.historia__abre {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 20px clamp(32px, 5.5vw, 88px); align-items: start;
    padding-bottom: clamp(48px, 6vw, 80px); margin-bottom: clamp(56px, 7vw, 100px);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.historia__abre .titulo-secao { max-width: 14ch; }
.historia__relato p { margin: 0 0 1rem; max-width: 60ch; font-size: 16.5px; line-height: 1.7; color: var(--aco-300); }
.historia__relato p:first-child { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--branco); }
.historia__relato p:last-child { margin-bottom: 0; }

.tempo {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(32px, 5.5vw, 88px); align-items: start;
}
.tempo__painel { position: sticky; top: calc(72px + 36px); }

/* O hodômetro. Cada roda é uma fita de 0 a 9 atrás de uma janela de 1em;
   a posição vem de --d (o dígito). A última roda é vinho, como a casa
   decimal dos marcadores analógicos. */
.hodometro {
    display: inline-flex; gap: 5px;
    padding: 9px; border-radius: 6px;
    background: #07090B;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 2px 10px rgba(0,0,0,.7), 0 18px 40px rgba(0,0,0,.35);
    font-family: var(--display); font-weight: 900;
    font-size: clamp(60px, 7.6vw, 112px); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hodometro__roda {
    position: relative; display: block;
    width: .74em; height: 1em; overflow: hidden;
    border-radius: 3px;
    background: linear-gradient(180deg, #111419 0%, #20262E 50%, #111419 100%);
    color: var(--branco);
}
.hodometro__roda:last-child {
    background: linear-gradient(180deg, #4E0F1A 0%, var(--vinho) 50%, #4E0F1A 100%);
}
/* sombra de tambor: o dígito "entra" por cima e "sai" por baixo */
.hodometro__roda::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.6) 100%);
}
.hodometro__fita {
    display: block;
    transform: translateY(calc(var(--d, 0) * -1em));
    transition: transform 900ms cubic-bezier(.3, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.hodometro__fita span { display: block; height: 1em; text-align: center; }

.tempo__epoca {
    margin: 20px 0 30px;
    font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.7vw, 23px);
    letter-spacing: .02em; text-transform: uppercase; color: var(--brasa);
    min-height: 1.3em;
}

.tempo__trilho ol { position: relative; margin: 0; padding: 0; list-style: none; }
.tempo__trilho ol::before {
    content: ''; position: absolute; left: 5px; top: 14px; bottom: 14px;
    width: 2px; background: rgba(255,255,255,.14);
}
.tempo__trilho a {
    position: relative;
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 8px 0 8px 26px;
    font-size: 14px; line-height: 1.35; color: var(--aco-400);
    transition: color var(--transicao);
}
.tempo__trilho a::before {
    content: ''; position: absolute; left: 0; top: 50%; margin-top: -6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--aco-900); border: 2px solid var(--aco-600);
    transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.tempo__trilho-ano { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.tempo__trilho a:hover { color: var(--aco-200); }
.tempo__trilho a.is-ativo { color: var(--branco); }
.tempo__trilho a.is-ativo::before { background: var(--brasa); border-color: var(--brasa); transform: scale(1.15); }

/* Os marcos */
.tempo__marcos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); }
.marco { display: grid; gap: 24px; transition: opacity 500ms ease; }
/* Com JS, quem não está sendo lido fica em segundo plano — o hodômetro e o
   marco ativo andam juntos. Sem JS nada disto se aplica e tudo fica aceso. */
.js .tempo.is-vivo .marco { opacity: .42; }
.js .tempo.is-vivo .marco.is-ativo { opacity: 1; }

.marco__foto { margin: 0; max-width: 560px; }
.marco__foto img {
    width: 100%; height: auto; border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 22px 44px rgba(0,0,0,.4);
}
.marco__foto figcaption {
    display: flex; gap: .7em; align-items: baseline;
    margin-top: 12px; font-size: 13px; color: var(--aco-400);
}
.marco__foto figcaption::before { content: ''; flex: 0 0 18px; height: 2px; background: var(--vinho-claro); transform: translateY(-4px); }

/* Galeria do marco (30/09/2026, §51) — duas ou mais fotos, trocando sozinhas (main.js, 2d).
   Quadro fixo em 3:2: trocar de foto não muda a altura da página. A foto longe do 3:2
   (.marco__slide--inteira, decidido no PHP pelas medidas do arquivo) entra inteira, sobre
   uma cópia dela mesma desfocada — o mesmo arquivo, baixado uma vez só. */
.marco__galeria-quadro {
    position: relative; aspect-ratio: 3 / 2; overflow: hidden;
    border-radius: var(--radius); background: var(--aco-850);
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 22px 44px rgba(0,0,0,.4);
}
.marco__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; }
.marco__slide.is-ativo { opacity: 1; }
.marco__galeria .marco__slide img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 0; box-shadow: none;
}
.marco__galeria .marco__slide--inteira .marco__slide-img { object-fit: contain; }
.marco__galeria .marco__slide-fundo { filter: blur(22px) brightness(.5); transform: scale(1.15); }

.marco__galeria figcaption { align-items: center; min-height: 24px; }
.marco__galeria figcaption::before { transform: none; }
.marco__galeria-legendas { flex: 1 1 auto; min-width: 0; display: grid; }
.marco__galeria-legenda { grid-area: 1 / 1; opacity: 0; transition: opacity 600ms ease; }
.marco__galeria-legenda.is-ativa { opacity: 1; }
.marco__galeria-controles { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.marco__galeria-controles[hidden] { display: none; }
.marco__galeria-pontos { display: flex; align-items: center; }
/* O ponto é pequeno; o botão tem 24 px de altura — alvo de toque decente sem pesar no desenho. */
.marco__galeria-ponto {
    position: relative; width: 16px; height: 24px; padding: 0;
    border: 0; background: none; cursor: pointer;
    transition: width var(--transicao);
}
.marco__galeria-ponto::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; border-radius: 999px; transform: translate(-50%, -50%);
    background: rgba(255,255,255,.28);
    transition: width var(--transicao), background var(--transicao);
}
.marco__galeria-ponto:hover::before { background: rgba(255,255,255,.62); }
.marco__galeria-ponto[aria-current="true"] { width: 30px; }
.marco__galeria-ponto[aria-current="true"]::before { width: 22px; background: var(--brasa); }
.marco__galeria-pausa {
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
    background: transparent; color: var(--aco-200); cursor: pointer;
    transition: border-color var(--transicao), color var(--transicao);
}
.marco__galeria-pausa:hover { border-color: rgba(255,255,255,.5); color: var(--branco); }
.marco__galeria-pausa .ico-tocar,
.marco__galeria-pausa.is-parado .ico-pausa { display: none; }
.marco__galeria-pausa.is-parado .ico-tocar { display: block; }

.marco__epoca { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; }
.marco__ano {
    font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1;
    letter-spacing: -.02em; color: var(--brasa); font-variant-numeric: tabular-nums;
}
.marco__rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--aco-300); }
.marco__titulo {
    font-size: clamp(22px, 2.4vw, 31px); font-weight: 900; text-transform: uppercase;
    color: var(--branco); max-width: 22ch; margin: 0 0 .55em;
}
.marco__desc p { color: var(--aco-300); font-size: 16.5px; max-width: 56ch; margin: 0 0 .9rem; }
.marco__desc p:last-child { margin-bottom: 0; }

/* ---- Pioneirismo (v20): só o texto — a grade do portfólio saiu a pedido do
   Felipe. O cabeçalho de duas colunas é o último elemento da seção. ---- */
.cabeca--final { margin-bottom: 0; }

/* ---- Engenharia + os três focos (v19) ---- */
.engenharia__grid {
    display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(34px, 5vw, 76px); align-items: stretch;
}
.engenharia__foto { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 440px; margin: 0; }
.engenharia__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.engenharia__corpo { display: flex; flex-direction: column; justify-content: center; }
.engenharia__corpo .intro { margin: 0 0 1rem; }
.engenharia__ponte { color: var(--aco-900); font-weight: 600; margin-bottom: 0 !important; }

/* Os três focos em letra de chapa: a palavra é a peça, como a gravação no
   aço de um equipamento. Ligados ao "com foco em:" logo acima. */
.pilares {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px clamp(24px, 3.4vw, 52px);
    margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none;
}
.pilar { position: relative; padding-top: 22px; border-top: 2px solid var(--aco-900); }
.pilar::before { content: ''; position: absolute; left: 0; top: -2px; width: 56px; height: 4px; background: var(--brasa); }
.pilar__titulo {
    margin: 0 0 .5em;
    font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(24px, 2.7vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--aco-900);
}
.pilar__texto { margin: 0; max-width: 36ch; font-size: 16px; line-height: 1.6; color: var(--grafite); }

/* ---- Faixa do gancho ---- */
.gancho {
    position: relative; overflow: hidden;
    min-height: clamp(440px, 64vh, 640px);
    display: flex; align-items: center;
    background: var(--aco-900); color: var(--branco);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.gancho__midia { position: absolute; inset: 0; }
/* 64% 78,5% (29/09/2026, pedido da IMAVI: "aparecer o gancho sem cortar"). O gancho vermelho
   ocupa de 39% a 89% da altura da foto (medido nos pixels); com 40% a base do "C" ficava abaixo
   da faixa em tela larga. 78,5% o mantém inteiro de 1280 a 1920 px. */
.gancho__midia img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 78.5%; }
/* Acima de ~1800 px a faixa fica baixa demais para caber metade da foto: a seção ganha altura. */
@media (min-width: 1800px) { .gancho { min-height: 35vw; } }
.gancho__midia::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(14,17,21,.95) 0%, rgba(14,17,21,.82) 36%, rgba(14,17,21,.2) 70%, rgba(14,17,21,.05) 100%);
}
.gancho__corpo { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.gancho__frase { margin: 0 0 32px; }
.gancho__frase::before { content: ''; display: block; width: 48px; height: 4px; background: var(--brasa); margin-bottom: 24px; }
.gancho__frase p {
    margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(25px, 3.3vw, 43px); line-height: 1.06; letter-spacing: -.02em;
    text-wrap: balance;
    max-width: 21ch;   /* ⚠️ aqui, não no blockquote: o `ch` é medido na fonte DESTE elemento */
}
.gancho__titulo {
    margin: 0 0 20px;
    font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(34px, 4.6vw, 64px); line-height: 1; letter-spacing: -.025em; color: var(--branco);
}
.gancho__titulo::before { content: ''; display: block; width: 48px; height: 4px; background: var(--brasa); margin-bottom: 24px; }
.gancho__texto { margin: 0 0 32px; max-width: 50ch; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; color: var(--aco-200); }
.gancho__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Responsivo da página ---- */
@media (max-width: 1080px) {
    .tempo, .historia__abre { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
}
@media (max-width: 900px) {
    .sobre__grid, .engenharia__grid, .historia__abre { grid-template-columns: 1fr; }
    .engenharia__foto { min-height: 0; aspect-ratio: 4 / 3; }
    .historia__abre .titulo-secao { max-width: none; }
    .pilares { grid-template-columns: 1fr; gap: 30px; }

    /* No celular o painel vira uma barra presa logo abaixo do cabeçalho:
       o hodômetro continua visível enquanto a pessoa rola os marcos. */
    .tempo { grid-template-columns: 1fr; gap: 26px; }
    .tempo__painel {
        top: 72px; z-index: 5;
        display: flex; align-items: center; gap: 16px;
        margin: 0 calc(-1 * var(--gutter));
        padding: 10px var(--gutter);
        background: rgba(14,17,21,.94);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .hodometro { font-size: 40px; padding: 5px; gap: 3px; box-shadow: inset 0 2px 8px rgba(0,0,0,.7); }
    .tempo__epoca { margin: 0; font-size: 15px; }
    .tempo__trilho { display: none; }
    .js .tempo.is-vivo .marco { opacity: 1; }   /* no celular, um marco por tela: nada a apagar */
    .gancho__midia::after { background: linear-gradient(to top, rgba(14,17,21,.96) 0%, rgba(14,17,21,.78) 55%, rgba(14,17,21,.35) 100%); }
    .gancho { align-items: flex-end; }
}
@media (max-width: 620px) {
    .gancho__acoes .btn { width: 100%; }
    .marco__ano { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .hodometro__fita { transition: none; }
}

/* =====================================================================
   22. Topo das páginas INTERNAS (24/09/2026) — ver .claude/CLAUDE.md §26
       includes/topo-interno.php · a home abre escura, em vídeo, de ponta a
       ponta; a interna abre em concreto claro, com a foto num painel que
       sangra pela direita e a PLAQUETA DE IDENTIFICAÇÃO — a chapa rebitada
       que todo equipamento IMAVI leva de fábrica — presa na borda da foto.
   ===================================================================== */

/* O cabeçalho transparente foi feito para o vídeo da home; sobre o concreto
   ele não leria. Nas internas nasce sólido. */
.cabecalho--solido { background: var(--aco-900); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.cabecalho--solido::before { opacity: 0; }
/* ⚠️ .is-fixo (ao rolar) deixa o fundo a 92% com desfoque — sobre o topo claro das
   internas, a plaqueta vinho aparecia borrada atrás do logo. Nas internas, opaco. */
.cabecalho--solido.is-fixo { background: var(--aco-900); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Grade: [margem] [texto] [foto ....... até a borda da tela]
   As colunas 2 e 3 somam a largura útil do container (1280 − 2 × 28), então o
   texto alinha com o resto da página e só a foto escapa pela direita. */
.topo-int {
    position: relative;
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 660px) minmax(0, 564px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: clamp(540px, 70svh, 680px);
    padding-top: var(--cabecalho-h);
    background: var(--concreto);
    border-bottom: 1px solid var(--concreto-2);
    overflow: hidden;
}
/* a mesma malha técnica da seção das linhas e do modal, aqui em papel claro */
.topo-int::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(14,17,21,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,17,21,.045) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 62%);
            mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 62%);
}

.topo-int__texto {
    position: relative; z-index: 1;
    grid-column: 2; grid-row: 1;
    align-self: center;
    padding: clamp(40px, 5.5vh, 64px) 84px clamp(32px, 4vh, 48px) 0;
}

.trilha ol {
    display: flex; flex-wrap: wrap; align-items: center;
    margin: 0 0 clamp(20px, 2.6vh, 30px); padding: 0; list-style: none;
    font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.trilha li + li::before { content: '/'; margin: 0 .75em; color: var(--aco-300); font-weight: 400; }
.trilha a { color: var(--aco-400); transition: color var(--transicao); }
.trilha a:hover { color: var(--vinho); }
.trilha [aria-current] { color: var(--vinho); }

.topo-int__titulo {
    margin: 0 0 22px;
    font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(31px, 3.75vw, 54px); line-height: 1.02; letter-spacing: -.025em;
    color: var(--aco-900);
    text-wrap: balance;
}
/* Título de frase inteira ("Há 60 anos desenvolvendo soluções…", A IMAVI):
   no tamanho padrão passaria de 5 linhas. `titulo_longo` no $topo. */
.topo-int__titulo--longo { font-size: clamp(28px, 3.05vw, 44px); line-height: 1.05; }
/* a segunda voz do título: o termo que o comprador procura, em vinho */
.topo-int__titulo em { font-style: normal; color: var(--vinho); }

.topo-int__lead {
    margin: 0; max-width: 46ch;
    font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--grafite);
}
.topo-int__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Âncoras "Nesta página" — o índice da página, no pé da coluna de texto */
.topo-int__nesta {
    position: relative; z-index: 1;
    grid-column: 2; grid-row: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    margin-right: 72px;
    padding: 18px 0 22px;
    border-top: 1px solid var(--concreto-2);
}
.topo-int__nesta ul { display: contents; }
.topo-int__nesta-rotulo {
    font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--aco-400);
}
.topo-int__nesta a {
    display: inline-flex; align-items: center; gap: .5em;
    font-size: 12.5px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
    color: var(--aco-800); transition: color var(--transicao);
}
.topo-int__nesta a svg { color: var(--brasa); transition: transform var(--transicao); }
.topo-int__nesta a:hover { color: var(--vinho); }
.topo-int__nesta a:hover svg { transform: translateY(2px); }

/* A foto: painel que sangra pela direita, da base do cabeçalho ao pé do topo */
.topo-int__figura {
    position: relative; margin: 0;
    grid-column: 3 / 5; grid-row: 1 / 3;
}
.topo-int__midia {
    position: absolute; inset: 0; overflow: hidden;
    background: var(--aco-800);
    animation: topo-int-rola 1050ms cubic-bezier(.7, 0, .2, 1) both;
}
.topo-int__midia img {
    width: 100%; height: 100%; object-fit: cover;
    animation: topo-int-assenta 1500ms cubic-bezier(.2, .7, .3, 1) both;
}
/* A foto entra da direita para a esquerda — o equipamento subindo no
   caminhão. ⚠️ O clip-path fica na <picture>, não na <figure>: na figure
   ele cortaria a parte da plaqueta que avança sobre a coluna de texto. */
@keyframes topo-int-rola    { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes topo-int-assenta { from { transform: scale(1.08); } to { transform: none; } }

/* ★ A plaqueta de identificação. Alumínio escovado, faixa vinho com a marca,
   campos gravados em caixa alta, quatro rebites. Presa na borda esquerda da
   foto, avançando sobre o concreto — como a chapa rebitada no chassi. */
.plaqueta {
    --rebite: radial-gradient(circle at 38% 36%, #FBFCFD 0 1px, #9AA4AF 2.2px 3.3px, rgba(14,17,21,.35) 3.6px, transparent 4.2px);
    position: absolute; z-index: 2;
    left: -60px; bottom: clamp(32px, 5vh, 56px);
    width: 300px;
    padding-bottom: 16px;
    border-radius: 4px;
    color: var(--aco-900);
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
        linear-gradient(150deg, #E9ECEF 0%, #CED4DB 52%, #DDE2E7 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 0 0 1px rgba(14,17,21,.2),
        0 20px 40px rgba(14,17,21,.3);
    animation: plaqueta-prende 700ms cubic-bezier(.2, .8, .3, 1.15) 780ms both;
}
.plaqueta::after {
    content: ''; position: absolute; inset: 6px; pointer-events: none;
    background:
        var(--rebite) left top / 9px 9px no-repeat,
        var(--rebite) right top / 9px 9px no-repeat,
        var(--rebite) left bottom / 9px 9px no-repeat,
        var(--rebite) right bottom / 9px 9px no-repeat;
}
.plaqueta__faixa {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 24px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #A2243A 0%, var(--vinho) 55%, var(--vinho-escuro) 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}
.plaqueta__faixa img { width: 96px; height: auto; }
.plaqueta__faixa span {
    font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.86);
}
.plaqueta__campos {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;   /* sem isto, "toneladas," encostava em "Simples" no celular (24/09) */
    padding: 2px 24px 0;
}
.plaqueta__campos > div { padding: 12px 0 0; }
.plaqueta__campos > div:nth-child(n+3) { margin-top: 12px; border-top: 1px solid rgba(14,17,21,.16); }
.plaqueta__campos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.plaqueta__campos dt {
    font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: #5B6572;
}
.plaqueta__campos dd {
    /* sem caixa alta: "m³" e "t" viravam "M³" e "T" — unidade errada (24/09) */
    margin-top: 3px;
    font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.15;
    letter-spacing: .005em;
    color: var(--aco-900);
    text-shadow: 0 1px 0 rgba(255,255,255,.55);   /* gravado: luz embaixo */
}
@keyframes plaqueta-prende {
    from { opacity: 0; transform: translateY(18px) rotate(-2.5deg); }
    to   { opacity: 1; transform: none; }
}

/* ---- Responsivo do topo interno ---- */
@media (max-width: 1320px) {
    /* a coluna de texto estreita: o rótulo sobe e os links cabem numa linha */
    .topo-int__nesta-rotulo { flex: 1 0 100%; }
}
@media (max-width: 1080px) {
    .topo-int {
        grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
        grid-template-rows: auto;
        min-height: 0;
    }
    .topo-int::before { -webkit-mask-image: none; mask-image: none; }
    .topo-int__texto { grid-column: 2; grid-row: auto; padding: 34px 0 30px; }
    .topo-int__figura {
        grid-column: 1 / -1; grid-row: auto;
        display: flex; flex-direction: column;
    }
    /* teto pela altura da tela: em tablet deitado a foto empurrava a plaqueta para fora */
    .topo-int__midia { position: relative; inset: auto; aspect-ratio: 16 / 9; max-height: min(400px, 46svh); }
    /* no celular a foto ocupa a largura toda: a plaqueta desce para a borda
       de baixo dela, metade sobre a foto, metade sobre o concreto.
       ⚠️ Só a do TOPO: sem o escopo, a plaqueta grande da ficha técnica subia
       52 px por cima do link "Baixar catálogo" (24/09). */
    .topo-int .plaqueta {
        position: relative; left: auto; bottom: auto;
        width: min(300px, calc(100% - 2 * var(--gutter)));
        margin: -52px 0 0 var(--gutter);
    }
    .topo-int__nesta { grid-column: 2; grid-row: auto; margin: 26px 0 0; }
}
@media (max-width: 620px) {
    .topo-int__nesta { gap: 6px 18px; padding: 14px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .topo-int__midia, .topo-int__midia img, .plaqueta { animation: none; }
}

/* =====================================================================
   23. Menu "Produtos" (24/09/2026) — ver .claude/CLAUDE.md §28
       ⚠️ DESDE A v20 O PAINEL ESTÁ DESLIGADO ("Produtos" é link para /produtos/).
       As peças do filtro (.mp__pergunta, .mp__chips, .mp__chip, .mp__busca,
       .mp__status, .mp__vazio) CONTINUAM EM USO pela /produtos/; o resto fica
       dormente para poder voltar — .claude/backup-menu-produtos/README.md
       includes/menu-produtos.php · main.js seção 9
       Um painel branco que desce do cabeçalho com as três divisões lado a
       lado. ★ Assinatura: "O que você precisa movimentar?" — a carga acende
       os produtos que servem a ela.
   ===================================================================== */

/* O painel se posiciona pelo CABEÇALHO (largura toda), não pelo container.
   Por isso o miolo do cabeçalho deixou de ser `position: relative`; o véu de
   gradiente passou para trás dele com z-index negativo — dentro do contexto
   de empilhamento do próprio cabeçalho, que é fixo com z-index 100. */
.cabecalho__inner { position: static; }
.cabecalho::before { z-index: -1; }
.nav__item--produtos { position: static; }

.nav__produtos { display: inline-flex; align-items: center; gap: 6px; }
.nav__seta { transition: transform var(--transicao); opacity: .75; }
.nav__produtos[aria-expanded="true"] { color: var(--branco); }
.nav__produtos[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__produtos[aria-expanded="true"] .nav__seta { transform: rotate(180deg); opacity: 1; }

/* aberto sobre o vídeo da home, o cabeçalho transparente viraria um vão entre
   o menu e o painel: ele fica sólido enquanto o painel está aberto */
.cabecalho.is-produtos { background: var(--aco-900); }
.cabecalho.is-produtos::before { opacity: 0; }

.menu-veu {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(14,17,21,.52);
    animation: mp-veu 240ms ease both;
}
@keyframes mp-veu { from { opacity: 0; } to { opacity: 1; } }

.mp {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--branco);
    max-height: calc(100svh - 72px); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 34px 60px rgba(14,17,21,.34);
}
/* o fio vinho → brasa do modal do catálogo: o mesmo sistema */
.mp::before {
    content: ''; position: sticky; top: 0; z-index: 2; display: block; height: 3px;
    background: linear-gradient(90deg, var(--vinho), var(--brasa));
}
.mp:not([hidden]) { animation: mp-desce 280ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes mp-desce { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.mp__inner { max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter) 0; }

/* --- a pergunta e a busca --- */
.mp__topo {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 40px;
    padding-bottom: 16px; border-bottom: 1px solid var(--concreto-2);
}
.mp__filtro { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.mp__pergunta {
    margin: 0;
    font-family: var(--display); font-weight: 800; font-size: 13px;
    letter-spacing: .07em; text-transform: uppercase; color: var(--aco-900);
}
.mp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp__chip {
    padding: 7px 12px; border-radius: 100px;
    border: 1px solid var(--concreto-2); background: var(--branco);
    font-size: 13px; font-weight: 500; color: var(--grafite);
    transition: var(--transicao);
}
.mp__chip:hover { border-color: var(--vinho); color: var(--vinho); }
.mp__chip[aria-pressed="true"] { background: var(--vinho); border-color: var(--vinho); color: var(--branco); }

.mp__busca {
    flex: 0 0 236px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 2px 8px; border-bottom: 2px solid var(--aco-900);
    color: var(--aco-400); transition: border-color var(--transicao);
}
.mp__busca:focus-within { border-color: var(--brasa); color: var(--brasa); }
.mp__busca input {
    flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 4px 0;
    font-size: 15px; color: var(--aco-900); outline: none;
}
.mp__busca input::placeholder { color: #A9B0B9; }

.mp__status {
    margin: 0; min-height: 0;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vinho);
}
.mp.is-filtrando .mp__status:not(:empty) { margin-top: 12px; }

/* --- as três divisões --- */
.mp__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, .95fr);
    padding: 18px 0 20px;
}
.mp__col { padding: 0 26px; border-left: 1px solid var(--concreto-2); transition: opacity var(--transicao); }
.mp__col:first-child { padding-left: 0; border-left: 0; }
.mp__col:last-child { padding-right: 0; }

.mp__cat {
    display: flex; align-items: center; gap: 9px; margin: 0 0 4px;
    font-family: var(--display); font-weight: 900; font-size: 17px; text-transform: uppercase;
    letter-spacing: -.01em; color: var(--aco-900);
}
.mp__cat a { transition: color var(--transicao); }
.mp__cat a:hover { color: var(--vinho); }
.mp__conta {
    padding: 1px 8px; border: 1px solid var(--concreto-2); border-radius: 100px;
    font-family: var(--corpo); font-size: 11px; font-weight: 700; color: var(--aco-400);
    font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.mp__desc { margin: 0 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--grafite); max-width: 42ch; }

.mp__item { transition: opacity 220ms ease, filter 220ms ease; }
.mp__prod { transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao); }
.mp__fig img { mix-blend-mode: multiply; }   /* recortes em fundo branco somem no fundo do cartão */

/* Roll-On/Roll-Off: cartões com o render, o foco da IMAVI */
.mp__cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mp__cartoes .mp__prod {
    display: flex; flex-direction: column; height: 100%;
    padding: 8px 12px 10px;
    background: var(--concreto); border-radius: var(--radius);
}
.mp__cartoes .mp__fig { display: block; height: 84px; margin-bottom: 6px; }
.mp__cartoes .mp__fig img { width: 100%; height: 100%; object-fit: contain; transition: transform 420ms cubic-bezier(.2, .7, .3, 1); }
.mp__cartoes .mp__nome {
    font-family: var(--display); font-weight: 900; font-size: 17px; line-height: 1.05;
    text-transform: uppercase; letter-spacing: -.01em; color: var(--aco-900);
}
.mp__cartoes .mp__txt { display: flex; flex-direction: column; }
.mp__cartoes .mp__dado {
    margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--vinho);
    font-variant-numeric: tabular-nums;
}
.mp__cartoes .mp__prod:hover { background: var(--branco); box-shadow: 0 0 0 1px var(--concreto-2), 0 12px 24px rgba(14,17,21,.1); transform: translateY(-2px); }
.mp__cartoes .mp__prod:hover .mp__fig img { transform: scale(1.05); }

/* Implementos e Poliguindastes — FICHAS (revisão de 24/09, §28.1)
   A lista anterior deixava os recortes soltos, cada um de uma cor, tamanho e
   formato (a gaiola preta, os tanques vermelhos), e "Plataforma de Transporte"
   em duas linhas desalinhava as colunas. Agora cada recorte fica numa MOLDURA
   de tamanho fixo e todas as fichas têm a mesma altura: a grade organiza o que
   as fotos, sozinhas, bagunçavam. */
.mp__lista { display: grid; gap: 6px; align-content: start; }
.mp__lista .mp__item { display: flex; flex-direction: column; }   /* a ficha cresce só no espaço que sobra — nunca por cima dos modelos */
.mp__lista--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; column-gap: 8px; }
.mp__lista .mp__prod {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 11px;
    flex: 1 0 auto; min-height: 56px; padding: 5px 10px 5px 5px;
    border: 1px solid var(--concreto-2); border-radius: var(--radius); background: var(--branco);
}
.mp__lista .mp__fig {
    width: 56px; height: 42px; display: flex; align-items: center; justify-content: center;
    padding: 4px 5px; border-radius: 2px; background: var(--concreto);
    transition: background var(--transicao);
}
.mp__lista .mp__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 380ms cubic-bezier(.2, .7, .3, 1); }
.mp__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mp__lista .mp__nome {
    font-size: 13.5px; font-weight: 600; line-height: 1.05; color: var(--aco-900);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 1px;   /* 1.05 é mais justo que o desenho da Inter: 1 px para o "p" e o "ç" não serem cortados pelo overflow */
}
.mp__lista .mp__dado {
    font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--vinho);
    font-variant-numeric: tabular-nums;
}
.mp__lista .mp__prod:hover { border-color: var(--vinho); box-shadow: 0 6px 16px rgba(14,17,21,.08); }
.mp__lista .mp__prod:hover .mp__fig { background: #E6E9EE; }
.mp__lista .mp__prod:hover .mp__fig img { transform: scale(1.07); }
.mp__lista .mp__prod:hover .mp__nome { color: var(--vinho); }
.mp__lista .mp__prod:focus-visible { outline-offset: 1px; }

.mp__sem-foto { width: 34px; height: auto; color: var(--vinho); }

/* os modelos do Poliguindaste, pendurados sob o produto */
.mp__modelos { margin: 2px 0 4px 34px; padding: 2px 0 2px 16px; border-left: 1px solid var(--concreto-2); }
.mp__modelos a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0;
    font-size: 13px; color: var(--grafite); transition: color var(--transicao);
}
.mp__modelos a span { color: var(--aco-400); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp__modelos a:hover { color: var(--vinho); }

/* --- o filtro em ação --- */
.mp.is-filtrando .mp__item.is-apagado { opacity: .26; filter: grayscale(1); }
.mp.is-filtrando .mp__item.is-achado > .mp__prod { background: #FBEFF1; border-color: #EBC3CB; box-shadow: inset 3px 0 0 var(--brasa); }
.mp.is-filtrando .mp__item.is-achado > .mp__prod .mp__nome { color: var(--vinho); }
.mp.is-filtrando .mp__col.is-sem-achado .mp__cat,
.mp.is-filtrando .mp__col.is-sem-achado .mp__desc { opacity: .4; }

.mp__vazio { margin: 0; padding: 4px 0 22px; font-size: 14.5px; color: var(--grafite); }
.mp__vazio a { color: var(--vinho); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --- rodapé do painel --- */
.mp__rodape {
    display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap;
    padding: 14px 0 18px; border-top: 1px solid var(--concreto-2);
}
.mp__todos {
    display: inline-flex; align-items: center; gap: .6em;
    font-family: var(--display); font-weight: 800; font-size: 12.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--vinho); transition: color var(--transicao);
}
.mp__todos svg { transition: transform var(--transicao); }
.mp__todos:hover { color: var(--brasa); }
.mp__todos:hover svg { transform: translateX(4px); }
.mp__ajuda { margin: 0 auto 0 0; font-size: 13.5px; color: var(--grafite); }
.mp__ajuda a { color: var(--aco-900); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brasa); text-underline-offset: 3px; }
.mp__catalogo {
    display: inline-flex; align-items: center; gap: .55em;
    padding: 9px 16px; border: 1px solid var(--concreto-2); border-radius: var(--radius);
    font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--aco-900);
    transition: var(--transicao);
}
.mp__catalogo svg { color: var(--brasa); }
.mp__catalogo:hover { border-color: var(--vinho); color: var(--vinho); }

/* --- notebook (1366×768 é comum no público da IMAVI): o painel precisa caber
       na tela sem rolagem própria. Colunas mais justas e sem a descrição. --- */
@media (max-width: 1320px) and (min-width: 1181px) {
    .mp__col { padding: 0 18px; }
    .mp__chip { padding: 6px 12px; font-size: 12.5px; }
}
@media (max-height: 860px) and (min-width: 1181px) {
    .mp__desc { display: none; }
    .mp__cat { margin-bottom: 12px; }
}

/* --- celular e tablet: o painel vira uma sanfona dentro do menu escuro --- */
@media (max-width: 1180px) {
    /* ⚠️ Tudo com .cabecalho na frente: as peças do filtro (.mp__chip, .mp__busca…)
       também são usadas na página /produtos/, em fundo BRANCO — sem o escopo, o
       estilo do menu escuro vazava para lá (24/09). */
    .cabecalho.is-aberto .nav { max-height: calc(100svh - var(--cabecalho-h)); overflow-y: auto; overscroll-behavior: contain; }
    .cabecalho.is-aberto .nav__produtos { display: flex; justify-content: space-between; width: 100%; }
    .menu-veu { display: none; }

    .cabecalho .mp {
        position: static; max-height: none; overflow: visible;
        background: transparent; box-shadow: none;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .cabecalho .mp::before { display: none; }
    .cabecalho .mp__inner { padding: 6px 0 16px; }
    .cabecalho .mp__topo { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 14px; border-bottom-color: rgba(255,255,255,.12); }
    .cabecalho .mp__pergunta { color: var(--aco-300); font-size: 11.5px; }
    .cabecalho .mp__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
    .cabecalho .mp__chips::-webkit-scrollbar { display: none; }
    .cabecalho .mp__chip { flex: 0 0 auto; background: transparent; border-color: rgba(255,255,255,.22); color: var(--aco-200); }
    .cabecalho .mp__busca { flex: 0 0 auto; border-bottom-color: rgba(255,255,255,.3); color: var(--aco-400); }
    .cabecalho .mp__busca input { color: var(--branco); }

    .cabecalho .mp__grade { grid-template-columns: 1fr; padding: 8px 0 12px; row-gap: 0; }
    .cabecalho .mp__col, .cabecalho .mp__col:first-child, .cabecalho .mp__col:last-child { padding: 16px 0 0; border: 0; }
    .cabecalho .mp__cat { font-size: 15px; color: var(--branco); }
    .cabecalho .mp__conta { border-color: rgba(255,255,255,.2); }
    .cabecalho .mp__desc { display: none; }
    .cabecalho .mp__cartoes .mp__prod { background: rgba(255,255,255,.06); }
    .cabecalho .mp__cartoes .mp__fig { background: var(--branco); border-radius: 2px; }
    .cabecalho .mp__cartoes .mp__nome { color: var(--branco); font-size: 15px; }
    .cabecalho .mp__cartoes .mp__dado { color: #FF8095; }
    .cabecalho .mp__lista--2col { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .cabecalho .mp__lista .mp__prod { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
    .cabecalho .mp__lista .mp__fig { background: var(--branco); }
    .cabecalho .mp__lista .mp__dado { color: #FF8095; }
    .cabecalho .mp__lista .mp__nome { color: var(--branco); font-weight: 500; }
    .cabecalho .mp__lista .mp__prod:hover, .cabecalho .mp__cartoes .mp__prod:hover { background: rgba(255,255,255,.1); box-shadow: none; transform: none; }
    .cabecalho .mp__lista .mp__prod:hover .mp__nome { color: var(--branco); }
    .cabecalho .mp__modelos { border-left-color: rgba(255,255,255,.14); }
    .cabecalho .mp__modelos a { color: var(--aco-300); }
    .cabecalho .mp.is-filtrando .mp__item.is-achado > .mp__prod { background: rgba(216,30,59,.16); }
    .cabecalho .mp.is-filtrando .mp__item.is-achado > .mp__prod .mp__nome { color: var(--branco); }
    .cabecalho .mp__status { color: #FF8095; }
    .cabecalho .mp__vazio { color: var(--aco-300); }
    .cabecalho .mp__vazio a { color: #FF8095; }
    .cabecalho .mp__rodape { flex-direction: column; align-items: flex-start; border-top-color: rgba(255,255,255,.12); }
    .cabecalho .mp__todos { color: #FF8095; }
    .cabecalho .mp__ajuda { color: var(--aco-300); margin: 0; }
    .cabecalho .mp__ajuda a { color: var(--branco); }
    .cabecalho .mp__catalogo { border-color: rgba(255,255,255,.25); color: var(--branco); }
}
@media (prefers-reduced-motion: reduce) {
    .mp:not([hidden]), .menu-veu { animation: none; }
}

/* =====================================================================
   24. Página de produto e /produtos/ (24/09/2026) — ver .claude/CLAUDE.md §29
       pages/produto.php · pages/produtos.php · includes/cartao-produto.php
       Mesma família do topo interno: concreto, a plaqueta, números grandes.
       ★ A ficha técnica inteira vira a plaqueta de identificação do
       equipamento, em tamanho grande.
   ===================================================================== */

/* ---- peças gerais ---- */
.secao--branco   { background: var(--branco); }
.secao--concreto { background: var(--concreto); }
.secao--concreto .ficha { background: var(--branco); }

.btn--linha { border: 1.5px solid var(--aco-900); color: var(--aco-900); }
.btn--linha:hover { background: var(--aco-900); color: var(--branco); }

/* a barra fixa ocupa 58 px sob o cabeçalho: as âncoras param abaixo dela */
html:has(.pbarra) { scroll-padding-top: calc(72px + 58px + 14px); }

/* ---- topo: complementos do topo interno ---- */
.topo-int__etiqueta {
    display: inline-flex; align-items: center; gap: .65em; margin: 0 0 12px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--vinho);
}
.topo-int__etiqueta::before { content: ''; width: 24px; height: 2px; background: currentColor; }

/* O dado técnico em número grande — "os números são elemento gráfico" (§5) */
.destaque {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px;
    margin: 24px 0 0; padding-top: 16px; max-width: 540px;
    border-top: 1px solid var(--concreto-2);
}
.destaque__pre {
    font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--aco-400);
    align-self: center;
}
.destaque__num {
    font-family: var(--display); font-weight: 900; font-size: clamp(38px, 4.3vw, 62px);
    line-height: .92; letter-spacing: -.03em; color: var(--aco-900); font-variant-numeric: tabular-nums;
}
.destaque__uni {
    /* sem caixa alta: "t" é tonelada, "T" seria outra unidade; "mil L", "m³" idem */
    font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.55vw, 23px);
    letter-spacing: -.01em; color: var(--vinho);
}
.destaque--escuro { border-top-color: rgba(255,255,255,.14); margin-top: 18px; }
.destaque--escuro .destaque__num { font-size: clamp(30px, 3vw, 44px); color: var(--brasa); }
.destaque--escuro .destaque__uni { color: var(--aco-300); }
.topo-int .destaque + .topo-int__acoes { margin-top: 26px; }
/* ficha com valores longos ("12.000, 16.000 e 20.000 litros"): a plaqueta do
   topo aperta a letra em vez de virar uma coluna de seis linhas */
.plaqueta--longa .plaqueta__campos dd { font-size: 13px; letter-spacing: 0; }
.topo-int .plaqueta--longa { width: 320px; }

/* PALCO: o recorte do produto (fundo branco) sobre papel técnico.
   `multiply` faz o branco da foto sumir no palco — o produto fica solto. */
.topo-int--palco .topo-int__figura,
.topo-int--so-plaqueta .topo-int__figura {
    background:
        radial-gradient(ellipse 34% 7% at 58% 79%, rgba(14,17,21,.2), transparent 70%),
        #FBFCFD;
}
.topo-int--palco .topo-int__figura::before,
.topo-int--so-plaqueta .topo-int__figura::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(14,17,21,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,17,21,.05) 1px, transparent 1px);
    background-size: 29px 29px;
    -webkit-mask-image: radial-gradient(ellipse 62% 60% at 58% 48%, transparent 40%, #000 100%);
            mask-image: radial-gradient(ellipse 62% 60% at 58% 48%, transparent 40%, #000 100%);
}
.topo-int--palco .topo-int__midia {
    inset: 7% 5% 22% 27%;   /* à direita da plaqueta, que prende no canto de baixo à esquerda */
    background: transparent; overflow: visible;
}
.topo-int--palco .topo-int__midia img { object-fit: contain; mix-blend-mode: multiply; }

/* sem foto nenhuma: a plaqueta vira a peça do palco, maior e centralizada */
/* ⚠️ Em tela larga o painel vai até a borda da tela: centralizar a plaqueta nele
   a deixava solta à direita, longe do texto (1875 px, 24/09). Ela fica perto da
   borda de dentro do painel, onde a página ainda está no container. */
.topo-int--so-plaqueta .topo-int__figura {
    background:
        radial-gradient(260px 26px at calc(clamp(40px, 8%, 110px) + min(230px, 35%)) 80%, rgba(14,17,21,.2), transparent 70%),
        #FBFCFD;
}
.topo-int--so-plaqueta .plaqueta {
    left: clamp(40px, 8%, 110px); top: 50%; bottom: auto; width: min(460px, 70%);
    translate: 0 -50%;
}
.topo-int--so-plaqueta .plaqueta__faixa { padding: 16px 28px; }
.topo-int--so-plaqueta .plaqueta__campos { padding-left: 28px; padding-right: 28px; }
.topo-int--so-plaqueta .plaqueta.plaqueta--longa { width: min(460px, 70%); }
.topo-int--so-plaqueta .plaqueta--longa .plaqueta__campos dd { font-size: 14px; }

/* ---- barra fixa das seções ---- */
.pbarra {
    position: sticky; top: 72px; z-index: 50;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--concreto-2);
    box-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.pbarra__inner { display: flex; align-items: center; gap: 0; height: 58px; }
.pbarra__nome {
    font-family: var(--display); font-weight: 900; font-size: 15px; text-transform: uppercase;
    letter-spacing: -.01em; color: var(--aco-900); white-space: nowrap;
    max-width: 0; overflow: hidden; opacity: 0; margin-right: 0;
    transition: max-width 360ms ease, opacity 260ms ease, margin 360ms ease;
}
.pbarra.is-presa .pbarra__nome { max-width: 320px; opacity: 1; margin-right: 22px; }
.pbarra.is-presa { box-shadow: 0 10px 24px rgba(14,17,21,.08); }
.pbarra__links {
    display: flex; gap: 2px; margin: 0 22px 0 -12px; min-width: 0; flex: 1 1 auto;
    overflow-x: auto; scrollbar-width: none;
}
.pbarra__links::-webkit-scrollbar { display: none; }
.pbarra__links a {
    position: relative; display: block; padding: 19px 12px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--aco-600); white-space: nowrap; transition: color var(--transicao);
}
.pbarra__links a::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
    background: var(--brasa); transform: scaleX(0); transform-origin: left; transition: transform var(--transicao);
}
.pbarra__links a:hover { color: var(--aco-900); }
.pbarra__links a.is-atual { color: var(--aco-900); }
.pbarra__links a.is-atual::after { transform: scaleX(1); }
.pbarra__cta { flex: 0 0 auto; padding: 11px 18px; font-size: 12px; }

/* ---- visão geral ---- */
.pvisao__abertura {
    display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 28px clamp(36px, 6vw, 96px); align-items: start;
    padding-bottom: clamp(38px, 4.5vw, 60px);
}

/* "Em resumo" — a coluna ao lado da introdução (antes, um vazio com uma etiqueta) */
.presumo {
    padding: 22px 24px 20px;
    background: var(--concreto); border-radius: var(--radius);
    border-top: 3px solid var(--vinho);
}
.secao--concreto .presumo { background: var(--branco); }
.presumo__rotulo {
    margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--aco-400);
}
.presumo__rotulo:not(:first-child) { margin-top: 18px; }
.presumo__dados > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 9px 0; border-bottom: 1px solid var(--concreto-2); font-size: 14.5px;
}
.presumo__dados dt { color: var(--aco-400); }
.presumo__dados dd { margin: 0; font-weight: 600; color: var(--aco-900); text-align: right; }
.presumo__dados dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--aco-300); text-underline-offset: 3px; }
.presumo__dados dd a:hover { text-decoration-color: var(--vinho); color: var(--vinho); }
.presumo__dados .presumo__num { font-family: var(--display); font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; }
.presumo__modelos li a {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
    border-bottom: 1px solid var(--concreto-2); font-size: 14.5px; font-weight: 600; color: var(--aco-900);
    transition: color var(--transicao);
}
.presumo__modelos li a span { font-weight: 500; color: var(--aco-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.presumo__modelos li a:hover { color: var(--vinho); }
.presumo__link {
    display: inline-flex; align-items: center; gap: .5em; margin-top: 18px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vinho);
}
.presumo__link svg { transition: transform var(--transicao); }
.presumo__link:hover svg { transform: translateY(2px); }
.pvisao__intro p {
    font-size: clamp(18.5px, 1.55vw, 22px); line-height: 1.55; color: var(--aco-800);
    max-width: 58ch; margin-bottom: .8em;
}
.pvisao__intro p:last-child { margin-bottom: 0; }

.pbloco {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
    gap: 14px clamp(30px, 4.5vw, 64px);
    padding: clamp(26px, 3vw, 38px) 0;
    border-top: 1px solid var(--concreto-2);
}
.pbloco__titulo {
    margin: 0; font-size: clamp(18px, 1.55vw, 22px); font-weight: 900; text-transform: uppercase;
    color: var(--aco-900); max-width: 18ch; line-height: 1.1;
}
.pbloco__texto p { font-size: 16.5px; color: var(--grafite); max-width: 64ch; margin-bottom: .8em; }
.pbloco__texto p:last-child { margin-bottom: 0; }

/* A contagem sob o título: a coluna da esquerda ficava vazia ao lado de listas longas. */
.pbloco__conta {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0 0;
    font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--aco-400);
}
.pbloco__conta::before { content: ''; width: 22px; height: 2px; background: var(--brasa); }

/* ★ Etiquetas de peça (29/09/2026, §47). Eram uma lista com ✓ em 3 colunas: o ✓ dizia
   "incluso" e o sublinhado de cada linha terminava desalinhado quando um item quebrava.
   Agora cada item é uma etiqueta baixa com o REBITE da plaqueta de identificação (a
   assinatura do site). Em grade, as da mesma linha têm a mesma altura. Não são
   clicáveis — por isso não têm hover. */
.pbloco__pecas {
    --rebite: radial-gradient(circle at 38% 36%, #FBFCFD 0 1px, #9AA4AF 2.2px 3.3px, rgba(14,17,21,.35) 3.6px, transparent 4.2px);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;
    margin: 0; padding: 0; list-style: none;
}
.pbloco__texto + .pbloco__pecas { margin-top: 22px; }
.pbloco__pecas li {
    position: relative; display: flex; align-items: center;
    min-height: 52px; padding: 12px 16px 12px 40px;
    background: var(--concreto); border: 1px solid var(--concreto-2);
    border-radius: var(--radius);
    font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--aco-800);
}
.pbloco__pecas li::before {
    content: ''; position: absolute; left: 15px; top: 50%;
    width: 9px; height: 9px; margin-top: -4.5px;
    background: var(--rebite);
}
.secao--concreto .pbloco__pecas li { background: var(--branco); }

.pitens { display: grid; gap: 0 28px; }
.pitens li {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 11px 0; border-bottom: 1px solid var(--concreto-2);
    font-size: 15.5px; line-height: 1.45; color: var(--aco-800);
}
.secao--concreto .pitens li { border-bottom-color: var(--concreto-2); }
.pitens li svg { flex: 0 0 auto; margin-top: 4px; color: var(--brasa); }
.pitens--escuro li { color: var(--aco-200); border-bottom-color: rgba(255,255,255,.1); }

/* ---- modelos: as abas da home, no escuro ---- */
.pmodelos { background: var(--aco-850); color: var(--branco); position: relative; overflow: hidden; }
.pmodelos::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 58px 58px;
}
.pmodelos > .container { position: relative; z-index: 1; }
.pmodelos .painel { padding-top: clamp(30px, 3.6vw, 48px); }
.pmodelos .abas + .painel { scroll-margin-top: 200px; }

.pmodelo__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(28px, 4.5vw, 72px); align-items: start;
}
.pmodelo__nome {
    margin: 0; font-family: var(--display); font-weight: 900;
    font-size: clamp(44px, 5.8vw, 86px); line-height: .9; letter-spacing: -.035em;
    text-transform: uppercase; color: var(--branco);
    /* ⚠️ NUNCA overflow-wrap: anywhere aqui — com letra desse tamanho, "Duplo
       Articulado Postiço" quebrava no meio da palavra (ARTICULAD / O). Nome longo
       tem tamanho próprio (--longo) e só quebra entre palavras. */
    overflow-wrap: normal; word-break: keep-all; hyphens: manual; text-wrap: balance;
}
.pmodelo__nome--longo { font-size: clamp(32px, 3.3vw, 46px); line-height: .98; letter-spacing: -.025em; }
/* abas com nomes longos: letra menor para caber numa linha e a capacidade alinhar */
.abas--longas .aba__nome { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.1; }
.pmodelo__texto { margin: 22px 0 26px; }
.pmodelo__texto p { color: var(--aco-300); font-size: 16.5px; max-width: 52ch; margin-bottom: .8em; }
.pmodelo__lista {
    padding: 22px 26px 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
}
.pmodelo__rotulo {
    margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--aco-400);
}
.pmodelo__lista .pitens li:last-child { border-bottom: 0; }
/* foto do modelo no alto do quadro (v20): ocupa a largura do quadro, colada nas bordas */
.pmodelo__foto {
    display: flex; align-items: center; justify-content: center;
    margin: -22px -26px 20px; padding: 18px 22px; min-height: 220px;
    border-radius: var(--radius) var(--radius) 0 0; box-shadow: none;
}
.pmodelo__foto img { width: 100%; max-width: 440px; height: auto; }

.pcompara { margin-top: clamp(44px, 5vw, 68px); }
.pcompara__titulo {
    margin: 0 0 14px; font-family: var(--display); font-weight: 800; font-size: 15px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--branco);
}
.pcompara__rolagem { overflow-x: auto; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); }
.pcompara__rolagem:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; }
.pcompara__tabela { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14.5px; }
.pcompara__tabela th, .pcompara__tabela td {
    padding: 14px 18px; text-align: left; vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.pcompara__tabela tr:last-child th, .pcompara__tabela tr:last-child td { border-bottom: 0; }
.pcompara__tabela thead th {
    background: rgba(255,255,255,.04);
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aco-400);
}
.pcompara__tabela tbody th a {
    font-family: var(--display); font-weight: 900; font-size: 16px; text-transform: uppercase;
    color: var(--branco); white-space: nowrap; transition: color var(--transicao);
}
.pcompara__tabela tbody th a:hover { color: var(--brasa); }
.pcompara__tabela td { color: var(--aco-200); font-variant-numeric: tabular-nums; }
.pcompara__tabela tbody tr { transition: background var(--transicao); }
.pcompara__tabela tbody tr:hover { background: rgba(255,255,255,.03); }

/* ---- galeria: mosaico que se ajusta à quantidade de fotos ---- */
.pgaleria__grade {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 15vw, 220px); gap: 10px;
}
.pgaleria__grade li:first-child { grid-column: span 2; grid-row: span 2; }
.pgaleria__grade--4 li:nth-child(4) { grid-column: span 3; }
.pgaleria__grade--5 li:nth-child(5) { grid-column: span 2; }
.pgaleria__grade--1 li:first-child { grid-column: 1 / -1; }
.pgaleria__grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgaleria__grade--2 li { grid-column: auto !important; grid-row: span 2; }
.pgaleria__grade a {
    position: relative; display: block; width: 100%; height: 100%;
    overflow: hidden; border-radius: var(--radius); background: var(--aco-800);
}
.pgaleria__grade img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 620ms cubic-bezier(.2, .7, .3, 1), opacity var(--transicao);
}
.pgaleria__grade a:hover img { transform: scale(1.045); }
.pgaleria__grade a:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; }
.pgaleria__mais {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(14,17,21,.62); color: var(--branco);
    font-family: var(--display); font-weight: 900; font-size: 34px;
}

/* ampliador (criado pelo main.js, seção 11) */
.lupa {
    width: 100vw; height: 100svh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: transparent; color: var(--branco);
}
.lupa::backdrop { background: rgba(8,10,13,.93); }
.lupa[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lupa__figura { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 70px; }
.lupa__figura img { max-width: min(1400px, 100%); max-height: calc(100svh - 150px); width: auto; height: auto; border-radius: var(--radius); }
.lupa__legenda { font-size: 14px; color: var(--aco-300); text-align: center; }
.lupa__legenda b { color: var(--branco); font-weight: 600; margin-right: 10px; font-variant-numeric: tabular-nums; }
.lupa__botao {
    position: absolute; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: var(--branco); transition: background var(--transicao);
}
.lupa__botao:hover { background: var(--vinho); }
.lupa__fechar { top: 18px; right: 18px; }
.lupa__ant { left: 14px; top: 50%; margin-top: -24px; }
.lupa__prox { right: 14px; top: 50%; margin-top: -24px; }

/* ---- ★ ficha técnica: a plaqueta de identificação em tamanho grande ---- */
.pficha__grid {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(34px, 5vw, 84px); align-items: center;
}
.pficha__cta { margin-top: 8px; padding-left: 18px; border-left: 3px solid var(--vinho); }
.pficha__cta h3 {
    margin: 0 0 .45em; font-family: var(--display); font-weight: 800; font-size: 18px;
    text-transform: uppercase; letter-spacing: -.005em; color: var(--aco-900); line-height: 1.2;
}
.pficha__cta p { margin: 0; font-size: 16px; color: var(--grafite); max-width: 48ch; }
.pficha__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.pficha__catalogo {
    display: inline-flex; align-items: center; gap: .55em;
    font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--aco-900);
    border-bottom: 2px solid var(--concreto-2); padding: 4px 0; transition: var(--transicao);
}
.pficha__catalogo svg { color: var(--brasa); }
.pficha__catalogo:hover { border-color: var(--vinho); color: var(--vinho); }

.plaqueta--grande {
    position: relative; left: auto; bottom: auto; width: 100%; max-width: 640px; justify-self: end;
    padding-bottom: 22px; animation: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        0 0 0 1px rgba(14,17,21,.2),
        0 30px 60px rgba(14,17,21,.22);
}
.plaqueta--grande::after { inset: 8px; }
.plaqueta--grande .plaqueta__faixa { padding: 18px 32px; }
.plaqueta--grande .plaqueta__faixa img { width: 124px; }
.plaqueta--grande .plaqueta__faixa span { font-size: 11.5px; }
.plaqueta--grande .plaqueta__campos { padding: 4px 32px 0; column-gap: 30px; }
.plaqueta--grande .plaqueta__campos > div { padding-top: 16px; }
.plaqueta--grande .plaqueta__campos > div:nth-child(n+3) { margin-top: 16px; }
.plaqueta--grande .plaqueta__campos dt { font-size: 10px; }
.plaqueta--grande .plaqueta__campos dd { font-size: 16.5px; line-height: 1.2; margin-top: 5px; }
.plaqueta__rodape {
    margin: 20px 32px 0; padding-top: 12px; border-top: 1px dashed rgba(14,17,21,.22);
    font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5B6572;
}

/* ---- orçamento ---- */
.porcamento .contato__canal { transition: color var(--transicao); }
.porcamento a.contato__canal:hover strong { color: var(--vinho); }
.form__produto {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 12px 16px;
    background: var(--branco); border: 1px solid var(--concreto-2); border-left: 3px solid var(--vinho);
    border-radius: var(--radius);
}
.form__produto span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aco-400); }
.form__produto strong {
    font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; color: var(--aco-900);
    transition: color 400ms ease;
}
.form__produto.is-trocado strong { color: var(--brasa); }

/* ---- cartão de produto sem foto: o número no lugar da imagem ---- */
.imp-card__vazio {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 100%; text-align: center;
    background:
        linear-gradient(rgba(14,17,21,.045) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(14,17,21,.045) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--concreto);
}
.imp-card__vazio strong {
    font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: -.02em; color: var(--aco-900); font-variant-numeric: tabular-nums;
}
.imp-card__vazio small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vinho); }
.imp-card__figura img { mix-blend-mode: multiply; }

/* ---- /produtos/: a busca (29/09/2026, §47) ----
   Sozinha desde que os chips de carga saíram (§46): no centro, larga, numa faixa de aço
   presa sob o cabeçalho. Parada, ela separa o topo claro da vitrine; ao rolar, forma com o
   cabeçalho uma barra só. O campo tem o mesmo acabamento da busca da FAQ (.faq-busca) e
   a contagem mora dentro dele, à direita, como o mostrador de uma plaqueta. */
.produtos-filtro__barra {
    /* medidas parada × presa (29/09/2026, §49) — a margem de compensação sai delas */
    --pb-pad: 16px;       --pb-alt: 58px;
    --pb-pad-presa: 8px;  --pb-alt-presa: 44px;
    --pb-t: 380ms cubic-bezier(.2, .8, .2, 1);
    position: sticky; top: 72px; z-index: 40;
    background: var(--aco-900);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: margin-bottom var(--pb-t), box-shadow var(--pb-t);
}
/* o brilho vinho vira camada própria: gradiente não anima, opacidade sim */
.produtos-filtro__barra::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 140% at 50% 100%, rgba(146,30,48,.28), transparent 70%);
    transition: opacity var(--pb-t);
}
/* ★ a régua brasa: se desenha do centro quando a faixa trava no topo */
.produtos-filtro__barra::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
    width: min(680px, calc(100% - 2 * var(--gutter))); height: 2px; margin: 0 auto;   /* mesma largura do campo */
    background: var(--brasa); border-radius: 2px;
    transform: scaleX(0); transition: transform 520ms cubic-bezier(.2, .8, .2, 1);
}
.produtos-filtro__inner {
    position: relative; display: flex; justify-content: center;
    padding-top: var(--pb-pad); padding-bottom: var(--pb-pad);
    transition: padding var(--pb-t);
}
.pbusca {
    display: flex; align-items: center; gap: 12px;
    width: min(100%, 680px); height: var(--pb-alt); padding: 0 9px 0 20px;
    background: var(--branco); color: var(--aco-400);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.4);   /* curta: não vaza da faixa */
    transition: box-shadow var(--transicao), color var(--transicao), height var(--pb-t);
}
.pbusca:focus-within { color: var(--vinho); box-shadow: 0 0 0 3px var(--brasa), 0 4px 12px rgba(0,0,0,.4); }
.pbusca__campo { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; cursor: text; }
.pbusca__campo svg { flex: none; width: 20px; height: 20px; transition: width var(--pb-t), height var(--pb-t); }
.pbusca__campo input {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; outline: none;
    font-size: 17px; color: var(--aco-900); transition: font-size var(--pb-t);
}
.pbusca__campo input::placeholder { color: #8D96A1; }
.pbusca__campo input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }   /* o Limpar é nosso (§48) */
/* o mostrador: total parado, achados em brasa enquanto se digita */
.pbusca__conta {
    flex: none; margin: 0; padding: 8px 12px;
    background: var(--concreto); border-radius: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--aco-600); white-space: nowrap; font-variant-numeric: tabular-nums;
    transition: background-color var(--transicao), color var(--transicao);
}
/* ativo em tom claro: o vermelho cheio fica só no botão, que é a ação */
.pbusca__conta.is-ativo { background: #FBEFF1; color: var(--vinho); box-shadow: inset 0 0 0 1px #EBC3CB; }
/* o botão "Buscar": confirma a busca — URL e rolagem até o primeiro resultado (main.js, seção 10) */
.pbusca__botao {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 18px; border: 0; border-radius: 2px;
    background: var(--vinho); color: var(--branco); cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    transition: background-color var(--transicao);
}
.pbusca__botao:hover { background: var(--brasa); }
.pbusca__botao:focus-visible { outline: 2px solid var(--branco); outline-offset: -5px; }
.pbusca__botao svg { transition: transform var(--transicao); }
.pbusca__botao:hover svg { transform: translateX(2px); }
/* "Limpar busca" dentro do campo (29/09/2026, §48) — só aparece com algo buscado. O "×" nativo do
   navegador sai: era azul, diferente em cada navegador, e não dizia o que fazia. */
.pbusca__limpar {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 10px; border-radius: 2px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--aco-600); text-decoration: none;
    transition: color var(--transicao), background-color var(--transicao);
}
.pbusca__limpar:hover { color: var(--vinho); background: var(--concreto); }
.pbusca__limpar:focus-visible { outline: 2px solid var(--vinho); outline-offset: 1px; }
.pbusca__limpar[hidden] { display: none; }

/* ★ Presa no topo (29/09/2026, §49): a faixa encolhe — parada ela é a porta de entrada da vitrine;
   presa, é uma ferramenta que acompanha a rolagem e não deve roubar a tela. O JS (main.js, seção 10)
   põe .is-presa quando o topo dela encosta no cabeçalho.
   ⚠️ A MARGEM DE BAIXO é o que impede o conteúdo de pular: a faixa perde altura e ganha exatamente a
   mesma medida em margem — a soma não muda em nenhum quadro, porque as duas animam com a mesma curva.
   Sem ela, o conteúdo subia ~28 px ao grudar e a ancoragem de rolagem do navegador podia entrar em
   vaivém na fronteira (gruda → encolhe → descola → cresce…). */
.produtos-filtro__barra.is-presa {
    margin-bottom: calc(2 * (var(--pb-pad) - var(--pb-pad-presa)) + var(--pb-alt) - var(--pb-alt-presa));
    box-shadow: 0 14px 28px -16px rgba(0,0,0,.75);
}
.produtos-filtro__barra.is-presa::before { opacity: .4; }
.produtos-filtro__barra.is-presa::after { transform: scaleX(1); }
.is-presa .produtos-filtro__inner { padding-top: var(--pb-pad-presa); padding-bottom: var(--pb-pad-presa); }
.is-presa .pbusca { height: var(--pb-alt-presa); }
.is-presa .pbusca__campo svg { width: 17px; height: 17px; }
.is-presa .pbusca__campo input { font-size: 15.5px; }
.is-presa .pbusca__conta { padding: 5px 10px; font-size: 10px; }
.is-presa .pbusca__botao { height: 32px; padding: 0 14px; font-size: 11.5px; }
.is-presa .pbusca__limpar { height: 28px; }
.pbusca__conta, .pbusca__botao, .pbusca__limpar {
    transition: background-color var(--transicao), color var(--transicao),
                height var(--pb-t), padding var(--pb-t), font-size var(--pb-t);
}

/* Filtrando (§48): o que não combina SOME — e a categoria inteira, se ficar vazia. Antes os cartões
   ficavam apagados no lugar e a pessoa tinha de procurar os acesos no meio deles. */
[data-filtro].is-filtrando .imp-card.is-apagado,
[data-filtro].is-filtrando .produtos-cat.is-sem-achado { display: none; }

/* ★ Busca sem resultado (§48): logo abaixo da faixa, no lugar da lista. A plaqueta é a mesma chapa
   de alumínio rebitada do topo das páginas — aqui "gravada" com o termo e com o zero. */
/* Ocupa a tela abaixo da faixa presa (72 do cabeçalho + ~61 da faixa): o aviso vira o assunto da tela,
   e a página sempre tem altura para a faixa subir e grudar — curta, ela parava antes e sobrava um vão (§49). */
.pvazio {
    display: flex; align-items: center; min-height: calc(100vh - 134px); min-height: calc(100svh - 134px);
    background: var(--concreto); border-bottom: 1px solid var(--concreto-2); padding: clamp(48px, 7vw, 96px) 0;
}
.pvazio[hidden] { display: none; }
.pvazio__inner {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: clamp(28px, 5vw, 72px); max-width: 1000px;
}
.pvazio__plaqueta {
    --rebite: radial-gradient(circle at 38% 36%, #FBFCFD 0 1px, #9AA4AF 2.2px 3.3px, rgba(14,17,21,.35) 3.6px, transparent 4.2px);
    position: relative; width: 300px; padding: 24px 30px 22px;
    border-radius: 4px; color: var(--aco-900);
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
        linear-gradient(150deg, #E9ECEF 0%, #CED4DB 52%, #DDE2E7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(14,17,21,.2), 0 18px 36px rgba(14,17,21,.18);
    animation: plaqueta-prende 600ms cubic-bezier(.2, .8, .3, 1.15) both;
}
.pvazio__plaqueta::after {
    content: ''; position: absolute; inset: 6px; pointer-events: none;
    background:
        var(--rebite) left top / 9px 9px no-repeat,
        var(--rebite) right top / 9px 9px no-repeat,
        var(--rebite) left bottom / 9px 9px no-repeat,
        var(--rebite) right bottom / 9px 9px no-repeat;
}
.pvazio__rotulo {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--aco-600);
}
.pvazio__termo {
    display: block; margin: 8px 0 14px;
    font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.05;
    letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere;
    color: var(--aco-900); text-shadow: 0 1px 0 rgba(255,255,255,.6);   /* gravado na chapa */
}
.pvazio__zero {
    display: inline-block; padding: 5px 10px; border-radius: 2px;
    background: var(--vinho); color: var(--branco);
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.pvazio__titulo {
    margin: 0 0 14px; font-family: var(--display); font-weight: 900;
    font-size: clamp(26px, 3vw, 38px); line-height: 1.04; letter-spacing: -.01em;
    text-transform: uppercase; color: var(--aco-900);
}
.pvazio__texto p { max-width: 54ch; margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--grafite); }
.pvazio__texto p strong { color: var(--aco-900); }
.pvazio__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- responsivo ---- */
@media (max-width: 1080px) {
    .pvisao__abertura, .pbloco, .pmodelo__grid, .pficha__grid { grid-template-columns: 1fr; }
    /* coluna única: a contagem sobe para o lado do título */
    .pbloco__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
    .pbloco__conta { margin-top: 0; flex: none; }
    .plaqueta--grande { justify-self: stretch; max-width: none; }
    .topo-int--palco .topo-int__midia { position: relative; inset: auto; aspect-ratio: 16 / 10; padding: 6% 10% 10%; }
    .topo-int--palco .topo-int__midia img { width: 100%; height: 100%; }
    .topo-int--so-plaqueta .topo-int__figura { padding: 36px var(--gutter); }
    .topo-int--so-plaqueta .plaqueta,
    .topo-int--so-plaqueta .plaqueta.plaqueta--longa { position: relative; left: auto; top: auto; translate: none; margin: 0; width: min(420px, 100%); }
    .topo-int--so-plaqueta .topo-int__figura { background: #FBFCFD; }
    .pbarra__nome { display: none; }
}
@media (max-width: 900px) {
    .pgaleria__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 34vw, 220px); }
    .pgaleria__grade li:first-child { grid-column: 1 / -1; }
    .pgaleria__grade--4 li:nth-child(4), .pgaleria__grade--5 li:nth-child(5) { grid-column: auto; }
    .pgaleria__grade--5 li:nth-child(5), .pgaleria__grade--3 li:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .produtos-filtro__barra { --pb-pad: 12px; --pb-alt: 52px; --pb-pad-presa: 7px; --pb-alt-presa: 42px; }
    .pbusca { padding-left: 14px; gap: 8px; }
    .is-presa .pbusca__campo input { font-size: 16px; }   /* no celular fica 16 px: menos que isso, o iPhone dá zoom */
    .is-presa .pbusca__botao { width: 36px; height: 32px; padding: 0; }
    .is-presa .pbusca__limpar { height: 28px; width: 28px; }
    .pbusca__campo { gap: 10px; }
    .pbusca__campo input { font-size: 16px; }             /* 16 px: o iPhone não dá zoom ao focar */
    .pbusca__conta { padding: 7px 9px; font-size: 10px; letter-spacing: .1em; }
    /* no celular o espaço é do texto: o total parado some, os achados aparecem ao digitar */
    .pbusca__conta:not(.is-ativo) { display: none; }
    /* o botão vira só a seta; o texto fica para o leitor de tela */
    .pbusca__botao { width: 40px; height: 38px; padding: 0; justify-content: center; }
    .pbusca__botao-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* Limpar vira só o "×" (o nome acessível "Limpar busca" continua no aria-label) */
    .pbusca__limpar { width: 32px; padding: 0; justify-content: center; }
    .pbusca__limpar-texto { display: none; }
    /* aviso sem resultado: a plaqueta sobe e o texto vem embaixo */
    .pvazio__inner { grid-template-columns: 1fr; }
    .pvazio__plaqueta { width: min(100%, 300px); }
    .pvazio__acoes .btn { width: 100%; justify-content: center; }
}
@media (max-width: 340px) {
    .pbusca__campo svg { display: none; }                  /* 320 px: o texto do campo cortava; o botão já indica a busca */
}
@media (max-width: 620px) {
    .pbarra__cta { padding: 9px 12px; font-size: 11px; }
    .pbarra__links a { padding: 19px 9px; font-size: 11.5px; }
    .plaqueta--grande .plaqueta__faixa, .plaqueta--grande .plaqueta__campos { padding-left: 22px; padding-right: 22px; }
    .plaqueta--grande .plaqueta__campos { grid-template-columns: 1fr; }
    .plaqueta--grande .plaqueta__campos > div:nth-child(n+2) { margin-top: 12px; border-top: 1px solid rgba(14,17,21,.16); }
    .plaqueta__rodape { margin-left: 22px; margin-right: 22px; }
    .lupa__figura { padding: 0 12px; }
    .lupa__ant, .lupa__prox { top: auto; bottom: 18px; margin: 0; }
    .destaque__num { font-size: 40px; }
    /* etiquetas curtas (≤ 22 caracteres, produto.php — ex.: "12.000 litros"): duas por linha.
       Com 36, "Luzes de sinalização lateral em LED" quebrava em 3 linhas e a grade ficava picada. */
    .pbloco__pecas--curtas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pbloco__pecas li { min-height: 48px; padding: 10px 12px 10px 32px; font-size: 14.5px; }
    .pbloco__pecas li::before { left: 12px; }
}

/* ---- revisão de 24/09 (§29.7): celular ---- */
@media (max-width: 620px) {
    /* plaqueta do topo com valores longos: uma coluna só */
    .topo-int .plaqueta--longa .plaqueta__campos { grid-template-columns: 1fr; }
    .topo-int .plaqueta--longa .plaqueta__campos > div:nth-child(n+2) { margin-top: 12px; border-top: 1px solid rgba(14,17,21,.16); }
    /* abas de nome longo: largura mínima, a faixa rola para o lado */
    .abas--longas .aba { min-width: 150px; }
}

/* =====================================================================
   25. FAQ — /faq/ (v20, 24/09/2026) — ver .claude/CLAUDE.md §35
       A peça desta página: cada pergunta é uma linha "P." e cada resposta
       abre com "R." — a folha de perguntas e respostas técnicas. A marca
       é uma chapinha, parente dos rebites da plaqueta do topo.
   ===================================================================== */
.faq-busca {
    display: flex; align-items: center; gap: 12px;
    width: min(100%, 540px); height: 58px; padding: 0 18px;
    background: var(--branco); color: var(--aco-400);
    border: 1.5px solid var(--concreto-2); border-radius: var(--radius);
    box-shadow: 0 10px 26px rgba(14,17,21,.07);
    transition: border-color var(--transicao), box-shadow var(--transicao), color var(--transicao);
}
.faq-busca:focus-within { border-color: var(--vinho); color: var(--vinho); box-shadow: 0 0 0 4px rgba(146,30,48,.12), 0 10px 26px rgba(14,17,21,.07); }
.faq-busca input {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; outline: none;
    font-size: 16.5px; color: var(--aco-900);
}
.faq-busca input::placeholder { color: #9AA3AE; }
.faq-busca input::-webkit-search-cancel-button { cursor: pointer; }

.faq { background: var(--branco); }
.faq__grade {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 84px); align-items: start;
}

/* índice dos temas — acompanha a rolagem */
.faq__indice { position: sticky; top: calc(72px + 32px); }
.faq__indice-rotulo {
    margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--aco-400);
}
.faq__indice ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--concreto-2); }
.faq__indice a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-left: -2px; padding: 9px 0 9px 18px; border-left: 2px solid transparent;
    font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--grafite);
    transition: color var(--transicao), border-color var(--transicao), opacity var(--transicao);
}
.faq__indice a:hover { color: var(--vinho); }
.faq__indice a.is-ativo { border-left-color: var(--brasa); color: var(--aco-900); }
.faq__conta { font-size: 12px; font-weight: 700; color: var(--aco-400); font-variant-numeric: tabular-nums; }
.faq__indice a.is-vazio { opacity: .4; }

.faq__status:empty { display: none; }
.faq__status {
    margin: 0 0 22px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--vinho);
}

/* um tema */
.faq-tema { scroll-margin-top: 100px; }
.faq-tema + .faq-tema { margin-top: clamp(48px, 6vw, 76px); }
.faq-tema__cabeca {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; border-bottom: 2px solid var(--aco-900);
}
.faq-tema__titulo {
    margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(21px, 2.3vw, 29px); line-height: 1.05; letter-spacing: -.015em; color: var(--aco-900);
}
.faq-tema__conta {
    flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--aco-400);
}

/* uma pergunta — <details> nativo */
.faq-item { border-bottom: 1px solid var(--concreto-2); scroll-margin-top: 100px; }
.faq-item__pergunta {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 16px; align-items: center;
    padding: 20px 4px; cursor: pointer; list-style: none;
}
.faq-item__pergunta::-webkit-details-marker { display: none; }
.faq-item__pergunta:focus-visible { outline: 2px solid var(--brasa); outline-offset: -2px; }
.faq-item__marca {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius);
    font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: .02em;
    color: var(--vinho); background: #F7EAED; border: 1px solid #EBCBD2;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.faq-item__texto {
    font-size: clamp(16px, 1.25vw, 18px); font-weight: 600; line-height: 1.4; color: var(--aco-900);
    transition: color var(--transicao);
}
.faq-item__icone { position: relative; width: 16px; height: 16px; justify-self: end; }
.faq-item__icone::before, .faq-item__icone::after {
    content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px;
    background: var(--vinho); border-radius: 1px; transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}
.faq-item__icone::after { transform: rotate(90deg); }
.faq-item__pergunta:hover .faq-item__texto { color: var(--vinho); }
.faq-item[open] .faq-item__icone::after { transform: rotate(0deg); }
.faq-item[open] .faq-item__marca { background: var(--vinho); border-color: var(--vinho); color: var(--branco); }

.faq-item__resposta {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 16px;
    padding: 0 4px 28px;
}
.faq-item[open] .faq-item__resposta { animation: surgir 320ms cubic-bezier(.2, .7, .3, 1); }
.faq-item__marca--r { color: var(--aco-600); background: var(--concreto); border-color: var(--concreto-2); }
.faq-item__corpo { grid-column: 2 / 4; padding-top: 7px; }
.faq-item__corpo p, .faq-item__corpo li { font-size: 16.5px; line-height: 1.7; color: var(--grafite); max-width: 68ch; }
.faq-item__corpo p { margin: 0 0 .9em; }
.faq-item__corpo ul { margin: 0 0 .9em; padding: 0; list-style: none; }
.faq-item__corpo li { position: relative; padding-left: 20px; margin-bottom: .35em; }
.faq-item__corpo li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 7px; background: var(--brasa); }
.faq-item__corpo strong { color: var(--aco-900); font-weight: 700; }
.faq-item__corpo a { color: var(--vinho); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq-item__corpo a:hover { color: var(--brasa); }
.faq-item__corpo > :last-child { margin-bottom: 0; }
.faq-item__link {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 4px 0;
    font-size: 12.5px; font-weight: 600; color: var(--aco-400); transition: color var(--transicao);
}
.faq-item__link:hover { color: var(--vinho); }
.faq-item__link.is-copiado { color: #1E7B45; }
.faq mark { background: #FCE3E8; color: inherit; padding: 0 2px; border-radius: 2px; }

/* busca em ação */
.faq-item.is-oculto, .faq-tema.is-oculto { display: none; }
.faq__vazio {
    padding: 28px 30px; background: var(--concreto);
    border-left: 4px solid var(--brasa); border-radius: 0 var(--radius) var(--radius) 0;
}
.faq__vazio p { margin: 0 0 16px; color: var(--grafite); }
.faq__vazio .faq__vazio-titulo { margin-bottom: 6px; font-weight: 700; color: var(--aco-900); }

/* o fechamento */
.faq-fim { position: relative; overflow: hidden; background: var(--aco-900); color: var(--branco); padding: clamp(56px, 7vw, 96px) 0; }
.faq-fim::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 58px 58px;
}
.faq-fim__grade {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px clamp(32px, 5vw, 80px); align-items: center;
}
.faq-fim__titulo {
    margin: 0 0 14px; font-family: var(--display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(30px, 3.8vw, 52px); line-height: 1; letter-spacing: -.025em;
}
.faq-fim__lead { margin: 0; max-width: 42ch; font-size: 17px; color: var(--aco-300); }
.faq-fim__canais { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.faq-canal {
    display: flex; align-items: center; gap: 16px; padding: 16px 22px;
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); color: var(--branco);
    transition: background var(--transicao), border-color var(--transicao);
}
.faq-canal svg { flex: 0 0 auto; color: var(--brasa); }
.faq-canal span { display: flex; flex-direction: column; gap: 2px; }
.faq-canal strong { font-size: 16px; font-weight: 700; }
.faq-canal small { font-size: 13px; color: var(--aco-300); }
.faq-canal:hover { background: rgba(255,255,255,.06); border-color: var(--brasa); }
.faq-canal--whats svg { color: #25D366; }

@media (max-width: 900px) {
    /* minmax(0, …): sem ele a faixa de temas (que não quebra linha) alargava a
       coluna até a largura dela e a página vazava para o lado (978 px em 390) */
    .faq__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    /* o índice vira uma faixa de temas que rola para o lado */
    .faq__indice { position: static; min-width: 0; }
    .faq__indice-rotulo { display: none; }
    .faq__indice ol {
        display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border-left: 0;
        margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px;
    }
    .faq__indice ol::-webkit-scrollbar { display: none; }
    .faq__indice a {
        flex: 0 0 auto; margin: 0; padding: 8px 14px; gap: 8px; white-space: nowrap;
        border: 1px solid var(--concreto-2); border-radius: 100px; font-size: 13.5px;
    }
    .faq__indice a.is-ativo { border-color: var(--vinho); background: var(--vinho); color: var(--branco); }
    .faq__indice a.is-ativo .faq__conta { color: #FFD2DA; }
    .faq-fim__grade { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .faq-item__pergunta, .faq-item__resposta { grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 12px; }
    .faq-item__marca { width: 32px; height: 32px; font-size: 12px; }
    .faq-item__corpo { grid-column: 1 / 4; }
    .faq-item__marca--r { display: none; }
    .faq-busca { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item[open] .faq-item__resposta { animation: none; }
    .faq-item__icone::before, .faq-item__icone::after { transition: none; }
}

/* =====================================================================
   26. Formulários de lead (25/09/2026) — ver .claude/CLAUDE.md §36
       Erro no próprio campo, "Enviando…", confirmação sem recarregar e o
       aviso exigido pela Google para quem esconde o selo do reCAPTCHA.
   ===================================================================== */
.grecaptcha-badge { visibility: hidden !important; }

.form__recaptcha {
    margin: 12px 0 0; font-size: 11.5px; line-height: 1.5;
    /* ⚠️ #56606B, não um cinza mais claro: a 11,5 px o contraste precisa de
       4,5:1, e a ficha é concreto (#EFF1F4), não branco. O #6b7280 da raiz
       daria ~4,0:1 aqui. Conta: 5,7:1 na ficha, 6,4:1 no branco do modal. */
    color: #56606B;
}
.form__recaptcha a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.form__erro {
    margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius);
    background: #FDEAEE; border: 1px solid #F0A8B6; color: #8E1428; font-size: 14px;
}
.form__erro[hidden] { display: none; }

.campo.is-invalido textarea { border-color: var(--brasa); }
.campo__msg { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #B0142F; }
.campo__msg:empty { display: none; }

.form-lead.is-enviando { pointer-events: none; }
.form-lead.is-enviando .form__grid { opacity: .7; transition: opacity .2s; }
.btn[aria-busy="true"] { cursor: progress; }

.form__sucesso { text-align: center; padding: clamp(20px, 4vw, 44px) 8px; outline: none; }
.form__sucesso[hidden] { display: none; }
.form__sucesso-icone { color: #1F7A4C; margin: 0 auto 14px; }
.form__sucesso-titulo {
    font-family: var(--display); font-weight: 900; font-size: 22px; text-transform: uppercase;
    color: var(--aco-900); margin: 0 0 .45em;
}
.form__sucesso-texto { color: var(--grafite); font-size: 15px; margin: 0 auto; max-width: 42ch; }
.form__sucesso-texto a { color: var(--vinho); font-weight: 600; white-space: nowrap; }

/* =====================================================================
   27. Campanha "Robustez que atravessa gerações" (28/09/2026) — ver .claude/CLAUDE.md §38
   A seção é dividida como a cena-chave do filme: passado quente à esquerda,
   presente frio à direita, e o FEIXE em brasa atravessando tudo, por trás do
   slogan e do filme. O slogan é a arte da campanha (slogan-claro.webp) — não
   é redigitado em fonte nossa.
   ===================================================================== */
.campanha {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(84px, 9vw, 132px) 0 clamp(76px, 8vw, 112px);
    background: #0B0D10; color: var(--branco); text-align: center;
}
/* as duas metades: sépia (antes) e aço (hoje) */
.campanha::before, .campanha::after {
    content: ''; position: absolute; top: 0; bottom: 0; z-index: -2; pointer-events: none;
}
.campanha::before {
    left: 0; right: 50%;
    background:
        radial-gradient(80% 60% at 88% 38%, rgba(190,128,62,.20), transparent 70%),
        linear-gradient(90deg, #120E0B 0%, #1A130D 100%);
}
.campanha::after {
    left: 50%; right: 0;
    background:
        radial-gradient(80% 60% at 12% 38%, rgba(96,134,186,.16), transparent 70%),
        linear-gradient(90deg, #0E1218 0%, #0B0D10 100%);
}
/* O feixe é uma faixa de 160 px com a linha e o brilho DESENHADOS dentro dela
   (e não box-shadow): assim a máscara pode interrompê-lo atrás do parágrafo sem
   apagar o brilho junto — máscara recorta tudo o que sai da caixa. A altura do
   corte (--corte-a / --corte-b) é medida pelo main.js, seção 13; sem JS, o
   feixe é inteiro. */
.campanha__feixe {
    position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1;
    width: 160px; margin-left: -80px;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), #FF5A6E calc(50% - 1px), #FF5A6E calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(90deg, transparent 0, rgba(216,30,59,.06) 30%, rgba(216,30,59,.22) 45%, rgba(216,30,59,.55) 49.2%,
                               rgba(216,30,59,.55) 50.8%, rgba(216,30,59,.22) 55%, rgba(216,30,59,.06) 70%, transparent 100%);
    /* --corte-c (28/09/2026, v22.1): o feixe TERMINA na borda de baixo do filme — "entra" nele.
       Antes ele seguia até o pé da seção e passava atrás da legenda e do botão, que ficavam
       difíceis de ler (apontado pelo Felipe no print). */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 calc(var(--corte-a, 200%) - 34px),
        transparent var(--corte-a, 200%), transparent var(--corte-b, 200%), #000 calc(var(--corte-b, 200%) + 34px),
        #000 calc(var(--corte-c, 100%) - 40px), transparent var(--corte-c, 100%), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 calc(var(--corte-a, 200%) - 34px),
        transparent var(--corte-a, 200%), transparent var(--corte-b, 200%), #000 calc(var(--corte-b, 200%) + 34px),
        #000 calc(var(--corte-c, 100%) - 40px), transparent var(--corte-c, 100%), transparent 100%);
}
/* O feixe usa a revelação do site, mas "desce" em vez de subir e aparecer. */
.js .campanha__feixe.revela { opacity: 1; transform: scaleY(0); transform-origin: top; transition: transform 1.5s cubic-bezier(.2,.7,.3,1); }
.js .campanha__feixe.revela.is-visivel { transform: none; }

.campanha__ano {
    position: absolute; z-index: -1; top: clamp(54px, 7vw, 96px);
    font: 900 clamp(88px, 15vw, 244px)/.8 var(--display);
    letter-spacing: -.04em; font-variant-numeric: tabular-nums;
    pointer-events: none; user-select: none;
}
.campanha__ano--antes { right: calc(50% + clamp(14px, 2vw, 30px)); color: rgba(222,176,122,.075); }
.campanha__ano--hoje  { left:  calc(50% + clamp(14px, 2vw, 30px)); color: rgba(168,196,236,.065); }

.campanha__inner { position: relative; }
.campanha__etiqueta {
    display: inline-block; margin-bottom: 18px; padding: 6px 12px;
    background: #0B0D10; color: #FF6A7D;   /* sobre o feixe: tarja escura para ler */
}
/* 540 px (v22.1): com 720 a arte ocupava a tela e pesava mais que o filme — pedido do Felipe. */
.campanha__titulo { margin: 0 auto; max-width: 540px; }
.campanha__titulo img { width: 100%; height: auto; filter: drop-shadow(0 16px 34px rgba(0,0,0,.65)); }
.campanha__texto {
    max-width: 58ch; margin: clamp(22px, 2.6vw, 34px) auto 0; padding: 0 4px;
    font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.65; color: rgba(255,255,255,.80);
    text-shadow: 0 1px 12px rgba(0,0,0,.6);
}

/* o filme: capa própria; o YouTube só entra no clique */
.campanha__filme {
    position: relative; max-width: 980px; margin: clamp(38px, 4.4vw, 58px) auto 0;
    aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 46px 90px -34px rgba(0,0,0,.9), 0 0 120px -30px rgba(216,30,59,.35);
}
.campanha__capa { position: absolute; inset: 0; display: block; color: var(--branco); }
.campanha__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.3,1), filter .5s ease; }
.campanha__capa:hover img, .campanha__capa:focus-visible img { transform: scale(1.025); filter: brightness(1.06); }
.campanha__capa:focus-visible { outline-offset: -4px; }
/* O botão mora na tarja preta de baixo do próprio filme: não cobre o aperto de mão,
   que é o centro da cena. */
.campanha__play {
    position: absolute; left: clamp(14px, 2.4%, 26px); bottom: 5.9%; transform: translateY(50%);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 18px 11px 14px; border-radius: 100px;
    background: var(--brasa); color: var(--branco);
    font: 700 14px/1 var(--corpo); letter-spacing: .01em;
    box-shadow: 0 10px 26px -8px rgba(216,30,59,.75);
    transition: background var(--transicao), transform var(--transicao);
}
.campanha__capa:hover .campanha__play { background: #EA2A48; transform: translateY(50%) scale(1.04); }
.campanha__duracao {
    padding-left: 10px; border-left: 1px solid rgba(255,255,255,.4);
    font-weight: 600; font-variant-numeric: tabular-nums; opacity: .9;
}
.campanha__filme iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.campanha__legenda { margin: 18px 0 0; font-size: 13px; color: var(--aco-300); }
.campanha__acoes { margin-top: clamp(28px, 3vw, 38px); }

@media (max-width: 760px) {
    /* os dois anos cabem cada um na sua metade */
    .campanha__ano { top: 30px; font-size: 14.5vw; }
    /* no canto, como no desktop: no centro o botão cobriria o aperto de mão */
    .campanha__play { left: 10px; bottom: 7%; gap: 8px; padding: 8px 13px 8px 10px; font-size: 12.5px; white-space: nowrap; }
    .campanha__duracao { padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .js .campanha__feixe.revela { transition: none; }
    .campanha__capa img, .campanha__play { transition: none; }
}

/* ---------------------------------------------------------------------
   Aviso de cookies (LGPD) — 01/10/2026, §54. Trazido do site antigo (mesmo texto e mesmo cookie),
   no visual deste: ficha clara com o fio vinho → brasa no alto, cantos retos. Fica à ESQUERDA
   (era para não cobrir o WhatsApp flutuante, que saiu em 01/10/2026 — §55); no celular ocupa a
   largura. Abaixo dos modais (200).
   --------------------------------------------------------------------- */
.cookies {
    position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 120;
    width: min(440px, calc(100vw - 24px)); padding: 20px 22px 18px;
    background: var(--branco); color: var(--aco-900);
    border: 1px solid var(--concreto-2); border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(14,17,21,.22);
    font-size: 14px; line-height: 1.55;
}
.cookies::before {
    content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
    background: linear-gradient(90deg, var(--vinho), var(--brasa));
}
.cookies[hidden] { display: none; }
.cookies__titulo { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.cookies__texto { margin: 0 0 14px; color: var(--grafite); font-size: 13.5px; }
.cookies__prefs { margin: 0 0 14px; padding: 12px 0 2px; border-top: 1px solid var(--concreto-2); }
.cookies__prefs[hidden] { display: none; }
.cookies__pref { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.cookies__pref input { accent-color: var(--vinho); width: 16px; height: 16px; }
.cookies__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cookies__btn {
    flex: 1 1 auto; min-height: 40px; padding: 9px 14px; cursor: pointer;
    font: 600 13px/1.2 var(--corpo); letter-spacing: .01em;
    color: var(--vinho); background: var(--branco);
    border: 1.5px solid var(--vinho); border-radius: var(--radius);
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.cookies__btn:hover { background: #F8E9EC; }
.cookies__btn--principal { color: var(--branco); background: var(--vinho); }
.cookies__btn--principal:hover { background: var(--vinho-escuro); border-color: var(--vinho-escuro); }
.cookies__btn[hidden] { display: none; }
.cookies__btn:focus-visible { outline: 2px solid var(--brasa); outline-offset: 2px; }
@media (max-width: 560px) {
    .cookies { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: no-preference) {
    .cookies:not([hidden]) { animation: cookies-entra 420ms cubic-bezier(.2, .7, .3, 1) both; }
    @keyframes cookies-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}