/* Shared navigation and category controls. */
html { scroll-padding-top: 110px; }

/* Integração oficial do Lenis (https://lenis.darkroom.engineering) — esta
   regra faltava, e era a causa real do scroll "com atraso": o Lenis
   calcula posições intermédias a cada frame, e o scroll-behavior:smooth
   nativo do browser tentava suavizar essas posições outra vez por cima —
   duas suavizações a competir dão exactamente a sensação de arrasto/
   atraso. Esta regra desliga a suavização nativa enquanto o Lenis está
   activo (a classe "lenis"/"lenis-smooth" é posta no <html> pelo próprio
   Lenis, automaticamente, ao instanciar). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
/* background era rgba(5,5,5,.94) — já tinha blur(20px), mas a opacidade
   tão alta deixava o vidro fosco quase impercetível (via-se pouco do que
   estava por trás). Reduzido para ficar realmente translúcido. */
body .site-header.rma-header,
body .site-header.rma-header.is-scrolled {
  position: sticky; inset: 0 0 auto; z-index: 100;
  height: 88px; padding: 0 clamp(20px,5vw,72px);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(5,5,5,.62); color: white;
  border-bottom: 1px solid rgba(208,160,68,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 30px #0002;
}
/* Logótipo o maior possível dentro dos 88px de altura do header, sem
   alterar a altura do próprio header (pedido do utilizador, 15 set
   2026) — object-fit:contain é limitado pela LARGURA do contentor
   (a imagem é bem mais larga que alta), por isso a largura também
   subiu, não só a altura, para o logo deixar de ficar por baixo do
   espaço vertical disponível. */
.rma-header .rma-brand { width: 260px; flex-shrink: 0; }
.rma-header .rma-brand img { width: 100%; height: 57px; object-fit: contain; }
body .rma-header nav { display: flex; gap: 12px; }
body .rma-header nav .rma-nav-button {
  display: inline-flex; align-items: center; gap: 30px; padding: 14px 20px;
  min-height: 46px; border: 1px solid #d0a04480; border-radius: 4px;
  font: 500 13px Gotham,sans-serif; color: white; text-decoration: none;
  transition: background .25s, color .25s, transform .25s;
}
body .rma-header nav .rma-nav-button::after { display: none; }
.rma-nav-button span { color:#dfa935; }
body .rma-header nav .rma-nav-button:hover { background: #d0a044; color: black; transform: translateY(-2px); }
.rma-nav-button:hover span { color: black; }
body .hero { padding-top: 72px; }
.category-slider { display: grid; grid-template-columns: 46px minmax(0,1fr) 46px; align-items: center; gap: 14px; position: relative; }
/* O arrasto (GSAP Draggable, em shared.js) move a faixa por transform — o
   viewport só precisa de recortar o que sai fora, sem scroll nativo nem
   scroll-snap "mandatory" (era isso que dava a sensação de "preso"). */
body .category-viewport { overflow: hidden; }
/* Rede de segurança sem GSAP (ver shared.js) — volta ao scroll nativo. */
body .category-viewport.no-js-drag { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body .category-list, body .category-track { scroll-snap-type: none; }
body .category { scroll-snap-align: start; }
.category-slider > button { width: 46px; height: 46px; border: 1px solid #d0a04480; border-radius: 4px; background: #111; color:#dfa935; cursor: pointer; font-size: 20px; transition: .25s; }
.category-slider > button:hover:not(:disabled) { background: #d0a044; color: black; }
.category-slider > button:disabled { opacity: .25; cursor: default; }
.category-index { display: none; }
body .hero-badge.rma-emblem { padding: 0; background: #080808; animation: none; transform: none; display: block; border: 0; }
.rma-emblem img { width: 100%; height: 100%; }
/* The letters and ring share one 3D space, so the ring intersects the letter plane. */
body .hero-badge.rma-emblem-3d { background: transparent; box-shadow: none; overflow: visible; perspective: 550px; }
.emblem-scene { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.emblem-letters { position: absolute; inset: 0; transform: translateZ(0); backface-visibility: visible; }
.emblem-axis { position: absolute; inset: 0; transform: rotateZ(-35deg); transform-style: preserve-3d; }
.emblem-ring { position: absolute; inset: 0; transform-style: preserve-3d; animation: emblem-diagonal-spin 9s linear infinite; }
.emblem-ring i { position: absolute; inset: 1.6667%; border: 7.87px solid #D0A044; border-radius: 50%; backface-visibility: visible; box-sizing: border-box; }
.emblem-ring i:nth-child(1) { transform: translateZ(-1.2px); border-color: #956518; }
.emblem-ring i:nth-child(2) { transform: translateZ(-.6px); border-color: #b98325; }
.emblem-ring i:nth-child(3) { transform: translateZ(0); }
.emblem-ring i:nth-child(4) { transform: translateZ(.6px); border-color: #e6b858; }
.emblem-ring i:nth-child(5) { transform: translateZ(1.2px); border-color: #D0A044; }
body .trust-orbit { border: 0; padding: 0; background: transparent; }
@keyframes emblem-diagonal-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media(prefers-reduced-motion:reduce) { .emblem-ring { animation: none; } }
.contact-channels { display: flex; flex-wrap: wrap; gap: 20px 44px; margin: 28px 0 0; }
.contact-channels dt { font: 500 10px Gotham,sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.contact-channels dd { position: relative; margin: 6px 0 0; font: 500 23px Gotham,sans-serif; }
/* Ícone WhatsApp junto ao telefone no cartão de contactos — preto
   (var(--ink)) de propósito, o fundo da secção é dourado (pedido do
   utilizador, 11 set 2026). position:absolute de propósito — fora do
   fluxo normal do texto, para não influenciar a altura da linha/
   baseline do número de telefone (era isso que desalinhava o texto
   "935 975 653" em relação ao "geral@rmautos.pt" ao lado: um <a>
   inline de 40px dentro da mesma linha do texto empurra a baseline
   dessa linha, mesmo sem display:flex no dd — corrigido de vez
   retirando o ícone do fluxo, 16 set 2026). */
.contact-whatsapp { position: absolute; left: 100%; top: 50%; margin-left: 10px; transform: translateY(-50%); color: var(--ink); }
.contact-whatsapp svg { display: block; width: 40px; height: 40px; fill: currentColor; }

/* Ícones de redes sociais do rodapé — dourado sobre o fundo escuro do
   footer, mesmo idioma visual dos badges circulares do resto do site
   (pedido do utilizador, 11 set 2026). */
.footer-social { display: flex; justify-content: center; gap: 20px; }
.footer-social a { width: 68px; height: 68px; border-radius: 50%; border: 1px solid #ffffff26; display: grid; place-items: center; color:#dfa935; transition: .25s; }
.footer-social a:hover { background: var(--gold-hi); color: #15100a; border-color: var(--gold-hi); }
.footer-social svg { width: 32px; height: 32px; fill: currentColor; }
.footer-powered { text-decoration: none; }
.offer-card { cursor: pointer; }
.offer-card:focus-within { outline: 2px solid #d0a044; outline-offset: 4px; }
body .vehicle-modal { overflow: hidden; }
body .vehicle-modal-panel { height: min(760px,calc(100dvh - 48px)); min-height: 0; overflow: hidden; }
body .modal-media { min-height: 0; height: 100%; }
body .modal-content { overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-color: #d0a044 #151515; scrollbar-width: thin; }
body .modal-close { z-index: 10; top: 12px; right: 12px; }
.modal-media > button { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; background: #080808c9; color:#dfa935; border: 1px solid #d0a04480; cursor: pointer; font-size: 20px; }
.gallery-prev { left: 16px; }.gallery-next { right: 16px; }
.modal-media > button:disabled { opacity: .35; cursor: default; }
.modal-media > button:hover:not(:disabled) { background: #d0a044; color: black; }
.modal-extra h3 { font: 500 19px Gotham,sans-serif; margin: 26px 0 10px; }
.modal-extra p { color: #aaa49a; font-size: 13px; line-height: 1.8; }
.modal-content > a { flex-shrink: 0; }
@media(max-width:760px) {
  body .site-header.rma-header, body .site-header.rma-header.is-scrolled { height: 76px; padding-inline: 14px; }
  .rma-header .rma-brand { width: 170px; }
  .rma-header .rma-brand img { height: 62px; }
  /* gap/padding reduzidos (eram 7px/12px) — com o 3º botão "Home"
     acrescentado ao lado de Ofertas/Contactos, os valores antigos já não
     cabiam a partir de ~390px de largura (o iPhone 13/14/15 "normal", não
     um caso extremo) e criavam scroll horizontal real no header — medido
     com Playwright (`header.scrollWidth > clientWidth`), não a olho.
     Confirmado sem overflow em 320-414px, Chromium e WebKit, 7 set 2026. */
  body .rma-header nav { gap: 5px; }
  body .rma-header nav .rma-nav-button { padding: 11px 9px; gap: 0; font-size: 12px; }
  .rma-nav-button span { display: none; }
  .category-slider { grid-template-columns: 40px minmax(0,1fr) 40px; gap: 6px; }
  .category-slider > button { width: 40px; height: 46px; }
  body .vehicle-modal-panel { grid-template-rows: minmax(170px,32dvh) minmax(0,1fr); height: calc(100dvh - 32px); }
  body .modal-media { height: 100%; }
  body .modal-content { padding: 24px; }
}
/* Breakpoint alargado de 380 para 400px — medido com Playwright (16 set
   2026): o header (logótipo 170px + 3 botões) precisa de ~396px para
   não sobrepor, por isso ficava uma faixa 381-395px sem correção, com
   overflow horizontal real (até 6px a 390px, medido em viewport real
   sem scrollbar). */
@media(max-width:400px) { .rma-header .rma-brand { width: 110px; } body .rma-header nav .rma-nav-button { padding-inline: 6px; } }
@media(prefers-reduced-motion:reduce) { .rma-header *, .category-slider * { transition: none!important; scroll-behavior: auto!important; } }

/* Modal "Onde estamos" (footer.php, acionado pelo cartão "Visite-nos" e
   pelo link do rodapé) — CSS próprio, sem depender de ofertas.css (só
   carregado em Ofertas/ficha do carro, não na home nem noutras páginas
   onde este modal também precisa de funcionar). */
.location-modal{width:min(560px,calc(100% - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid rgba(208,160,68,.35);background:#111;color:#fff;box-shadow:0 40px 120px #000;border-radius:24px;overflow:hidden}
.location-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(12px)}
.location-modal[open]{animation:locationModalIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes locationModalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.location-modal-panel{padding:34px 30px;position:relative}
.location-modal-panel .eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-size:10px;letter-spacing:.23em;font-weight:700;color:#dfa935;margin:0 0 14px}
.location-modal-panel .eyebrow span{width:30px;height:1px;background:currentColor}
.location-modal-panel h2{font:500 26px var(--display,"Gotham",sans-serif);margin:0 0 10px}
.location-modal-address{color:#ffffffb3;font-size:14px;line-height:1.6;margin:0 0 20px}
.location-modal-map{border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/10}
.location-modal-map iframe{width:100%;height:100%;border:0;display:block}
.location-modal-link{display:inline-flex;align-items:center;gap:10px;margin-top:20px;text-decoration:none;color:#dfa935;font-size:13px;font-weight:600}
.location-modal .modal-close{position:absolute;z-index:5;right:16px;top:16px;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.7);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:.3s;border-radius:50%}
.location-modal .modal-close:hover{background:var(--gold-hi);color:#14100a;border-color:var(--gold-hi)}
@media(max-width:460px){.location-modal-panel{padding:26px 20px}.location-modal-panel h2{font-size:22px}}

/* Modais "Termos e Condições" / "Política de Privacidade de Dados"
   (footer.php + inc/legal-modals.php) — mesmo idioma visual do modal
   "Onde estamos" acima, mas mais largo/alto e com corpo em scroll
   próprio (texto legal completo, não cabe numa janela só). */
.legal-modal{width:min(720px,calc(100% - 32px));height:min(760px,calc(100vh - 48px));padding:0;border:1px solid rgba(208,160,68,.35);background:#111;color:#fff;box-shadow:0 40px 120px #000;border-radius:24px;overflow:hidden}
.legal-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(12px)}
.legal-modal[open]{animation:locationModalIn .4s cubic-bezier(.16,1,.3,1)}
.legal-modal-panel{padding:34px 30px;position:relative;height:100%;display:flex;flex-direction:column}
.legal-modal-panel .eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-size:10px;letter-spacing:.23em;font-weight:700;color:#dfa935;margin:0 0 14px}
.legal-modal-panel .eyebrow span{width:30px;height:1px;background:currentColor}
.legal-modal-panel h2{font:500 26px var(--display,"Gotham",sans-serif);margin:0 0 18px;flex-shrink:0}
.legal-modal-body{overflow-y:auto;min-height:0;padding-right:8px;scrollbar-color:#d0a044 #151515;scrollbar-width:thin}
.legal-modal-body h3{font:500 16px var(--display,"Gotham",sans-serif);color:#dfa935;margin:26px 0 10px}
.legal-modal-body h3:first-child{margin-top:0}
.legal-modal-body p{color:#ffffffb3;font-size:13px;line-height:1.75;margin:0 0 12px}
.legal-modal-body ul{margin:0 0 12px;padding-left:18px;color:#ffffffb3;font-size:13px;line-height:1.75}
.legal-modal-body a{color:#dfa935}
.legal-modal .modal-close{position:absolute;z-index:5;right:16px;top:16px;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.7);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:.3s;border-radius:50%}
.legal-modal .modal-close:hover{background:var(--gold-hi);color:#14100a;border-color:var(--gold-hi)}
@media(max-width:460px){.legal-modal-panel{padding:26px 20px}.legal-modal-panel h2{font-size:22px}}