/* ==========================================================================
   LR MOTORS — folha de estilo única
   --------------------------------------------------------------------------
   A cor vem do logótipo: extraí o PDF para SVG e o azul dos vectores é
   exactamente #004AAD. A tabuleta do stand é branco sobre esse azul, e é essa
   inversão que o cabeçalho e o rodapé usam.
   ========================================================================== */

/* ------------------------------------------------------------- variáveis */
:root {
  /* marca */
  --azul: #004AAD;
  --azul-fundo: #003C8C;      /* hover: mais escuro, mantém o contraste AA */
  --azul-tenue: #E8F0FB;
  --azul-risca: #C7DAF5;
  --navy: #0A1729;            /* superfícies escuras — azul da marca dessaturado */
  --navy-2: #132542;

  /* tinta e superfícies */
  --tinta: #0E1726;
  --tinta-2: #47566B;
  /* 4,38:1 em branco — NÃO passa AA em texto normal (mínimo 4,5:1). Calculado,
     não estimado. Serve para ícones e traços, onde o mínimo é 3:1; para texto
     pequeno usar --tinta-2, que dá 7,47:1. */
  --tinta-3: #6A7A90;
  --borda: #E3E9F2;
  --borda-forte: #CBD5E4;
  --fundo: #F5F7FB;
  --carta: #FFFFFF;

  /* estados */
  --verde: #17794A;
  --verde-tenue: #E3F4EB;
  --ambar: #8A5A00;
  --ambar-tenue: #FDF1D8;
  --vermelho: #B3261E;

  /* medidas */
  --raio: 12px;
  --raio-g: 20px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --larg: 1240px;
  --sombra: 0 1px 2px rgba(14, 23, 38, .05), 0 10px 30px -14px rgba(14, 23, 38, .22);
  --sombra-alta: 0 2px 6px rgba(14, 23, 38, .08), 0 24px 56px -20px rgba(14, 23, 38, .34);
  --t: .22s cubic-bezier(.2, 0, 0, 1);

  /* Espaço que o cabeçalho ocupa: a barra mais os 14 px de folga acima dela.
     Serve para o `top:` das coisas pegajosas e para o vão do menu. */
  --h-topo: 98px;
  --h-logo: 52px;

  --f: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 1180px) {
  :root { --h-topo: 86px; --h-logo: 42px; }
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
/* `scroll-padding-top` porque o cabeçalho é pegajoso: sem isto, tudo o que se
   alcança por âncora — incluindo o «Saltar para o conteúdo» — aterrava debaixo
   da barra. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--h-topo) + .5rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; font-family: var(--f); color: var(--tinta); background: var(--fundo);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* O `hidden` do HTML só esconde por causa de uma regra da folha do browser, e
   QUALQUER `display` escrito por nós ganha-lhe. Foi assim que os filtros
   pareciam não funcionar: o JS punha `hidden` em 13 cartões, mas o
   `.cartao { display: flex }` mantinha-os à vista — o contador dizia «1
   viatura» com as 14 no ecrã. É por isto que a linha leva `!important`: é o
   único sítio onde ele é a solução certa e não um remendo. */
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

.envolve { max-width: var(--larg); margin-inline: auto; padding-inline: var(--gutter); }
.visualmente-escondido {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--azul); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--raio) 0;
}
.saltar:focus { left: 0; }

