/* ══════════════════════════════════════════════════════════
   ROOT DE CORES - TODAS AS CORES CENTRALIZADAS AQUI
   COM SUFIXO "v" PARA EVITAR CONFLITOS
   ══════════════════════════════════════════════════════════ */
:root {
    /* Cores principais */
    --redv: #e8192c;
    --red-hoverv: #c41222;
    --red-lightv: #fff0f1;

    /* Cores de fundo */
    --bg-primaryv: #1a1a2e;
    --bg-secondaryv: #2a2a4a;
    --bg-cardv: #1a1a2e;
    --bg-whitev: #ffffff;
    --bg-lightv: #f4f4f8;
    --bg-overlayv: rgba(0,0,0,.42);
    --bg-modalv: rgba(0,0,0,.5);
    --bg-sheetv: rgba(35,47,62,.9);
    --bg-sheet-lightv: rgba(255,255,255,0.15);

    /* Cores de borda */
    --border-primaryv: #3a3a5a;
    --border-lightv: #e0e0e0;
    --border-cardv: #3a3a5a;

    /* Cores de texto */
    --text-primaryv: #ffffff;
    --text-secondaryv: #ccccee;
    --text-mutedv: #aaaacc;
    --text-subv: #8888aa;
    --text-darkv: #000000;
    --text-grayv: #666666;
    --text-lightv: #444444;

    /* Cores de destaque */
    --highlight-bluev: #08b5c8;
    --highlight-greenv: #22c55e;
    --highlight-yellowv: #facc15;
    --highlight-goldv: #ffdd00;

    /* Cores de ação */
    --whatsappv: #25d366;
    --whatsapp-hoverv: #1ebe5c;

    /* Cores de estado */
    --successv: #22c55e;
    --warningv: #facc15;
    --errorv: #e8192c;

    /* Cores de overlay */
    --overlay-darkv: rgba(0,0,0,.3);
    --overlay-lightv: rgba(255,255,255,.05);
    --overlay-mediumv: rgba(255,255,255,.15);
    --overlay-strongv: rgba(255,255,255,.25);
    --overlay-transparentv: rgba(255,255,255,.08);

    /* Cores de sombra */
    --shadow-lightv: rgba(0,0,0,.06);
    --shadow-mediumv: rgba(0,0,0,.2);
    --shadow-strongv: rgba(0,0,0,.3);
    --shadow-glowv: rgba(16,185,129,.35);
    --shadow-glow-softv: rgba(16,185,129,.2);

    /* Cores de ícone */
    --icon-lightv: #fff;
    --icon-mutedv: #aaaacc;

    /* Fontes */
    --displayv: 'Inter', sans-serif;
    --bodyv: 'Inter', sans-serif;
}



