/* citroen.neomotors.ro, după prototipul A „Ziua”. Scris de mână, fără framework.
   Alb și gri cald; o singură culoare de acțiune pe ecran; totul rotund; mișcarea doar legată de derulare. */

:root {
  --alb: #fff; --g1: #f5f5f5; --g2: #f1f0f0; --g3: #e4e2e2; --g4: #cac6c5; --g6: #796f6e;
  --text: #3b3938; --corp: #5d5e65; --titlu: #161413;
  --actiune: #da291c; --nav: #57718a; --hover: #343231; --invers: #f3f3ed;
  --noapte: #343231; --noapte-text: #f3f3ed; --noapte-corp: #cac6c5; --noapte-linie: rgba(243, 243, 237, .14);
  /* vălurile plate de sub numele albe: măsurate pe capturi, ca numele să treacă AA pe fotografiile luminoase
     (Berlingo pe nisip, Jumper pe asfalt deschis): .18 / .34 dădeau 2,4–3,6:1 */
  --val: rgba(22, 20, 19, .36); --val-banda: rgba(22, 20, 19, .48);
  /* --antet = spațiul de sus ocupat de pastila plutitoare: 12 px deasupra + 64 px (pe telefon 8 + 56) */
  --antet: 76px; --margine: 24px; --sectiune: 120px; --raza: 26px;
  --umbra-mica: 0 1px 2px rgba(59, 57, 56, .08), 0 6px 18px rgba(59, 57, 56, .08);
  --usor: cubic-bezier(.22, 1, .36, 1);
}
[data-subbrand="c5-aircross"] { --actiune: #004f59; }
@media (max-width: 1023px) {
  :root { --antet: 64px; --margine: 16px; --sectiune: 72px; --raza: 20px; }
}

/* ---- bază ------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--antet) + 16px); }
body {
  margin: 0; background: var(--alb); color: var(--text);
  font: 500 16px/24px var(--font-text); -webkit-font-smoothing: antialiased; padding-top: var(--antet);
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
b, strong { font-weight: 650; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.nume { white-space: nowrap; }
.cont { max-width: calc(1872px + 2 * var(--margine)); margin: 0 auto; padding: 0 var(--margine); }
:focus-visible { outline: 2px solid var(--nav); outline-offset: 3px; }
.sari { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--alb); padding: 10px 16px; border-radius: 999px; }
.sari:focus { top: 12px; }
main { position: relative; z-index: 1; background: var(--alb); }

.h1, .h2, .h3, h1, h2, h3 { font-family: var(--font-titlu); font-weight: 640; color: var(--titlu); letter-spacing: -0.01em; }
.h1 b, .h2 b, .h3 b, h1 b, h2 b { font-weight: 795; }
.h1 { font-size: 64px; line-height: 68px; letter-spacing: -0.02em; }
.h2 { font-size: 48px; line-height: 56px; }
.h3 { font-size: 24px; line-height: 32px; }
@media (max-width: 1023px) {
  .h1 { font-size: 36px; line-height: 42px; }
  .h2 { font-size: 28px; line-height: 34px; }
  .h3 { font-size: 20px; line-height: 26px; }
}
.nota, .mic { font-size: 13px; line-height: 20px; color: var(--g6); }
.link { color: var(--nav); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-buton { background: none; border: 0; padding: 0; color: var(--nav); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
@media (hover: hover) { .link:hover, .link-buton:hover { color: var(--hover); } }
.sectiune { padding: var(--sectiune) 0; }

/* ---- butoane: plin → hover gri închis; contur → hover gri închis; instant, ca la marcă -------------------------- */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px;
  border-radius: 999px; font: 600 16px/1 var(--font-text); text-decoration: none; border: 1.5px solid transparent;
  white-space: nowrap; transition: none; cursor: pointer;
}
.buton--rosu { background: var(--actiune); color: #fff; }
.buton--contur { background: transparent; color: var(--nav); border-color: var(--nav); }
.buton--noapte { background: transparent; color: var(--noapte-text); border-color: var(--noapte-text); }
.buton--mic { height: 40px; padding: 0 18px; font-size: 15px; }
.buton--lat { width: 100%; }
@media (hover: hover) {
  .buton--rosu:hover { background: var(--hover); }
  .buton--contur:hover { color: var(--hover); border-color: var(--hover); }
  .buton--noapte:hover { background: var(--noapte-linie); }   /* fără inversarea alb ↔ negru (lecția Peugeot) */
}

/* pastilele de selecție (comutatorul, vederile, blocurile) */
.pastile { display: flex; gap: 8px; flex-wrap: wrap; }
.pastila-b, .comutator__el {
  height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--g1); color: var(--text);
  font: 600 15px/1 var(--font-text); white-space: nowrap; transition: none;
}
.pastila-b[aria-pressed="true"], .comutator__el[aria-selected="true"] { background: var(--text); color: #fff; }
@media (hover: hover) {
  .pastila-b:not([aria-pressed="true"]):hover, .comutator__el:not([aria-selected="true"]):hover { background: var(--g3); }
}

/* ---- antetul-pastilă (din prototipul C „Perna”): plutește deasupra paginii -------------------------------------- */
.antet { position: fixed; top: 12px; left: var(--margine); right: var(--margine); z-index: 50; pointer-events: none; }
.antet__pastila, .cortina { pointer-events: auto; }
.antet__pastila {
  position: relative; display: flex; align-items: center; gap: 20px; height: 64px; max-width: 1872px; margin: 0 auto;
  padding: 0 10px 0 22px; background: var(--alb); border-radius: 999px; box-shadow: var(--umbra-mica);
}
.antet__marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); flex: none; }
.antet__logo { height: 44px; width: auto; color: var(--text); }
.antet__linie { width: 1px; height: 28px; background: var(--g3); flex: none; }
.antet__dealer { font: 640 17px/1 var(--font-titlu); color: var(--titlu); white-space: nowrap; }
.antet__mijloc { position: relative; flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.antet__nav { display: flex; align-items: center; gap: 28px; transition: opacity 150ms ease-out, visibility 0s; }
.antet__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px; border: 0; background: none;
  font: 500 15px/1 var(--font-text); color: var(--nav); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.antet__link svg { width: 12px; height: 12px; transition: transform 150ms ease-out; }
.antet__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.antet__link[aria-expanded="true"], .antet__link.activ { color: var(--hover); }
@media (hover: hover) { .antet__link:hover { color: var(--hover); } }
/* pe paginile de model, după primul ecran, bara modelului ia locul linkurilor (desktop) */
.antet__bara {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 20px;
  opacity: 0; visibility: hidden; transition: opacity 150ms ease-out, visibility 0s linear 150ms;
}
.antet--model .antet__nav { opacity: 0; visibility: hidden; transition: opacity 150ms ease-out, visibility 0s linear 150ms; }
.antet--model .antet__bara { opacity: 1; visibility: visible; transition: opacity 150ms ease-out, visibility 0s; }
.antet__bara-nume { font: 640 17px/22px var(--font-titlu); color: var(--titlu); }
.antet__bara-pret { font: 600 15px/22px var(--font-text); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.antet__bara-ancore { display: flex; gap: 20px; margin-left: 12px; }
.antet__tel { font: 600 15px/20px var(--font-text); color: var(--nav); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { .antet__tel:hover { color: var(--hover); } }
.antet__td { height: 44px; }
.antet__td.e-contur { background: transparent; color: var(--nav); border-color: var(--nav); }
@media (hover: hover) { .antet__td.e-contur:hover { background: transparent; color: var(--hover); border-color: var(--hover); } }
.antet__meniu { display: none; }

/* pastila peste „Noaptea”: un gri cald puțin mai deschis decât noaptea, ca să plutească în continuare */
.antet--noapte .antet__pastila { background: #45413f; box-shadow: 0 0 0 1px var(--noapte-linie), var(--umbra-mica); }
.antet--noapte .antet__logo, .antet--noapte .antet__dealer, .antet--noapte .antet__bara-nume, .antet--noapte .antet__bara-pret,
.antet--noapte .antet__tel { color: var(--noapte-text); }
.antet--noapte .antet__link { color: var(--noapte-corp); }
.antet--noapte .antet__link[aria-expanded="true"], .antet--noapte .antet__link.activ { color: var(--noapte-text); }
@media (hover: hover) { .antet--noapte .antet__link:hover, .antet--noapte .antet__tel:hover { color: var(--noapte-text); } }
.antet--noapte .antet__linie { background: var(--noapte-linie); }
.antet--noapte .antet__td.e-contur { color: var(--noapte-text); border-color: var(--noapte-text); }
.antet--noapte .antet__meniu { background: rgba(243, 243, 237, .12); color: var(--noapte-text); }
.antet--noapte .antet__pastila :focus-visible { outline-color: var(--invers); }

@media (max-width: 1279px) { .antet__tel { display: none; } .antet__pastila { gap: 16px; } .antet__nav { gap: 20px; } .antet__bara-ancore { gap: 14px; margin-left: 4px; } .antet__bara { gap: 14px; } }

/* meniul desktop: o capsulă albă care atârnă sub antet; prețurile mari, cu TVA */
.cortina {
  position: absolute; top: 72px; left: 0; right: 0; max-width: 1872px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 48px;
  padding: 28px 32px 18px; background: var(--alb); border-radius: 40px; box-shadow: var(--umbra-mica);
  opacity: 0; transition: opacity 120ms ease-out;
}
.cortina.e-deschis { opacity: 1; }
.cortina__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); gap: 22px 24px; flex: 0 1 auto; }
.cortina--utilitare .cortina__lista { grid-template-columns: repeat(3, minmax(0, 220px)); }
.cortina__model { display: grid; gap: 2px; text-decoration: none; color: var(--text); }
.cortina__model:focus-visible { outline: none; }
.cortina__model:focus-visible .mini { outline: 2px solid var(--nav); outline-offset: 3px; }
.mini { position: relative; display: block; width: 100%; aspect-ratio: 220 / 88; border-radius: 999px; overflow: hidden; background: var(--g3); margin-bottom: 10px; }
.mini img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease-out; }
.mini--dec { background: var(--g1); }
.mini--dec img { object-fit: contain; object-position: 50% 78%; padding-top: 8px; }
@media (hover: hover) { .cortina__model:hover .mini img { transform: scale(1.03); } }
.cortina__nume { font: 640 18px/24px var(--font-titlu); color: var(--titlu); padding-left: 14px; }
.meniu-pret { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.meniu-pret__de { font: 500 13px/18px var(--font-text); color: var(--corp); }
.meniu-pret b { font: 600 17px/24px var(--font-text); color: var(--titlu); font-variant-numeric: tabular-nums; }
.cortina .meniu-pret { padding-left: 14px; }
.cortina__scurte { display: grid; align-content: start; gap: 6px; padding-left: 40px; border-left: 1px solid var(--g3); }
.cortina__scurte a { display: block; padding: 6px 0; font: 600 17px/24px var(--font-text); color: var(--nav); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .cortina__scurte a:hover { color: var(--hover); } }
.cortina__nota { flex-basis: 100%; text-align: right; font: 500 12px/18px var(--font-text); color: var(--g6); }

/* foaia de pe telefon */
.foaie {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--margine) calc(96px + env(safe-area-inset-bottom)); background: var(--g2); opacity: 0; transition: opacity 150ms ease-out;
}
.foaie.e-deschis { opacity: 1; }
/* pastila de sus rămâne în ecran cât derulezi foaia („Închide” nu fuge; pe telefon nu există Esc) */
.foaie__sus { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 14px; background: var(--alb); border-radius: 999px; box-shadow: var(--umbra-mica); margin-bottom: 8px; }
.foaie__sus .antet__logo { height: 36px; }
.foaie__sus .antet__marca { gap: 10px; }
.foaie__sus .antet__dealer { font-size: 16px; }
.foaie__inchide { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--g1); color: var(--text); font: 600 15px/1 var(--font-text); cursor: pointer; }
.foaie__grup { margin: 20px 8px 8px; font: 600 13px/18px var(--font-text); color: var(--corp); }
.foaie__lista { display: grid; gap: 8px; }
.foaie__model { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 64px; padding: 0 18px 0 8px; background: var(--alb); border-radius: 999px; text-decoration: none; color: var(--text); }
.mini--mic { width: 88px; height: 48px; aspect-ratio: auto; margin: 0; }
.foaie__nume { font: 640 17px/1.1 var(--font-titlu); color: var(--titlu); min-width: 0; }
.foaie .meniu-pret b { font-size: 15px; }
.foaie__nota { margin: 10px 8px 0; font-size: 12px; line-height: 18px; color: var(--corp); }
.foaie__scurte { display: grid; margin-top: 16px; }
.foaie__scurte a { display: block; padding: 12px 8px; font: 600 17px/24px var(--font-text); color: var(--text); text-decoration: none; }
.foaie__jos { position: fixed; left: var(--margine); right: var(--margine); bottom: calc(12px + env(safe-area-inset-bottom)); }
html.e-blocat, html.e-blocat body { overflow: hidden; }

