/* ==========================================================================
   Máquinas e Implementos — sistema de design "Pátio"
   --------------------------------------------------------------------------
   O catálogo de peças é teatro escuro. Este é o oposto: o pátio da revenda em
   dia claro — concreto lavado, chapa branca, verde-lavoura na estrutura e o
   laranja de segurança (o mesmo dos adesivos de advertência e do giroflex de
   máquina agrícola) como único acento.

   O elemento que sustenta a página é a PLACA DE IDENTIFICAÇÃO: a tarja rebitada
   que toda máquina carrega. No card ela é uma faixa; na ficha, vira a própria
   tabela de especificações.

   Sem dependência: sem Bootstrap, sem jQuery. Tokens + componentes.

   Ordem das seções (use como índice ao editar):
     01 tokens      · 02 base         · 03 utilitários  · 04 ícones
     05 barra de marca e idiomas      · 06 hero         · 07 letreiro de marcas
     08 telemetria  · 09 comando      · 10 blocos e plaqueta
     11 card e placa de identificação · 12 trilho       · 13 ficha
     14 diálogos    · 15 folheador de PDF               · 16 rodapé
     17 balão do WhatsApp             · 18 celular       · 19 movimento
   ========================================================================== */

/* -- 01 tokens ------------------------------------------------------------ */
:root {
    /* concreto do pátio */
    --concreto: #f1f3ef;
    --concreto-fundo: #e8ebe5;
    --chapa: #ffffff;
    --sulco: #e4e8e1;
    --linha: #dce1d7;
    --linha-tenue: #e8ebe4;

    /* tinta */
    --tinta: #161c18;
    --tinta-fraca: #5c6862;
    --tinta-tenue: #8a948d;
    --sobre-verde: #eef3ec;
    --sobre-verde-fraco: #a9c0b0;

    /* verde-lavoura: estrutura, faixas, plaquetas */
    --lavoura: #1f5132;
    --lavoura-fundo: #17402a;
    --lavoura-claro: #2e7148;

    /* laranja de segurança: o único acento */
    --sinal: #e4571b;
    --sinal-escuro: #b13f0f;
    --sinal-lavado: rgba(228, 87, 27, .10);

    /* estados */
    --zap: #1da851;
    --neutro: #6b7680;

    /* forma */
    --r-xs: 2px;
    --r-sm: 5px;
    --r-md: 10px;
    --r-lg: 18px;
    --r-cheio: 999px;
    --shell: min(1280px, calc(100% - 32px));

    /* tipografia */
    --display: 'Saira', 'Arial Narrow', system-ui, sans-serif;
    --corpo: 'Public Sans', system-ui, -apple-system, sans-serif;
    --mono: 'Azeret Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* movimento */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --rapido: 150ms;
    --base: 280ms;
    --lento: 620ms;

    /* elevação: sombra rasa, o pátio é plano e iluminado por cima */
    --erguer-1: 0 1px 2px rgba(22, 28, 24, .05), 0 2px 10px rgba(22, 28, 24, .045);
    --erguer-2: 0 2px 4px rgba(22, 28, 24, .06), 0 16px 34px rgba(22, 28, 24, .10);
    --erguer-3: 0 24px 70px rgba(10, 18, 13, .34);

    color-scheme: light;
}

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

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: 132px;
}

body {
    margin: 0;
    background: var(--concreto);
    color: var(--tinta);
    font-family: var(--corpo);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; padding: 0; }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;
}

:focus-visible {
    outline: 2px solid var(--sinal);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

::selection { background: var(--sinal); color: #fff; }

.shell { width: var(--shell); margin-inline: auto; }

/* -- 03 utilitários ------------------------------------------------------- */
.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -.01em;
}

.oculto { display: none !important; }

.sr-only, .pular:not(:focus) {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pular:focus {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 90;
    padding: 10px 18px;
    background: var(--lavoura);
    color: var(--sobre-verde);
    border-radius: var(--r-sm);
    text-decoration: none;
    font-weight: 600;
}

/* -- 04 ícones ------------------------------------------------------------ */
.ico {
    width: 21px; height: 21px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 40px; height: 40px; stroke-width: 1.2; }

/* Glifos de preenchimento (WhatsApp). Precisa vir depois de .ico: as duas têm
   a mesma especificidade, e quem ganha é a última declarada. */
.ico-cheio { fill: currentColor; stroke: none; }

/* Bandeiras: SVG desenhado, com fill próprio — nunca recebem .ico. */
.bandeira {
    width: 21px;
    aspect-ratio: 10 / 7;
    height: auto;
    flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .16);
    display: block;
}

/* -- 05 barra de marca e idiomas ------------------------------------------ */
.marca-barra {
    position: relative;
    z-index: 40;
    background: var(--lavoura-fundo);
    color: var(--sobre-verde);
}

.marca-barra-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding-block: 8px;
    flex-wrap: wrap;
}

.marca-id {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .01em;
}
.marca-id img {
    width: 34px; height: 34px;
    object-fit: contain;
    background: var(--chapa);
    border-radius: var(--r-sm);
    padding: 3px;
}

.marca-barra-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.marca-local {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--sobre-verde-fraco);
}

/* O tradutor, recolhido: só a bandeira do idioma corrente na barra. Abre num
   <details>, que já traz teclado e foco prontos do navegador. */
.idiomas { position: relative; }

.idioma-atual {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 7px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--r-cheio);
    color: var(--sobre-verde);
    cursor: pointer;
    list-style: none;
    transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
/* o triângulo padrão do <summary> some nos dois motores */
.idioma-atual::-webkit-details-marker { display: none; }
.idioma-atual::marker { content: ''; }

.idioma-atual:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }

.idioma-cod {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.idioma-seta { transition: transform var(--rapido) var(--ease); opacity: .7; }
.idiomas[open] .idioma-seta { transform: rotate(180deg); }

.idiomas-lista {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 178px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    box-shadow: var(--erguer-2);
}

.idioma {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    color: var(--tinta-fraca);
    transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.idioma:hover { background: var(--sulco); color: var(--tinta); }
.idioma.ativo { background: var(--sinal-lavado); color: var(--sinal-escuro); font-weight: 600; }

/* -- 06 hero --------------------------------------------------------------
   Letterbox claro. A vinheta é branca, não preta: o resto da página é claro e
   um degradê escuro aqui criaria um degrau visual na primeira rolagem. */
.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(460px, 74vh, 700px);
    overflow: hidden;
    background: var(--concreto-fundo);
    isolation: isolate;
}

.hero-fundo { position: absolute; inset: 0; z-index: -2; }

.hero-video,
.hero-quadro {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

.hero-quadro { opacity: 0; transition: opacity var(--lento) var(--ease); }
.hero-quadro.ativo { opacity: 1; }

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(241, 243, 239, .97) 0%, rgba(241, 243, 239, .86) 22%, rgba(241, 243, 239, .34) 48%, rgba(241, 243, 239, 0) 74%),
        linear-gradient(to right, rgba(241, 243, 239, .80), rgba(241, 243, 239, 0) 58%);
}

.hero-conteudo { padding-block: 0 clamp(34px, 5.5vh, 58px); max-width: 42rem; }

/* Fio de acento acima do título: o único enfeite do hero. Dá ao bloco de texto
   um ponto de partida — sem os contadores embaixo, o título flutuava solto
   sobre a foto. */
.hero-fio {
    display: block;
    width: 54px;
    height: 4px;
    margin-bottom: 18px;
    background: var(--sinal);
    border-radius: var(--r-xs);
}

