/* ========================================================================
   Carro 7 - folha de estilo principal
   Tema claro, sofisticado, com azul navy #00215A e laranja #FE6101 da marca.
   Tipografia: Montserrat Black (display) + Mulish (corpo).
   Signature: barra diagonal laranja evocando o corte do "7" do logo.
   ======================================================================== */

/* ---------- Fontes (hospedadas localmente para evitar o encadeamento
   fonts.googleapis.com -> fonts.gstatic.com no caminho critico) ----------
   Arquivos sao fontes variaveis (subset latin, cobre acentuacao do PT-BR),
   por isso um unico arquivo cobre a faixa de pesos usada no site. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/mulish-latin.woff2') format('woff2');
}

/* ---------- Tokens de design ---------- */
:root {
    /* Cores da marca */
    --marca-azul:            #00215A;
    --marca-azul-escuro:     #001338;
    --marca-azul-suave:      #0F3A7A;
    --marca-laranja:         #FE6101;
    --marca-laranja-escuro:  #D64E00;
    --marca-laranja-suave:   #FFEEDE;
    /* Variante escurecida do laranja da marca, usada onde o laranja carrega
       texto (botao, eyebrow) — o tom #FE6101 puro da ~3:1 contra branco,
       abaixo do minimo de 4.5:1 (WCAG AA) exigido para texto normal. */
    --marca-laranja-contraste: #B83E00;

    /* Neutros e superficies */
    --fundo:                 #FBFAF7;
    --fundo-card:            #FFFFFF;
    --fundo-abafado:         #F3F1EB;
    --texto:                 #0A1633;
    --texto-suave:           #5B6472;
    --texto-fraco:           #8B94A3;
    --linha:                 #E7E3D8;
    --linha-suave:           #F0EDE4;

    /* Acao */
    --whatsapp:              #25D366;
    --alerta:                #B84A2E;
    --sucesso:               #1E7F3A;

    /* Tipografia
       Display: Montserrat (peso 800/900) — fonte comum e amplamente reconhecida,
       mas em Black tem forte impacto visual, ideal para hero e títulos.
       Corpo:   Mulish — legibilidade em textos corridos e formulários. */
    --fonte-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-corpo:   'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    --contorno-max: 1200px;
    --raio-pequeno: 6px;
    --raio-medio:   12px;
    --raio-grande:  20px;
    --sombra-suave: 0 1px 2px rgba(10, 22, 51, .04), 0 6px 24px rgba(10, 22, 51, .06);
    --sombra-forte: 0 8px 32px rgba(10, 22, 51, .14);
}

/* ---------- Reset leve ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    /* Reserva o espaco da barra de rolagem sempre, mesmo em paginas curtas,
       pra ela nao aparecer/sumir e deslocar o conteudo horizontalmente. */
    scrollbar-gutter: stable;
    overflow-y: scroll;
}
body {
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: 16px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--marca-azul); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--marca-laranja); }
h1, h2, h3, h4 { font-family: var(--fonte-display); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; margin: 0 0 .5em; color: var(--marca-azul-escuro); text-transform: none; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 900; letter-spacing: -.028em; line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }

/* Foco visivel para acessibilidade */
:focus-visible {
    outline: 3px solid var(--marca-laranja);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Respeita usuarios que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Container padrao ---------- */
.contorno {
    width: 100%;
    max-width: var(--contorno-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Cabecalho ---------- */
.cabecalho {
    background: var(--fundo);
    border-bottom: 4px solid var(--marca-laranja);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: saturate(1.2) blur(6px);
    background: rgba(251, 250, 247, .92);
}
.cabecalho__linha {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 40px;
}
.cabecalho__marca { display: inline-flex; align-items: center; }
.cabecalho__marca img { display: block; height: 57px; width: auto; }
.cabecalho__nav .menu {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 32px;
}
.menu__link {
    font-weight: 700;
    color: var(--texto);
    font-size: .95rem;
    padding: 8px 0;
    position: relative;
}
.menu__link.esta-ativo::after,
.menu__link:hover::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--marca-laranja);
    transform: skewX(-18deg); /* evoca o corte do "7" */
}
.cabecalho__acoes { display: flex; gap: 12px; margin-left: auto; }
.cabecalho__hamburguer {
    display: none;
    background: transparent;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    padding: 8px 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}
.cabecalho__hamburguer span {
    display: block; width: 22px; height: 2px;
    background: var(--marca-azul); border-radius: 2px;
}
.menu-movel {
    background: var(--fundo-card);
    border-top: 1px solid var(--linha);
    padding: 16px 24px;
}
.menu-movel a {
    display: block;
    padding: 12px 0;
    font-weight: 700;
    color: var(--texto);
    border-bottom: 1px solid var(--linha-suave);
}
.menu-movel a:last-child { border-bottom: none; }
/* Acoes do menu mobile reusam o componente .botao do resto do site,
   em vez de duplicar o estilo, pra manter o mesmo padrao visual. */
.menu-movel__acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--linha-suave);
}
.menu-movel__acoes a.botao {
    border-bottom: none;
    color: #fff;
}
.menu-movel__subtitulo {
    margin: 4px 0 0;
    color: var(--texto-suave);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Dropdown "Login"/"Anunciar" do cabecalho: cada tipo de conta (lojista,
   admin, pessoa fisica) tem uma tela propria, entao o botao abre um
   sub-menu em vez de linkar direto pra uma unica pagina. */
.menu-dropdown { position: relative; }
.menu-dropdown__seta { transition: transform .15s ease; }
.menu-dropdown[data-esta-aberto] .menu-dropdown__seta { transform: rotate(180deg); }
.menu-dropdown__painel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--borda-suave, #E5E8EF);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 19, 56, .16);
    z-index: 50;
    overflow: hidden;
    padding: 6px;
}
.menu-dropdown__painel[hidden] { display: none; }
.menu-dropdown__painel a {
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    color: var(--texto);
}
.menu-dropdown__painel a:hover { background: var(--fundo-abafado); }

@media (max-width: 900px) {
    .cabecalho__nav, .cabecalho__acoes { display: none; }
    .cabecalho__hamburguer { display: inline-flex; margin-left: auto; }
}