@media (max-width: 1023px) {
  .antet { top: 8px; }
  .antet__pastila { height: 56px; padding: 0 8px 0 14px; gap: 8px; }
  .antet__logo { height: 36px; }
  .antet__marca { gap: 10px; }
  .antet__linie { height: 24px; }
  .antet__dealer { font-size: 16px; }
  .antet__mijloc, .antet__tel, .cortina { display: none; }
  .antet__td { height: 40px; margin-left: auto; padding: 0 16px; font-size: 15px; }
  .antet__meniu {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--g1); color: var(--text); cursor: pointer;
  }
  .antet__meniu svg { width: 20px; height: 20px; }
}
@media (max-width: 359px) {
  .antet { left: 12px; right: 12px; }
  .antet__pastila { padding: 0 6px 0 12px; gap: 6px; }
  .antet__linie { display: none; }
  .antet__marca { gap: 8px; }
  .antet__logo { height: 32px; }
  .antet__dealer { font-size: 15px; }
  .antet__td { padding: 0 12px; font-size: 14px; }
  .antet__meniu { width: 36px; height: 36px; }
  .foaie__model { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; padding-right: 14px; }
  .foaie .mini--mic { width: 72px; height: 40px; }
}
/* foaia sub 400 px: „de la” deasupra prețului, ca în C („C3 Aircross” nu mai intră peste preț la 320 și 360 px) */
@media (max-width: 399px) {
  .foaie .meniu-pret { flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.1; }
  .foaie .meniu-pret__de { line-height: 16px; }
}

/* „studio”: decupajul pe gri cald, roțile pe o linie la 80 % din înălțime */
.studio { position: absolute; inset: 0; background: var(--g3); display: block; overflow: hidden; }
.studio__masina { position: absolute; left: 15%; width: 70%; bottom: 20%; display: block; }
.studio__img { width: 100%; height: auto; margin-bottom: calc(var(--cj, 0) * -100%); }

/* ---- „Noaptea” ------------------------------------------------------------------------------------------------ */
.noapte-voal { position: fixed; inset: 0; z-index: 0; background: var(--noapte); opacity: 0; pointer-events: none; }
.noaptea { position: relative; z-index: 1; background: var(--noapte); color: var(--noapte-corp); }
.noaptea a { color: var(--noapte-text); }
.noaptea :focus-visible { outline-color: var(--invers); }
.noaptea__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: var(--sectiune); padding-bottom: 96px; opacity: var(--noapte-o, 1); }
.noaptea h3 { font: 640 24px/32px var(--font-titlu); color: var(--noapte-text); margin-bottom: 16px; }
.noaptea__h3-2 { margin-top: 40px; }
.noaptea p { margin-top: 8px; }
.noaptea b { color: var(--noapte-text); }
.noaptea__tel { font: 600 20px/28px var(--font-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.noaptea__servicii { margin-top: 16px; display: grid; gap: 4px; }
.noaptea__link { text-decoration: underline; text-underline-offset: 3px; }
.noaptea .buton { margin-top: 16px; }
.program { display: grid; gap: 4px; }
.program div { display: flex; gap: 16px; justify-content: space-between; max-width: 340px; padding: 6px 0; border-bottom: 1px solid var(--noapte-linie); }
.program dt { font-weight: 500; }
.program dd { font-variant-numeric: tabular-nums; color: var(--noapte-text); }
.program--zi div { border-bottom-color: var(--g3); }
.program--zi dd { color: var(--titlu); }
.subsol { border-top: 1px solid var(--noapte-linie); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 15px; line-height: 22px; }
.subsol__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.subsol__grup { font-weight: 600; color: var(--noapte-text); margin-bottom: 12px; }
.subsol ul { display: grid; gap: 6px; }
.subsol a { text-decoration: none; }
@media (hover: hover) { .subsol a:hover, .noaptea__servicii a:hover { text-decoration: underline; } }
.subsol__date p + p { margin-top: 10px; }
.subsol__jos { display: flex; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--noapte-linie); font-size: 13px; line-height: 20px; }
.subsol__emblema { height: 28px; width: auto; color: var(--noapte-corp); flex: none; }
@media (max-width: 1023px) {
  .noaptea__in { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .noaptea h3 { font-size: 20px; line-height: 26px; }
  .subsol__in { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .subsol__jos { align-items: flex-start; }
}
/* „Noaptea” se aprinde la derulare: doar cu JS și fără reducerea mișcării */
@media (prefers-reduced-motion: no-preference) {
  .js .noaptea { background: transparent; }
}

/* ---- „Ziua” (acasă) ------------------------------------------------------------------------------------------ */
.ziua { position: relative; }
.ziua__felii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 24px 0 var(--sectiune); }
.felie { position: relative; }
.felie__link { display: block; text-decoration: none; color: inherit; }
.felie__foto { display: block; position: relative; aspect-ratio: 3 / 2; border-radius: var(--raza); overflow: hidden; background: var(--g3); }
.felie__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%); }
.felie__val, .felie__nume, .felie__banda, .ziua__info, .felie__pauza { display: none; }
.felie__info { padding-top: 16px; }
.felie__titlu { font: 640 32px/36px var(--font-titlu); color: var(--titlu); letter-spacing: -0.02em; }
.felie__energii { font-size: 15px; color: var(--corp); margin-top: 4px; }
.felie__rand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.felie__pret { font-size: 15px; color: var(--corp); }
.felie__pret b { font: 600 22px/28px var(--font-text); color: var(--titlu); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .ziua__felii { grid-template-columns: 1fr; gap: 32px; padding-top: 16px; } }

/* filmul: butonul de pauză */
.film { position: relative; border-radius: var(--raza); overflow: hidden; background: var(--g2); }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__buton {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(22, 20, 19, .42); display: grid; place-items: center;
}
.film__buton span { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.film__buton.oprit span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.film__buton:focus-visible { outline-color: var(--invers); }
@media (hover: hover) { .film__buton:hover { background: rgba(22, 20, 19, .7); } }
@media (prefers-reduced-motion: reduce) { .film__buton { display: none; } }

/* scena lipită, desktop: feliile stau pe loc, se lărgesc și se strâng ca niște ferestre */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .ziua { height: calc(100svh + 9 * 45svh); }
  .js .ziua__scena { position: sticky; top: var(--antet); height: calc(100svh - var(--antet)); padding-top: 12px; }
  .js .ziua__lista {
    position: relative; height: calc(100svh - var(--antet) - 12px - 156px);
    container-type: inline-size; --w0: 48px; --g: 8px; --G: 24px;
  }
  .js .ziua__felii { display: block; padding: 0; height: 100%; }
  .js .ziua .felie {
    position: absolute; top: 0; left: 0; height: 100%;
    --W: calc(100cqw - 9 * var(--w0) - 8 * var(--g) - var(--G));
    --w: var(--w0);
    --x: calc(var(--W) + var(--g) + (var(--k) - 1) * (var(--w0) + var(--g)) + var(--gr) * (var(--G) - var(--g)));
    width: var(--W);
    transform: translateX(calc(var(--x) - (var(--W) - var(--w)) / 2));
    clip-path: inset(0 calc((var(--W) - var(--w)) / 2) round 26px);
    will-change: transform, clip-path;
  }
  .js .ziua .felie:first-child { --w: var(--W); --x: 0px; }
  .js .ziua .felie__link { position: absolute; inset: 0; }
  .js .ziua .felie__foto { position: absolute; inset: 0 -24px; aspect-ratio: auto; border-radius: 0; }
  .js .ziua .felie__foto .foto, .js .ziua .felie__foto .studio { transform: translateX(var(--px, 0px)); }
  .js .ziua .felie__val { display: block; position: absolute; inset: 0; background: var(--val); opacity: 1; }
  .js .ziua .felie__nume {
    display: block; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl; font: 640 16px/1 var(--font-titlu); color: #fff; white-space: nowrap;
  }
  .js .ziua .felie:first-child .felie__val, .js .ziua .felie:first-child .felie__nume { opacity: 0; }
  /* felia de studio (Berlingo Van): fără văl, numele închis pe gri cald, ca banda de pe telefon (albul dădea 2,3:1) */
  .js .ziua .felie--studio .felie__val { background: transparent; }
  .js .ziua .felie--studio .felie__nume { color: var(--titlu); }
  .js .ziua .felie__info { display: none; }
  .js .ziua .felie__pauza { display: grid; opacity: 0; visibility: hidden; right: 16px; bottom: 16px; }
  .js .ziua .felie__link:focus-visible { outline: none; }
  .js .ziua .felie:has(.felie__link:focus-visible) .felie__foto { outline: 3px solid var(--invers); outline-offset: -6px; }
  .js .ziua .felie--studio:has(.felie__link:focus-visible) .felie__foto { outline-color: var(--nav); }
  .js .ziua__info { display: block; position: absolute; top: 100%; left: 0; width: var(--W); height: 156px;
    --W: calc(100cqw - 9 * var(--w0) - 8 * var(--g) - var(--G)); will-change: transform; }
  .js .info {
    position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; gap: 24px;
    opacity: 0; visibility: hidden;
  }
  .js .info:first-child { opacity: 1; visibility: visible; }
  .info__nume {
    font: 640 min(64px, (var(--W) - 300px) / (var(--n) * 0.6))/1 var(--font-titlu); color: var(--titlu); letter-spacing: -0.02em;
  }
  .info__energii { font-size: 15px; line-height: 22px; color: var(--corp); margin-top: 10px; }
  .info__dr { display: flex; align-items: center; gap: 24px; flex: none; }
  .info__pret { font-size: 15px; color: var(--corp); white-space: nowrap; }
  .info__pret b { font: 600 32px/1 var(--font-text); color: var(--titlu); font-variant-numeric: tabular-nums; margin: 0 2px; }
}
@media (min-width: 1024px) and (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
  .js .ziua__lista { --w0: 40px; }
  .js .info__dr { flex-direction: column; align-items: flex-end; gap: 10px; }
}

