/* Império das Peças — BIO PRIME
   A página é o pátio da loja: a parede azul da fachada, a placa do nome parafusada,
   as fichas das sucatas e o balcão de consulta. Amarelo só na ação. */

:root {
  /* cor */
  --fachada: #1D5BA0;        /* azul real da parede da loja */
  --fachada-fundo: #174C87;
  --anil: #13115C;           /* navy do logo */
  --anil-fundo: #0D0B45;
  --amarelo: #FFCB29;        /* reservado à ação */
  --amarelo-press: #F0B800;
  --branco: #FFFFFF;
  --aco: #566074;            /* texto de apoio */
  --chapa: #EEF1F6;          /* superfície clara */
  --linha: #D3D8E2;
  --foco: #FFCB29;
  --foco-claro: #1D5BA0;

  /* tipo */
  --f-placa: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --f-texto: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion */
  --motion-instant: 90ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 450ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --shift-sm: 6px;
  --shift-md: 12px;
  --press-scale: 0.98;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-sm: 0px;
    --shift-md: 0px;
    --press-scale: 1;
    --motion-scene: 200ms;
  }
}

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

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

body {
  margin: 0;
  background: var(--anil-fundo);
  color: var(--anil);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-placa);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.005em;
}

h2 { font-size: clamp(34px, 9.4vw, 40px); }
h3 { font-size: 22px; }
p { margin: 0; }

a { color: inherit; }

.junto { white-space: nowrap; }

:focus-visible {
  outline: 3px solid var(--foco-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--amarelo);
  color: var(--anil);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.pular:focus { top: calc(12px + var(--safe-top)); }

.pagina {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  background: var(--branco);
  overflow-x: clip;
}

.marco-rolagem {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.miolo { padding: 0 var(--gutter); }

.cena { padding: 64px 0; }

.cena-intro {
  margin-top: 14px;
  max-width: 34em;
  color: var(--aco);
}

.nota {
  margin-top: 14px;
  font-size: 14px;
  color: var(--aco);
}

/* ---------- Botões e links ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  width: 100%;
  padding: 14px 22px;
  border: 0;
  border-radius: 8px;
  font-family: var(--f-texto);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.btn i { font-size: 20px; }
.btn:active { transform: scale(var(--press-scale)); }

.btn-amarelo {
  background: var(--amarelo);
  color: var(--anil);
  box-shadow: 0 3px 0 var(--amarelo-press);
}
.btn-amarelo:active {
  background: var(--amarelo-press);
  box-shadow: 0 1px 0 var(--amarelo-press);
}
.btn-amarelo:focus-visible { outline-color: var(--anil); }

.btn-anil {
  background: var(--anil);
  color: var(--branco);
}
.btn-anil:active { background: var(--fachada); }

.btn-contorno {
  background: transparent;
  color: var(--anil);
  box-shadow: inset 0 0 0 2px var(--anil);
}
.btn-contorno:active { background: var(--chapa); }

.link-claro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
}
.link-claro:active { opacity: 0.72; }

.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-weight: 600;
  color: var(--anil);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.link-acao i { font-size: 19px; color: #128C3E; }
.link-acao span, .link-acao { text-underline-offset: 4px; }
.link-acao:active { opacity: 0.7; }

@media (hover: hover) and (pointer: fine) {
  .btn-amarelo:hover { background: #FFD54F; }
  .btn-anil:hover { background: #1C1A78; }
  .link-acao:hover { text-decoration: underline; }
}

/* ---------- CENA 1 · Pátio (Hero) ---------- */

.patio {
  position: relative;
  background: var(--fachada);
  color: var(--branco);
  padding-top: calc(28px + var(--safe-top));
}

.placa {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 340px);
  margin: 0 auto -30px;
  padding: 20px 26px 18px;
  background: var(--branco);
  color: var(--anil);
  border-radius: 6px;
  text-align: center;
  /* borda estampada da chapa + sombra de peça presa na parede */
  box-shadow:
    inset 0 0 0 4px var(--branco),
    inset 0 0 0 5px rgba(19, 17, 92, 0.16),
    0 16px 26px -14px rgba(4, 14, 40, 0.7);
  transform-origin: 18px 18px;   /* gira em volta do primeiro parafuso */
  -webkit-tap-highlight-color: transparent;
}

.placa-logo {
  width: 120px;
  height: auto;
  margin: 0 auto 10px;
}

.placa-nome {
  font-size: clamp(36px, 10.6vw, 44px);
  font-weight: 900;
  line-height: 0.95;
  color: var(--anil);
}

/* o que a loja vende, em destaque: faixa anil dentro da placa, como a tarja de um letreiro */
.placa-tag {
  margin: 14px 0 6px;
  padding: 10px 12px 11px;
  border-radius: 4px;
  background: var(--anil);
  color: var(--branco);
}
.placa-tag-tipo {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--amarelo);
}
.placa-tag-veiculos {
  display: block;
  margin-top: 3px;
  font-family: var(--f-placa);
  font-size: clamp(22px, 6.6vw, 27px);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

/* parafuso sextavado de aço */
.parafuso {
  position: absolute;
  width: 16px;
  height: 16px;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: radial-gradient(circle at 38% 32%, #F4F6FA 0 18%, #A9B1C0 52%, #6B7486 100%);
}
.parafuso::after {
  /* fenda de chave */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 2px;
  margin: -1px 0 0 -4.5px;
  background: #4C5466;
  border-radius: 1px;
}
.parafuso-1 { left: 10px; top: 10px; }
.parafuso-2 { right: 10px; top: 10px; }
.parafuso-3 { left: 10px; bottom: 10px; }
.parafuso-4 { right: 10px; bottom: 10px; }
.parafuso-2::after { rotate: 60deg; }
.parafuso-3::after { rotate: -35deg; }
.parafuso-4::after { rotate: 20deg; }

.fachada {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #0C2D4E;
}
.fachada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.patio-texto {
  padding: 24px var(--gutter) 30px;
}

.patio-lead {
  font-size: 18px;
  line-height: 1.5;
}

.selo-detran {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-weight: 600;
}
.selo-detran i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--fachada);
  font-size: 16px;
  flex: none;
}