/* ---------- Botoes ---------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--raio-pequeno);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease;
    background: var(--marca-azul);
    color: #fff;
    line-height: 1.2;
}
.botao:hover { background: var(--marca-azul-suave); color: #fff; transform: translateY(-1px); }
.botao:active { transform: translateY(0); }
.botao--laranja { background: var(--marca-laranja-contraste); color: #fff; }
.botao--laranja:hover { background: var(--marca-laranja-escuro); color: #fff; }
.botao--fantasma { background: transparent; color: var(--marca-azul); border-color: var(--linha); }
.botao--fantasma:hover { background: var(--marca-azul); color: #fff; border-color: var(--marca-azul); }
.botao--ativo { background: var(--marca-azul); color: #fff; border-color: var(--marca-azul); }
.botao--ativo:hover { background: var(--marca-azul-escuro); color: #fff; border-color: var(--marca-azul-escuro); }
.botao--whatsapp { background: var(--whatsapp); color: #fff; }
.botao--whatsapp:hover { background: #1eb655; color: #fff; }
.botao--largo { width: 100%; padding: 14px 22px; font-size: 1rem; }
.botao--pequeno { padding: 8px 14px; font-size: .85rem; }
.botao:disabled { background: var(--linha); color: var(--texto-suave); cursor: not-allowed; pointer-events: none; transform: none; }

/* ---------- Formularios ---------- */
label { display: block; font-size: .85rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.campo, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], select, textarea {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--texto);
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* Select recebe um chevron SVG proprio para ficar visualmente identico ao input */
select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2300215A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}
/* Cor do placeholder e do primeiro option "Selecione..." mais suave */
select:invalid, select option[value=""] { color: var(--texto-fraco); }
/* Campo de preco em destaque (fundo/borda proprios pra chamar atencao no formulario) */
input.campo-preco {
    background: var(--marca-laranja-suave, #FFEEDE);
    border-color: var(--marca-laranja, #FE6101);
    font-weight: 700;
    color: var(--marca-laranja-contraste, #B83E00);
}
input.campo-preco:focus { border-color: var(--marca-laranja-escuro, #D64E00); }
label.rotulo-preco { color: var(--marca-laranja-contraste, #B83E00); }
/* Textarea precisa de altura livre (nao pode ficar fixo em 46px) */
textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical;
}
.campo:focus, input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca-azul);
    box-shadow: 0 0 0 3px rgba(0, 33, 90, .12);
}
.campo--erro { border-color: var(--alerta); }

.grupo-campo { margin-bottom: 18px; }

/* Autocomplete customizado (ex: campo Modelo da busca) — sem abrir a lista
   inteira ao focar, so filtra conforme digita. */
.autocomplete { position: relative; }
.autocomplete__lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-suave);
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.autocomplete__lista[hidden] { display: none; }
.autocomplete__lista li {
    padding: 8px 14px;
    font-size: .92rem;
    cursor: pointer;
    color: var(--texto);
}
.autocomplete__lista li:hover,
.autocomplete__lista li.esta-ativo { background: var(--fundo-abafado); }
.forma-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.aviso {
    padding: 14px 18px;
    border-radius: var(--raio-pequeno);
    font-size: .95rem;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.aviso--erro { background: #FBECE7; color: var(--alerta); border-color: #EBC8BD; }
.aviso--sucesso { background: #E7F5EB; color: var(--sucesso); border-color: #BFE0C8; }
.aviso--info { background: #E8EEFB; color: var(--marca-azul); border-color: #C7D6F1; }
.aviso--fatura {
    background: var(--alerta);
    color: #fff;
    border-color: var(--alerta);
    font-weight: 600;
    box-shadow: var(--sombra-suave);
    margin-bottom: 30px;
}
.aviso--fatura strong { color: #fff; }
.aviso--fatura .botao { background: #fff; color: var(--alerta); }
.aviso--fatura .botao:hover { background: #FBECE7; color: var(--alerta); }

/* Avisos de sucesso/erro flutuam no canto superior direito (toast) e somem sos */
.avisos-flutuantes {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 40px));
}
.avisos-flutuantes .aviso {
    margin-bottom: 0;
    box-shadow: var(--sombra-suave);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    animation: aviso-entrar .25s ease;
}
.avisos-flutuantes .aviso--sucesso { background: #146B2E; color: #fff; border-color: #146B2E; }
.avisos-flutuantes .aviso--sucesso .aviso__fechar { color: #fff; }
.avisos-flutuantes .aviso.esta-saindo { animation: aviso-sair .25s ease forwards; }
.aviso__fechar {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
    opacity: .6;
}
.aviso__fechar:hover { opacity: 1; }
@keyframes aviso-entrar {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes aviso-sair {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
}
@media (max-width: 480px) {
    .avisos-flutuantes { left: 16px; right: 16px; top: 12px; width: auto; }
}

/* ---------- Hero da home ---------- */
.hero {
    padding: 72px 0 40px;
    background:
        radial-gradient(1200px 400px at 90% -10%, rgba(254, 97, 1, .10), transparent 60%),
        radial-gradient(1000px 500px at -10% 110%, rgba(0, 33, 90, .06), transparent 65%),
        var(--fundo);
    border-bottom: 4px solid var(--marca-laranja);
    box-shadow: var(--sombra-suave);
    position: relative;
    overflow: hidden;
}
/* Foto do veiculo em destaque mais recente como fundo do hero — degrade escuro
   da esquerda (onde fica o texto, precisa de contraste) pra direita (onde a
   foto aparece mais, atras do cartao de busca que ja e opaco). */
.hero--com-foto {
    background:
        linear-gradient(100deg, rgba(0, 19, 56, .93) 0%, rgba(0, 19, 56, .82) 40%, rgba(0, 19, 56, .45) 68%, rgba(0, 19, 56, .18) 100%),
        var(--hero-foto) center / cover no-repeat,
        var(--marca-azul-escuro);
}
.hero--com-foto .hero__titulo { color: #fff; }
.hero--com-foto .hero__descricao { color: rgba(255, 255, 255, .82); }
.hero--com-foto .hero__stats { border-top-color: rgba(255, 255, 255, .18); }
.hero--com-foto .hero__stat-valor { color: #fff; }
.hero--com-foto .hero__stat-rotulo { color: rgba(255, 255, 255, .72); }
.hero__grade {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: end;
}
.hero__rotulo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--marca-laranja);
    margin-bottom: 24px;
}
.hero__rotulo::before {
    content: '';
    width: 32px; height: 2px;
    background: var(--marca-laranja);
    transform: skewX(-18deg);
}
.hero__titulo {
    color: var(--marca-azul-escuro);
    font-weight: 900;
    letter-spacing: -.032em;
    text-transform: uppercase;
    line-height: .98;
}
.hero__titulo em {
    font-style: normal;
    color: var(--marca-laranja);
    position: relative;
    padding-right: .05em;
    /* Slice diagonal sutil evocando o corte do "7" do logo */
    display: inline-block;
    transform: skewX(-4deg);
}
.hero__descricao {
    font-size: 1.1rem;
    color: var(--texto-suave);
    max-width: 44ch;
    margin-top: 16px;
}
.hero__stats {
    margin-top: 40px;
    display: flex;
    gap: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--linha);
}
.hero__stat-valor { font-family: var(--fonte-display); font-size: 2rem; font-weight: 800; color: var(--marca-azul-escuro); line-height: 1; }
.hero__stat-rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave); margin-top: 6px; }

/* Busca destacada no hero (feel de "ficha de busca") */
.busca-hero {
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    padding: 28px;
    box-shadow: var(--sombra-suave);
    position: relative;
}
.busca-hero::before {
    /* Barra diagonal laranja de assinatura no topo direito */
    content: '';
    position: absolute;
    top: -1px; right: 40px;
    width: 68px; height: 6px;
    background: var(--marca-laranja);
    transform: skewX(-25deg);
    border-radius: 0 0 3px 3px;
}
.busca-hero__titulo {
    font-family: var(--fonte-corpo);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--texto-suave);
    margin-bottom: 18px;
}
.busca-hero__grade { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.busca-hero__grade > *:nth-child(5) { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .hero { padding: 48px 0 24px; }
    .hero__grade { grid-template-columns: 1fr; gap: 32px; }
    .hero__stats { gap: 24px; flex-wrap: wrap; }
}

/* ---------- Secoes gerais ---------- */
.secao { padding: 72px 0; }
.secao--abafada { background: var(--fundo-abafado); }
.secao--marcas { padding-bottom: 24px; }
.secao__cabecalho { margin-bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.secao__titulo-grupo { max-width: 640px; }
.secao__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--marca-laranja-contraste);
    margin-bottom: 12px;
}
.secao__eyebrow::before {
    content: '';
    width: 24px; height: 2px;
    background: var(--marca-laranja-contraste);
    transform: skewX(-18deg);
}
.secao__titulo { margin: 0; }
.secao__descricao { color: var(--texto-suave); font-size: 1.05rem; margin-top: 8px; max-width: 60ch; }

/* ---------- Lista de passos numerada (ex.: instrucoes de instalacao) ---------- */
.lista-passos { list-style: none; padding: 0; margin: 0; counter-reset: passo; }
.lista-passos li {
    counter-increment: passo;
    position: relative;
    padding: 14px 0 14px 44px;
    border-top: 1px solid var(--linha);
    line-height: 1.5;
}
.lista-passos li:last-child { border-bottom: 1px solid var(--linha); }
.lista-passos li::before {
    content: counter(passo);
    position: absolute;
    left: 0; top: 12px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--marca-azul-escuro);
    color: #fff;
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: .85rem;
    border-radius: 50%;
}

/* ---------- Lista publica de lojas ---------- */
.grade-lojas {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cartao-loja {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 20px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Medalha de "loja honoraria" (imagem propria, com fita), sobreposta no canto do card */
.cartao-loja__medalha {
    position: absolute;
    top: -10px;
    right: -6px;
    width: 44px;
    height: 44px;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .22));
}
.cartao-loja__medalha img { width: 100%; height: 100%; object-fit: contain; }

/* Legenda explicando a medalha de loja honoraria, exibida abaixo da grade em /lojas */
.legenda-medalha {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding: 18px 20px;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
}
.legenda-medalha__icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}
.legenda-medalha__icone img { width: 100%; height: 100%; object-fit: contain; }
.legenda-medalha p { margin: 0; color: var(--texto-suave); font-size: .92rem; }
.cartao-loja:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
    border-color: #D9D3C2;
}
.cartao-loja__logo {
    width: 64px; height: 64px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--fundo-abafado);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
}
.cartao-loja__logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cartao-loja__inicial {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--marca-azul-escuro);
}
.cartao-loja__corpo { min-width: 0; }
.cartao-loja__nome {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--marca-azul-escuro);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cartao-loja__local {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-fraco);
    font-weight: 600;
    margin-top: 4px;
}
.cartao-loja__meta {
    font-size: .85rem;
    color: var(--texto-suave);
    margin-top: 6px;
}

/* ---------- Parede de logos de marcas (/marcas) ---------- */
.rotulo-grupo {
    margin: 0;
    color: #6A7488;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.parede-marcas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 8px 10px;
}
.tile-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    border-radius: var(--raio-medio);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tile-marca:hover,
.tile-marca:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
    outline: none;
}
.tile-marca__logo {
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 12px;
    box-sizing: border-box;
}
.tile-marca__logo img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.tile-marca__logo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--marca-laranja);
    transform: translateX(-50%);
    transition: width .22s ease;
}
.tile-marca:hover .tile-marca__logo::after,
.tile-marca:focus-visible .tile-marca__logo::after {
    width: 65%;
}
.tile-marca__inicial {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--marca-laranja-contraste, #B83E00);
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--marca-laranja-suave);
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .tile-marca, .tile-marca__logo::after { transition: none; }
    .tile-marca:hover, .tile-marca:focus-visible { transform: none; }
}

/* ---------- Vitrine publica da loja ---------- */
.loja-vitrine__cabecalho {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--linha);
}
.loja-vitrine__logo {
    width: 160px; height: 160px;
    object-fit: contain;
    padding: 10px;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    flex-shrink: 0;
}
/* Nome + medalha de loja honoraria na mesma linha, na vitrine publica da loja */
.loja-vitrine__titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.loja-vitrine__medalha { flex-shrink: 0; }
.loja-vitrine__contato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-top: 10px;
    font-size: .88rem;
    color: var(--texto-suave);
}
.loja-vitrine__contato a { color: var(--texto-suave); font-weight: 600; text-decoration: none; }
.loja-vitrine__contato a:hover { color: var(--marca-laranja-contraste); text-decoration: underline; }
@media (max-width: 560px) {
    .loja-vitrine__logo { width: 80px; height: 80px; }
}

/* ---------- Paginacao ---------- */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.paginacao__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto-suave);
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.paginacao__item:hover { border-color: var(--marca-laranja); color: var(--marca-laranja-contraste); }
.paginacao__item--ativo {
    background: var(--marca-azul-escuro);
    border-color: var(--marca-azul-escuro);
    color: #fff;
}
.paginacao__item--desabilitado { opacity: .35; pointer-events: none; }

/* ---------- Grade de veiculos ---------- */
.grade-veiculos {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cartao-veiculo {
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
}
.cartao-veiculo:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-suave);
    border-color: #D9D3C2;
}
.cartao-veiculo__foto {
    aspect-ratio: 4 / 3;
    background: var(--fundo-abafado);
    overflow: hidden;
    position: relative;
}
.cartao-veiculo__foto img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.cartao-veiculo:hover .cartao-veiculo__foto img { transform: scale(1.04); }
.cartao-veiculo--vendido .cartao-veiculo__foto img {
    filter: grayscale(100%) brightness(1.3);
    opacity: 0.55;
}
.cartao-veiculo__destaque {
    position: absolute; top: 12px; left: 12px;
    z-index: 2;
    background: var(--marca-laranja-contraste);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    transform: skewX(-8deg);
}
.cartao-veiculo__blindado {
    position: absolute; top: 12px; right: 12px;
    z-index: 2;
    background: var(--marca-azul-escuro);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cartao-veiculo__0km {
    position: absolute; bottom: 12px; left: 12px;
    z-index: 2;
    background: var(--sucesso);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
}
.cartao-veiculo__corpo { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cartao-veiculo__local {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-fraco);
    font-weight: 600;
}
.cartao-veiculo__titulo {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--marca-azul-escuro);
    margin: 0;
    line-height: 1.2;
}
.cartao-veiculo__versao {
    font-size: .88rem;
    color: var(--texto-suave);
    min-height: 1.4em;
}
.cartao-veiculo__preco {
    font-family: var(--fonte-display);
    font-weight: 800;
    color: var(--marca-azul);
    font-size: 1.5rem;
    margin-top: auto;
    padding-top: 6px;
}
.cartao-veiculo__meta {
    display: flex;
    gap: 6px;
    font-size: .82rem;
    color: var(--texto-suave);
    padding-top: 12px;
    border-top: 1px solid var(--linha-suave);
    flex-wrap: wrap;
}
.cartao-veiculo__meta span { display: inline-flex; align-items: center; }
.cartao-veiculo__meta span + span::before {
    content: '';
    width: 3px; height: 3px;
    background: var(--texto-fraco);
    border-radius: 50%;
    margin: 0 8px;
    display: inline-block;
    align-self: center;
}
.cartao-veiculo a.cartao-veiculo__link {
    position: absolute; inset: 0;
    color: transparent;
}