/* scena lipită, telefon: aceeași zi, pe verticală; benzile sunt meniul gamei */
@media (max-width: 1023px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .js .ziua { height: calc(100svh + 9 * 55svh); }
  .js .ziua__scena { position: sticky; top: var(--antet); height: calc(100svh - var(--antet)); overflow: hidden; }
  .js .ziua__lista {
    position: relative; height: 100%;
    --b: 36px; --gap: 6px; --Gt: 16px; --I: 128px;
    --Hph: min(clamp(160px, 30svh, 260px), calc(100svh - var(--antet) - 16px - 9 * var(--b) - 8 * var(--gap) - var(--Gt) - var(--I)));
    --Hs: calc(var(--Hph) + var(--I));
  }
  .js .ziua__felii { display: block; padding: 0; height: 100%; }
  .js .ziua .felie {
    position: absolute; left: 0; right: 0; top: 8px; height: var(--Hs);
    --t: calc(var(--Hph) / 2 - var(--b) / 2);
    --y: calc(var(--Hs) + var(--gap) + (var(--k) - 1) * (var(--b) + var(--gap)) + var(--gr) * (var(--Gt) - var(--gap)));
    transform: translateY(calc(var(--y) - var(--t)));
    clip-path: inset(var(--t) 0 calc(var(--Hs) - var(--t) - var(--b)) 0 round 20px);
    will-change: transform, clip-path;
  }
  .js .ziua .felie:first-child { --t: 0px; --y: 0px; clip-path: inset(0 0 0 0 round 20px); }
  .js .ziua .felie__link { position: absolute; left: 0; right: 0; top: 0; height: var(--Hph); }
  .js .ziua .felie__foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 20px; }
  .js .ziua .felie__foto .foto { object-position: var(--poz-tel, 50% 50%); }
  .js .ziua .felie__banda {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; position: absolute; left: 0; right: 0;
    top: var(--t0, calc(var(--Hph) / 2 - var(--b) / 2)); height: var(--b); padding: 0 16px; background: var(--val-banda); color: #fff;
  }
  .js .ziua .felie:first-child .felie__banda { opacity: 0; }
  .js .ziua .felie--studio .felie__banda { background: transparent; color: var(--titlu); top: 6px; }
  .js .ziua .felie--studio { --t: 6px; }
  .felie__banda-nume { font: 640 15px/1 var(--font-titlu); }
  .felie__banda-pret { font: 600 14px/1 var(--font-text); font-variant-numeric: tabular-nums; }
  .js .ziua .felie__info { position: absolute; left: 0; right: 0; top: var(--Hph); height: var(--I); padding-top: 12px; opacity: 0; }
  .js .ziua .felie:first-child .felie__info { opacity: 1; }
  .js .ziua .felie__titlu { font-size: 32px; line-height: 34px; }
  .js .ziua .felie__pauza { display: grid; opacity: 0; visibility: hidden; top: calc(var(--Hph) - 56px); bottom: auto; right: 12px; }
}
@media (max-width: 1023px) and (min-height: 560px) and (max-height: 759px) and (prefers-reduced-motion: no-preference) {
  .js .ziua__lista { --b: 32px; }
}
@media (max-width: 1023px) and (min-height: 560px) and (max-height: 699px) and (prefers-reduced-motion: no-preference) {
  .js .ziua__lista { --I: 60px; }
  .js .ziua .felie__energii { display: none; }
  .js .ziua .felie__info { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .js .ziua .felie__titlu { font-size: 24px; line-height: 28px; }
  .js .ziua .felie__rand { margin: 0; }
  .js .ziua .felie__rand .buton { display: none; }
  .js .ziua .felie__de { display: none; }   /* pe ecranele scunde nu încap toate: rămâne „cu TVA” (decizia lui Vlad), pleacă „de la” */
}
@media (max-width: 1023px) and (min-height: 560px) and (max-height: 639px) and (prefers-reduced-motion: no-preference) {
  .js .ziua__lista { --b: 26px; }
  .felie__banda-nume { font-size: 14px; }
  .felie__banda-pret { font-size: 13px; }
}
/* tabletă în portret: cu plafonul de 260 px benzile se terminau la jumătatea ecranului; fotografia crește (45svh, cel mult 560 px) */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .js .ziua__lista { --Hph: min(clamp(160px, 45svh, 560px), calc(100svh - var(--antet) - 16px - 9 * var(--b) - 8 * var(--gap) - var(--Gt) - var(--I))); }
}
/* telefonul în peisaj (sub 560 px înălțime): scena verticală nu are loc, rămâne lista, ca la reducerea mișcării;
   o fotografie 3:2 nu umple singură tot ecranul */
@media (max-width: 1023px) and (max-height: 559px) {
  .ziua .felie__foto { aspect-ratio: auto; height: 70svh; }
}
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 559px) {
  .ziua__felii { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .ziua .felie__foto { aspect-ratio: 3 / 2; height: auto; max-height: 70svh; }
}

/* ---- „Seara” ---------------------------------------------------------------------------------------------------- */
.seara { padding: 24px 0 var(--sectiune); background: var(--alb); }
.seara__film { height: clamp(360px, 52svh, 620px); }
.seara__text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.seara__text .h2 { grid-column: 1 / span 6; }
.seara__dr { grid-column: 7 / span 6; }
.seara__adresa { font: 640 22px/30px var(--font-titlu); color: var(--titlu); margin-bottom: 16px; }
.seara__actiuni { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
@media (max-width: 1023px) {
  .seara { padding-top: 8px; }
  .seara__film { height: auto; aspect-ratio: 16 / 10; }
  .seara__text { grid-template-columns: 1fr; margin-top: 32px; }
  .seara__text .h2, .seara__dr { grid-column: auto; }
  .seara__adresa { font-size: 19px; line-height: 26px; }
}

/* ---- cardurile care se suprapun (din C, „pernele”), doar pe acasă ------------------------------------------------
   Fiecare card e lipit (position: sticky), 14 px mai jos decât cel dinainte, și următorul urcă peste el. Unde browserul
   știe animation-timeline, cardul acoperit se micșorează și se estompează puțin, pe compozitor (doar transform și
   opacity), legat de lista întreagă (view-timeline pe <ol>, care nu e lipită). Fără JS, fără umbre animate; altfel și la
   prefers-reduced-motion rămâne stiva simplă. */
.perne { background: var(--g2); padding: var(--sectiune) 0; }
.perne__lista {
  --o: 14px; --g: 24px; --A: calc(var(--antet) + 16px);
  --h: min(560px, calc(100svh - var(--A) - 24px - (var(--n) - 1) * var(--o)));
  display: grid; gap: var(--g); view-timeline: --perne block;
}
.perna { position: sticky; top: calc(var(--A) + var(--k) * var(--o)); height: var(--h); min-height: 360px; }
.perna__in {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; padding: 12px;
  background: var(--alb); border-radius: 40px; transform-origin: 50% 0;
  box-shadow: 0 1px 2px rgba(59, 57, 56, .06), 0 10px 30px rgba(59, 57, 56, .08), 0 30px 80px rgba(59, 57, 56, .10);
}
.perna__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 32px 24px 32px 40px; min-width: 0; }
.perna__titlu { font: 640 48px/56px var(--font-titlu); color: var(--titlu); letter-spacing: -0.01em; }
.perna__titlu b { font-weight: 795; }
.perna__det { font-size: 18px; line-height: 28px; color: var(--text); max-width: 34ch; }
.perna__program { width: 100%; max-width: 340px; }
.perna__foto { position: relative; border-radius: 28px; overflow: hidden; background: var(--g3); }
/* vălul cardului acoperit: gri cald, nu transparență (cu opacity pe card s-ar vedea cardurile de dedesubt prin el) */
.perna__in::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--g2); opacity: 0; pointer-events: none; }
.perna__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* cardul k e acoperit de la momentul în care cardul k + 1 îi atinge marginea de jos până se lipește peste el;
       „cover 0 %” = lista intră în ecran pe jos, deci decalajele sunt în pixeli derulați de atunci */
    .perna:not(:last-child) .perna__in, .perna:not(:last-child) .perna__in::after {
      animation: perna-acoperita linear both;
      animation-timeline: --perne;
      animation-range:
        cover calc(100svh + var(--k) * (var(--h) + var(--g) - var(--o)) + var(--g) - var(--A))
        cover calc(100svh + (var(--k) + 1) * (var(--h) + var(--g) - var(--o)) - var(--A));
    }
    .perna:not(:last-child) .perna__in::after { animation-name: perna-voal; }
  }
}
@keyframes perna-acoperita { to { transform: scale(.94); } }
@keyframes perna-voal { to { opacity: .6; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .perna__titlu { font-size: 40px; line-height: 46px; }
}
@media (max-width: 1023px) {
  .perne__lista { --o: 10px; --g: 16px; --A: calc(var(--antet) + 12px); --h: min(600px, calc(100svh - var(--A) - 16px - (var(--n) - 1) * var(--o))); }
  .perna { min-height: 420px; }
  .perna__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; padding: 8px; border-radius: 32px; }
  .perna__foto { order: -1; border-radius: 24px; }
  .perna__text { gap: 12px; padding: 18px 12px 12px; }
  .perna__titlu { font-size: 28px; line-height: 34px; }
  .perna__det { font-size: 16px; line-height: 24px; }
}
/* telefonul în peisaj: cardul trebuie să încapă în ecran, altfel butonul lui rămâne sub cardul următor; fotografia
   și textul stau unul lângă altul */
