/* =====================================================================
   REI DOS ACESSÓRIOS — folha de estilo principal
   Identidade: PRETO + AMARELO (coroa dourada, verde só pontual).
   Layout em blocos de cor sólida alternados, tipografia condensada
   em caixa alta, cantos retos (2–4px). Sem glass, sem neon, sem blur.

   Sumário
   01. Tokens
   02. Reset e base
   03. Tipografia e utilitários
   04. Layout: container, seções, faixas, cabeçalhos
   05. Botões
   06. Header, navegação, menu mobile e status
   07. Hero
   08. Palco 3D do carro (stage)
   09. Faixa de confiança (trust)
   10. Categorias (cat)
   11. Simulador "Monte seu carro"
   12. Vitrine de produtos (chips / feed / post)
   13. Faixa "troca na hora" (swap)
   14. A loja (about)
   15. FAQ (acordeão)
   16. Localização e contato
   17. CTA final
   18. Rodapé
   19. FAB WhatsApp
   20. Toasts, reveal, foco e movimento reduzido

   Breakpoints (mobile-first): 520 · 768 · 980 · 1024 · 1280
   ===================================================================== */


/* =====================================================================
   01. TOKENS
   ===================================================================== */
:root {
  /* Cores base */
  --black: #0B0B0C;
  --black-2: #141416;
  --black-3: #1C1C20;

  --yellow: #F2E200;
  --yellow-600: #D9CB00;
  --green: #00A651;              /* verde da marca — uso MUITO pontual */

  --white: #FFFFFF;
  --gray-50: #F5F5F6;
  --gray-100: #EBEBED;
  --gray-400: #9A9AA2;
  --gray-600: #5A5A63;

  --line-dark: rgba(255, 255, 255, .12);
  --line-light: rgba(0, 0, 0, .10);

  /* Medidas */
  --maxw: 1200px;
  --radius: 4px;

  /* Tipografia */
  --font-title: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Apoio */
  --whats: #25D366;
  --amber: #F6A609;
  --red: #E23B2E;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t: 180ms var(--ease);

  /* Respiro vertical das seções (cresce com a viewport) */
  --section-y: clamp(52px, 8vw, 104px);
  --gutter: 20px;

  /* Altura do header, usada em scroll-margin e no menu mobile */
  --header-h: 64px;
}


/* =====================================================================
   02. RESET E BASE
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
  background: var(--black);
  overflow-x: hidden;            /* zero scroll horizontal em 360px */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img { height: auto; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button { cursor: pointer; }

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

ul, ol { list-style: none; }

/* Âncoras não ficam escondidas atrás do header fixo */
section[id],
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Classe legada do layout anterior: neutralizada de propósito */
.glass { background: none; backdrop-filter: none; }


/* =====================================================================
   03. TIPOGRAFIA E UTILITÁRIOS
   ===================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}

strong, b { font-weight: 700; }

/* Amarelo sobre fundo ESCURO (passa AA com folga) */
.y { color: var(--yellow); }

/*
  Amarelo sobre fundo CLARO não passa contraste de texto.
  Solução: o texto continua preto e o amarelo vira marca-texto
  (filete espesso embaixo). Legível e 100% dentro da identidade.
*/
.y-dark {
  color: inherit;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% .30em;
  background-position: 0 88%;
  padding-inline: .06em;
}

.muted { color: var(--gray-600); }
.section--dark .muted,
.hero .muted,
.site-footer .muted { color: var(--gray-400); }

.eyebrow {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--yellow);
  margin-bottom: 14px;
}

/* Link de pulo (acessibilidade) */
.skip-link {
  position: fixed;
  top: -200px;
  left: 12px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--yellow);
  color: #000;
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: top var(--t);
}
.skip-link:focus { top: 12px; }


/* =====================================================================
   04. LAYOUT: CONTAINER, SEÇÕES, FAIXAS, CABEÇALHOS
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + env(safe-area-inset-left))
                  calc(var(--gutter) + env(safe-area-inset-right));
}

.container--narrow { max-width: 760px; }

/* Blocos de cor sólida alternados */
.section,
.band {
  position: relative;
  padding-block: var(--section-y);
}

.section--dark {
  background: var(--black);
  color: var(--white);
}

.section--light {
  background: var(--white);
  color: var(--black);
}

.section--gray {
  background: var(--gray-50);
  color: var(--black);
}

.band--yellow {
  background: var(--yellow);
  color: #000;
}

/* Rótulo "01 · Hero" — alinhado à direita, tracking largo */
.section__index {
  display: block;
  text-align: right;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: clamp(24px, 4vw, 40px);
}

.section__index--dark { color: var(--gray-600); }
.band--yellow .section__index--dark { color: rgba(0, 0, 0, .55); }

/* Cabeçalho de seção */
.section__head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 4.5vw, 48px);
}

.section__head--compact { margin-bottom: clamp(22px, 3.5vw, 36px); }

.section__title {
  font-size: clamp(1.8rem, 5.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
}

.section__lead {
  margin-top: 16px;
  font-size: clamp(.95rem, 2.4vw, 1.05rem);
  line-height: 1.65;
  color: var(--gray-600);
  max-width: 56ch;
}

.section--dark .section__lead { color: var(--gray-400); }
.band--yellow .section__lead { color: rgba(0, 0, 0, .72); }

@media (min-width: 980px) {
  .section__index { font-size: 12px; }
}


/* =====================================================================
   05. BOTÕES
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t), color var(--t),
              border-color var(--t), transform var(--t);
  -webkit-tap-highlight-color: transparent;
}

.btn svg { width: 18px; height: 18px; flex: none; }
.btn i { display: inline-flex; }

.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}

/* Amarelo (ação principal) */
.btn--yellow,
.btn--primary {                      /* --primary: alias legado do JS */
  background: var(--yellow);
  color: #000;
  border-color: var(--yellow);
}
.btn--yellow:hover,
.btn--primary:hover {
  background: var(--yellow-600);
  border-color: var(--yellow-600);
  transform: translateY(-1px);
}

/* Preto sólido */
.btn--dark {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.btn--dark:hover {
  color: var(--yellow);
  transform: translateY(-1px);
}

/* Contorno preto sobre fundo claro */
.btn--outline-dark {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn--outline-dark:hover {
  background: var(--black);
  color: var(--yellow);
  transform: translateY(-1px);
}

/* Contorno branco sobre fundo escuro */
.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .45);
}
.btn--ghost-light:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-1px);
}

/* Tamanhos */
.btn--lg {
  padding: 16px 28px;
  font-size: 15px;
}

.btn--sm {
  padding: 10px 16px;
  font-size: 12.5px;
  letter-spacing: .07em;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Botão só-ícone (usado nos cards da vitrine) */
.btn--icon {
  padding: 10px;
  width: 42px;
  height: 42px;
  background: transparent;
  color: var(--black);
  border-color: var(--line-light);
}
.btn--icon:hover {
  border-color: var(--black);
  background: var(--black);
  color: var(--yellow);
}

@media (min-width: 768px) {
  .btn { font-size: 14.5px; }
  .btn--lg { padding: 17px 32px; font-size: 16px; }
}


/* =====================================================================
   06. HEADER, NAVEGAÇÃO, MENU MOBILE E STATUS
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--black);
  border-bottom: 1px solid var(--line-dark);
  color: var(--white);
}

.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding-block: 10px;
}

.brand { display: flex; align-items: center; flex: none; }

.brand__logo {
  height: 34px;
  width: auto;
}

/* Navegação desktop */
.nav { display: none; }

.nav a {
  position: relative;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  padding-block: 6px;
  transition: color var(--t);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}

.nav a:hover { color: var(--yellow); }
.nav a:hover::after,
.nav a.is-current::after { transform: scaleX(1); }
.nav a.is-current { color: var(--yellow); }

.header__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* O CTA do header só aparece a partir do tablet */
.header__right .btn { display: none; }

/* --- Pílula de status (aberto / fechando / fechado) --- */
.status-pill {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color var(--t);
}
.status-pill:hover { border-color: rgba(255, 255, 255, .28); }

.status-pill__dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-400);
}

.status-pill__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0;
}

.status-pill__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.status-pill__text strong {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}

.status-pill__text small {
  font-size: 10.5px;
  color: var(--gray-400);
}

.status-pill[data-state="open"] .status-pill__dot {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(0, 166, 81, .55);
  animation: pulse-dot 2s infinite;
}
.status-pill[data-state="closing"] .status-pill__dot {
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(246, 166, 9, .55);
  animation: pulse-dot 2s infinite;
}
.status-pill[data-state="closed"] .status-pill__dot { background: var(--red); }
.status-pill[data-state="loading"] .status-pill__dot {
  background: var(--gray-400);
  animation: blink 1.4s infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* --- Botão hambúrguer --- */
.burger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--black-2);
}