.patio-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  margin-top: 10px;
}

.patio :focus-visible { outline-color: var(--amarelo); }

/* ---------- Abertura: a placa é parafusada e endireita ----------
   Só existe com JS. Estado inicial: placa pendurada pelo primeiro parafuso, outros soltos.
   .abertura-corre = sequência completa · .sem-abertura / .abertura-pulada = estado final.
   revela-seguro: se o script não decidir em 2,6s, a placa assenta sozinha. */

@keyframes revela-seguro { to { rotate: 0deg; } }
@keyframes revela-seguro-parafuso { to { opacity: 1; scale: 1; rotate: 0deg; } }

.js .placa {
  rotate: 3.2deg;
  animation: revela-seguro 0s 2.6s forwards;
}
.js .parafuso-2,
.js .parafuso-3,
.js .parafuso-4 {
  opacity: 0;
  scale: 1.5;
  rotate: -240deg;
  animation: revela-seguro-parafuso 0s 2.6s forwards;
}
.abertura-espera .placa,
.abertura-espera .parafuso { animation-play-state: paused; }

/* placa: espera o 2º parafuso, sobe até o nível, passa um fio e assenta; no fim, o tranco do último aperto */
@keyframes placa-endireita {
  0%, 22% { rotate: 3.2deg; translate: 0 0; }
  44% { rotate: -0.5deg; translate: 0 0; }
  52% { rotate: 0deg; translate: 0 0; }
  86% { rotate: 0deg; translate: 0 0; }
  91% { rotate: 0deg; translate: 0 2px; }
  100% { rotate: 0deg; translate: 0 0; }
}

/* parafuso: cai girando e aperta (gira e diminui até assentar) */
@keyframes parafuso-aperta {
  0% { opacity: 0; scale: 1.5; rotate: -240deg; }
  25% { opacity: 1; }
  80% { scale: 1.04; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}

.abertura-corre .placa {
  animation: placa-endireita 1650ms var(--ease-standard) both;
}
.abertura-corre .parafuso-2,
.abertura-corre .parafuso-3,
.abertura-corre .parafuso-4 {
  animation: parafuso-aperta 420ms var(--ease-emphasis) both;
}
.abertura-corre .parafuso-2 { animation-delay: 120ms; }
.abertura-corre .parafuso-3 { animation-delay: 820ms; }
.abertura-corre .parafuso-4 { animation-delay: 1060ms; }

.sem-abertura .placa,
.abertura-pulada .placa,
.abertura-assentada .placa {
  rotate: 0deg;
  translate: 0 0;
  animation: none;
  transition: rotate var(--motion-standard) var(--ease-enter);
}
.sem-abertura .parafuso,
.abertura-pulada .parafuso,
.abertura-assentada .parafuso {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  animation: none;
  transition: opacity var(--motion-standard) var(--ease-standard);
}

/* eco: um toque na placa dá mais um aperto curto nos parafusos */
@keyframes parafuso-eco {
  50% { rotate: 90deg; scale: 0.92; }
  100% { rotate: 180deg; scale: 1; }
}
.placa.is-apertando .parafuso { animation: parafuso-eco 360ms var(--ease-emphasis) both; }
.placa.is-apertando .parafuso-2 { animation-delay: 50ms; }
.placa.is-apertando .parafuso-3 { animation-delay: 100ms; }
.placa.is-apertando .parafuso-4 { animation-delay: 150ms; }

/* ---------- CENA 2 · Consulta ---------- */

.cena-consulta { padding-top: 72px; }

.consulta { margin-top: 26px; }

.consulta-grupo {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.consulta-grupo legend,
.consulta-campo label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-weight: 600;
  font-size: 15px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--chapa);
  color: var(--anil);
  box-shadow: inset 0 0 0 1.5px var(--linha);
  font-family: var(--f-placa);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] {
  background: var(--anil);
  color: var(--branco);
  box-shadow: none;
}