/* ══════════════════════════════════════════════════════════
   RESET E BASE - MOBILE FIRST
══════════════════════════════════════════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 1300px;
    margin: 0;
    overflow-x: hidden;
    background:#faffff;
    font-family: var(--bodyv);
}

main {
    background: #e3e3e3;
    padding: 0 3px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}
#filtros-rapidos {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    padding: 0;
    margin: 0;
}

.filtro-rapido-btn {
    background: var(--highlight-goldv);
    border: 2px solid transparent !important;
    border-radius: 16px;
    padding: 4px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-darkv);
    font-family: var(--displayv);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
    margin: 3px;
}

.filtro-rapido-btn:hover,
.filtro-rapido-btn.on {
    border-color: #e00000 !important;
}



.hero-marquee {
    background: rgba(8,181,200,.08);
    border-radius: 10px;
    padding: 12px 0;
    overflow: hidden;
    position: relative;
}

.hero-marquee-track {
    display: flex;
    gap: 30px;
    animation: pgAlimMarquee 20s linear infinite;
    white-space: nowrap;
    width: max-content;
}

.hero-marquee-track:hover {
    animation-play-state: paused;
}

.hero-marquee-item {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--highlight-bluev);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Cinzel', serif;
    flex-shrink: 0;
}

@keyframes pgAlimMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* ══════════════════════════════════════════════════════════
   HEADER UNIFICADO - MOBILE FIRST
══════════════════════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--bg-primaryv);
    border-bottom: 1px solid var(--border-primaryv);
    box-shadow: 0 2px 8px var(--shadow-strongv);
}

.site-header--light {
    background: var(--bg-whitev);
    border-bottom: 1px solid var(--border-lightv);
    box-shadow: 0 2px 8px var(--shadow-lightv);
}

.site-header--light .logo-text {
    color: var(--text-darkv);
}

.site-header--light .logo-text span {
    color: var(--redv);
}

.header-top {
    max-width: 100%;
    margin: 0 auto;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
}

.logo-text {
    font-family: var(--displayv);
    font-size: 0.85rem;
    letter-spacing: .06em;
    color: var(--text-primaryv);
    font-weight: 900;
    font-style: italic;
}

.logo-text span {
    color: var(--redv);
}

.logo-img {
    height: 18px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.btn-sos,
.btn-alimentacao {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--redv);
    color: var(--text-primaryv);
    font-family: var(--displayv);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .25rem .5rem;
    border-radius: 16px;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-sos:active,
.btn-alimentacao:active {
    opacity: .7;
}

/* ══════════════════════════════════════════════════════════
   GPS - MOBILE FIRST
══════════════════════════════════════════════════════════ */
.gps-mini {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: .3rem .8rem;
    font-family: var(--displayv);
    font-size: 0.55rem;
    color: var(--text-mutedv);
    background: var(--bg-primaryv);
}

.gps-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--highlight-yellowv);
    transition: background .3s;
    flex-shrink: 0;
}

.gps-dot.ativo {
    background: var(--successv);
}

/* ══════════════════════════════════════════════════════════
   CARD - ÚNICO, CLARO, PRA TODAS AS PÁGINAS
   (100% em variáveis "v" — nada de var(--red)/var(--muted)
   soltos, senão a página que não redeclarar esses nomes
   sem "v" no <style> local fica sem cor/fonte)
══════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-whitev) !important;
  border: 1px solid var(--border-lightv) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 4px 10px var(--shadow-lightv);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
  color: var(--text-darkv) !important;
}

.card:hover { box-shadow: 0 8px 16px var(--shadow-mediumv); }

.card-image {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: var(--bg-lightv);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 10px 5px 4px;
}

.card-categoria {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--redv);
  margin-bottom: 4px;
}

.card-name {
  font-family: var(--displayv);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-darkv);
  margin-bottom: 4px;
}

.card-desc {
  font-size: .75rem;
  color:#3b3b3b;
  margin: 4px;
}

.card-hours {
  font-size: .68rem;
  color: var(--text-lightv);
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-hours::before {
  content: "";
  width: 12px;
  height: 12px;
  display: inline-block;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm.5-13H11v6l5.2 3.1.8-1.2-4.5-2.7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.card-endereco {
  padding: 4px 10px 0;
  border-top: 1px solid var(--border-lightv);
}

.card-endereco .addr {
  font-size: .5rem;
  color: var(--text-lightv);
}

.card-cidade {
  font-size: .55rem;
  color: #000;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-cidade::before {
  content: "";
  width: 10px;
  height: 10px;
  display: inline-block;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.card-acoes {
  padding: 8px 4px 4px;
  border-top: 1px solid var(--border-lightv);
  margin-top: 6px;
}

.card-buttons {
  display: flex;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}

.btn-insta {
  background: #de0211;
  color: #fff !important;
  font-size: 11px;
  padding: 5px 8px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
}

.btn-menu {
  background: #fff;
  border: 1px solid #a2f0fc;
  color: #08b5c8;
  font-size: 11px;
  padding: 5px 8px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
}

.btn-dots {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-mutedv);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    margin-top: -2px;
}

.btn-dots:active {
    opacity: .6;
}

/* ═══ LISTA DE CARDS - 2 COLUNAS NO MOBILE/TABLET ═══ */
ul.cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 6px;
    width: 100%;
    padding: 0;
    margin: 0;
}