@media (max-width: 1023px) and (max-height: 559px) {
  .perne__lista { --o: 8px; --A: calc(var(--antet) + 8px); --h: calc(100svh - var(--A) - 8px - (var(--n) - 1) * var(--o)); }
  .perna { min-height: 0; }
  .perna__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; gap: 8px; }
  .perna__foto { order: 0; }
  .perna__text { padding: 8px 12px; gap: 8px; }
  .perna__titlu { font-size: 22px; line-height: 28px; }
  .perna__det { font-size: 15px; line-height: 22px; }
  .perna__program div { padding: 3px 0; }
  .perna .buton { height: 44px; }
}
/* tastatura: cardul cu focus urcă peste cel următor, întreg și fără văl (altfel butonul cu focus e acoperit; WCAG 2.4.11) */
.perna:focus-within { z-index: 1; }
.perna:focus-within .perna__in, .perna:focus-within .perna__in::after { animation: none; }

/* ---- gama (/modele/) ----------------------------------------------------------------------------------------- */
.gama { padding-top: 64px; }
.gama__cap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.gama__h2 { margin: 72px 0 32px; scroll-margin-top: calc(var(--antet) + 24px); }
.gama__grila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.placa { display: block; text-decoration: none; color: var(--text); }
.placa__foto { display: block; position: relative; aspect-ratio: 3 / 2; border-radius: var(--raza); overflow: hidden; background: var(--g3); }
.placa__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%); transition: transform 200ms ease-out; }
.placa__nume { display: block; margin-top: 18px; font: 640 28px/34px var(--font-titlu); color: var(--titlu); letter-spacing: -0.01em; }
.placa__energii { display: block; font-size: 15px; color: var(--corp); margin-top: 2px; }
.placa__pret { display: block; font-size: 15px; color: var(--corp); margin-top: 8px; }
.placa__pret b { font: 600 20px/26px var(--font-text); color: var(--titlu); font-variant-numeric: tabular-nums; }
.placa:focus-visible { outline: none; }
.placa:focus-visible .placa__foto { outline: 2px solid var(--nav); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .placa:hover .placa__foto .foto { transform: scale(1.02); } }
@media (max-width: 1023px) {
  .gama { padding-top: 40px; }
  .gama__cap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gama__h2 { margin: 48px 0 20px; }
  .gama__grila { grid-template-columns: 1fr; gap: 36px; }
  .placa__foto { aspect-ratio: 16 / 10; }
  .placa__nume { font-size: 24px; line-height: 30px; margin-top: 14px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .gama__grila { grid-template-columns: 1fr 1fr; gap: 36px 16px; } }
/* șapte autoturisme: 3 + 4 pe 12 coloane, fără o placă rămasă singură pe ultimul rând */
@media (min-width: 1024px) {
  .gama__grila--autoturism { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gama__grila--autoturism > li { grid-column: span 4; }
  .gama__grila--autoturism > li:nth-child(n + 4) { grid-column: span 3; }
  .gama__grila--autoturism > li:nth-child(n + 4) .placa__nume { font-size: 24px; line-height: 30px; }
}

/* ---- pagina de model ------------------------------------------------------------------------------------------ */
.erou { padding-top: 24px; }
.erou__foto { position: relative; height: calc(100svh - var(--antet) - 24px - 184px); min-height: 420px; border-radius: var(--raza); overflow: hidden; background: var(--g3); }
.erou__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%); }
.erou__jos { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 184px; padding: 24px 0; }
.erou__st { min-width: 0; }
.erou__h1 { font: 640 min(88px, max(56px, 6vw))/1 var(--font-titlu); letter-spacing: -0.02em; color: var(--titlu); }
.comutator { display: flex; gap: 8px; margin-top: 18px; }
.erou__dr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 10px; }
.pret { color: var(--corp); font-size: 15px; line-height: 22px; display: flex; flex-direction: column; align-items: flex-end; }
.pret__mare b { font: 600 34px/40px var(--font-text); color: var(--titlu); font-variant-numeric: tabular-nums; }
.pret__de, .pret__tva { font-size: 15px; color: var(--corp); }
.model--util .pret__mare b, .pret__mare b { white-space: nowrap; }
.pret__sub { font-size: 15px; color: var(--corp); font-variant-numeric: tabular-nums; }
.cifre { font-size: 15px; line-height: 22px; color: var(--corp); }
.cifre b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.erou__versiuni { margin-top: 6px; }
@media (max-width: 1023px) {
  .erou { padding-top: 12px; }
  .erou__foto { height: 46svh; min-height: 260px; }
  /* pe telefon cadrul e aproape pătrat: încadrarea de telefon a fotografiei (botul mașinii în cadru) */
  .erou__foto .foto, .placa__foto .foto, .simpla__foto .foto { object-position: var(--poz-tel, var(--poz, 50% 50%)); }
  .erou__foto .studio__masina { left: 6%; width: 88%; bottom: 22%; }
  .erou__jos { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; padding: 20px 0 8px; }
  .erou__h1 { font-size: min(40px, calc((100vw - 32px) / (var(--n) * 0.6))); }
  .comutator { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 14px calc(-1 * var(--margine)) 0; padding: 0 var(--margine); }
  .comutator::-webkit-scrollbar { display: none; }
  .comutator__el { scroll-snap-align: start; flex: none; }
  .erou__dr { align-items: flex-start; text-align: left; }
  .pret { align-items: flex-start; }
  .pret__mare b { font-size: 26px; line-height: 32px; }
  .erou__versiuni { width: 100%; }
}

/* bara de jos (telefon) */
.bara-jos { display: none; }
@media (max-width: 1023px) {
  .bara-jos {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 20px;
    background: var(--alb); border-radius: 999px; box-shadow: 0 8px 24px rgba(59, 57, 56, .16);
    opacity: 0; visibility: hidden; transition: opacity 150ms, visibility 150ms;
  }
  .bara-jos.vizibila { opacity: 1; visibility: visible; }
  .bara-jos__pret { font: 600 16px/20px var(--font-text); color: var(--titlu); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .model main { padding-bottom: 88px; }
  .bara-jos-vizibila .antet__td { visibility: hidden; }
  /* Tab: elementul cu focus nu ajunge sub bara de jos */
  html:has(.bara-jos.vizibila) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
/* sub 375 px „de la 27.050 € + TVA” nu încape lângă buton: rămâne prețul */
@media (max-width: 374px) { .bara-jos .bara-de { display: none; } }
/* pe ecranele scunde (telefon în peisaj) bara de jos ar acoperi mașina: rămâne „Test drive” din antet (și site.js) */
@media (max-width: 1023px) and (max-height: 500px) {
  .bara-jos { display: none !important; }
  .bara-jos-vizibila .antet__td { visibility: visible; }
  .model main { padding-bottom: 0; }
}

/* „Ziua modelului”: galeria */
.zi-model { padding: 48px 0 0; }
.zi-model__lista {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--margine)); padding: 0 var(--margine);
}
.zi-model__lista::-webkit-scrollbar { display: none; }
.zi-model .felie { flex: none; width: 84vw; aspect-ratio: 3 / 2; scroll-snap-align: center; border-radius: var(--raza); overflow: hidden; background: var(--g3); }
.zi-model .felie__foto { position: absolute; inset: 0; }
.zi-model .felie__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%); }
.zi-model .felie__pauza { display: grid; }
@media (min-width: 1024px) { .zi-model .felie { width: 62vw; max-width: 1200px; } }
@media (max-width: 1023px) { .zi-model { padding-top: 40px; } .zi-model .felie { width: 84vw; height: 56vw; aspect-ratio: auto; } }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .zi-model { padding: 0; height: calc(100svh + (var(--n) - 1) * 40svh); margin-top: 48px; }
  .js .zi-model__scena { position: sticky; top: var(--antet); height: calc(100svh - var(--antet)); padding-top: 24px; }
  .js .zi-model__lista {
    display: block; position: relative; overflow: visible; margin: 0; padding: 0;
    height: calc(100svh - var(--antet) - 48px); container-type: inline-size; --w0: 48px; --g: 8px;
  }
  .js .zi-model .felie {
    position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: auto; border-radius: 0; overflow: visible; background: none;
    --W: calc(100cqw - (var(--n) - 1) * (var(--w0) + var(--g)));
    --w: var(--w0); --x: calc(var(--W) + var(--g) + (var(--k) - 1) * (var(--w0) + var(--g)));
    width: var(--W); max-width: none;
    transform: translateX(calc(var(--x) - (var(--W) - var(--w)) / 2));
    clip-path: inset(0 calc((var(--W) - var(--w)) / 2) round 26px);
    will-change: transform, clip-path; cursor: pointer;
  }
  .js .zi-model .felie:first-child { --w: var(--W); --x: 0px; cursor: default; }
  .js .zi-model .felie__foto { inset: 0 -24px; background: var(--g3); }
  .js .zi-model .felie__foto .foto, .js .zi-model .felie__foto .studio { transform: translateX(var(--px, 0px)); }
  .js .zi-model .felie__pauza { opacity: 0; visibility: hidden; }
}

/* culori: scena din prototipul B „Ton pe ton”. Vopseaua următoare trece peste mașină pe o linie verticală și repictează
   mașina, fondul, ovalul și numele culorii; la derulare (scena lipită) și la clic pe mostre. Doar clip-path și transform. */
