/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.9em 2em;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--color-amber);
  color: var(--color-navy);
}
.btn--primary:hover { background: var(--color-amber-dark); }

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-navy);
}
.section--navy .btn--outline { color: var(--color-white); }
.btn--outline:hover { background: rgba(0, 0, 0, 0.06); }
.section--navy .btn--outline:hover { background: rgba(255, 255, 255, 0.08); }

.btn--sm { padding: 0.6em 1.2em; font-size: var(--fs-caption); }

.btn--whatsapp::before {
  content: "";
  width: 1.1em; height: 1.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.6-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6 0-.2-.7-1.8-1-2.4-.3-.6-.5-.5-.7-.6h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.2 3.4 5.3 4.7.7.3 1.3.5 1.8.7.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.3-.7.3-1.3.2-1.5 0-.1-.3-.2-.6-.3z'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.1L2 22l5-1.3c1.4.8 3.1 1.2 4.9 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-2.9-.2-.3C4.2 15 3.8 13.5 3.8 12c0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.7 8.2-8.2 8.2z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.6-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6 0-.2-.7-1.8-1-2.4-.3-.6-.5-.5-.7-.6h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.2 3.4 5.3 4.7.7.3 1.3.5 1.8.7.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.3-.7.3-1.3.2-1.5 0-.1-.3-.2-.6-.3z'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.1L2 22l5-1.3c1.4.8 3.1 1.2 4.9 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-2.9-.2-.3C4.2 15 3.8 13.5 3.8 12c0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.7 8.2-8.2 8.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ========== Nav ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-navy);
  border-bottom: 1px solid var(--color-border-on-navy);
}

/* Home: header transparente sobre a foto do hero, solidifica ao fazer scroll.
   position:fixed desde o início (não só depois de solidificar) para a barra
   nunca "desaparecer" a meio do scroll do hero — só a cor/linha fazem fade. */
.site-header--overlay {
  position: fixed;
  inset: 0 0 auto 0;
  background: rgba(13, 25, 50, 0.45);
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header--overlay.is-scrolled {
  background: var(--color-navy);
  border-bottom-color: var(--color-border-on-navy);
  box-shadow: var(--shadow-card);
}

/* Menu móvel aberto: fundo sólido obrigatório — sem isto, .nav__mobile não
   pinta nada próprio e, ao topo da home (header ainda translúcido), os
   links ficam ilegíveis sobre a foto do hero. */
.site-header.has-open-menu {
  z-index: 50;
  background: var(--color-navy);
  border-bottom-color: var(--color-border-on-navy);
  box-shadow: var(--shadow-card);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3); /* header mais alto, como o Menu Bar do Figma (127px) */
  color: var(--color-white);
}

.nav__logo {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
}
.nav__logo span { color: var(--color-amber); }
.nav__logo img { height: 21px; width: auto; display: block; }

.nav__links {
  display: flex;   /* telemóvel: none (hambúrguer) */
  align-items: center;
  gap: var(--space-3);
}

.nav__links a {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-white);
  transition: color var(--duration) var(--ease), font-size var(--duration) var(--ease);
}
.nav__links a:hover { color: var(--color-amber); font-size: calc(1rem + 3px); }
.nav__links a[aria-current="page"] { color: var(--color-amber); }

.nav__cta { display: flex; }   /* telemóvel: none */

.nav__toggle {
  display: none;   /* telemóvel: inline-flex */
  background: none;
  border: 1px solid var(--color-border-on-navy);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.7em;
  color: var(--color-white);
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border-on-navy);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a { color: var(--color-white); font-weight: 500; padding-block: var(--space-1); }

/* ========== Footer ========== */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-6);
}

.footer__grid {
  display: grid;
  gap: var(--space-5);
  /* 12-col grid: 6/3/3 split — telemóvel: 1 coluna */
  grid-template-columns: 6fr 3fr 3fr;
}

.footer__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
}
.footer__brand span { color: var(--color-amber); }

.footer__heading {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: var(--space-2);
}

.footer__links li { margin-bottom: var(--space-1); }
.footer__links a { color: var(--color-muted-on-navy); }
.footer__links a:hover { color: var(--color-white); }

.footer__bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-on-navy);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--color-muted-on-navy);
}
.footer__bottom a:hover { color: var(--color-white); }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.footer__bottom .link-btn:hover { color: var(--color-white); }