.hero-titulo {
    /* o piso acompanha a largura da tela (vw) em vez de um rem fixo: com um
       mínimo de 2.3rem, um título de duas palavras longas estourava a borda
       direita no celular, e caixa-alta não quebra no meio da palavra */
    font-size: clamp(1.95rem, 6.4vw, 3.9rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.03em;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.hero-sub {
    margin: 14px 0 0;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: var(--tinta-fraca);
    max-width: 36rem;
}


.hero-marcadores {
    position: absolute;
    right: max(16px, calc((100% - var(--shell)) / 2));
    bottom: 22px;
    display: flex;
    gap: 7px;
}
.hero-marcador {
    width: 26px; height: 3px;
    background: rgba(22, 28, 24, .22);
    border-radius: var(--r-xs);
    transition: background var(--rapido) var(--ease), width var(--base) var(--ease);
}
.hero-marcador.ativo { background: var(--sinal); width: 42px; }

/* -- 07 letreiro de marcas ------------------------------------------------
   Só logos, em laço contínuo. Sem nome escrito: a logo do fabricante já é
   reconhecida por quem compra, e o nome embaixo seria redundância. */
.letreiro {
    background: var(--chapa);
    border-block: 1px solid var(--linha);
    overflow: hidden;
    padding-block: 24px;
    /* as bordas somem em fade — o letreiro não tem começo nem fim */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.letreiro-trilha {
    display: flex;
    width: max-content;
    animation: correr var(--letreiro-duracao, 32s) linear infinite;
    will-change: transform;
}
.letreiro:hover .letreiro-trilha { animation-play-state: paused; }

.letreiro-lista {
    flex: none;
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    list-style: none;
    margin: 0;
    padding: 0 clamp(12px, 1.5vw, 24px);
}

.letreiro-lista li {
    width: clamp(170px, 14vw, 230px);
    height: 84px;
    display: grid;
    place-items: center;
    padding: 13px 22px;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--logo-bg, linear-gradient(145deg, #fff, var(--concreto-fundo)));
    box-shadow: var(--erguer-1);
}

.letreiro-lista img {
    height: 54px;
    min-height: 54px;
    width: 100%;
    max-width: 190px;
    object-fit: contain;
    filter: saturate(.9) contrast(1.04);
    opacity: .88;
    transition: filter var(--base) var(--ease), opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.letreiro-lista li:hover img { filter: none; opacity: 1; transform: scale(1.06); }

@keyframes correr {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--letreiro-distancia, 50%))); }
}

/* -- 08 telemetria -------------------------------------------------------- */
.telemetria {
    background: var(--lavoura);
    color: var(--sobre-verde);
    overflow: hidden;
}

.telemetria-trilha {
    display: flex;
    align-items: center;
    gap: 0;
    width: var(--shell);
    margin-inline: auto;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.telemetria-trilha::-webkit-scrollbar { display: none; }

.telemetria-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-right: 1px solid rgba(255, 255, 255, .11);
    color: inherit;
    text-decoration: none;
    font-size: .78rem;
    flex: none;
}
.telemetria-item:first-child { padding-left: 0; }

button.telemetria-item { transition: background var(--rapido) var(--ease); }
button.telemetria-item:hover { background: rgba(255, 255, 255, .07); }

.telemetria-rotulo {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--sobre-verde-fraco);
}

.telemetria-valor { font-size: .82rem; font-weight: 500; }

.telemetria-fonte {
    border-right: none;
    color: rgba(169, 192, 176, .7);
    font-size: .68rem;
    margin-left: auto;
}
.telemetria-fonte:hover { color: var(--sobre-verde); }

/* -- 09 barra de comando --------------------------------------------------- */
.comando {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(241, 243, 239, .94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linha);
}

.comando-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block: 11px;
    flex-wrap: wrap;
}

.busca {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 300px;
    min-width: 0;
    padding: 0 14px;
    height: 44px;
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-cheio);
    color: var(--tinta-tenue);
    transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
.busca:focus-within {
    border-color: var(--sinal);
    box-shadow: 0 0 0 3px var(--sinal-lavado);
}

.busca input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    color: var(--tinta);
    font-size: .94rem;
}
.busca input::-webkit-search-cancel-button { display: none; }

.busca-contagem {
    font-size: .76rem;
    font-weight: 600;
    color: var(--tinta-tenue);
    flex: none;
}

.busca-limpar {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--sulco);
    color: var(--tinta-fraca);
    flex: none;
}
.busca-limpar:hover { background: var(--sinal); color: #fff; }

/* Abas de condição. Novo e usado são mercados diferentes — é o primeiro
   filtro que quem compra máquina aplica. */
.condicoes {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--sulco);
    border-radius: var(--r-cheio);
    flex: none;
}

.condicao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: var(--r-cheio);
    font-size: .84rem;
    font-weight: 600;
    color: var(--tinta-fraca);
    white-space: nowrap;
    transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.condicao:hover { color: var(--tinta); }
.condicao.ativa { background: var(--lavoura); color: var(--sobre-verde); }

.condicao-num {
    font-size: .68rem;
    opacity: .68;
    font-weight: 500;
}

/* Gatilho do celular: a barra de comando inteira recolhida numa linha só.
   No computador não existe — lá sobra largura e esconder filtro seria perder
   um clique à toa. */
.comando-gatilho,
.vitrine-chip { display: none; }

/* No computador a linha do topo e o painel são display:contents: os filhos
   continuam sendo itens flexíveis diretos da .comando-inner, e o layout é
   exatamente o de antes do recolhimento existir. */
.comando-topo { display: contents; }

/* display:contents faz os filhos continuarem sendo itens flexíveis diretos da
   .comando-inner: no computador o layout é exatamente o de antes do painel
   existir. */
.comando-painel,
.comando-painel-corpo { display: contents; }

/* Troca de vitrine (máquinas ⇄ peças).
   Mesma altura e mesmo raio da busca, para ler como parte da barra e não como
   banner. Chapa branca com o laranja de segurança só no ícone e no hover: é um
   caminho alternativo, não a ação principal do pátio. */
.troca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    margin-left: auto;
    height: 44px;
    padding: 0 14px;
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-cheio);
    color: var(--tinta);
    text-decoration: none;
    transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
.troca:hover, .troca:focus-visible {
    border-color: var(--lavoura);
    box-shadow: 0 0 0 3px rgba(31, 81, 50, .1);
}
.troca-ico { flex: none; color: var(--sinal); }

