/* ============================================================================
   SKIN PRESTIGE — premium/luxo (grafite + champanhe, serifa Playfair)
   Classes .pr-*. Canvas grafite FIXO pela skin (identidade "luxo"); herda só o
   ACENTO do tema do cliente (champanhe = fallback). Consome as CSS vars geradas
   (variaveis.css) só para o acento/botões — NÃO segue --main-bg-color/text (um
   cliente de tema escuro quebraria a identidade). Ver skill template-skins.
   ========================================================================== */

.pr {
  /* Acento herdado do tema (fallback champanhe do handoff) */
  --acc:   var(--main-primary-color, #C7A667);
  /* ⭐ O acento quando ele é TEXTO sobre o grafite fixo desta skin. `--acc` continua
     valendo para FUNDO (aí quem muda é a tinta, `--*-ink`). Marca escura escrevia o
     preço e o botão fantasma em 1,8:1 aqui dentro. A variante é gerada junto da cor,
     preserva o matiz e devolve a própria cor quando ela já passa — o #C7A667 de
     referência desta skin não muda um bit. */
  --acc-fg: var(--main-primary-color-on-dark, var(--main-primary-color, #C7A667));
  --acc2:  var(--main-secondary-color, var(--acc));
  --btn:   var(--button-color, var(--acc));
  --btn-h: var(--button-hover-color, color-mix(in srgb, var(--btn) 82%, #000));

  /* Canvas FIXO da skin */
  --pr-bg:   #0E0F12;
  --pr-sec:  #0B0C0E;
  --pr-foot: #08090B;
  --pr-card: #16181D;
  --pr-tx:   #EDEDEA;
  --pr-tx2:  #9A9A93;
  --pr-tx3:  #7D7D76;
  --pr-bd:   color-mix(in srgb, var(--acc) 16%, transparent);
  --pr-bd-s: color-mix(in srgb, var(--acc) 26%, transparent);

  --pr-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pr-sans:  'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  background: var(--pr-bg);
  color: var(--pr-tx);
  font-family: var(--pr-sans);
  margin: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
.pr a { color: inherit; text-decoration: none; }
.pr img { max-width: 100%; display: block; }
.pr h1, .pr h2, .pr h3 { font-family: var(--pr-serif); font-weight: 600; margin: 0; letter-spacing: .01em; }

/* Container WIDE (padrão de todas as skins novas) */
.pr-wrap { width: 92%; max-width: 1600px; margin: 0 auto; }

/* Kicker champanhe uppercase tracking largo */
.pr-kicker {
  font-family: var(--pr-sans);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--acc-fg);
  margin-bottom: .5rem;
}

/* Régua fina champanhe (divisória de seção) */
.pr-rule { width: 64px; height: 1px; background: var(--acc); opacity: .8; margin: 14px auto 0; }

/* ---------- HEADER ---------- */
.pr-header { background: var(--pr-sec); border-bottom: 1px solid var(--pr-bd); }
.pr-header__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 0 16px; position: relative; }
.pr-brand { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pr-brand__logo { max-height: 62px; width: auto; }
.pr-brand__kicker { text-transform: uppercase; letter-spacing: .42em; font-size: .72rem; font-weight: 700; color: var(--acc-fg); }
.pr-brand__name { font-family: var(--pr-serif); font-size: 1.7rem; font-weight: 600; color: var(--pr-tx); }
.pr-nav { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.pr-nav a {
  text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 600;
  color: var(--pr-tx2); padding: 6px 2px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.pr-nav a:hover { color: var(--pr-tx); border-bottom-color: var(--acc-fg); }
.pr-nav-toggle { display: none; position: absolute; right: 0; top: 22px; background: none; border: 0; color: var(--pr-tx); font-size: 1.5rem; cursor: pointer; }

/* ---------- BOTÕES ---------- */
.pr-btn {
  display: inline-block; font-family: var(--pr-sans); text-transform: uppercase; letter-spacing: .14em;
  font-size: .74rem; font-weight: 700; padding: 13px 26px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--acc); transition: background .2s, color .2s, border-color .2s; text-align: center;
}
.pr-btn--accent { background: var(--btn); color: var(--button-color-ink, #12100B); border-color: var(--btn); }
.pr-btn--accent:hover { background: var(--btn-h); border-color: var(--btn-h); }
.pr-btn--ghost { background: transparent; color: var(--acc-fg); }
.pr-btn--ghost:hover { background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--pr-tx); }
.pr-btn--block { display: block; width: 100%; }
.pr-btn--sm { padding: 9px 16px; }

/* ---------- HERO (home) ---------- */
.pr-hero { background: var(--pr-bg); padding: 54px 0 40px; text-align: center; }
.pr-hero__title { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.12; color: var(--pr-tx); max-width: 20ch; margin: 0 auto; }
.pr-hero__banner { margin-top: 30px; border: 1px solid var(--pr-bd); border-radius: 4px; overflow: hidden; }
.pr-hero__banner img { width: 100%; height: auto; display: block; }
.pr-hero__banner.is-empty { aspect-ratio: 16 / 5; display: flex; align-items: center; justify-content: center; color: var(--pr-tx3); font-size: .8rem; letter-spacing: .1em; }
/* Banner slider (componente): dots/hover das setas no acento champanhe da skin. */
.pr .bnr { --bnr-accent: var(--acc); }

/* ---------- SEÇÕES ---------- */
.pr-section { padding: 46px 0; }
.pr-section--sec { background: var(--pr-sec); }
.pr-section__head { text-align: center; margin-bottom: 30px; }
.pr-section__head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--pr-tx); }
.pr-empty { text-align: center; color: var(--pr-tx2); padding: 30px 0; }
.pr-center { text-align: center; margin-top: 30px; }

/* ---------- GRID + CARD ---------- */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.pr-card {
  display: flex; flex-direction: column; background: var(--pr-card); border: 1px solid var(--pr-bd);
  border-radius: 4px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pr-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.5); border-color: var(--pr-bd-s); }
.pr-card__media { position: relative; aspect-ratio: 4 / 3; background: #101216; overflow: hidden; }
.pr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pr-card__tag {
  position: absolute; top: 12px; left: 12px; background: var(--acc); color: var(--main-primary-color-ink, #12100B);
  text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; font-weight: 700; padding: 4px 9px; border-radius: 2px;
}
.pr-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.pr-card__name { font-family: var(--pr-serif); font-size: 1.18rem; color: var(--pr-tx); }
.pr-card__ver { color: var(--pr-tx2); font-size: .84rem; }
.pr-card__meta { color: var(--pr-tx3); font-size: .8rem; margin-top: 2px; }
.pr-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pr-bd); }
.pr-card__price { font-family: var(--pr-serif); font-size: 1.25rem; color: var(--acc-fg); font-weight: 600; }
.pr-card__cta { text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; color: var(--acc-fg); border-bottom: 1px solid var(--acc); padding-bottom: 2px; }

/* ---------- ESTOQUE: filtros horizontais + list rows ---------- */
.pr-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--pr-card); border: 1px solid var(--pr-bd); border-radius: 4px; padding: 14px; margin-bottom: 22px; }
.pr-filters select, .pr-filters input[type=text] {
  background: var(--pr-bg); color: var(--pr-tx); border: 1px solid var(--pr-bd); border-radius: 3px;
  padding: 10px 12px; font-family: var(--pr-sans); font-size: .85rem; min-width: 130px;
}
.pr-filters input[type=text] { flex: 1 1 200px; }
.pr-filters select:focus, .pr-filters input:focus { outline: none; border-color: var(--acc-fg); }

.pr-stock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pr-stock__count { color: var(--pr-tx2); font-size: .86rem; letter-spacing: .04em; }
.pr-viewtoggle { display: inline-flex; border: 1px solid var(--pr-bd); border-radius: 3px; overflow: hidden; }
.pr-viewtoggle__btn { background: transparent; border: 0; padding: 7px 10px; color: var(--pr-tx3); cursor: pointer; display: flex; }
.pr-viewtoggle__btn svg { fill: currentColor; }
.pr-viewtoggle__btn.is-active { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc-fg); }

.pr-results[data-view="list"] .pr-grid { display: none; }
.pr-results[data-view="cards"] .pr-list { display: none; }
.pr-list { display: flex; flex-direction: column; gap: 12px; }
.pr-row { display: flex; gap: 18px; align-items: center; background: var(--pr-card); border: 1px solid var(--pr-bd); border-radius: 4px; padding: 12px; transition: border-color .2s, transform .2s; }
.pr-row:hover { border-color: var(--pr-bd-s); transform: translateX(2px); }
.pr-row__media { flex: 0 0 190px; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; background: #101216; }
.pr-row__media img { width: 100%; height: 100%; object-fit: cover; }
.pr-row__body { flex: 1 1 auto; min-width: 0; }
.pr-row__name { font-family: var(--pr-serif); font-size: 1.2rem; color: var(--pr-tx); }
.pr-row__meta { color: var(--pr-tx3); font-size: .82rem; margin-top: 3px; }
.pr-row__price { font-family: var(--pr-serif); font-size: 1.2rem; color: var(--acc-fg); margin-top: 8px; }

/* Paginação */
.pr-pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 30px; }
.pr-pager__num, .pr-pager__nav { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pr-bd); border-radius: 3px; color: var(--pr-tx2); font-size: .85rem; }
.pr-pager__num.is-current { background: var(--acc); color: var(--main-primary-color-ink, #12100B); border-color: var(--acc-fg); }
.pr-pager__dots { color: var(--pr-tx3); padding: 0 4px; }

/* ---------- PÁGINA DO VEÍCULO ---------- */
.pr-veh { padding: 34px 0 50px; }
.pr-crumb { color: var(--pr-tx3); font-size: .8rem; margin-bottom: 20px; }
.pr-crumb a:hover { color: var(--acc-fg); }
.pr-crumb__cur { color: var(--pr-tx2); }
.pr-veh__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; }
.pr-gallery__main { aspect-ratio: 4 / 3; background: #101216; border: 1px solid var(--pr-bd); border-radius: 4px; overflow: hidden; }
.pr-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pr-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pr-thumb { padding: 0; border: 1px solid var(--pr-bd); border-radius: 3px; overflow: hidden; background: #101216; aspect-ratio: 4 / 3; cursor: pointer; }
.pr-thumb.is-active { border-color: var(--acc-fg); }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pr-veh__name { font-size: 2rem; color: var(--pr-tx); }
.pr-veh__ver { color: var(--pr-tx2); margin-top: 2px; }
.pr-veh__price { font-family: var(--pr-serif); font-size: 2rem; color: var(--acc-fg); font-weight: 600; margin: 16px 0 20px; }
.pr-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.pr-specs__cell { border: 1px solid var(--pr-bd); border-radius: 3px; padding: 11px 13px; }
.pr-specs__k { text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; color: var(--pr-tx3); }
.pr-specs__v { color: var(--pr-tx); font-weight: 600; margin-top: 3px; }
.pr-cta-wa { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--btn); color: var(--button-color-ink, #12100B); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; padding: 14px; border-radius: 3px; margin-bottom: 12px; }
.pr-cta-wa i { font-style: normal; display: inline-block; animation: pr-swing 2.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes pr-swing { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-10deg); } 90% { transform: rotate(6deg); } }
.pr-prose { color: var(--pr-tx2); }
.pr-veh__obs { margin-top: 30px; }
.pr-veh__obs h2 { font-size: 1.4rem; margin-bottom: 10px; }

/* ---------- FORMULÁRIOS (contato/ficha/venda) ---------- */
.pr-form { background: var(--pr-card); border: 1px solid var(--pr-bd); border-radius: 4px; padding: 24px; }
.pr-field { margin-bottom: 16px; }
.pr-field label { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: var(--pr-tx3); margin-bottom: 6px; }
.pr-field input, .pr-field select, .pr-field textarea {
  width: 100%; background: var(--pr-bg); color: var(--pr-tx); border: 1px solid var(--pr-bd);
  border-radius: 3px; padding: 11px 12px; font-family: var(--pr-sans); font-size: .9rem;
}
.pr-field input:focus, .pr-field select:focus, .pr-field textarea:focus { outline: none; border-color: var(--acc-fg); }
.pr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-radios { display: flex; flex-wrap: wrap; gap: 14px; }
.pr-radio { display: inline-flex; align-items: center; gap: 6px; color: var(--pr-tx2); font-size: .88rem; }
.pr-reg__section { margin-bottom: 22px; }
.pr-reg__section-title { font-family: var(--pr-serif); font-size: 1.2rem; color: var(--acc-fg); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--pr-bd); }
.pr-reg__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-field--full { grid-column: 1 / -1; }
.pr-alert { border-radius: 3px; padding: 12px 14px; margin-bottom: 16px; font-size: .9rem; }
.pr-alert--ok { background: color-mix(in srgb, #2e7d5b 22%, var(--pr-card)); border: 1px solid #2e7d5b; color: #d9f2e6; }
.pr-alert--err { background: color-mix(in srgb, #a13b3b 22%, var(--pr-card)); border: 1px solid #a13b3b; color: #f5dcdc; }
.pr-flash { background: color-mix(in srgb, #a13b3b 22%, var(--pr-card)); border: 1px solid #a13b3b; color: #f5dcdc; border-radius: 3px; padding: 10px 14px; margin: 16px 0; }

/* ---------- ABOUT / CONTATO ---------- */
.pr-about, .pr-contact, .pr-reg, .pr-faq { padding: 40px 0 50px; }
.pr-about__title, .pr-contact__title, .pr-reg__title, .pr-faq__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--pr-tx); margin-bottom: 18px; }
.pr-about__text { color: var(--pr-tx2); max-width: 68ch; margin-bottom: 26px; }
.pr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pr-info-card { background: var(--pr-card); border: 1px solid var(--pr-bd); border-radius: 4px; padding: 20px; }
.pr-info-card__lines { color: var(--pr-tx2); font-size: .92rem; line-height: 1.9; margin: 8px 0 14px; }
.pr-info-card__lines a:hover { color: var(--acc-fg); }

/* ---------- FAQ ---------- */
.pr-faq__wrap { max-width: 860px; }
.pr-faq__list { display: flex; flex-direction: column; gap: 10px; }
.pr-faq__item { background: var(--pr-card); border: 1px solid var(--pr-bd); border-radius: 4px; padding: 4px 18px; }
.pr-faq__q { font-family: var(--pr-serif); font-size: 1.08rem; color: var(--pr-tx); padding: 14px 0; cursor: pointer; list-style: none; }
.pr-faq__q::-webkit-details-marker { display: none; }
.pr-faq__item[open] .pr-faq__q { color: var(--acc-fg); }
.pr-faq__a { color: var(--pr-tx2); padding: 0 0 16px; }
/* Título da seção (tema) — só existe quando o cliente agrupa as perguntas. */
.pr-faq__cat { font-family: var(--pr-serif); font-size: 1.35rem; color: var(--acc-fg); margin: 24px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--pr-bd); }
.pr-faq__cat:first-child { margin-top: 0; }

/* ---------- FOOTER ---------- */
.pr-footer { background: var(--pr-foot); border-top: 1px solid var(--pr-bd); margin-top: 20px; }
.pr-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; padding: 44px 0 30px; }
.pr-footer__brand { font-family: var(--pr-serif); font-size: 1.4rem; color: var(--pr-tx); margin-bottom: 10px; }
.pr-footer__desc { color: var(--pr-tx3); font-size: .88rem; max-width: 42ch; }
.pr-footer__label { text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--acc-fg); margin-bottom: 12px; }
.pr-footer__lines { color: var(--pr-tx2); font-size: .9rem; line-height: 1.9; }
.pr-footer__lines a:hover { color: var(--acc-fg); }
.pr-footer__social { display: flex; gap: 10px; margin-top: 4px; }
.pr-footer__social .icon { width: 38px; height: 38px; border: 1px solid var(--pr-bd); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0; color: var(--pr-tx2); background-size: 18px 18px; background-repeat: no-repeat; background-position: center; }
.pr-footer__social .icon:hover { border-color: var(--acc-fg); }
.pr-footer__bar { border-top: 1px solid var(--pr-bd); padding: 16px 0; }
.pr-footer__bar .pr-wrap { color: var(--pr-tx3); font-size: .78rem; text-align: center; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 860px) {
  .pr-nav-toggle { display: block; }
  .pr-nav { display: none; width: 100%; flex-direction: column; gap: 4px; margin-top: 8px; }
  .pr-nav.is-open { display: flex; }
  .pr-nav a { padding: 10px 0; border-bottom: 1px solid var(--pr-bd); }
  .pr-veh__grid { grid-template-columns: 1fr; }
  .pr-footer__grid { grid-template-columns: 1fr; gap: 22px; }
  .pr-grid-2, .pr-field-row, .pr-reg__fields { grid-template-columns: 1fr; }
  .pr-row { flex-direction: column; align-items: stretch; }
  .pr-row__media { flex-basis: auto; }
}

/* ============================================================================
 * ⚠️ BOTÃO QUE É <a> PERDE A COR DO TEXTO — o reset `.pr a { color: inherit }` (0-1-1:
 * classe + tipo) VENCE as regras de botão (0-1-0). O sintoma é contraste ~1,7:1 no CTA
 * (texto do canvas sobre o fundo do botão) e o CSS "diz" a cor certa algumas linhas acima —
 * marcador de HTML não vê contraste; só a cor COMPUTADA no navegador denuncia.
 * Achado ao auditar a classic (27/08); vale para as quatro skins de layout próprio.
 * ==========================================================================*/
.pr a.pr-btn--accent { color: var(--button-color-ink, #12100B); }
.pr a.pr-btn--ghost { color: var(--acc-fg); }
.pr a.pr-btn--ghost:hover { color: var(--pr-tx); }
.pr a.pr-cta-wa { color: var(--button-color-ink, #12100B); }

/* ─── Auditoria do item 11 (2026-08-28): o que a skin oferecia e não desenhava ─────────── */

/* ⚠️ `.icon__<rede>` mora no `index.css`, que esta skin NÃO carrega. O `.icon` daqui já tinha
   `font-size:0` (some a palavra) mas nenhuma imagem — então os links de rede social do cliente
   eram CÍRCULOS VAZIOS: clicáveis, invisíveis. Pior que a palavra crua, que ao menos se lia. */
.pr-footer__social .icon__instagram { background-image: url(../img/icons/instagram-color.svg); }
.pr-footer__social .icon__facebook  { background-image: url(../img/icons/facebook-color.svg); }
.pr-footer__social .icon__youtube   { background-image: url(../img/icons/youtube-color.svg); }
.pr-footer__social .icon__tiktok    { background-image: url(../img/icons/tiktok-white.svg); }

/* Logo da marca no card/linha (`show_card_brand_logo`, opt-out do cliente). */
.pr-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr-card__brand,
.pr-row__brand { height: 20px; width: auto; opacity: .85; flex: 0 0 auto; }
.pr-row__meta { display: flex; align-items: center; gap: 10px; }

/* Badge da carroceria/tipo também na visão LISTA — na de cards ela já existia, e um badge que
   aparece só numa visão faz o toggle parecer intermitente. */
.pr-row__media { position: relative; }
.pr-row__tag {
    position: absolute; top: 8px; left: 8px; background: var(--acc); color: var(--main-primary-color-ink, #12100B);
    text-transform: uppercase; letter-spacing: .1em; font-size: .58rem; font-weight: 700;
    padding: 3px 8px; border-radius: 2px;
}

/* Card da página do Facebook (rodapé e contato): o partial traz o próprio SDK; aqui só o
   espaçamento. O iframe do Facebook tem largura própria — `max-width` impede o estouro. */
.pr-footer__fb, .pr-fb-card { margin: 12px 0; max-width: 100%; overflow: hidden; }