.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: transform 220ms var(--ease), opacity 120ms linear;
}

.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Painel do menu mobile --- */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--black);
  border-top: 1px solid var(--line-dark);
  padding: 8px calc(var(--gutter) + env(safe-area-inset-left))
           calc(20px + env(safe-area-inset-bottom));
}

.mobile-menu[hidden] { display: none; }

.mobile-menu.is-open {
  display: flex;
  animation: menu-in 200ms var(--ease);
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.mobile-menu a {
  padding: 15px 2px;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu a:hover,
.mobile-menu a:active { color: var(--yellow); }

.mobile-menu__whats {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 15px 18px !important;
  background: var(--yellow);
  color: #000 !important;
  border: 0 !important;
  border-radius: var(--radius);
}
.mobile-menu__whats svg { width: 18px; height: 18px; }

/* Subidas do header */
@media (min-width: 520px) {
  .status-pill { display: inline-flex; }
}

@media (min-width: 768px) {
  :root { --header-h: 76px; }
  .brand__logo { height: 42px; }
  .header__right .btn { display: inline-flex; }
}

@media (min-width: 980px) {
  .brand__logo { height: 46px; }
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
  }
  .burger { display: none; }
  .mobile-menu,
  .mobile-menu.is-open { display: none; }
}


/* =====================================================================
   07. HERO
   ===================================================================== */
.hero {
  background: var(--black);
  color: var(--white);
  padding-block: clamp(36px, 7vw, 76px) clamp(48px, 8vw, 96px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 56px);
  align-items: center;
}

.hero__text { min-width: 0; }

.hero__title {
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.hero__sub {
  margin-top: 20px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-400);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero__cta .btn { flex: 1 1 auto; min-width: 180px; }

/* Três números com divisórias */
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 5vw, 40px);
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
}

.hero__meta li {
  padding-inline: 14px;
  border-left: 1px solid var(--line-dark);
}
.hero__meta li:first-child { padding-left: 0; border-left: 0; }

.hero__meta strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.4rem, 4.6vw, 2rem);
  line-height: 1;
  color: var(--yellow);
}

.hero__meta span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--gray-400);
}

.hero__visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.hero__hint {
  align-self: flex-end;
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-400);
}

@media (min-width: 768px) {
  .hero__sub { font-size: 18px; }
  .hero__meta span { font-size: 12.5px; }
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
  }
  .hero__cta .btn { flex: 0 0 auto; }
}

@media (min-width: 1280px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}


/* =====================================================================
   08. PALCO 3D DO CARRO (STAGE)
   ===================================================================== */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: clamp(12px, 3vw, 26px);
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  perspective: 1200px;
  overflow: hidden;
  touch-action: pan-y;            /* o arraste horizontal gira o carro */
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.stage:active { cursor: grabbing; }

.stage--lg { aspect-ratio: 16 / 11; }

.stage.is-night {
  background: #0A0A0B;
  border-color: rgba(255, 255, 255, .08);
}

/* O JS escreve apenas --tilt-x / --tilt-y no .stage */
.stage__car {
  position: relative;
  z-index: 2;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 220ms var(--ease);
  will-change: transform;
}

.stage__car svg { width: 100%; height: auto; }

/* Troca de veículo no hero */
.stage__car.is-swap { animation: car-swap 520ms var(--ease); }

@keyframes car-swap {
  from { opacity: 0; transform: translateX(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Carregando: shimmer discreto enquanto o SVG não chega */
.stage__car:empty {
  min-height: 42%;
  width: 86%;
  border-radius: var(--radius);
  background: linear-gradient(100deg,
              rgba(255, 255, 255, .04) 20%,
              rgba(255, 255, 255, .10) 42%,
              rgba(255, 255, 255, .04) 64%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -40% 0; }
}

/* Sombra / reflexo no chão */
.stage__floor {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 1;
  width: 72%;
  height: 16%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, .75) 0%,
              rgba(0, 0, 0, .35) 45%,
              rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

.stage.is-night .stage__floor {
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, .9) 0%,
              rgba(0, 0, 0, .45) 48%,
              rgba(0, 0, 0, 0) 74%);
}


/* =====================================================================
   09. FAIXA DE CONFIANÇA (TRUST) — dentro da faixa amarela
   ===================================================================== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  background: var(--yellow);
  border: 2px solid #000;        /* caixas pretas sobre o amarelo */
  border-radius: var(--radius);
  color: #000;
  transition: background-color var(--t), transform var(--t);
}

.trust:hover {
  background: #000;
  color: var(--yellow);
  transform: translateY(-2px);
}

.trust i,
.trust svg { width: 24px; height: 24px; flex: none; stroke-width: 2; }

.trust strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.trust small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .78;
}

@media (min-width: 768px) {
  .trust-grid { gap: 16px; }
  .trust { padding: 20px 18px; }
}

@media (min-width: 980px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* =====================================================================
   10. CATEGORIAS (CAT) — seção branca
   ===================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.cat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.cat:hover {
  border-color: var(--yellow);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
}

.cat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--black);
  color: var(--yellow);
  border-radius: 2px;
  flex: none;
}

.cat__icon i,
.cat__icon svg { width: 22px; height: 22px; stroke-width: 2; }

.cat strong {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.cat small {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gray-600);
}

/* Destaque discreto para a categoria em evidência */
.cat.is-featured { border-color: var(--black); }

/* Selo "troca na hora" dentro do card */
.cat__flag {
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 9px;
  background: var(--yellow);
  color: #000;
  border-radius: 2px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}

@media (min-width: 520px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}


/* =====================================================================
   11. SIMULADOR "MONTE SEU CARRO"
   ===================================================================== */
.simulator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 44px);
}

/* O preview vem primeiro no mobile (ordem natural do HTML) */
.simulator__preview { min-width: 0; }

.simulator__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vw, 38px);
  min-width: 0;
}

/* --- Barra abaixo do palco --- */
.preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

.preview__vehicle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

.preview__vehicle i,
.preview__vehicle svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }

.preview__vehicle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.preview__toggles { display: flex; gap: 8px; flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--black-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--white);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.icon-btn i,
.icon-btn svg { width: 18px; height: 18px; }

.icon-btn:hover,
.icon-btn[aria-pressed="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #000;
}

/* --- Etiquetas dos itens aplicados --- */
.preview__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--yellow);
  color: #000;
  border-radius: 2px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.3;
}

.badge i,
.badge svg { width: 14px; height: 14px; }

/* --- Passos --- */
.step { min-width: 0; }

.step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  background: var(--yellow);
  color: #000;
  border-radius: 2px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}

.step__head h3 {
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 600;
  color: var(--white);
}

/* --- Tipos de veículo --- */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 12px;
  background: var(--black-2);
  border: 2px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--white);
  text-align: left;
  transition: border-color var(--t), background-color var(--t), transform var(--t);
}

.vehicle-card:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); }

.vehicle-card.is-active {
  border-color: var(--yellow);
  background: var(--black-3);
}

.vehicle-card__icon {
  display: block;
  width: 56px;
  color: var(--gray-400);
  transition: color var(--t);
}
.vehicle-card__icon svg { width: 100%; height: auto; }
.vehicle-card.is-active .vehicle-card__icon { color: var(--yellow); }

.vehicle-card strong {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vehicle-card small {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--gray-400);
}

/* --- Campo de texto --- */
.input {
  width: 100%;
  padding: 13px 14px;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 1rem;              /* evita o zoom automático no iOS */
  line-height: 1.4;
  transition: border-color var(--t);
}

.input::placeholder { color: var(--gray-400); }
.input:focus { border-color: var(--yellow); outline: none; }
.input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* --- Lista de acessórios --- */
.acc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acc-item {
  background: var(--black-2);
  border: 2px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), background-color var(--t);
}

.acc-item.is-active {
  border-color: var(--yellow);
  background: var(--black-3);
}

.acc-item__main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  color: var(--white);
}

.acc-item__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid var(--gray-600);
  border-radius: 2px;
  color: transparent;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}

.acc-item__check i,
.acc-item__check svg { width: 15px; height: 15px; stroke-width: 3; }

.acc-item.is-active .acc-item__check {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #000;
}

.acc-item__icon {
  display: inline-flex;
  flex: none;
  color: var(--gray-400);
}
.acc-item__icon i,
.acc-item__icon svg { width: 20px; height: 20px; }
.acc-item.is-active .acc-item__icon { color: var(--yellow); }