.troca-txt { display: grid; line-height: 1.15; text-align: left; }
.troca-rotulo {
    color: var(--tinta-tenue);
    font-family: var(--display);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.troca-nome {
    font-family: var(--display);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}

.troca-num { flex: none; font-size: .72rem; font-weight: 600; color: var(--tinta-tenue); }
.troca-seta { flex: none; color: var(--tinta-tenue); transition: transform var(--rapido) var(--ease); }
.troca:hover .troca-seta { transform: translateX(3px); color: var(--lavoura); }

.atalhos { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; }

.atalhos-rotulo {
    flex: none;
    margin-right: 2px;
    color: var(--tinta-tenue);
    font-family: var(--display);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.atalhos-seta {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    color: var(--tinta-fraca);
    flex: none;
}
.atalhos-seta:hover:not(:disabled) { background: var(--sulco); }
.atalhos-seta:disabled { opacity: .25; cursor: default; }

.atalhos-trilha {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block: 2px;
}
.atalhos-trilha::-webkit-scrollbar { display: none; }

.atalho {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--r-cheio);
    background: var(--chapa);
    text-decoration: none;
    font-size: .81rem;
    font-weight: 500;
    color: var(--tinta-fraca);
    white-space: nowrap;
    transition: border-color var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.atalho:hover { border-color: var(--lavoura); color: var(--lavoura); }
.atalho.ativa {
    border-color: var(--lavoura);
    background: var(--lavoura);
    color: var(--sobre-verde);
}
.atalho-num {
    min-width: 1.15rem;
    padding: 1px 5px;
    border-radius: var(--r-cheio);
    background: var(--sulco);
    color: var(--tinta-fraca);
    font-size: .65rem;
    line-height: 1.4;
    text-align: center;
}
.atalho.ativa .atalho-num { background: rgba(255, 255, 255, .15); color: inherit; }

/* -- 10 blocos e plaqueta --------------------------------------------------
   A plaqueta fica inteiramente dentro do bloco. Antes ela subia metade sobre a
   divisa e acabava escondida atrás da barra de filtros quando a grade começava
   ou quando um atalho de categoria recebia foco. */
.bloco { padding-block: 0 clamp(48px, 6vw, 78px); }
.bloco-alterna { background: var(--concreto-fundo); }

.plaqueta-divisa {
    display: grid;
    place-items: center;
    padding-top: clamp(22px, 3vw, 34px);
}

.plaqueta {
    margin: 0;
    padding: 11px clamp(22px, 3vw, 42px);
    background: var(--lavoura);
    color: var(--sobre-verde);
    border-radius: var(--r-md);
    font-size: clamp(1.1rem, 2.4vw, 1.72rem);
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: center;
    box-shadow: var(--erguer-2);
    max-width: calc(100% - 32px);
    line-height: 1.16;
    overflow-wrap: anywhere;
    scroll-margin-top: 150px;
}

.bloco-cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-top: clamp(44px, 5vw, 70px);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--linha);
    margin-bottom: 26px;
}

.bloco-titulo {
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    text-transform: uppercase;
    letter-spacing: -.015em;
}

.bloco-conta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--tinta-tenue);
}

.bloco-destaques { padding-bottom: clamp(40px, 5vw, 64px); }

.grade {
    padding-top: clamp(24px, 3.5vw, 42px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.vazio {
    width: var(--shell);
    margin: 60px auto;
    padding: 52px 24px;
    text-align: center;
    color: var(--tinta-fraca);
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
}
.vazio h3 { margin: 14px 0 6px; font-size: 1.3rem; }
.vazio p { margin: 0; }

/* -- 11 card e placa de identificação -------------------------------------- */
.card-maq {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.card-maq:hover {
    transform: translateY(-3px);
    box-shadow: var(--erguer-2);
    border-color: var(--sulco);
}
.card-maq:has(.card-maq-link:focus-visible) {
    box-shadow: 0 0 0 2px var(--sinal);
}

.card-maq.vendido { opacity: .72; }
.card-maq.vendido .card-maq-foto { filter: grayscale(.85); }

.card-maq-figura {
    position: relative;
    aspect-ratio: 16 / 11;
    background: var(--concreto-fundo);
    display: grid;
    place-items: center;
    overflow: hidden;
}
/* Só a foto de capa preenche a figura. A regra precisa citar a classe da foto:
   um seletor por tipo (.card-maq-figura img) tem especificidade maior que
   .card-maq-marca e esticava a logo do fabricante por cima da foto inteira. */
.card-maq-foto {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--foto-x, 50%) var(--foto-y, 50%);
    transform: scale(var(--foto-zoom, 1));
    transform-origin: var(--foto-x, 50%) var(--foto-y, 50%);
    transition: scale var(--lento) var(--ease);
}
.card-maq:hover .card-maq-foto { scale: 1.035; }

.card-maq-vazia { color: var(--tinta-tenue); }

.card-maq-lupa {
    position: absolute;
    right: 10px; bottom: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--tinta);
    box-shadow: var(--erguer-1);
    opacity: 0;
    transition: opacity var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.card-maq:hover .card-maq-lupa,
.card-maq-lupa:focus-visible { opacity: 1; }
.card-maq-lupa:hover { background: var(--sinal); color: #fff; }

.card-maq-selos {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.selo {
    padding: 4px 9px;
    border-radius: var(--r-sm);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-family: var(--display);
}
.selo-oferta   { background: var(--sinal); color: #fff; }
.selo-vendido  { background: var(--tinta); color: var(--chapa); }
.selo-condicao { background: rgba(255, 255, 255, .93); color: var(--tinta-fraca); box-shadow: var(--erguer-1); }
.selo-novo     { background: var(--lavoura); color: var(--sobre-verde); }

.card-maq-marca {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    height: 26px;
    width: auto;
    max-width: 92px;
    flex: none;
    object-fit: contain;
    padding: 4px 7px;
    background: var(--logo-bg, rgba(255, 255, 255, .93));
    border-radius: var(--r-sm);
    box-shadow: var(--erguer-1);
}

.card-maq-conta {
    position: absolute;
    left: 10px; bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: rgba(22, 28, 24, .74);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
}

.card-maq-corpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 17px 17px;
    flex: 1;
}

.card-maq-nome {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.01em;
}

.card-maq-link { text-decoration: none; }
/* o link do título cobre o card inteiro — o card todo navega sem aninhar
   interativo dentro de interativo */
.card-maq-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.card-maq-resumo {
    margin: -4px 0 0;
    font-size: .86rem;
    color: var(--tinta-fraca);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- A PLACA DE IDENTIFICAÇÃO ---
   A tarja rebitada da máquina: fundo de chapa escovada, hairlines entre as
   linhas e quatro rebites nos cantos. Marca · modelo · ano · potência, na
   mesma ordem da plaqueta real. */
.placa {
    position: relative;
    margin: 0;
    padding: 10px 13px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)),
        var(--sulco);
    border: 1px solid var(--linha);
    border-radius: var(--r-sm);
}

/* Os rebites. Dois pseudo-elementos, quatro pontos: gradiente radial repetido
   nos cantos, sem mais nenhum elemento no HTML. */
.placa::before,
.placa::after {
    content: '';
    position: absolute;
    left: 5px; right: 5px;
    height: 3px;
    background:
        radial-gradient(circle, var(--tinta-tenue) 0 1.4px, transparent 1.6px) left center / 3px 3px no-repeat,
        radial-gradient(circle, var(--tinta-tenue) 0 1.4px, transparent 1.6px) right center / 3px 3px no-repeat;
    opacity: .5;
}
.placa::before { top: 4px; }
.placa::after  { bottom: 4px; }

.placa-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-block: 4px;
    border-bottom: 1px solid rgba(22, 28, 24, .07);
}
.placa-linha:last-child { border-bottom: none; }

.placa dt {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    white-space: nowrap;
}
.placa dd {
    margin: 0;
    font-size: .82rem;
    font-weight: 500;
    text-align: right;
    color: var(--tinta);
}

.card-maq-fecho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 12px;
    /* quebra antes de espremer: um valor de seis dígitos não pode sair cortado
       pelo botão, e é a linha que o comprador mais olha */
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--linha-tenue);
}
.card-maq-fecho > * { min-width: 0; }
.card-maq-fecho .botao { flex: 1 1 auto; }