/* --------------------------------------------------------------- títulos */
.h-secao {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.12;
}
.h-secao--claro { color: #fff; }
.sobretitulo {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul); margin-bottom: .5rem;
}
.sobretitulo--claro { color: #7FB0FF; }
.lead { color: var(--tinta-2); font-size: 1.05rem; max-width: 62ch; }

/* --------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: .95rem; cursor: pointer; text-align: center;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  min-height: 46px;                                  /* alvo de toque confortável */
}
.btn:active { transform: translateY(1px); }
.btn--principal { background: var(--azul); color: #fff; }
.btn--principal:hover { background: var(--azul-fundo); }
.btn--contorno { border-color: var(--borda-forte); background: var(--carta); color: var(--tinta); }
.btn--contorno:hover { border-color: var(--azul); color: var(--azul); }
.btn--claro { background: #fff; color: var(--azul); }
.btn--claro:hover { background: var(--azul-tenue); }
.btn--fantasma { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--fantasma:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--zap { background: #1FA855; color: #fff; }
.btn--zap:hover { background: #17853F; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ======================================================== CABEÇALHO ===== */
/* O logótipo entra grande e encolhe ao descer — é o pedido do cliente. Faz-se
   com duas variáveis e uma classe, e não com JS a escrever estilos: assim a
   transição é do CSS e o `prefers-reduced-motion` desliga-a de graça. */
/* O cabeçalho é uma barra FLUTUANTE: o <header> é transparente e pega-se
   descolado do topo; a barra vive lá dentro, arredondada e afastada das margens.
   É o desenho do stand que serviu de referência.

   A barra é clara em todas as páginas porque o logótipo tem de aparecer na cor
   original da marca. Sobre o hero, que é navy, destaca-se com força; sobre as
   páginas claras é o contorno e a sombra que a separam do fundo. */
/* O afastamento do topo é PADDING do cabeçalho, não `top: 14px`: assim a folga
   existe tanto em repouso como quando fica pegado, e o que passa por trás dela
   é a página, como na referência. */
/* O afastamento do topo é PADDING do cabeçalho, não `top: 14px`: assim a folga
   existe tanto em repouso como quando fica pegado, e o que passa por trás dela
   é a página, como na referência.

   A faixa é TRANSPARENTE e a cápsula flutua sobre o que vier por baixo — sobre
   a fotografia do hero na inicial, sobre o fundo claro nas outras páginas. Já
   tentei pôr aqui uma faixa branca de bordo a bordo e o cliente preferiu assim;
   fica registado para não se voltar a mexer sem lho perguntar. */
.topo {
  position: sticky; top: 0; z-index: 60;
  padding: 14px var(--gutter) 0; pointer-events: none;
}
.topo > * { pointer-events: auto; }
/* A barra é CLARA para o logótipo poder ir na sua cor, o azul #004AAD da marca.
   Azul sobre o navy escuro que estava aqui antes não tinha contraste nenhum. */
.topo__barra {
  max-width: var(--larg); margin-inline: auto; padding-inline: 2rem;
  border-radius: 20px;
  background: var(--carta); color: var(--tinta);
  /* O contorno e a sombra são o que separa a cápsula do fundo nas páginas
     claras, onde ela é quase da cor da página. Sobre o hero escuro nem se
     notam. */
  border: 1px solid rgba(14, 23, 38, .07);
  box-shadow: 0 2px 10px -4px rgba(14, 23, 38, .12);
  /* Logótipo, navegação e contacto. As colunas laterais são AMBAS 1fr para a
     navegação cair no centro exacto da barra. Com `auto 1fr auto` ela ficava
     centrada na coluna do meio, que não é o meio da barra: o logótipo tem 127 px
     e o contacto 261 px, o que a deixava 67 px à esquerda do centro real. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem;
  transition: height var(--t), box-shadow var(--t);
}
/* Ao descer, a cápsula levanta-se um pouco mais do fundo. */
.topo--encolhido .topo__barra { box-shadow: 0 8px 26px -12px rgba(14, 23, 38, .3); }

/* As alturas do cabeçalho estão escritas à mão em vez de virem de `var()`.
   Aprendido à força: com `height: var(--h-topo)` e a variável a ser redefinida
   no ANCESTRAL (.topo--encolhido), a transição do Chrome não reage e a altura
   fica presa no valor inicial — medido, e só com `transition: none` é que
   obedecia. Mudar o valor no próprio elemento, por um selector descendente,
   transiciona sempre. O `--h-topo` continua a existir para os `top:` das
   coisas pegajosas, onde não há transição nenhuma. */
.topo__barra { height: 84px; }
.topo--encolhido .topo__barra { height: 64px; }

/* O logótipo fica à esquerda da barra e na cor original da marca — o SVG é todo
   `currentColor`, por isso basta a cor daqui. O `justify-self` é o que o encosta
   ao bordo, porque a coluna dele é 1fr e por omissão ele esticaria.

   O afastamento ao bordo vem do `padding-inline` da barra, que subiu de 1,2rem
   para 2rem, e não de uma margem só no logótipo: assim o contacto do outro lado
   recolhe o mesmo, os dois lados ficam simétricos e a navegação — que se centra
   na barra e não na coluna — não sai do sítio. Antes ficava a 20 px de um canto
   com 20 px de raio, o que o deixava espremido contra a curva. */
.marca { display: inline-flex; align-items: center; color: var(--azul); justify-self: start; }
.marca svg, .marca img { height: 52px; width: auto; transition: height var(--t); }
.topo--encolhido .marca svg, .topo--encolhido .marca img { height: 38px; }

/* ---- navegação, ao centro da barra */
.topo__nav { display: flex; align-items: center; gap: .35rem; min-width: 0; justify-self: center; }

/* Sublinhado que varre da esquerda para a direita: um gradiente de fundo cuja
   largura se anima, em vez de um pseudo-elemento.

   `background-origin: content-box` é o que faz o risco casar EXACTAMENTE com o
   texto. Com o `padding-box` que estava aqui antes, o risco começava na borda do
   padding e não onde o texto começa — media 8,8 px deslocado para a esquerda,
   arrancava antes do «I» de INÍCIO e acabava antes do «o». Assim o 0 e o 100%
   passam a ser as pontas do texto, e a largura vem de graça. */
.topo__link {
  padding: .6rem .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-2); white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 0 calc(100% + 5px);
  background-size: 0 1.5px;
  transition: color var(--t), background-size .15s cubic-bezier(.4, 0, .2, 1);
}
/* A referência não marca a página actual de forma nenhuma — aqui marca-se, que
   é o mínimo para se saber onde se está. */
/* O `- .05em` desconta o letter-spacing que o Chrome acrescenta DEPOIS da última
   letra e que fazia o risco passar 1,2 px além da tinta. */
.topo__link:hover { color: var(--tinta); background-size: calc(100% - .05em) 1.5px; }
/* `page` = esta página. `true` = dentro desta secção (as fichas de viatura), com
   o risco mais discreto para não competir com a página exacta. */
.topo__link[aria-current="page"] { color: var(--azul); background-size: calc(100% - .05em) 1.5px; }
.topo__link[aria-current="true"] { color: var(--tinta); background-size: calc(100% - .05em) 1.5px; opacity: .85; }

/* ---- zona da direita: número com o aviso do custo, e o WhatsApp */
.topo__dir { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; min-width: 0; justify-self: end; }
.topo__tel { display: inline-flex; align-items: center; gap: .5rem; color: var(--tinta); }
.topo__tel svg { width: 16px; height: 16px; flex: none; color: var(--tinta-3); }
.topo__tel a { font-size: .9rem; font-weight: 700; white-space: nowrap; }
.topo__tel a:hover { text-decoration: underline; }
/* O aviso do custo tem de acompanhar o número — DL 59/2021. Vai numa segunda
   linha, pequena, mas com contraste a sério: --tinta-2 dá 7,47:1 em branco.
   Não usar --tinta-3 aqui, que só dá 4,38:1 e não passa AA em texto. */
.topo__tel small {
  display: block; font-size: .7rem; line-height: 1.25;
  color: var(--tinta-2); white-space: nowrap;
}
.topo__zap {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  /* Não é o #1FA855 dos botões: contra esta barra clara dava 2,64:1, e o limite
     de um componente precisa de 3:1. Este dá 4,01:1 no pior caso, sobre o hero. */
  background: #17853F;
  transition: background var(--t);
}
.topo__zap:hover { background: #0F6B33; }
.topo__zap svg { width: 19px; height: 19px; }

/* Abaixo de 1180 px não cabem as três zonas: fica logótipo à esquerda e
   hamburguer à direita, como no telemóvel do stand de referência. */
@media (max-width: 1180px) {
  .topo__barra { grid-template-columns: auto 1fr; height: 72px; padding-inline: 1.25rem; }
  .topo--encolhido .topo__barra { height: 60px; }
  .topo__nav, .topo__dir { display: none; }
  .marca svg, .marca img { height: 42px; }
  .topo--encolhido .marca svg, .topo--encolhido .marca img { height: 34px; }
}

/* Vive dentro da barra clara, por isso é escuro sobre claro. */
.hamburger {
  display: none; width: 44px; height: 44px; border: 1px solid rgba(14, 23, 38, .5);
  background: transparent; border-radius: 12px; cursor: pointer;
  align-items: center; justify-content: center; margin-left: auto; flex: none;
  justify-self: end;
}
.hamburger span {
  display: block; width: 20px; height: 2px; background: var(--tinta); border-radius: 2px;
  position: relative; transition: background var(--t);
}
.hamburger span::before, .hamburger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--tinta);
  border-radius: 2px; transition: transform var(--t), top var(--t);
}
.hamburger span::before { top: -6px; }
.hamburger span::after { top: 6px; }
body.menu-aberto .hamburger span { background: transparent; }
body.menu-aberto .hamburger span::before { top: 0; transform: rotate(45deg); }
body.menu-aberto .hamburger span::after { top: 0; transform: rotate(-45deg); }

/* ------------------------------------------------- menu de ecrã inteiro */
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--carta);
  display: grid; grid-template-rows: var(--h-topo) 1fr auto;
  opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
}
body.menu-aberto .menu { opacity: 1; visibility: visible; }
.menu__corpo {
  padding: 1rem var(--gutter) 2rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: .25rem;
}
.menu__link {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; padding: .7rem 0;
  border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between;
  align-items: center;
}
.menu__link[aria-current="page"] { color: var(--azul); }
.menu__link[aria-current="true"] { color: var(--tinta-2); }
.menu__link svg { width: 20px; height: 20px; color: var(--tinta-3); }
/* Pé do menu: «Fale connosco» com três acções em ícone, como na referência. */
.menu__pe { padding: 1.2rem var(--gutter) 2rem; border-top: 1px solid var(--borda); }
.menu__rotulo {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: .8rem;
}
.menu__contactos { display: flex; gap: .6rem; }
.menu__acao {
  flex: 1; display: grid; justify-items: center; gap: .4rem;
  padding: .9rem .4rem; border: 1px solid var(--borda); border-radius: var(--raio);
  font-size: .78rem; font-weight: 700; text-align: center; color: var(--tinta);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.menu__acao:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-tenue); }
.menu__acao svg { width: 22px; height: 22px; color: var(--azul); }
.menu__pe .nota-chamada { margin-top: .8rem; text-align: center; }

@media (max-width: 1180px) {
  .hamburger { display: flex; }
  /* O bloqueio do scroll da página vive AQUI, e não numa linha de JavaScript, de
     propósito: acima dos 1180 px a regra deixa de casar e o scroll liberta-se
     sozinho. Com `style.overflow` posto por JS, crescer a janela com o menu
     aberto deixava a página trancada sem nada visível para a soltar. */
  body.menu-aberto { overflow: hidden; }
}
@media (min-width: 1181px) { .menu { display: none; } }

/* ============================================================= HERO ===== */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
/* Quando a página abre com um hero, ele sobe por baixo do cabeçalho para a
   barra flutuante ficar sobre a foto, como na referência — em vez de assentar
   numa faixa clara acima dela. O padrão só se aplica ao PRIMEIRO filho: nas
   páginas que abrem com conteúdo claro o cabeçalho continua no fluxo, senão o
   texto passava por baixo da barra. */
/* O hero sobe por baixo do cabeçalho para a cápsula ficar sobre a fotografia.
   Só se aplica ao PRIMEIRO filho: nas páginas que abrem com conteúdo claro o
   cabeçalho continua no fluxo, senão o texto passava por baixo da barra. */
main > .hero:first-child { margin-top: calc(-1 * var(--h-topo)); padding-top: var(--h-topo); }
.hero__fundo { position: absolute; inset: 0; }
/* O carro fica à direita, onde não há texto; o gradiente escurece a esquerda
   o suficiente para o título passar contraste AA sobre a foto. */
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 55%; }
.hero__fundo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,23,41,.97) 0%, rgba(10,23,41,.93) 34%, rgba(10,23,41,.62) 62%, rgba(10,23,41,.42) 100%),
    linear-gradient(to top, rgba(10,23,41,.75) 0%, rgba(10,23,41,0) 45%);
}
@media (max-width: 760px) {
  /* No telemóvel o texto ocupa a largura toda: a foto passa a ser só textura. */
  .hero__fundo::after { background: linear-gradient(180deg, rgba(10,23,41,.86) 0%, rgba(10,23,41,.94) 60%, rgba(10,23,41,.98) 100%); }
  .hero__fundo img { object-position: 60% 50%; }
}
.hero__corpo {
  position: relative; max-width: var(--larg); margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(3.5rem, 9vw, 6.5rem);
}
.hero__titulo {
  font-size: clamp(2.1rem, 6.2vw, 4rem); font-weight: 900; letter-spacing: -.035em;
  line-height: 1.02; max-width: 16ch;
}
.hero__texto { margin-top: 1.1rem; max-width: 52ch; color: #C9D6E8; font-size: 1.06rem; }
.hero__acoes { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .7rem; }
/* Os quatro selos do hero — garantia, oficina, retoma, financiamento — foram
   retirados a pedido do cliente. O que diziam continua dito onde é procurado:
   nas cartas do «Porquê a LR Motors» e na página de Serviços. */
@media (max-width: 620px) { .hero__acoes .btn { width: 100%; } }

/* --------------------------------------------------- pesquisa rápida */
.procura-rapida {
  position: relative; margin-top: -2.2rem; z-index: 2;
  max-width: var(--larg); margin-inline: auto; padding-inline: var(--gutter);
}
.procura-rapida__caixa {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta); padding: 1rem;
}
.procura-rapida__campos {
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: .7rem;
}
@media (max-width: 900px) { .procura-rapida__campos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .procura-rapida__campos { grid-template-columns: 1fr; } }

/* O botão de dobrar só existe no telemóvel. Acima de 620 px não há regra
   nenhuma que esconda os campos — e é isso que torna impossível o painel ficar
   vazio e sem forma de o abrir, que era o defeito da versão com <details>. */