.acc-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.acc-item__text strong {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
}

.acc-item__text small {
  font-size: 12px;
  line-height: 1.4;
  color: var(--gray-400);
}

.acc-item__price {
  flex: none;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .03em;
  color: var(--yellow);
  text-align: right;
}

/* Opções: fechadas por padrão, abrem no item ativo */
.acc-item__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-inline: 14px;
  transition: max-height 260ms var(--ease), opacity 180ms linear,
              padding 200ms var(--ease);
}

.acc-item.is-active .acc-item__options {
  max-height: 420px;
  opacity: 1;
  padding-bottom: 14px;
}

.opt {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--gray-400);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.opt:hover { color: var(--white); border-color: rgba(255, 255, 255, .35); }

.opt.is-selected {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #000;
  font-weight: 600;
}

/* --- Caixa do orçamento --- */
.quote {
  padding: 18px 16px;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: opacity var(--t);
}

.quote.is-loading { opacity: .6; }
.quote.is-loading .quote__total strong { animation: blink 1.2s infinite; }

.quote__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 14px;
  color: var(--white);
}

.quote__name { min-width: 0; overflow-wrap: anywhere; }
.quote__name em { color: var(--gray-400); font-style: normal; }

.quote__item strong {
  flex: none;
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--yellow);
}

.quote__empty {
  padding: 14px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-400);
}

.quote__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--white);
}

.quote__row--discount {
  border-bottom: 1px solid var(--line-dark);
  color: var(--green);
}
.quote__row--discount em { font-style: normal; font-weight: 700; }

.quote__total {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  padding-block: 16px 14px;
}

.quote__total small {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 4px;
}

/* O valor pode ser "0", "R$ 1.870" ou "Sob consulta": sem largura fixa */
.quote__total strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1;
  color: var(--yellow);
  overflow-wrap: anywhere;
}

.quote__installment {
  font-size: 12px;
  line-height: 1.35;
  color: var(--gray-400);
  text-align: right;
  max-width: 100%;
}

.quote__disclaimer {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-400);
}

.quote__disclaimer i,
.quote__disclaimer svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--yellow); }

.quote__error {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(226, 59, 46, .12);
  border-left: 3px solid var(--red);
  border-radius: 2px;
  font-size: 13px;
  color: #FFC9C4;
}
.quote__error[hidden] { display: none; }

@media (min-width: 520px) {
  .vehicle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .quote { padding: 22px 20px; }
  .acc-item__main { padding: 15px 16px; }
}

@media (min-width: 1024px) {
  .simulator {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }
  .simulator__preview {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

@media (min-width: 1280px) {
  .simulator { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}


/* =====================================================================
   12. VITRINE DE PRODUTOS (CHIPS / FEED / POST)
   ===================================================================== */
.chips {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(20px, 3.5vw, 30px);
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  scroll-snap-align: start;
  padding: 9px 14px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  color: var(--gray-600);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.chip i,
.chip svg { width: 15px; height: 15px; }

.chip:hover { border-color: var(--black); color: var(--black); }

.chip.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--yellow);
  font-weight: 600;
}

/* --- Grade de cards --- */
.feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.post {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.post:hover {
  border-color: var(--yellow);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.post.is-hidden { display: none; }

/* Faixa superior: bloco sólido / duotone discreto (preto, amarelo e cinzas) */
.post__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--post-bg, var(--black-2));
  color: var(--post-ink, rgba(255, 255, 255, .3));
  overflow: hidden;
}

.post__media[data-theme="green"]  { --post-bg: #10231A; --post-ink: rgba(0, 166, 81, .45); }
.post__media[data-theme="gold"]   { --post-bg: #17160A; --post-ink: rgba(242, 226, 0, .48); }
.post__media[data-theme="blue"]   { --post-bg: #14181F; --post-ink: rgba(255, 255, 255, .32); }
.post__media[data-theme="purple"] { --post-bg: #1A161C; --post-ink: rgba(255, 255, 255, .28); }
.post__media[data-theme="dark"]   { --post-bg: var(--black); --post-ink: rgba(255, 255, 255, .26); }

.post__icon {
  width: 42%;
  max-width: 120px;
  height: auto;
  color: currentColor;
  stroke-width: 1.1;
}

.post__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  background: rgba(0, 0, 0, .66);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.4;
}

.post__price {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  background: var(--yellow);
  border-radius: 2px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  color: #000;
  line-height: 1.3;
}

.post__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  flex: 1 1 auto;
}

.post__body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.1;
}

.post__body > p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray-600);
}

.post__specs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}

.post__specs li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-600);
}

.post__specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  background: var(--yellow);
  border: 1px solid rgba(0, 0, 0, .25);
}

.post__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.post__actions .btn--sm { flex: 1 1 auto; }

.feed__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 4vw, 36px);
}

.feed__error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  text-align: center;
  background: var(--gray-50);
  border: 1px dashed var(--line-light);
  border-radius: var(--radius);
}

.feed__error i,
.feed__error svg { width: 30px; height: 30px; color: var(--gray-600); }
.feed__error h3 { font-size: 1.1rem; }
.feed__error p { font-size: 13.5px; color: var(--gray-600); max-width: 46ch; }

@media (min-width: 520px) {
  .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .chips { flex-wrap: wrap; overflow: visible; }
}

@media (min-width: 1024px) {
  .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}


/* =====================================================================
   13. FAIXA "TROCA NA HORA" (SWAP) — faixa amarela
   ===================================================================== */
.swap-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.swap-strip::-webkit-scrollbar { display: none; }

.swap {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  background: var(--yellow);
  border: 2px solid #000;
  border-radius: var(--radius);
  color: #000;
}

.swap i,
.swap svg { width: 24px; height: 24px; stroke-width: 2; }

.swap strong {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.swap small {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .72);
}

@media (min-width: 520px) {
  .swap-strip { grid-auto-columns: 46%; }
}

@media (min-width: 980px) {
  .swap-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 16px;
  }
}


/* =====================================================================
   14. A LOJA (ABOUT)
   ===================================================================== */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.about__text { min-width: 0; }

.about__lead {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 3px solid var(--yellow);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  line-height: 1.55;
  color: var(--white);
}

#aboutParagraphs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

#aboutParagraphs p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-400);
}

.about__closing strong {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--yellow);
  line-height: 1.25;
}

/* Valores */
.values {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(26px, 4vw, 36px);
}

.value {
  display: flex;
  gap: 12px;
  padding: 16px 14px;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

.value i,
.value svg { width: 22px; height: 22px; flex: none; color: var(--yellow); }

.value strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.2;
}

.value small {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gray-400);
}

/* Coluna lateral */
.about__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

#facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.about__card {
  padding: 20px 18px;
  background: var(--black-3);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

.about__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  line-height: .95;
  color: var(--yellow);
  margin-bottom: 8px;
}

.about__card strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}

.about__card small {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gray-400);
}

.about__who {
  padding: 20px 18px;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}

.about__who h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--yellow);
  margin-bottom: 14px;
}

.audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audience li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--black-3);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--white);
}

.audience i,
.audience svg { width: 14px; height: 14px; color: var(--yellow); }

@media (min-width: 520px) {
  #facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .about { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  #facts { grid-template-columns: minmax(0, 1fr); }
  .about__side {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}


/* =====================================================================
   15. FAQ (ACORDEÃO) — seção branca
   ===================================================================== */
.faq {
  border-top: 1px solid var(--line-light);
}

.faq__item { border-bottom: 1px solid var(--line-light); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(.95rem, 3vw, 1.1rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--black);
  transition: color var(--t);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }

.faq__item summary:hover { color: var(--gray-600); }

.faq__item summary > span { min-width: 0; }

.faq__item summary i,
.faq__item summary svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--black);
  transition: transform 220ms var(--ease);
}

/* O "+" vira "×" quando aberto */
.faq__item[open] summary i,
.faq__item[open] summary svg { transform: rotate(45deg); }

.faq__answer {
  padding: 0 2px 20px;
  max-width: 68ch;
}

.faq__answer p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-600);
}

.faq__answer p + p { margin-top: 10px; }


/* =====================================================================
   16. LOCALIZAÇÃO E CONTATO
   ===================================================================== */
.local {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
}

.local__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.info-block h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gray-600);
  margin-bottom: 10px;
}

.info-block p {
  font-size: 15px;
  line-height: 1.6;
}

.info-block .muted { font-size: 13px; margin-top: 2px; }

/* Horários */
.hours {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-light);
}

.hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 14px;
  color: var(--gray-600);
}