.valor { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.valor-de {
    font-size: .72rem;
    color: var(--tinta-tenue);
    text-decoration: line-through;
}
.valor-agora {
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.valor-consulta {
    font-family: var(--display);
    font-size: .96rem;
    font-weight: 700;
    color: var(--lavoura);
    letter-spacing: -.005em;
}
.valor-vendido {
    font-family: var(--display);
    font-size: .96rem;
    font-weight: 700;
    color: var(--tinta-tenue);
    text-transform: uppercase;
}

/* O botão fica acima da camada do link do título, senão o card inteiro
   engoliria o clique de negociar. */
.botao {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--r-cheio);
    font-family: var(--display);
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.botao:active { transform: translateY(1px); }

.botao-zap { background: var(--zap); color: #fff; }
.botao-zap:hover { background: #179044; }

.botao-linha {
    background: var(--chapa);
    color: var(--tinta);
    border: 1px solid var(--linha);
}
.botao-linha:hover { border-color: var(--lavoura); color: var(--lavoura); }

.botao-largo { width: 100%; padding-block: 13px; font-size: .95rem; }
.botao-pequeno { padding: 6px 12px; font-size: .78rem; }

/* O valor nunca encolhe; quem cede espaço é o botão. */
.card-maq-fecho .valor { flex: 0 0 auto; }
.valor-agora, .valor-consulta { white-space: nowrap; }

/* -- 12 trilho (destaques) ------------------------------------------------- */
.trilho { position: relative; }

.trilho-pista {
    display: flex;
    gap: clamp(14px, 1.6vw, 22px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 6px max(16px, calc((100% - var(--shell)) / 2)) 14px;
}
.trilho-pista::-webkit-scrollbar { display: none; }

.trilho-item {
    flex: none;
    width: min(408px, 84vw);
    scroll-snap-align: start;
}

.card-maq--destaque .card-maq-figura { aspect-ratio: 16 / 10; }
.card-maq--destaque .card-maq-nome { font-size: 1.2rem; }

.trilho-seta {
    position: absolute;
    top: 38%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--chapa);
    color: var(--tinta);
    border: 1px solid var(--linha);
    box-shadow: var(--erguer-2);
    transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease), opacity var(--rapido) var(--ease);
}
.trilho-seta:hover { background: var(--lavoura); color: var(--sobre-verde); border-color: var(--lavoura); }
.trilho-seta.anterior { left: max(6px, calc((100% - var(--shell)) / 2 - 22px)); }
.trilho-seta.proxima  { right: max(6px, calc((100% - var(--shell)) / 2 - 22px)); }
.trilho-seta[hidden] { display: none; }

@media (max-width: 720px) { .trilho-seta { display: none; } }

/* -- 13 ficha do equipamento ----------------------------------------------- */
.ficha { padding-block: 26px clamp(52px, 6vw, 88px); }

.migalha {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: .85rem;
    color: var(--tinta-tenue);
}
.migalha a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--tinta-fraca);
    font-weight: 500;
}
.migalha a:hover { color: var(--sinal); }

/* Atalho para o catálogo de peças, encostado na direita da migalha. */
.migalha-troca {
    margin-left: auto;
    padding: 5px 12px;
    border: 1px solid var(--linha);
    border-radius: var(--r-cheio);
    background: var(--chapa);
    font-size: .8rem;
}
.migalha-troca .ico { color: var(--sinal); }
.migalha-troca:hover { border-color: var(--lavoura); }

.ficha-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
    gap: clamp(22px, 3vw, 44px);
    align-items: start;
}
@media (max-width: 900px) { .ficha-grade { grid-template-columns: 1fr; } }

/* --- o palco: carrossel de fotos e vídeos ---
   O arraste no celular é o do próprio navegador (overflow + scroll-snap), com
   a inércia que o sistema já dá. As setas do computador empurram o mesmo
   trilho. Não existe arraste feito na mão em JS: reimplementar inércia sempre
   sai pior que a nativa, e quebra em tela sensível. */