/* ---------- Detalhe de veiculo ---------- */
.detalhe {
    padding: 40px 0 80px;
}
.detalhe__grade {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
}
.detalhe__galeria { display: flex; flex-direction: column; gap: 12px; }
.detalhe__foto-principal {
    aspect-ratio: 4 / 3;
    background: var(--fundo-abafado);
    border-radius: var(--raio-medio);
    overflow: hidden;
    border: 1px solid var(--linha);
}
.detalhe__foto-principal img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Botao/imagem principal como gatilho do lightbox */
.detalhe__ampliar {
    display: block;
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    background: none; border: 0;
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
}
.detalhe__ampliar img { transition: transform .35s ease; }
.detalhe__ampliar:hover img { transform: scale(1.03); }
.detalhe__ampliar-icone {
    position: absolute;
    right: 14px; bottom: 14px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(10, 22, 51, .78);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.detalhe__ampliar:hover .detalhe__ampliar-icone,
.detalhe__ampliar:focus-visible .detalhe__ampliar-icone { opacity: 1; }
.detalhe__miniaturas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.detalhe__miniaturas button {
    aspect-ratio: 4 / 3;
    background: var(--fundo-abafado);
    border: 2px solid var(--linha);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
}
.detalhe__miniaturas button.esta-ativo { border-color: var(--marca-laranja); }
.detalhe__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.detalhe__info {
    position: sticky;
    top: 96px;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    padding: 28px;
    box-shadow: var(--sombra-suave);
}
.detalhe__marca-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--linha-suave);
}
.detalhe__marca-logo {
    display: flex;
    align-items: center;
    min-height: 44px;
}
.detalhe__marca-logo img {
    max-height: 42px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.detalhe__marca-selo {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--marca-azul-escuro);
    letter-spacing: -.01em;
}
.detalhe__local {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--marca-laranja);
    font-weight: 700;
    text-align: right;
}
.detalhe__marca-modelo {
    font-family: var(--fonte-display);
    font-size: 1.9rem;
    color: var(--marca-azul-escuro);
    margin: 0 0 4px;
    line-height: 1.1;
}
.detalhe__versao { color: var(--texto-suave); margin-bottom: 4px; }
.detalhe__loja-nome {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--marca-azul);
    text-decoration: none;
    margin-bottom: 20px;
    padding: 6px 14px;
    background: rgba(0, 33, 90, .07);
    border-left: 3px solid var(--marca-laranja);
    border-radius: 4px;
    transition: background .15s ease, color .15s ease;
}
.detalhe__loja-nome:hover {
    background: rgba(0, 33, 90, .12);
    color: var(--marca-laranja-contraste);
}
.detalhe__preco {
    font-family: var(--fonte-display);
    font-weight: 800;
    color: var(--marca-azul);
    font-size: 2.4rem;
    margin: 16px 0 4px;
    letter-spacing: -.01em;
}
.detalhe__preco-rotulo {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--texto-suave); margin-bottom: 10px;
}
.detalhe__ficha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}
.detalhe__ficha dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-fraco);
    margin-bottom: 2px;
}
.detalhe__ficha dd { margin: 0; font-weight: 600; color: var(--texto); }

.detalhe__descricao {
    margin-top: 40px;
    padding: 32px;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
}
.detalhe__descricao h3 { margin-top: 0; }

/* Card "Tenho Interesse": mesma mancha diagonal laranja clara + friso no
   topo usados nos blocos do painel (.painel__bloco), pra destacar como CTA
   principal da pagina de detalhe do veiculo. */
.detalhe__descricao--interesse {
    background:
        linear-gradient(135deg, transparent 70%, rgba(254, 97, 1, .06) 100%),
        var(--fundo-card);
    border-top: 2px solid var(--marca-laranja);
}