.hours li strong { font-weight: 500; }

.hours li.is-today {
  position: relative;
  padding-left: 14px;
  color: var(--black);
  font-weight: 700;
}

.hours li.is-today::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 18px;
  background: var(--yellow);
}

.hours li.is-today strong { font-weight: 700; }
.hours li.is-closed { color: var(--gray-400); }
.hours li.is-today.is-closed { color: var(--gray-600); }

/* Contato */
.contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
}

.contact i,
.contact svg {
  grid-row: span 2;
  width: 18px;
  height: 18px;
  color: var(--gray-600);
}

.contact a {
  font-size: 15px;
  font-weight: 500;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--line-light);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--t);
}
.contact a:hover { text-decoration-color: var(--black); }

.contact small {
  grid-column: 2;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.local__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.local__actions .btn { flex: 1 1 auto; min-width: 150px; }

/* Mapa */
.local__map {
  min-height: 320px;
  height: 100%;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-100);
}

.local__map iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  filter: grayscale(.2);
}

/* Depoimentos (mantidos ocultos pelo HTML, estilizados por garantia) */
.testimonial {
  padding: 20px 18px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
}
.testimonial__stars { color: var(--yellow-600); letter-spacing: .1em; }
.testimonial blockquote { margin-top: 8px; font-size: 14.5px; line-height: 1.65; }
.testimonial figcaption { margin-top: 10px; font-size: 12.5px; color: var(--gray-600); }
.testimonial figcaption strong { display: block; color: var(--black); }

@media (min-width: 768px) {
  .local__actions .btn { flex: 0 0 auto; }
}

@media (min-width: 1024px) {
  .local { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .local__map,
  .local__map iframe { min-height: 440px; }
}


/* =====================================================================
   17. CTA FINAL — faixa amarela
   ===================================================================== */
.cta-final { text-align: center; }

.cta-final .section__index { text-align: right; }

.cta-final__title {
  font-size: clamp(1.9rem, 6.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
  max-width: 18ch;
  margin-inline: auto;
}

.cta-final__sub {
  margin: 16px auto 28px;
  max-width: 46ch;
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, .74);
}


/* =====================================================================
   18. RODAPÉ
   ===================================================================== */
.site-footer {
  background: var(--black);
  color: var(--gray-400);
  padding-top: clamp(40px, 6vw, 68px);
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-dark);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-bottom: clamp(28px, 4vw, 44px);
}

.footer__brand img {
  height: 52px;
  width: auto;
  margin-bottom: 14px;
}

.footer__brand p {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 42ch;
}

.footer__col { display: flex; flex-direction: column; min-width: 0; }

.footer__col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--yellow);
  margin-bottom: 14px;
}

.footer__col > a {
  padding: 6px 0;
  font-size: 14px;
  color: var(--gray-400);
  transition: color var(--t);
}
.footer__col > a:hover { color: var(--white); }

/* Lista de contato no rodapé (variação escura) */
.contact--footer { gap: 14px; }
.contact--footer i,
.contact--footer svg { color: var(--yellow); }
.contact--footer a {
  color: var(--white);
  font-size: 14px;
  text-decoration-color: var(--line-dark);
}
.contact--footer a:hover { text-decoration-color: var(--yellow); }
.contact--footer small { color: var(--gray-600); }

.footer__social {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--white);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.social i,
.social svg { width: 18px; height: 18px; }

.social:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #000;
}

/* Linha legal: tudo no mesmo eixo, com ar em volta e folga para o FAB. */
.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(20px, 2.6vw, 28px);
  padding-bottom: clamp(64px, 8vw, 104px); /* espaço do botão flutuante */
  border-top: 1px solid var(--line-dark);
  font-size: 12px;
  line-height: 1.7;
  color: var(--gray-600);
}

.footer__legal > span { transition: color var(--t); }
.footer__legal > span:hover { color: var(--gray-400); }

@media (min-width: 768px) {
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* só vira uma linha única quando há largura para os três blocos sem apertar */
@media (min-width: 1100px) {
  .footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    column-gap: clamp(20px, 3vw, 44px);
    row-gap: 12px;
  }
  .footer__legal > span:nth-of-type(2) { text-align: center; }
  .footer__legal > .credit { margin-left: auto; }
}

@media (min-width: 980px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .footer__brand { grid-column: auto; }
}


/* =====================================================================
   19. FAB WHATSAPP
   ===================================================================== */
.fab {
  position: fixed;
  right: calc(22px + env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 140;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 62px;
  height: 62px;
  background: linear-gradient(145deg, #3DE57E 0%, var(--whats) 48%, #12A14A 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .4),
    0 0 0 0 rgba(37, 211, 102, .42);
  animation: fabGlow 2.6s ease-in-out infinite;
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}

/* O halo respira: cresce e some, sem empurrar nada do layout. */
@keyframes fabGlow {
  0%, 100% {
    box-shadow:
      0 12px 28px rgba(0, 0, 0, .4),
      0 0 0 0 rgba(37, 211, 102, .42);
  }
  50% {
    box-shadow:
      0 12px 28px rgba(0, 0, 0, .4),
      0 0 26px 6px rgba(37, 211, 102, .34);
  }
}

/* Dois anéis saindo do botão, em tempos diferentes, para chamar de longe. */
.fab::before,
.fab::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, .6);
  opacity: 0;
  animation: fabRing 2.6s ease-out infinite;
  pointer-events: none;
}

.fab::after { animation-delay: 1.3s; }

@keyframes fabRing {
  0%   { transform: scale(1);    opacity: .6; }
  65%  { transform: scale(1.26); opacity: 0; }
  100% { transform: scale(1.26); opacity: 0; }
}

.fab:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.06);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, .45),
    0 0 34px 8px rgba(37, 211, 102, .45);
  animation-play-state: paused;
}

.fab:active { transform: translateY(-1px) scale(1); }

.fab__icon {
  width: 32px;
  height: 32px;
  flex: none;
  transition: transform var(--t);
}
.fab:hover .fab__icon { transform: scale(1.1) rotate(-6deg); }

.fab__label {
  display: none;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

@media (min-width: 980px) {
  .fab {
    width: auto;
    height: 62px;
    padding: 0 28px 0 16px;
    border-radius: 999px;
  }
  /* no formato comprido o ícone ganha o próprio disco claro */
  .fab__icon {
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
  }
  .fab__label { display: inline; }
}


/* =====================================================================
   20. TOASTS, REVEAL, FOCO E MOVIMENTO REDUZIDO
   ===================================================================== */

/* --- Toasts --- */
.toast-wrap {
  position: fixed;
  z-index: 200;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: 420px;
  width: 100%;
  padding: 12px 16px;
  background: var(--black-2);
  border: 1px solid var(--line-dark);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  pointer-events: auto;
}

.toast.is-visible { opacity: 1; transform: none; }
.toast.is-leaving { opacity: 0; transform: translateY(-10px); }

.toast--error   { border-left-color: var(--red); }
.toast--info    { border-left-color: var(--yellow); }
.toast--success { border-left-color: var(--green); }

@media (min-width: 768px) {
  .toast-wrap { left: auto; align-items: flex-end; max-width: 460px; }
}

/* --- Revelação no scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Foco visível (AA) --- */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

.section--light :focus-visible,
.section--gray :focus-visible,
.band--yellow :focus-visible,
.cta-final :focus-visible {
  outline-color: #000;
}

/* --- Preferência por menos movimento --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .stage__car:empty { animation: none; background: rgba(255, 255, 255, .06); }
  .btn:hover,
  .post:hover,
  .cat:hover,
  .trust:hover,
  .fab:hover { transform: none; }
  .fab { animation: none; }
  .fab::before,
  .fab::after { animation: none; opacity: 0; }
  .fab:hover .fab__icon { transform: none; }
}

/* =============================================================================
   04 · PEDIDO RÁPIDO (finder)
   Marque os itens -> diga o carro -> a mensagem do WhatsApp sai pronta.
   ========================================================================== */
.finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 44px);
  margin-top: clamp(28px, 4vw, 40px);
}

.finder__col { min-width: 0; }

.finder__step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.finder__step + .finder__fields,
.finder__step + .pick-grid { margin-top: 0; }

.finder__step h3 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(17px, 4vw, 21px);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
}

.finder__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  background: var(--yellow);
}

.finder__count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--gray-400);
  white-space: nowrap;
}

/* --- seleção de itens --------------------------------------------------- */
.pick-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.pick {
  border: 1px solid var(--line-dark);
  background: var(--black-2);
  transition: border-color .18s ease, background .18s ease;
}

.pick:hover { border-color: rgba(242, 226, 0, .45); }