.ficha-palco {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.ficha-palco-vazio { color: var(--tinta-tenue); }

.palco {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.palco-trilho {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.palco-trilho::-webkit-scrollbar { display: none; }
.palco-trilho:focus-visible { outline: 2px solid var(--sinal); outline-offset: -2px; }

.palco-slide {
    position: relative;
    flex: none;
    width: 100%;
    height: 100%;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background: var(--concreto-fundo);
    overflow: hidden;
}
.palco-slide > img,
.palco-slide > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.palco-slide > img {
    object-position: var(--foto-x, 50%) var(--foto-y, 50%);
    transform: scale(var(--foto-zoom, 1));
    transform-origin: var(--foto-x, 50%) var(--foto-y, 50%);
}

.palco-seta {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--tinta);
    border: 1px solid var(--linha);
    box-shadow: var(--erguer-2);
    /* Sempre visível, não só no hover: com 40 fotos, uma seta que só aparece
       quando o mouse passa por cima é uma seta que o visitante não descobre. */
    opacity: .88;
    transition: opacity var(--rapido) var(--ease), background var(--rapido) var(--ease), color var(--rapido) var(--ease);
}
.palco:hover .palco-seta,
.palco-seta:focus-visible { opacity: 1; }
.palco-seta:hover { background: var(--lavoura); color: var(--sobre-verde); border-color: var(--lavoura); }
.palco-seta.anterior { left: 12px; }
.palco-seta.proxima { right: 12px; }
.palco-seta[disabled] { opacity: 0 !important; pointer-events: none; }

/* Contador: sem ele, 40 fotos viram um poço sem fundo — o visitante não sabe
   se está no começo ou perto do fim. */
.palco-conta {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: var(--r-cheio);
    background: rgba(22, 28, 24, .76);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
}

.ficha-ampliar {
    position: absolute;
    right: 12px; bottom: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .93);
    color: var(--tinta);
    box-shadow: var(--erguer-1);
}
.ficha-ampliar:hover { background: var(--sinal); color: #fff; }

.ficha-selos {
    position: absolute;
    top: 12px; left: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* A marca acompanha o produto dentro da foto como um selo de fabricante.
   A caixa limita tanto logos horizontais quanto quadradas e reutiliza o fundo
   configurável do cadastro da marca, sem deformar o arquivo original. */
.palco-marca {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(86px, 14vw, 132px);
    height: clamp(34px, 5vw, 44px);
    padding: 5px 9px;
    background: var(--logo-bg, rgba(255, 255, 255, .94));
    border: 1px solid rgba(22, 28, 24, .09);
    border-radius: var(--r-sm);
    box-shadow: var(--erguer-1);
}
.palco-marca img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.ficha-tiras {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.ficha-tiras::-webkit-scrollbar { display: none; }

.ficha-tira {
    flex: none;
    width: 100px;
    aspect-ratio: 3 / 2;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--sulco);
    opacity: .7;
    transition: opacity var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.ficha-tira img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: var(--foto-x, 50%) var(--foto-y, 50%);
    transform: scale(var(--foto-zoom, 1));
    transform-origin: var(--foto-x, 50%) var(--foto-y, 50%);
}
.ficha-tira:hover { opacity: 1; }
.ficha-tira.ativa { opacity: 1; border-color: var(--sinal); }

.ficha-tira-video {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--tinta-fraca);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ficha-lado {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--chapa);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
}
@media (max-width: 900px) { .ficha-lado { position: static; } }

.ficha-marca-caixa {
    display: grid;
    place-items: center;
    align-self: flex-start;
    flex: 0 0 46px;
    width: min(164px, 100%);
    height: 46px;
    padding: 5px 8px;
    overflow: hidden;
    /* Logos transparentes precisam de uma área branca própria para manter
       contraste e não se misturar ao fundo cinza da ficha. */
    background: var(--logo-bg, #fff);
    border: 1px solid rgba(22, 28, 24, .09);
    border-radius: var(--r-sm);
}
.ficha-marca {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
    object-position: left;
}
.ficha-marca-nome {
    margin: 0;
    font-family: var(--display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sinal);
}

.ficha-titulo {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.ficha-resumo { margin: 0; color: var(--tinta-fraca); }

.placa-grande { padding: 13px 16px; }
.placa-grande .placa-linha { padding-block: 7px; }
.placa-grande dd { font-size: .92rem; }

.ficha-valor {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.ficha-valor .valor-agora { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
.ficha-valor .valor-consulta { font-size: 1.25rem; }

.ficha-dados {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--linha-tenue);
    padding-top: 14px;
}
.ficha-dados li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    color: var(--tinta-fraca);
}
.ficha-dados li span { flex: none; }
.ficha-dados li strong { margin-left: auto; color: var(--tinta); text-align: right; font-weight: 600; }

.ficha-secao { margin-top: clamp(38px, 5vw, 64px); }

.ficha-secao-titulo {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    text-transform: uppercase;
    letter-spacing: -.01em;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linha);
    margin-bottom: 22px;
}

.ficha-texto {
    max-width: 68ch;
    color: var(--tinta-fraca);
    font-size: 1.02rem;
}

/* A ficha técnica é a placa em tamanho de documento: um bloco rebitado por
   grupo, para o comprador comparar duas máquinas linha a linha. */
.ficha-tecnica {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 16px;
    align-items: start;
}

/* --- seção de vídeos ---
   Grade que se ajusta sozinha: uma coluna no celular, duas ou três no
   computador. O card tem teto de largura porque um vídeo sozinho esticado
   num shell de 1280px vira uma tarja de 720px de altura — ocupa a tela toda
   e empurra a ficha técnica para fora da vista. */
.videos-grade {
    display: grid;
    gap: clamp(14px, 2vw, 22px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.video-card {
    width: 100%;
    max-width: 540px;
    justify-self: start;
}

.video-quadro {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #0f1512;
    border: 1px solid var(--linha);
}
.video-quadro > img,
.video-quadro > video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A capa escurece um pouco para o play ter contraste sobre qualquer miniatura. */
.video-quadro > img { filter: brightness(.86); transition: filter var(--base) var(--ease), transform var(--lento) var(--ease); }
.video-card:hover .video-quadro > img { filter: brightness(.95); transform: scale(1.03); }

.video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.video-play-circulo {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--sinal);
    color: #fff;
    box-shadow: 0 10px 30px rgba(15, 21, 18, .42);
    transition: transform var(--rapido) var(--ease), background var(--rapido) var(--ease);
}
.video-play-circulo .ico { width: 26px; height: 26px; }
.video-play:hover .video-play-circulo { transform: scale(1.08); background: var(--sinal-escuro); }

/* Tocando, o player toma o quadro e a capa sai de cena. */
.video-card.tocando .video-quadro > img,
.video-card.tocando .video-play { display: none; }
.video-card.tocando iframe,
.video-card.tocando .video-quadro > video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    object-fit: contain;
    background: #000;
}

.video-nome {
    margin: 10px 0 0;
    font-family: var(--display);
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--tinta);
}

.placa-bloco { min-width: 0; padding: 16px 18px 14px; }
.placa-bloco dl { margin: 0; }

.placa-bloco .placa-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(6rem, 42%);
    align-items: start;
}
.placa-bloco dt {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.placa-bloco dd {
    min-width: 0;
    overflow-wrap: anywhere;
}

.placa-grupo {
    margin: 0 0 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sinal);
    font-family: var(--display);
}

/* -- 14 diálogos ----------------------------------------------------------- */
.dialogo {
    border: none;
    padding: 0;
    background: none;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    color: var(--tinta);
}
.dialogo::backdrop { background: rgba(12, 18, 14, .88); backdrop-filter: blur(3px); }

/* O navegador esconde um <dialog> fechado com dialog:not([open]){display:none},
   mas isso é folha de ESTILO DO NAVEGADOR: qualquer display declarado aqui,
   por menor que seja a especificidade, vence por origem. Sem esta linha, os
   diálogos abaixo (que precisam de display:grid quando abertos) ficariam
   visíveis o tempo todo — e as setas da galeria, que são position:fixed,
   apareciam flutuando no meio da vitrine. */
.dialogo:not([open]) { display: none; }

.dialogo-fechar {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    flex: none;
    transition: background var(--rapido) var(--ease);
}
.dialogo-fechar:hover { background: var(--sinal); }

.dialogo-galeria[open] {
    display: grid;
    place-items: center;
}
.dialogo-galeria .dialogo-fechar { position: fixed; top: 16px; right: 16px; z-index: 5; }

.galeria { margin: 0; display: grid; place-items: center; gap: 12px; padding: 16px; width: 100%; }
.galeria-palco {
    width: min(1200px, 90vw);
    height: min(78vh, 820px);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--r-md);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.galeria-palco.arrastando { cursor: grabbing; }
.galeria img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    will-change: transform;
    transform: translate3d(var(--pan-x, 0), var(--pan-y, 0), 0) scale(var(--zoom, 1));
    transform-origin: center;
}

.galeria-legenda {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, .84);
    font-size: .86rem;
}
.galeria-legenda .num { color: rgba(255, 255, 255, .56); }

.galeria-ferramentas {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 6;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-cheio);
    background: rgba(16, 22, 18, .86);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, .35);
}
.galeria-ferramentas button,
.galeria-ferramentas a {
    min-width: 40px;
    height: 40px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--r-cheio);
    color: #fff;
}
.galeria-ferramentas button:hover,
.galeria-ferramentas a:hover { background: rgba(255, 255, 255, .13); }
.galeria-ferramentas #galeriaZoom { min-width: 3.1rem; font: 600 .72rem var(--mono); }

.galeria-seta {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transition: background var(--rapido) var(--ease);
}
.galeria-seta:hover { background: var(--sinal); }
.galeria-seta.anterior { left: 16px; }
.galeria-seta.proxima { right: 16px; }
.galeria-seta[hidden] { display: none; }

/* -- 15 folheador de PDF ---------------------------------------------------
   O PDF vira um caderno: a página em <canvas> ganha dobradiça na lombada e a
   virada é uma rotação em 3D, com a sombra acompanhando o ângulo. É a leitura
   que o folheto impresso já tinha; a tela só não costumava devolver. */
.dialogo-pdf[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #101512;
}

.folheto-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
}
.folheto-nome {
    font-family: var(--display);
    font-weight: 700;
    font-size: .96rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.folheto-acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.folheto-acoes .botao-linha { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .22); }
.folheto-acoes .botao-linha:hover { border-color: var(--sinal); color: var(--sinal); }

.folheto {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 18px;
    /* a perspectiva é o que faz a folha girar como papel, e não deslizar */
    perspective: 2400px;
}

.folheto-carregando {
    color: rgba(255, 255, 255, .6);
    font-family: var(--mono);
    font-size: .84rem;
}