/* Corte 75%/25%: formulario de interesse + card de compartilhar */
.detalhe__interesse-grade { display: grid; grid-template-columns: 3fr 1fr; gap: 32px; }
.detalhe__compartilhar { border-left: 1px solid var(--linha); padding-left: 28px; }
@media (max-width: 860px) {
    .detalhe__interesse-grade { grid-template-columns: 1fr; }
    .detalhe__compartilhar { border-left: none; border-top: 1px solid var(--linha); padding-left: 0; padding-top: 24px; }
}
.detalhe__compartilhar-lista { display: flex; flex-direction: column; gap: 8px; }
.detalhe__compartilhar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texto);
    padding: 9px 12px;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--linha);
    background: var(--fundo-card);
    cursor: pointer;
    text-align: left;
}
.detalhe__compartilhar-link:hover { background: var(--fundo-abafado); color: var(--texto); }
.detalhe__compartilhar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.detalhe__compartilhar-link--whatsapp svg { color: var(--whatsapp); }
.detalhe__compartilhar-link--facebook svg { color: #1877F2; }
.detalhe__compartilhar-link--x svg { color: #0A0A0A; }
.detalhe__compartilhar-link--telegram svg { color: #229ED9; }
.detalhe__compartilhar-link--email svg { color: var(--marca-azul); }
.detalhe__compartilhar-link--copiar svg { color: var(--texto-suave); }

/* Cards compactos "Voce Tambem Pode Gostar" (mesma marca), embaixo do form de interesse */
.detalhe__relacionados { margin-top: 40px; }
.cartoes-mini-grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .cartoes-mini-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cartoes-mini-grade { grid-template-columns: 1fr; }
}
.cartao-mini {
    display: block;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cartao-mini:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
    border-color: #D9D3C2;
}
.cartao-mini__foto {
    aspect-ratio: 4 / 3;
    background: var(--fundo-abafado);
    overflow: hidden;
}
.cartao-mini__foto img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
}
.cartao-mini:hover .cartao-mini__foto img { transform: scale(1.04); }
.cartao-mini__corpo { padding: 12px 14px 14px; }
.cartao-mini__titulo {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: .92rem;
    color: var(--marca-azul-escuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cartao-mini__versao {
    font-size: .78rem;
    color: var(--texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.cartao-mini__preco {
    font-family: var(--fonte-display);
    font-weight: 800;
    color: var(--marca-azul);
    font-size: 1.05rem;
    margin-top: 6px;
}

/* Carrossel de marcas (home): navegacao rapida pra busca ja filtrada */
.marcas-carrossel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.marcas-carrossel__trilha {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 12px;
    flex: 1;
    scrollbar-width: none;
}
.marcas-carrossel__trilha::-webkit-scrollbar { display: none; }
.marcas-carrossel__item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.marcas-carrossel__icone {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--marca-azul);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.marcas-carrossel__icone img { width: 60%; height: 60%; object-fit: contain; }
.marcas-carrossel__item:hover .marcas-carrossel__icone {
    transform: translateY(-3px);
    border-color: var(--marca-laranja);
    box-shadow: var(--sombra-suave);
}
.marcas-carrossel__nome {
    font-size: .82rem;
    font-weight: 600;
    color: var(--texto-suave);
    text-align: center;
    white-space: nowrap;
}
.marcas-carrossel__seta {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--fundo-card);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--marca-azul-escuro);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.marcas-carrossel__seta:hover { background: var(--fundo-abafado); }
@media (max-width: 640px) {
    .marcas-carrossel__seta { display: none; }
}

.detalhe__opcionais {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 20px;
}
.detalhe__opcionais li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    color: var(--texto);
}
.detalhe__opcionais svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--marca-laranja-contraste);
}
@media (max-width: 560px) {
    .detalhe__opcionais { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .detalhe__grade { grid-template-columns: 1fr; gap: 24px; }
    .detalhe__info { position: static; }
    .detalhe__miniaturas { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Busca (pagina) ---------- */
.busca {
    padding: 40px 0 80px;
}
.busca__cabecalho {
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 24px;
    margin-bottom: 32px;
}
.busca__resultado-info {
    margin-bottom: 20px;
    color: var(--texto-suave);
    font-size: .95rem;
}
.busca__resultado-info strong { color: var(--marca-azul-escuro); font-weight: 700; }

/* ---------- Rodape ---------- */
.rodape {
    background: var(--marca-azul-escuro);
    color: #C7CDDA;
}
.rodape__grade {
    padding: 56px 24px 40px;
    display: grid;
    gap: 40px;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.rodape__marca img { filter: brightness(0) invert(1); height: 44px; width: auto; opacity: .95; }
.rodape__slogan { margin-top: 12px; font-size: .95rem; color: #A8B0C0; max-width: 24ch; }
.rodape__apps { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.rodape__apps-rotulo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #A8B0C0; margin-right: 2px; }
.rodape__app-badge {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-radius: var(--raio-pequeno);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.rodape__app-badge:hover { background: var(--marca-laranja); color: #fff; transform: translateY(-1px); }
.rodape__app-badge svg { width: 16px; height: 16px; display: block; }
.rodape__coluna h4 { color: #fff; font-family: var(--fonte-corpo); font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px; }
.rodape__coluna ul { list-style: none; padding: 0; margin: 0; }
.rodape__coluna li { margin-bottom: 8px; font-size: .92rem; }
.rodape__coluna a { color: #C7CDDA; }
.rodape__coluna a:hover { color: var(--marca-laranja); }
.rodape__base { border-top: 1px solid rgba(255, 255, 255, .06); }
.rodape__base-empresa {
    padding: 16px 24px 4px;
    font-size: .78rem;
    color: #7B8496;
    text-align: center;
    line-height: 1.5;
}
.rodape__base-empresa strong { color: #A9B1C1; font-weight: 700; }
.rodape__base-linha {
    position: relative;
    padding: 8px 24px 18px;
    text-align: center;
    font-size: .82rem;
    color: #7B8496;
}
.rodape__marca-corte {
    position: absolute;
    right: 24px;
    top: 50%;
    font-family: var(--fonte-display);
    font-weight: 800;
    color: var(--marca-laranja);
    font-size: 1.1rem;
    letter-spacing: .05em;
    display: inline-block;
    transform: translateY(-50%) skewX(-14deg);
}
@media (max-width: 800px) {
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .rodape__marca { grid-column: 1 / -1; }
    .rodape__marca-corte { position: static; display: block; margin-top: 6px; transform: skewX(-14deg); }
}

/* ========================================================================
   Paineis internos (admin e lojista)
   ======================================================================== */

.corpo--painel {
    background: var(--fundo-abafado);
    min-height: 100vh;
}
/* Aviso fixo quando o admin esta impersonando (logado como) uma loja */
.aviso-impersonacao {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--marca-laranja);
    color: #fff;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: .86rem;
    text-align: center;
    flex-wrap: wrap;
}
.aviso-impersonacao form { margin: 0; }
.aviso-impersonacao button {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    padding: 5px 14px;
    border-radius: var(--raio-pequeno);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}
.aviso-impersonacao button:hover { background: rgba(255, 255, 255, .3); }
.painel {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}
.painel__sidebar {
    background: var(--marca-azul-escuro);
    color: #E1E5EE;
    padding: 24px 0;
}
.painel__marca {
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 16px;
}
/* Equivalente ao .img-fluid do Bootstrap (o painel nao carrega Bootstrap) */
.img-fluid { max-width: 100%; height: auto; display: block; }
.painel__marca img { filter: brightness(0) invert(1); max-width: 100%; height: auto; }
.painel__usuario {
    padding: 12px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 16px;
    font-size: .88rem;
}
.painel__usuario strong { color: #fff; display: block; }
.painel__usuario span { color: #8B94A8; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.painel__nav-titulo {
    margin: 20px 0 6px;
    padding: 0 24px;
    color: #6A7488;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.painel__nav { list-style: none; padding: 0; margin: 0; }
.painel__nav li a {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    color: #C7CDDA;
    font-weight: 500;
    font-size: .95rem;
    border-left: 3px solid transparent;
}
.painel__nav li a:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.painel__nav li a.esta-ativo {
    background: rgba(254, 97, 1, .08);
    color: #fff;
    border-left-color: var(--marca-laranja);
}
.painel__nav--rodape {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.painel__conteudo {
    padding: 40px 48px 80px;
    overflow-x: hidden;
}
.painel__topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin: -40px -48px 32px;
    padding: 14px 48px;
    background: #fff;
    border-bottom: 1px solid var(--borda-suave, #E5E8EF);
    box-shadow: 0 2px 8px rgba(0, 19, 56, .06);
}
.painel__hamburguer {
    display: none;
    background: transparent;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pequeno);
    padding: 8px 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    margin-right: 8px;
}
.painel__hamburguer span {
    display: block; width: 22px; height: 2px;
    background: var(--marca-azul-escuro); border-radius: 2px;
}
.painel__sidebar-fundo {
    display: none;
}
.painel__topbar-site {
    margin-right: auto;
    font-weight: 600;
    font-size: .88rem;
    color: var(--texto-suave);
}
.painel__topbar-site:hover { color: var(--marca-laranja); }
.painel__topbar-usuario {
    font-weight: 600;
    color: var(--marca-azul-escuro);
    font-size: .92rem;
}
.painel__central-notificacoes { position: relative; }
.painel__topbar-notificacoes {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--marca-azul-escuro);
    cursor: pointer;
}
.painel__topbar-notificacoes:hover { background: var(--fundo-abafado); }
.painel__notificacoes-contagem {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--marca-laranja, #FE6101);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.painel__notificacoes-painel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: 90vw;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--borda-suave, #E5E8EF);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 19, 56, .16);
    z-index: 50;
    overflow: hidden;
}
.painel__notificacoes-painel[hidden] { display: none; }
.painel__notificacoes-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda-suave, #E5E8EF);
    color: var(--marca-azul-escuro);
}
.painel__notificacoes-marcar-todas {
    border: none;
    background: transparent;
    color: var(--marca-laranja, #FE6101);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.painel__notificacoes-marcar-todas:hover { text-decoration: underline; }
.painel__notificacoes-lista { overflow-y: auto; }
.painel__notificacoes-vazio {
    padding: 24px 16px;
    text-align: center;
    color: var(--texto-suave);
    font-size: .88rem;
    margin: 0;
}
.painel__notificacao-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda-suave, #F0F1F5);
    cursor: pointer;
}
.painel__notificacao-item:last-child { border-bottom: none; }
.painel__notificacao-item:hover { background: var(--fundo-abafado); }
.painel__notificacao-item.nao-lida { background: rgba(254, 97, 1, .05); }
.painel__notificacao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.painel__notificacao-titulo {
    font-weight: 700;
    font-size: .88rem;
    color: var(--marca-azul-escuro);
}
.painel__notificacao-bolinha {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--marca-laranja, #FE6101);
}
.painel__notificacao-mensagem {
    margin: 4px 0 0;
    font-size: .84rem;
    color: var(--texto-suave);
    line-height: 1.4;
}
.painel__notificacao-data {
    display: block;
    margin-top: 6px;
    font-size: .72rem;
    color: #9AA2B1;
}
.painel__topbar-sair {
    font-weight: 600;
    font-size: .88rem;
    color: #F26B1F;
}
.painel__topbar-sair:hover { text-decoration: underline; }
.painel__cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 24px;
    flex-wrap: wrap;
}
.painel__eyebrow {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--texto-suave);
    font-weight: 700;
    margin-bottom: 6px;
}
.painel__titulo {
    font-size: 1.8rem;
    margin: 0;
    color: var(--marca-azul-escuro);
}
.painel__subtitulo {
    color: var(--texto-suave);
    font-size: .95rem;
    margin-top: 4px;
}
.painel__bloco {
    /* Mancha diagonal laranja no canto inferior direito, ecoando o corte do "7" do logo */
    background:
        linear-gradient(135deg, transparent 70%, rgba(254, 97, 1, .06) 100%),
        var(--fundo-card);
    border: 1px solid var(--linha);
    border-top: 2px solid var(--marca-laranja);
    border-radius: var(--raio-medio);
    padding: 28px;
    margin-bottom: 24px;
    min-width: 0;
}
/* Variante sem a mancha laranja de fundo e sem o topborder laranja —
   usada nos cards da tela de Integrações, onde varios blocos empilhados
   com esse destaque ficavam poluidos visualmente. */
.painel__bloco--simples {
    background: var(--fundo-card);
    border-top: 1px solid var(--linha);
}
/* Card expansivel: <details class="painel__bloco painel__bloco--expansivel">
   com <summary><h2>...</h2></summary> como cabecalho clicavel. Fechado por
   padrao, mostrando so' o titulo com a setinha. */
.painel__bloco--expansivel > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
.painel__bloco--expansivel > summary::-webkit-details-marker { display: none; }
.painel__bloco--expansivel > summary::marker { content: ''; }
.painel__bloco--expansivel > summary h2 {
    margin: 0;
    font-size: 1.05rem;
}
.integracao-card__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-pequeno);
    background: rgba(0, 33, 90, .06);
    color: var(--marca-azul);
}
.integracao-card__icone svg { width: 18px; height: 18px; }
.integracao-card__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.integracao-card__titulo-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.integracao-card__legenda {
    color: var(--texto-suave);
    font-size: .82rem;
    font-weight: 400;
}
.painel__bloco--expansivel > summary::after {
    content: '';
    flex: none;
    width: 10px; height: 10px;
    border-right: 2px solid var(--marca-laranja-contraste);
    border-bottom: 2px solid var(--marca-laranja-contraste);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.painel__bloco--expansivel[open] > summary::after { transform: rotate(-135deg); }
.painel__bloco--expansivel[open] > summary { margin-bottom: 16px; }
.painel__abas-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    border-bottom: 1px solid var(--linha);
    margin-bottom: 24px;
}
.painel__aba-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0 12px;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--texto-suave);
    cursor: pointer;
}
.painel__aba-botao svg { flex: none; width: 15px; height: 15px; opacity: .7; }
.painel__aba-botao:hover { color: var(--texto); }
.painel__aba-botao.esta-ativo {
    color: var(--marca-laranja-contraste);
    border-bottom-color: var(--marca-laranja);
}
.painel__aba-botao.esta-ativo svg { opacity: 1; }
.painel__cards {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 32px;
}
.painel__card {
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 19, 56, .06);
}
.painel__card-rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-suave); font-weight: 700; }
.painel__card-valor { font-family: var(--fonte-display); font-weight: 800; font-size: 2.2rem; color: var(--marca-azul-escuro); margin-top: 6px; }

/* ---------- Visão Geral (dashboards admin e lojista) ----------
   Conceito "painel de bordo": hero navy com régua de ticks de
   odômetro na base e medidores proporcionais nos cards de stats. */
.vg-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(254, 97, 1, .16) 0%, transparent 46%),
        linear-gradient(128deg, var(--marca-azul) 0%, var(--marca-azul-escuro) 78%);
    border-radius: var(--raio-medio);
    color: #fff;
    padding: 34px 34px 44px;
    margin-bottom: 24px;
}
/* Régua de ticks (odômetro): traços finos + traços maiores a cada 5 */
.vg-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 16px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .30) 0 2px, transparent 2px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 14px);
    pointer-events: none;
}
.vg-hero__grade {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.vg-hero__eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #FFB27E;
    margin-bottom: 6px;
}
.vg-hero__titulo {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 1.45rem;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -.015em;
}
.vg-hero__num {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: clamp(3rem, 6vw, 4.4rem);
    line-height: .95;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.vg-hero__num-rotulo {
    display: block;
    font-family: var(--fonte-corpo);
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    margin-top: 8px;
    letter-spacing: 0;
}
.vg-hero__meta {
    display: flex;
    gap: 8px 22px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: .85rem;
    color: rgba(255, 255, 255, .68);
}
.vg-hero__meta strong { color: #fff; font-variant-numeric: tabular-nums; }
.vg-hero__acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.vg-hero .botao--vidro {
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.vg-hero .botao--vidro:hover { background: rgba(255, 255, 255, .17); color: #fff; }

.vg-stats {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 26px;
}
.vg-stat {
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 20px 22px 18px;
    box-shadow: 0 2px 8px rgba(0, 19, 56, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.vg-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 19, 56, .10); }
.vg-stat__rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--texto-suave);
    font-weight: 700;
}
.vg-stat__valor {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 2rem;
    color: var(--marca-azul-escuro);
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
    line-height: 1.1;
}
.vg-stat__legenda { font-size: .78rem; color: var(--texto-fraco); margin-top: 4px; }
/* Medidor proporcional: só aparece quando a fração é real (--p em %) */
.vg-stat__medidor {
    height: 4px;
    background: var(--fundo-abafado);
    border-radius: 99px;
    margin-top: 12px;
    overflow: hidden;
}
.vg-stat__medidor span {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    background: linear-gradient(90deg, var(--marca-laranja), #FF8A3D);
    border-radius: 99px;
    transform-origin: left;
    animation: vg-crescer .7s cubic-bezier(.2, .8, .2, 1);
}
@keyframes vg-crescer { from { transform: scaleX(0); } }
.vg-stat--alerta { border-color: #E8B4A4; background: #FDF3EF; }
.vg-stat--alerta .vg-stat__valor { color: var(--alerta, #C0392B); }

.vg-grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 980px) { .vg-grid2 { grid-template-columns: 1fr; } }
.vg-bloco-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}
.vg-bloco-topo h2 { margin: 0; font-size: 1.05rem; }
.vg-bloco-topo a { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.vg-lista { list-style: none; margin: 0; padding: 0; }
.vg-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--linha);
}
.vg-item:last-child { border-bottom: none; }
.vg-item__thumb {
    width: 56px; height: 42px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--fundo-abafado);
}
.vg-item__corpo { flex: 1; min-width: 0; }
.vg-item__titulo {
    font-weight: 700;
    font-size: .9rem;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vg-item__sub {
    font-size: .78rem;
    color: var(--texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.vg-item__hora {
    font-size: .74rem;
    color: var(--texto-fraco);
    white-space: nowrap;
    flex-shrink: 0;
}
.vg-vazio { color: var(--texto-suave); font-size: .9rem; padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
    .vg-stat__medidor span { animation: none; }
    .vg-stat, .vg-stat:hover { transform: none; transition: none; }
}
@media (max-width: 640px) {
    .vg-hero { padding: 26px 22px 38px; }
}

.tabela {
    width: 100%;
    border-collapse: collapse;
}
.tabela thead th {
    text-align: left;
    padding: 12px 16px;
    background: var(--fundo-abafado);
    color: var(--texto-suave);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    border-bottom: 1px solid var(--linha);
}
.tabela tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--linha-suave);
    font-size: .94rem;
    vertical-align: middle;
}
.tabela tbody tr:hover td { background: rgba(0, 33, 90, .015); }
/* Linha extra abaixo do registro (ex: mensagem do lead) — nao repete borda dupla */
.tabela tbody tr:has(+ .tabela__linha-extra) td { border-bottom: none; }
.tabela__linha-extra td { padding-top: 0; }
/* Coluna de preco: garante folga pra valores longos nao quebrarem linha */
.tabela td[data-rotulo="Preço"] { min-width: 130px; white-space: nowrap; }
/* Tabelas de veiculo no desktop: aumenta Km, reduz Acoes pela metade, deixa Veiculo crescer */
.tabela--veiculos td[data-rotulo="Km"] { min-width: 120px; }
.tabela--veiculos td[data-rotulo="Ações"] { width: 90px; }
.tabela__titulo-cel { flex: 2 !important; }
.selo {
    display: inline-block;
    font-size: .72rem;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.selo-vendido {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    background: var(--marca-laranja-contraste, #B83E00);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 14px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}
.selo-vendido--aguardando { background: #B7791F; }
.selo--ativo { background: #E7F5EB; color: var(--sucesso); }
.selo--aguardando { background: #FBF3E0; color: #8A5A0F; }
.selo--inativo { background: #F1EEE7; color: var(--texto-suave); }
.selo--admin { background: rgba(0, 33, 90, .1); color: var(--marca-azul); }
.selo--lojista { background: rgba(254, 97, 1, .12); color: var(--marca-laranja-escuro); }
.selo--destaque { background: var(--marca-laranja); color: #fff; }
.selo--alerta { background: #FBECE7; color: var(--alerta); }

@media (max-width: 640px) {
    /* Tabelas de listagem viram cartoes empilhados no celular — sem
       rolagem lateral escondida. Cada <td> precisa de data-rotulo
       pra exibir o nome da coluna como label acima do valor. */
    .tabela thead { display: none; }
    .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
    /* Respiro fica so na linha que separa um registro do outro:
       24px acima e abaixo dela, nada no inicio nem no fim da lista. */
    .tabela tbody tr + tr {
        border-top: 1px solid var(--linha);
        margin-top: 24px;
        padding-top: 24px;
    }
    /* Linha extra do mesmo registro (ex: mensagem do lead) fica colada, sem
       o respiro/borda que separa um registro do outro. */
    .tabela tbody tr.tabela__linha-extra {
        border-top: none;
        margin-top: 6px;
        padding-top: 0;
    }
    .tabela tbody td {
        padding: 6px 0;
        border-bottom: none;
        text-align: left !important;
    }
    .tabela tbody td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--texto-suave);
        margin-bottom: 2px;
    }

    /* Tabelas de veiculo: foto e titulo lado a lado no topo do cartao,
       o resto dos dados embaixo, e as acoes por ultimo. */
    .tabela--veiculos tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 14px;
    }
    .tabela--veiculos .tabela__foto-cel {
        order: 1;
        width: auto;
        flex: 0 0 auto;
    }
    .tabela--veiculos .tabela__titulo-cel {
        order: 2;
        width: auto;
        flex: 1 1 0%;
        min-width: 0;
    }
    /* Quebra de linha forcada depois do titulo: os mini-campos
       (preco/ano/km) nunca sobem pra linha da foto. */
    .tabela--veiculos tbody tr::before {
        content: '';
        flex-basis: 100%;
        height: 0;
        order: 3;
    }
    .tabela--veiculos .tabela__mini-cel {
        order: 4;
        width: auto;
        flex: 1 1 0%;
        min-width: 0;
    }
    /* Preco e o valor mais longo da linha 2 — ganha o dobro do espaco */
    .tabela--veiculos .tabela__mini-cel[data-rotulo="Preço"] { flex-grow: 2; }
    .tabela--veiculos .tabela__foto { width: 78px; height: 58.5px; }
    .tabela--veiculos .tabela__foto--grande { width: 160px; height: 70px; }
    .tabela--veiculos td:not(.tabela__foto-cel):not(.tabela__titulo-cel):not(.tabela__acoes-cel):not(.tabela__mini-cel) {
        order: 5;
        width: 100%;
    }
    .tabela--veiculos .tabela__acoes-cel {
        order: 6;
        width: 100%;
        margin-top: 6px;
        padding-top: 10px;
        border-top: 1px dashed var(--linha-suave);
    }
}

.tabela__foto {
    width: 72px; height: 54px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--linha);
    background: var(--fundo-abafado);
}
.tabela__foto--grande {
    width: 160px; height: 70px;
}

.acoes-linha { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Botao compacto quadrado com apenas icone (usado nas listagens do admin) */
.botao--icone {
    padding: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--linha);
    color: var(--texto-suave);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    line-height: 0;
    font-size: 0;
    text-decoration: none;
}
.botao--icone:hover,
.botao--icone:focus-visible {
    background: var(--linha-suave);
    color: var(--texto);
    border-color: var(--texto-fraco);
    outline: none;
}
.botao--icone svg { width: 12px; height: 12px; display: block; }

.botao--icone.esta-on--destaque {
    color: var(--marca-laranja);
    background: var(--marca-laranja-suave);
    border-color: var(--marca-laranja);
}
.botao--icone.esta-on--destaque svg polygon { fill: currentColor; }

.botao--icone.esta-on--ativo {
    color: #1B7A32;
    background: #E7F5EA;
    border-color: #B7DDC1;
}

.botao--icone--alerta {
    color: #fff;
    background: var(--alerta);
    border-color: var(--alerta);
}
.botao--icone--alerta:hover,
.botao--icone--alerta:focus-visible {
    background: var(--alerta);
    color: #fff;
    border-color: var(--alerta);
}

/* Cores distintas para cada tipo de acao nos icones */
.botao--icone[title*="Ver"] { background: rgba(0, 33, 90, .08); color: var(--marca-azul); border-color: var(--marca-azul-suave); }
.botao--icone[title*="Ver"]:hover, .botao--icone[title*="Ver"]:focus-visible { background: var(--marca-azul); color: #fff; border-color: var(--marca-azul); }

.botao--icone[title*="Editar"] { background: rgba(107, 142, 35, .12); color: #6B8E23; border-color: rgba(107, 142, 35, .30); }
.botao--icone[title*="Editar"]:hover, .botao--icone[title*="Editar"]:focus-visible { background: #6B8E23; color: #fff; border-color: #6B8E23; }

.botao--icone[title*="Destacar"], .botao--icone[title*="Tirar"] { background: rgba(254, 97, 1, .1); color: var(--marca-laranja); border-color: rgba(254, 97, 1, .30); }
.botao--icone[title*="Destacar"]:hover, .botao--icone[title*="Tirar"]:hover, .botao--icone[title*="Destacar"]:focus-visible, .botao--icone[title*="Tirar"]:focus-visible { background: var(--marca-laranja); color: #fff; border-color: var(--marca-laranja); }

.painel-fotos {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin-top: 16px;
}
.painel-fotos__item {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 2px solid var(--linha);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    background: var(--fundo-abafado);
}
.painel-fotos__item img { width: 100%; height: 100%; object-fit: cover; }
.painel-fotos__item.esta-principal { border-color: var(--marca-laranja); }
.painel-fotos__acoes {
    position: absolute;
    inset: auto 0 0 0;
    display: flex; justify-content: space-between;
    padding: 4px;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.painel-fotos__acoes button {
    background: rgba(255, 255, 255, .95);
    border: none;
    padding: 4px 8px;
    font-size: .7rem;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    color: var(--marca-azul);
}
.painel-fotos__acoes button:hover { background: #fff; }

/* ---------- Uploader dinamico de fotos (preview + reorder) ---------- */
.foto-uploader__area {
    border: 2px dashed var(--linha);
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: #FAFBFC;
}
.foto-uploader__area:hover,
.foto-uploader__area:focus,
.foto-uploader__area.esta-sobre {
    border-color: var(--marca-laranja);
    background: var(--marca-laranja-suave);
    outline: none;
}
.foto-uploader__area strong { display: block; color: var(--texto); font-size: 1rem; margin-bottom: 4px; }
.foto-uploader__area span { color: var(--texto-suave); font-size: .85rem; }
.foto-uploader__grade {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.foto-uploader__cartao {
    position: relative;
    border: 1px solid var(--linha);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: grab;
    background: #F5F6F8;
    user-select: none;
}
.foto-uploader__cartao:active { cursor: grabbing; }
.foto-uploader__cartao[draggable="false"] { cursor: default; }
.foto-uploader__cartao.esta-arrastando { opacity: .4; }
.foto-uploader__cartao.esta-alvo { outline: 2px solid var(--marca-laranja); outline-offset: -2px; }
.foto-uploader__cartao img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.foto-uploader__cartao .ordem {
    position: absolute; top: 6px; left: 6px;
    background: rgba(0, 33, 90, .92); color: #fff;
    font-weight: 800; font-size: .78rem;
    padding: 2px 8px; border-radius: 999px;
    pointer-events: none;
}
.foto-uploader__cartao .principal {
    position: absolute; bottom: 6px; left: 6px;
    background: var(--marca-laranja); color: #fff;
    font-size: .68rem; font-weight: 800;
    padding: 3px 8px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: .05em;
    pointer-events: none;
}
.foto-uploader__cartao button.remover {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0, 0, 0, .55); color: #fff;
    border: 0; width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.foto-uploader__cartao button.remover:hover { background: var(--alerta); }
.foto-uploader__dica { margin: 10px 0 0; color: var(--texto-suave); font-size: .82rem; text-align: center; }

.upload-progresso { margin-top: 14px; }
.upload-progresso__trilho {
    background: var(--linha); border-radius: 999px; height: 10px; overflow: hidden;
}
.upload-progresso__barra {
    background: var(--marca-laranja-contraste); height: 100%; width: 0%;
    border-radius: 999px; transition: width .15s ease-out;
}
.upload-progresso__texto { display: block; margin-top: 6px; font-size: .82rem; color: var(--texto-suave); text-align: center; }

.botao--carregando { opacity: .85; cursor: wait; pointer-events: none; }
.botao__spinner {
    width: 15px; height: 15px; flex: none;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: botao-girar .7s linear infinite;
}
@keyframes botao-girar { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .painel { grid-template-columns: 1fr; }
    .painel__conteudo { padding: 24px; }
    .painel__topbar { margin: -24px -24px 24px; padding: 14px 24px; }
    .painel__hamburguer { display: inline-flex; margin-right: auto; }
    .painel__topbar-site { display: none; }

    /* Sidebar vira um drawer retratil: fora da tela por padrao,
       desliza pra dentro quando o JS adiciona .esta-aberta. */
    .painel__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 70;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        padding: 24px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0, 19, 56, .25);
    }
    .painel__sidebar.esta-aberta { transform: translateX(0); }

    .painel__sidebar-fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 65;
        background: rgba(0, 19, 56, .5);
    }
    .painel__sidebar-fundo[hidden] { display: none; }
}

/* ---------- Login ---------- */
.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background:
        radial-gradient(600px 400px at 20% 20%, rgba(254, 97, 1, .06), transparent),
        radial-gradient(600px 400px at 80% 80%, rgba(0, 33, 90, .06), transparent),
        var(--fundo);
}
.cartao-login {
    width: 100%;
    max-width: 440px;
    background: var(--fundo-card);
    padding: 40px 36px;
    border-radius: var(--raio-grande);
    border: 1px solid var(--linha);
    box-shadow: var(--sombra-suave);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.cartao-login::before {
    content: '';
    position: absolute;
    top: 0; right: 32px;
    width: 80px; height: 8px;
    background: var(--marca-laranja);
    transform: skewX(-22deg);
    border-radius: 0 0 4px 4px;
}
.cartao-login__marca {
    text-align: center;
    margin-bottom: 24px;
}
.cartao-login__marca img { height: 60px; width: auto; margin: 0 auto 15px; }
.cartao-login__titulo {
    text-align: center;
    font-family: var(--fonte-display);
    font-size: 1.5rem;
    color: var(--marca-azul-escuro);
    margin-bottom: 4px;
}
.cartao-login__descricao {
    text-align: center;
    color: var(--texto-suave);
    font-size: .92rem;
    margin-bottom: 28px;
}
.cartao-login__rodape {
    text-align: center;
    margin-top: 20px;
    font-size: .85rem;
    color: var(--texto-fraco);
}
.turnstile-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.turnstile-wrap--esquerda {
    justify-content: flex-start;
}

/* ---------- Paginas de erro (404, 403...) ---------- */
.pagina-erro {
    min-height: 60vh;
    display: flex; align-items: center;
    padding: 80px 0;
    text-align: center;
}
.pagina-erro__conteudo { max-width: 500px; margin: 0 auto; }
.pagina-erro__codigo {
    font-family: var(--fonte-display);
    font-size: clamp(6rem, 18vw, 12rem);
    font-weight: 800;
    line-height: 1;
    color: var(--marca-azul-escuro);
    margin-bottom: 8px;
    letter-spacing: -.04em;
}
.pagina-erro__codigo em {
    font-style: normal;
    color: var(--marca-laranja);
    display: inline-block;
    transform: skewX(-8deg);
}

/* ---------- Busca por placa em destaque (cadastro de veiculo) ----------
   O campo de placa e desenhado como uma replica de placa Mercosul (faixa
   azul "BRASIL" + corpo branco com letras bem espacadas) porque o cartao
   inteiro serve exatamente pra isso: ler uma placa. O resultado aparece
   como um "recibo de consulta" logo abaixo, com o valor FIPE em destaque
   (e' o dado mais valioso) e o chassi em registro tecnico/mono (dado
   secundario, so' pra conferencia). */
.placa-consulta { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.placa-consulta__placa {
    flex: 1;
    min-width: 240px;
    background: #fff;
    border: 2px solid var(--marca-azul-escuro);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.placa-consulta__placa:focus-within {
    border-color: var(--marca-laranja);
    box-shadow: 0 0 0 3px var(--marca-laranja-suave);
}
.placa-consulta__faixa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--marca-azul-escuro);
    color: #fff;
    font-family: var(--fonte-corpo);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding: 4px 0 5px;
}
.placa-consulta__bandeira {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2E9E4D 50%, #F4C716 50%);
    flex: none;
}
.placa-consulta__input {
    display: block;
    width: 100%;
    height: 64px;
    border: none;
    outline: none;
    font-family: var(--fonte-display);
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: .26em;
    text-align: center;
    text-transform: uppercase;
    color: var(--marca-azul-escuro);
    background: transparent;
}
.placa-consulta__input::placeholder { font-weight: 700; letter-spacing: .06em; color: var(--texto-fraco); }
.placa-consulta__botao { height: auto; padding: 0 28px; font-size: .95rem; }
.placa-consulta__botao svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 560px) {
    .placa-consulta__botao { width: 100%; height: 52px; }
}

.placa-resultado {
    display: none;
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--fundo-abafado);
    border: 1px solid var(--linha-suave);
    border-radius: var(--raio-medio);
}
.placa-resultado--visivel { display: block; animation: placa-resultado-entrar .32s ease both; }
@keyframes placa-resultado-entrar {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.placa-resultado__status--info .placa-resultado__status-icone svg { animation: botao-girar .9s linear infinite; }
.placa-resultado__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texto-suave);
}
.placa-resultado__status-icone { flex: none; width: 16px; height: 16px; display: flex; }
.placa-resultado__status-icone svg { width: 100%; height: 100%; display: block; }
.placa-resultado__status--sucesso { color: var(--sucesso); }
.placa-resultado__status--erro { color: var(--alerta); }
.placa-resultado__linha {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--linha);
}
.placa-resultado__linha[hidden] { display: none; }
.placa-resultado__rotulo {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-fraco);
    margin-bottom: 4px;
}
.placa-resultado__rotulo-extra { text-transform: none; letter-spacing: 0; font-weight: 600; }
.placa-resultado__fipe-valor {
    font-family: var(--fonte-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--marca-laranja-contraste);
}
.placa-resultado__chassi-valor {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, 'SF Mono', 'Courier New', Consolas, monospace;
    font-size: .92rem;
    letter-spacing: .04em;
    color: var(--texto);
}
.placa-resultado__link {
    flex: none;
    font-size: .78rem;
    font-weight: 700;
    color: var(--marca-azul);
    border: 1px solid var(--linha);
    background: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.placa-resultado__link:hover { background: var(--marca-azul); color: #fff; border-color: var(--marca-azul); }
.placa-resultado__copiar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--linha);
    background: #fff;
    color: var(--texto-suave);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.placa-resultado__copiar svg { width: 13px; height: 13px; display: block; }
.placa-resultado__copiar:hover,
.placa-resultado__copiar:focus-visible { background: var(--marca-azul); color: #fff; border-color: var(--marca-azul); }
.placa-resultado__copiar--ok { color: var(--sucesso); border-color: var(--sucesso); }

/* ---------- Utilidades ---------- */
.esconder { display: none !important; }
.centralizar { text-align: center; }
.espacador { height: 24px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grade-2 { grid-template-columns: 1fr; } }

.opcionais-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }

/* ---------- Lightbox / Modal de galeria ---------- */
.corpo--sem-scroll { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 8, 20, .92);
    padding: clamp(16px, 4vw, 40px);
    opacity: 0;
    transition: opacity .2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.esta-aberto { opacity: 1; }

.lightbox__moldura {
    margin: 0;
    max-width: min(1200px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lightbox__moldura img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
    background: #111;
}
.lightbox__legenda {
    color: #E7E9EE;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 500;
}
.lightbox__contador {
    color: #B6BCC8;
    font-weight: 700;
    letter-spacing: .06em;
    font-size: .8rem;
    text-transform: uppercase;
}

.lightbox__fechar,
.lightbox__nav {
    position: absolute;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, transform .18s ease;
    backdrop-filter: blur(6px);
}
.lightbox__fechar:hover,
.lightbox__nav:hover {
    background: var(--marca-laranja);
    transform: scale(1.06);
}
.lightbox__logo {
    position: absolute;
    top: clamp(12px, 2vw, 20px);
    left: clamp(12px, 2vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9991;
}
.lightbox__logo img {
    max-width: 240px;
    height: auto;
    filter: brightness(0) invert(1);
}

.lightbox__fechar {
    top: clamp(12px, 2vw, 20px);
    right: clamp(12px, 2vw, 20px);
    width: 48px; height: 48px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
}
.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    font-size: 40px;
    line-height: 1;
    font-weight: 300;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--anterior { left: clamp(12px, 2vw, 24px); }
.lightbox__nav--proxima  { right: clamp(12px, 2vw, 24px); }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 640px) {
    .lightbox__nav { width: 44px; height: 44px; font-size: 30px; }
    .lightbox__fechar { width: 40px; height: 40px; font-size: 22px; }
    .lightbox__moldura img { max-height: 72vh; }
}

/* ========================================================================
   Pagina "Cadastre sua Loja" (CTA de adesao do lojista)
   ======================================================================== */

/* Hero especifico: fundo escuro (azul navy) pra destacar o cartao de preco */
.cta-hero {
    padding: 76px 0 64px;
    background:
        linear-gradient(135deg, rgba(254, 97, 1, .12) 0%, transparent 45%),
        linear-gradient(-45deg, rgba(254, 97, 1, .06) 0%, transparent 50%),
        radial-gradient(1200px 500px at 95% 5%, rgba(254, 97, 1, .2), transparent 55%),
        radial-gradient(950px 480px at 5% 110%, rgba(15, 58, 122, .2), transparent 60%),
        var(--marca-azul-escuro);
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid var(--marca-laranja);
}
.cta-hero__grade {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.cta-hero__rotulo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--marca-laranja);
    margin-bottom: 22px;
}
.cta-hero__rotulo::before { content: ''; width: 32px; height: 2px; background: var(--marca-laranja); transform: skewX(-18deg); }
.cta-hero__titulo { color: #fff; font-weight: 900; letter-spacing: -.03em; line-height: 1.04; }
.cta-hero__titulo em {
    font-style: normal;
    color: var(--marca-laranja);
    display: inline-block;
    transform: skewX(-4deg);
}
.cta-hero__descricao { font-size: 1.12rem; color: rgba(255, 255, 255, .8); max-width: 50ch; margin-top: 18px; }
.cta-hero__marcas { margin-top: 32px; }
.cta-hero__marcas-rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); font-weight: 700; margin-bottom: 10px; }
.cta-hero__marcas-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-hero__marca-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
}
.cta-hero__marca-chip:hover { color: #fff; background: rgba(255, 255, 255, .13); }

/* Cartao de preco */
.cta-preco {
    background: var(--fundo-card);
    border-radius: var(--raio-grande);
    padding: 32px;
    box-shadow: var(--sombra-forte);
    position: relative;
}
.cta-preco::before {
    content: '';
    position: absolute;
    top: -1px; right: 36px;
    width: 72px; height: 7px;
    background: var(--marca-laranja);
    transform: skewX(-25deg);
    border-radius: 0 0 3px 3px;
}
.cta-preco__selo {
    display: inline-block;
    background: var(--marca-laranja-suave);
    color: var(--marca-laranja-contraste);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.cta-preco__valor-linha { display: flex; align-items: baseline; gap: 8px; }
.cta-preco__moeda { font-family: var(--fonte-display); font-size: 1.4rem; font-weight: 800; color: var(--marca-azul-escuro); }
.cta-preco__valor { font-family: var(--fonte-display); font-size: 3.4rem; font-weight: 900; color: var(--marca-azul-escuro); letter-spacing: -.02em; line-height: 1; }
.cta-preco__periodo { color: var(--texto-suave); font-weight: 600; }
.cta-preco__subtexto { color: var(--texto-suave); font-size: .92rem; margin-top: 8px; }

.cta-lista {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    gap: 12px;
}
.cta-lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--texto);
}
.cta-lista svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #fff;
    background: var(--sucesso);
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .cta-hero { padding: 48px 0 40px; }
    .cta-hero__grade { grid-template-columns: 1fr; gap: 32px; }
}

/* Grade de beneficios "tudo incluso" */
.cta-beneficios {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.cta-beneficio {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 18px 20px;
}
.cta-beneficio__icone {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marca-laranja-suave);
    color: var(--marca-laranja-contraste);
    border-radius: var(--raio-pequeno);
}
.cta-beneficio__icone svg { width: 19px; height: 19px; }
.cta-beneficio__titulo { font-weight: 800; color: var(--marca-azul-escuro); margin: 0 0 2px; font-size: .98rem; }
.cta-beneficio__texto { color: var(--texto-suave); font-size: .87rem; margin: 0; }

/* Exemplos de sites de clientes (prova social) */
.cta-exemplos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.cta-exemplo {
    display: block;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 24px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cta-exemplo:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-suave);
    border-color: #D9D3C2;
}
.cta-exemplo__rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--marca-laranja-contraste);
    font-weight: 700;
    margin-bottom: 8px;
}
.cta-exemplo__dominio {
    font-family: var(--fonte-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--marca-azul-escuro);
    margin-bottom: 4px;
}
.cta-exemplo__acao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--texto-suave);
}
.cta-exemplo:hover .cta-exemplo__acao { color: var(--marca-laranja-contraste); }