/* ========== Badges (estado) ========== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--color-white);
}
.badge::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.badge--disponivel { color: var(--color-success); }
.badge--brevemente { color: var(--color-pending); }
.badge--reservado { color: var(--color-amber-ink); }
.badge--vendido { color: var(--color-sold); }

/* ========== Vehicle card ========== */
.vcard {
  display: block;
  background: var(--color-white);
  color: var(--color-ink); /* cartão é branco mesmo em secções escuras — não herdar o branco do .section--navy */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.vcard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.vcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy));
  overflow: hidden;
}
.vcard__media img { width: 100%; height: 100%; object-fit: cover; }

.vcard__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4em;
  color: var(--color-muted-on-navy);
}
.vcard__placeholder svg { width: 2.5rem; height: 2.5rem; opacity: 0.5; }
.vcard__placeholder span { font-size: var(--fs-caption); font-weight: 500; }

.vcard__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

.vcard__body { padding: var(--space-3); }

.vcard__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-subhead);
  margin-bottom: 0.3em;
}
.vcard__version { color: var(--color-muted); font-size: var(--fs-body-sm); margin-bottom: var(--space-2); }

.vcard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  font-size: var(--fs-caption);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.vcard__specs span { font-variant-numeric: tabular-nums; }
.vcard__spec {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.vcard__spec svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-amber-ink);
}

.vcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vcard__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-subhead);
  font-variant-numeric: tabular-nums;
}
.vcard--vendido .vcard__media { filter: grayscale(0.6); opacity: 0.75; }
.vcard__price--sold { color: var(--color-muted); }

/* ========== Grid of cards ========== */
.vcard-grid {
  display: grid;
  gap: var(--space-3);
  /* tablet: 3 colunas · telemóvel: 1 coluna */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ========== Novidades slider ========== */
.novidades-slider { position: relative; }

.novidades-track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* o JS insere clones antes do conteúdo visível a cada build() — sem isto, o
     "scroll anchoring" do browser ajusta scrollLeft sozinho para compensar,
     entrando em conflito com a posição que o JS acabou de calcular */
  overflow-anchor: none;
  /* padding+margin cancelam-se no layout (overflow-x:auto força overflow-y:auto,
     que cortaria o cartão central ao crescer + a sua sombra sem este espaço) */
  padding-block: 24px;
  margin-block: -24px;
}
.novidades-track::-webkit-scrollbar { display: none; }
.novidades-track > .vcard {
  flex: 0 0 min(85vw, 330px); /* Figma: cartões 330px */
  scroll-snap-align: start;
  /* box-shadow fora da transition de propósito: a sombra grande e desfocada
     repintava a cada frame durante o scroll do carrossel — troca instantânea,
     só o transform (scale) continua a animar */
  transition: transform 260ms var(--ease);
}
.novidades-track > .vcard.is-center {
  transform: scale(1.045);
  box-shadow: var(--shadow-card-hover);
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .novidades-track { scroll-behavior: auto; }
  .novidades-track > .vcard { transition: none; }
}
.novidades-track > .vcard.is-center:hover {
  transform: scale(1.045) translateY(-2px);
}

.novidades-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.novidades-edge--left {
  left: 0;
  mask-image: linear-gradient(to right, black, transparent);
  -webkit-mask-image: linear-gradient(to right, black, transparent);
}
.novidades-edge--right {
  right: 0;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}

.slider-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-amber);
  border: 1px solid transparent;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  cursor: pointer;
  transition: box-shadow var(--duration) var(--ease);
}
.slider-arrow svg { width: 18px; height: 18px; }
.slider-arrow:hover { box-shadow: var(--shadow-card-hover); }
.slider-arrow[disabled] { opacity: .35; cursor: default; }
.slider-arrow--prev { left: -8px; }
.slider-arrow--next { right: -8px; }

/* ========== Filters ========== */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  /* Fixo ao fazer scroll: só onde o painel é curto o suficiente para não comer
     o ecrã. Fallback de 85px porque --header-h vem do JS (common.js) — sem ele
     o calc() ficava inválido e o sticky partia em silêncio.
     Tablet: decidido por medição (ver tablet.css) · telemóvel: gaveta. */
  position: sticky;
  top: calc(var(--header-h, 85px) + 16px);
  z-index: 20;
}