.folha {
    position: absolute;
    max-width: min(94%, 760px);
    max-height: 100%;
    background: #fff;
    border-radius: 2px;
    box-shadow: var(--erguer-3);
    transform-origin: left center;
    backface-visibility: hidden;
    will-change: transform;
}
.folha canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 2px; }

/* A lombada: a sombra interna junto à dobradiça, que todo caderno tem. */
.folha::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 26px;
    background: linear-gradient(to right, rgba(22, 28, 24, .16), transparent);
    pointer-events: none;
    border-radius: 2px 0 0 2px;
}

.folha.virando-frente { animation: virar-frente 620ms var(--ease) forwards; z-index: 3; }
.folha.virando-tras   { animation: virar-tras 620ms var(--ease) forwards; z-index: 3; }

@keyframes virar-frente {
    from { transform: rotateY(0deg);   box-shadow: var(--erguer-3); }
    50%  { box-shadow: -24px 0 60px rgba(0, 0, 0, .5); }
    to   { transform: rotateY(-168deg); box-shadow: none; }
}
@keyframes virar-tras {
    from { transform: rotateY(-168deg); box-shadow: none; }
    50%  { box-shadow: -24px 0 60px rgba(0, 0, 0, .5); }
    to   { transform: rotateY(0deg);   box-shadow: var(--erguer-3); }
}

.folheto-rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .82);
}

.folheto-seta {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: background var(--rapido) var(--ease);
}
.folheto-seta:hover:not(:disabled) { background: var(--sinal); }
.folheto-seta:disabled { opacity: .3; cursor: default; }

.folheto-contagem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 560px) { .oculto-sm { display: none; } }

/* -- 16 rodapé ------------------------------------------------------------- */
.rodape {
    background: var(--lavoura-fundo);
    color: var(--sobre-verde);
    padding-block: clamp(40px, 5vw, 66px) 24px;
    margin-top: clamp(30px, 4vw, 56px);
}

.rodape-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: clamp(24px, 3vw, 46px);
    padding-bottom: 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.rodape h2 {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sinal);
    margin-bottom: 12px;
}

.rodape p { margin: 0 0 10px; color: var(--sobre-verde-fraco); font-size: .9rem; line-height: 1.6; }

.rodape-identidade img {
    width: 46px; height: 46px;
    object-fit: contain;
    background: var(--chapa);
    border-radius: var(--r-sm);
    padding: 4px;
    margin-bottom: 12px;
}
.rodape-nome {
    font-family: var(--display);
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--sobre-verde) !important;
    margin-bottom: 4px !important;
}
.rodape-razao { font-size: .84rem !important; }
.rodape-cnpj {
    display: flex;
    gap: 8px;
    font-size: .8rem !important;
    margin-bottom: 3px !important;
}
.rodape-cnpj > span:first-child {
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .68rem;
    align-self: center;
}

.rodape-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--sobre-verde);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    width: 100%;
    transition: color var(--rapido) var(--ease);
}
.rodape-link:hover { color: var(--sinal); }

.rodape-marcas { font-size: .84rem !important; line-height: 1.8 !important; }

.rodape-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 20px;
    font-size: .78rem;
    color: rgba(169, 192, 176, .72);
}
/* Assinatura de quem desenvolveu a vitrine. Fica apagada em repouso e só
   acende no toque: a marca da página é a da revenda, não a nossa. */
.autoria {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 2px;
    text-decoration: none;
    opacity: .62;
    transition: opacity var(--rapido) var(--ease);
}
.autoria:hover, .autoria:focus-visible { opacity: 1; }
.autoria-rotulo {
    font-family: var(--display);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sobre-verde-fraco);
}
.autoria img { height: 30px; width: auto; display: block; }

.rodape-assinatura {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sobre-verde);
}

/* -- 16b gaveta lateral do celular ---------------------------------------
   Tudo o que a barra de comando guardava no computador (busca, condição,
   categorias) passa a morar aqui no telefone, junto com os dados da loja.

   Entra pela direita porque o gatilho que a abre fica à direita da barra: o
   painel sai debaixo do dedo, não do outro lado da tela. Fechada ela é inerte
   (atributo inert no HTML), então nem leitor de tela nem Tab entram nela. */
.gaveta-fundo {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(12, 22, 16, .52);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .28s var(--ease);
}
.gaveta-fundo.visivel { opacity: 1; }

.gaveta {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(86vw, 390px);
    height: 100dvh;
    background: var(--concreto);
    border-left: 1px solid var(--linha);
    box-shadow: -18px 0 48px rgba(12, 22, 16, .22);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.gaveta.aberta {
    transform: none;
    visibility: visible;
    transition: transform .32s var(--ease), visibility 0s;
}

/* Cabeçalho: identidade da loja em verde-lavoura, fixo enquanto o miolo rola. */
.gaveta-topo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    padding: 14px 16px;
    background: var(--lavoura-fundo);
    color: var(--sobre-verde);
}
.gaveta-logo {
    flex: none;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: #fff;
    object-fit: contain;
    padding: 3px;
}
.gaveta-topo-txt { display: grid; gap: 1px; min-width: 0; }
.gaveta-topo-kicker {
    font-family: var(--display);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sobre-verde-fraco);
}
.gaveta-topo-nome {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.15;
    /* nome comprido cabe em duas linhas em vez de virar reticências */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaveta-fechar {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--sobre-verde);
    transition: background var(--rapido) var(--ease);
}
.gaveta-fechar:hover { background: rgba(255, 255, 255, .22); }

.gaveta-rolagem {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* A rolagem é uma coluna flex, e busca e troca herdam da barra um
   flex: 1 1 100% pensado para uma LINHA. Em coluna esse 100% vira altura e os
   dois esticam até preencher a gaveta. Seletor de duas classes para ganhar das
   regras do celular por especificidade, não por ordem no arquivo. */
.gaveta .gaveta-rolagem > * { flex: 0 0 auto; }
.gaveta .busca { flex: 0 0 auto; height: 46px; min-height: 0; }
.gaveta .troca { flex: 0 0 auto; margin-left: 0; }

.gaveta-busca { width: 100%; }
.gaveta-vitrine { width: 100%; }

.gaveta-secao { display: grid; gap: 9px; }
.gaveta-rotulo {
    font-family: var(--display);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
}

/* Condição: as mesmas abas da barra, empilhadas em faixa que cabe no polegar. */
.gaveta-condicoes { display: flex; flex-wrap: wrap; gap: 7px; }
.gaveta-condicao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--linha);
    border-radius: var(--r-cheio);
    background: var(--chapa);
    color: var(--tinta-fraca);
    font-size: .84rem;
    font-weight: 600;
    transition: background var(--rapido) var(--ease), color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.gaveta-condicao .num { font-size: .7rem; opacity: .7; }
.gaveta-condicao.ativa {
    background: var(--lavoura);
    border-color: var(--lavoura);
    color: var(--sobre-verde);
}

/* --- categorias, uma embaixo da outra, com prévia ---
   A miniatura é a foto do primeiro equipamento da categoria: numa fileira de
   pílulas o comprador lê "Desensilador" e não sabe o que é; com a máquina na
   frente ele reconhece pela silhueta, que é como ele procura no pátio. */
.gaveta-cats { display: grid; gap: 7px; }
.gaveta-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
    background: var(--chapa);
    color: var(--tinta);
    text-decoration: none;
    transition: border-color var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.gaveta-cat:hover,
.gaveta-cat:focus-visible { border-color: var(--lavoura); }
.gaveta-cat:active { transform: scale(.99); }