ul.cards > li {
    break-inside: avoid;
    margin-bottom: 0;
    min-width: 0;
}

.estado-vazio,
.estado-erro {
    list-style: none;
    text-align: center;
    padding: 30px 15px;
    color: var(--text-subv);
    grid-column: 1 / -1;
    font-size: 0.8rem;
}

/* ═══ CARDS DO CARROSSEL - 2 COLUNAS ═══ */
.car-card {
    flex: 0 0 45%; /* 2 cards por vez no carrossel */
    width: 45%;
}

.car-card .card-image {
    height: 85px;
}

.car-card .card-categoria {
    font-size: 0.5rem !important;
}

.car-card .card-name {
    font-size: 0.55rem !important;
}

.car-card .card-titulo-row .card-name {
    -webkit-line-clamp: 1;
    font-size: 0.55rem !important;
}

.car-card .btn-dots {
    min-width: 16px !important;
    font-size: 0.6rem !important;
    padding: 1px 3px !important;
}

.car-card .card-content {
    padding: 5px 4px 2px !important;
}

.car-card .card-desc {
    font-size: 0.45rem !important;
}

.pg-alimentacao ul.cards {
    gap: 4px;
}

/* ══════════════════════════════════════════════════════════
   TÍTULO + TRÊS PONTINHOS - SEMPRE LADO A LADO
══════════════════════════════════════════════════════════ */
.card-titulo-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.card-titulo-row .card-name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   CARROSSEL - MOBILE FIRST
══════════════════════════════════════════════════════════ */
.inf-car-outer {
    position: relative;
    padding: 0 2px;
}

.inf-car-vp {
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}

.inf-car-vp:active {
    cursor: grabbing;
}

.inf-car-track {
    display: flex;
    gap: 4px;
    will-change: transform;
}

.inf-car-track.is-smooth {
    transition: transform .42s cubic-bezier(.25,.8,.25,1);
}

.inf-car-track.is-dragging {
    transition: none;
}

.car-card,
.partner-card {
    flex: 0 0 45%; /* 2 cards por vez */
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   DIVISOR ENTRE FILTROS E GRADE DE CARDS
══════════════════════════════════════════════════════════ */
.divisor-filtros {
    border: none;
    border-top: 1px solid var(--border-lightv);
    margin: 4px 0 12px;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════
   CARREGAR MAIS (substitui a paginação numerada)
══════════════════════════════════════════════════════════ */
.wrap-carregar-mais {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}

.btn-carregar-mais {
    background: var(--bg-lightv);
    border: 1.5px solid var(--border-lightv);
    color: var(--text-grayv);
    font-family: var(--displayv);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 25px;
    padding: .6rem 1.4rem;
    cursor: pointer;
    transition: all .15s ease;
}

.btn-carregar-mais:hover {
    border-color: var(--redv);
    color: var(--redv);
}

.btn-carregar-mais:active {
    transform: scale(.96);
}

#chips-categoria {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.chips-scroll {
    display: flex;
    gap: .3rem;
    padding: .4rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 1400px;
    margin: 0 auto;
    cursor: grab;
    user-select: none;
}

.chips-scroll::-webkit-scrollbar {
    display: none;
}

.chips-scroll.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .2rem;
    background: var(--bg-lightv);
    border: 1.5px solid var(--border-lightv);
    border-radius: 16px;
    padding: .25rem .6rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-grayv);
    white-space: nowrap;
    transition: all .15s;
    cursor: pointer;
    user-select: none;
}

.chip:active {
    transform: scale(.95);
}

.chip.on {
    background: var(--red-lightv);
    border-color: var(--redv);
    color: var(--redv);
}

/* ══════════════════════════════════════════════════════════
   PÁGINA ALIMENTAÇÃO / SOS - MOBILE FIRST
   (classe genérica .pg-diretorio pra qualquer página de listagem)
══════════════════════════════════════════════════════════ */

.pg-alimentacao main,
.pg-sos main {
    background: var(--bg-whitev);
    padding: 0 2px;
}