.procura-rapida__resumo { display: none; }
@media (max-width: 620px) {
  .procura-rapida__resumo {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    width: 100%; cursor: pointer; font-weight: 800; font-size: .98rem;
    background: none; border: 0; text-align: left; color: inherit;
    /* .65rem em cima e em baixo dá 44 px de alvo. Com menos ficava em 35 —
       cumpria o mínimo de 24 do critério 2.5.8, mas 44 é o tamanho em que um
       polegar acerta sem pensar, e este é o primeiro toque da página. */
    padding: .65rem .2rem;
  }
  .procura-rapida__rotulo { display: flex; align-items: center; gap: .6rem; }
  .procura-rapida__rotulo svg { width: 19px; height: 19px; color: var(--azul); flex: none; }
  /* Chevron para baixo quando está fechado, para cima quando está aberto. */
  .procura-rapida__resumo > svg {
    width: 20px; height: 20px; flex: none; color: var(--tinta-2);
    transform: rotate(-90deg); transition: transform var(--t);
  }
  .procura-rapida__campos { margin-top: .9rem; }
  /* A classe diz FECHADO, e não «aberto», de propósito: sem JavaScript não há
     classe nenhuma e o painel aparece aberto, como sempre esteve. */
  .procura-rapida__caixa.fechado .procura-rapida__campos { display: none; }
  .procura-rapida__caixa.fechado .procura-rapida__resumo > svg { transform: rotate(90deg); }
}

/* ============================================================ SECÇÕES === */
.secao { padding: clamp(3rem, 7vw, 5rem) 0; }
.secao--tenue { background: var(--carta); }
.secao--escura { background: var(--navy); color: #fff; }
.secao__topo {
  display: flex; align-items: end; justify-content: space-between; gap: 1.5rem;
  margin-bottom: 1.8rem; flex-wrap: wrap;
}
/* O «ver mais» debaixo de uma grelha. Era um `style=` na marcação. */
.secao__mais { margin-top: 2rem; text-align: center; }

/* ------------------------------------------------------ campos de forma */
.campo { display: grid; gap: .35rem; }
.campo__rot { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.campo select, .campo input, .campo textarea {
  width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--borda-forte);
  border-radius: 10px; background: var(--carta); min-height: 46px;
}
.campo select { appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7A90' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 16px;
}
.campo select:focus, .campo input:focus, .campo textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-tenue); }
.campo textarea { min-height: 130px; resize: vertical; }