.gaveta-cat-capa {
    flex: none;
    width: 54px; height: 54px;
    border-radius: var(--r-sm);
    background: var(--sulco);
    object-fit: cover;
}
.gaveta-cat-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.gaveta-cat-nome {
    font-family: var(--display);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    /* nome de categoria longo não pode empurrar a seta para fora do cartão */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaveta-cat-sub {
    font-size: .74rem;
    color: var(--tinta-tenue);
    line-height: 1.35;
    /* sem nowrap: "a partir de R$ 1.850,00" cortado em reticências não informa
       nada. Duas linhas cabem, e o preço é o que faz o dedo parar aqui. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaveta-cat-seta { flex: none; color: var(--tinta-tenue); }

/* Dados da loja: quem está do outro lado do WhatsApp. */
.gaveta-loja { gap: 7px; }
.gaveta-loja-linha {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--tinta-fraca);
}
.gaveta-loja-linha .ico { flex: none; margin-top: 2px; color: var(--sinal); }
.gaveta-loja-link { text-decoration: none; }
.gaveta-loja-link:hover { color: var(--lavoura); }

.gaveta-pe {
    flex: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linha);
    background: var(--chapa);
}

/* Enquanto a gaveta está aberta a página de trás não rola junto. */
html.gaveta-travada, html.gaveta-travada body { overflow: hidden; }

/* No computador a gaveta não existe: a barra de comando já mostra tudo. */
@media (min-width: 621px) {
    .gaveta, .gaveta-fundo { display: none; }
}

/* -- 17 balão do WhatsApp e voltar ao topo --------------------------------- */
.balao-zap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 56px;
    padding: 0 16px;
    border-radius: var(--r-cheio);
    background: var(--zap);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 26px rgba(29, 168, 81, .42);
    transition: gap var(--base) var(--ease), padding var(--base) var(--ease), background var(--rapido) var(--ease);
}
.balao-zap:hover { background: #179044; gap: 10px; padding-right: 22px; }

.balao-zap-texto {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--display);
    font-weight: 700;
    font-size: .9rem;
    transition: max-width var(--base) var(--ease);
}
.balao-zap:hover .balao-zap-texto,
.balao-zap:focus-visible .balao-zap-texto { max-width: 210px; }

.subir {
    position: fixed;
    right: 22px;
    bottom: 86px;
    z-index: 24;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--chapa);
    color: var(--tinta);
    border: 1px solid var(--linha);
    box-shadow: var(--erguer-1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}
.subir.visivel { opacity: 1; pointer-events: auto; transform: none; }
.subir:hover { background: var(--lavoura); color: var(--sobre-verde); border-color: var(--lavoura); }

/* -- 18 celular -----------------------------------------------------------
   A vitrine é aberta em campo, na tela do celular, quase sempre por um link
   de WhatsApp. Os ajustes abaixo não "encolhem o desktop": reorganizam o que
   muda de papel quando a coluna é única e o polegar é o ponteiro.
   -------------------------------------------------------------------------- */

/* Alvo de toque: nada interativo abaixo de 40px de altura em tela de dedo. */
@media (hover: none) and (pointer: coarse) {
    .condicao, .atalho, .idioma, .botao { min-height: 40px; }
    .busca-limpar { width: 30px; height: 30px; }
    /* sem hover, a lupa da foto precisa estar sempre visível */
    .card-maq-lupa { opacity: 1; }
    /* No celular o arraste já resolve, então as setas somem em vez de tapar a
       foto — é o gesto que manda na tela sensível. */
    .palco-seta { display: none; }
    /* e o rótulo do balão não pode depender de passar o mouse */
    .balao-zap { gap: 10px; padding-right: 20px; }
    .balao-zap-texto { max-width: 180px; }
}

@media (max-width: 860px) {
    html { scroll-padding-top: 168px; }

    .marca-barra-inner { min-height: 50px; }
    .marca-id { font-size: .92rem; }
    .marca-id img { width: 30px; height: 30px; }

    .hero { min-height: clamp(380px, 66vh, 520px); }
    .hero-conteudo { padding-block: 0 clamp(24px, 4vh, 38px); }
    .hero-fio { width: 42px; height: 3px; margin-bottom: 13px; }
    /* caixa-alta não quebra no meio da palavra: o piso desce mais um degrau
       para "MÁQUINAS QUE AUMENTA" caber sem encostar na borda */
    .hero-titulo { font-size: clamp(1.75rem, 6.6vw, 2.6rem); letter-spacing: -.035em; }

    .letreiro { padding-block: 16px; }
    .letreiro-lista { gap: 14px; padding-inline: 7px; }
    .letreiro-lista li { width: 150px; height: 72px; padding: 10px 17px; }
    .letreiro-lista img { height: 46px; min-height: 46px; max-width: 136px; }

    .bloco { padding-bottom: 40px; }
    .grade { padding-top: 24px; gap: 14px; }
    .plaqueta { padding: 9px 20px; scroll-margin-top: 190px; }

    .trilho-item { width: min(360px, 88vw); }
}