.pick.is-active {
  border-color: var(--yellow);
  background: var(--black-3);
}

.pick__main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.pick__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, .06);
  color: var(--yellow);
}

.pick__icon svg { width: 18px; height: 18px; }

.pick__label { min-width: 0; flex: 1; }

.pick__label strong {
  display: block;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--white);
}

.pick__label em {
  display: inline-block;
  margin-top: 3px;
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  padding: 2px 6px;
}

.pick__check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-dark);
  color: transparent;
  transition: all .18s ease;
}

.pick__check svg { width: 15px; height: 15px; }

.pick.is-active .pick__check {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--black);
}

/* variações aparecem só quando o item está marcado */
.pick__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 0;
  padding: 0 14px;
  overflow: hidden;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
}

.pick.is-active .pick__opts {
  max-height: 220px;
  padding: 0 14px 13px;
  opacity: 1;
}

.pick__opt {
  padding: 7px 11px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-400);
  background: transparent;
  border: 1px solid var(--line-dark);
  cursor: pointer;
  transition: all .16s ease;
}

.pick__opt:hover { color: var(--white); border-color: rgba(255, 255, 255, .32); }

.pick__opt.is-selected {
  color: var(--black);
  background: var(--yellow);
  border-color: var(--yellow);
}

/* --- carro + prévia da mensagem ----------------------------------------- */
.finder__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  margin-bottom: 28px;
}

.finder__preview {
  min-height: 150px;
  padding: 14px 16px;
  border: 1px dashed var(--line-dark);
  background: var(--black-2);
}

.finder__hint {
  margin: 0;
  font-size: 13.5px;
  color: var(--gray-400);
}

.finder__message {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.finder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.finder__send { flex: 1 1 220px; }

.finder__send:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.finder__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-400);
}

.finder__note svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--yellow);
}

@media (min-width: 1024px) {
  .finder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 56px);
  }
  .finder__preview { min-height: 190px; }
}

/* =============================================================================
   TRANSIÇÕES ENTRE BLOCOS
   1) faixa rolante com as linhas de produto
   2) corte diagonal na entrada das faixas amarelas
   3) entrada escalonada dos cards ao rolar
   ========================================================================== */

/* --- 1. faixa rolante ---------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  border-block: 2px solid var(--yellow);
  user-select: none;
}

.marquee--dark { background: var(--black); }

.marquee--yellow {
  background: var(--yellow);
  border-color: var(--black);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-roll 38s linear infinite;
}

/* dois grupos idênticos lado a lado = loop sem emenda */
.marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.marquee__group > span {
  padding: 0 18px;
  font-family: var(--font-title);
  font-size: clamp(14px, 3.2vw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee--dark .marquee__group > span { color: var(--white); }
.marquee--yellow .marquee__group > span { color: var(--black); }

.marquee__crown {
  flex: 0 0 auto;
  width: 16px;
  height: 12px;
}

.marquee--dark .marquee__crown { color: var(--yellow); }
.marquee--yellow .marquee__crown { color: var(--black); }

/* a faixa pausa quando o ponteiro está em cima (fica legível) */
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- 3. entrada escalonada dos cards ------------------------------------- */
.cat-grid .cat,
.feed .post,
.trust-grid .trust,
.swap-strip .swap {
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .55s ease,
              border-color .2s ease, box-shadow .2s ease;
}

/* o atraso cria o efeito cascata quando a seção entra na tela */
.cat-grid .cat:nth-child(2),
.feed .post:nth-child(3n + 2),
.trust-grid .trust:nth-child(2) { transition-delay: .07s; }

.cat-grid .cat:nth-child(3),
.feed .post:nth-child(3n + 3),
.trust-grid .trust:nth-child(3) { transition-delay: .14s; }

.cat-grid .cat:nth-child(4),
.trust-grid .trust:nth-child(4) { transition-delay: .21s; }

/* --- acessibilidade ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: none; }
  .cat-grid .cat,
  .feed .post,
  .trust-grid .trust,
  .swap-strip .swap { transition-delay: 0s !important; }
}

/* =============================================================================
   POPUP "COMO PODEMOS TE CHAMAR?"
   Aparece uma vez, antes de abrir o WhatsApp, e segue direto para a conversa.
   ========================================================================== */
body.is-locked { overflow: hidden; }

.namegate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.namegate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}

.namegate.is-open .namegate__backdrop { opacity: 1; }

.namegate__box {
  position: relative;
  width: min(430px, 100%);
  padding: clamp(24px, 6vw, 34px);
  border: 2px solid var(--yellow);
  background: var(--black-2);
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
}

.namegate.is-open .namegate__box {
  transform: none;
  opacity: 1;
}

.namegate__x {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  font-size: 26px;
  line-height: 1;
  color: var(--gray-400);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .15s ease;
}

.namegate__x:hover { color: var(--white); }

.namegate__eyebrow {
  display: block;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yellow);
}

.namegate__title {
  margin: 10px 0 8px;
  font-family: var(--font-title);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
}

.namegate__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-400);
}

.namegate__form {
  display: grid;
  gap: 10px;
}

.namegate__skip {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  font-size: 13px;
  color: var(--gray-400);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.namegate__skip:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .namegate__box,
  .namegate__backdrop { transition: none; }
}

/* =============================================================================
   CRÉDITO DO DESENVOLVEDOR
   ========================================================================== */
.credit {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  gap: 5px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--gray-400);
  text-decoration: none;
  transition: color .18s ease;
}

.credit strong {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--white);
  transition: color .18s ease;
}

.credit:hover { color: var(--gray-100); }
.credit:hover strong { color: var(--yellow); }

/* no rodapé a linha legal respira mais quando a tela abre */
@media (min-width: 1280px) {
  .footer__legal { column-gap: clamp(32px, 4vw, 72px); }
}

/* =============================================================================
   PAINEL DA MARCA NO HERO
   O logo em destaque sobre fundo escuro, com a luz verde/amarela da marca,
   textura de grade e um brilho que passa devagar (como metal pegando luz).
   ========================================================================== */
.logo-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(24px, 6vw, 48px);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background:
    radial-gradient(90% 70% at 50% 42%, #17171b 0%, var(--black) 72%);
}

/* luz verde (fachada) + luz amarela (marca) atrás do logo */
.logo-stage__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 34% at 32% 62%, rgba(0, 166, 81, .34), transparent 70%),
    radial-gradient(42% 36% at 70% 34%, rgba(242, 226, 0, .22), transparent 72%);
  filter: blur(26px);
  animation: stage-breathe 9s ease-in-out infinite alternate;
}

/* grade técnica bem discreta, para o fundo não ficar chapado */
.logo-stage__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 20%, transparent 78%);
}

.logo-stage__logo {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .65));
  animation: stage-float 7s ease-in-out infinite alternate;
}

/* brilho diagonal atravessando o painel */
.logo-stage__shine {
  position: absolute;
  top: -60%;
  left: -40%;
  z-index: 2;
  width: 32%;
  height: 220%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, .13),
    rgba(255, 255, 255, 0)
  );
  transform: rotate(18deg);
  animation: stage-shine 6.5s ease-in-out infinite;
  pointer-events: none;
}

.logo-stage__caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 11px 16px;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gray-400);
  border-top: 1px solid var(--line-dark);
  background: rgba(0, 0, 0, .55);
}

@keyframes stage-float {
  from { transform: translateY(-5px); }
  to   { transform: translateY(5px); }
}

@keyframes stage-breathe {
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.06); }
}

@keyframes stage-shine {
  0%, 62% { left: -40%; }
  100%    { left: 110%; }
}

@media (min-width: 980px) {
  .logo-stage { aspect-ratio: 5 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-stage__logo,
  .logo-stage__glow { animation: none; }
  .logo-stage__shine { display: none; }
}

/* =============================================================================
   PRIMEIRO BLOCO (HERO) EM FUNDO BRANCO
   O painel escuro do logo fica em contraste com o branco; o verde da marca
   aparece no chapéu, no destaque do título e nos números.
   ========================================================================== */
:root { --green-700: #00803E; } /* verde legível em texto pequeno sobre branco */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--black);
}

/* listras da marca no topo do bloco */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--green) 0 22%,
    var(--yellow) 22% 34%,
    var(--gray-100) 34%
  );
  z-index: 1;
}

/* luz verde bem suave atrás do texto, puxando a cor da fachada */
.hero::after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -25%;
  width: min(640px, 85%);
  height: 440px;
  background: radial-gradient(circle, rgba(0, 166, 81, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero > .container { position: relative; z-index: 1; }

.hero .eyebrow {
  color: var(--green-700);
}

.hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--green);
}