.culori { padding-bottom: 0; }
.culori .h2 { margin-bottom: 40px; }
.scena-culori { --pas: 45svh; position: relative; }
.sc-in { width: min(100% - 2 * var(--margine), 1872px); margin-inline: auto; height: calc(100svh - var(--antet) - 48px); min-height: 460px; max-height: 1000px; }
/* lipită doar unde încape (în peisaj pe telefon, sub 560 px, mostrele schimbă culoarea la clic, ca la reducerea mișcării) */
@media (prefers-reduced-motion: no-preference) and (min-height: 560px) {
  .js .scena-culori { height: calc(100svh - var(--antet) - 48px + (var(--n) - 1) * var(--pas) + 24px); }
  .js .sc-in { position: sticky; top: calc(var(--antet) + 24px); }
}
.vopsea { position: relative; height: 100%; border-radius: var(--raza); overflow: hidden; background: var(--ton); container-type: size; isolation: isolate; }
.strat { position: absolute; inset: 0; background: var(--ton); }
.strat-b { z-index: 2; clip-path: inset(0 100% 0 0); }
.v-linie { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; margin-left: -.5px; background: rgba(22, 20, 19, .10); z-index: 3; opacity: 0; pointer-events: none; }
.vopsea.trece .v-linie { opacity: 1; }
.v-oval { position: absolute; left: 50%; top: 52%; height: 82cqh; aspect-ratio: .806; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mediu); }
.v-masina { position: absolute; left: 50%; bottom: 14%; width: min(82cqw, 64cqh * var(--ar, 1.49)); transform: translateX(-50%); }
.v-masina img { width: 100%; height: auto; margin-bottom: calc(var(--cj, 0) * -100%); }
.v-nume { position: absolute; left: 48px; top: 40px; right: 220px; font: 560 34px/40px var(--font-titlu); color: var(--adanc); letter-spacing: -0.01em; }
.v-nume b { font-weight: 795; }
.v-det { position: absolute; left: 48px; top: 86px; font: 500 15px/22px var(--font-text); color: var(--corp); }
.v-mostre { position: absolute; left: 48px; bottom: 40px; z-index: 4; display: flex; gap: 10px; padding: 6px; margin: -6px; }
.mostra {
  position: relative; display: block; width: 34px; height: 42px; flex: none; border-radius: 50%;
  background: linear-gradient(var(--cap, var(--hex)) 0 32%, var(--hex) 32% 100%);
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(22, 20, 19, .10);
}
.mostra[aria-pressed="true"] { box-shadow: 0 0 0 1px rgba(22, 20, 19, .10), 0 0 0 3px var(--ton), 0 0 0 5px var(--adanc); }
@media (hover: hover) { .mostra:not([aria-pressed="true"]):hover { box-shadow: 0 0 0 1px rgba(22, 20, 19, .10), 0 0 0 3px var(--ton), 0 0 0 4px var(--corp); } }
.mostra:focus-visible { outline-offset: 6px; }
.v-vederi { position: absolute; right: 24px; top: 24px; z-index: 4; }
.v-vederi .pastila-b:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .7); }
.v-vederi .pastila-b[aria-pressed="true"] { background: var(--adanc); }
.culori__toate { margin-top: 32px; }
.culori__toate summary { cursor: pointer; color: var(--nav); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; list-style: none; display: inline-flex; padding: 10px 0; }
.culori__toate summary::-webkit-details-marker { display: none; }
.lista-culori { margin-top: 12px; display: grid; }
.lista-culori li { display: grid; grid-template-columns: 24px minmax(180px, 1.3fr) 110px 150px 3fr; gap: 4px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--g3); font-size: 15px; line-height: 22px; }
.lc-oval { width: 24px; height: 30px; border-radius: 50%; background: linear-gradient(var(--cap, var(--hex)) 0 32%, var(--hex) 32% 100%); box-shadow: inset 0 0 0 1px rgba(22, 20, 19, .12); }
.lc-oval--fara { background: transparent; box-shadow: inset 0 0 0 1.5px var(--g4); }
.lc-nume { color: var(--titlu); min-width: 0; overflow-wrap: anywhere; }
.lc-nume b { font-weight: 650; }
.lc-tip, .lc-ech { color: var(--corp); }
.lc-pret { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-pret__cu { font-size: 13px; line-height: 18px; color: var(--corp); }
@media (max-width: 1023px) {
  .culori .h2 { margin-bottom: 24px; }
  .scena-culori { --pas: 55svh; }
  .sc-in { height: calc(100svh - var(--antet) - 104px); min-height: 400px; }
  .v-nume { left: 20px; top: 16px; right: 20px; font-size: 20px; line-height: 26px; }
  .v-det { left: 20px; top: 44px; right: 20px; font-size: 14px; line-height: 20px; }
  .v-mostre { top: 72px; bottom: auto; left: 0; right: 0; margin: 0; padding: 6px 20px; overflow-x: auto; scrollbar-width: none; }
  .v-mostre::-webkit-scrollbar { display: none; }
  .v-vederi { right: 14px; top: auto; bottom: 14px; }
  .v-masina { width: min(96cqw, 52cqh * var(--ar, 1.49)); bottom: 23%; }
  .v-oval { top: 53%; height: 60cqh; }
  .lista-culori li { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; }
  .lc-oval { grid-row: span 3; }
  .lc-tip { grid-column: 2; grid-row: 2; font-size: 14px; }
  .lc-pret { grid-column: 3; grid-row: 1 / span 2; align-items: flex-end; text-align: right; }
  .lc-ech { grid-column: 2 / -1; font-size: 14px; }
}
@media (max-width: 1023px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .js .scena-culori { height: calc(100svh - var(--antet) - 104px + (var(--n) - 1) * var(--pas) + 16px); }
  .js .sc-in { top: calc(var(--antet) + 16px); }
}
/* peisaj pe telefon: scena încape toată sub pastila de sus (mostrele sus, „Față · Profil” jos, în același ecran) */
@media (max-width: 1023px) and (max-height: 559px) {
  .sc-in { height: calc(100svh - var(--antet) - 8px); min-height: 280px; }
  .v-oval { height: 70cqh; }
  .v-masina { width: min(70cqw, 50cqh * var(--ar, 1.49)); bottom: 12%; }
}
/* mostrele la 320 px: banda încape fără derulare */
@media (max-width: 359px) {
  .v-mostre { gap: 8px; padding-inline: 16px; }
}

/* înăuntru */
.inauntru__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; }
.inauntru__in .h2 { grid-column: 1 / -1; }
.inauntru__panou { grid-column: 1 / span 7; position: relative; border-radius: var(--raza); background: var(--g1); overflow: hidden; aspect-ratio: 2160 / 1000; }
.inauntru__scena { position: absolute; inset: 0; }
.inauntru__img, .inauntru__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inauntru__img--nou { opacity: 0; transition: opacity 160ms ease-out; }
/* marfa văzută de sus (Jumpy furgon): randarea e decupată strâns, deci încape toată, cu aer în jur */
.inauntru__panou--sus .inauntru__img { object-fit: contain; padding: 4% 5%; }
.inauntru__img--nou.gata { opacity: 1; }
.inauntru__panou .studio { background: var(--g1); }
.inauntru__pastile { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; z-index: 2; }
.inauntru__pastile .pastila-b:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .82); }
.inauntru__pastile[hidden], .inauntru__pastile .pastile[hidden] { display: none; }
.inauntru__text { grid-column: 9 / span 4; align-self: center; }
.inauntru__fapte p { font-size: 18px; line-height: 28px; color: var(--text); }
.inauntru__fapte p + p { margin-top: 20px; }
.valori { display: grid; gap: 28px; }
.valori dd { font: 640 40px/44px var(--font-titlu); color: var(--titlu); font-variant-numeric: tabular-nums; }
.valori dt { font-size: 14px; color: var(--corp); }
.valori div { display: flex; flex-direction: column-reverse; }
@media (max-width: 1023px) {
  .inauntru__in { grid-template-columns: 1fr; gap: 24px; }
  .inauntru__panou, .inauntru__text { grid-column: auto; }
  .inauntru__panou { aspect-ratio: 4 / 3; }
  .inauntru__pastile { left: 12px; right: 12px; bottom: 12px; }
  .inauntru__fapte p { font-size: 16px; line-height: 24px; }
  /* pe telefon cifrele stau una sub alta: „999–1.004 kg” nu încăpea în a treia parte din lățime și se rupea */
  .valori { grid-template-columns: 1fr; gap: 16px; }
  .valori dd { font-size: 28px; line-height: 34px; white-space: nowrap; }
  .inauntru__panou--sus { aspect-ratio: 2160 / 1000; }
  .inauntru__panou--sus .inauntru__img { padding: 3%; }
  .valori dt { font-size: 13px; line-height: 18px; }
}

/* versiuni și prețuri */
.versiuni__pastile { margin-top: 32px; }
.tabel { width: 100%; border-collapse: collapse; margin-top: 24px; font-variant-numeric: tabular-nums; }
.tabel[hidden] { display: none; }
.tabel__cap td { font-size: 13px; line-height: 20px; color: var(--g6); padding: 0 0 6px; }
.versiune__rand { height: 72px; border-top: 1px solid var(--g3); cursor: pointer; }
.versiune:last-child .versiune__dotari:not([hidden]) + *, .versiune:last-of-type { border-bottom: 1px solid var(--g3); }
.versiune__rand th, .versiune__rand td { padding: 14px 0; text-align: left; vertical-align: middle; }
.versiune__ech { width: 22%; }
.versiune__ech button {
  background: none; border: 0; padding: 0; font: 640 22px/28px var(--font-titlu); color: var(--titlu); text-align: left;
  display: inline-flex; align-items: center; gap: 14px;
}
/* V1: „Dotări” scris pe buton, cu săgeata după el (o săgeată de 8 px singură nu spunea ce face butonul) */
.versiune__dot { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--font-text); color: var(--nav); white-space: nowrap; }
.versiune__dot::after {
  content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); flex: none;
}
.versiune__ech button[aria-expanded="true"] .versiune__dot::after { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) { .versiune__ech button:hover .versiune__dot { color: var(--hover); } }
.versiune__mot, .versiune__car { font-size: 16px; color: var(--corp); padding-right: 24px !important; }
.tabel__pret { text-align: right !important; white-space: nowrap; width: 160px; }
.versiune__pret { font: 600 20px/28px var(--font-text); color: var(--titlu); }
.versiune__pret b { font-weight: 700; }
.versiune__pret--cu { font-weight: 500; color: var(--corp); font-size: 17px; }
.versiune.deschisa .versiune__rand, .versiune.deschisa .versiune__dotari { background: var(--g1); }
.versiune.deschisa .versiune__rand th { padding-left: 20px; }
.versiune.deschisa .versiune__rand .tabel__pret:last-child { padding-right: 20px; }
.versiune__dotari td { padding: 8px 20px 28px; }
@media (hover: hover) { .versiune__rand:hover { background: var(--g1); } }
.dotari { columns: 3; column-gap: 40px; }
.dotari__grup { break-inside: avoid-column; margin-bottom: 20px; }
.dotari h4 { font: 600 14px/20px var(--font-text); color: var(--titlu); margin: 0 0 6px; }
.dotari li { font-size: 14px; line-height: 20px; color: var(--text); padding: 3px 0 3px 14px; position: relative; break-inside: avoid; }
.dotari li::before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--g4); }
.dotari__fata { font: 600 14px/20px var(--font-text); color: var(--corp); margin-bottom: 12px; }
.dotari--toate { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--g3); }
.versiune__oferta { margin-top: 8px; }
.nota-pret { margin-top: 24px; font-size: 13px; line-height: 20px; color: var(--g6); max-width: 860px; }
.versiuni__pereche { margin-top: 16px; font-size: 15px; line-height: 22px; color: var(--corp); }
@media (max-width: 1023px) {
  .tabel, .tabel tbody, .tabel tr, .tabel th, .tabel td { display: block; }
  .tabel__cap { display: none !important; }
  .versiune__rand { height: auto; display: grid !important; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; }
  .versiune__rand th, .versiune__rand td { padding: 0 !important; width: auto; }
  .versiune__ech { grid-column: 1 / -1; }
  .versiune__ech button { font-size: 20px; line-height: 26px; min-height: 44px; }
  .versiune__mot, .versiune__car { grid-column: 1 / -1; font-size: 15px; line-height: 22px; }
  .tabel__pret { text-align: left !important; width: auto; }
  .versiune__pret { font-size: 18px; margin-top: 4px; }
  .tabel--util .versiune__pret--cu { text-align: right !important; align-self: end; }
  .tabel--util .versiune__pret--cu::after { content: " cu TVA"; font-size: 13px; }
  .tabel--util .versiune__pret:not(.versiune__pret--cu)::after { content: " + TVA"; font-size: 13px; font-weight: 500; color: var(--corp); }
  .versiune.deschisa .versiune__rand { padding-left: 12px; padding-right: 12px; }
  .versiune__dotari td { padding: 4px 12px 20px !important; }
  .dotari { columns: 1; }
}