@media (max-width: 620px) {
    /* No celular a base do rodapé empilha; a assinatura ganha um fio acima
       para não colar no número de equipamentos. */
    .rodape-base { flex-direction: column; align-items: flex-start; gap: 10px; }
    .autoria { margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); width: 100%; }

    :root { --shell: calc(100% - 24px); }

    /* Com a barra recolhida o topo grudado mede ~66px, não os ~168px da barra
       aberta: o salto para uma categoria não precisa reservar tanto. */
    html.comando-recolhido { scroll-padding-top: 96px; }

    /* A barra de marca vira duas linhas: identidade em cima, cidade e idioma
       embaixo. Espremer os três numa linha só cortava o nome da loja. */
    .marca-barra-inner { gap: 6px 12px; }
    .marca-id { flex: 1 1 100%; }
    .marca-barra-acoes { flex: 1 1 100%; justify-content: space-between; gap: 10px; }
    .marca-local { font-size: .76rem; }

    /* A busca ocupa a linha inteira; as abas de condição viram uma faixa que
       rola, em vez de quebrar em duas fileiras desalinhadas. */
    .comando-inner { gap: 10px; padding-block: 10px; }
    .busca { flex: 1 1 100%; height: 46px; }

    /* --- linha de cima no celular ---
       Empilhadas, busca + condições + troca + categorias passavam de 200px de
       altura grudados no topo: sobrava pouco mais de meia tela para as
       máquinas. Hoje a barra tem 67px e o resto mora na gaveta.
       A busca ocupa o que sobra, e à direita ficam o menu e o atalho da outra
       vitrine. A busca fica FORA do menu de propósito: pesquisar é o gesto mais
       frequente e não pode custar um toque a mais. */
    .comando-topo {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 100%;
        /* sem isto a linha não encolhe abaixo do min-content dos filhos e
           estoura os 357px da barra */
        min-width: 0;
    }
    .comando-topo > .busca { flex: 1 1 auto; min-width: 0; height: 46px; }
    /* o cartão completo da troca vive na gaveta; aqui fica o chip */
    .comando-topo > .troca { display: none; }

    .comando-gatilho {
        display: grid;
        place-items: center;
        flex: none;
        width: 46px;
        height: 46px;
        padding: 0;
        background: var(--chapa);
        border: 1px solid var(--linha);
        border-radius: var(--r-cheio);
        color: var(--tinta);
        transition: border-color var(--rapido) var(--ease), background var(--rapido) var(--ease);
    }

    /* Três traços desenhados no CSS: não vale carregar mais um símbolo no
       sprite para seis pixels de linha. Viram um X quando o painel abre. */
    .comando-gatilho-barras {
        flex: none;
        display: grid;
        gap: 3px;
        width: 17px;
    }
    .comando-gatilho-barras i {
        height: 2px;
        border-radius: 2px;
        background: var(--tinta);
        transition: transform var(--rapido) var(--ease), opacity var(--rapido) var(--ease);
    }
    /* Gaveta aberta: os três traços viram um X. */
    .comando-gatilho[aria-expanded="true"] { border-color: var(--lavoura); }
    .comando-gatilho[aria-expanded="true"] .comando-gatilho-barras i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .comando-gatilho[aria-expanded="true"] .comando-gatilho-barras i:nth-child(2) { opacity: 0; }
    .comando-gatilho[aria-expanded="true"] .comando-gatilho-barras i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

    /* Filtro de condição ligado com a gaveta fechada precisa se anunciar: o
       laranja de segurança marca o menu, senão o visitante esquece que está
       vendo só os usados. */
    .comando-gatilho.filtrando { border-color: var(--sinal); background: var(--sinal-lavado); }
    .comando-gatilho.filtrando .comando-gatilho-barras i { background: var(--sinal-escuro); }

    /* Atalho curto para a outra vitrine: chapa branca, ícone no laranja de
       segurança, do mesmo tamanho do gatilho para a linha ficar assentada. */
    .vitrine-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: none;
        height: 46px;
        padding: 0 14px;
        background: var(--chapa);
        border: 1px solid var(--linha);
        border-radius: var(--r-cheio);
        color: var(--tinta);
        font-family: var(--display);
        font-size: .82rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
    }
    .vitrine-chip .ico { flex: none; color: var(--sinal); }
    .vitrine-chip:hover,
    .vitrine-chip:focus-visible {
        border-color: var(--lavoura);
        box-shadow: 0 0 0 3px rgba(31, 81, 50, .1);
    }

    /* No celular o conteúdo da barra vive na gaveta lateral (views/gaveta.php);
       aqui fica só a linha do gatilho e o atalho da outra vitrine. */
    .comando-painel { display: none; }

    .condicoes {
        flex: 1 1 100%;
        overflow-x: auto;
        scrollbar-width: none;
        border-radius: var(--r-md);
        justify-content: flex-start;
    }
    .condicoes::-webkit-scrollbar { display: none; }
    .condicao { flex: none; }

    /* No celular a troca de vitrine ganha a linha inteira: espremida ao lado da
       busca, o rótulo sumia antes do nome. */
    .troca { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
    .troca-num { margin-left: auto; }

    /* As setas dos atalhos saem: com o dedo, arrastar a faixa é mais direto
       do que mirar num botão de 28px. */
    .atalhos-seta { display: none; }
    .atalhos { gap: 8px; }
    .atalhos-rotulo { font-size: .62rem; }
    .atalhos-trilha { gap: 7px; scroll-snap-type: x proximity; }
    .atalho { flex: none; min-height: 38px; padding-inline: 13px; scroll-snap-align: start; }
    .plaqueta-divisa { padding-top: 20px; }

    /* O card fica mais alto que largo; a foto ganha proporção de retrato leve
       para a máquina não virar uma tira fina. */
    .grade { grid-template-columns: 1fr; }
    .card-maq-figura { aspect-ratio: 4 / 3; }
    .card-maq-corpo { padding: 14px 15px 15px; gap: 10px; }

    /* O botão de negociar assume a linha inteira embaixo do valor: é a ação
       principal da página e não pode disputar espaço com um preço de seis
       dígitos. */
    .card-maq-fecho { align-items: stretch; }
    .card-maq-fecho .botao { flex: 1 1 100%; }

    .bloco-cabeca { padding-top: 34px; margin-bottom: 18px; }

    /* Ficha: o painel de decisão sobe para antes da galeria — no celular, o
       preço e o botão precisam aparecer sem rolagem.

       align-items: stretch é obrigatório aqui. A regra de cima é uma grade com
       align-items: start; trocar só o display para flex mantém o start, e em
       coluna isso faz cada filho encolher até o tamanho do conteúdo em vez de
       ocupar a largura — o painel saía com meia tela e a galeria vazava. */
    .ficha-grade {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .ficha, .ficha-secao, .ficha-galeria, .ficha-lado { width: 100%; max-width: 100%; min-width: 0; }
    .ficha .shell { min-width: 0; }
    .ficha-lado { order: -1; padding: 18px; }
    .ficha-palco, .palco { aspect-ratio: 4 / 3; }
    .ficha-tira { width: 78px; }
    .palco-conta { left: 10px; bottom: 10px; font-size: .7rem; }
    .palco-marca { top: 10px; right: 10px; width: 88px; height: 36px; padding: 4px 7px; }

    .videos-grade { grid-template-columns: 1fr; }
    .video-card { max-width: none; }
    .video-play-circulo { width: 54px; height: 54px; }
    .video-play-circulo .ico { width: 22px; height: 22px; }
    .ficha-tecnica { grid-template-columns: 1fr; }
    .placa-bloco { padding-inline: 14px; }
    .placa-bloco .placa-linha { grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 40%); gap: 8px; }

    .rodape-grade { gap: 26px; padding-bottom: 26px; }
    .rodape-base { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* O balão recolhe para só o ícone: com a lista de cards estreita, um balão
       com texto tapava o preço do card de baixo. */
    .balao-zap { height: 52px; padding: 0 14px; right: 14px; bottom: 14px; }
    .balao-zap-texto { max-width: 0 !important; }
    .subir { right: 18px; bottom: 78px; width: 38px; height: 38px; }

    /* Diálogos em tela cheia, com a seta de navegação ao alcance do polegar. */
    .galeria { padding: 6px; }
    .galeria-palco { width: 100vw; height: 70vh; border-radius: 0; }
    .galeria-seta { width: 44px; height: 44px; top: 50%; bottom: auto; transform: translateY(-50%); }
    .galeria-seta.anterior { left: 22px; }
    .galeria-seta.proxima { right: 22px; }
    .galeria-ferramentas { bottom: 12px; }

    .folheto { padding: 10px; }
    .folheto-barra { padding: 10px 12px; }
}

@media (max-width: 380px) {
    /* Abaixo disso o rótulo do atalho disputa espaço com o campo de busca:
       fica o ícone, e o aria-label continua dizendo para onde ele leva. */
    .vitrine-chip { width: 46px; padding-inline: 0; justify-content: center; }
    .vitrine-chip-txt { display: none; }
}

@media (max-width: 380px) {

    .idioma-cod { display: none; }
    .marca-id span { font-size: .84rem; }
}

/* Tela baixa e deitada (celular virado): o hero não pode comer a dobra toda. */
@media (max-height: 520px) and (orientation: landscape) {
    .hero { min-height: 260px; }
    .hero-sub { display: none; }
}

/* -- 19 movimento ---------------------------------------------------------- */
.revelar {
    opacity: 0;
    transform: translateY(14px);
}
.revelar.dentro {
    opacity: 1;
    transform: none;
    transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
    transition-delay: calc(var(--i, 0) * 42ms);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .revelar { opacity: 1; transform: none; }
    .gaveta, .gaveta-fundo { transition-delay: 0s !important; }
    .letreiro-trilha { animation: none; }
    .palco-trilho { scroll-behavior: auto; }
    .hero-video { display: none; }
}