.hero__title { color: var(--black); }

/* amarelo puro não tem contraste sobre branco: vira marca-texto no título */
.hero__title .y {
  color: var(--black);
  background: linear-gradient(to top, var(--yellow) 0 .30em, transparent .30em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__sub { color: var(--gray-600); }

.hero__meta {
  border-top: 1px solid var(--line-light);
}

.hero__meta li + li { border-left: 1px solid var(--line-light); }
.hero__meta strong { color: var(--black); }
.hero__meta li:nth-child(2) strong { color: var(--green-700); }
.hero__meta span { color: var(--gray-600); }

/* foco visível precisa ser escuro sobre o branco */
.hero :focus-visible { outline-color: var(--black); }

@media (prefers-reduced-motion: reduce) {
  .hero::after { display: none; }
}

/* Destaque do título do hero: verde da marca, mais limpo que marca-texto
   (o marcador amarelo encostava na linha de baixo quando o título quebrava). */
.hero__title {
  line-height: 1.04;
  font-size: clamp(2.2rem, 5.6vw, 4rem);
}

.hero__title .y {
  color: var(--green);
  background: none;
}

/* Faixa da marca no topo do hero: listras diagonais verde/amarelo ocupando a
   largura inteira (antes a listra parava no meio e parecia corte por engano). */
.hero::before {
  inset: 0 0 auto 0;
  height: 8px;
  background-image: repeating-linear-gradient(
    115deg,
    var(--green) 0 16px,
    #0b9a4b 16px 18px,
    var(--yellow) 18px 34px,
    #ddcf00 34px 36px
  );
  background-size: 72px 100%;
  animation: brand-tape 7s linear infinite;
}

@keyframes brand-tape {
  from { background-position: 0 0; }
  to   { background-position: 72px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* Destaque do título do hero: verde escuro da marca.
   Testado contra: verde vivo (#00A651, contraste 3.4:1 — fraco), marca-texto
   amarelo (o traço não acompanha a quebra de linha) e título todo preto
   (perde a cor da marca no bloco branco). O verde escuro passa em contraste
   (5.3:1) e mantém a identidade. */
.hero__title .y { color: var(--green-700); }

/* =============================================================================
   LINHA DA MARCA SOB O HEADER
   Linha fixa (sem animação), presa ao header: acompanha a rolagem e fecha o
   bloco preto com as duas cores da marca.
   ========================================================================== */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--green) 0 50%,
    var(--yellow) 50% 100%
  );
}

.site-header { position: sticky; }

/* a faixa diagonal animada do hero sai de cena: a linha do header já cumpre */
.hero::before { display: none; }

/* =============================================================================
   AJUSTE DOS TÍTULOS DE SEÇÃO
   Com line-height 1 a cedilha do "Ç" e os acentos encostavam na linha de baixo.
   ========================================================================== */
.section__title {
  line-height: 1.12;
  text-wrap: balance;
}

/* O nome da loja ganha a própria linha, em vez de quebrar no meio */
#sobre .section__title .y {
  display: block;
}

/* =============================================================================
   PAINEL DA MARCA — AJUSTE FINO
   Antes: painel alto demais, logo pequeno no meio de muito vazio, luzes
   espalhadas como manchas e a legenda sumindo atrás do botão do WhatsApp.
   ========================================================================== */
.logo-stage {
  aspect-ratio: 16 / 10;
  padding: clamp(28px, 6vw, 52px);
  border: 1px solid rgba(255, 255, 255, .14);
  background: radial-gradient(78% 78% at 50% 46%, #191a1f 0%, #0b0b0c 70%);
}

/* uma luz só, centrada atrás do logo, em vez de duas manchas soltas */
.logo-stage__glow {
  inset: 0;
  background:
    radial-gradient(46% 42% at 50% 50%, rgba(0, 166, 81, .30), transparent 72%),
    radial-gradient(70% 58% at 50% 54%, rgba(242, 226, 0, .10), transparent 78%);
  filter: blur(14px);
  animation: stage-breathe 11s ease-in-out infinite alternate;
}

.logo-stage__grid {
  background-size: 54px 54px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px);
  mask-image: radial-gradient(64% 62% at 50% 50%, #000 25%, transparent 82%);
}

/* logo ocupando o painel de verdade */
.logo-stage__logo {
  width: min(100%, 540px);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .7));
}

/* marcas de canto nas cores da marca: dá acabamento sem poluir */
.logo-stage::before,
.logo-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.logo-stage::before {
  top: 12px;
  left: 12px;
  border-top: 2px solid var(--green);
  border-left: 2px solid var(--green);
}

.logo-stage::after {
  right: 12px;
  bottom: 12px;
  border-right: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
}

@media (min-width: 980px) {
  .logo-stage { aspect-ratio: 16 / 11; }
}

/* =============================================================================
   MOBILE: O LOGO VEM PRIMEIRO
   No celular o visitante vê a marca antes do texto — é o cartão de visita.
   ========================================================================== */
@media (max-width: 979px) {
  .hero__visual {
    order: -1;
    margin-bottom: 26px;
  }

  .hero__text { order: 0; }

  /* mais presença: painel maior e logo ocupando quase toda a largura */
  .logo-stage {
    aspect-ratio: 5 / 4;
    padding: clamp(22px, 7vw, 40px);
  }

  .logo-stage__logo { width: 100%; }

  /* o chapéu do endereço entra logo abaixo do painel, sem espaço sobrando */
  .hero__text .eyebrow { margin-top: 0; }
}

/* =============================================================================
   CORES MESCLADAS NO PRIMEIRO BLOCO
   A linha do header deixa de ser metade/metade e vira uma passagem do verde
   para o amarelo; o fundo branco ganha duas luzes da marca que se cruzam e
   se movem bem devagar.
   ========================================================================== */
.site-header::after {
  background: linear-gradient(
    to right,
    var(--green) 0%,
    #3cb34a 28%,
    #a8c81e 52%,
    var(--yellow) 78%,
    #ffe94d 100%
  );
}

/* duas luzes que se cruzam atrás do conteúdo do hero */
.hero::after {
  content: "";
  position: absolute;
  inset: -15% -10% -25% -15%;
  width: auto;
  height: auto;
  background:
    radial-gradient(34% 44% at 18% 72%, rgba(0, 166, 81, .22), transparent 68%),
    radial-gradient(30% 38% at 52% 18%, rgba(242, 226, 0, .26), transparent 70%),
    radial-gradient(40% 46% at 86% 62%, rgba(0, 166, 81, .12), transparent 72%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  animation: hero-mix 18s ease-in-out infinite alternate;
}

@keyframes hero-mix {
  from { transform: translate3d(-2%, 1%, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.08); }
}

/* o bloco termina com um degradê das duas cores, emendando na faixa seguinte */
.hero {
  background:
    linear-gradient(to bottom, rgba(0, 166, 81, .05), rgba(255, 255, 255, 0) 38%),
    var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}

/* =============================================================================
   PRIMEIRO BLOCO (HERO) EM FUNDO ESCURO
   As duas cores da marca aparecem mescladas na luz de fundo: no escuro elas
   ficam mais presentes do que no branco, sem precisar de bloco colorido.
   ========================================================================== */
:root { --green-300: #35D07F; } /* verde legível em texto pequeno sobre preto */

.hero {
  background:
    radial-gradient(120% 90% at 50% 0%, #15161a 0%, var(--black) 62%);
  color: var(--white);
}

/* luzes da marca cruzando o fundo, com deslocamento lento */
.hero::after {
  inset: -20% -12% -30% -18%;
  background:
    radial-gradient(34% 46% at 16% 74%, rgba(0, 166, 81, .42), transparent 68%),
    radial-gradient(30% 40% at 54% 14%, rgba(242, 226, 0, .22), transparent 70%),
    radial-gradient(42% 48% at 88% 58%, rgba(0, 166, 81, .20), transparent 72%);
  filter: blur(30px);
}

.hero .eyebrow { color: var(--green-300); }
.hero .eyebrow::before { background: var(--green-300); }

.hero__title { color: var(--white); }

/* no escuro o amarelo é o destaque com mais força e contraste */
.hero__title .y { color: var(--yellow); }

.hero__sub { color: var(--gray-400); }

.hero__meta { border-top: 1px solid var(--line-dark); }
.hero__meta li + li { border-left: 1px solid var(--line-dark); }
.hero__meta strong { color: var(--white); }
.hero__meta li:nth-child(2) strong { color: var(--green-300); }
.hero__meta span { color: var(--gray-400); }

.hero :focus-visible { outline-color: var(--yellow); }

/* o painel do logo precisa se destacar do fundo escuro */
.logo-stage {
  border-color: rgba(255, 255, 255, .18);
  background: radial-gradient(78% 78% at 50% 46%, #1b1c21 0%, #0e0e10 72%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

/* =============================================================================
   HERO EM COLUNA ÚNICA, CENTRALIZADO
   O logo vem em cima (em evidência) e o texto centralizado abaixo — em
   qualquer tamanho de tela, não só no celular.
   ========================================================================== */
.hero__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(26px, 4vw, 40px);
  text-align: center;
}

.hero__visual {
  order: -1;
  width: min(100%, 560px);
  margin-bottom: 0;
}

.hero__text {
  order: 0;
  width: min(100%, 760px);
}

.hero__title { margin-inline: auto; }

.hero__sub {
  margin-inline: auto;
  max-width: 56ch;
}

.hero__cta { justify-content: center; }

.hero__meta {
  justify-content: center;
  margin-inline: auto;
  max-width: 640px;
  text-align: center;
}

@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .logo-stage { aspect-ratio: 16 / 9; }
}

/* =============================================================================
   ACABAMENTO: LINHA DO HEADER E CONTORNO DO PAINEL
   - a mistura verde→amarelo passava por um tom oliva no meio e ficava suja:
     agora cada cor domina o seu lado e a mescla acontece só no centro;
   - os cantinhos soltos dentro do painel pareciam erro de alinhamento:
     saíram, e o painel ganhou um fio das cores da marca no topo.
   ========================================================================== */
.site-header::after {
  background: linear-gradient(
    to right,
    var(--green) 0%,
    var(--green) 40%,
    #8fc21d 50%,
    var(--yellow) 60%,
    var(--yellow) 100%
  );
}

/* contorno limpo, sem as marcas de canto */
.logo-stage::before,
.logo-stage::after {
  content: none;
}

.logo-stage {
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 24px 60px rgba(0, 0, 0, .55);
}

/* fio das cores da marca no topo do painel, alinhado com a borda */
.logo-stage__grid::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--green) 0%,
    var(--green) 40%,
    #8fc21d 50%,
    var(--yellow) 60%,
    var(--yellow) 100%
  );
}

