/*
 * Primul ecran de acasă: „Linia” (prototipul A, runda 3, 21.10.2026). Doar clase .e3…; nu schimbă stilurile site-ului.
 * Toată gama pe o linie, la scară reală între modele, într-un studio negru, în fața cuvântului PEUGEOT.
 * Unitatea scenei e --u = pixeli pe milimetru (geometria fiecărei mașini vine din PHP în milimetri: --x, --bw, --bh…).
 *   lățimea: 3008 ocupă --ua din lățimea ecranului; înălțimea: Boxer (--bhm mm) încape în scenă cu loc de texte.
 * Straturile: fundalul (cuvântul, conul de lumină pe litere și pe podea), umbra (mașinile în întuneric), lumina (aceleași
 * mașini în culoare, văzute doar prin con: masca e fixă pe strat), legendele (numele și prețul, nemascate).
 * Mod „film” (JS + mișcare permisă): secțiunea e mai înaltă, scena stă lipită, iar linia.js scrie doar transform și
 * opacity: pistele trec prin con, conul alunecă încet (--l0 → --l1 din lățime), legendele apar după distanța față de con.
 * Mod static (fără JS sau „reduce motion”): aceeași scenă, nemișcată, toate mașinile color, derulabilă orizontal cu mâna.
 */

.e3 {
  --pas: 26svh;                                                   /* derularea pentru o mașină */
  --sc: max(240px, 100svh - var(--antet));                       /* înălțimea scenei, sub antet: tot ecranul */
  /* Pe verticală (desktop, tabletă, peisaj), de sus în jos: --sus (de la antet la acoperișul celei mai înalte mașini:
     linia mică și aerul de sub ea), mașinile, podeaua, --leg, numele (--nf), prețul (--pm + --ph), --aer, butoanele (--bt),
     marginea de jos (--pb). Numele și distanța lui de podea cresc odată cu mașinile (clamp după --u), deci scara e
     rezolvată pentru toate cele patru combinații de capete ale celor două clamp-uri: oricare ar fi ecranul, legenda nu
     ajunge niciodată la butoane (rămâne cel puțin --aer între ele). Pe lățime, 3008 ocupă cel mult --ua din ecran. */
  --sus: 120px;
  --k1: 380; --a1: 28px; --b1: 64px;                              /* --leg = clamp(a1, k1·u, b1): de la podea la nume */
  --k2: 620; --a2: 40px; --b2: 120px;                             /* --nf = clamp(a2, k2·u, b2): numele */
  --pm: 14px; --ph: 22px;                                         /* prețul: marginea de deasupra și rândul */
  --aer: 32px; --bt: 52px; --pb: 48px;
  --uw: calc(100vw * var(--ua));
  --bj: calc(var(--sc) - var(--sus) - var(--pm) - var(--ph) - var(--aer) - var(--bt) - var(--pb));   /* mașina + legenda */
  --u: max(.005px, min(var(--uw),
    calc(var(--bj) / (var(--bhm) + var(--k1) + .95 * var(--k2))),
    calc((var(--bj) - var(--a1)) / (var(--bhm) + .95 * var(--k2))),
    calc((var(--bj) - .95 * var(--a2)) / (var(--bhm) + var(--k1))),
    calc((var(--bj) - var(--a1) - .95 * var(--a2)) / var(--bhm))));
  --leg: clamp(var(--a1), calc(var(--k1) * var(--u)), var(--b1));
  --nf: clamp(var(--a2), calc(var(--k2) * var(--u)), var(--b2));
  /* linia podelei: cel puțin la 60% din scenă, dar niciodată atât de jos încât legenda să ajungă la butoane */
  --fl: clamp(calc(var(--antet) + var(--sus) + var(--bhm) * var(--u)), calc(var(--antet) + var(--sc) * .6),
    calc(var(--antet) + var(--sc) - var(--pb) - var(--bt) - var(--aer) - var(--ph) - var(--pm) - var(--nf) * .95 - var(--leg)));
  --l0: .38; --l1: .62;                                           /* unde stă conul la început și la sfârșit (din lățime) */
  --banda: 1500;                                                  /* jumătatea conului (mm), apoi trecerea moale */
  --banda-moale: 2700;
  --c0p: var(--c0); --cnp: var(--cn);                             /* centrul primei și al ultimei mașini (mm), după ecran */
  position: relative; background: #000; color: #fff; height: calc(var(--antet) + var(--sc));
}
.e3__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.e3__scena { position: relative; height: calc(var(--antet) + var(--sc)); overflow: clip; background: #000; }

/* ---- Fundalul: cuvântul PEUGEOT, lumina pe litere și pe podea, linia podelei ----------------------------------- */
.e3__fundal { position: absolute; inset: 0; z-index: 0; }
.e3__cuv { position: absolute; left: var(--m); top: calc(var(--fl) - 2550 * var(--u)); height: calc(1500 * var(--u));
  width: calc(1500 * var(--u) * 11.7364); will-change: transform; }
.e3__cuv-svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1px; }
/* aceleași litere, aprinse doar în con: o fereastră cât conul (masca e a ei, mică: se compune ieftin), mutată de JS
   odată cu conul, cu literele din ea mutate în sens invers */