/* Diferenciais em destaque (suporte humano no WhatsApp / integracoes futuras) */
.cta-destaques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}
.cta-destaque {
    position: relative;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-top: 3px solid var(--marca-laranja);
    border-radius: var(--raio-grande);
    padding: 28px 28px 26px;
    box-shadow: var(--sombra-suave);
}
.cta-destaque__icone {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 18px;
}
.cta-destaque__icone svg { width: 26px; height: 26px; }
.cta-destaque__icone--whatsapp { background: var(--whatsapp); }
.cta-destaque__icone--integracao { background: var(--marca-azul); }
.cta-destaque__icone--codigo { background: var(--marca-laranja-contraste); }
/* Cartao ocupando a largura total da grade (usado para o destaque de codigo sob medida) */
.cta-destaque--largo { grid-column: 1 / -1; }
.cta-destaque__badge {
    position: absolute;
    top: 24px; right: 24px;
    background: var(--marca-laranja);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 10px;
    border-radius: 999px;
}
.cta-destaque h3 { margin-bottom: 8px; }
.cta-destaque p { color: var(--texto-suave); margin: 0; font-size: .95rem; }

/* Nota de acompanhamento por especialista, exibida apos o formulario */
.cta-nota-especialista {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--marca-laranja-suave);
    border: 1px solid #FFD9B8;
    border-radius: var(--raio-medio);
    padding: 18px 20px;
    margin-top: 20px;
}
.cta-nota-especialista__icone {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marca-laranja);
    color: #fff;
    border-radius: 50%;
}
.cta-nota-especialista__icone svg { width: 18px; height: 18px; }