/* O fio no topo do painel precisa ficar fora da grade (a máscara dela cortava
   o pseudo-elemento). Vai como camada de fundo do próprio painel. */
.logo-stage__grid::after { content: none; }

.logo-stage {
  background-image:
    linear-gradient(
      to right,
      var(--green) 0%,
      var(--green) 40%,
      #8fc21d 50%,
      var(--yellow) 60%,
      var(--yellow) 100%
    ),
    radial-gradient(78% 78% at 50% 46%, #1b1c21 0%, #0e0e10 72%);
  background-size: 100% 2px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
}

/* =============================================================================
   HERO — REFATORAÇÃO (UX/CRO)
   Duas colunas no desktop: conteúdo + mídia. No celular a foto vem primeiro.
   Fundo escuro com brilho verde/amarelo para tirar o "preto chapado".
   ========================================================================== */

/* --- contraste geral dos textos pequenos no escuro ---------------------- */
:root {
  --gray-400: #AEB3BC;   /* era #9A9AA2 — sobe para ~8:1 no preto */
  --gray-300: #C9CDD4;
}

/* --- fundo do bloco ------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background: #000;
  color: var(--white);
}

.hero::after {
  content: "";
  position: absolute;
  inset: -25% -15%;
  background:
    radial-gradient(32% 44% at 12% 78%, rgba(0, 166, 81, .40), transparent 68%),
    radial-gradient(26% 34% at 46% 8%, rgba(242, 226, 0, .16), transparent 70%),
    radial-gradient(40% 50% at 92% 48%, rgba(0, 166, 81, .22), transparent 72%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
  animation: hero-mix 20s ease-in-out infinite alternate;
}

.hero > .container { position: relative; z-index: 1; }

/* --- grade de duas colunas ---------------------------------------------- */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  padding-block: clamp(32px, 6vw, 72px);
  text-align: left;
  justify-items: stretch;
}

.hero__text { width: 100%; max-width: 620px; }

/* --- badge de localização ------------------------------------------------ */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--gray-300);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.hero__badge svg {
  width: 15px;
  height: 15px;
  color: var(--green-300);
}

.hero__badge:hover {
  color: var(--white);
  border-color: rgba(53, 208, 127, .5);
  background: rgba(0, 166, 81, .12);
}

/* --- título e apoio ------------------------------------------------------ */
.hero__title {
  margin: 0 0 18px;
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  color: var(--white);
}

.hero__title .y { color: var(--yellow); }

.hero__sub {
  margin: 0 0 28px;
  max-width: 54ch;
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  line-height: 1.6;
  color: var(--gray-300);
}

/* --- botões -------------------------------------------------------------- */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.btn--whats {
  color: #06130C;
  background: linear-gradient(180deg, #25D366 0%, #1EBE5A 100%);
  border: 0;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .26);
}

.btn--whats:hover {
  background: linear-gradient(180deg, #2ee070 0%, #21c961 100%);
  transform: translateY(-1px);
}

.btn__whats {
  width: 19px;
  height: 19px;
}

/* --- números ------------------------------------------------------------- */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  list-style: none;
  text-align: left;
  justify-content: flex-start;
  max-width: none;
}

.hero__meta li {
  padding-right: 26px;
  margin-right: 26px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}

.hero__meta li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__meta li + li { border-left: 0; }
.hero__meta strong { color: var(--white); }
.hero__meta li:nth-child(2) strong { color: var(--green-300); }
.hero__meta span { color: var(--gray-400); }

/* --- coluna da mídia ----------------------------------------------------- */
.hero__media {
  position: relative;
  width: 100%;
  order: -1;            /* no celular a foto aparece primeiro */
}

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  background: var(--black-2);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
}

/* fio das cores da marca no topo da foto */
.shot::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--green) 0%,
    var(--green) 40%,
    #8fc21d 50%,
    var(--yellow) 60%,
    var(--yellow) 100%
  );
}

/* escurece a base para o selo flutuante ter leitura */
.shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
  pointer-events: none;
}

.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* recorte na parede de acessórios da loja, acima das pessoas */
  object-position: 50% 20%;
  transform: scale(1.35);
  transform-origin: 50% 22%;
  filter: brightness(1.06) contrast(1.05) saturate(1.05);
}

/* selo flutuante sobre a foto */
.shot__tag {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-left: 3px solid var(--yellow);
  background: rgba(10, 10, 11, .86);
  backdrop-filter: blur(6px);
}

.shot__tag svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--yellow);
}

.shot__tag strong {
  display: block;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}

.shot__tag span {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--gray-400);
}

/* --- desktop: duas colunas ----------------------------------------------- */
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 5vw, 72px);
  }

  .hero__media { order: 0; }     /* volta para a direita */
  .shot img { aspect-ratio: 5 / 4; }
}

/* =============================================================================
   MÍDIA DO HERO — PAINEL DE ACESSÓRIOS
   Enquanto não houver foto cadastrada (store.heroPhoto), a coluna mostra as
   linhas de acessório da loja em um painel escuro com a luz da marca.
   ========================================================================== */
.shot--wall {
  display: block;
  padding: clamp(16px, 2.4vw, 22px);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(0, 166, 81, .18), transparent 65%),
    var(--black-2);
}

.shot--wall::after { content: none; }

.wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wall__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.wall__item:hover {
  border-color: rgba(242, 226, 0, .45);
  background: rgba(242, 226, 0, .06);
  transform: translateY(-2px);
}

.wall__item svg {
  width: 24px;
  height: 24px;
  color: var(--yellow);
}

.wall__item:nth-child(2n) svg { color: var(--green-300); }

.wall__item span {
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--gray-300);
}

/* o selo "troca na hora" fica abaixo do painel, sem cobrir nada */
.shot--wall + .shot__tag {
  position: static;
  margin-top: 12px;
  border-left-width: 3px;
}

@media (min-width: 560px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__item { min-height: 104px; }
}

/* =============================================================================
   HERO EM COLUNA ÚNICA CENTRALIZADA
   Foto da equipe em cima, conteúdo centralizado abaixo.
   ========================================================================== */
.hero__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(26px, 4vw, 42px);
}

.hero__media {
  order: -1;
  width: min(100%, 680px);
}

.hero__text {
  order: 0;
  width: min(100%, 760px);
  max-width: none;
}

.hero__badge { margin-inline: auto; }

.hero__title { margin-inline: auto; }