.e3__cuv-lumina { --rw: calc(3000 * var(--u)); position: absolute; top: 0; height: var(--fl); left: calc(50% - var(--rw)); width: calc(2 * var(--rw));
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse var(--rw) calc(2100 * var(--u)) at 50% calc(var(--fl) - 1900 * var(--u)), #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse var(--rw) calc(2100 * var(--u)) at 50% calc(var(--fl) - 1900 * var(--u)), #000 20%, transparent 100%); }
.e3__cuv-lumina .e3__cuv-svg { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .7); }
/* lumina pe podea: o pată largă și joasă sub con */
.e3__pata { position: absolute; left: calc(50% - 4200 * var(--u)); top: calc(var(--fl) - 650 * var(--u)); width: calc(8400 * var(--u));
  height: calc(1300 * var(--u)); background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, .045) 55%, rgba(255, 255, 255, 0));
  will-change: transform; }
/* linia podelei, aprinsă sub con (se mută odată cu pata) */
.e3__pata::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0)); }
.e3__orizont { position: absolute; left: 0; right: 0; top: var(--fl); height: 1px; background: rgba(255, 255, 255, .09); }

/* ---- Linia: umbra (în întuneric) și lumina (color, văzută doar prin con) --------------------------------------- */
.e3__umbra, .e3__lumina, .e3__legende { position: absolute; inset: 0; }
.e3__umbra { z-index: 1; }
.e3__lumina { z-index: 2;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - var(--banda-moale) * var(--u)), #000 calc(50% - var(--banda) * var(--u)),
    #000 calc(50% + var(--banda) * var(--u)), transparent calc(50% + var(--banda-moale) * var(--u)));
          mask-image: linear-gradient(90deg, transparent calc(50% - var(--banda-moale) * var(--u)), #000 calc(50% - var(--banda) * var(--u)),
    #000 calc(50% + var(--banda) * var(--u)), transparent calc(50% + var(--banda-moale) * var(--u))); }
.e3__legende { z-index: 3; pointer-events: none; display: none; }
.e3__pista { position: absolute; left: 50%; top: 0; height: var(--fl); width: calc(var(--lung) * var(--u));
  transform: translate3d(calc(var(--c0p) * var(--u) * -1), 0, 0); }
.e3__m, .e3__lg-loc { --xp: var(--x); }                  /* marginea stângă (mm), după ecran */
.e3__lista { margin: 0; padding: 0; list-style: none; }   /* rândurile n-au înălțime: mașinile sunt așezate absolut în pistă */
.e3__m { position: absolute; bottom: 0; left: calc(var(--xp) * var(--u)); width: calc(var(--bw) * var(--u)); height: calc(var(--bh) * var(--u));
  display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.e3__img, .e3__oglinda { position: absolute; left: calc(var(--il) * var(--u)); bottom: calc(var(--ib) * var(--u));
  width: calc(var(--iw) * var(--u)); max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }
/* reflexia: aceeași imagine, întoarsă în jurul liniei roților, care se stinge în podea */
.e3__oglinda { transform: scaleY(-1); transform-origin: 50% var(--oy);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .14) 18%, transparent 42%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .14) 18%, transparent 42%); }
/* în întuneric: fără culoare, cu luciul încă vizibil (tabla albă rămâne un gri închis, nu dispare) */
.e3__umbra .e3__img { filter: grayscale(1) brightness(.27) contrast(1.15); transition: filter .2s; }
.e3__umbra .e3__oglinda { filter: grayscale(1) brightness(.2); }
@media (hover: hover) { .e3__umbra .e3__m:hover .e3__img { filter: grayscale(1) brightness(.62) contrast(1.05); } }