/* Carrossel de chips - sem padding lateral, encosta nas bordas */
.chips-outer {
    padding: 0;
}

.chips-outer .inf-car-outer {
    padding: 0;
}

.chips-outer .inf-car-track {
    padding: 0 4px;
}

/* Chips com ícone - mobile */
.chip-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 0 0 55px;
    width: 55px;
    cursor: pointer;
}

.chip-icon .chip-circulo {
    font-size: 2rem;
    line-height: 1;
    padding: 8px 0;
    opacity: 1;
    filter: saturate(1) brightness(1) contrast(1);
    transition: all .3s ease;
}

.chip-icon .chip-texto {
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-darkv);
    font-family: var(--displayv);
    text-transform: uppercase;
    letter-spacing: .1px;
    line-height: 1.1;
    transition: all .3s ease;
}

.chip-icon.on .chip-circulo {
    opacity: 0.9;
    filter: saturate(0.4) brightness(1.3) contrast(0.8);
    transform: scale(.95);
}

.chip-icon.on .chip-texto {
    color: #848385;
    opacity: 1;
}



/* ══════════════════════════════════════════════════════════
   SHEET DO CARD - MOBILE FIRST
══════════════════════════════════════════════════════════ */
#sheet-overlay-card .mu-sheet {
    background: var(--bg-overlayv) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 25px;
}

#sheet-overlay-card .modal-handle {
    background: var(--overlay-mediumv) !important;
}

.sheet-card-imagem {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--overlay-lightv);
    margin-bottom: 10px;
}

.sheet-card-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sheet-card-imagem:empty {
    display: none;
}

.sheet-card-titulo {
    color: var(--text-primaryv);
    font-family: var(--displayv);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2px;
}

.sheet-card-subtitulo {
    color: var(--text-primaryv);
    font-family: var(--displayv);
    font-size: 0.7rem;
    text-align: center;
}

.sheet-botoes-acao {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 8px 4px 12px;
    border-bottom: 1px solid var(--overlay-transparentv);
    margin-bottom: 8px;
}

.sheet-btn-ver-mais,
.sheet-btn-fechar-sheet {
    background: var(--overlay-mediumv);
    color: var(--text-primaryv);
    border: none;
    border-radius: 25px;
    padding: 6px 20px;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
}

.sheet-btn-ver-mais:hover,
.sheet-btn-fechar-sheet:hover {
    background: var(--overlay-strongv);
}

.sheet-lista {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 3px 3px;
    width: 100%;
}

.sheet-lista .item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--displayv);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primaryv);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: default;
    padding: 0;
    width: 100%;
    text-align: left;
    line-height: 1.3;
}

.sheet-lista .item .icone {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet-lista .item svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.sheet-lista .item.acao {
    cursor: pointer;
    color: var(--text-primaryv);
}

.sheet-lista .item.acao:hover {
    color: var(--highlight-bluev);
}

.sheet-divider {
    border-bottom: 1px solid var(--overlay-transparentv);
    margin: 8px 0 6px;
    width: 100%;
}

.sheet-btn-compartilhar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    color: var(--overlay-strongv);
    font-family: var(--displayv);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 3rem;
    transition: color .2s;
}

.sheet-btn-compartilhar svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.sheet-btn-compartilhar:hover {
    color: var(--highlight-bluev);
}

/* ══════════════════════════════════════════════════════════
   MODAIS - MOBILE FIRST
══════════════════════════════════════════════════════════ */



.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-modalv);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.modal-overlay.aberto {
    display: block;
    opacity: 1;
}

.mu-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
   max-width:100%;
    max-height: 90vh;
    background: var(--bg-sheetv);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    z-index: 9999;
    box-shadow: 0 -10px 30px var(--shadow-mediumv);
    overflow-y: auto;
    box-sizing: border-box;
}

.modal-overlay.aberto .mu-sheet {
    transform: translateY(0);
}