.hero__sub {
  margin-inline: auto;
  max-width: 58ch;
}

.hero__cta { justify-content: center; }

.hero__meta {
  justify-content: center;
  text-align: center;
}

.hero__meta li:last-child { padding-right: 0; margin-right: 0; }

/* foto: a equipe inteira enquadrada, sem corte no rosto de ninguém */
.shot--photo { padding: 0; }
.shot--photo::after { content: ""; }

.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 44%;
  transform: none;
  filter: brightness(1.08) contrast(1.05) saturate(1.06);
}

@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .shot img { aspect-ratio: 16 / 9; }
}

/* Acertos finais do hero centralizado */
.shot__tag { text-align: left; }

/* tira o vão preto entre o header e a foto */
.hero { padding-top: clamp(18px, 2.4vw, 30px); }
.hero__grid { padding-block: 0 clamp(28px, 5vw, 56px); }

/* Dias fechados na lista de horários: fundo é claro, precisa de cinza escuro */
.hours li.is-closed { color: var(--gray-600); }

/* O botão do header usa o mesmo estilo do CTA principal (verde WhatsApp) */
.site-header .btn--whats {
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .22);
}

.site-header .btn__whats { width: 16px; height: 16px; }

/* =============================================================================
   LOGO NO HERO
   Acima da foto, centralizado: a marca aparece antes de tudo, sem brigar com
   a placa da loja que já existe dentro da foto.
   ========================================================================== */
.hero__logo {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 0 auto clamp(18px, 2.6vw, 26px);
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .6));
}

@media (min-width: 980px) {
  .hero__logo { width: min(100%, 420px); }
}

/* Recorte da foto: fecha nas laterais (porta à esquerda e moto à direita) e
   centraliza a equipe no quadro. */
.shot img {
  aspect-ratio: 5 / 4;
  object-position: 46% 54%;
  transform: scale(1.12);
  transform-origin: 46% 54%;
}

@media (min-width: 980px) {
  .shot img { aspect-ratio: 16 / 11; }
}

/* =============================================================================
   HERO SÓ COM O LOGO
   Sem foto: o logo é a imagem do bloco, maior e com a luz da marca atrás.
   ========================================================================== */
.hero__media {
  display: grid;
  place-items: center;
  width: min(100%, 720px);
  margin-inline: auto;
}

.hero__logo {
  width: min(86%, 520px);
  margin: clamp(6px, 1.6vw, 14px) auto clamp(4px, 1vw, 10px);
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .7));
}

/* halo suave atrás do logo, nas cores da marca */
.hero__media::before {
  content: "";
  grid-area: 1 / 1;
  width: min(100%, 620px);
  aspect-ratio: 2 / 1;
  background:
    radial-gradient(50% 50% at 42% 50%, rgba(0, 166, 81, .30), transparent 70%),
    radial-gradient(46% 46% at 62% 46%, rgba(242, 226, 0, .18), transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

.hero__logo { grid-area: 1 / 1; position: relative; }

@media (min-width: 980px) {
  .hero__logo { width: min(80%, 560px); }
}

/* =============================================================================
   LOGO DO HERO — MAIOR E COM EFEITOS
   1. respiração do halo nas cores da marca
   2. flutuação lenta do logo
   3. brilho que atravessa o próprio logo (máscara com a arte)
   ========================================================================== */
.hero__media {
  width: min(100%, 860px);
  padding-block: clamp(10px, 2vw, 26px);
}

.hero__logo {
  width: min(94%, 640px);
  animation: logo-float 7s ease-in-out infinite alternate;
}

/* halo */
.hero__media::before {
  width: min(118%, 760px);
  background:
    radial-gradient(50% 50% at 40% 50%, rgba(0, 166, 81, .38), transparent 70%),
    radial-gradient(46% 46% at 64% 46%, rgba(242, 226, 0, .22), transparent 72%);
  filter: blur(32px);
  animation: logo-halo 9s ease-in-out infinite alternate;
}

/* brilho atravessando a arte do logo */
.hero__media::after {
  content: "";
  grid-area: 1 / 1;
  position: relative;
  width: min(94%, 640px);
  aspect-ratio: 827 / 274;
  -webkit-mask: url('/assets/brand/logo.png') center / contain no-repeat;
  mask: url('/assets/brand/logo.png') center / contain no-repeat;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255, 255, 255, .72) 50%,
    transparent 62%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: logo-shine 6s ease-in-out infinite;
}

@keyframes logo-float {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

@keyframes logo-halo {
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.07); }
}

@keyframes logo-shine {
  0%        { background-position: 170% 0; }
  58%, 100% { background-position: -70% 0; }
}

@media (min-width: 980px) {
  .hero__logo,
  .hero__media::after { width: min(88%, 700px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo { animation: none; }
  .hero__media::before { animation: none; }
  .hero__media::after { display: none; }
}

/* O halo não deve empurrar o layout: sai do fluxo da grade e fica atrás do logo */
.hero__media { position: relative; }

.hero__media::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(118%, 760px);
  aspect-ratio: 2.4 / 1;
  transform: translate(-50%, -50%);
  animation: logo-halo-abs 9s ease-in-out infinite alternate;
}

@keyframes logo-halo-abs {
  from { opacity: .72; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* o brilho acompanha o logo, sem altura própria no fluxo */
.hero__media::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__media::before { animation: none; }
}

/* =============================================================================
   SLOGAN COMO TEXTO
   O "Tudo para seu Carro" vinha dentro do PNG e carregava o contorno preto da
   arte, que borrava na tela. Agora é texto: fonte limpa, branco puro e nítido
   em qualquer tamanho.
   ========================================================================== */
.hero__slogan {
  margin: clamp(-2px, -0.4vw, 2px) auto 0;
  padding-right: clamp(4px, 2vw, 26px);
  font-family: var(--font-title);
  font-size: clamp(17px, 3.1vw, 30px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .01em;
  line-height: 1.1;
  text-align: right;
  color: var(--white);
  width: min(94%, 640px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

/* a marca perde a altura do slogan antigo: proporção nova */
.hero__logo,
.hero__media::after { aspect-ratio: 827 / 228; }

.hero__media::after {
  -webkit-mask-image: url('/assets/brand/logo-mark.png');
  mask-image: url('/assets/brand/logo-mark.png');
}

@media (min-width: 980px) {
  .hero__slogan { width: min(88%, 700px); font-size: clamp(22px, 2.2vw, 32px); }
}

/* =============================================================================
   CARD DE PRODUTO — FOTO E PREÇO "DE / POR"
   Os produtos cadastrados no painel podem ter foto, marca e preço promocional.
   ========================================================================== */

/* capa com foto real ocupa todo o espaço, no lugar do ícone */
.post__media--photo { padding: 0; }

.post__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* selo de desconto no canto oposto à etiqueta */
.post__off {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--white);
  background: #C62828;
}

/* preço promocional: valor antigo riscado + valor atual em destaque */
.post__price--sale {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.post__price--sale s {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(11, 11, 12, .55);
  text-decoration-thickness: 1.5px;
}

.post__price--sale strong {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* cabeçalho do card: título + marca/estoque */
.post__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.post__head h3 { margin: 0; }

.post__brand,
.post__out {
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
}

.post__brand {
  color: var(--gray-600);
  border: 1px solid var(--line-light);
}

.post__out {
  color: #8A5A00;
  background: #FFF4CC;
  border: 1px solid #F0D98A;
}

/* =============================================================================
   GALERIA DE FOTOS NO CARD
   Produto com mais de uma foto vira carrossel: setas, bolinhas e arraste.
   ========================================================================== */
.gal {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gal__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}

.gal__slide {
  flex: 0 0 100%;
  height: 100%;
}

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

/* setas */
.gal__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--black);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}

.gal__arrow svg { width: 20px; height: 20px; }
.gal__arrow:hover { background: var(--yellow); }
.gal__arrow--prev { left: 8px; }
.gal__arrow--next { right: 8px; }

/* no desktop as setas aparecem ao passar o mouse; no toque ficam sempre visíveis */
.post:hover .gal__arrow,
.gal__arrow:focus-visible { opacity: 1; }

@media (hover: none) {
  .gal__arrow { opacity: .92; }
}

/* bolinhas */
.gal__dots {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.gal__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: background .2s ease, transform .2s ease;
}

.gal__dot.is-on {
  background: var(--yellow);
  transform: scale(1.35);
}

/* a área de toque da bolinha é maior que o ponto visível */
.gal__dot::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -9px 0 0 -9px;
}

/* o preço não pode brigar com as bolinhas */
.post__media--photo .post__price { bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  .gal__track { transition: none; }
}