/* ========================================================== VIATURAS ==== */
.grelha {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

.cartao {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--borda-forte); }
.cartao__foto { position: relative; aspect-ratio: 4 / 3; background: var(--azul-tenue); overflow: hidden; }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,0,0,1); }
.cartao:hover .cartao__foto img { transform: scale(1.04); }
.cartao__selos { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.cartao__nfotos {
  position: absolute; right: .7rem; bottom: .7rem; background: rgba(10,23,41,.78); color: #fff;
  border-radius: 999px; padding: .25rem .6rem; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; gap: .3rem; backdrop-filter: blur(4px);
}
.cartao__nfotos svg { width: 14px; height: 14px; }
.cartao__corpo { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.cartao__titulo { font-size: 1.06rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.cartao__versao { color: var(--tinta-3); font-size: .88rem; font-weight: 500; display: block; margin-top: .1rem; }
.cartao__specs {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .87rem; color: var(--tinta-2);
  padding-top: .1rem;
}
.cartao__spec { display: flex; align-items: center; gap: .32rem; }
.cartao__spec svg { width: 15px; height: 15px; color: var(--tinta-3); flex: none; }
.cartao__pe {
  margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.cartao__preco { font-size: 1.3rem; font-weight: 900; letter-spacing: -.03em; color: var(--azul); }
.cartao__preco--consulta { font-size: 1rem; font-weight: 800; color: var(--tinta-2); }
.cartao__ver { font-size: .88rem; font-weight: 700; color: var(--tinta-2); display: flex; align-items: center; gap: .25rem; }
.cartao__ver svg { width: 15px; height: 15px; transition: transform var(--t); }
.cartao:hover .cartao__ver { color: var(--azul); }
.cartao:hover .cartao__ver svg { transform: translateX(3px); }

.selo {
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px; background: var(--carta); color: var(--tinta);
  box-shadow: 0 1px 3px rgba(14,23,38,.16);
}
/* DISPONIBILIDADE em cor cheia, CARACTERÍSTICA em cor lavada.
   ---------------------------------------------------------------------------
   Antes disto, «Reservado» e «100% elétrico» eram a mesma pastilha pálida no
   mesmo canto, e dizem coisas de natureza diferente: uma é «este carro pode
   não ser seu», a outra é uma qualidade do carro. Lado a lado, a primeira
   perdia-se — que é exactamente a que o comprador precisa de ver primeiro.
   Agora a disponibilidade é fundo cheio e texto branco, e as características
   ficam lavadas. Não é decoração: é a hierarquia a fazer-se ver sem se ler.

   As três cores contam a história sozinhas — azul «está para chegar», âmbar
   «espera», cinzento «acabou» — e mantêm ≥5,9:1 sobre branco (medido, não
   estimado), por isso passam em AA mesmo neste tamanho pequeno. */
.selo--brevemente { background: var(--azul); color: #fff; }
.selo--reservado { background: var(--ambar); color: #fff; }
.selo--vendido { background: var(--tinta-2); color: #fff; }
.selo--eletrico { background: var(--verde-tenue); color: var(--verde); }

/* estados de stock aplicados ao cartão inteiro */
.cartao--vendido .cartao__foto img { filter: grayscale(1) brightness(.86); }
/* Uma vendida não é um link — não tem página de detalhe para onde ir. Por isso
   perde também tudo o que PROMETE um clique: o cartão deixa de se levantar ao
   passar o rato e a fotografia deixa de crescer. Sem isto ficava um cartão que
   reage e não abre nada, que é a pior das combinações: quem lá passa clica,
   não acontece nada, e conclui que o site está avariado. O cursor volta ao
   normal sozinho, por já não haver `<a>`. */
/* Sem `scroll-margin-top` aqui: o `html` já tem `scroll-padding-top` para a
   navbar pegajosa (ver o topo do ficheiro) e os dois SOMAM-SE — o cartão para
   onde o reencaminhamento aterra ficava cem pixels abaixo do que devia, com um
   vão branco por cima. Quem trata da navbar é a regra global, e uma só. */
.cartao--vendido:hover {
  /* `none` e não uma sombra qualquer: em repouso o `.cartao` não declara
     `box-shadow` nenhuma, por isso repor uma aqui ACRESCENTAVA sombra ao passar
     o rato — o contrário do que se quer. */
  transform: none; box-shadow: none; border-color: var(--borda);
}
.cartao--vendido:hover .cartao__foto img { transform: none; }
/* Nota: o «Ver mais» das pastas vive na página /fotos/, que tem a sua própria
   folha de estilo embutida — não é aqui. */
/* O preço de uma vendida sai do azul da marca: em azul e forte continuava a
   pedir a atenção de quem procura um carro para comprar, mesmo riscado. O risco
   é mais grosso do que o do browser, que num número em peso 900 quase não se
   vê. */
.cartao--vendido .cartao__preco { color: var(--tinta-3); }
.cartao__preco s, .painel__preco s {
  text-decoration: line-through;
  text-decoration-thickness: .09em;
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------- filtros ---- */
.filtros {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 1.1rem; margin-bottom: 1.6rem;
}
.filtros__grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .8rem; }
.filtros__pe {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--borda); flex-wrap: wrap;
}
.filtros__contagem { font-size: .92rem; color: var(--tinta-2); }
.filtros__contagem b { color: var(--tinta); }
.limpar {
  background: none; border: 0; color: var(--azul); font-weight: 700; cursor: pointer;
  font-size: .9rem; padding: .4rem .2rem; text-decoration: underline; text-underline-offset: 3px;
}

/* barra de filtros do telemóvel */
.filtros-movel {
  display: none; position: sticky; top: var(--h-topo); z-index: 40;
  background: var(--fundo); padding: .7rem 0; border-bottom: 1px solid var(--borda);
}
@media (max-width: 760px) {
  .filtros { display: none; }
  .filtros.aberto { display: block; position: fixed; inset: 0; z-index: 70; margin: 0;
    border-radius: 0; overflow-y: auto; padding: 1rem var(--gutter) 6rem; }
  .filtros-movel { display: block; }
  .filtros__fechar { position: sticky; bottom: 0; margin: 0 calc(var(--gutter) * -1) 0;
    padding: .8rem var(--gutter); background: var(--carta); border-top: 1px solid var(--borda); }
  /* O `scroll-padding-top` do `html` conta a navbar e mais nada — mas AQUI há um
     segundo elemento pegajoso por baixo dela, esta barra de filtros, com 76 px
     medidos. Quem chega de um link antigo de uma vendida (e chega quase sempre
     pelo WhatsApp, ou seja, de telemóvel) aterrava com a etiqueta VENDIDO do
     seu carro escondida por trás da barra — justamente a informação por que
     ali veio parar. A compensação vive dentro desta media query porque a barra
     também: em ecrã largo os 76 px eram um vão branco sem razão. */
  .cartao--vendido[id] { scroll-margin-top: 5.5rem; }
}

.vazio {
  text-align: center; padding: 3.5rem 1rem; background: var(--carta);
  border: 1px dashed var(--borda-forte); border-radius: var(--raio-g);
}
.vazio h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .4rem; }
.vazio p { color: var(--tinta-2); margin-bottom: 1.2rem; }

/* ==================================================== FICHA DA VIATURA == */
.ficha { padding-block: 1.6rem clamp(3rem, 6vw, 4.5rem); }
.migalhas { font-size: .85rem; color: var(--tinta-3); margin-bottom: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.migalhas a:hover { color: var(--azul); text-decoration: underline; }
.migalhas span[aria-current] { color: var(--tinta-2); }

/* Folga menor entre linhas do que entre colunas: a linha separa a fotografia
   da ficha técnica, que é a continuação do mesmo assunto, e a coluna separa o
   conteúdo do painel do preço, que são coisas diferentes. */
.ficha__disposicao {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .8fr);
  gap: clamp(1rem, 2vw, 1.4rem) clamp(1.4rem, 3vw, 2.4rem); align-items: start;
}
/* O primeiro bloco da coluna já tem a folga da grelha por cima; a sua margem
   somava-se a ela e empurrava a ficha técnica para baixo sem razão. */
.ficha__corpo > .bloco:first-child { margin-top: 0; }
/* Três peças em duas colunas: a galeria e o corpo empilham-se na coluna larga,
   o painel ocupa a estreita nas duas linhas. Feito com `grid-row` e não com
   `order`: assim a ordem do CÓDIGO já é a certa para o telemóvel — galeria,
   preço, ficha técnica — e não é preciso reordenar nada quando passa a uma
   coluna. Com `order: -1` no painel, o preço aparecia ANTES da fotografia. */
.ficha__galeria { grid-column: 1; grid-row: 1; min-width: 0; }
.ficha__corpo { grid-column: 1; grid-row: 2; min-width: 0; }
/* O painel atravessa as duas linhas. Sem isso a sua coluna tinha exactamente a
   altura dele, e um `position: sticky` numa caixa do seu próprio tamanho não
   tem por onde deslizar — o painel do preço desaparecia mal se começava a ler a
   ficha técnica. Medido: ao fim de 520 px de scroll já não estava no ecrã. */
.ficha__lado { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
@media (max-width: 980px) {
  /* Uma coluna, e as três peças voltam à ordem do código: fotografia, preço e
     botões, ficha técnica. Vê-se o carro, decide-se, e só depois o detalhe. */
  .ficha__disposicao { grid-template-columns: 1fr; }
  .ficha__galeria, .ficha__corpo, .ficha__lado { grid-column: 1; grid-row: auto; }
}

/* galeria */
.galeria { display: grid; gap: .6rem; }
.galeria__principal {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio-g); overflow: hidden;
  background: var(--azul-tenue); border: 1px solid var(--borda);
}
/* No computador a fotografia passa a 3:2. Em 4:3 dava 572 px de altura contra
   380 do painel do preço ao lado — a página abria com uma fotografia gigante e
   um vazio à direita. O corte de 4:3 para 3:2 tira 11 % em cima e em baixo, que
   num carro é céu e chão. No telemóvel fica 4:3, onde a foto é o conteúdo e não
   compete com nada. */
@media (min-width: 981px) { .galeria__principal { aspect-ratio: 3 / 2; } }
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.galeria__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--sombra); transition: background var(--t);
}
.galeria__nav:hover { background: #fff; }
.galeria__nav svg { width: 20px; height: 20px; }
.galeria__nav--ant { left: .7rem; }
.galeria__nav--seg { right: .7rem; }
.galeria__contador {
  position: absolute; right: .8rem; bottom: .8rem; background: rgba(10,23,41,.78); color: #fff;
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.galeria__tiras {
  display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: .5rem;
  overflow-x: auto; padding-block: 3px; scrollbar-width: none;
  scroll-padding-inline: 3px;
  padding-inline: 3px; margin-inline: -3px;
}
/* Barra escondida, como na pista dos destaques. O que diz que há mais fotos é
   a miniatura cortada no bordo, e o JS já traz a activa para o ecrã quando se
   avança pelas setas — verifiquei antes de a esconder. */
.galeria__tiras::-webkit-scrollbar { display: none; }
.tira {
  aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 0; padding: 0;
  cursor: pointer; background: var(--azul-tenue);
  box-shadow: 0 0 0 1px var(--borda); transition: box-shadow var(--t);
}
.tira img { width: 100%; height: 100%; object-fit: cover; }
.tira[aria-current="true"] { box-shadow: 0 0 0 2.5px var(--azul); }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(6, 12, 22, .93); }
.lightbox__corpo { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.lightbox img { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.lightbox__x, .lightbox__nav {
  position: absolute; border: 0; background: rgba(255,255,255,.14); color: #fff;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(6px); transition: background var(--t);
}
.lightbox__x:hover, .lightbox__nav:hover { background: rgba(255,255,255,.3); }
.lightbox__x { top: 1rem; right: 1rem; }
.lightbox__nav--ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--seg { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__x svg, .lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__contador { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: #fff; font-weight: 700; font-size: .9rem; background: rgba(255,255,255,.14);
  padding: .35rem .9rem; border-radius: 999px; backdrop-filter: blur(6px); }

/* cabeçalho da ficha, a toda a largura e acima das duas colunas */
.ficha__topo { margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); }
.ficha__titulo { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; }
.ficha__versao { color: var(--tinta-2); font-size: 1.05rem; margin-top: .3rem; }
.ficha__selos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }

/* painel lateral */
.painel {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 1.3rem; box-shadow: var(--sombra); position: sticky; top: calc(var(--h-topo) + 1rem);
}
@media (max-width: 980px) { .painel { position: static; } }
.painel__preco { font-size: 2.2rem; font-weight: 900; letter-spacing: -.035em; color: var(--azul); line-height: 1; }
/* Nada de «vendida» aqui: a ficha de uma vendida deixou de existir, e no cartão
   o rodapé inteiro sai — quem diz que o carro saiu é a etiqueta na fotografia. */
.painel__preco--consulta { font-size: 1.35rem; color: var(--tinta); }
.painel__iva { font-size: .82rem; color: var(--tinta-3); margin-top: .35rem; }
.painel__acoes { display: grid; gap: .55rem; margin-top: 1.1rem; }
.painel__acoes .btn { width: 100%; }
.painel__nota { font-size: .82rem; color: var(--tinta-3); margin-top: .9rem; line-height: 1.5; }
/* Os avisos de vendido e reservado tinham a cor escrita num `style=` na
   marcação. São estado da viatura, não decoração — merecem um lugar no CSS. */
.painel__aviso {
  margin-top: .9rem; padding: .7rem .85rem; border-radius: 10px;
  font-size: .88rem; font-weight: 700; line-height: 1.5;
}
/* Não há `--vendido` aqui: os avisos vivem no painel da ficha, e as vendidas
   não têm ficha. O que uma vendida diz, di-lo o cartão e o reencaminhamento. */
.painel__aviso--reservado { background: var(--ambar-tenue); color: var(--ambar); }
.painel__aviso--brevemente { background: var(--azul-tenue); color: var(--azul); }

/* folha de especificações */
/* Duas colunas de linhas, e não uma grelha de cartões: quinze caixas com
   contorno próprio faziam uma manta de retalhos e obrigavam a saltar o olho de
   caixa em caixa. Assim compara-se a direito, como numa ficha de papel. */
/* Sem `align-items: start`: com o mês na MESMA linha do ano, nenhuma célula
   tem duas linhas, e as filas podem voltar a partilhar a altura — é isso que
   mantém os traços das duas colunas alinhados. O `start` esteve aqui enquanto o
   mês vivia numa segunda linha, e era o que impedia a célula dos quilómetros de
   ser arrastada com a do ano. */
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.spec {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .72rem 0; border-bottom: 1px solid var(--borda);
}
.spec dt { color: var(--tinta-2); font-size: .92rem; }
.spec dd { margin: 0; font-weight: 700; text-align: right; }
/* O mês, debaixo do ano e na mesma célula: menor, sem peso e em tom secundário,
   para o ano continuar a ser o que se lê primeiro. A cor é --tinta-2, que dá
   7,47:1 em branco — passa AA em texto pequeno, ao contrário da --tinta-3. Em
   `em` e não `rem`, para acompanhar o tamanho da célula se ele mudar. */
/* O mês, à frente do ano: menor e sem o negrito do valor. O ano é o que se
   procura nesta linha; o mês é a precisão a seguir. Em `em` e não `rem` para
   acompanhar o tamanho da célula se ele mudar. A cor é --tinta-2, que dá 7,47:1
   em branco — passa AA em texto pequeno, ao contrário da --tinta-3. */
.spec__antes { font-size: .82em; font-weight: 500; color: var(--tinta-2); }
@media (max-width: 620px) { .specs { grid-template-columns: 1fr; } }

.bloco { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.bloco h2 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .9rem; }
.bloco p { color: var(--tinta-2); max-width: 70ch; }
/* Parágrafos seguidos precisam de respirar entre si. Sem isto, uma descrição
   com três parágrafos lê-se como um bloco só — que era a queixa. */
.bloco p + p { margin-top: .85rem; }

/* Equipamento: colunas que se enchem sozinhas. Com trinta extras numa lista de
   uma coluna a ficha ficava com meio metro de altura; com `auto-fill` são três
   colunas no computador, duas no tablet e uma no telemóvel, sem media queries.
   O `min(100%, 15rem)` é o que impede a coluna de ficar mais larga do que o
   ecrã em telemóveis estreitos. */
.equipa {
  list-style: none; display: grid; gap: .55rem 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.equipa li {
  display: grid; grid-template-columns: 17px 1fr; gap: .55rem; align-items: start;
  color: var(--tinta-2); font-size: .96rem; line-height: 1.45;
}
/* O visto alinha com a PRIMEIRA linha do texto, não com o meio do item: em
   extras de duas linhas, centrado, ficava a boiar. */
.equipa svg { width: 17px; height: 17px; margin-top: .22em; color: var(--azul); }

/* ========================================================== CONTACTO ==== */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2rem; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
.contacto__lista { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
.contacto__item { display: flex; gap: .85rem; align-items: flex-start; }
.contacto__item svg { width: 21px; height: 21px; color: var(--azul); flex: none; margin-top: .18rem; }
.contacto__item dt { font-weight: 800; font-size: .88rem; }
.contacto__item dd { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.contacto__item a:hover { color: var(--azul); text-decoration: underline; }

.mapa {
  border-radius: var(--raio-g); overflow: hidden; border: 1px solid var(--borda);
  background: var(--azul-tenue); position: relative; aspect-ratio: 4 / 3; min-height: 320px;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Cartão de consentimento: o mapa do Google só carrega depois de a pessoa
   aceitar, porque o embed clássico põe cookies antes de qualquer interacção. */
.mapa__consentimento {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 2rem 1.5rem; background: var(--azul-tenue);
}
/* O SVG do alfinete não traz width/height, por isso enche a coluna da grelha
   (512 px), fica quadrado e transborda a sua linha por cima do texto. Precisa
   de um tamanho explícito. */
.mapa__consentimento svg { width: 44px; height: 44px; color: var(--azul); }
.mapa__consentimento p { color: var(--tinta-2); font-size: .92rem; max-width: 42ch; margin-bottom: 1rem; }

/* ------------------------------------------------ peças das páginas soltas */
/* O `lead` das páginas tinha a margem escrita num `style=` em cada sítio, com
   valores diferentes. Uma classe, um valor. */
.lead--pagina { margin: .9rem 0 2.2rem; max-width: 62ch; }
/* Um título de secção seguido logo de cartões ficava colado a eles. Havia
   `style="margin-bottom"` espalhado pela marcação a resolver isto caso a caso;
   passou a haver uma classe. */
.h-secao--espaco { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.foto-emoldurada {
  width: 100%; height: auto; border-radius: var(--raio-g); border: 1px solid var(--borda);
}
/* No Sobre a foto do stand é de apoio, não é o assunto: encolhe e encosta ao
   fim da coluna em vez de competir em altura com o texto. */
/* 560 e não 460: a foto passou de retrato a paisagem, e a mesma largura dava
   uma imagem com quase menos um terço de altura — ficava perdida na coluna. */
.foto-emoldurada--media { max-width: 560px; margin-inline: auto; }
.contacto--sobre { align-items: center; }
.contacto--sobre .hero__acoes { margin-top: 1.8rem; }

/* ---- passos numerados */
.passos {
  display: grid; gap: 1.2rem; counter-reset: passo;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.passo {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 1.4rem 1.3rem; position: relative;
}
.passo__n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--azul); color: #fff; font-weight: 900; font-size: .95rem; margin-bottom: .8rem;
}
.passo h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .3rem; }
.passo p { font-size: .9rem; color: var(--tinta-2); line-height: 1.55; }

/* ---- números que se podem provar */
.factos {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.factos li {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 1.3rem; text-align: center;
}
.factos b {
  display: block; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 900;
  letter-spacing: -.03em; color: var(--azul); line-height: 1;
}
.factos span { display: block; margin-top: .45rem; font-size: .86rem; color: var(--tinta-2); }

/* ---- faixa de fecho */
.faixa-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
  background: var(--navy); color: #fff; border-radius: var(--raio-g);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.faixa-cta .h-secao { color: #fff; }
.faixa-cta p { color: #C9D6E8; margin-top: .4rem; }
.faixa-cta__acoes { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ------------------------------------------------------- venha ver ao vivo */
/* Um painel só. O mapa vai até ao bordo — é ele que dá a sensação de lugar, e
   metê-lo numa caixa própria, com um vale a separá-lo do texto, desperdiçava-o. */
.visita {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  background: var(--carta); border: 1px solid var(--borda);
  border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra);
}
.visita__info { padding: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-direction: column; }
.visita__lead { color: var(--tinta-2); margin: .7rem 0 1.4rem; }
.visita__factos { display: grid; gap: 1rem; margin-bottom: 1.2rem; }
.visita__factos li { display: flex; gap: .8rem; align-items: flex-start; font-size: .95rem; }
.visita__factos svg { width: 20px; height: 20px; color: var(--azul); flex: none; margin-top: .15rem; }
.visita__factos b { font-weight: 800; }
.visita__factos small { display: block; font-size: .78rem; color: var(--tinta-2); }
.visita__factos a:hover { color: var(--azul); text-decoration: underline; }
.visita__acoes { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: 1.4rem; }
/* Aviso de que a viatura também se mostra noutro local, com marcação. Fica
   entre a informação e os botões, que é onde apanha quem está a pensar «isso é
   longe» mesmo antes de decidir se liga. */
.nota-visita {
  display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem;
  background: var(--azul-tenue); border-radius: 10px; padding: .7rem .85rem;
  font-size: .88rem; color: var(--tinta-2); line-height: 1.5;
}
.nota-visita svg { width: 17px; height: 17px; color: var(--azul); flex: none; margin-top: .15rem; }
/* O local a negrito e no azul da marca: é a palavra que faz alguém de longe
   parar e ler a frase toda. */
.nota-visita strong { color: var(--tinta); font-weight: 800; }
.visita__acoes + .nota-visita, .nota-visita + .visita__acoes { margin-top: 1rem; }
/* No painel do preço vai mais discreto: ali o que manda são os botões. */
.nota-visita--painel { margin-top: .9rem; padding: .6rem .75rem; font-size: .84rem; }
/* O mapa preenche a célula toda: sem contorno próprio nem cantos, porque os
   cantos são os do painel. */
.visita__mapa { position: relative; min-height: 340px; }
.visita__mapa .mapa {
  position: absolute; inset: 0; border: 0; border-radius: 0;
  aspect-ratio: auto; min-height: 0; height: 100%;
}
.visita__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) {
  .visita { grid-template-columns: 1fr; }
  .visita__mapa { min-height: 0; aspect-ratio: 4 / 3; }
}

.horario { display: grid; gap: .4rem; }
.horario li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0;
  border-bottom: 1px dashed var(--borda); font-size: .95rem; }
.horario li:last-child { border-bottom: 0; }
.horario span:first-child { color: var(--tinta-2); }
.horario span:last-child { font-weight: 700; }
/* A linha de hoje. A pastilha «Hoje» é conteúdo gerado, por isso vai também no
   `content` — mas o `aria-current="date"` no <li> é o que a torna audível, que
   o CSS gerado não é lido por todos os leitores de ecrã. */
.horario--visita li { padding: .55rem .7rem; border-radius: 8px; border-bottom: 0; }
.horario--visita li + li { margin-top: .15rem; }
.horario--visita li.hoje { background: var(--azul-tenue); }
.horario--visita li.hoje span:first-child { color: var(--azul); font-weight: 800; }
.horario--visita li.hoje span:first-child::after {
  content: 'Hoje'; margin-left: .5rem; font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; background: var(--azul); color: #fff;
  padding: .12rem .4rem; border-radius: 999px; vertical-align: .05em;
}

/* ============================================================ RODAPÉ ==== */
.rodape { background: var(--navy); color: #C9D6E8; padding-top: clamp(2.5rem, 6vw, 4rem); }
.rodape a { color: #C9D6E8; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape__grelha {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem;
  padding-bottom: 2.2rem;
}
@media (max-width: 900px) { .rodape__grelha { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }
@media (max-width: 560px) { .rodape__grelha { grid-template-columns: 1fr; } }
.rodape__marca svg { height: 52px; width: auto; color: #fff; }
.rodape__texto { margin-top: .9rem; font-size: .92rem; max-width: 34ch; }
.rodape h3 { font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #7FB0FF; margin-bottom: .8rem; }
.rodape__lista { display: grid; gap: .5rem; font-size: .94rem; }
.rodape__redes { display: flex; gap: .6rem; margin-top: 1.1rem; }
.rodape__rede {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.09); transition: background var(--t), transform var(--t);
}
.rodape__rede:hover { background: var(--azul); transform: translateY(-2px); }
.rodape__rede svg { width: 20px; height: 20px; color: #fff; }
.rodape__legal {
  border-top: 1px solid rgba(255,255,255,.13); padding: 1.3rem 0 2rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
  justify-content: space-between; font-size: .85rem;
}
.rodape__links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
/* A entrada do backoffice fica mais apagada do que os links legais: é para o
   pessoal do stand, e não se quer que um visitante lhe carregue por curiosidade.
   Continua a ter 4,6:1 sobre o rodapé escuro, portanto lê-se — apagado não é
   invisível. Ganha o contraste normal no hover e no foco.

   O selector leva o `.rodape a` à frente de propósito: sem isso perdia em
   especificidade para `.rodape a`, e a cor não pegava. */
.rodape a.rodape__gestao { color: #7D8EA6; transition: color var(--t); }
.rodape a.rodape__gestao:hover, .rodape a.rodape__gestao:focus-visible { color: #fff; }
/* «Preferências» é um botão, não um link, porque não navega — abre o painel na
   própria página. Vai despido para se ler exactamente como os links ao lado. */
.rodape__botao {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; transition: color var(--t);
}
.rodape__botao:hover { color: #fff; }

/* --------------------------------------------------- barra de contacto */
/* No telemóvel, ligar tem de estar sempre a um toque. */
.barra-contacto {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--borda); padding: .6rem var(--gutter);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
  gap: .5rem;
}
.barra-contacto .btn { flex: 1; }
@media (max-width: 760px) { .barra-contacto { display: flex; } body { padding-bottom: 74px; } }

/* ---------------------------------------------------------- utilitários */
.cartas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
/* Seis cartas em quatro colunas deixavam a segunda fila com duas e um vão de
   metade da largura. Três colunas dão 3+3, e o mínimo de 230 continua a mandar
   quando o ecrã encolhe. */
.cartas--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 100%; }
@media (min-width: 900px) { .cartas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carta {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: 1.4rem;
}
.carta--escura { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.carta__icone {
  width: 46px; height: 46px; border-radius: 13px; background: var(--azul-tenue);
  display: grid; place-items: center; margin-bottom: .9rem;
}
.carta--escura .carta__icone { background: rgba(127,176,255,.16); }
.carta__icone svg { width: 23px; height: 23px; color: var(--azul); }
.carta--escura .carta__icone svg { color: #7FB0FF; }
.carta h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .35rem; }
.carta p { font-size: .93rem; color: var(--tinta-2); }
.carta--escura p { color: #C9D6E8; }

/* páginas de texto legal */
.texto { max-width: 74ch; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.texto h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; margin-bottom: .5rem; }
.texto .actualizado { color: var(--tinta-3); font-size: .88rem; margin-bottom: 2rem; }
.texto h2 { font-size: 1.2rem; font-weight: 800; margin: 2rem 0 .6rem; }
.texto h3 { font-size: 1rem; font-weight: 800; margin: 1.3rem 0 .4rem; }
.texto p, .texto li { color: var(--tinta-2); margin-bottom: .8rem; }
.texto ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; }
.texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.texto strong { color: var(--tinta); }

/* ==================================================== AJUSTES E NOVIDADES == */

/* --------------------------------------------------- aviso de chamada ----- */
/* O custo da chamada tem de ter a MESMA visibilidade do número (DL 59/2021),
   por isso não vai a cinzento-claro nem em corpo minúsculo. */
.nota-chamada { font-size: .8rem; color: var(--tinta-2); margin: .1rem 0 0; }
.rodape .nota-chamada, .rodape__contacto small { color: #A8BBD2; }
.painel__acoes + .nota-chamada { margin: -.2rem 0 .2rem; text-align: center; }

/* ------------------------------------------------------ hero mais curto -- */
/* O hero da inicial cresceu. Com os quatro selos fora e o texto reduzido a uma
   linha, o conteúdo deixou de dar altura à secção e a fotografia ficou uma
   nesga. O `min-height` é que manda agora — o recheio sozinho encolheria outra
   vez à próxima vez que se cortasse texto. */
.hero--curto { min-height: clamp(380px, 44vw, 560px); display: flex; align-items: center; }
.hero--curto .hero__corpo { width: 100%; padding-block: clamp(2.6rem, 6vw, 4rem) clamp(3.4rem, 7vw, 5rem); }
.hero--curto .hero__titulo { font-size: clamp(1.9rem, 5vw, 3.2rem); max-width: 20ch; }

/* Destaques numa linha que anda sozinha. `scroll-snap` faz o trabalho; o JS
   só empurra o scroll, o que mantém o arrastar com o dedo a funcionar. */
/* ======================================================== VITRINE ======== */
/* A secção dos destaques: um carrossel horizontal em fundo claro, como o resto
   da página. Tentei-a em banda escura e o cliente preferiu o fundo claro.

   O que a manda no desenho não é gosto, é o material: das seis viaturas em
   destaque, QUATRO só têm uma fotografia. Nada aqui pode depender de ter várias
   fotos por carro — tiras de miniaturas, trocar a foto ao passar o rato — porque
   apareceria quebrado na maioria.

   Nada de texto POR CIMA da fotografia: numa listagem de automóveis a foto é o
   produto, e o véu que a sobreposição obriga a ter tapava meio carro.

   A arrumação dentro do cartão veio da secção equivalente do SoDrive, medida no
   browser: cabeçalho em cima na superfície do cartão, foto no meio, grelha de
   especificações etiquetadas em baixo. E o cartão é uma superfície DESTACADA do
   fundo — é daí que vem o ar caro naquele site, que o faz em fundo preto com
   painéis #171717. Aqui o mesmo em claro: banda em azul ténue, cartões brancos. */
.vitrine {
  padding-block: clamp(2.4rem, 5vw, 3.6rem) clamp(2.6rem, 5vw, 3.8rem);
  background: var(--azul-tenue);
}
.vitrine__topo {
  display: flex; align-items: end; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap; margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
}

/* ---- setas */
.vitrine__setas { display: flex; gap: .5rem; }
.vitrine__seta {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; flex: none;
  display: grid; place-items: center;
  background: var(--carta); color: var(--tinta);
  border: 1px solid var(--borda-forte);
  transition: border-color var(--t), color var(--t), opacity var(--t);
}
.vitrine__seta:hover { border-color: var(--azul); color: var(--azul); }
.vitrine__seta[disabled] { opacity: .35; cursor: default; }
.vitrine__seta svg { width: 20px; height: 20px; }
.vitrine__setas[hidden] { display: none; }
@media (max-width: 620px) { .vitrine__setas { display: none; } }

/* ---- pista que desliza, de bordo a bordo */
/* O padding lateral acompanha o `.envolve` para o primeiro cartão alinhar com o
   título, mas a pista sangra para fora — lê-se como um carrossel que continua e
   não como uma fila metida numa caixa. O `scroll-padding-inline` repete o mesmo
   valor, senão o encaixe come o padding e o primeiro cartão cola-se ao bordo. */
/* A pista vive DENTRO da coluna de conteúdo, não de bordo a bordo. Era o que
   desalinhava: num ecrã de 2400 px o texto da página ocupa 1240 ao centro e a
   pista atravessava os 2400, com o corte do último cartão a acontecer lá longe,
   na margem do ecrã. Agora começa onde começa o título e o corte acontece na
   margem direita da coluna — que é o que o SoDrive faz.

   A largura do cartão sai de uma conta em vez de um número fixo: `--visiveis`
   diz quantos cabem, e 3,4 significa três inteiros mais um bocado do quarto. É
   esse bocado que diz «há mais para o lado» sem precisar de escrever nada. */
.vitrine__pista {
  --gap: clamp(.8rem, 1.6vw, 1.2rem);
  --visiveis: 3.4;
  max-width: var(--larg); margin-inline: auto;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visiveis) - 1) * var(--gap)) / var(--visiveis));
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 6px var(--gutter) .7rem;
  scroll-padding-inline: var(--gutter);
  /* Barra escondida. Esconder a barra de uma zona que rola só é aceitável se
     houver outra forma de a percorrer, e há três: as setas, os pontos e o Tab
     pelos links dos cartões, que arrasta a pista sozinho. O recheio de baixo
     desceu de 1,1rem para 0,7rem porque já não há barra para acomodar. */
  scrollbar-width: none;
}
.vitrine__pista::-webkit-scrollbar { display: none; }
/* `scroll-snap-stop: always` impede que um flick rápido salte três ou quatro
   viaturas de uma vez — 94 % de suporte, uma linha. */
.vit-item { scroll-snap-align: start; scroll-snap-stop: always; }
/* Quantos cabem em cada largura. Nunca um número inteiro: a fracção é o cartão
   meio cortado que mostra que a fila continua. */
@media (max-width: 1100px) { .vitrine__pista { --visiveis: 2.3; } }
@media (max-width: 760px)  { .vitrine__pista { --visiveis: 1.15; } }

/* ---- o cartão */
.vit-cartao {
  display: flex; flex-direction: column; height: 100%;
  background: var(--carta); border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.vit-cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--borda-forte); }
.vit-cartao__link {
  display: flex; flex-direction: column; height: 100%;
  padding: 1rem 1.05rem 1.1rem;
}
/* 4:3 e não 16:9: os originais são ~4:3 e o corte panorâmico decapita os carros
   que vêm mal enquadrados.

   O `aspect-ratio` vai na IMAGEM e não no contentor, e isso não é indiferente:
   com ele no contentor flex, a grelha da pista calculava a altura da foto a
   partir de uma largura ainda não resolvida e esticava a linha para 660 px
   quando o cartão só precisa de 451 — sobravam 228 px de branco morto dentro de
   cada cartão. Medido antes e depois. */
.vit-cartao__foto {
  position: relative; background: var(--fundo); flex: none; overflow: hidden;
  border-radius: 14px; margin: .8rem 0 .9rem;
}
.vit-cartao__foto img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,0,0,1);
}
.vit-cartao:hover .vit-cartao__foto img { transform: scale(1.04); }
.vit-cartao__semfoto { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--tinta-2); font-size: .9rem; }
.vit-cartao__nfotos {
  position: absolute; bottom: .8rem; right: .8rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(6,14,26,.74); color: #fff; font-size: .76rem; font-weight: 700;
  padding: .28rem .55rem; border-radius: 999px;
}
.vit-cartao__nfotos svg { width: 13px; height: 13px; }

/* ---- cabeçalho, acima da foto */
/* Modelo e preço na MESMA linha de base: é o que faz o olho ir de um ao outro num
   só movimento, e é o que o concorrente directo faz. O `gap` impede que um modelo
   comprido encoste ao preço. */
.vit-cartao__linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  font-size: 1.2rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.15;
}
/* Nome e versão numa linha só, cortados com reticências se não couberem. Não é
   preciosismo: se qualquer um deles quebrar para duas linhas, o cabeçalho desse
   cartão cresce, a fotografia desce e as filas dos cartões deixam de bater umas
   com as outras. O nome completo está na página da viatura. */
.vit-cartao__nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vit-cartao__preco { color: var(--azul); white-space: nowrap; flex: none; }
.vit-cartao__versao {
  font-size: .84rem; color: var(--tinta-2); margin-top: .18rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- etiquetas de confiança */
/* Deixaram de estar por cima da foto e passaram para o cabeçalho, como no
   SoDrive. Fundo próprio e sem sombra: a sombra do `.selo` existe para o
   destacar de uma fotografia, e sobre o branco do cartão só sujava. */
/* Altura reservada mesmo quando não há etiqueta nenhuma: das seis viaturas em
   destaque, duas não têm garantia registada nem são eléctricas, e sem a reserva
   a foto e a grelha desses dois cartões subiam e desalinhavam a fila toda. */
.vit-cartao__selos {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem;
  min-height: 1.5rem;
}
/* Os valores da etiqueta são redondos de propósito — 1rem de entrelinha e .25rem
   de recheio dão 24 px exactos, iguais ao `min-height` da fila. Com números
   fraccionários sobrava 1 px de diferença entre cartões com e sem etiqueta. */
.vit-selo {
  font-size: .72rem; font-weight: 700; white-space: nowrap; line-height: 1rem;
  padding: .25rem .55rem; border-radius: 999px;
  background: var(--fundo); color: var(--tinta-2);
}
/* A mesma regra do `.selo`: disponibilidade cheia, característica lavada. Aqui
   é ainda mais preciso, porque a garantia — que é uma característica — usa o
   mesmo azul-lavado que o «Brevemente» usava, e as duas apareciam encostadas. */
.vit-selo--brevemente { background: var(--azul); color: #fff; }
.vit-selo--reservado { background: var(--ambar); color: #fff; }
/* Sem `--vendido`: o carrossel de destaques só mostra viaturas à venda, por isso
   esta etiqueta nunca chegava a ser desenhada aqui — era só a sugerir que sim. */
.vit-selo--eletrico { background: var(--verde-tenue); color: var(--verde); }
.vit-selo--garantia { background: var(--azul-tenue); color: var(--azul); }
/* IVA dedutível fica em verde-lavado, o mesmo tom das características (ver a
   regra dos selos cheios/lavados mais acima): é uma qualidade da viatura, não
   um estado de disponibilidade, e não pode competir com o «Reservado». */
.vit-selo--iva { background: var(--verde-tenue); color: var(--verde); }

/* ---- grelha de especificações, abaixo da foto */
/* Três colunas por duas linhas, valor em cima e etiqueta pequena por baixo. É a
   diferença maior em relação ao que estava: uma linha corrida de factos com
   pontos médios lê-se toda de uma vez mas não se consulta — quem compara carros
   procura «quantos quilómetros tem» e quer ir directo ao número.

   `column-reverse` inverte só o visual: no código a etiqueta vem primeiro, e é
   assim que o leitor de ecrã a lê («Ano, 2018»).

   A etiqueta usa --tinta-2 e não --tinta-3: a este tamanho é texto normal, e
   --tinta-3 dá 4,38:1, que chumba o critério 1.4.3. */
.vit-cartao__grelha {
  /* Sem `margin-top: auto`: empurrar a grelha para o fundo mandava a folga dos
     cartões de texto curto para o meio, entre a foto e a grelha. A folga fica em
     baixo, uniforme, que é muito mais calmo do que um vão a meio. */
  margin: 0; padding-top: .85rem; border-top: 1px solid var(--borda);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem .6rem;
}
.vit-cartao__grelha > div { display: flex; flex-direction: column-reverse; min-width: 0; }
.vit-cartao__grelha dt { font-size: .72rem; line-height: 1.35; color: var(--tinta-2); }
.vit-cartao__grelha dd {
  margin: 0; font-size: .93rem; font-weight: 800; line-height: 1.25;
  letter-spacing: -.01em; overflow-wrap: break-word;
}

/* ---- pontos de posição */
/* O SoDrive tem pontos numerados. Aqui são um por viatura, criados pelo JS a
   partir dos cartões. 24×24 de área tocável para cumprir o critério 2.5.8,
   embora a bola visível seja de 8. */
.vitrine__pontos { display: flex; justify-content: center; gap: .3rem; margin-top: 1.2rem; }
.vitrine__pontos[hidden] { display: none; }
.vitrine__ponto {
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.vitrine__ponto::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--borda-forte); transition: background var(--t), width var(--t);
}
.vitrine__ponto:hover::before { background: var(--tinta-3); }
.vitrine__ponto[aria-current]::before { background: var(--azul); width: 20px; }

/* --------------------------------------------------------------- marcas -- */
/* A faixa sangra de bordo a bordo, por isso vive fora do `.envolve`. As pontas
   esbatem-se com uma máscara em vez de um gradiente por cima: assim funciona
   sobre qualquer fundo e não tapa os links. */
/* A faixa é uma ZONA QUE ROLA, não uma animação de `transform`.
   Isto mudou por causa de um defeito reportado duas vezes: carregar no logótipo
   de uma marca não fazia nada. A causa não é o link — é que o teste de acerto
   do ponteiro corre na thread principal, com a última posição conhecida do
   elemento, enquanto uma animação de `transform` é conduzida pelo compositor e
   já o moveu. O clique cai ao lado, ou entre dois cartões, e perde-se.

   A rolar, as posições são sempre as verdadeiras e o clique acerta sempre. O
   movimento automático passou a ser feito pelo JS, a empurrar o `scrollLeft` —
   é o mesmo mecanismo do carrossel das viaturas, que nunca deu problema.

   As pontas esbatem-se com uma máscara em vez de um gradiente por cima: assim
   funciona sobre qualquer fundo e não tapa os links. */
.fita {
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 4px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fita::-webkit-scrollbar { display: none; }
.fita__pista { display: flex; width: max-content; }
.fita__fila { display: flex; gap: .8rem; padding-inline: .4rem; }
.fita__item { flex: 0 0 auto; }

/* No telemóvel anda sozinha, tal como no computador — e continua a arrastar-se
   com o dedo. Antes ficava parada: num ecrã táctil não há rato para a parar, e
   uma fila que anda sozinha é uma fila em que se falha o alvo. Resolve-se com
   o toque a travá-la (está no site.js) em vez de a desligar de todo.

   O que NÃO se pode fazer é esconder a segunda fila: as duas são iguais e é
   recuando uma largura inteira que o laço fecha sem buraco. Escondê-la deixava
   a faixa a andar até acabar e a ficar num vazio.

   Saem só as voltas a mais — no computador são quatro, para encher um monitor
   largo; aqui bastam as que passem o ecrã, e o gerador marca as outras. */
@media (hover: none) and (pointer: coarse) {
  .fita__item--extra { display: none; }
}

.marca-cartao {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem .9rem .85rem; width: 158px; display: grid; gap: .15rem;
  justify-items: center; text-align: center;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.marca-cartao:hover { transform: translateY(-3px); border-color: var(--azul); box-shadow: var(--sombra); }
/* Os SVG das marcas são todos quadrados (viewBox 0 0 24 24), por isso um
   tamanho fixo serve a todos. O tamanho é obrigatório: um SVG sem width/height
   enche a caixa e transborda — foi o que aconteceu ao alfinete do mapa. */
/* O sprite dos logótipos não se vê: só existe para os <use> o referenciarem.
   `display:none` não serve — apagaria também os símbolos. */
.sprite-marcas { position: absolute; width: 0; height: 0; overflow: hidden; }

.marca-cartao__logo { display: grid; place-items: center; height: 32px; margin-bottom: .4rem; }
/* O `fill` é herdado pelo conteúdo clonado do <use>, e é por aí que a cor entra.
   As MEDIDAS não vêm daqui: vêm nos atributos width/height que o gerador calcula
   por área (ver medidaLogo() em gerar.mjs), para emblemas e wordmarks ficarem com
   a mesma mancha visual. Não se lhes toca aqui. */
.marca-cartao__logo svg { color: var(--tinta); fill: currentColor; }
.marca-cartao:hover .marca-cartao__logo svg { color: var(--azul); }
/* Monograma para as marcas sem ficheiro de logótipo — Jaguar, Mercedes-Benz e
   Polaris não existem na colecção, e o cliente pode escrever outra qualquer.
   Ocupa a mesma caixa de 32 px dos logótipos, para os cartões não desalinharem. */
.marca-cartao__logo--sigla {
  width: 32px; font-weight: 800; font-size: 1.05rem; line-height: 1;
  color: var(--tinta-2); border: 1.5px solid var(--borda-forte); border-radius: 50%;
  aspect-ratio: 1; transition: color var(--t), border-color var(--t);
}
.marca-cartao:hover .marca-cartao__logo--sigla { color: var(--azul); border-color: var(--azul); }
.marca-cartao__nome { font-weight: 800; font-size: .95rem; letter-spacing: -.015em; }

/* Quem pede menos movimento no sistema fica sem a faixa a andar — o site.js
   nem sequer arranca o laço. Mas aí ficaria parada com metade das marcas fora
   do ecrã, por isso passa a ser uma tira que se arrasta à mão. As cópias saem
   todas: paradas só repetiriam marcas, e como a segunda fila é feita só de
   cópias, o que fica é uma passagem única por cada marca. */
@media (prefers-reduced-motion: reduce) {
  .fita { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent;
    -webkit-mask-image: none; mask-image: none; }
  .fita__pista { animation: none; }
  /* Parada, as cópias decorativas só repetiriam marcas — ficam as reais. */
  .fita__item[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------ contactos com ícones --- */
.rodape__lista--icones { gap: .9rem; }
.rodape__contacto { display: flex; gap: .6rem; align-items: flex-start; }
.rodape__contacto > svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; color: #7FB0FF; }
.rodape__contacto small { display: block; font-size: .78rem; line-height: 1.4; margin-top: .1rem; }
.rodape__contacto .horario { gap: .1rem; }
.rodape__contacto .horario li { border-bottom: 0; padding: .1rem 0; font-size: .88rem; gap: .6rem; }
.contacto__resumo .rodape__contacto > svg { color: var(--azul); }
.contacto__resumo .rodape__contacto small { color: var(--tinta-2); }
.contacto__resumo { display: grid; gap: .9rem; }
.contacto__resumo a:hover { color: var(--azul); }

/* --------------------------------------------------------- rodapé legal -- */
.rodape__legal { justify-content: space-between; }
.rodape__copy { order: -1; margin: 0; }
/* A hora da última publicação, a seguir ao copyright. Discreta de propósito: é
   informação de confiança, não é um anúncio. Numa linha própria em telemóvel. */
.rodape__stock { display: block; margin-top: .25rem; opacity: .75; }
@media (min-width: 700px) { .rodape__stock { display: inline; margin-left: .6rem; } }
.rodape__links { margin-left: auto; }
@media (max-width: 720px) {
  .rodape__legal { flex-direction: column; align-items: flex-start; }
  .rodape__links { margin-left: 0; }
}

/* ---------------------------------------------------- voltar ao topo --- */
/* Escondido com `visibility` e não com `hidden`: assim há de onde animar. Fica
   fora do alcance do rato e do teclado enquanto está invisível, que é o que o
   `visibility: hidden` garante e a `opacity: 0` sozinha não garantiria. */
.subir {
  position: fixed; right: var(--gutter); bottom: max(var(--gutter), 14px); z-index: 50;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; background: var(--carta); color: var(--tinta);
  border: 1px solid var(--borda-forte); box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), border-color var(--t), color var(--t);
}
.subir--dentro { opacity: 1; visibility: visible; transform: none; }
.subir:hover { border-color: var(--azul); color: var(--azul); }
.subir svg { width: 20px; height: 20px; }
/* Enquanto o aviso de cookies está em baixo, este sai de cena — dois botões
   flutuantes no mesmo canto é um a tapar o outro. */
body.cc-visivel .subir { opacity: 0; visibility: hidden; transform: translateY(10px); }
/* Acima da barra de contacto do telemóvel, como a de cookies. */
@media (max-width: 760px) { .subir { bottom: 84px; } }

/* ------------------------------------------------------- consentimento --- */
/* Barra em baixo + painel de preferências, na forma do guiadepraias.pt. Medido
   lá: barra fixa de bordo a bordo, branca, 1 px de risco em cima, corpo centrado
   com 1184 px, texto à esquerda e botões à direita; o principal cheio, os outros
   de contorno, e o «gerir preferências» a ocupar a largura dos dois. Sem véu por
   cima da página e sem travar o scroll — a página continua a usar-se.

   Aqui a barra é ainda mais discreta: em vez de ir de bordo a bordo, acompanha a
   largura do conteúdo e tem cantos redondos, para combinar com a barra do topo,
   que é o mesmo desenho de cápsula flutuante. */
.cc-barra {
  position: fixed; z-index: 70;
  left: var(--gutter); right: var(--gutter); bottom: max(var(--gutter), 14px);
  /* Mesma largura e mesma cápsula da barra do topo: são as duas coisas
     flutuantes da página e ficariam a discutir uma com a outra se a de baixo
     fosse de bordo a bordo. Num ecrã de 2400 px a cápsula chegava a 2305 px com
     o conteúdo encolhido a 1240 no meio, e via-se logo. */
  max-width: var(--larg); margin-inline: auto;
  background: var(--carta); color: var(--tinta);
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: 0 -2px 10px -6px rgba(14,23,38,.1), 0 24px 48px -20px rgba(14,23,38,.35);
  transform: translateY(calc(100% + var(--gutter) + 14px));
  transition: transform .3s cubic-bezier(.2,0,0,1);
}
.cc-barra--dentro { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cc-barra { transition: none; }
}
.cc-barra__corpo {
  padding: 1.1rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
}
.cc-barra__texto { min-width: 0; flex: 1 1 24rem; }
.cc-barra__titulo { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.cc-barra__desc { font-size: .88rem; color: var(--tinta-2); line-height: 1.5; margin-top: .25rem; }
.cc-barra__desc strong { color: var(--tinta); font-weight: 700; }
/* Duas colunas com o «gerir preferências» a atravessar as duas por baixo, tal
   como lá. Em ecrãs estreitos passa tudo a uma coluna. */
/* Dois botões lado a lado e mais nada. Eram três, com o «gerir preferências» a
   atravessar a linha de baixo; a coluna encolheu de 23 para 17rem porque
   «Aceitar» e «Recusar» são rótulos curtos e não precisam de mais. */
.cc-barra__acoes {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; width: min(17rem, 100%);
}
/* Uma coluna só em ecrãs muito estreitos. A 375 px as duas colunas ainda cabem
   (145 px cada, e o rótulo mais comprido pede 137), e poupam 50 px de altura
   numa barra que já ocupa um terço do ecrã do telemóvel. */
@media (max-width: 340px) {
  .cc-barra__acoes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cc-barra__acoes { width: 100%; }
}
/* Nas páginas de viatura há uma segunda barra fixa em baixo, a de ligar e do
   WhatsApp. Sem isto, a de cookies assentava-lhe por cima — e é a barra de
   contacto que faz o telefone tocar. Abaixo de 760 px o corpo já reserva 74 px
   para ela em todas as páginas, por isso subir aqui não abre buraco em lado
   nenhum. */
@media (max-width: 760px) {
  .cc-barra { bottom: 84px; }
}

/* ---- os botões da consola de cookies */
/* Mais pequenos do que os `.btn` do site — 46 px de altura mas .84rem de letra e
   cantos de 10 px, como os de lá. E `border-radius` pequeno de propósito: numa
   caixa com muitos botões seguidos, as cápsulas do resto do site davam ar de
   confusão. */
.cc-btn {
  min-height: 46px; padding: .55rem 1rem; border-radius: 10px; cursor: pointer;
  font-size: .84rem; font-weight: 700; font-family: inherit; text-align: center;
  border: 1px solid var(--borda-forte); background: var(--carta); color: var(--tinta);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.cc-btn:hover { border-color: var(--azul); color: var(--azul); }
.cc-btn--principal { background: var(--azul); border-color: var(--azul); color: #fff; }
.cc-btn--principal:hover { background: var(--azul-fundo); border-color: var(--azul-fundo); color: #fff; }

}

/* O .horario nasceu para fundo claro; no rodapé escuro os dias ficavam a
   cinzento-escuro sobre azul-escuro, praticamente ilegíveis. */
.rodape .horario span:first-child { color: #A8BBD2; }
.rodape .horario span:last-child { color: #fff; }
.rodape .horario li { border-bottom-color: rgba(255,255,255,.1); }