/* AutoMorfose — feuille de style portée depuis la maquette Claude Design.
Les valeurs (couleurs, tailles, rayons, ombres, durées) sont reprises telles
quelles. Ce qui change : la maquette pilotait la mise en page par un drapeau
« isMobile » ; ici ce sont de vraies media queries à 900 px. */
:root{
--am-paper:#FFFFFF;--am-canvas:#F5F8FB;--am-canvas-2:#EBF1F7;--am-line:#E1E8F0;--am-line-strong:#C9D5E2;
--am-ink:#0F1922;--am-body:#3D4A57;--am-muted:#6B7A89;--am-faint:#9AA8B5;
/* TOUS LES BLEUS SONT CALÉS SUR LE LOGO, teinte 210°.
Relevé le 04/08/2026 dans logo-automorfose.png : sa couleur dominante est
#0777E9. Le site était à 202°, une teinte plus cyan : côte à côte, le bleu
des titres ne rappelait pas celui de la marque.
Une seule teinte, trois clartés selon le fond. Un bleu unique en valeur
absolue est impossible : à contraste égal, ce qui se lit sur blanc
disparaît sur une photo sombre. `--am-sky` est donc le MÊME bleu, éclairci
pour le bandeau. Contrastes mesurés : blue 4,35 sur blanc, sky 9,08 sur le
bandeau, blue-deep 7,23 sur blanc pour le survol. */
--am-sky:#74B7FB;--am-sky-soft:#D6E8FB;--am-sky-wash:#F0F7FE;--am-blue:#0777E9;--am-blue-deep:#0556A8;
--am-success:#0E9F6E;--am-warn:#B45309;--am-ease:cubic-bezier(.16,1,.3,1);
--stripe:repeating-linear-gradient(135deg,#E7EEF6 0 14px,#F2F7FB 14px 28px);
--photo:saturate(1.05) contrast(1.04) brightness(1.02);
--ring:inset 0 0 0 1px rgba(15,25,34,.07);
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
body{margin:0;background:var(--am-paper);font-family:Inter,system-ui,sans-serif;color:var(--am-body);
-webkit-font-smoothing:antialiased;}
a{color:var(--am-blue);text-decoration:none;}
a:hover{color:var(--am-blue-deep);}
h1,h2,h3{font-family:Archivo,sans-serif;color:var(--am-ink);margin:0;}
img{display:block;}
select{-webkit-appearance:none;appearance:none;}
button{font-family:inherit;}
@media (prefers-reduced-motion: no-preference){
[data-reveal]{opacity:0;transform:translateY(22px);
transition:opacity .7s var(--am-ease),transform .7s var(--am-ease);}
[data-reveal].in{opacity:1;transform:none;}
@keyframes amRise{from{opacity:0;transform:translateY(112%);}to{opacity:1;transform:none;}}
@keyframes amKen{from{transform:scale(1.12);}to{transform:scale(1.02);}}
@keyframes amFade{from{opacity:0;}to{opacity:1;}}
@keyframes amMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes amFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(0,-26px);}}
}
@media (prefers-reduced-motion: reduce){
[data-reveal]{opacity:1!important;transform:none!important;}
*{animation:none!important;}
}
.wrap{max-width:1200px;margin:0 auto;padding-inline:28px;}
/* ── En-tête ─────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.82);
backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--am-line);}
/* Rembourrage resserré le 04/08/2026 : le logo est remonté dans les trois
endroits où il apparaît, en-tête, menu du téléphone et pied de page. */
.hd{max-width:1200px;margin:0 auto;padding:11px 28px;display:flex;align-items:center;gap:32px;}
.logo{border:none;background:none;cursor:pointer;padding:0;display:block;line-height:0;}
.logo img{height:46px;width:auto;}
@media(max-width:900px){.logo img{height:38px;}}
nav.principal{display:flex;gap:26px;margin-left:auto;align-items:center;}
nav.principal button{font:600 15px/1 Inter,sans-serif;padding:8px 2px;border:none;background:none;
cursor:pointer;letter-spacing:.01em;color:var(--am-ink);}
/* L'onglet courant : couleur de marque et trait dessous. La couleur seule
ne suffit pas — elle disparaît pour qui distingue mal le bleu du noir. */
nav.principal button{position:relative;transition:color .2s var(--am-ease);}
nav.principal button:hover{color:var(--am-blue);}
nav.principal button[aria-current="page"]{color:var(--am-blue);font-weight:700;}
nav.principal button[aria-current="page"]::after{content:'';position:absolute;
left:2px;right:2px;bottom:-2px;height:2px;border-radius:2px;background:var(--am-blue);}
/* Même repère dans le menu plein écran du téléphone. */
#menu button.ir[aria-current="page"]{color:var(--am-blue);}
.btn-ligar{background:var(--am-blue);color:#fff;font:700 14px/1 Archivo;padding:11px 18px;
border-radius:6px;box-shadow:0 1px 2px rgba(15,25,34,.05);}
.btn-ligar:hover{color:#fff;}
.burger{margin-left:auto;border:1px solid var(--am-line-strong);background:#fff;border-radius:6px;
width:44px;height:44px;display:none;place-items:center;cursor:pointer;}
/* Menu plein écran (mobile) */
#menu{position:fixed;inset:0;z-index:200;background:#fff;padding:16px 24px 24px;
display:none;flex-direction:column;animation:amFade .2s var(--am-ease);}
#menu.aberto{display:flex;}
#menu .topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;}
#menu .marca{height:40px;width:auto;}
#menu .fechar{border:1px solid var(--am-line-strong);background:#fff;border-radius:6px;width:44px;
height:44px;font-size:22px;color:var(--am-ink);cursor:pointer;}
#menu button.ir{text-align:left;border:none;border-bottom:1px solid var(--am-line);background:none;
padding:20px 0;font-family:Archivo;font-weight:700;font-size:28px;letter-spacing:-.02em;
color:var(--am-ink);cursor:pointer;}
#menu .ligar{margin-top:auto;text-align:center;background:var(--am-blue);color:#fff;
font:700 17px/1 Archivo;padding:18px;border-radius:6px;}
@media(max-width:900px){
nav.principal{display:none;}
.burger{display:grid;}
.hd{padding:8px 20px;gap:16px;}
}
/* ── Boutons ─────────────────────────────────────────────────────────── */
.b-azul{background:var(--am-blue);color:#fff;font:700 16px/1 Archivo;padding:18px 30px;border:none;
border-radius:6px;cursor:pointer;box-shadow:0 10px 30px -8px rgba(7,119,233,.55);
transition:transform .3s var(--am-ease),box-shadow .3s var(--am-ease);display:inline-block;}
.b-azul:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(7,119,233,.65);color:#fff;}
.b-vidro{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);color:var(--am-blue);
font:700 16px/1 Archivo;padding:18px 30px;border:1px solid var(--am-line-strong);border-radius:6px;
display:inline-block;cursor:pointer;}
.b-branco{background:#fff;border:1px solid var(--am-line-strong);color:var(--am-blue);
font:700 15px Archivo;padding:14px 22px;border-radius:6px;cursor:pointer;display:inline-block;}
.b-texto{border:none;background:none;color:var(--am-blue);font:600 15px Inter;cursor:pointer;}
.eyebrow{display:inline-block;color:var(--am-blue);font:700 13px Inter;letter-spacing:.14em;
text-transform:uppercase;}
/* ── Accueil : héros ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(90vh,860px);overflow:hidden;background:var(--am-sky-wash);
display:flex;align-items:flex-end;}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 62%;
filter:var(--photo);animation:amKen 16s var(--am-ease) both;}
/* Voile sombre, et non plus blanc : le titre et le paragraphe sont passés en
blanc. Un texte blanc sur un voile blanc ne se lit pas, les deux vont
ensemble.
RENFORCÉ le 03/08/2026, en même temps que le changement de photo. L'ancienne
image du bandeau était une R8 quasi noire : le dégradé n'avait presque rien à
masquer, il la prolongeait. La nouvelle est une photo du parc en plein jour,
avec du gravier clair et du ciel. Aux anciennes valeurs, le paragraphe sous
le titre se noyait dans le gravier.
Mesuré sur les deux photos candidates avant de trancher. */
.hero .veu{position:absolute;inset:0;background:linear-gradient(102deg,
rgba(8,14,20,.96) 0%,rgba(8,14,20,.90) 26%,rgba(8,14,20,.70) 46%,
rgba(8,14,20,.40) 66%,rgba(7,119,233,.18) 100%);}
.hero .grao{position:absolute;inset:0;background-image:var(--noise);background-size:150px;
opacity:.05;mix-blend-mode:multiply;pointer-events:none;}
.hero .conteudo{position:relative;width:100%;max-width:1200px;margin:0 auto;
padding:clamp(48px,7vw,110px) 28px clamp(40px,5vw,72px);}
/* Bleu clair et non bleu de marque : sur le voile sombre, le #0777E9 passait
sous le seuil de contraste lisible. */
.hero .marca-linha{display:inline-flex;align-items:center;gap:9px;color:var(--am-sky);
font:700 13px/1 Inter;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px;}
.hero .marca-linha::before{content:'';width:26px;height:2px;background:var(--am-sky);display:inline-block;}
.hero h1{font-size:clamp(3rem,9vw,7.5rem);font-weight:800;letter-spacing:-.035em;line-height:.92;
color:#fff;}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.02em;}
.hero h1 span span{display:inline-block;animation:amRise 1s var(--am-ease) both;}
.hero h1 span:nth-child(1) span{animation-delay:.05s;}
.hero h1 span:nth-child(2) span{animation-delay:.18s;}
.hero h1 span:nth-child(3) span{animation-delay:.31s;color:var(--am-sky);}
/* 40ch, comme la maquette : au-delà, le texte déborde de la zone voilée et
retombe sur la carrosserie. Blanc légèrement adouci plutôt que blanc pur —
du #fff pour un paragraphe entier fatigue l'œil, le titre suffit à porter
le contraste maximal. */
.hero p{max-width:40ch;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;
color:rgba(255,255,255,.92);margin:28px 0 34px;}
/* Le bouton de verre était dessiné pour le voile blanc d'origine : sur fond
sombre il ressortait gris terne. Même effet, valeurs inversées. */
.hero .b-vidro{background:rgba(255,255,255,.12);color:#fff;
border-color:rgba(255,255,255,.32);}
.hero .b-vidro:hover{background:rgba(255,255,255,.2);color:#fff;}
.hero .accoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
/* Carte « Em destaque » posée sur le héros */
.hero-destaque{position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(16px,3vw,44px);z-index:2;
text-align:left;cursor:pointer;background:rgba(255,255,255,.82);
backdrop-filter:saturate(1.4) blur(16px);border:1px solid rgba(255,255,255,.6);border-radius:14px;
padding:16px 18px;box-shadow:0 18px 48px -12px rgba(15,25,34,.3);display:flex;gap:14px;
align-items:center;transition:transform .35s var(--am-ease);}
.hero-destaque:hover{transform:translateY(-4px);}
.hero-destaque .foto{width:76px;height:56px;border-radius:8px;overflow:hidden;box-shadow:var(--ring);flex:none;}
.hero-destaque .foto img{width:100%;height:100%;object-fit:cover;filter:var(--photo);}
.hero-destaque .rot{display:block;font:700 11px/1 Inter;letter-spacing:.12em;text-transform:uppercase;
color:var(--am-blue);margin-bottom:5px;}
.hero-destaque .nom{display:block;font:700 16px/1 Archivo;color:var(--am-ink);letter-spacing:-.01em;}
.hero-destaque .pre{display:block;font:700 15px/1 Archivo;color:var(--am-ink);margin-top:5px;}
.hero-destaque .seta{align-self:stretch;display:grid;place-items:center;padding-left:6px;
color:var(--am-blue);font-size:20px;}
@media(max-width:900px){
.hero{min-height:520px;}
.hero .conteudo{padding:34px 20px;}
.hero h1{font-size:2.9rem;}
.hero-destaque{display:none;}
/* Le dégradé de la maquette va de gauche à droite : sur un écran étroit le
texte retombe sur la photo et devient illisible. En dessous de 900 px on
le bascule à la verticale — même couleurs, même intention, texte lisible. */
.hero .veu{background:linear-gradient(178deg,
rgba(8,14,20,.94) 0%,rgba(8,14,20,.88) 42%,rgba(8,14,20,.72) 62%,
rgba(8,14,20,.44) 80%,rgba(7,119,233,.18) 100%);}
.hero>img{object-position:72% 78%;}
}
/* ── Bandeau défilant ────────────────────────────────────────────────── */
.marquee{overflow:hidden;background:var(--am-blue);color:#fff;padding:15px 0;white-space:nowrap;}
.marquee .pista{display:inline-flex;gap:0;animation:amMarquee 26s linear infinite;will-change:transform;}
.marquee .grupo{display:inline-flex;gap:44px;padding-right:44px;font:700 15px/1 Archivo;
letter-spacing:.01em;align-items:center;}
.marquee .grupo span[aria-hidden]{color:var(--am-sky);}
.marquee .losango{color:var(--am-sky);}
/* ── Sections ────────────────────────────────────────────────────────── */
.sec-canvas{background:var(--am-canvas);border-block:1px solid var(--am-line);}
.sec{max-width:1200px;margin:0 auto;padding:clamp(48px,6vw,88px) 28px;}
h2.titulo{font-size:clamp(1.6rem,3.5vw,2.5rem);letter-spacing:-.03em;}
.argumentos{max-width:1200px;margin:0 auto;padding:clamp(36px,5vw,64px) 28px;display:grid;
grid-template-columns:repeat(4,1fr);gap:20px;}
/* Cartes pleines plutôt que texte flottant : la bande se remplit sur toute la
largeur au lieu de laisser quatre colonnes de vide entre les blocs. */
.argumentos>div:first-child{margin-bottom:4px;}
.argumentos>div:not(:first-child){background:var(--am-paper);border:1px solid var(--am-line);
border-radius:14px;padding:24px 22px;box-shadow:0 1px 2px rgba(15,25,34,.05);}
.argumentos .icone{width:44px;height:44px;border-radius:10px;background:var(--am-sky-wash);
display:grid;place-items:center;margin-bottom:16px;}
.argumentos h3{font-size:17px;letter-spacing:-.01em;margin-bottom:6px;}
.argumentos p{font-size:14.5px;line-height:1.55;color:var(--am-muted);}
@media(max-width:1000px){.argumentos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.argumentos{grid-template-columns:1fr;}}
.cab-sec{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px;
flex-wrap:wrap;}
/* ── Carte véhicule ──────────────────────────────────────────────────── */
.viatura{text-align:left;border:1px solid var(--am-line);background:var(--am-paper);border-radius:12px;
overflow:hidden;cursor:pointer;padding:0;box-shadow:0 1px 2px rgba(15,25,34,.05);
transition:box-shadow .3s var(--am-ease),transform .3s var(--am-ease);width:100%;display:block;}
.viatura:hover{box-shadow:0 18px 48px -12px rgba(15,25,34,.16);transform:translateY(-4px);}
.viatura .foto{position:relative;aspect-ratio:16/10;overflow:hidden;box-shadow:var(--ring);
background:var(--stripe);}
.viatura .foto img{width:100%;height:100%;object-fit:cover;filter:var(--photo);
transition:transform .7s var(--am-ease);}
.viatura:hover .foto img{transform:scale(1.06);}
.viatura .foto .sem{position:absolute;inset:0;display:grid;place-items:center;color:var(--am-faint);
font:500 13px Inter;}
.viatura .selo{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);
backdrop-filter:blur(6px);color:var(--am-ink);font:700 15px/1 Archivo;padding:9px 13px;
border-radius:999px;box-shadow:0 3px 10px rgba(15,25,34,.14);}
.viatura .corpo{padding:20px 22px;}
.viatura .linha1{display:flex;justify-content:space-between;gap:12px;align-items:start;}
.viatura h3{font-size:20px;letter-spacing:-.02em;}
.viatura .versao{font-size:14px;color:var(--am-muted);}
.viatura .preco{font-family:Archivo;font-weight:700;font-size:19px;color:var(--am-ink);
font-variant-numeric:tabular-nums;white-space:nowrap;}
.viatura .meta{display:flex;gap:14px;margin-top:14px;font-size:13px;color:var(--am-muted);flex-wrap:wrap;}
/* La maquette mettait 1.4fr 1fr : élégant avec deux cartes, bancal avec trois.
Colonnes égales — même hauteur d'image, même largeur, ça se compare. */
.grelha-destaques{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.grelha-destaques .viatura{display:flex;flex-direction:column;}
.grelha-destaques .viatura .corpo{flex:1;display:flex;flex-direction:column;}
@media(max-width:1000px){.grelha-destaques{grid-template-columns:repeat(2,1fr);}}
.grelha-stock{max-width:1200px;margin:0 auto;padding:32px 28px clamp(48px,6vw,80px);display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;align-items:start;}
/* PAS DE DÉCALAGE VERTICAL, et c'est délibéré.
*
* Il y en avait un : `nth-child(even)` descendait une carte sur deux, pour
* « casser l'effet catalogue plat ». Deux raisons de l'avoir retiré.
*
* Il était faux. `nth-child` compte dans l'ordre du code, pas par colonne.
* Avec les trois colonnes qu'affiche cette grille au-delà de 956 px, les
* cartes 2, 4, 6 atterrissent chacune dans une colonne différente : le motif
* ne se raccroche à rien et se lit comme un défaut d'affichage. Le garde-fou
* qui l'annulait était posé à 900 px, alors que la troisième colonne apparaît
* à 956 : la bande entre les deux n'était couverte par personne.
*
* Et même corrigé, il dessert la page. Un stock se lit en balayant les prix
* et les kilométrages d'une colonne à l'autre ; décaler une carte oblige
* l'œil à remonter à chaque fois. L'intérêt visuel est ailleurs, dans les
* photos et le survol. */
.grelha-stock .viatura .corpo{padding:18px 20px;}
.grelha-stock .viatura h3{font-size:18px;}
.grelha-stock .viatura .versao{font-size:13px;}
.grelha-stock .viatura .preco{font-size:17px;}
.grelha-stock .viatura .selo{top:11px;left:11px;font-size:14px;padding:8px 12px;}
.grelha-stock .viatura .meta{gap:10px;margin-top:14px;padding-top:14px;
border-top:1px solid var(--am-line);font-size:12.5px;}
.meia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;}
.horario{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:center;}
@media(max-width:900px){
.grelha-destaques{grid-template-columns:1fr;}
.meia,.horario{grid-template-columns:1fr;}
.sec,.argumentos{padding-inline:20px;}
.grelha-stock{padding-inline:20px;}
}
.foto-larga{position:relative;aspect-ratio:5/4;border-radius:12px;overflow:hidden;
box-shadow:var(--ring),0 18px 48px -16px rgba(15,25,34,.16);}
.foto-larga img{width:100%;height:100%;object-fit:cover;filter:var(--photo);}
.citacao{position:relative;overflow:hidden;max-width:900px;margin:0 auto;
padding:clamp(56px,8vw,110px) 28px;text-align:center;}
.citacao .halo{position:absolute;width:420px;height:420px;border-radius:50%;
background:radial-gradient(circle,rgba(116,183,251,.35),transparent 70%);top:50%;left:50%;
transform:translate(-50%,-50%);filter:blur(20px);animation:amFloat 9s var(--am-ease) infinite;
pointer-events:none;}
.citacao p{position:relative;font-family:Archivo;font-weight:700;
font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.25;letter-spacing:-.02em;color:var(--am-ink);
text-wrap:balance;}
.mapa{display:grid;place-items:center;aspect-ratio:16/11;border-radius:12px;background:var(--stripe);
box-shadow:inset 0 0 0 1px rgba(15,25,34,.06);font-family:ui-monospace,monospace;font-size:12px;
color:var(--am-muted);position:relative;}
.a-confirmar{padding:12px 14px;background:#fff;border:1px dashed var(--am-line-strong);border-radius:6px;
font:600 13px Inter;color:var(--am-warn);}
/* ── Stock : barre de filtres ────────────────────────────────────────── */
.barra-filtros{position:sticky;top:69px;z-index:60;background:rgba(255,255,255,.9);
backdrop-filter:blur(12px);border-block:1px solid var(--am-line);}
.barra-filtros .linha{max-width:1200px;margin:0 auto;padding:14px 28px;display:flex;gap:12px;
flex-wrap:wrap;align-items:center;}
/* Les six filtres forment un bloc, le tri en forme un autre.
Sans ce regroupement, « Ordenar por » se retrouvait seul sur une deuxième
ligne collé à droite, et la barre paraissait cassée. */
.grupo-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.barra-filtros select{padding:11px 34px 11px 14px;border:1px solid var(--am-line-strong);
border-radius:8px;font:500 14px Inter;color:var(--am-ink);cursor:pointer;min-height:44px;
transition:border-color .18s var(--am-ease),background-color .18s var(--am-ease),
box-shadow .18s var(--am-ease);
background:#fff url("data:image/svg+xml;utf8,") no-repeat right 12px center;}
.barra-filtros select:hover{border-color:var(--am-sky);}
.barra-filtros select:focus-visible{outline:none;border-color:var(--am-blue);
box-shadow:0 0 0 3px var(--am-sky-soft);}
/* Un filtre actif se voit. Auparavant, six menus identiques : impossible de
savoir lesquels étaient appliqués sans les ouvrir un par un. La classe est
posée par app.js à chaque changement. */
.barra-filtros select.ativo{border-color:var(--am-blue);background-color:var(--am-sky-wash);
color:var(--am-blue);font-weight:600;
background-image:url("data:image/svg+xml;utf8,");}
/* Le tri n'est pas un filtre : il ne réduit pas la liste, il la réordonne.
Un peu d'air avant lui suffit à le distinguer, maintenant que les libellés
sont courts et que tout tient sur une ligne. */
#f-ordem{flex:none;margin-left:6px;}
@media(max-width:900px){
.barra-filtros .linha{padding:12px 20px;gap:10px;}
.grupo-filtros{flex:1 1 100%;}
/* Sur téléphone les six filtres tiennent en deux colonnes : plus lisible
qu'une file d'attente de menus tronqués. */
.grupo-filtros select{flex:1 1 calc(50% - 5px);min-width:0;}
#f-ordem{flex:1 1 100%;margin-left:0;}
}
.chips{max-width:1200px;margin:0 auto;padding:0 28px 14px;display:flex;gap:8px;flex-wrap:wrap;
align-items:center;}
.chips button.chip{display:inline-flex;align-items:center;gap:7px;background:var(--am-sky-wash);
color:var(--am-blue);border:1px solid var(--am-sky-soft);border-radius:999px;padding:6px 12px;
font:600 13px Inter;cursor:pointer;min-height:34px;}
.chips .limpar{border:none;background:none;color:var(--am-muted);font:600 13px Inter;cursor:pointer;
text-decoration:underline;}
.vazio{max-width:620px;margin:0 auto;padding:clamp(56px,9vw,120px) 28px;text-align:center;}
.vazio .icone{width:64px;height:64px;margin:0 auto 24px;border-radius:12px;background:var(--am-sky-wash);
display:grid;place-items:center;}
.vazio h2{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;margin-bottom:12px;}
.vazio p{color:var(--am-body);line-height:1.6;max-width:42ch;margin:0 auto 28px;}
.vazio .accoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.cta-stock{position:relative;overflow:hidden;
background:linear-gradient(120deg,var(--am-sky-wash),var(--am-sky-soft));
border:1px solid var(--am-sky-soft);border-radius:12px;padding:clamp(32px,5vw,56px);text-align:center;}
.cta-stock .halo{position:absolute;width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,rgba(116,183,251,.5),transparent 70%);top:-120px;right:-40px;
filter:blur(10px);}
.cta-stock h2{position:relative;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;margin-bottom:12px;}
.cta-stock p{position:relative;color:var(--am-body);margin-bottom:24px;}
.cta-stock a{position:relative;display:inline-block;background:var(--am-blue);color:#fff;
font:700 15px Archivo;padding:14px 24px;border-radius:6px;
box-shadow:0 10px 30px -8px rgba(7,119,233,.5);}
/* ── Fiche véhicule ──────────────────────────────────────────────────── */
.migalhas{max-width:1200px;margin:0 auto;padding:24px 28px 8px;font-size:13.5px;color:var(--am-muted);}
.migalhas button{border:none;background:none;color:var(--am-blue);font:inherit;cursor:pointer;padding:0;}
.ficha-grelha{max-width:1200px;margin:0 auto;padding:12px 28px clamp(48px,6vw,80px);display:grid;
grid-template-columns:1.5fr .9fr;gap:clamp(24px,3vw,44px);align-items:start;}
/* ── Galerie de la fiche voiture ─────────────────────────────────────────
Une piste qui défile, une photo par écran, format 16:10 conservé : une
voiture ne se regarde pas dans un carré, on y perd l'avant ou l'arrière.
Le geste vient du navigateur (scroll-snap) : balayage tactile fluide, avec
l'inertie du système, sans une ligne de JavaScript. Les flèches et les
miniatures ne font que déplacer cette même piste. */
.galeria{width:100%;position:relative;aspect-ratio:16/10;border-radius:12px;
overflow:hidden;box-shadow:var(--ring);background:var(--stripe);
perspective:1400px;}
.galeria-pista{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;}
.galeria-pista::-webkit-scrollbar{display:none;}
.galeria-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;position:relative;
cursor:zoom-in;overflow:hidden;}
.galeria-slide img{width:100%;height:100%;object-fit:cover;filter:var(--photo);
/* Léger dépassement : donne de la place au déplacement au survol sans
jamais laisser apparaître un bord vide. */
transform:scale(1.04);
transition:transform .5s var(--am-ease);will-change:transform;}
/* Le relief au survol, sur ordinateur seulement.
Sur téléphone il n'y a pas de survol : le balayage tient ce rôle, et on
n'impose pas d'animation permanente à une batterie. */
@media(hover:hover) and (pointer:fine){
.galeria-slide:hover img{transform:scale(1.09) translate3d(var(--px,0),var(--py,0),0);}
}
@media (prefers-reduced-motion: reduce){
.galeria-pista{scroll-behavior:auto;}
.galeria-slide img{transform:none;transition:none;}
.galeria-slide:hover img{transform:none;}
}
/* Flèches : discrètes, apparaissent au survol sur ordinateur, toujours
visibles au doigt — sur un téléphone on ne devine pas ce qui est caché. */
.galeria-seta{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:44px;height:44px;border-radius:999px;border:none;cursor:pointer;
background:rgba(255,255,255,.92);color:var(--am-ink);font-size:22px;line-height:1;
box-shadow:0 4px 16px -4px rgba(15,25,34,.3);
display:grid;place-items:center;transition:opacity .25s var(--am-ease);}
.galeria-seta.ant{left:12px;}
.galeria-seta.seg{right:12px;}
.galeria-seta[hidden]{display:none;}
@media(hover:hover) and (pointer:fine){
.galeria-seta{opacity:0;}
.galeria:hover .galeria-seta{opacity:1;}
}
/* « 3 / 8 » : on sait combien il en reste. Sans ce compteur, on ne devine
pas qu'il y a d'autres photos. */
.galeria-contador{position:absolute;top:12px;right:12px;z-index:3;
background:rgba(15,25,34,.78);backdrop-filter:blur(4px);color:#fff;
font:600 12px Inter;padding:6px 11px;border-radius:999px;font-variant-numeric:tabular-nums;}
.galeria .abrir{position:absolute;bottom:12px;right:12px;z-index:3;background:rgba(15,25,34,.82);
backdrop-filter:blur(4px);color:#fff;font:600 12px Inter;padding:8px 13px;border-radius:999px;
pointer-events:none;}
.miniaturas{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px;}
.miniaturas button{border:none;padding:0;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
box-shadow:var(--ring);cursor:pointer;background:var(--stripe);
outline:2px solid transparent;outline-offset:-2px;
transition:outline-color .2s var(--am-ease),opacity .2s var(--am-ease);opacity:.62;}
.miniaturas button:hover{opacity:1;}
/* La vignette de la photo affichée se distingue : sinon on ne sait plus où
on en est dans la série. */
.miniaturas button.ativa{outline-color:var(--am-blue);opacity:1;}
.miniaturas img{width:100%;height:100%;object-fit:cover;filter:var(--photo);}
.especificacoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.espec{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--am-line);
border-radius:12px;background:#fff;}
.espec .ic{flex:none;width:40px;height:40px;border-radius:8px;background:var(--am-sky-wash);
display:grid;place-items:center;}
.espec .rot{display:block;font:600 11px Inter;letter-spacing:.08em;text-transform:uppercase;
color:var(--am-muted);}
.espec .val{display:block;font:700 17px Archivo;color:var(--am-ink);}
.observacoes{margin-top:28px;padding:24px;background:var(--am-canvas);border:1px solid var(--am-line);
border-radius:12px;}
.observacoes h3{font-size:16px;margin-bottom:10px;}
.observacoes p{line-height:1.7;color:var(--am-body);max-width:66ch;
/* Le texte de l'annonce est saisi à la main, avec des paragraphes. En HTML,
un saut de ligne s'affiche comme une simple espace : tout arrivait donc
collé en un seul bloc, alors que le texte enregistré était correct.
`pre-line` respecte les retours à la ligne et les lignes vides, tout en
continuant d'ignorer les espaces multiples et l'indentation.
On garde `textContent` côté script plutôt que `innerHTML` : le texte vient
d'un formulaire, il ne doit jamais pouvoir injecter de balise. */
white-space:pre-line;}
.ficha-lado{position:sticky;top:88px;}
.ficha-cartao{border:1px solid var(--am-line);border-radius:12px;background:#fff;padding:24px;
box-shadow:0 4px 16px -4px rgba(15,25,34,.10);}
.ficha-cartao .estado{display:inline-block;background:var(--am-sky-wash);color:var(--am-blue);
font:700 12px Inter;padding:5px 11px;border-radius:999px;margin-bottom:14px;}
.ficha-cartao h1{font-size:clamp(1.6rem,2.4vw,2rem);letter-spacing:-.02em;}
.ficha-cartao .sub{color:var(--am-muted);margin:4px 0 16px;}
.ficha-cartao .valor{font-family:Archivo;font-weight:800;font-size:34px;letter-spacing:-.02em;
color:var(--am-ink);font-variant-numeric:tabular-nums;}
.ficha-cartao .ctas{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.ficha-cartao .ctas a{text-align:center;font:700 16px Archivo;padding:15px;border-radius:6px;}
.ficha-cartao .ctas .wa{background:var(--am-blue);color:#fff;}
.ficha-cartao .ctas .tel{background:#fff;border:1px solid var(--am-line-strong);color:var(--am-blue);}
.ficha-cartao .garantias{margin-top:20px;padding-top:20px;border-top:1px solid var(--am-line);
display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--am-body);}
.ficha-cartao .garantias span{display:flex;gap:9px;align-items:center;}
/* Partage : c'était un lien texte discret, on ne le voyait pas. C'est
pourtant le geste qui fait circuler une annonce entre particuliers. */
.ficha-cartao .partilhar{margin-top:14px;width:100%;min-height:46px;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
border:1px solid var(--am-line-strong);border-radius:6px;background:var(--am-paper);
color:var(--am-blue);font:700 14px Archivo;cursor:pointer;
transition:background .2s var(--am-ease),border-color .2s var(--am-ease);}
.ficha-cartao .partilhar:hover{background:var(--am-sky-wash);border-color:var(--am-sky);}
.ficha-cartao .partilhar svg{flex:none;}
.ficha-cartao .partilhar.copiado{background:var(--am-sky-wash);border-color:var(--am-blue);}
.ficha-cartao .partilhar.copiado .rotulo{font-size:12.5px;word-break:break-all;}
@media(max-width:900px){
.ficha-grelha{grid-template-columns:1fr;padding-inline:20px;}
.ficha-lado{position:static;}
.miniaturas{grid-template-columns:repeat(3,1fr);}
.migalhas{padding-inline:20px;}
}
/* Lightbox */
#lightbox{position:fixed;inset:0;z-index:220;background:rgba(214,238,251,.86);
backdrop-filter:saturate(1.3) blur(20px);display:none;flex-direction:column;padding:20px;}
#lightbox.aberto{display:flex;}
#lightbox .topo{display:flex;justify-content:space-between;align-items:center;color:var(--am-ink);
margin-bottom:14px;font:600 14px Inter;}
#lightbox .fechar{border:1px solid var(--am-line-strong);background:#fff;color:var(--am-ink);
width:44px;height:44px;border-radius:6px;font-size:22px;cursor:pointer;}
#lightbox .palco{flex:1;display:flex;align-items:center;gap:14px;min-height:0;}
#lightbox .nav{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--am-line-strong);
background:#fff;color:var(--am-blue);font-size:22px;cursor:pointer;
box-shadow:0 4px 16px -4px rgba(15,25,34,.16);}
/* Deux corrections, toutes deux nécessaires — une photo verticale était
coupée : on ne voyait que le haut.
1. min-width/min-height:0 — un élément flex refuse par défaut de devenir
plus petit que son contenu. Le cadre prenait la hauteur réelle de la
photo (3600 px), dépassait de l'écran, et overflow:hidden tranchait.
2. flex au lieu de grid — c'est ce qui bloquait vraiment. En grid, le
max-height:100% de l'image se résolvait contre sa rangée, dimensionnée
« auto », donc d'après l'image elle-même : raisonnement circulaire, la
limite ne s'appliquait jamais. En flex, elle se résout contre la
hauteur du cadre, qui est bien définie. */
#lightbox .quadro{flex:1;min-width:0;min-height:0;align-self:stretch;
display:flex;align-items:center;justify-content:center;}
/* Le cadre blanc est porté par la photo, pas par le conteneur : sur une photo
verticale, un cadre pleine largeur laissait deux grands aplats blancs de
part et d'autre. */
#lightbox .quadro img{max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;border-radius:12px;background:#fff;
box-shadow:var(--ring),0 20px 60px -20px rgba(15,25,34,.3);}
/* Sur téléphone, deux ronds de 52 px plus les marges ne laissent presque rien
à la photo. Les flèches passent donc en surimpression, aux bords du cadre. */
@media (max-width:640px){
#lightbox{padding:12px;}
#lightbox .palco{position:relative;gap:0;}
#lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:44px;z-index:2;opacity:.94;}
#lightbox .nav:first-child{left:8px;}
#lightbox .nav:last-child{right:8px;}
}
/* ── Serviços ────────────────────────────────────────────────────────── */
.servico{border-top:1px solid var(--am-line);}
.servico .linha{max-width:1200px;margin:0 auto;padding:clamp(28px,4vw,52px) 28px;display:grid;
grid-template-columns:auto 1fr 1fr;gap:clamp(20px,4vw,52px);align-items:center;}
.servico .n{font-family:Archivo;font-weight:800;font-size:clamp(2.5rem,5vw,4.5rem);
color:var(--am-sky-soft);letter-spacing:-.03em;line-height:1;}
.servico h2{font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:-.03em;margin-bottom:14px;}
.servico p{line-height:1.65;color:var(--am-body);max-width:48ch;}
.servico .img{aspect-ratio:16/10;border-radius:12px;overflow:hidden;box-shadow:var(--ring);}
.servico .img img{width:100%;height:100%;object-fit:cover;filter:var(--photo);
transition:transform .7s var(--am-ease);}
.servico .img:hover img{transform:scale(1.05);}
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
.passo{background:#fff;border:1px solid var(--am-line);border-radius:12px;padding:26px;}
.passo span{color:var(--am-blue);font:700 14px Archivo;}
.passo h3{font-size:19px;letter-spacing:-.01em;margin:8px 0;}
.passo p{font-size:14.5px;line-height:1.6;color:var(--am-muted);}
@media(max-width:900px){.servico .linha{grid-template-columns:1fr;padding-inline:20px;}}
/* ── Sobre ───────────────────────────────────────────────────────────── */
/* Cinq engagements : en 4 colonnes le cinquième reste seul sur sa ligne.
Trois colonnes donnent 3 + 2, deux blocs centrés — c'est équilibré. */
.compromissos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.compromissos{grid-template-columns:1fr;}}
.compromisso{display:flex;gap:14px;align-items:start;background:#fff;border:1px solid var(--am-line);
border-radius:12px;padding:20px;}
.compromisso .ic{flex:none;width:36px;height:36px;border-radius:8px;background:var(--am-sky-wash);
display:grid;place-items:center;}
.compromisso span:last-child{font:600 16px Inter;color:var(--am-ink);line-height:1.4;padding-top:5px;}
/* ── Contactos ───────────────────────────────────────────────────────── */
.contacto-grelha{max-width:1200px;margin:0 auto;padding:0 28px clamp(48px,6vw,80px);display:grid;
grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start;}
form.contacto{background:#fff;border:1px solid var(--am-line);border-radius:12px;
padding:clamp(22px,3vw,32px);box-shadow:0 1px 2px rgba(15,25,34,.05);}
form.contacto .campos{display:grid;gap:16px;}
form.contacto label{display:block;}
form.contacto label>span{display:block;font:600 13px Inter;color:var(--am-ink);margin-bottom:6px;}
form.contacto input,form.contacto textarea{width:100%;padding:13px 14px;border-radius:6px;
border:1px solid var(--am-line-strong);background:var(--am-canvas-2);font:400 15px/1.4 Inter,sans-serif;
color:var(--am-ink);outline:none;}
form.contacto input:focus,form.contacto textarea:focus{border-color:var(--am-blue);background:#fff;}
form.contacto .dupla{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
form.contacto button[type=submit]{background:var(--am-blue);color:#fff;font:700 16px Archivo;padding:15px;
border:none;border-radius:6px;cursor:pointer;}
form.contacto .nota{font-size:12.5px;color:var(--am-muted);text-align:center;}
.alerta-erro{background:rgba(180,83,9,.08);border:1px solid var(--am-warn);border-radius:6px;
padding:12px 14px;margin-bottom:20px;color:var(--am-warn);font:600 14px Inter;display:flex;gap:8px;
align-items:center;}
.enviado{background:#fff;border:1px solid var(--am-success);border-radius:12px;padding:36px;
text-align:center;}
.enviado .ic{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
background:rgba(14,159,110,.12);display:grid;place-items:center;}
.enviado h2{font-size:1.4rem;letter-spacing:-.02em;margin-bottom:8px;}
.enviado p{color:var(--am-body);line-height:1.6;}
.cartao-lado{background:var(--am-canvas);border:1px solid var(--am-line);border-radius:12px;padding:24px;}
.cartao-lado h3{font-size:15px;margin-bottom:16px;}
.cartao-lado a.linha{display:flex;gap:12px;align-items:center;padding:12px 0;color:var(--am-ink);}
.cartao-lado a.linha+a.linha{border-top:1px solid var(--am-line);}
aside.contactos{display:flex;flex-direction:column;gap:14px;}
aside.contactos .wa{display:flex;gap:10px;align-items:center;justify-content:center;
background:var(--am-blue);color:#fff;font:700 16px Archivo;padding:16px;border-radius:12px;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media(max-width:900px){
.contacto-grelha{grid-template-columns:1fr;padding-inline:20px;}
form.contacto .dupla{grid-template-columns:1fr;}
}
/* ── Pied de page ────────────────────────────────────────────────────── */
footer{background:linear-gradient(180deg,var(--am-sky-wash),var(--am-sky-soft));
border-top:1px solid var(--am-sky-soft);color:var(--am-body);}
footer .interior{max-width:1200px;margin:0 auto;padding:clamp(26px,3.2vw,44px) 28px 28px;}
footer .colunas{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
footer .marca{height:56px;width:auto;}
footer .descricao{margin-top:14px;font-size:14.5px;line-height:1.6;max-width:34ch;color:var(--am-muted);}
footer .coluna{display:flex;flex-direction:column;gap:9px;font-size:14.5px;}
footer .coluna>strong{color:var(--am-ink);font-weight:600;margin-bottom:4px;}
footer .redes{display:flex;gap:12px;margin-top:28px;}
footer .redes a{width:40px;height:40px;border-radius:8px;background:#fff;
border:1px solid var(--am-sky-soft);display:grid;place-items:center;}
footer .baixo{margin-top:28px;padding-top:20px;border-top:1px solid var(--am-sky-soft);font-size:12.5px;
color:var(--am-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
@media(max-width:900px){footer .colunas{grid-template-columns:1fr;}footer .interior{padding-inline:20px;}}
/* SECOND BOUTON WHATSAPP SUPPRIMÉ le 03/08/2026.
*
* `.wa-flutuante` était une bulle flottante affichée sous 900 px seulement.
* Elle se superposait à `.bolha-wa`, qui occupe le même coin sur TOUTES les
* vues : sur téléphone on voyait donc deux bulles décalées, et sur ordinateur
* une seule, ce qui explique que ça soit passé inaperçu si longtemps.
*
* C'est `.bolha-wa` qui est conservée, et non l'inverse : son message est
* réécrit par le script avec la voiture et son prix, elle se masque à
* l'impression, elle remonte quand la bannière cookies est affichée et elle
* tient compte de la zone sûre des iPhone. L'autre n'avait rien de tout ça. */
.oculto{display:none!important;}
/* ── Adresse, horaires, illustration « sans photo » ───────────────────── */
address.morada{display:flex;gap:11px;align-items:flex-start;font-style:normal;
font-size:15.5px;line-height:1.55;color:var(--am-ink);margin-top:22px;}
address.morada svg{flex:none;margin-top:2px;}
.horario-tabela{border-collapse:collapse;width:100%;max-width:420px;}
.horario-tabela th,.horario-tabela td{text-align:left;padding:10px 0;font-size:15.5px;
border-bottom:1px solid var(--am-line);}
.horario-tabela th{font-weight:600;color:var(--am-ink);padding-right:18px;white-space:nowrap;}
.horario-tabela td{color:var(--am-body);}
.horario-tabela .encerrado th,.horario-tabela .encerrado td{color:var(--am-muted);font-weight:400;}
/* Voiture sous bâche : une viatura en cours d'arrivage n'a pas encore de photo.
Une illustration vaut mieux qu'un cadre vide — et « Fotografias em breve »
dit la vérité au lieu de laisser croire à une erreur. */
.viatura .foto img.sem-foto,
.ficha-principal img.sem-foto{object-fit:cover;background:var(--am-sky-wash);}
.ficha-principal.sem-galeria{cursor:default;}
.ficha-principal.sem-galeria .abrir{display:none;}
/* Carte Google intégrée. Elle dépose des cookies Google dès l'affichage :
c'est dit dans la politique de confidentialité, section « O mapa ». */
.mapa{position:relative;display:block;padding:0;overflow:hidden;
border-radius:12px;background:var(--am-canvas);}
.mapa iframe{width:100%;height:100%;border:0;display:block;}
/* NOTRE BOUTON « Abrir no Google Maps » A ÉTÉ RETIRÉ le 04/08/2026.
*
* Il y avait deux boutons sur chaque carte : le nôtre en bas à droite, et la
* pastille « Maps » que Google affiche lui-même en haut à gauche de la carte
* intégrée. Fábio a demandé de retirer celle de Google.
*
* C'est justement la seule qu'on ne peut pas toucher : elle est à l'intérieur
* de l'iframe, sur un domaine tiers. La masquer reviendrait à recouvrir
* l'interface de Google. On a donc supprimé le nôtre, qui menait au même
* endroit, plutôt que d'en garder deux. */
/* « EM PREPARAÇÃO » posé en HTML sur la photo de la voiture bâchée.
Texte incrusté dans l'image = flou au redimensionnement et impossible à
traduire ; en HTML il reste net et se corrige en une ligne. */
.sem-foto-texto{position:absolute;top:0;left:0;right:0;padding:26px 20px 0;
display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
pointer-events:none;}
.sem-foto-texto b{font-family:Archivo,sans-serif;font-weight:800;
font-size:clamp(15px,3.4cqw,26px);letter-spacing:.02em;color:var(--am-ink);line-height:1.1;}
.sem-foto-texto i{font-style:normal;font-size:clamp(11px,2.1cqw,15px);color:var(--am-muted);}
.viatura .foto{container-type:inline-size;}
.ficha-principal{container-type:inline-size;}
/* ── Équipement, sur la fiche publique ───────────────────────────────────
Ce qui départage deux voitures du même modèle au même prix. */
.ficha-equipamentos{margin-top:26px;padding-top:22px;border-top:1px solid var(--am-line);}
.ficha-equipamentos h3{font:700 17px Archivo,sans-serif;letter-spacing:-.02em;
color:var(--am-ink);margin-bottom:14px;}
.eq-grupo{margin-bottom:16px;}
.eq-grupo h4{font:700 11.5px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;
color:var(--am-blue);margin-bottom:8px;}
.eq-grupo ul{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:5px 18px;}
.eq-grupo li{position:relative;padding-left:20px;font-size:14.5px;color:var(--am-body);
line-height:1.5;}
.eq-grupo li::before{content:'';position:absolute;left:2px;top:.55em;
width:9px;height:5px;border-left:2px solid var(--am-blue);
border-bottom:2px solid var(--am-blue);transform:rotate(-45deg);}
/* ── Bulle WhatsApp ──────────────────────────────────────────────────────
Fixe en bas à droite, sur toutes les vues. C'est l'élément qui convertit le
plus sur un site de stand : quelqu'un qui regarde une voiture le soir
n'ouvre pas un formulaire, il envoie un message.
Elle passe au-dessus du contenu mais SOUS la galerie plein écran (z-index
de la lightbox plus élevé) : une bulle verte par-dessus une photo agrandie
ferait tache et masquerait la voiture.
`safe-area-inset-bottom` : sur iPhone, la barre gestuelle du bas mange une
quinzaine de pixels. Sans cette marge, la bulle se colle dessus et se
déclenche au moment où l'on veut fermer l'application. */
.bolha-wa{
position:fixed; right:16px; z-index:60;
bottom:calc(16px + env(safe-area-inset-bottom, 0px));
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px; border-radius:50%;
/* Bleu de la marque plutôt que le vert de WhatsApp. On perd un peu de
reconnaissance immédiate — le vert se lit sans réfléchir — mais le
pictogramme reste sans ambiguïté, et la bulle cesse d'être le seul
élément du site qui n'appartient pas à la charte. */
background:var(--am-blue); color:#fff; text-decoration:none;
box-shadow:0 4px 10px rgba(15,25,34,.16), 0 14px 30px -10px rgba(7,119,233,.7);
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* `color:#fff` répété ICI, et ce n'est pas une redondance.
*
* La règle globale `a:hover{color:var(--am-blue-deep)}` est plus spécifique
* que `.bolha-wa` : au survol, le lien repassait en bleu foncé. Le picto est
* dessiné en `currentColor`, il prenait donc exactement la couleur du fond
* survolé et disparaissait. Signalé par Fábio le 05/08/2026. */
.bolha-wa:hover,.bolha-wa:focus,.bolha-wa:active{color:#fff;}
.bolha-wa:hover{transform:translateY(-2px);background:var(--am-blue-deep);
box-shadow:0 6px 14px rgba(15,25,34,.18), 0 18px 38px -10px rgba(7,119,233,.8);}
.bolha-wa:active{transform:translateY(0) scale(.97);background:var(--am-blue-deep);}
/* Ronde et sans texte, à toutes les tailles. L'icône de WhatsApp est l'un des
rares pictogrammes que tout le monde reconnaît sans légende, et une bulle de
56 px recouvre trois fois moins de contenu qu'une pastille de 149.
Le libellé pour les lecteurs d'écran, lui, reste sur le lien. */
/* La galerie plein écran passe devant. */
#lightbox{z-index:120;}
/* ── Rappel téléphonique ─────────────────────────────────────────────────
Replié par défaut : il ne doit pas concurrencer le bouton WhatsApp, qui
reste le chemin principal. C'est une porte de sortie pour celui qui
n'aime ni écrire ni appeler, pas une troisième proposition à égalité. */
.ligamos{margin-top:14px;border:1px solid var(--am-line);border-radius:8px;
background:var(--am-canvas);}
.ligamos summary{display:flex;align-items:center;gap:9px;cursor:pointer;
padding:13px 16px;font:600 14.5px Inter,sans-serif;color:var(--am-blue);
list-style:none;min-height:48px;}
.ligamos summary::-webkit-details-marker{display:none;}
.ligamos[open] summary{border-bottom:1px solid var(--am-line);}
.ligamos form{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;}
.ligamos label{display:flex;flex-direction:column;gap:5px;}
.ligamos label span{font:600 12.5px Inter,sans-serif;color:var(--am-muted);}
/* 16 px minimum : en dessous, Safari sur iPhone zoome dans le champ au
moment où on le touche, et la page entière grossit. */
.ligamos input{border:1px solid var(--am-line-strong);border-radius:6px;
padding:12px 13px;font:400 16px Inter,sans-serif;color:var(--am-ink);
background:#fff;min-height:48px;}
.ligamos input:focus{outline:none;border-color:var(--am-sky);
box-shadow:0 0 0 3px var(--am-sky-wash);}
.ligamos button{background:var(--am-blue);color:#fff;border:none;border-radius:6px;
padding:14px;font:700 15px Archivo,sans-serif;cursor:pointer;min-height:50px;}
.ligamos button:disabled{opacity:.55;cursor:not-allowed;}
.ligamos-nota{margin:0;font:500 13px Inter,sans-serif;color:var(--am-success);}
.ligamos-nota.erro{color:#B4231F;}
/* Le piège à robots : hors écran plutôt que display:none, que certains
remplisseurs automatiques savent détecter et ignorer. */
.mel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
/* ── Impression d'une fiche ──────────────────────────────────────────────
Les gens impriment pour comparer trois voitures à la table de la cuisine.
Sans ces règles, la feuille sort avec le menu, les filtres, la bulle
WhatsApp et un fond sombre qui vide une cartouche. */
/* Photo d'arrivée, page Contactos.
Même largeur et même rayon que la carte juste en dessous : les deux se
lisent alors comme un seul bloc « comment venir », pas comme une image
décorative posée à côté d'un plan. */
.foto-chegada{max-width:1200px;margin:0 auto clamp(14px,2vw,22px);
padding:0 28px;}
.foto-chegada img{width:100%;aspect-ratio:21/9;object-fit:cover;
border-radius:12px;display:block;filter:var(--photo);}
.foto-chegada figcaption{margin-top:9px;font-size:14px;color:var(--am-muted);
text-align:center;}
@media(max-width:900px){
.foto-chegada{padding:0 20px;}
.foto-chegada img{aspect-ratio:4/3;}
}
/* Espace resserré entre « Porquê a AutoMorfose » et « Em destaque ».
Les deux sections empilaient leurs marges : 64 px en bas de la première,
88 px en haut de la seconde, soit 152 px de blanc qui donnaient
l'impression que la page s'était arrêtée. */
.sec.sec-colada{padding-top:clamp(26px,3vw,44px);}
/* Blocs réservés au papier : invisibles à l'écran. */
.folha-topo, .folha-fim, .folha-continua{display:none;}
/* ═══════════ FICHE IMPRIMÉE / PDF ═══════════
Ce document n'est pas un pense-bête : l'acheteur le télécharge, le garde,
le compare à trois autres et le montre chez lui. Il doit tenir face à la
fiche d'une concession.
LE POINT TECHNIQUE QUI DÉCIDE DE TOUT : les navigateurs suppriment les
couleurs de fond à l'impression, pour économiser l'encre. Sans
`print-color-adjust: exact`, le bandeau sombre sort blanc, le prix bleu sort
gris, et tout le travail de mise en page ne se voit pas. */
@media print{
/* 9 mm : les 21 px qui manquaient pour qu'une fiche courante tienne sur une
seule feuille. En dessous de 7 mm, certaines imprimantes rognent. */
@page{size:A4 portrait;margin:9mm;}
*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
/* LES BLOCS ANIMÉS DOIVENT ÊTRE VISIBLES, TOUJOURS.
`[data-reveal]` part à opacity:0 et n'apparaît qu'au défilement, quand le
JavaScript ajoute `.in`. Sans cette règle, imprimer depuis le haut d'une
fiche — c'est-à-dire le geste normal, le bouton est en haut — donnait un
PDF où les caractéristiques, la description et l'équipement sortaient
BLANCS. Le papier ne défile pas.
Trouvé en regardant une capture, pas en relisant : rien dans le code ne
signale la dépendance entre une animation d'écran et une sortie papier. */
[data-reveal]{opacity:1 !important;transform:none !important;}
/* Tout ce qui n'a de sens qu'à l'écran. Liste explicite plutôt que
l'inverse : un bloc ajouté plus tard doit se faire remarquer sur la
feuille, pas disparaître en silence. */
header, #menu, footer, .bolha-wa, .consent,
#v-home, #v-stock, #v-servicos, #v-sobre, #v-contactos,
#bloco-relacionados, #lightbox,
.galeria-ant, .galeria-seg, .galeria-contador, .abrir,
.migalhas,
.ctas, .ligamos, .garantias, .partilhar{display:none !important;}
/* Une seule photo : les autres faisaient une page chacune. */
.galeria-slide:not(:first-child){display:none !important;}
#galeria-pista{display:block !important;}
body{background:#fff !important;color:#0F1922;
font-family:Inter,system-ui,sans-serif;font-size:9pt;line-height:1.5;}
#v-ficha{display:block !important;padding:0 !important;}
/* ── Bandeau d'en-tête ── */
/* Fond TRANSPARENT et logo en couleur, pas de bande sombre.
Une bande pleine largeur mange une cartouche d'encre par paquet de fiches,
et sur une imprimante domestique elle sort souvent grise et sale. Un filet
fin sépare aussi bien, et le logo garde ses couleurs de marque. */
.folha-topo{display:flex;align-items:center;justify-content:space-between;
background:none;padding:0 0 3mm;margin-bottom:4mm;
border-bottom:1pt solid #D7E1EA;}
.folha-topo img{height:13mm;width:auto;display:block;}
.folha-topo span{color:#6B7A89;font-size:7.5pt;letter-spacing:.14em;
text-transform:uppercase;font-weight:600;}
/* ── Une colonne, titre avant la photo ── */
.ficha-grelha{display:flex !important;flex-direction:column;gap:3mm;
align-items:stretch !important;max-width:none !important;padding:0 !important;}
.ficha-lado{order:-1;}
/* Titre et prix sur la même ligne de base, séparés par un filet.
Le prix est ce qu'on cherche en premier sur une fiche : il est aligné à
droite, en bleu, à la même taille que le modèle. */
.ficha-cartao{border:0 !important;box-shadow:none !important;background:none !important;
padding:0 0 3mm !important;border-bottom:.8pt solid #D7E1EA !important;
display:grid;grid-template-columns:1fr auto;column-gap:8mm;align-items:baseline;}
.ficha-cartao .estado{grid-column:1/-1;background:none !important;
color:#0777E9 !important;padding:0 !important;margin:0 0 1.5mm !important;
font-size:7pt;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.ficha-cartao h1{grid-column:1;font-family:Archivo,sans-serif;font-weight:800;
font-size:21pt !important;letter-spacing:-.02em;margin:0;line-height:1.1;}
.ficha-cartao .sub{grid-column:1;font-size:9.5pt;color:#6B7A89;margin:1mm 0 0;}
.ficha-cartao .valor{grid-column:2;grid-row:2/4;align-self:center;text-align:right;
font-family:Archivo,sans-serif;font-weight:800;font-size:21pt !important;
color:#0777E9 !important;letter-spacing:-.02em;white-space:nowrap;}
/* ── Photo ── */
/* border:0 en plus du rayon : la bordure d'écran laissait un cadre arrondi
flottant au-dessus de la photo, très visible sur fond blanc.
6,5 cm et non 8 : c'est ce qui fait tenir la fiche d'une voiture normale
sur UNE page. Au-delà, le pied de page partait seul sur une deuxième
feuille, ce qui donne un document bâclé. Une voiture très équipée
débordera quand même, mais avec du contenu sur la page 2. */
/* box-shadow:none EN PLUS de border:0. Le cadre arrondi qui flottait
au-dessus de la photo n'était pas une bordure mais une ombre INTERNE
(inset 0 0 0 1px), invisible à la lecture du CSS d'écran et très voyante
sur blanc. Trouvée en interrogeant les styles calculés, pas en relisant. */
/* 8,5 cm : la page 1 n'était remplie qu'aux deux tiers, et une photo de
voiture est ce qu'on regarde en premier sur ce document. Puisque la
coupure de page est désormais choisie, l'agrandir ne déborde plus. */
.galeria{max-height:8.5cm;overflow:hidden;border:0 !important;
box-shadow:none !important;border-radius:0 !important;background:#EBF1F7;}
.galeria-slide img{width:100%;max-height:8.5cm;object-fit:cover;}
/* ── Bande de miniatures ──
Réutilise les vignettes DÉJÀ construites pour l'écran : pas de balisage en
plus, pas de JavaScript en plus, et elles suivent automatiquement l'ordre
des photos décidé dans la gestion.
La première est masquée : c'est la photo principale, déjà en grand
au-dessus. La montrer deux fois gaspille une case sur quatre.
QUATRE AU MAXIMUM, et c'est le point important. Sans plafond, une voiture
à douze photos allongeait le document d'une page entière. Quatre suffisent
à montrer l'intérieur, l'arrière et un détail. */
#ficha-miniaturas{display:grid !important;grid-template-columns:repeat(4,1fr);
gap:2mm;margin-top:2mm;overflow:visible !important;}
#ficha-miniaturas button{padding:0;border:0;background:none;
aspect-ratio:4/3;overflow:hidden;opacity:1 !important;}
#ficha-miniaturas button img{width:100%;height:100%;object-fit:cover;display:block;}
#ficha-miniaturas button:first-child{display:none !important;}
#ficha-miniaturas button:nth-child(n+6){display:none !important;}
/* ── Titres de section, en filigrane plutôt qu'en gros ──
Sur une fiche technique, ce sont les VALEURS qu'on lit. Un titre de
section n'a qu'à baliser, pas à concurrencer le modèle de la voiture. */
#v-ficha h2, .observacoes h3, .ficha-equipamentos h3{
font-family:Inter,sans-serif !important;font-size:7.5pt !important;
font-weight:700 !important;letter-spacing:.14em !important;
text-transform:uppercase;color:#0777E9 !important;
margin:0 0 2mm !important;padding-top:3mm;
border-top:.8pt solid #D7E1EA;}
#v-ficha h2{padding-top:0;border-top:0;}
/* ── Caractéristiques ── */
.especificacoes{display:grid !important;
grid-template-columns:repeat(3,1fr) !important;gap:2mm 8mm !important;}
.espec{break-inside:avoid;padding:0 !important;border:0 !important;
background:none !important;display:block !important;}
.espec .ic{display:none !important;}
.espec .rot{display:block;font-size:6.8pt;letter-spacing:.12em;
text-transform:uppercase;color:#9AA8B5;margin-bottom:.4mm;}
.espec .val{display:block;font-size:10pt;font-weight:600;color:#0F1922;}
/* ── Passage à la deuxième feuille, DÉLIBÉRÉ ──
Avec la photo principale et quatre vignettes, une voiture normalement
équipée ne tient plus sur une page. Le choix n'est donc pas « une ou deux
pages » mais « une coupure choisie ou une coupure au hasard ».
Ici : page 1, la voiture en images et ses caractéristiques. Page 2, le
texte, l'équipement et les coordonnées. Et un rappel du modèle et du prix
en tête, parce que les deux feuilles finissent par se séparer. */
.folha-continua{display:flex !important;justify-content:space-between;
align-items:baseline;break-before:page;
padding-bottom:2mm;margin-bottom:1mm;border-bottom:.8pt solid #D7E1EA;
font-family:Archivo,sans-serif;font-weight:700;font-size:11pt;color:#0F1922;}
.folha-continua span{color:#0777E9;}
/* ── Texte de présentation ── */
.observacoes{break-inside:avoid;background:none !important;border:0 !important;
padding:0 !important;margin-top:3mm;}
.observacoes p{font-size:9pt;line-height:1.65;color:#3D4A57;
max-width:none !important;text-align:justify;}
/* ── Équipement ── */
.ficha-equipamentos{margin-top:2mm;display:block !important;}
.eq-grupo{break-inside:avoid;margin-bottom:2.5mm;}
.eq-grupo h4{font-size:7.5pt !important;letter-spacing:.1em;text-transform:uppercase;
color:#6B7A89 !important;margin:2mm 0 1mm !important;font-weight:700;}
.eq-grupo ul{grid-template-columns:repeat(3,1fr) !important;gap:.8mm 8mm !important;}
.eq-grupo li{break-inside:avoid;font-size:8.5pt;color:#3D4A57;}
/* ── Pied de feuille ──
Fond très clair et non blanc : il ferme le document et distingue les
coordonnées du contenu de l'annonce. */
.folha-fim{display:grid;grid-template-columns:auto 1fr auto;gap:6mm;
align-items:start;margin-top:4mm;padding:4mm 6mm;background:#F5F8FB;
break-inside:avoid;}
.folha-qr{width:22mm;flex:none;}
.folha-qr svg{width:22mm;height:22mm;display:block;}
.folha-contactos{font-size:8pt;line-height:1.6;color:#3D4A57;}
.folha-contactos strong{display:block;font-family:Archivo,sans-serif;
font-size:10pt;color:#0F1922;margin-bottom:.8mm;}
.folha-url{display:block;margin-top:1.5mm;font-size:7.5pt;color:#8FA3B5;
word-break:break-all;}
.folha-vantagens{list-style:none;margin:0;padding:0;font-size:8pt;
color:#3D4A57;line-height:1.7;}
.folha-vantagens li{padding-left:4mm;position:relative;white-space:nowrap;}
/* Coche dessinée en CSS : une image de plus à charger pour quatre coches
serait un aller-retour réseau pour rien. */
.folha-vantagens li::before{content:"";position:absolute;left:0;top:1.1mm;
width:2mm;height:1mm;border-left:1pt solid #0777E9;
border-bottom:1pt solid #0777E9;transform:rotate(-45deg);}
/* Les adresses ne sont PLUS collées derrière chaque lien : la règle
ajoutait « (https://wa.me/351…) » à la suite de chaque bouton et rendait
la feuille illisible. L'adresse utile est dans le pied, avec le QR. */
a[href^="http"]::after{content:none !important;}
}
/* ═══════════ AVIS GOOGLE ═══════════
Recopiés à la main faute de clé API. Voir le commentaire dans index.html. */
.av-nota{display:inline-flex;align-items:baseline;gap:10px;font-size:16px;color:var(--am-body);}
.av-nota strong{font-family:Archivo;font-size:26px;color:var(--am-ink);letter-spacing:-.02em;}
.av-estrelas{color:#F5A623;letter-spacing:.08em;font-size:15px;line-height:1;}
.av-grelha{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.av-cartao{margin:0;background:var(--am-paper);border:1px solid var(--am-line);
border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;}
.av-cartao blockquote{margin:0;font-size:15.5px;line-height:1.65;color:var(--am-body);flex:1;}
.av-cartao figcaption{font-weight:600;font-size:14.5px;color:var(--am-ink);
display:flex;flex-direction:column;gap:3px;}
.av-cartao figcaption span{font-weight:400;font-size:13.5px;color:var(--am-muted);}
.av-ligacao{text-align:center;margin-top:28px;font-size:15px;}
.av-ligacao a{color:var(--am-blue);text-decoration:none;font-weight:600;}
.av-ligacao a:hover{text-decoration:underline;}
/* ═══════════ ENCART DE CONSENTEMENT ═══════════
C'est le PREMIER objet que voit un visiteur : il doit ressembler au reste
du site, pas à un avertissement collé par-dessus.
Il arrive après un court délai et par le bas. Surgir à l'instant du premier
pixel donne l'impression d'un péage à l'entrée ; laisser voir la photo
d'accueil une seconde suffit à changer l'ordre de lecture.
Les deux boutons gardent la MÊME taille et la même zone de clic. Un
« Recusar » rétréci à côté d'un « Aceitar » bien gras est un consentement
extorqué : la CNPD le sanctionne, et surtout ça se remarque. */
.consent{
position:fixed; z-index:210;
left:16px; right:16px;
bottom:calc(16px + env(safe-area-inset-bottom, 0px));
max-width:520px; margin:0 auto;
background:rgba(255,255,255,.92);
-webkit-backdrop-filter:saturate(180%) blur(18px);
backdrop-filter:saturate(180%) blur(18px);
border:1px solid var(--am-line); border-radius:20px;
padding:22px 22px 18px;
box-shadow:0 2px 6px rgba(15,25,34,.05),
0 18px 50px -12px rgba(15,25,34,.28);
animation:consentSobe .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes consentSobe{
from{opacity:0;transform:translateY(22px) scale(.97);}
to {opacity:1;transform:none;}
}
.consent-topo{display:flex;align-items:center;gap:11px;margin-bottom:10px;}
.consent-icone{
flex:none;width:36px;height:36px;border-radius:11px;
display:grid;place-items:center;
background:var(--am-sky-wash); color:var(--am-blue);
}
.consent-titulo{
font-family:Archivo,system-ui,sans-serif;font-weight:700;
font-size:16.5px;letter-spacing:-.01em;color:var(--am-ink);
}
.consent p{margin:0;font-size:14px;line-height:1.6;color:var(--am-body);}
.consent a{color:var(--am-blue);}
.consent-bts{display:flex;gap:10px;margin-top:18px;}
.consent button{
flex:1; min-height:46px; padding:12px 18px;
font:600 14.5px Inter,system-ui,sans-serif;
border-radius:12px; cursor:pointer;
border:1px solid var(--am-line); background:var(--am-paper); color:var(--am-ink);
transition:transform .16s ease, box-shadow .16s ease,
background .16s ease, border-color .16s ease;
}
.consent button:hover{border-color:var(--am-blue);color:var(--am-blue);}
.consent button:active{transform:scale(.98);}
.consent button:focus-visible{outline:2px solid var(--am-blue);outline-offset:2px;}
.consent .consent-sim{
background:var(--am-blue); border-color:var(--am-blue); color:#fff;
box-shadow:0 8px 20px -8px rgba(7,119,233,.75);
}
.consent .consent-sim:hover{
background:var(--am-blue-deep); border-color:var(--am-blue-deep); color:#fff;
box-shadow:0 10px 26px -8px rgba(7,119,233,.85);
}
/* Sur grand écran, l'encart centré tombait pile sur le bouton « Ver stock »,
c'est-à-dire sur la seule chose qu'on veut faire cliquer. Rangé à droite,
il laisse le titre et l'appel à l'action entièrement lisibles. */
@media (min-width:760px){
.consent{
left:auto; right:20px; margin:0; max-width:410px;
bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}
}
/* La bulle WhatsApp occupe exactement ce coin : sans ce décalage, l'encart
lui passe dessus. Elle remonte le temps de la question, à toutes les
tailles — sur grand écran aussi, puisque l'encart y est justement à
droite. */
body.tem-consent .bolha-wa{
bottom:calc(210px + env(safe-area-inset-bottom, 0px));
transition:bottom .35s cubic-bezier(.22,1,.36,1);
}
@media (min-width:760px){
body.tem-consent .bolha-wa{bottom:calc(255px + env(safe-area-inset-bottom, 0px));}
}
/* Une animation d'entrée n'est pas une information : qui a demandé moins de
mouvement doit voir l'encart, pas le voir bouger. */
@media (prefers-reduced-motion:reduce){
.consent{animation:none;}
.consent *,.bolha-wa{transition:none !important;}
}
/* Bouton qui doit se lire comme un lien : revenir sur son choix de cookies
depuis la page de confidentialité. Un