/* ---------- Pagina "Anuncie seu Carro" (pessoa fisica) --------------- */

/* Passos numerados no hero — sequencia real (cadastrar > pagar > acompanhar),
   por isso a numeracao faz sentido aqui (nao e so decoracao). */
.cta-passos { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; }
.cta-passo { display: flex; gap: 14px; align-items: flex-start; }
.cta-passo__numero {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--marca-laranja);
    color: var(--marca-azul-escuro);
    font-family: var(--fonte-display);
    font-weight: 900;
    font-size: .95rem;
    border-radius: 50%;
}
.cta-passo__titulo { color: #fff; font-weight: 700; font-size: .96rem; margin: 0 0 2px; }
.cta-passo__texto { color: rgba(255, 255, 255, .65); font-size: .85rem; margin: 0; }

/* Mockup do painel — assinatura visual da pagina: o diferencial concreto
   de ter um painel de verdade em vez de so postar solto em outro lugar. */
.cta-mockup {
    max-width: 420px;
    margin: 0 auto;
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra-forte);
    padding: 20px;
    position: relative;
}
.cta-mockup__topo {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linha-suave);
    margin-bottom: 16px;
}
.cta-mockup__titulo { font-family: var(--fonte-display); font-weight: 800; color: var(--marca-azul-escuro); font-size: 1rem; }
.cta-mockup__sino { position: relative; color: var(--marca-azul-escuro); display: flex; }
.cta-mockup__sino-bolinha {
    position: absolute; top: -2px; right: -2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--marca-laranja);
    border: 2px solid var(--fundo-card);
}
.cta-mockup__anuncio {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--fundo-abafado);
    border-radius: var(--raio-medio);
    margin-bottom: 18px;
}
.cta-mockup__foto {
    width: 52px; height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--marca-azul), var(--marca-azul-suave));
}
.cta-mockup__anuncio-info { display: flex; flex-direction: column; flex-grow: 1; }
.cta-mockup__anuncio-info strong { font-size: .9rem; color: var(--texto); }
.cta-mockup__anuncio-info span { font-size: .8rem; color: var(--texto-suave); }
.cta-mockup__interessados-titulo {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--texto-fraco);
    margin-bottom: 10px;
}
.cta-mockup__lead { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cta-mockup__lead + .cta-mockup__lead { border-top: 1px solid var(--linha-suave); }
.cta-mockup__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--marca-laranja-suave);
    color: var(--marca-laranja-contraste);
    font-weight: 800;
    font-family: var(--fonte-display);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}