/* specificații */
.spec__pastile { margin-top: 32px; }
.spec__pastile .pastila-b[hidden] { display: none; }
.spec__bloc, .spec__motoare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 32px; }
.spec__bloc[hidden], .spec__motoare[hidden] { display: none; }
.spec__grup { break-inside: avoid; margin-bottom: 32px; }
.spec__grup h3 { font: 640 20px/26px var(--font-titlu); margin-bottom: 8px; }
.spec__grup dl div { display: flex; justify-content: space-between; gap: 24px; padding: 9px 0; border-bottom: 1px solid var(--g3); font-size: 15px; line-height: 22px; }
.spec__grup dt { color: var(--corp); }
.spec__grup dd { color: var(--titlu); text-align: right; font-variant-numeric: tabular-nums; }
.spec__pentru { font-size: 13px; color: var(--g6); }
@media (max-width: 1023px) {
  .spec__pastile { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine)); padding: 0 var(--margine); }
  .spec__pastile::-webkit-scrollbar { display: none; }
  .spec__pastile .pastila-b { scroll-snap-align: start; flex: none; }
  .spec__bloc, .spec__motoare { grid-template-columns: 1fr; }
  .spec__grup dl div { flex-direction: column; gap: 2px; }
  .spec__grup dd { text-align: left; }
}

/* garanție și documente */
.garantie { padding-top: 0; }
.garantie__banda { display: flex; justify-content: space-between; gap: 48px; padding: 40px; border-radius: var(--raza); background: var(--g1); }
.garantie__st { max-width: 860px; }
.garantie__scurt { margin-top: 10px; font-size: 18px; line-height: 28px; color: var(--text); }
.garantie__link { margin-top: 10px; }
.garantie__doc { display: grid; gap: 14px; align-content: start; flex: none; max-width: 420px; }
.garantie__doc a { display: flex; flex-direction: column; font-weight: 600; }
.garantie__doc-t { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--g6); text-decoration: none; display: block; margin-top: 2px; }
@media (max-width: 1023px) { .garantie__banda { flex-direction: column; gap: 24px; padding: 24px 20px; } }

/* test drive */
.test-drive { padding-top: 0; }
.test-drive__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.test-drive__foto { grid-column: 1 / span 5; position: sticky; top: calc(var(--antet) + 24px); aspect-ratio: 4 / 5; border-radius: var(--raza); overflow: hidden; background: var(--g3); }
.test-drive__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.test-drive__form { grid-column: 7 / span 6; }
.test-drive__ales { margin-top: 14px; font: 500 17px/24px var(--font-text); color: var(--corp); }
.test-drive__ales b { color: var(--titlu); }
@media (max-width: 1023px) {
  .test-drive__in { grid-template-columns: 1fr; }
  .test-drive__foto, .test-drive__form { grid-column: auto; }
  .test-drive__foto { position: relative; top: 0; aspect-ratio: 16 / 10; }
}

/* ---- formulare ---------------------------------------------------------------------------------------------- */
.formular { margin-top: 28px; display: grid; gap: 18px; }
.camp-rand { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.camp { display: grid; gap: 6px; align-content: start; }
.camp label, .camp legend { font: 600 14px/20px var(--font-text); color: var(--titlu); }
.camp__opt { font-weight: 500; color: var(--g6); }
.camp input, .camp select, .camp textarea {
  width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--g4); border-radius: 14px; background: var(--alb);
  font: 500 16px/22px var(--font-text); color: var(--titlu); appearance: none; -webkit-appearance: none;
}
.camp select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--nav) 50%), linear-gradient(135deg, var(--nav) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 17px) 21px; background-size: 5px 5px; background-repeat: no-repeat;
}
.camp textarea { resize: vertical; min-height: 96px; }
.camp input:focus-visible, .camp select:focus-visible, .camp textarea:focus-visible { outline: 2px solid var(--nav); outline-offset: 1px; border-color: var(--nav); }
.camp.are-eroare input, .camp.are-eroare select { border-color: #b4231a; }
.camp__eroare { font-size: 13px; line-height: 18px; color: #b4231a; min-height: 0; }
.camp__eroare:empty { display: none; }
.bifa { display: flex; gap: 12px; align-items: flex-start; font: 500 15px/22px var(--font-text) !important; color: var(--text) !important; cursor: pointer; }
.bifa input { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 1px 0 0; border-radius: 6px; flex: none; appearance: auto; -webkit-appearance: auto; accent-color: var(--text); }
.pastile-opt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pastila-opt { position: relative; }
.pastila-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastila-opt span { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--g1); font: 600 15px/1 var(--font-text); color: var(--text); }
.pastila-opt input:checked + span { background: var(--text); color: #fff; }
.pastila-opt input:focus-visible + span { outline: 2px solid var(--nav); outline-offset: 3px; }
.formular__trimite { margin-top: 6px; }
.formular__stare { font-weight: 600; color: var(--titlu); }
.formular__stare:empty { display: none; }
.formular__versiune { font-size: 15px; color: var(--corp); }
.formular__trimite .buton[aria-disabled="true"] { cursor: progress; }
.camp select:disabled { opacity: .5; }
/* confirmarea care ia locul formularului după o trimitere reușită */
.formular-gata { margin-top: 28px; display: grid; gap: 12px; font-size: 17px; line-height: 26px; color: var(--text); }
.formular-gata:focus { outline: none; }
.formular-gata__titlu { font: 640 24px/32px var(--font-titlu); color: var(--titlu); }
@media (max-width: 1023px) {
  .camp-rand { grid-template-columns: 1fr; }
  .formular__trimite .buton { width: 100%; }
  .formular-gata { font-size: 16px; line-height: 24px; }
  .formular-gata__titlu { font-size: 20px; line-height: 26px; }
}

/* ---- paginile simple --------------------------------------------------------------------------------------- */
.simpla { padding-top: 56px; }
.simpla__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
.simpla__foto { grid-column: 1 / span 5; position: relative; aspect-ratio: 4 / 5; border-radius: var(--raza); overflow: hidden; background: var(--g3); }
.simpla__foto .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%); }
.simpla__text { grid-column: 7 / span 6; }
.simpla--service .simpla__text, .simpla--contact .simpla__text, .simpla--finantare .simpla__text { grid-column: 1 / span 5; }
.simpla__panou { grid-column: 7 / span 6; padding: 40px; border-radius: var(--raza); background: var(--g1); scroll-margin-top: calc(var(--antet) + 16px); }
.simpla__panou .camp input, .simpla__panou .camp select, .simpla__panou .camp textarea { border-color: var(--g3); }
.simpla--finantare .simpla__foto--lat { grid-column: 7 / span 6; aspect-ratio: 4 / 3; }
.simpla__lead { margin-top: 20px; font-size: 18px; line-height: 28px; color: var(--text); }
.simpla__nota { margin-top: 24px; font-size: 14px; color: var(--corp); }
.simpla .program { margin-top: 28px; }
.servicii { margin-top: 36px; display: grid; }
.servicii li { padding: 16px 0; border-top: 1px solid var(--g3); display: flex; flex-direction: column; }
.servicii li:last-child { border-bottom: 1px solid var(--g3); }
.servicii__nume { font: 640 22px/28px var(--font-titlu); color: var(--titlu); }
.servicii__det { font-size: 15px; line-height: 22px; color: var(--corp); }
.simpla__contact { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.simpla__tel { font: 600 24px/32px var(--font-text); color: var(--titlu); text-decoration: none; font-variant-numeric: tabular-nums; }
.simpla__adresa { margin-top: 12px; color: var(--corp); }
.simpla__adresa--mare { margin-top: 20px; font: 640 22px/30px var(--font-titlu); color: var(--titlu); }
.simpla__harta { margin-top: 8px; font-size: 15px; }
.contact__programe { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
.contact__programe .program { margin-top: 12px; }
.contact__programe p { margin-top: 12px; font-size: 15px; }
.pasi { margin: 36px 0 32px; display: grid; }
.pasi li { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--g3); font-size: 17px; line-height: 24px; }
.pasi li:last-child { border-bottom: 1px solid var(--g3); }
.pasi__nr { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--g1); display: grid; place-items: center; font: 640 16px/1 var(--font-titlu); color: var(--titlu); }
.finantator { padding-top: 0; }
.finantator__nume { font: 640 20px/28px var(--font-titlu); color: var(--titlu); margin: 12px 0 4px; }
.finantator__date { display: grid; gap: 8px; min-width: 320px; }
.finantator__date div { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--g3); font-size: 15px; }
.finantator__date dt { color: var(--corp); }
.finantator__date dd { color: var(--titlu); font-variant-numeric: tabular-nums; text-align: right; }
.finantator__nota { margin-top: 16px; }
@media (max-width: 1023px) {
  .simpla { padding-top: 24px; }
  .simpla__in { grid-template-columns: 1fr; gap: 28px; }
  .simpla__foto, .simpla__text, .simpla__panou, .simpla--service .simpla__text, .simpla--contact .simpla__text,
  .simpla--finantare .simpla__text, .simpla--finantare .simpla__foto--lat { grid-column: auto; }
  .simpla__foto { aspect-ratio: 16 / 10; order: -1; }
  .simpla__panou { padding: 24px 16px; margin: 0 calc(-1 * var(--margine) + 4px); }
  .contact__programe { grid-template-columns: 1fr; gap: 24px; }
  .finantator__date { min-width: 0; }
  .finantator__date div { flex-direction: column; gap: 2px; }
  .finantator__date dd { text-align: left; }
}
/* telefonul în peisaj: fotografia de sus nu umple singură primul ecran (titlul și formularul încep sub ea) */
@media (max-width: 1023px) and (max-height: 559px) {
  .simpla__foto, .test-drive__foto { aspect-ratio: auto; height: 45svh; }
}

/* ---- tranziția felie → pagină (doar unde browserul o are, fără reducerea mișcării) ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: var(--usor); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.nota-pret .link { white-space: nowrap; }
[hidden] { display: none !important; }
.cifre__el { white-space: nowrap; }
@media (max-width: 1023px) {
  .versiuni__pastile { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine)); padding: 0 var(--margine); }
  .versiuni__pastile::-webkit-scrollbar { display: none; }
  .versiuni__pastile .pastila-b { flex: none; scroll-snap-align: start; }
}
/* feliile stau pe loc, dar cele închise sunt elemente late, tăiate cu clip-path: nu lărgesc pagina */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .ziua__scena, .js .zi-model__scena { overflow: hidden; }
}
@media (max-width: 1023px) {
  .subsol__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subsol__date { grid-column: 1 / -1; }
  .subsol a, .noaptea a { overflow-wrap: anywhere; }
}