.mu-sheet h3 {
    font-family: var(--displayv);
    color: var(--text-primaryv);
    margin-bottom: .4rem;
    font-size: 0.9rem;
}

.mu-sheet ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.mu-sheet ul li a {
    display: block;
    padding: 6px 0;
    color: var(--text-primaryv);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.mu-sheet form {
    margin-top: 0.8rem;
    display: flex;
    gap: 6px;
}

.mu-sheet form input {
    flex: 1;
    padding: 10px;
    border: 1px solid #dddde6;
    border-radius: 8px;
    font-size: 0.9rem;
}

.mu-sheet form button {
    background: var(--redv);
    color: var(--text-primaryv);
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 700;
    font-size: 0.9rem;
}

.mu-sheet p,
.mu-sheet div {
    color: var(--text-primaryv);
    font-size: 0.9rem;
}

.mu-sheet .btn-wpp-modal {
    display: inline-block;
    background: var(--whatsappv);
    color: var(--text-primaryv);
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
}

.mu-sheet-clean {
    background: var(--bg-whitev);
}

.mu-sheet-clean .modal-handle {
    background: #ddd;
}

.mu-sheet-clean h3,
.modal-title-clean {
    color: var(--text-darkv) !important;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 800;
    margin-top: .4rem;
}


/* ══════════════════════════════════════════════════════════
   MODAL PERFIL - MOBILE FIRST
══════════════════════════════════════════════════════════ */
.mu-sheet-perfil {
    color: var(--text-primaryv);
}

.mu-sheet-perfil a {
    text-decoration: none;
    color: inherit;
}

.mu-sheet-perfil .icon {
    width: 15px;
    height: 15px;
    stroke: var(--text-primaryv);
    fill: none;
    stroke-width: 2;
    padding: 0;
}

.mu-sheet-perfil .hero {
    background: #2a2d3c;
    border-radius: 16px;
    padding: 1.2rem .7rem 2.5rem;
    margin-top: .2rem;
}

.mu-sheet-perfil .badge,
.box__saiba {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #b5101f;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--text-primaryv);
    font-size: 0.7rem;
    font-weight: 700;
}

.mu-sheet-perfil .hero__title {
    margin: 0.8rem 0;
    font-size: 1.3rem;
    font-weight: 800;
    padding: 0 .5rem;
}

.mu-sheet-perfil .hero__highlight {
    color: var(--redv);
}

.mu-sheet-perfil .hero__text {
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: .5px;
    margin-bottom: 1.2rem;
    padding: 0 .5rem;
}

.mu-sheet-perfil .box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: .4rem;
    background: #1f1f1f;
    border-radius: 14px;
    padding: 0.8rem 0.8rem 1.2rem;
    margin-bottom: .6rem;
}

.mu-sheet-perfil .box--primary {
    background: #b5101f;
}

.mu-sheet-perfil .box__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--overlay-mediumv);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: .3rem;
}

.mu-sheet-perfil .box__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primaryv);
    letter-spacing: .7px;
}

.mu-sheet-perfil .box__text {
    margin: .5rem 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.mu-sheet-perfil h3.box__title {
    color: var(--text-primaryv) !important;
}

.mu-sheet-perfil .box__title,
.mu-sheet-perfil .box__text {
    text-align: left;
    letter-spacing: .5px;
}

/* ══════════════════════════════════════════════════════════
   BARRA DE RESULTADOS / BUSCA — genéricas, todas as seções
══════════════════════════════════════════════════════════ */
.results-bar {
    padding: .4rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-lightv);
    max-width: 1000px;
    margin: 0 auto;
}

.results-count {
    font-size: .72rem;
    color: var(--text-mutedv);
    font-weight: 600;
}

.results-count b {
    color: var(--text-darkv);
}