.filters__toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.filters__toggle button {
  padding: 0.55em 1.2em;
  background: var(--color-white);
  border: none;
  font-weight: 600;
  font-size: var(--fs-body-sm);
  cursor: pointer;
}
.filters__toggle button[aria-pressed="true"] {
  background: var(--color-navy);
  color: var(--color-white);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  min-width: 8.5rem;
}
.field label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-muted);
}
.field select, .field input {
  padding: 0.55em 0.7em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: var(--fs-body-sm);
}

.filters__reset {
  margin-left: auto;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}

.filters__count {
  font-size: var(--fs-body-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}

/* Força as 2 filas do painel de filtros — telemóvel: none (fica em coluna) */
.filters__break { display: block; flex-basis: 100%; height: 0; margin: 0; }

/* Gaveta de filtros: só em telemóvel (ver mobile.css) */
.filters__drawer-toggle {
  display: none;   /* telemóvel: inline-flex */
}

/* ========== Testimonial ========== */
.testimonial {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.testimonial p {
  font-family: var(--font-display);
  font-size: var(--fs-subhead);
  font-weight: 700;
  line-height: var(--lh-heading);
  max-width: none;
}
.testimonial__author {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-muted);
}
.testimonial--pending {
  border: 1px dashed var(--color-border);
  box-shadow: none;
  color: var(--color-muted);
}
.testimonial--pending p { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body); }

/* ========== Info blocks (garantia/financiamento) ========== */
.info-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.info-card__icon {
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-amber-tint);
  color: var(--color-amber-ink);
  margin-bottom: var(--space-3);
}

/* Variante com foto no topo (Serviços) em vez do ícone circular */
.info-card--media {
  padding: 0;
  overflow: hidden;
}
.info-card--media .info-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.info-card--media .info-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.info-card--media h3,
.info-card--media p {
  padding-inline: var(--space-4);
}
.info-card--media h3 {
  margin-top: var(--space-3);
  /* reserva espaço para 2 linhas, para o parágrafo começar sempre à mesma altura
     independentemente de o título de cada card ocupar 1 ou 2 linhas */
  min-height: calc(var(--fs-subhead) * var(--lh-heading) * 2);
}
.info-card--media p { padding-bottom: var(--space-4); }

/* ========== Ficha de viatura — layout ==========
   Aqui e não no <style> inline da página: o inline carrega depois dos ficheiros
   de tier e ganhava-lhes na cascata.
   minmax(0,…) e não 1fr: sem isto o min-content da tabela de specs fixava a
   coluna em 407px e a página arrastava na horizontal em telemóvel
   (+52px a 375, +107px a 320 — medido). Mesmo bug do hero-search (f6e28af). */
.ficha-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1.3fr minmax(0, 1fr);   /* telemóvel: 1 coluna */
}

/* ========== Sticky CTA bar (só telemóvel, ficha de viatura) ========== */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--color-navy);
  padding: var(--space-2) var(--grid-margin);
  display: none;   /* telemóvel: flex */
  gap: var(--space-2);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
}
/* min-width: 0 — sem isto o flex-shrink não passa abaixo do min-content do
   botão do WhatsApp (179px) e a barra transbordava a 320px. */
.sticky-cta .btn { flex: 1; min-width: 0; justify-content: center; }

/* ========== WhatsApp floating button (all pages) ========== */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 45;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--color-amber);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card-hover);
}
.whatsapp-float svg { width: 1.5rem; height: 1.5rem; }

/* ========== Cookie consent banner (all pages) ========== */
/* Card ancorado a bottom-left, não barra full-width, para nunca sobrepor o
   whatsapp-float (bottom-right, z-index 45) — evita ter de coordenar as duas
   posições em cada breakpoint. */
.cookie-banner {
  position: fixed;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 60;
  max-width: 22rem;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-card-hover);
}
.cookie-banner p {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
  color: var(--color-muted-on-navy);
}
.cookie-banner__actions {
  display: flex;
  gap: var(--space-2);
}
.cookie-banner__actions .btn { flex: 1; justify-content: center; }
/* fundo é sempre navy aqui, independente da secção da página onde o banner
   é injetado (fica anexado a document.body) — por isso não pode depender de
   .section--navy como o resto do .btn--outline */
.cookie-banner .btn--outline { color: var(--color-white); }
.cookie-banner .btn--outline:hover { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 809px) {
  .cookie-banner {
    left: var(--grid-margin);
    right: var(--grid-margin);
    bottom: var(--grid-margin);
    max-width: none;
  }
}