/* ---- meniul și subsolul: paginile de informații și cele legale (P1) ----------------------------------------------- */
.cortina__info { flex-basis: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--g3); }
.cortina__info ul { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.cortina__info a { font: 500 15px/22px var(--font-text); color: var(--nav); text-decoration: none; white-space: nowrap; }
.cortina__info a[aria-current="page"] { color: var(--hover); }
@media (hover: hover) { .cortina__info a:hover { color: var(--hover); } }
.cortina__info .cortina__nota { flex-basis: auto; }
.foaie__info { display: grid; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--g3); }
.foaie__info a { display: block; padding: 10px 8px; font: 500 15px/22px var(--font-text); color: var(--corp); text-decoration: none; }
.foaie__info a[aria-current="page"] { color: var(--titlu); }
.subsol__legal { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--noapte-linie); font-size: 14px; line-height: 20px; }
.subsol__legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.subsol__sal { flex: none; }
.subsol__sal img { width: 201px; height: 50px; max-width: none; }
.subsol__legal + .subsol__jos { margin-top: 24px; }

/* ---- paginile de informații (P1): garanție, liste de prețuri, electric și hibrid, finanțare ------------------------
   Componentele lui A: fotografii cu colțurile de 26 px, pastile, linii de 1 px în gri cald, cifre mari în Gantari,
   butoane pe contur (roșul rămâne doar pe „Test drive” din antet). Nimic animat: doar hover-ul instant al linkurilor și
   scale(1.02) pe plăcile-ancoră (ca pe /modele/). */
.pinfo { padding-top: 56px; }
.pinfo__lead { margin-top: 20px; max-width: 44ch; font-size: 18px; line-height: 28px; color: var(--text); }
.cifra-mare { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cifra-mare__v { font: 640 56px/1 var(--font-titlu); letter-spacing: -0.02em; color: var(--titlu); font-variant-numeric: tabular-nums; }
.cifra-mare__u { font: 640 22px/1 var(--font-titlu); color: var(--titlu); }
.gar-panou__foto .foto, .gar-detalii__foto .foto, .asist__foto .foto, .incarcare__foto .foto, .fin-cap__foto .foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%);
}
.gar-panou__foto, .gar-detalii__foto, .asist__foto, .incarcare__foto, .fin-cap__foto { position: relative; border-radius: var(--raza); overflow: hidden; background: var(--g3); }