/* legenda: numele mare și prețul de pornire, sub mașină (înălțimea ei intră în calculul scării: --leg, --nf, --pm, --ph) */
.e3__leg, .e3__lg { display: block; text-align: center; white-space: nowrap; }
.e3__leg { position: absolute; left: 50%; top: calc(100% + var(--leg)); transform: translateX(-50%); }
.e3__nume { display: block; font: 300 var(--nf)/.95 var(--f-titlu); font-stretch: 125%; letter-spacing: -.012em; }
.e3__pret { display: block; margin-top: var(--pm); font-size: 14.5px; line-height: 1.3; color: var(--gri-n); }
.e3__pret .cifre { font: 500 19px/1 var(--f-titlu); font-stretch: 112%; color: #fff; margin: 0 2px; }
.e3__m:focus-visible { outline: 2px solid var(--albastru); outline-offset: 6px; }
.e3__m:hover .e3__nume, .e3__m:focus-visible .e3__nume, .e3__lg-loc:hover .e3__nume, .e3__lg-loc.e3--atins .e3__nume {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }

/* stratul legendelor (doar în modul film): fiecare legendă stă sub mașina ei; JS îi dă opacitatea după distanța față de con */
.e3__lg-loc { position: absolute; top: calc(100% + var(--leg)); left: calc(var(--xp) * var(--u)); width: calc(var(--bw) * var(--u));
  display: flex; justify-content: center; color: inherit; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: auto;
  will-change: opacity, transform; -webkit-tap-highlight-color: transparent; }

/* ---- Textele, linia mică și acțiunile, deasupra scenei ------------------------------------------------------------ */
/* Sus: linia mică a gamei (cu eticheta grupului); jos: cele două butoane și „Toată gama”. H1-ul e doar pentru Google și
   cititoarele de ecran. Telefonul apare aici doar sub 1100 px (antetul comun îl ascunde acolo). */
.e3__ui { position: absolute; z-index: 4; inset: var(--antet) var(--m) 0; display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto; grid-template-areas: ". harta" ". ." "jos jos"; column-gap: 24px;
  padding: 32px 0 var(--pb); pointer-events: none; }
.e3__ui a, .e3__mini { pointer-events: auto; }
.e3__tel { grid-area: harta; display: none; justify-self: end; align-self: start; font: 500 15px/15px var(--f-titlu); font-stretch: 112%;
  letter-spacing: .02em; text-decoration: none; padding: 6px 0; white-space: nowrap; }
.e3__tel:hover, .e3__tel:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.e3__harta { grid-area: harta; --mw: 380px; width: var(--mw); }
.e3__nr { display: flex; justify-content: flex-end; font: 500 11.5px/1.3 var(--f-titlu); font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gri-n); white-space: nowrap; }
/* linia mică: aceeași geometrie (mm), altă unitate: toată gama încape în --mw */
.e3__mini { --um: calc(var(--mw) / var(--lung)); position: relative; height: calc(var(--bhm) * var(--um)); margin-top: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .22); cursor: pointer; }
.e3__mi { position: absolute; bottom: 0; left: calc(var(--x) * var(--um)); width: calc(var(--bw) * var(--um)); height: calc(var(--bh) * var(--um)); }
/* P3-1: ținta de atingere crește fără să schimbe desenul (≥ 24 px și la mașinile de 10 px); 6 px în sus, ca să nu ajungă
   la rândul etichetei și al telefonului, 10 px sub linie */