.cta-mockup__lead strong { display: block; font-size: .86rem; color: var(--texto); }
.cta-mockup__lead span { font-size: .76rem; color: var(--texto-suave); }
.cta-mockup__toast {
    position: absolute;
    top: -18px; right: -18px;
    display: flex; align-items: center; gap: 8px;
    background: var(--marca-azul-escuro);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0, 19, 56, .25);
    max-width: 220px;
}
.cta-mockup__toast svg { flex-shrink: 0; color: var(--marca-laranja); }
@media (max-width: 640px) {
    .cta-mockup__toast { position: static; margin-top: 16px; max-width: none; }
}

/* Comparativo "do jeito antigo" x "no Carro 7" — a coluna Carro7 ganha
   cartao/sombra pra parecer a opcao concreta; a antiga fica achatada/muda. */
.cta-comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.cta-comparativo__coluna { display: flex; flex-direction: column; gap: 14px; }
.cta-comparativo__rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; margin-bottom: 4px; }
.cta-comparativo__coluna--antes .cta-comparativo__rotulo { color: var(--texto-fraco); }
.cta-comparativo__coluna--depois .cta-comparativo__rotulo { color: var(--marca-laranja-contraste); }
.cta-comparativo__item { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; }
.cta-comparativo__coluna--antes .cta-comparativo__item { color: var(--texto-suave); }
.cta-comparativo__coluna--antes svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--texto-fraco); }
.cta-comparativo__coluna--depois {
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-medio);
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 19, 56, .06);
}
.cta-comparativo__coluna--depois .cta-comparativo__item { color: var(--texto); font-weight: 600; }
.cta-comparativo__coluna--depois svg {
    width: 20px; height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    color: #fff;
    background: var(--sucesso);
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}
@media (max-width: 780px) {
    .cta-comparativo { grid-template-columns: 1fr; }
}

/* FAQ simples, sem JS — poucas perguntas, nao justifica acordeao */
.cta-faq { display: grid; gap: 22px; margin-top: 8px; }
.cta-faq__item { padding-bottom: 22px; border-bottom: 1px solid var(--linha-suave); }
.cta-faq__item:last-child { border-bottom: none; padding-bottom: 0; }
.cta-faq__pergunta { font-size: 1rem; margin-bottom: 6px; color: var(--marca-azul-escuro); }
.cta-faq__resposta { color: var(--texto-suave); margin: 0; font-size: .93rem; }

/* ========================================================================
   Pagina "Classicos" (veiculos ate 1995 — elegiveis a placa preta)
   Conceito: garagem ao anoitecer. Assinatura: a placa preta em relevo
   como heroi, ecoada em miniatura no selo de ano de cada cartao.
   Tudo escopado em .corpo--classicos pra nao vazar pro resto do site.
   ======================================================================== */
.corpo--classicos {
    --cls-fundo:   #1B1712;
    --cls-painel:  #262019;
    --cls-marfim:  #EAE0C9;
    --cls-latao:   #C79A56;
    --cls-verde:   #3E5C43;
    --cls-vermelho:#8C3B2E;
    --cls-mono: ui-monospace, 'SF Mono', 'Courier New', Consolas, monospace;
}

.cls-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(70% 120% at 50% -10%, rgba(199, 154, 86, .10) 0%, transparent 60%),
        var(--cls-fundo);
    padding: 64px 0 56px;
    text-align: center;
}
.cls-hero__contorno { display: flex; flex-direction: column; align-items: center; }

/* A placa preta: heroi da pagina. Relevo via texto duplicado, moldura de
   latao, parafusos nos 4 cantos — igual placa de carro de colecao. */
.cls-placa {
    position: relative;
    background: #0D0D0D;
    border: 3px solid var(--cls-latao);
    border-radius: 10px;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, .06),
        inset 0 -3px 10px rgba(0, 0, 0, .6),
        0 18px 40px rgba(0, 0, 0, .5);
    padding: 22px 56px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cls-placa__parafuso {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #E8CB98, var(--cls-latao) 55%, #7A5A2C 100%);
    box-shadow: inset 0 0 1px rgba(0, 0, 0, .5);
}
.cls-placa__parafuso--tl { top: 10px; left: 10px; }
.cls-placa__parafuso--tr { top: 10px; right: 10px; }
.cls-placa__parafuso--bl { bottom: 10px; left: 10px; }
.cls-placa__parafuso--br { bottom: 10px; right: 10px; }
.cls-placa__topo, .cls-placa__base {
    font-family: var(--cls-mono);
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--cls-latao);
}
.cls-placa__titulo {
    font-family: var(--fonte-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(2.6rem, 7vw, 5rem);
    letter-spacing: .09em;
    line-height: 1;
    margin: 2px 0;
    color: var(--cls-marfim);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .12),
        0 3px 3px rgba(0, 0, 0, .7);
}