.consulta-campo { margin-bottom: 22px; }
.consulta-campo input {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--branco);
  box-shadow: inset 0 0 0 2px var(--linha);
  color: var(--anil);
  font: inherit;
  font-size: 17px;
  transition: box-shadow var(--motion-fast) var(--ease-standard);
}
.consulta-campo input::placeholder { color: #667085; }
.consulta-campo input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--fachada); }
.consulta-campo input:focus-visible { outline: 3px solid var(--fachada); outline-offset: 2px; }

.vendedores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vendedor {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vendedor input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}
.vendedor span {
  display: block;
  min-height: 64px;
  padding: 11px 12px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--linha);
  font-size: 14px;
  color: var(--aco);
  transition: box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.vendedor strong {
  display: block;
  font-size: 16px;
  color: var(--anil);
}
.vendedor input:checked + span {
  background: var(--chapa);
  box-shadow: inset 0 0 0 2.5px var(--anil);
}
.vendedor input:focus-visible + span { outline: 3px solid var(--fachada); outline-offset: 2px; }

.consulta-previa {
  position: relative;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 8px 8px 8px 2px;
  background: var(--chapa);
  color: var(--anil);
  font-size: 15px;
}
.consulta-previa::before {
  content: 'Mensagem que vai pelo WhatsApp';
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--aco);
}
.consulta-previa.is-atualizada { animation: previa-pisca var(--motion-emphasis) var(--ease-enter); }
@keyframes previa-pisca {
  from { background-color: #FFF1C2; }
}

/* ---------- CENA 3 · Sucatas no pátio ---------- */

.cena-sucatas {
  background: var(--anil);
  color: var(--branco);
}
.cena-sucatas .cena-intro { color: #C9CCE8; }
.cena-sucatas :focus-visible { outline-color: var(--amarelo); }

.trilho {
  display: flex;
  gap: 14px;
  margin: 28px 0 0;
  padding: 4px var(--gutter) 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }

.sucata {
  flex: 0 0 min(80%, 360px);
  scroll-snap-align: start;
  background: var(--branco);
  color: var(--anil);
  border-radius: 4px;
  overflow: hidden;
}
.sucata img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #2A2878;
}
.sucata-ficha { padding: 16px 16px 6px; }
.sucata-ficha h3 { font-size: 26px; }
.sucata-ficha dl {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  column-gap: 18px;
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1.5px dashed var(--linha);
}
.sucata-ficha dt {
  font-size: 13px;
  color: var(--aco);
}
.sucata-ficha dd {
  margin: 0;
  font-family: var(--f-placa);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
}

.trilho-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.trilho-nav[hidden] { display: none; }
.trilho-nav button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--branco);
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-instant) var(--ease-standard);
}
.trilho-nav button:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.22); }
.trilho-nav button:disabled { opacity: 0.35; cursor: default; }
.trilho-contador {
  font-family: var(--f-placa);
  font-size: 20px;
  font-weight: 800;
}

/* ---------- CENA 4 · Como comprar ---------- */

.passos {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.passos li {
  position: relative;
  padding: 0 0 26px 62px;
  counter-increment: passo;
}
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -6px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--anil);
  color: var(--amarelo);
  font-family: var(--f-placa);
  font-size: 24px;
  font-weight: 900;
}
.passos li:not(:last-child)::after {
  /* a rota entre um passo e o próximo */
  content: '';
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: 2px;
  border-left: 2px dashed var(--linha);
}
.passos h3 { font-size: 24px; }
.passos p { margin-top: 6px; color: var(--aco); }
.passos li:last-child { padding-bottom: 0; }

/* ---------- CENA 5 · Credenciado ---------- */

.cena-credenciado { background: var(--chapa); }

.vantagens {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.vantagens li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vantagens i {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--fachada);
  color: var(--branco);
  font-size: 17px;
}
.vantagens strong {
  display: block;
  font-size: 17px;
}
.vantagens span { color: var(--aco); }
.vantagens strong { color: var(--anil); }