.search-input {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    background: #f4f4f8;
    border: 1.5px solid #dbd9d9;
    border-radius: 20px;
    padding: .45rem .9rem;
    font-size: .85rem;
    color: #000;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}

.search-input:focus {
    border-color: var(--redv);
}

.search-input::placeholder {
    color: var(--text-mutedv);
}

/* ══════════════════════════════════════════════════════════
   VEÍCULOS — apenas overrides de tema + o que NÃO existe acima
   (estrutura de .card, .mu-sheet, #modal-filtros, .bottom-nav,
   .filter-zone etc. já vem pronta do bloco global)
   Usa só as variáveis "v" do :root único (topo do arquivo).
══════════════════════════════════════════════════════════ */

/* ── HEADER — Veículos / ACX Motors ── */
.hdr { position:relative; top:0; background:var(--bg-whitev); max-width:100%; }
.hdr-inner { max-width:100%; margin:0 auto; padding:.5rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.logo { display:flex; align-items:center; text-decoration:none; }
.logo-nome { font-family:var(--displayv); font-size:1rem; letter-spacing:.06em; color:var(--text-darkv); line-height:1; font-weight:900; font-style:italic; }
.motors { color:var(--redv); font-weight:900; }
.hdr-actions { display:flex; align-items:center; gap:.6rem; }
.vendedor-bar, #hdr-wpp, #hdr-tel { display:none; margin:0; padding:0; }

/* ══════════════════════════════════════════════════════════
   GRID / CARDS DE VEÍCULOS
══════════════════════════════════════════════════════════ */
.grid { columns:2; column-gap:3px; width:100%; }
.vcard { break-inside:avoid; display:block; text-decoration:none; background:#fff; border:1px solid var(--border-lightv); border-radius:16px; margin-bottom:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); transition:transform .2s ease; contain:layout; }
.vcard:active { transform:scale(.97); }
.vcard-img { width:100%; height:14rem; background:var(--bg-lightv); overflow:hidden; }
.vcard-img img { width:100%; height:100%; object-fit:cover; display:block; }
.vcard-body { padding:9px 10px 11px; }
.vcard-nome { font-family:var(--displayv); font-weight:700; font-size:.78rem; color:#000; text-transform:uppercase; line-height:1.2; margin-bottom:5px; }
.vcard-motor { font-size:.65rem; color:var(--text-mutedv); margin-bottom:3px; }



.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-whitev);
  border: 1px solid #706f6f;
  padding: 3px 8px;
  border-radius: 8px;
  color: var(--text-grayv);
  line-height: 1;
}




.no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:var(--text-mutedv); }
.vcard-price { color: var(--redv); font-weight:700;}
.vcard-city { display:flex; align-items:center; gap:4px; font-size:.6rem; color:var(--text-mutedv); margin-top:6px; text-transform:uppercase; }
.empty { padding:2rem; text-align:center; color:var(--text-mutedv); font-size:.85rem; }

/* ══════════════════════════════════════════════════════════
   LAYOUT GERAL (veículos)
══════════════════════════════════════════════════════════ */
.pagina { max-width:1200px; margin:0 auto; padding:.45rem .2rem 2rem; }

.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: .7rem;
  color: var(--text-grayv);
  margin-bottom: .45rem;
}

#js-sync-btn { background:var(--bg-whitev); border:1px solid var(--border-lightv); border-radius:5px; padding:.2rem .5rem; font-size:.65rem; color:var(--text-grayv); cursor:pointer; }
#js-sync-btn:hover { border-color:var(--redv); color:var(--redv); }

.btn-topo { position:fixed; bottom:80px; right:16px; z-index:9999; background:var(--redv); color:var(--text-primaryv); border:none; border-radius:50%; width:38px; height:38px; font-size:1rem; cursor:pointer; box-shadow:0 4px 12px var(--shadow-mediumv); }

/* ══════════════════════════════════════════════════════════
   FILTER ZONE / SEARCH BAR (sticky, todas as seções de listagem)
══════════════════════════════════════════════════════════ */
.filter-zone {
    position: sticky;
    top: 0;
    z-index: 300;
    background: #fff;
    border-bottom: 1px solid var(--border-lightv);
    box-shadow: 0 2px 8px var(--shadow-lightv);
    width: 100%;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border-lightv);
}
.sort-sel{border-radius:15px;padding:3px 10px;}