.cls-hero__texto {
    max-width: 58ch;
    margin: 28px auto 0;
    color: rgba(234, 224, 201, .78);
    font-size: 1rem;
    line-height: 1.6;
}

/* Faixa "odometro": numeros grandes em janelinhas com moldura de latao */
.cls-odometro {
    display: flex;
    gap: 18px;
    margin-top: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.cls-odometro__item {
    background: var(--cls-painel);
    border: 1px solid rgba(199, 154, 86, .35);
    border-radius: 8px;
    padding: 14px 26px;
    min-width: 160px;
}
.cls-odometro__valor {
    display: block;
    font-family: var(--cls-mono);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: .04em;
    color: var(--cls-latao);
}
.cls-odometro__rotulo {
    display: block;
    margin-top: 2px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(234, 224, 201, .6);
}

.cls-secao-grade {
    background: var(--cls-fundo);
    padding: 8px 0 72px;
}
.cls-vazio {
    max-width: 52ch;
    margin: 0 auto;
    text-align: center;
    color: rgba(234, 224, 201, .78);
    padding: 40px 0;
    line-height: 1.6;
}
.cls-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.cls-cartao {
    display: flex;
    flex-direction: column;
    background: var(--cls-painel);
    border: 1px solid rgba(199, 154, 86, .25);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cls-cartao:hover {
    transform: translateY(-4px);
    border-color: var(--cls-latao);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.cls-cartao__foto { position: relative; aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.cls-cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cls-cartao:hover .cls-cartao__foto img { transform: scale(1.05); }
/* Selo de ano: mini-placa preta no canto, ecoando o heroi */
.cls-cartao__ano {
    position: absolute;
    bottom: 10px; left: 10px;
    z-index: 2;
    background: #0D0D0D;
    border: 1.5px solid var(--cls-latao);
    border-radius: 4px;
    padding: 3px 9px;
    font-family: var(--cls-mono);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .06em;
    color: var(--cls-marfim);
}
.cls-cartao__corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cls-cartao__titulo {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--cls-marfim);
}
.cls-cartao__versao { font-size: .82rem; color: rgba(234, 224, 201, .6); }
.cls-cartao__meta {
    display: flex;
    gap: 12px;
    font-size: .78rem;
    color: rgba(234, 224, 201, .55);
    margin-top: 6px;
}
.cls-cartao__selo {
    align-self: flex-start;
    margin-top: 8px;
    background: rgba(62, 92, 67, .25);
    border: 1px solid var(--cls-verde);
    color: #A9C7AE;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 3px 9px;
    border-radius: 999px;
}
.cls-cartao__preco {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--cls-latao);
    margin-top: auto;
    padding-top: 10px;
}

@media (max-width: 640px) {
    .cls-placa { padding: 18px 30px 22px; }
    .cls-placa__titulo { font-size: clamp(2.1rem, 12vw, 3rem); }
    .cls-odometro__item { min-width: 130px; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .cls-cartao, .cls-cartao__foto img { transition: none; }
}
.cta-nota-especialista p { margin: 0; color: var(--marca-laranja-contraste); font-size: .92rem; font-weight: 600; }

/* ========================================================================
   Pagina "Quem Somos" (manifesto)
   Assinatura: diagrama de rota (pedagio x direto) — a metafora ja estava
   no vocabulario da marca ("vitrine sem pedagio"); aqui vira o argumento
   visual central, com um carrinho animado percorrendo a rota livre e
   parado nos pedagios da rota tradicional (contraste de movimento
   contando a mesma historia do texto).
   ======================================================================== */

/* Faixa do manifesto: fundo laranja da marca de ponta a ponta da tela
   (na propria section, nao num card contido), texto branco */
.qm-manifesto-faixa { background: var(--marca-laranja); }
.qm-manifesto-faixa h1 { color: #fff; }
.qm-manifesto-faixa p { color: rgba(255, 255, 255, .92); }
.qm-manifesto-faixa .secao__eyebrow { color: #fff; }
.qm-manifesto-faixa .secao__eyebrow::before { background: #fff; }

.qm-rota { margin-bottom: 40px; }
.qm-rota:last-child { margin-bottom: 0; }
.qm-rota__rotulo {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 18px;
}
.qm-rota--pedagio .qm-rota__rotulo { color: var(--texto-fraco); }
.qm-rota--direta .qm-rota__rotulo { color: var(--marca-laranja-contraste); }

.qm-rota__trilha { display: flex; align-items: center; }
.qm-rota__parada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 130px;
    text-align: center;
}
.qm-rota__ponto { width: 13px; height: 13px; border-radius: 50%; background: var(--texto-fraco); }
.qm-rota--direta .qm-rota__ponto { background: var(--marca-laranja); }
.qm-rota__texto { font-weight: 700; font-size: .86rem; color: var(--texto); }

.qm-rota__trecho {
    flex-grow: 1;
    position: relative;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--linha) 0 8px, transparent 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.qm-rota__trecho--pedagio { min-width: 70px; }
.qm-rota__pedagio-icone {
    width: 22px; height: 22px;
    background: var(--fundo);
    color: var(--texto-fraco);
    position: relative;
    z-index: 1;
    padding: 0 4px;
    box-sizing: content-box;
}
.qm-rota__pedagio-tag {
    position: absolute;
    top: -24px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: .68rem;
    color: var(--alerta);
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}
.qm-rota__legenda { margin: 16px 0 0; font-size: .85rem; color: var(--texto-suave); }

.qm-rota__trecho--livre { background-image: none; background-color: var(--marca-laranja); height: 3px; min-width: 90px; }
.qm-rota__carro {
    position: absolute;
    left: 0;
    width: 24px; height: 24px;
    box-sizing: border-box;
    padding: 4px;
    background: var(--marca-azul-escuro);
    color: #fff;
    border-radius: 50%;
    animation: qmCarroAndar 3s ease-in-out infinite;
}
@keyframes qmCarroAndar {
    0%, 6%   { left: 0; }
    50%      { left: calc(100% - 24px); }
    94%, 100% { left: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
    .qm-rota__carro { animation: none; left: calc(50% - 12px); }
}

@media (max-width: 720px) {
    .qm-rota__trilha, .qm-rota__trilha--direta { flex-direction: column; align-items: flex-start; gap: 4px; }
    .qm-rota__parada { flex-direction: row; width: auto; text-align: left; gap: 10px; padding: 4px 0; }
    .qm-rota__trecho { width: 2px; height: 34px; min-width: 0; margin-left: 6px; background-image: repeating-linear-gradient(180deg, var(--linha) 0 8px, transparent 8px 16px); }
    .qm-rota__trecho--livre { background-image: none; width: 3px; }
    .qm-rota__pedagio-tag { top: 50%; left: 26px; transform: translateY(-50%); }
    .qm-rota__carro { left: -3px; top: 0; animation-name: qmCarroAndarVertical; }
    @keyframes qmCarroAndarVertical {
        0%, 6%   { top: 0; }
        50%      { top: calc(100% - 24px); }
        94%, 100% { top: calc(100% - 24px); }
    }
}

/* Selo de credenciamento — carimbo, nao icone generico de "verificado" */
.qm-credenciamento { display: flex; align-items: center; gap: 32px; }
.qm-selo {
    width: 108px; height: 108px;
    flex-shrink: 0;
    border: 3px dashed var(--marca-laranja-contraste);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
}
.qm-selo__texto {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    line-height: 1.35;
    color: var(--marca-laranja-contraste);
}
@media (max-width: 640px) {
    .qm-credenciamento { flex-direction: column; text-align: center; gap: 20px; }
}

/* Dois caminhos pra anunciar: loja ou pessoa fisica */
.qm-ecossistema { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.qm-ecossistema__cartao {
    background: var(--fundo-card);
    border: 1px solid var(--linha);
    border-radius: var(--raio-grande);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 19, 56, .05);
}
.qm-ecossistema__cartao--laranja { background: var(--marca-laranja-suave); border-color: #FFD9B8; }
.qm-ecossistema__rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--marca-azul); }
.qm-ecossistema__cartao--laranja .qm-ecossistema__rotulo { color: var(--marca-laranja-contraste); }
.qm-ecossistema__cartao h3 { margin: 2px 0 4px; font-size: 1.1rem; }
.qm-ecossistema__cartao p { color: var(--texto-suave); font-size: .92rem; margin: 0; }
.qm-ecossistema__link { font-weight: 700; font-size: .88rem; margin-top: 8px; color: var(--marca-azul); }
.qm-ecossistema__cartao--laranja .qm-ecossistema__link { color: var(--marca-laranja-contraste); }
@media (max-width: 720px) {
    .qm-ecossistema { grid-template-columns: 1fr; }
}

/* Citacao de fechamento */
.qm-citacao { text-align: center; }
.qm-citacao__aspas {
    display: block;
    font-family: var(--fonte-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--marca-laranja-suave);
    margin-bottom: -20px;
}
.qm-citacao__texto {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--marca-azul-escuro);
    line-height: 1.28;
    letter-spacing: -.01em;
    max-width: 26ch;
    margin: 0 auto;
}

/* Thread de mensagens dos tickets de suporte -------------------------- */
.ticket-thread { display: flex; flex-direction: column; gap: 14px; }
.ticket-msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--fundo-abafado);
}
.ticket-msg--admin {
    align-self: flex-start;
    background: rgba(0, 33, 90, .06);
    border: 1px solid rgba(0, 33, 90, .12);
}
.ticket-msg--usuario {
    align-self: flex-end;
    background: rgba(254, 97, 1, .07);
    border: 1px solid rgba(254, 97, 1, .15);
}
.ticket-msg__topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
    font-size: .85rem;
}
.ticket-msg__topo strong { color: var(--texto); }
.ticket-msg__data { color: var(--texto-suave); font-size: .78rem; white-space: nowrap; }
.ticket-msg__texto { margin: 0; color: var(--texto); line-height: 1.5; white-space: pre-wrap; }
@media (max-width: 640px) {
    .ticket-msg { max-width: 100%; }
}

/* Barras/legenda/faixa empilhada do painel de Google Analytics -------- */
.ga-barras { display: flex; flex-direction: column; gap: 14px; }
.ga-barra-item__topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .85rem;
    margin-bottom: 6px;
}
.ga-barra-item__rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--texto);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}
.ga-barra-item__valor { color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-barra-trilha {
    height: 8px;
    background: var(--fundo-abafado);
    border-radius: 99px;
    overflow: hidden;
}
.ga-barra-trilha span { display: block; height: 100%; border-radius: 99px; }
.ga-chip { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ga-empilhada {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--fundo-abafado);
}
.ga-empilhada span { display: block; height: 100%; }
.ga-legenda { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
.ga-legenda__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--texto-suave);
}