.avaliacoes-titulo {
  margin-top: 48px;
  font-size: 28px;
}
.avaliacoes {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.avaliacoes li {
  padding: 18px 0;
  border-top: 1.5px solid var(--linha);
}
.avaliacoes li:last-child { border-bottom: 1.5px solid var(--linha); }
.avaliacoes blockquote { margin: 0; font-size: 17px; }
.avaliacao-autor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 15px;
}
.estrelas {
  display: inline-flex;
  gap: 2px;
  color: var(--fachada);
  font-size: 12px;
}

/* ---------- CENA 6 · Canais oficiais ---------- */

.cena-canais {
  background: var(--fachada);
  color: var(--branco);
}
.cena-canais .cena-intro { color: #E3ECF7; }
.cena-canais :focus-visible { outline-color: var(--amarelo); }

.canais {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.canal {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--branco);
  color: var(--anil);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-instant) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}
.canal:active { transform: scale(var(--press-scale)); background: #F6F0DC; }
.canal i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--anil);
  font-size: 21px;
}
.canal-numero {
  font-family: var(--f-placa);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}
.canal-quem {
  margin-top: 3px;
  font-size: 14px;
  color: var(--aco);
}

.alerta {
  margin-top: 22px;
  padding: 18px 18px 18px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.alerta h3 { font-size: 22px; }
.alerta ul {
  margin: 10px 0 12px;
  padding-left: 20px;
}
.alerta li { margin-bottom: 4px; }
.alerta li::marker { color: var(--amarelo); }
.alerta p { font-size: 15px; color: #E3ECF7; }

/* ---------- CENA 7 · Loja on-line ---------- */

.lojas {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.loja {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  border-bottom: 1.5px solid var(--linha);
  color: var(--anil);
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.lojas li:first-child .loja { border-top: 1.5px solid var(--linha); }
.loja i:first-child {
  width: 24px;
  text-align: center;
  font-size: 19px;
  color: var(--fachada);
}
.loja span { flex: 1; }
.loja-sai { font-size: 14px; color: var(--aco); }
.loja:active { background: var(--chapa); }

/* ---------- CENA 8 · Visita ---------- */

.cena-visita { padding-top: 0; background: var(--branco); }
.visita-foto {
  width: 100%;
  aspect-ratio: 640 / 464;
  object-fit: cover;
  margin-bottom: 30px;
  background: #14375D;
}
.endereco {
  margin-top: 16px;
  font-family: var(--f-placa);
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
}
.horario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--aco);
}
.horario i { color: var(--fachada); }

.visita-acoes {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.mapa {
  margin-top: 16px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--chapa);
}
.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- CENA 9 · CTA final ---------- */

.cena-final {
  background: var(--anil);
  color: var(--branco);
  padding: 72px 0 60px;
}
.cena-final h2 { max-width: 12em; }
.cena-final p { margin: 14px 0 26px; color: #C9CCE8; }
.cena-final :focus-visible { outline-color: var(--amarelo); }
.final-alt {
  margin-top: 12px;
  font-size: 15px;
}

/* ---------- Rodapé ---------- */

.rodape {
  padding: 28px var(--gutter) calc(30px + var(--safe-bottom));
  background: var(--anil-fundo);
  color: #D7D9F0;
  text-align: center;
  font-size: 14px;
}
.rodape :focus-visible { outline-color: var(--amarelo); }

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: #E6E7F5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--amarelo);
  --seal-ring: 0.4 1.4;       /* pontilhado como a rota do envio */
  --seal-font: var(--f-texto);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }
.credito:active .selo-b2 { rotate: -10deg; }
.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

/* ---------- CTA flutuante (Regra do CTA) ---------- */

.barra {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 560px);
  padding: 0 16px calc(14px + var(--safe-bottom));
  translate: -50% 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard);
}
.barra[hidden] { display: none; }
.barra.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--motion-emphasis) var(--ease-enter),
    translate var(--motion-emphasis) var(--ease-enter),
    visibility 0s;
}
.barra .btn {
  box-shadow: 0 3px 0 var(--amarelo-press), 0 12px 28px -10px rgba(5, 4, 40, 0.65);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  /* placa já reta e parafusos já apertados; só um fade curto dos parafusos */
  .js .placa,
  .abertura-corre .placa { rotate: 0deg; animation: none; }
  .js .parafuso-2,
  .js .parafuso-3,
  .js .parafuso-4 {
    scale: 1;
    rotate: 0deg;
    opacity: 1;
    animation: none;
  }
  .placa.is-apertando .parafuso { animation: none; }
  .barra,
  .barra.is-visivel { translate: -50% 0; }
  .credito:active .selo-b2 { rotate: none; }
  .consulta-previa.is-atualizada { animation: none; }
}

/* ---------- Telas maiores ---------- */

@media (min-width: 560px) {
  body { padding: 0; }
  .pagina { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
}

@media (max-width: 340px) {
  :root { --gutter: 16px; }
  .vendedores { grid-template-columns: 1fr; }
  .canal-numero { font-size: 26px; }
}