.e3__mi::before { content: ''; position: absolute; inset: -6px -3px -10px; }
.e3__mi img { display: block; width: 100%; height: 100%; max-width: none; filter: grayscale(1) brightness(.5); opacity: .75; transition: filter .15s, opacity .15s; }
.e3__mi.e3--acum img { filter: none; opacity: 1; }
.e3__mini:hover .e3__mi:hover img { filter: grayscale(1) brightness(1); opacity: 1; }
.e3__mini:hover .e3__mi.e3--acum:hover img { filter: none; }
.e3__jos { grid-area: jos; display: flex; align-items: center; gap: 12px; height: var(--bt); }
.e3__b { min-width: 0; width: 248px; }
/* „Toată gama”: pagina gamei (/modele/) */
.e3__sari { display: inline-block; margin-left: auto; color: #fff; text-decoration: none; font: 600 12px/1 var(--f-titlu); font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .07em; padding: 8px 0; white-space: nowrap; }
.e3__sari:hover, .e3__sari:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.e3__sari-s { display: inline-block; margin-left: 12px; transition: transform .2s ease-out; }
.e3__sari:hover .e3__sari-s, .e3__sari:focus-visible .e3__sari-s { transform: translateX(4px); }

/* ---- Mod film: scena lipită, linia mișcată de linia.js ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .e3 { height: calc(var(--antet) + var(--sc) + var(--pas) * (var(--n) - 1)); }
  html.js .e3__scena { position: sticky; top: 0; }
  html.js .e3__pista { left: 0; will-change: transform; transform: translate3d(calc(var(--l0) * 100vw - var(--c0p) * var(--u)), 0, 0); }
  /* stratul luminat e doar cât conul (masca lui se compune pe o suprafață mică); pista din el e mutată în sens invers */
  html.js .e3__lumina { left: calc(50% - var(--banda-moale) * var(--u)); right: auto; width: calc(2 * var(--banda-moale) * var(--u));
    will-change: transform; transform: translate3d(calc((var(--l0) - .5) * 100vw), 0, 0); }
  html.js .e3__lumina .e3__pista { transform: translate3d(calc((var(--banda-moale) - var(--c0p)) * var(--u)), 0, 0); }
  html.js .e3__cuv-lumina { transform: translate3d(calc((var(--l0) - .5) * 100vw), 0, 0); }
  html.js .e3__cuv-lumina .e3__cuv { transform: translate3d(calc(var(--rw) - var(--l0) * 100vw), 0, 0); }
  html.js .e3__legende { display: block; }
  html.js .e3__leg { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.js .e3__lg-loc[data-i="0"] { opacity: 1; visibility: visible; }   /* primul cadru, înainte de JS */
}

/* ---- Mod static: linia stă, se derulează orizontal cu mâna; toate mașinile color, fiecare cu legenda ----------- */
@media (prefers-reduced-motion: reduce) {
  .e3 .e3__umbra, .e3 .e3__pata, .e3 .e3__cuv-lumina { display: none; }
  .e3 .e3__lumina { -webkit-mask-image: none; mask-image: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; }
  .e3 .e3__lumina .e3__pista { position: relative; left: 0; transform: none; width: calc(100vw + (var(--cnp) - var(--c0p)) * var(--u)); }
  .e3 .e3__lumina .e3__m { left: calc(50vw + (var(--xp) - var(--c0p)) * var(--u)); scroll-snap-align: center; }
  .e3 .e3__cuv { will-change: auto; }
  .e3 .e3__mini { cursor: default; }
  .e3 .e3__mi img { transition: none; }
  .e3 .e3__nume { font-size: min(var(--nf), clamp(30px, calc(380 * var(--u)), 64px)); }   /* cel mult cât rezervă --nf (peisaj: 26 px) */
}
html.no-js .e3 .e3__umbra, html.no-js .e3 .e3__pata, html.no-js .e3 .e3__cuv-lumina { display: none; }
html.no-js .e3 .e3__lumina { -webkit-mask-image: none; mask-image: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
html.no-js .e3 .e3__lumina .e3__pista { position: relative; left: 0; transform: none; width: calc(100vw + (var(--cnp) - var(--c0p)) * var(--u)); }
html.no-js .e3 .e3__lumina .e3__m { left: calc(50vw + (var(--xp) - var(--c0p)) * var(--u)); scroll-snap-align: center; }
html.no-js .e3 .e3__mi img { filter: none; opacity: 1; }
html.no-js .e3 .e3__nume { font-size: min(var(--nf), clamp(30px, calc(380 * var(--u)), 64px)); }
.e3__lumina::-webkit-scrollbar { display: none; }

/* ---- Tabletă și telefon ----------------------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .e3 { --l0: .44; --l1: .56; }
  .e3__tel { display: block; }
}
/* tabletă: telefonul și, sub el, linia mică, sus în dreapta */
@media (min-width: 900px) and (max-width: 1099px) {
  .e3 { --sus: 140px; }
  .e3__ui { grid-template-rows: auto auto 1fr auto; grid-template-areas: ". tel" ". harta" ". ." "jos jos"; }
  .e3__tel { grid-area: tel; }
  .e3__harta { grid-area: harta; --mw: 320px; justify-self: end; margin: 6px 0 0; }
}
/* desktop scund (1280 × 720, 1366 × 768): legenda mai mică față de mașini */
@media (min-width: 900px) and (max-height: 820px) {
  .e3 { --k1: 300; --a1: 22px; --b1: 48px; --k2: 540; --a2: 36px; --b2: 96px; --pm: 10px; --pb: 44px; }
}
/* ---- Telefon (sub 900 px) -----------------------------------------------------------------------------------------
   În picioare: antetul, rândul de sus (eticheta grupului și telefonul), linia mică a gamei, cuvântul PEUGEOT, mașina,
   numele și prețul, butoanele, „Toată gama”. Cu mișcare, camera urmărește mașina din lumină (linia.js, --zoom): ea
   umple --fz0…--fz1 din lățime, iar toată linia se mărește sau se micșorează odată (scara reală rămâne între mașinile
   din cadru); pista e așezată la scara cea mai mare (208), JS doar o micșorează. Fără mișcare: o singură scară, linia
   derulabilă cu degetul. În peisaj: compoziția desktopului, strânsă pe înălțime. */
@media (max-width: 899px) {
  .e3 { --l0: .5; --l1: .5; --c0p: var(--c0t); --cnp: var(--cnt); --banda: 1750; --banda-moale: 2350; }
  .e3__m, .e3__lg-loc { --xp: var(--xt); }
  .e3__pret .cifre { font-size: 17px; }
  .e3__sari { font-size: 11px; padding: 6px 0; }
  .e3__b { width: auto; min-width: 0; padding: 0 14px; gap: 10px; }
}
.e3__plafon { position: absolute; left: 0; top: var(--plafon, 0px); width: 0; height: 0; }
/* lumina de sus (doar pe telefon în picioare): un con larg și foarte slab, din linia mică până pe podea, cât mașina */
.e3__raza { display: none; }

@media (max-width: 899px) and (orientation: portrait) {
  /* Pe verticală, de sus în jos: rândul de sus și linia mică (--mh, de la --tt), un gol, cuvântul și mașina (--hus,
     deasupra podelei), numele și prețul (--hjos), un gol (--gj, cel puțin 32 px), butoanele și „Toată gama” (--jos).
     Aerul se împarte în trei (--g: 0,3 deasupra rândului de sus, 1,25 deasupra mașinii, 1,45 sub legendă). Podeaua se calculează de jos
     în sus (butoanele, golul, legenda), iar mașina se micșorează dacă nu încape până la linia mică: legenda nu ajunge
     niciodată la butoane, la orice înălțime. */
  .e3 {
    --pas: 20svh;                                                   /* 11 mașini în ~2 ecrane de derulare */
    --fz0: .85; --fz1: .89;                                         /* cât din lățime umple mașina din lumină (208 … Boxer) */
    --ch: clamp(50px, min(20vw, 9.5svh), 86px);                     /* înălțimea cuvântului: ~3 litere pe ecran */
    --nf: clamp(36px, 13.5vw, 58px);                                /* numele modelului */
    --leg: 24px; --pm: 8px;
    --tt: calc(var(--antet) + 16px);                                /* rândul de sus */
    --mh: calc(27px + 8px + var(--bhm) * (100vw - 2 * var(--m)) / var(--lung));   /* rândul de sus + linia mică */
    --hus: calc(100vw * var(--fz0) * var(--bhmin) / var(--bwmin) + var(--ch) * .62);
    --hjos: calc(var(--leg) + var(--nf) * .95 + var(--pm) + var(--ph));
    --jos: calc(52px + 8px + 23px + 14px + env(safe-area-inset-bottom));   /* butoanele, „Toată gama”, marginea */
    --g: max(0px, calc((var(--antet) + var(--sc) - var(--jos) - var(--tt) - var(--mh) - var(--hus) - var(--hjos)) / 3));
    --gj: max(32px, calc(var(--g) * 1.45));
    /* BUILD.md, etapa 4: prețul și butoanele urcă spre mașină. Golul legendă–butoane rămâne cel mult 40 px; ce prisosește
       (--rest) se împarte: jumătate coboară mașina și legenda, jumătate rămâne sub „Toată gama”. */
    --rest: max(0px, calc(var(--g) * 1.45 - 40px));
    --plafon: calc(var(--tt) + var(--g) * .3 + var(--mh) + 4px);    /* sub linia mică: de aici în jos stă mașina */
    --fl: calc(var(--antet) + var(--sc) - var(--jos) - var(--gj) + var(--rest) / 2 - var(--hjos));
    --u: min(calc(100vw * var(--uat)), calc((var(--fl) - var(--plafon)) / var(--bhm)));
    --cy: max(calc(var(--plafon) + 2px), calc(var(--fl) - var(--bhmin) * var(--u) - var(--ch) * .62));   /* acoperișul taie baza literelor */
  }
  .e3__cuv { top: var(--cy); height: var(--ch); width: calc(var(--ch) * 11.7364); }
  .e3__raza { display: block; position: absolute; left: 0; right: 0; top: calc(var(--plafon) - 40px); height: calc(var(--fl) - var(--plafon) + 40px);
    background: conic-gradient(from 180deg at 50% -18%, rgba(255, 255, 255, .06) 0deg, rgba(255, 255, 255, .028) 13deg, transparent 27deg,
      transparent 333deg, rgba(255, 255, 255, .028) 347deg, rgba(255, 255, 255, .06) 360deg);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%); mask-image: linear-gradient(to bottom, transparent, #000 55%); }
  .e3__cuv-lumina { --rw: 44vw;
    -webkit-mask-image: radial-gradient(ellipse var(--rw) calc(var(--ch) * 1.25) at 50% calc(var(--cy) + var(--ch) * .5), #000 25%, transparent 100%);
            mask-image: radial-gradient(ellipse var(--rw) calc(var(--ch) * 1.25) at 50% calc(var(--cy) + var(--ch) * .5), #000 25%, transparent 100%); }
  .e3__ui { padding: 16px 0 calc(14px + env(safe-area-inset-bottom) + var(--rest) / 2); grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto; grid-template-areas: "harta harta" ". ." "jos jos"; column-gap: 16px; }
  /* telefonul stă în rândul etichetei, la dreapta */
  .e3__tel { grid-area: harta; justify-self: end; align-self: start; margin-top: calc(var(--g) * .3); }
  .e3__harta { grid-area: harta; justify-self: stretch; width: auto; margin: calc(var(--g) * .3) 0 0; }
  .e3__nr { justify-content: flex-start; align-items: center; height: 27px; }
  .e3__mini { --um: calc((100vw - 2 * var(--m)) / var(--lung)); margin-top: 8px; }
  .e3__jos { flex-wrap: wrap; gap: 8px; height: auto; }
  .e3__b { flex: 1 1 auto; }
  .e3__sari { flex: 1 0 100%; order: 3; margin: 0; text-align: center; }
}
/* camera care urmărește mașina (doar cu mișcare și JS) */
@media (max-width: 899px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  html.js .e3 { --zoom: 1; --c0p: var(--c0z); --cnp: var(--cnz);
    --u: min(calc(100vw * var(--fz0) / var(--bwmin)), calc((var(--fl) - var(--plafon)) / var(--bhmin)));
    --banda: 1500; --banda-moale: 1790; }                         /* lumina: cât mașina din centru, vecinele în umbră */
  html.js .e3__m, html.js .e3__lg-loc { --xp: var(--xz); }
  html.js .e3__umbra .e3__pista, html.js .e3__lumina .e3__pista { transform-origin: 0 100%; }
}
/* Banda (doar ecrane tactile, cu mișcare): glisarea orizontală cu degetul e a liniei (Vlad, 22.10.2026: oamenii încearcă
   întâi stânga/dreapta). O derulare orizontală NATIVĂ, goală, peste mașini și sub butoane: gestul și inerția sunt ale
   browserului, linia.js doar citește scrollLeft. Pe iPhone, o glisare „de mână” (pointermove + scrollTo, cu touch-action:
   pan-y) era anulată de Safari (pointercancel, pagina pornea panoramarea ei și ne suprascria scrollTo-ul). overflow-y
   hidden: gestul vertical trece la pagină, nativ. .e3--liber: scena nu e lipită, banda nu se mișcă. */
.e3__banda { display: none; }
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  html.js .e3__banda { display: block; position: absolute; z-index: 3; left: 0; right: 0; top: var(--antet); bottom: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-tap-highlight-color: transparent; }
  html.js .e3--liber .e3__banda { overflow-x: hidden; }
}
.e3__banda-c { height: 100%; }
.e3__banda::-webkit-scrollbar { display: none; }
/* telefon scund (SE, 568–600 px): nume și cuvânt mai mici */
@media (max-width: 899px) and (orientation: portrait) and (max-height: 600px) {
  .e3 { --nf: clamp(34px, 12vw, 48px); --ch: clamp(46px, 16vw, 64px); }
}
@media (max-width: 899px) and (orientation: portrait) and (max-width: 374px) {
  .e3__b .sageata { display: none; }
  .e3__b { padding: 0 12px; justify-content: center; }
  .e3__tel { font-size: 14px; }
}

/* Peisaj (telefon culcat, sau orice fereastră scundă): compoziția desktopului, strânsă pe înălțime, cu aceeași rezolvare
   a scării, legenda mică și fixă. Sus: telefonul (sub 1100 px) și linia mică; jos: butoanele și „Toată gama”. */
@media (max-width: 899px) and (orientation: landscape), (orientation: landscape) and (max-height: 500px) {
  .e3 { --pas: max(22svh, 110px); --l0: .5; --l1: .5;
    --sus: 44px; --k1: 0; --a1: 10px; --b1: 10px; --k2: 0; --a2: 26px; --b2: 26px; --pm: 4px; --ph: 18px;
    --aer: 28px; --bt: 42px; --pb: calc(10px + env(safe-area-inset-bottom));
    --uw: calc(100vw * var(--ua) * 1.2);
    --plafon: calc(var(--antet) + var(--sus));
    --c0p: var(--c0); --cnp: var(--cn); --banda: 1500; --banda-moale: 2700; }
  .e3__m, .e3__lg-loc { --xp: var(--x); }
  .e3__pret { font-size: 12.5px; }
  .e3__pret .cifre { font-size: 15px; }
  .e3__ui { padding-top: 12px; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto;
    grid-template-areas: "tel harta" ". ." "jos jos"; }
  .e3__tel { grid-area: tel; font-size: 14px; padding: 0; align-self: center; }
  .e3__harta { grid-area: harta; --mw: 260px; justify-self: end; align-self: center; margin: 0; }
  .e3__nr { display: none; }
  .e3__mini { margin-top: 0; }
  .e3__jos { flex-wrap: nowrap; gap: 8px; }
  .e3__b { flex: 0 0 auto; width: auto; min-width: 0; height: var(--bt); padding: 0 14px; gap: 10px; }
}