/* garanție: două fotografii mari cu cifra sub ele, ca banda de informații a feliei deschise de acasă */
.gar__panouri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.gar-panou__foto { aspect-ratio: 3 / 2; }
.gar-panou__jos { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 22px; }
.gar-panou__st { min-width: 0; }
.gar-panou__et { font: 640 32px/38px var(--font-titlu); color: var(--titlu); }
.gar-panou__modele { margin-top: 8px; max-width: 42ch; font-size: 15px; line-height: 22px; color: var(--corp); }
.gar-panou__modele a { text-decoration: none; color: var(--corp); }
@media (hover: hover) { .gar-panou__modele a:hover { color: var(--hover); text-decoration: underline; text-underline-offset: 3px; } }
.gar-panou__cifra { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.gar-panou__cifra .cifra-mare__v { font-size: 96px; letter-spacing: -0.03em; }
.gar-panou__cifra .cifra-mare__u { font-size: 32px; }
.gar-panou__cond { margin-top: 8px; font: 500 17px/24px var(--font-text); color: var(--corp); }
.gar__jos { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--g3); }
.gar__acopera { max-width: 72ch; font-size: 17px; line-height: 26px; color: var(--text); }
.gar__jos .buton { flex: none; }
.gar-detalii, .asist, .el-sec + .el-sec, .incarcare, .fin-leasing, .finantator, .fin-pasi { padding-top: 0; }
.el-sec.el-sec--gri, .el-sec--gri + .el-sec { padding-top: var(--sectiune); }
.gar-detalii__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: 40px; background: var(--g1); }
.gar-detalii__foto { grid-column: 1 / span 4; min-height: 360px; border-radius: 28px; }
.gar-detalii__col { grid-column: span 4; padding: 32px 28px; }
.gar-detalii__col + .gar-detalii__col { border-left: 1px solid var(--g3); }
.gar-detalii__sub { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--corp); }
.gar-cifre { display: grid; gap: 20px; margin-top: 28px; }
.gar-cifre dt { font-size: 14px; line-height: 20px; color: var(--corp); }
.gar-cifre dd { margin-top: 4px; }
.asist__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: center; }
.asist__foto { grid-column: 1 / span 7; aspect-ratio: 16 / 10; }
.asist__text { grid-column: 9 / span 4; }
.asist__nr { margin-top: 24px; }
.asist__nr a { font: 640 48px/1.05 var(--font-titlu); letter-spacing: -0.02em; color: var(--titlu); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .asist__nr a:hover { color: var(--hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } }
.asist__det { margin-top: 14px; font-size: 17px; line-height: 26px; color: var(--text); }
.asist__alt { font-weight: 600; color: var(--titlu); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.asist__cand { margin-top: 20px; font-size: 15px; line-height: 22px; color: var(--corp); }

/* electric și hibrid: plăcile energiilor (ca pe /modele/), apoi tabelele de rânduri-link */
.el-cap__placi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.el-cap .placa__pret { color: var(--corp); }
.el-sec__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.el-sec__cap { grid-column: 1 / span 4; }
.el-sec__text { margin-top: 16px; max-width: 36ch; font-size: 17px; line-height: 26px; color: var(--text); }
.el-tabel { grid-column: 5 / span 8; min-width: 0; }
.el-sec--gri { background: var(--g2); }
.el-sec--gri .mini { background: var(--g3); }
.el-rand { display: grid; align-items: center; gap: 16px; min-height: 76px; padding: 12px 0; border-top: 1px solid var(--g3); text-decoration: none; color: var(--titlu); font-variant-numeric: tabular-nums; }
.el-tabel ul > li:last-child > .el-rand { border-bottom: 1px solid var(--g3); }
.el-rand--h { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.el-rand--p { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.el-rand--e { grid-template-columns: minmax(0, 1.9fr) minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); }
.el-rand--cap { min-height: 0; padding: 0 0 10px; border-top: 0; font-size: 13px; line-height: 18px; color: var(--g6); align-items: end; }
.el-tabel__grup { margin: 28px 0 10px; font: 600 13px/18px var(--font-text); color: var(--corp); }
.el-rand--cap + .el-tabel__grup { margin-top: 4px; }
.el-rand__model { display: flex; align-items: center; gap: 14px; min-width: 0; }
.el-rand .mini { margin: 0; flex: none; }
.el-rand__nume { font: 640 20px/26px var(--font-titlu); color: var(--titlu); min-width: 0; }
.el-rand__v { font-size: 15px; line-height: 22px; }
.el-rand__mic { display: block; font-size: 13px; line-height: 18px; color: var(--g6); }
.el-rand__dc--gol { color: var(--g6); }
.el-et { display: none; }
.el-rand__aut { display: flex; align-items: center; gap: 12px; min-width: 0; }
.el-rand__km { flex: none; min-width: 80px; font-size: 15px; line-height: 22px; font-weight: 600; }
.el-bara { position: relative; flex: 1; height: 10px; border-radius: 999px; background: var(--g3); }
.el-bara__plin { position: absolute; left: 0; top: 0; bottom: 0; width: var(--b); border-radius: 999px; background: linear-gradient(90deg, var(--nav) 0 var(--a), #9db0c2 var(--a) 100%); }
@media (hover: hover) {
  .el-rand:hover .el-rand__nume { color: var(--hover); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.el-rand:focus-visible { outline-offset: 2px; border-radius: 4px; }
.incarcare__grila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 40px; }
.incarcare__foto { aspect-ratio: 3 / 2; }
.incarcare__et { margin-top: 24px; font: 640 24px/32px var(--font-titlu); color: var(--titlu); }
.incarcare__col p { margin-top: 8px; max-width: 56ch; font-size: 17px; line-height: 26px; color: var(--text); }
.incarcare__link { margin-top: 40px; font-size: 15px; }

/* liste de prețuri și manuale: un rând pe model, miniatura din meniu, apoi fișierele ca pastile */
.doc__grup { margin: 56px 0 0; padding-bottom: 14px; scroll-margin-top: calc(var(--antet) + 24px); }
.doc__lista { border-top: 1px solid var(--g3); }
.doc__rand { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--g3); }
.doc__model { display: flex; align-items: center; gap: 20px; text-decoration: none; color: var(--titlu); min-width: 0; }
.doc__mini { width: 200px; flex: none; margin: 0; }
.doc__nume { font: 640 28px/34px var(--font-titlu); }
.doc__model:focus-visible { outline: none; }
.doc__model:focus-visible .doc__mini { outline: 2px solid var(--nav); outline-offset: 3px; }
@media (hover: hover) { .doc__model:hover .doc__nume { color: var(--hover); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .doc__model:hover .mini img { transform: scale(1.03); } }
.doc__fisiere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.doc__fis {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 60px; height: 100%;
  padding: 9px 22px; border-radius: 30px; background: var(--g1); color: var(--titlu); text-decoration: none;
}
.doc__fis-nume { font: 600 15px/21px var(--font-text); }
.doc__fis-det { grid-row: 2; font-size: 13px; line-height: 18px; color: var(--g6); }
.doc__ic { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--nav); }
@media (hover: hover) { .doc__fis:hover { background: var(--g3); } .doc__fis:hover .doc__ic { color: var(--hover); } }
.doc__portal { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 48px; }
.doc__portal-det { font-size: 15px; line-height: 22px; color: var(--corp); }

/* finanțare */
.fin-cap__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: center; }
.fin-cap__text { grid-column: 1 / span 5; }
.fin-cap__foto { grid-column: 7 / span 6; aspect-ratio: 4 / 3; }
.fin-cine { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.fin-cine li { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--g1); font: 600 15px/1 var(--font-text); color: var(--text); }
.fin-cap__act { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; margin-top: 32px; }
.fin-leasing__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-top: 56px; border-top: 1px solid var(--g3); }
.fin-leasing__in .h2 { grid-column: 1 / span 5; }
.fin-leasing__text { grid-column: 7 / span 6; }
.fin-leasing__text p { max-width: 60ch; font-size: 18px; line-height: 28px; color: var(--text); }
.fin-leasing__text p + p { margin-top: 14px; }
.finantator__banda { display: flex; justify-content: space-between; gap: 32px 64px; padding: 40px; border-radius: var(--raza); background: var(--g1); }
.finantator__st { max-width: 540px; }
.finantator__text { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--text); }
.finantator__linkuri { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 15px; line-height: 22px; }
.finantator__banda .finantator__date { flex: 0 1 600px; }
.fin-pasi__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; margin-top: 40px; }
.fin-pasi__lista li { padding-top: 20px; border-top: 1px solid var(--g3); }
.fin-pasi__nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--g1); font: 640 17px/1 var(--font-titlu); color: var(--titlu); }
.fin-pasi__titlu { margin-top: 16px; font: 640 22px/28px var(--font-titlu); color: var(--titlu); }
.fin-pasi__lista p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--corp); }
.fin-pasi__act { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; margin-top: 40px; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .gar-panou__cifra .cifra-mare__v { font-size: 80px; }
  .gar-detalii__foto { grid-column: 1 / -1; aspect-ratio: 16 / 7; min-height: 0; }
  .gar-detalii__col { grid-column: span 6; }
  .gar-detalii__col:nth-child(2) { border-left: 0; }
  .asist__text { grid-column: 8 / span 5; }
  .asist__nr a { font-size: 40px; }
  .el-sec__cap { grid-column: 1 / -1; }
  .el-tabel { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .pinfo { padding-top: 24px; }
  .pinfo__lead { font-size: 17px; line-height: 26px; }
  .cifra-mare__v { font-size: 44px; }
  .gar__panouri { grid-template-columns: 1fr; gap: 36px; margin-top: 28px; }
  .gar-panou__foto { aspect-ratio: 16 / 10; }
  .gar-panou__foto .foto, .gar-detalii__foto .foto, .asist__foto .foto, .incarcare__foto .foto, .fin-cap__foto .foto { object-position: var(--poz-tel, var(--poz, 50% 50%)); }
  .gar-panou__jos { padding-top: 16px; gap: 16px; }
  .gar-panou__et { font-size: 24px; line-height: 30px; }
  .gar-panou__cifra .cifra-mare__v { font-size: 64px; }
  .gar-panou__cifra .cifra-mare__u { font-size: 24px; }
  .gar-panou__cond { font-size: 15px; line-height: 22px; margin-top: 4px; }
  .gar__jos { flex-direction: column; align-items: flex-start; margin-top: 32px; padding-top: 20px; }
  .gar__acopera { font-size: 16px; line-height: 24px; }
  .gar-detalii__in { grid-template-columns: 1fr; gap: 0; padding: 8px; border-radius: 32px; }
  .gar-detalii__foto { grid-column: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 24px; }
  .gar-detalii__col { grid-column: auto; padding: 24px 12px 20px; }
  .gar-detalii__col + .gar-detalii__col { border-left: 0; border-top: 1px solid var(--g3); }
  .gar-cifre { margin-top: 20px; gap: 16px; }
  .asist__in { grid-template-columns: 1fr; }
  .asist__foto, .asist__text { grid-column: auto; }
  .asist__nr { margin-top: 16px; }
  .asist__nr a { font-size: 36px; }
  .asist__det { font-size: 16px; line-height: 24px; }
  .el-cap__placi { grid-template-columns: 1fr; gap: 36px; margin-top: 28px; }
  .el-sec__in { grid-template-columns: 1fr; gap: 24px; }
  .el-sec__cap, .el-tabel { grid-column: auto; }
  .el-sec__text { font-size: 16px; line-height: 24px; }
  .el-rand--cap { display: none; }
  .el-rand, .el-rand--h, .el-rand--p, .el-rand--e { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 16px 0; }
  .el-rand__model, .el-rand__aut { grid-column: 1 / -1; }
  .el-et { display: block; font-size: 12px; line-height: 16px; color: var(--g6); }
  .el-rand__mic { display: inline; margin-left: 4px; }
  .el-rand__dc--gol { display: none; }
  .el-tabel__grup { margin-top: 20px; }
  .incarcare__grila { grid-template-columns: 1fr; gap: 36px; margin-top: 28px; }
  .incarcare__foto { aspect-ratio: 16 / 10; }
  .incarcare__et { margin-top: 16px; font-size: 20px; line-height: 26px; }
  .incarcare__col p { font-size: 16px; line-height: 24px; }
  .doc__grup { margin-top: 40px; }
  .doc__rand { grid-template-columns: 1fr; padding: 16px 0 20px; }
  .doc__mini { width: 120px; }
  .doc__nume { font-size: 22px; line-height: 28px; }
  .doc__fisiere { grid-template-columns: 1fr; }
  .doc__fis { padding: 9px 18px; }
  .fin-cap__in { grid-template-columns: 1fr; gap: 28px; }
  .fin-cap__text, .fin-cap__foto { grid-column: auto; }
  .fin-cap__foto { order: -1; aspect-ratio: 16 / 10; }
  .fin-leasing__in { grid-template-columns: 1fr; gap: 16px; padding-top: 40px; }
  .fin-leasing__in .h2, .fin-leasing__text { grid-column: auto; }
  .fin-leasing__text p { font-size: 16px; line-height: 24px; }
  .finantator__banda { flex-direction: column; gap: 24px; padding: 24px 20px; }
  .finantator__banda .finantator__date { flex: none; }
  .fin-pasi__lista { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .fin-pasi__lista li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; }
  .fin-pasi__lista li:last-child { border-bottom: 1px solid var(--g3); }
  .fin-pasi__nr { grid-row: 1 / span 2; }
  .fin-pasi__titlu { margin-top: 6px; font-size: 19px; line-height: 24px; }
  .fin-pasi__lista p { margin-top: 4px; }
}
/* pe telefon cele trei energii sunt o bandă orizontală nativă (derulare cu degetul, oprire pe fiecare placă) */
@media (max-width: 639px) {
  .el-cap__placi {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin: 28px calc(-1 * var(--margine)) 0; padding: 0 var(--margine);
    scroll-padding: 0 var(--margine);
  }
  .el-cap__placi::-webkit-scrollbar { display: none; }
  .el-cap__placi > li { scroll-snap-align: start; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .el-cap__placi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .el-cap .placa__nume { font-size: 20px; line-height: 26px; }
  .doc__fisiere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---- acordul pentru cookie-uri (includes/acord-fereastra.php, assets/js/acord.js; 04.11.2026) ----
   Un card alb și rotund, ca pastila antetului: jos în stânga pe desktop, pe toată lățimea pe telefon (ca bara de jos).
   Nu blochează pagina. Fără roșu: „Refuz” și „Accept” sunt aceeași pastilă gri închis, „Aleg eu” / „Salvez” conturul
   albastru-gri al navigației. Peste antet (50) și bara de jos (40), sub foaia meniului (60). */
.acord {
  position: fixed; left: var(--margine); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55;
  width: min(452px, calc(100vw - 2 * var(--margine))); max-height: calc(100svh - var(--antet) - 32px);
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 76px; padding: 22px 22px 20px;
  background: var(--alb); color: var(--corp); border-radius: var(--raza);
  box-shadow: 0 1px 2px rgba(59, 57, 56, .08), 0 12px 40px rgba(59, 57, 56, .2);
  font-size: 15px; line-height: 22px;
}
.acord[hidden], .acord [hidden] { display: none !important; }
.acord__titlu { font: 640 20px/26px var(--font-titlu); color: var(--titlu); letter-spacing: -0.01em; }
.acord__titlu:focus { outline: none; }
.acord__titlu:focus-visible { outline: 2px solid var(--nav); outline-offset: 3px; border-radius: 4px; }
.acord__text { margin-top: 6px; }
.acord__text a { color: var(--nav); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
@media (hover: hover) { .acord__text a:hover { color: var(--hover); } }
.acord__categorii { margin-top: 14px; border-top: 1px solid var(--g3); }
.acord__categorii li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--g3); }
.acord__cat { display: block; font-weight: 600; color: var(--titlu); }
.acord__desc { font-size: 14px; line-height: 20px; }
.acord__mereu { flex: none; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--g6); }
/* comutatorul: contur gri și buton gri la stânga = oprit; plin gri închis și buton alb la dreapta = pornit */
.acord__comutator {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0;
  border: 1.5px solid var(--g6); border-radius: 999px; background: var(--alb); cursor: pointer;
}
.acord__comutator::before {
  content: ""; position: absolute; left: 3px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; border-radius: 50%;
  background: var(--g6); transition: transform 150ms var(--usor);
}
.acord__comutator:checked { background: var(--text); border-color: var(--text); }
.acord__comutator:checked::before { background: var(--alb); transform: translateX(18px); }
.acord__comutator:focus-visible { outline: 2px solid var(--nav); outline-offset: 3px; }
/* butoanele stau lipite jos în fereastră: pe ecranele scunde categoriile derulează pe sub ele, „Salvez” rămâne la vedere */
.acord__butoane {
  position: sticky; bottom: -20px; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 8px 0 -20px; padding: 8px 0 20px; background: var(--alb);
}
.acord__buton {
  height: 44px; padding: 0 8px; border-radius: 999px; border: 1.5px solid var(--text); background: var(--text); color: #fff;
  font: 600 15px/1 var(--font-text); white-space: nowrap; transition: none;
}
.acord__buton--alege { background: transparent; color: var(--nav); border-color: var(--nav); }
@media (hover: hover) {
  .acord__buton:hover { background: var(--titlu); border-color: var(--titlu); }
  .acord__buton--alege:hover { background: transparent; color: var(--hover); border-color: var(--hover); }
}
/* cât e deschisă: ce primește focus nu rămâne sub ea, iar subsolul se lungește cu înălțimea ei (acord.js: --acord-h) */
/* paginile de model: în stânga jos ar acoperi numele modelului și comutatorul motorizărilor din primul ecran. De la
   1440 px stă la mijloc, în golul dintre ele și preț (măsurat pe toate cele 10 modele: cel mai îngust, 507–937 px la
   1440, Berlingo Van în stânga și Jumpy în dreapta). Sub 1440 golul are cel mult 324 px: rămâne în stânga. */
@media (min-width: 1440px) {
  .model .acord { left: 50%; width: 400px; transform: translateX(-50%); }
}
html.acord-deschis { scroll-padding-bottom: calc(var(--acord-h, 0px) + 32px); }
.acord-deschis .subsol { padding-bottom: calc(56px + var(--acord-h, 0px) + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) {
  .acord {
    left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 24px));
    padding: 16px 16px 14px; border-radius: 20px; font-size: 14px; line-height: 20px; transition: transform 150ms var(--usor);
  }
  .acord__titlu { font-size: 18px; line-height: 24px; }
  .acord__text { margin-top: 4px; }
  .acord__categorii li { padding: 10px 0; }
  .acord__butoane { bottom: -14px; margin: 4px 0 -14px; padding: 8px 0 14px; }
  /* pe paginile de model, deasupra barei de jos (12 + 64 px), cu 8 px între ele: „Test drive” rămâne la vedere */
  .bara-jos-vizibila .acord { transform: translateY(-72px); max-height: calc(100svh - var(--antet) - 104px); }
  html.acord-deschis:has(.bara-jos.vizibila) { scroll-padding-bottom: calc(var(--acord-h, 0px) + 104px); }
}
@media (prefers-reduced-motion: reduce) {
  .acord, .acord__comutator::before { transition: none; }
}
/* „Setări cookie” din subsol: arată ca linkurile de lângă el; fără JavaScript nu face nimic, deci nu apare */
.subsol__buton { padding: 0; border: 0; background: none; font: inherit; color: var(--noapte-text); text-align: left; cursor: pointer; }
@media (hover: hover) { .subsol__buton:hover { text-decoration: underline; } }
.no-js .subsol__acord { display: none; }
@media print { .acord { display: none !important; } }