/* ═══════════════════════════════════════════════════════════════════════════
   VITRINA AGERKRIS — panoul de plecări.

   Ideea vizuală: un orar. Nu un raft de afișe.
   Datele și prețurile sunt în Mono, aliniate în coloane; destinațiile în Sans. Ochiul citește
   coloana de date pe verticală, cum citește un panou din autogară — și asta e exact întrebarea
   clientului: „ce pleacă atunci".

   CULOARE
   Cele trei culori sunt MĂSURATE din logo (vezi blocul `:root`), nu alese din ochi. Fiecare are un
   rol, nu e o preferință: verdele poartă marca, turcoazul organizează, galbenul semnalează. Vin din
   CMS, iar nuanțele intermediare se derivă cu `color-mix`, ca o alegere greșită să nu poată produce
   text ilizibil. Fondul paginii rămâne alb: culoarea stă acolo unde e informație.

   FONT — UN SINGUR font pe tot site-ul: „Ashemore" (grotesc versatil). Titlurile și corpul folosesc
   aceeași familie, diferă doar greutatea — ceea ce dă un ton unitar, modern, de brand.
   Ashemore e comercial → servim un înlocuitor open-source (Archivo Variable) sub numele „Ashemore",
   local, variabil pe greutate. Vezi @font-face mai jos pentru cum se pune Ashemore-ul real.

   Latin-ext obligatoriu: fără el, ă/â/î/ș/ț cad pe fontul de sistem și un cuvânt românesc apare din
   două familii diferite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FONTUL SITE-ULUI: „Ashemore" (un singur font pentru tot site-ul) ──
   Ashemore e comercial, deci fișierele de mai jos sunt un ÎNLOCUITOR open-source (Archivo Variable —
   grotesc din aceeași familie de forme), servit LOCAL, cu diacritice românești (latin + latin-ext).
   Ca să pui Ashemore-ul REAL: înlocuiește DOAR cele două woff2 (ashemore-latin.woff2 + ashemore-ext
   .woff2) cu fișierele lui, fără să atingi nimic altceva. Font variabil pe greutate (100–900). */
@font-face { font-family: 'Ashemore'; src: url('/fonts/ashemore-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Ashemore'; src: url('/fonts/ashemore-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Font DECORATIV, DOAR pentru titlul erou de pe banner — script caligrafic rotund și elegant
   (Dancing Script Variable), servit local, cu diacritice (latin + latin-ext). Restul site-ului
   rămâne pe Ashemore. */
@font-face { font-family: 'TitluScript'; src: url('/fonts/titlu-script-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'TitluScript'; src: url('/fonts/titlu-script-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ─────────────────────────── tokeni ───────────────────────────
   CULORILE VIN DIN LOGO, măsurate din pixelii lui, nu alese din ochi:
     #245424  verde brad  — 23.831 px, textul „Agerkris Travel". Culoarea de bază.
     #3CB4CC  turcoaz     — 17.400 px, munții și sloganul. Al doilea plan.
     #FCB40C  galben      —  4.747 px, soarele. Accentul cald, folosit rar ca să rămână un accent.

   Verdele e închis (contrast 9,7:1 pe alb), deci merge și ca text, și ca fundal cu text alb.
   Turcoazul e deschis: ca fundal e bun, ca text pe alb pică sub AA — de aceea are o variantă
   proprie, întunecată, pentru text. Galbenul e doar fundal, niciodată text.

   Fondul paginii e ALB, nu gri: culoarea stă în rânduri și în capul de tabel, unde e informație. */

:root {
  --accent:    #245424;              /* verde brad, din logo — suprascris din CMS */
  --secundar:  #3CB4CC;              /* turcoaz, din logo */
  --atentie:   #FCB40C;              /* galben, din logo */

  --fond:      #FFFFFF;
  --fond-sus:  #FFFFFF;
  --fond-jos:  #F2F7F8;              /* turcoaz diluat, nu gri neutru */
  --fond-bara: #FFFFFF;              /* antetul ȘI subsolul — aceeași bandă, sus și jos */
  --text:      #12261A;              /* aproape negru, cu tentă de verde */
  --text-2:    #46605A;
  --text-3:    #566C69;              /* 5.6:1 pe alb · 5.2:1 pe --fond-jos · 4.9:1 pe coloana de dată */
  --linie:     #DCE6E7;
  --linie-tare:#B9CBCD;

  /* Turcoazul ca TEXT are nevoie de întunecare; ca fundal, nu. */
  --secundar-text: color-mix(in oklab, var(--secundar) 58%, #04222A);
  --secundar-slab: color-mix(in oklab, var(--secundar) 10%, #FFFFFF);
  --accent-text:   var(--accent);
  --accent-slab:   color-mix(in oklab, var(--accent) 8%, #FFFFFF);
  --pe-accent:     #FFFFFF;          /* text pe verde brad */
  --pe-bara:       #111A14;          /* text pe bara (antet/subsol) — negru sau alb, calculat din JS */
  --pe-atentie:    #3D2B00;          /* text pe galben */
  --caramida:      #A8371B;          /* pleacă imediat — cald, nu roșu de eroare */
  /* Cărămida se DESCHIDE pe tema închisă, deci textul de pe ea trebuie să se închidă.
     Alb pe cărămida deschisă dădea 2,57:1 — marcajul cel mai urgent din panou era cel mai greu
     de citit. Fundalul și textul lui se schimbă împreună, ca pereche. */
  --pe-caramida:   #FFFFFF;

  /* ── SCARA TIPOGRAFICĂ ──
     Declarată aici, nu împrăștiată prin fișier: o cerere de „mai mic" mută scara, nu douăzeci de
     valori care oricum ar rămâne unele mai mari decât altele.

     Prima variantă avea baza la 18px și greutăți de 700–800 peste tot. Ieșea lizibil, dar greoi:
     literă groasă, blocuri compacte, totul strigând deodată. Un aspect scump se obține invers —
     literă mai mică și mai fină, cu mai mult aer în jur. Ochiul citește la fel de ușor, dar pagina
     nu mai împinge.

     GREUTĂȚILE contează la fel de mult ca mărimea: 800 e pentru afișe, nu pentru un site de turism.
     Aici maximul e 700, pe un singur element per zonă, iar restul stă pe 400–500. */
  --f-xs:  12px;      /* etichete, note */
  --f-sm:  13.5px;    /* metadate: țări, durată */
  --f-md:  15.5px;    /* corpul textului */
  --f-lg:  17px;      /* titlul unui card */
  --f-xl:  20px;      /* prețul */
  --f-2xl: 26px;      /* titluri de secțiune */

  --r: 3px;
  --r-mare: 8px;
  /* Umbră aproape invizibilă: cardul se desprinde de fundal, nu plutește deasupra lui. */
  --umbra: 0 1px 1px rgb(18 38 26 / .03), 0 4px 14px -10px rgb(18 38 26 / .16);
  --lat: 1400px;
}

/* Tema închisă: fondul devine verdele brad împins spre negru — aceeași familie, nu un gri străin. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="deschis"]) {
    --fond:      #0C1A11;
    --fond-sus:  #12261A;
    --fond-jos:  #0A1F16;
    --text:      #E9F1EC;
    --text-2:    #A6BDB4;
    --text-3:    #93AAA6;
    --linie:     #22392C;
    --linie-tare:#33513F;
    --secundar-text: #6FD4E8;
    --secundar-slab: color-mix(in oklab, var(--secundar) 14%, #12261A);
    --accent-text:   #7FC98A;        /* verdele din logo e prea închis pe fond închis */
    --accent-slab:   color-mix(in oklab, var(--accent) 30%, #12261A);
    --caramida:      #F0836A;
    --pe-caramida:   #3A0F02;      /* 6.5:1 pe cărămida deschisă */
    --umbra: 0 1px 2px rgb(0 0 0 / .35), 0 8px 22px -10px rgb(0 0 0 / .6);
  }
}
:root[data-tema="inchis"] {
  --fond: #0C1A11; --fond-sus: #12261A; --fond-jos: #0A1F16;
  --text: #E9F1EC; --text-2: #A6BDB4; --text-3: #93AAA6;
  --linie: #22392C; --linie-tare: #33513F;
  --secundar-text: #6FD4E8;
  --secundar-slab: color-mix(in oklab, var(--secundar) 14%, #12261A);
  --accent-text: #7FC98A;
  --accent-slab: color-mix(in oklab, var(--accent) 30%, #12261A);
  --caramida: #F0836A; --pe-caramida: #3A0F02;
  --umbra: 0 1px 2px rgb(0 0 0 / .35), 0 8px 22px -10px rgb(0 0 0 / .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--text);
  /* Fonturile de emoji la coadă: titlurile din catalog conțin steaguri (🇷🇸 Serbia), iar Manrope nu
     le are. Fără ele, browserul cade pe un font fără glife de steag și afișează literele codului —
     „RS" în loc de steag. Cu ele, telefoanele randează steagul; Windows tot afișează codul, dar
     asta e o limitare a sistemului, nu a paginii. */
  font: 400 var(--f-md)/1.6 'Ashemore', system-ui, -apple-system, 'Segoe UI', sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
}
/* UN SINGUR font pe tot site-ul (Ashemore). Titlurile folosesc aceeași familie, doar cu greutate
   mai mare — nu o a doua familie. */
h1, h2, .titlu-serif { font-family: 'Ashemore', system-ui, sans-serif; font-weight: 700; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r); }

/* Clasa se numește tot `.mono` (e folosită în JS), dar nu mai schimbă familia — doar aliniază
   cifrele. Manrope are cifre tabulare, deci coloanele rămân drepte fără fontul monospațiat. */
.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -.005em; }
.invizibil {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.lat { max-width: var(--lat); margin: 0 auto; padding: 0 20px; }

/* ─────────────────────────── antet ─────────────────────────── */

.bandou {
  background: var(--accent); color: var(--pe-accent);
  font-size: 14px; font-weight: 600; text-align: center; padding: 9px 16px;
}
.bandou a { color: inherit; }

.antet {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--fond-bara) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.antet-in { display: flex; align-items: center; gap: 22px; height: 74px; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; min-width: 0; }
.marca img { height: 40px; width: auto; display: block; flex-shrink: 0; }
/* Pe fond închis, verdele închis din logo dispare. Se schiară puțin, nu se inversează —
   inversarea ar face turcoazul portocaliu și galbenul albastru. */
:root[data-tema="inchis"] .marca img { filter: brightness(1.32) saturate(1.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="deschis"]) .marca img { filter: brightness(1.32) saturate(1.12); }
}
/* Numele scris apare doar dacă logo-ul lipsește — altfel s-ar citi de două ori. */
.marca b { font-size: var(--f-xl); font-weight: 800; letter-spacing: -.025em; color: var(--accent-text); }
/* Sloganul nu se TAIE, dispare: cu logo + navigare + telefon + comutator de temă, la 1280px nu mai
   încape întreg, iar un „…din Botoșan" arată ca o pagină prost făcută. Sub 1250px iese de tot. */
.marca span { font-size: var(--f-sm); color: var(--secundar-text); font-style: italic; white-space: nowrap; }
@media (max-width: 1250px) { .marca span { display: none; } }
.antet nav { display: flex; gap: 4px; align-items: center; }
.antet nav a {
  text-decoration: none; font-size: var(--f-md); font-weight: 500; color: var(--text-2);
  padding: 8px 13px; border-radius: var(--r);
}
.antet nav a:hover { color: var(--text); background: var(--fond-jos); }
.antet nav a[aria-current] { color: var(--accent-text); }
/* Fără chenar: numărul stă lângă simbolul WhatsApp, care e deja destul de recognoscibil ca să se
   vadă că e o acțiune. O ramă în plus îl face să pară un buton de formular. */
.tel {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 500; font-size: var(--f-md); padding: 9px 6px;
  border: 0; border-radius: var(--r); color: var(--text);
}
.tel:hover { color: var(--accent-text); }
.btn-tema {
  background: none; border: 1px solid var(--linie); border-radius: var(--r);
  width: 36px; height: 36px; cursor: pointer; color: var(--text-2);
  display: grid; place-items: center; padding: 0; flex-shrink: 0;
}
.btn-tema:hover { color: var(--text); border-color: var(--linie-tare); }
@media (max-width: 760px) {
  .antet nav { display: none; }   /* sloganul iese deja la 1150px */
  .antet-in { height: 56px; gap: 12px; }
}

/* ─────────────────────────── deschiderea ───────────────────────────
   Fără poster. Un fapt numărat și o bară de căutare. Site-ul spune de la
   început câte plecări are — dacă are puține, se vede. Asta e intenționat. */

/* ── deschiderea, peste banner ──
   Prima variantă mânca ~380px până la primul rezultat, pe fundal gol. Acum aceeași înălțime poartă
   și imaginea — nu se pierde spațiu, se umple cel care oricum era acolo.

   BANNERUL rulează POZELE DIN CATALOG, nu un peisaj de stoc: arată exact marfa care se vinde mai
   jos. Nu e un GIF — un GIF de calitate ar fi câțiva megabytes și s-ar vedea granulat pe ecran mare.
   Sunt fotografiile, cu o mișcare lentă de apropiere și trecere în fondu, care dă aceeași senzație
   la a zecea parte din greutate.

   Textul stă peste un văl întunecat: fără el, un titlu alb peste o poză cu cer alb dispare. */
.deschidere {
  position: relative; isolation: isolate; overflow: hidden;
  /* Filtrul stă la BAZA bannerului: se vede întâi fotografia, apoi comanda. */
  padding: 104px 0 26px; border-bottom: 1px solid var(--linie);
  background: linear-gradient(180deg, color-mix(in oklab, var(--secundar) 8%, var(--fond)), var(--fond));
}

.banner { position: absolute; inset: 0; z-index: -2; background: var(--accent); }
.banner img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: banner-ciclu var(--ciclu, 32s) ease-in-out infinite;
}
/* Fiecare imagine intră după cea dinainte; decalajul se pune din JS, unde se știe câte sunt. */
@keyframes banner-ciclu {
  0%    { opacity: 0; transform: scale(1.04); }
  4%    { opacity: 1; }
  22%   { opacity: 1; }
  28%   { opacity: 0; }
  100%  { opacity: 0; transform: scale(1.12); }
}
/* Vălul: destul cât textul să se citească pe orice fotografie, nu atât cât să ascundă poza. */
/* Fără văl: nu mai e nimic de citit peste fotografie. Rămâne doar o umbrire foarte slabă jos,
   ca linia dintre banner și pagină să nu taie brusc imaginea. */
.banner::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgb(8 26 16 / .16), transparent 22%);
}
@media (prefers-reduced-motion: reduce) {
  .banner img { animation: none; opacity: 0; }
  .banner img:first-child { opacity: 1; }      /* o singură imagine, fixă */
}

/* Peste banner, totul devine deschis la culoare — inclusiv pe tema deschisă. */
/* Titlul vizibil a fost scos din banner (a rămas doar cel pentru cititoare de ecran), iar
   scurtăturile la fel — nu mai există text care să aibă nevoie de contrast peste fotografie. */

/* ── filtrul de căutare din banner ──
   Aceleași câmpuri ca ecranul de vânzare din back-office: unde, când, cât. E forma pe care o are
   orice site de turism serios, și e forma în care oamenii chiar caută o excursie — nu tastând un
   cuvânt, ci spunând „Grecia, în august, sub 3000 de lei".

   Stă pe o placă albă peste banner: pe o fotografie, câmpurile fără fundal propriu devin ilizibile
   de îndată ce în spatele lor apare cerul. */
.filtru-turism {
  /* Fără placă: câmpurile stau direct pe fotografie, fiecare cu umbra lui. Placa albă era un
     dreptunghi opac peste banner — acum bannerul se vede întreg, iar contrastul îl dă umbra. */
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; padding: 0; border-radius: 0;
  display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end;
  justify-content: center;          /* adunate spre mijloc */
  max-width: 900px; margin: 0 auto;
}
.filtru-turism .camp { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 auto; }
/* `display:flex` de mai sus bate atributul `hidden` — deci un câmp ascuns (ex. „Cu ce" fără date)
   trebuie ascuns explicit, altfel tot apare. */
.filtru-turism .camp[hidden] { display: none; }
.filtru-turism label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .6); padding-left: 2px;
}
/* Fiecare casetă e o insulă albă cu umbră proprie — se citește pe orice fotografie. */
.filtru-turism select, .filtru-turism input {
  font: inherit; font-size: 14px; padding: 8px 11px; width: 100%;
  border: 0; border-radius: 7px; background: var(--fond-card, #fff); color: var(--text);
  box-shadow: 0 3px 12px -3px rgb(0 0 0 / .38), 0 1px 3px rgb(0 0 0 / .2);
}
.filtru-turism select { min-width: 150px; }
.filtru-turism input[type=date] { min-width: 132px; }
.filtru-turism input[type=number] { min-width: 108px; }
.filtru-turism select:focus, .filtru-turism input:focus {
  outline: none; box-shadow: 0 0 0 3px var(--secundar), 0 3px 12px -3px rgb(0 0 0 / .38);
}
.filtru-turism .btn-cauta {
  background: var(--accent); color: var(--pe-accent); border: 0; border-radius: 7px;
  padding: 9px 20px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  height: 35px; box-shadow: 0 3px 12px -3px rgb(0 0 0 / .42);
}
.filtru-turism .btn-cauta:hover { filter: brightness(1.22); }
/* Pe telefon: două pe rând, butonul pe toată lățimea. Câmpurile nu se pot îngusta la nesfârșit —
   un select de 90px nu mai arată ce e selectat în el. */
@media (max-width: 700px) {
  .filtru-turism { gap: 8px; }
  .filtru-turism .camp { flex: 1 1 calc(50% - 4px); }
  .filtru-turism select, .filtru-turism input { min-width: 0; font-size: 15px; padding: 9px 10px; }
  .filtru-turism .btn-cauta { flex: 1 1 100%; height: 40px; font-size: 15px; }
}

.cauta {
  display: flex; gap: 0; align-items: stretch; max-width: 720px;
  border: 2px solid var(--linie-tare); border-radius: var(--r-mare);
  background: #FFFFFF; overflow: hidden; box-shadow: var(--umbra);
}
:root[data-tema="inchis"] .cauta { background: var(--fond-sus); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="deschis"]) .cauta { background: var(--fond-sus); } }
.cauta:focus-within { border-color: var(--secundar); box-shadow: 0 0 0 4px var(--secundar-slab); }
.cauta input {
  flex: 1; border: 0; background: none; padding: 15px 20px; font-size: var(--f-md); min-width: 0;
}
.cauta input::placeholder { color: var(--text-3); }
.cauta button {
  border: 0; background: var(--accent); color: var(--pe-accent);
  padding: 0 26px; font-weight: 700; font-size: var(--f-md); cursor: pointer; white-space: nowrap;
}
.cauta button:hover { filter: brightness(1.22); }

/* Căutarea liberă din antet: discretă, pentru cine știe deja ce vrea și tastează un cuvânt.
   Căutarea „pe câmpuri" stă în banner — sunt două nevoi diferite, nu două copii ale aceluiași lucru. */
.cauta--antet {
  max-width: 250px; border-width: 1px; border-color: var(--linie); border-radius: 100px;
  box-shadow: none; background: var(--fond-jos);
}
.cauta--antet:focus-within { background: var(--fond-sus); border-color: var(--secundar); box-shadow: 0 0 0 3px var(--secundar-slab); }
.cauta--antet input { padding: 9px 8px 9px 14px; font-size: var(--f-sm); }
.cauta--antet .lupa {
  border: 0; background: none; color: var(--text-3); padding: 0 14px 0 4px; cursor: pointer;
  display: grid; place-items: center;
}
.cauta--antet .lupa:hover { color: var(--accent-text); }
@media (max-width: 1000px) { .cauta--antet { display: none; } }

.scurtaturi { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.scurtaturi a {
  text-decoration: none; font-size: var(--f-sm); font-weight: 500; color: var(--secundar-text);
  border: 1px solid color-mix(in oklab, var(--secundar) 30%, transparent);
  border-radius: 100px; padding: 7px 15px; background: var(--secundar-slab);
}
/* La hover devine VERDE, nu turcoaz: text alb pe turcoazul din logo dă 2,4:1 — ilizibil.
   Verdele e și consistent cu starea „apăsat" a cipurilor din pagina de căutare, deci hover-ul
   previzualizează exact ce se întâmplă la clic. */
.scurtaturi a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.scurtaturi a:hover .n { color: rgb(255 255 255 / .8); }
.scurtaturi a .n { color: var(--text-3); font-weight: 400; }

/* ─────────────────────────── panoul ───────────────────────────
   Grila e definită O SINGURĂ dată, pe container, și moștenită de rânduri prin `display: contents`.
   Alternativa — lățimi pe fiecare celulă — pierde alinierea între rânduri la primul titlu lung,
   iar un panou de plecări cu coloane care nu se aliniază nu mai e un panou. */

.panou-cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 34px 0 14px;
}
.panou-cap h2 { margin: 0; font-family: 'Ashemore', system-ui, sans-serif; font-size: var(--f-2xl); font-weight: 700; }
.panou-cap p { margin: 3px 0 0; color: var(--text-2); font-size: 14.5px; }
.panou-cap .numar { font-size: 13px; color: var(--text-3); }

/* ─────────────────────── lista de plecări ───────────────────────
   Prima variantă era un TABEL: cap colorat cu majuscule, șase coloane rigide, rânduri alternate.
   Corect ca date, dar arăta ca un ecran de administrare — pentru că asta e un tabel.

   Acum fiecare plecare e un card orizontal: poza mare în stânga, data peste ea, titlul cât să se
   citească de la distanță, prețul în dreapta. Ordinea rămâne cronologică — ideea că site-ul e
   organizat după CÂND pleci nu se schimbă, doar forma. */

/* ─────────────── CARDURI VERTICALE, după modelul eturia.ro ───────────────
   Poza sus (16:10) cu badge-ul de urgență suprapus jos-stânga; sub ea titlul, eticheta de temă, o
   linie fină, „Începând de la:" + prețul mare, apoi o bară de accent și butonul „Vezi plecarea" pe
   toată lățimea. Patru pe rând pe desktop, cum le aranjează și eturia.

   De ce am renunțat la cardul orizontal: pe un site de vacanțe, POZA vinde. Cardul orizontal îi
   dădea 176px lățime; cel vertical îi dă toată lățimea coloanei, iar destinația se vede, nu se
   ghicește. Data se mută din colț pe poză, ca un timbru. */
.panou { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.panou-antet { display: none; }
/* Cu coloana de testimoniale alături, lista se îngustează — atunci trei carduri, nu patru strânse. */
.pagina-cu-lateral .panou { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rand {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden;
  background: var(--fond-sus); border: 1px solid var(--linie);
  border-radius: var(--r-mare);
  /* Dropshadow ALB — cardurile plutesc peste banner și „ies" din fundal, în slider și în listă.
     Umbra întunecată subtilă rămâne dedesubt, ca să nu pară lipite de ecran. */
  box-shadow: 0 8px 26px -4px rgb(255 255 255 / .45), 0 3px 10px rgb(0 0 0 / .12);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.rand:hover, .rand:focus-visible {
  border-color: var(--secundar);
  box-shadow: 0 16px 42px -6px rgb(255 255 255 / .62), 0 6px 16px rgb(0 0 0 / .18);
  transform: translateY(-3px); outline: none;
}
@media (prefers-reduced-motion: reduce) { .rand { transition: none; } .rand:hover { transform: none; } }

/* ── poza: mare, sus, cu data ca timbru și marcajul pe ea ── */
.c-poza { position: relative; aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; }
.c-poza .p { position: absolute; inset: 0; display: block; background: var(--fond-jos); }
.c-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-poza .gol { width: 100%; height: 100%; display: block; background: linear-gradient(140deg, var(--secundar), var(--accent)); }
.c-poza .gol svg { width: 100%; height: 100%; display: block; }

.c-data {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  background: var(--fond-sus); border-radius: 8px; padding: 6px 11px 5px;
  box-shadow: 0 3px 10px rgb(0 0 0 / .28); min-width: 52px;
}
.c-data .zi { font-family: 'Ashemore', system-ui, sans-serif; font-size: 21px; font-weight: 700; line-height: 1; color: var(--accent-text); }
.c-data .luna { font-size: 10.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.c-data .zs { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

/* Badge-ul de urgență jos-stânga pe poză, ca „Last Minute" la eturia. */
.marcaj {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; box-shadow: 0 2px 8px rgb(0 0 0 / .25);
}
.marcaj.imediat { background: var(--caramida); color: var(--pe-caramida); }
.marcaj.curand  { background: var(--atentie); color: var(--pe-atentie); }

/* ── corpul cardului ── */
.c-titlu { padding: 15px 16px 0; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.c-titlu .t {
  font-family: 'Ashemore', system-ui, sans-serif; font-weight: 700; font-size: var(--f-lg);
  line-height: 1.28; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Eticheta de tip pe POZĂ (colț dreapta-sus), ca „Last Minute"/„Circuit" la eturia — pastilă sticlă
   închisă, ca să se citească pe orice fotografie fără să fure privirea de la scenă. Astfel dispare
   un rând întreg din corpul cardului. */
.c-eticheta {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: rgb(15 30 24 / .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 5px 11px; border-radius: 100px; box-shadow: 0 2px 8px rgb(0 0 0 / .22);
}
/* Butonul de distribuire, colț dreapta-jos pe poză — singurul colț liber (data e sus-stânga,
   eticheta sus-dreapta, marcajul de urgență jos-stânga). E un `<span>`, nu `<a>`/`<button>`:
   cardul întreg e deja `<a>`, iar HTML nu permite conținut interactiv imbricat în conținut
   interactiv — `tabindex`+`role="button"` țin accesibilitatea fără markup invalid. */
.c-share {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 100px;
  color: #fff; background: rgb(15 30 24 / .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 2px 8px rgb(0 0 0 / .22); cursor: pointer;
}
.c-share svg { width: 15px; height: 15px; }
.c-share.copiat { background: var(--accent, #1c6d52); }

/* Destinația, durata și plecarea — rândul discret de sub titlu. */
.c-titlu .detalii {
  margin-top: 9px; font-size: var(--f-sm); color: var(--text-2);
  display: flex; flex-direction: column; gap: 3px;
}
.c-titlu .detalii b { font-weight: 700; color: var(--text); }

/* BANDA DE PREȚ — alb pe navy, jos, pe toată lățimea. Ține locul vechiului buton „Vezi plecarea"
   (cardul întreg e link), deci prețul e și acțiunea — fără un rând irosit. */
.c-pret {
  margin-top: auto; padding: 11px 16px;
  background: var(--accent); color: var(--pe-accent);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.c-pret .p { font-family: 'Ashemore', system-ui, sans-serif; font-size: 21px; font-weight: 700; color: var(--pe-accent); line-height: 1.15; }
.c-pret .p .u { font-family: 'Ashemore', sans-serif; font-size: 12.5px; font-weight: 400; color: rgb(255 255 255 / .82); margin-left: 3px; }
.c-pret .eur { font-size: 12.5px; color: rgb(255 255 255 / .8); margin-left: auto; }
.rand:hover .c-pret { filter: brightness(1.1); }

/* Sub 1100px: câte poate încăpea cu cardul vertical, minim 240px lățime — sub atât poza devine o
   dungă și prețul se înghesuie. Pe telefon, unul singur pe rând, mare, cum se uită cineva la o poză. */
@media (max-width: 1100px) {
  .panou, .pagina-cu-lateral .panou { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .panou, .pagina-cu-lateral .panou { grid-template-columns: 1fr; gap: 16px; }
  .c-poza { aspect-ratio: 16 / 9; }          /* pe telefon poza poate fi mai lată, e primul lucru care vinde */
  .c-titlu .t { font-size: 19px; }
  .c-pret .p { font-size: 24px; }
}

/* ─────────────────────────── filtre progresive ───────────────────────────
   Se afișează doar dimensiunile care AU opțiuni în rezultatul curent.
   O opțiune cu zero rezultate nu apare deloc: „Africa" într-un catalog fără Africa e o promisiune
   pe care nu o putem ține. */

/* ─────────────────────────── filtre ───────────────────────────
   Prima variantă arunca pe ecran toate opțiunile din toate dimensiunile: cinci rânduri, ~40 de
   cipuri, înainte să vezi un singur rezultat. Corect ca informație, obositor ca ecran — arăta ca
   un formular de administrare, nu ca un site.

   Acum sunt patru butoane. Fiecare deschide lista lui doar când e nevoie, iar ce ai ales rămâne
   scris pe buton. Ecranul arată patru controale în loc de patruzeci; informația e aceeași. */

.filtre { display: flex; flex-direction: column; gap: 14px; padding: 24px 0 6px; }
.bara-filtre { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.f-buton {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: var(--f-md); font-weight: 500; padding: 10px 16px; border-radius: var(--r-mare);
  border: 1px solid var(--linie-tare); background: var(--fond-sus); color: var(--text);
  white-space: nowrap;
}
.f-buton:hover { border-color: var(--secundar); }
.f-buton .et { color: var(--text-3); font-weight: 600; }
.f-buton .val { color: var(--accent-text); font-weight: 700; }
.f-buton .sageata { width: 11px; height: 11px; color: var(--text-3); transition: transform .18s; }
.f-buton[aria-expanded="true"] { border-color: var(--accent); }
.f-buton[aria-expanded="true"] .sageata { transform: rotate(180deg); }
.f-buton.ales { border-color: var(--accent); background: var(--accent-slab); }
@media (prefers-reduced-motion: reduce) { .f-buton .sageata { transition: none; } }

.f-camp { position: relative; }
.f-panou {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  min-width: 280px; max-width: min(440px, 92vw); max-height: 60vh; overflow-y: auto;
  background: var(--fond-sus); border: 1.5px solid var(--linie-tare);
  border-radius: var(--r-mare); box-shadow: 0 12px 34px -10px rgb(18 38 26 / .28);
  padding: 12px; display: flex; flex-wrap: wrap; gap: 9px;
}
.f-panou[hidden] { display: none; }

.cip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: var(--f-sm); font-weight: 500; padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--linie); background: var(--fond-sus); color: var(--text-2);
  white-space: nowrap;
}
.cip:hover { border-color: var(--secundar); color: var(--secundar-text); background: var(--secundar-slab); }
.cip .n { font-weight: 500; color: var(--text-3); font-size: var(--f-sm); }
.cip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--pe-accent); }
.cip[aria-pressed="true"]:hover { background: var(--accent); color: var(--pe-accent); }
.cip[aria-pressed="true"] .n { color: color-mix(in oklab, var(--pe-accent) 70%, transparent); }

/* Ce ai ales, sub bară — ca să nu trebuiască să deschizi panourile ca să-ți amintești. */
.active { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.active .et { font-size: var(--f-sm); font-weight: 600; color: var(--text-3); }
.active .sterge {
  background: none; border: 0; cursor: pointer; text-decoration: underline;
  color: var(--text-3); font-size: var(--f-sm); padding: 6px;
}
.active .sterge:hover { color: var(--caramida); }

.interval { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.interval input {
  border: 1.5px solid var(--linie); border-radius: var(--r); background: var(--fond-sus);
  padding: 10px 14px; font-size: var(--f-md); width: 130px;
}
.interval label { font-size: var(--f-sm); color: var(--text-3); }
.interval .nota { font-size: var(--f-sm); color: var(--text-3); width: 100%; }

/* ─────────────────────────── stări ─────────────────────────── */

/* ═══════════ „Anunță-mă când apare" ═══════════
   Apare exact acolo unde omul ar pleca de pe site: pe rezultatul gol. În loc de „ne pare rău, nimic
   găsit", i se cere ce voia — ceea ce e util pentru el (îl sunăm) și pentru agenție (aflăm ce lipsește
   din catalog). Fără cont, fără parolă, un singur câmp obligatoriu. */
.alerta-cutie {
  max-width: 560px; margin: 24px auto 0; text-align: left;
  background: var(--fond-sus); border: 1.5px solid var(--linie-tare);
  border-radius: var(--r-mare); padding: 22px 24px; box-shadow: var(--umbra);
}
.alerta-cutie h4 { margin: 0 0 6px; font-size: var(--f-lg); font-weight: 700; color: var(--text); }
.alerta-cutie p { margin: 0 0 16px; font-size: var(--f-sm); color: var(--text-2); line-height: 1.5; }
.alerta-cutie .ce-caut {
  display: inline-block; background: var(--secundar-slab); color: var(--secundar-text);
  border-radius: 100px; padding: 4px 13px; font-weight: 600; font-size: var(--f-sm); margin-bottom: 14px;
}
.alerta-rand { display: flex; gap: 10px; flex-wrap: wrap; }
.alerta-rand input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: var(--f-md);
  padding: 12px 15px; border: 1.5px solid var(--linie); border-radius: var(--r); background: var(--fond-sus);
}
.alerta-rand input:focus { outline: none; border-color: var(--secundar); box-shadow: 0 0 0 3px var(--secundar-slab); }
.alerta-cutie .marunt { font-size: 13px; color: var(--text-3); margin: 12px 0 0; }
.alerta-cutie .raspuns { font-size: var(--f-md); font-weight: 600; margin: 0; }
.alerta-cutie .raspuns.bun { color: var(--accent-text); }
.alerta-cutie .raspuns.rau { color: var(--caramida); }

.stare { padding: 56px 20px; text-align: center; color: var(--text-2); }
.stare h3 { margin: 0 0 8px; font-size: 19px; color: var(--text); font-weight: 600; }
.stare p { margin: 0 0 18px; font-size: 15px; }
.schelet { display: grid; gap: 1px; }
.schelet div {
  height: 62px; background: linear-gradient(90deg, var(--fond-jos) 25%, var(--linie) 50%, var(--fond-jos) 75%);
  background-size: 240% 100%; animation: puls 1.3s linear infinite;
}
@keyframes puls { to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) { .schelet div { animation: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  font-weight: 600; font-size: var(--f-md); padding: 10px 20px; text-decoration: none;
}
.btn--pr { background: var(--accent); color: var(--pe-accent); }
.btn--pr:hover { filter: brightness(1.07); }
.btn--sec { background: var(--fond-sus); border-color: var(--linie-tare); color: var(--text); }
.btn--sec:hover { border-color: var(--accent); color: var(--accent-text); }

/* ─────────────────────────── pagina ofertei ─────────────────────────── */

.of-sus { padding: 30px 0 0; }
.firimituri { font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.firimituri a { color: var(--text-2); }
.of-sus h1 {
  margin: 0 0 10px; font-size: clamp(26px, 4.4vw, 40px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.08; text-wrap: balance;
}
.of-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-2); font-size: 15px; }
.of-meta b { color: var(--text); font-weight: 600; }

.of-grila { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; padding: 28px 0 60px; align-items: start; }
@media (max-width: 940px) { .of-grila { grid-template-columns: 1fr; gap: 28px; } }

.of-poza {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  border-radius: var(--r-mare); background: var(--fond-jos); margin-bottom: 14px;
}
.of-poza[hidden] { display: none; }
.of-poza--gol { background: linear-gradient(140deg, var(--secundar), var(--accent)); overflow: hidden; }
.of-poza--gol svg { width: 100%; height: 100%; display: block; }

.of-miniaturi { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
.of-miniaturi button {
  width: 84px; height: 60px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--r); background: var(--fond-jos);
}
.of-miniaturi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-miniaturi button:hover { border-color: var(--linie-tare); }
.of-miniaturi button[aria-pressed="true"] { border-color: var(--accent); }
.sectiune { margin-bottom: 30px; }
.sectiune h2 {
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linie);
}
.sectiune p { margin: 0 0 12px; max-width: 68ch; }
.lista-b { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.lista-b li { padding-left: 22px; position: relative; }
.lista-b li::before {
  content: ''; position: absolute; left: 6px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.lista-b.nu li::before { background: var(--text-3); }

.zi-prog { border-left: 2px solid var(--linie); padding: 0 0 20px 18px; position: relative; }
.zi-prog::before {
  content: ''; position: absolute; left: -5px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.zi-prog .nr {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text);
}
.zi-prog h3 { margin: 3px 0 6px; font-size: 16.5px; font-weight: 600; }
/* `pre-line`: păstrează liniile noi din text (fiecare emoji își începe rândul), dar tot împachetează
   rândurile lungi. Fără asta, `\n`-urile din date se colapsează în spații și programul reformatat
   pe zile ar arăta ca un bloc continuu. */
.zi-prog p { margin: 0; color: var(--text-2); font-size: 15px; white-space: pre-line; }

.caseta {
  position: sticky; top: 78px;
  border: 1px solid var(--linie-tare); border-radius: var(--r-mare);
  background: var(--fond-sus); overflow: hidden;
}
.caseta .pret-mare { padding: 18px 18px 14px; border-bottom: 1px solid var(--linie); }
.caseta .pret-mare .de-la { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.caseta .pret-mare .v { font-size: 31px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.caseta .pret-mare .v .u { font-size: 16px; font-weight: 400; color: var(--text-2); }
.caseta .pret-mare .eur { font-size: 12.5px; color: var(--text-3); }

.date-lista { max-height: 292px; overflow-y: auto; }
.data-op {
  display: flex; width: 100%; align-items: center; gap: 12px; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--linie); background: none;
  padding: 11px 18px; text-align: left;
}
.data-op:hover { background: var(--accent-slab); }
.data-op[aria-pressed="true"] { background: var(--accent-slab); box-shadow: inset 3px 0 0 var(--accent); }
.data-op .d { font-weight: 600; font-size: 15px; }
.data-op .zs { font-size: 12.5px; color: var(--text-3); margin-left: auto; }
.caseta .jos { padding: 16px 18px; display: grid; gap: 9px; }
.caseta .nota { font-size: 12.5px; color: var(--text-3); text-align: center; margin: 0; }
/* „Adaugă în coș" confirmat: rămâne vizibil ca stare, dar diferit de acțiunea principală. */
.caseta .jos #la-cos.e-in-cos { color: var(--accent-text, #1c6d52); border-color: var(--secundar); background: var(--secundar-slab); }
/* Salvează la favorite: buton fantomă cu inimă; când e salvat, inima se umple. */
.btn-fav {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: 1px solid var(--linie); border-radius: 10px;
  padding: 9px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer;
}
.btn-fav:hover { border-color: var(--secundar); color: var(--text); }
.btn-fav[aria-pressed="true"] { color: #d6455f; border-color: #d6455f33; background: #d6455f10; }
.btn-fav[aria-pressed="true"] svg { fill: #d6455f; stroke: #d6455f; }

/* Aceeași culoare ca antetul: sunt aceeași bandă, una sus și una jos. */
.subsol {
  border-top: 1px solid var(--linie); background: var(--fond-bara);
  padding: 40px 0; margin-top: 48px; font-size: var(--f-md); color: var(--text-2);
}
.subsol a { color: var(--text-2); }

/* ── SUBSOL PE 3 COLOANE: Agenția + Contact · HARTĂ (mare, fără titlu) · Informații ── */
.subsol-grid {
  display: grid; grid-template-columns: 1fr 2fr 0.9fr; gap: 30px; align-items: start;
}
.subsol-col { font-size: 13px; }
.subsol-col h4 {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.subsol-marca { color: var(--text); font-size: var(--f-md); font-weight: 800; display: block; }
.subsol-desc { margin: 5px 0 10px; color: var(--text-2); line-height: 1.4; font-size: 12.5px; }
.subsol-firma { font-size: 11.5px; line-height: 1.45; color: var(--text-3); display: flex; flex-direction: column; gap: 1px; }
/* Contact: acum în coloana 1, sub datele firmei — fiecare informație pe UN SINGUR rând, condensat. */
.subsol-contact { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.subsol-contact > div { display: flex; align-items: baseline; gap: 6px; line-height: 1.3; white-space: nowrap; }
.subsol-contact b { color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; flex: 0 0 auto; }
.subsol-contact a, .subsol-contact > div { color: var(--text); font-weight: 600; }
/* Informații: listă de linkuri, condensată. */
.subsol-linkuri-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.subsol-linkuri-list a { color: var(--text-2); }
.subsol-linkuri-list a:hover { color: var(--accent-text); }
/* Harta: MARE, fără titlu deasupra (ridicată sus, aliniată cu vârful coloanelor). */
.harta-loc { aspect-ratio: 4 / 3; border-radius: var(--r-mare); overflow: hidden; border: 1px solid var(--linie); }
.harta-embed { width: 100%; height: 100%; border: 0; display: block; }
.harta-gol {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; padding: 14px; color: var(--text-3);
  background: repeating-linear-gradient(45deg, var(--fond-jos), var(--fond-jos) 12px, transparent 12px, transparent 24px), var(--fond-sus);
  border: 1px dashed var(--linie-tare); border-radius: var(--r-mare);
}
.harta-gol span { font-weight: 700; font-size: 13px; color: var(--text-2); }
.harta-gol small { font-size: 12px; max-width: 28ch; }

.subsol-jos {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between;
  font-size: 12px; color: var(--text-3);
}
.subsol-nota { max-width: 62ch; }

/* Pictograme sociale — pastilă albă cu glif colorat pe brand; se văd pe orice fond (subsol clar/închis). */
.social-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 6px rgb(0 0 0 / .16); border: 1px solid var(--linie); transition: transform .15s;
}
.social-ic:hover { transform: translateY(-2px); }
.social-ic svg { width: 22px; height: 22px; display: block; }
.subsol-social { display: flex; gap: 10px; margin-top: 14px; }

/* ── TESTIMONIALE PE PAGINA PRODUSULUI (scrise de clienți, aprobate de operator) ── */
.stele { color: #E8A317; letter-spacing: 1px; }
.rec-medie { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 16px; }
.rec-medie b { font-size: 20px; }
.rec-gol { color: var(--text-2); margin: 0 0 18px; }
.rec-carduri { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 22px; }
.rec-card {
  background: var(--fond-sus, #fff); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 4px rgb(0 0 0 / .06);
}
.rec-card p { margin: 8px 0 10px; }
.rec-autor { font-size: 13px; color: var(--text-2); }

.rec-cont {
  background: var(--fond-sus, #fff); border: 1px solid var(--linie); border-radius: 14px;
  padding: 18px 20px; max-width: 560px;
}
.rec-cont h3 { margin: 0 0 6px; }
.rec-nota { font-size: 14px; color: var(--text-2); margin: 0 0 14px; }
.rec-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.rec-tabs .btn[aria-pressed="true"] { background: var(--accent); color: var(--pe-accent); border-color: var(--accent); }
.rec-f { display: flex; flex-direction: column; gap: 12px; }
.rec-f label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.rec-f input, .rec-f select, .rec-f textarea {
  font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid var(--linie);
  border-radius: 9px; background: var(--fond, #fff); color: var(--text); width: 100%;
}
.rec-f textarea { resize: vertical; }
.rec-f input:focus, .rec-f select:focus, .rec-f textarea:focus {
  border-color: var(--secundar); box-shadow: 0 0 0 3px var(--secundar-slab); outline: none;
}
.rec-note { border: 0; padding: 0; margin: 0; }
.rec-note legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 4px; }
/* Stelele se completează de la stânga: ordinea în DOM e 5→1, iar `row-reverse` le așază 1→5 pe ecran.
   Așa `input:checked ~ label` (frații de DUPĂ, adică notele mai mici) colorează exact până la nota aleasă. */
.stele-alege { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stele-alege input { position: absolute; opacity: 0; width: 0; height: 0; }
.stele-alege label { font-size: 30px; line-height: 1; color: var(--linie-tare); cursor: pointer; transition: color .12s; }
.stele-alege input:checked ~ label,
.stele-alege label:hover, .stele-alege label:hover ~ label { color: #E8A317; }
.stele-alege input:focus-visible + label { outline: 2px solid var(--secundar); outline-offset: 3px; border-radius: 4px; }
.rec-eroare { color: var(--caramida); font-size: 14px; min-height: 1em; }
.rec-multumim {
  background: var(--accent-slab); border: 1px solid var(--accent); border-radius: 12px;
  padding: 16px 18px; max-width: 560px; font-weight: 600;
}

/* TOT textul din subsol e NEGRU sau ALB (după cât de deschisă e bara, via --pe-bara), nu gri — se
   citește la fel de bine pe scheme deschise ȘI închise. Ierarhia vine din greutate/mărime, nu din gri. */
.subsol, .subsol a,
.subsol-marca, .subsol-desc, .subsol-firma,
.subsol-col h4, .subsol-contact b, .subsol-contact a, .subsol-contact > div,
.subsol-linkuri-list a, .subsol-jos, .subsol-nota,
.harta-gol, .harta-gol span, .harta-gol small { color: var(--pe-bara); }
/* Doar rândurile cu adevărat secundare se mai domolesc puțin — dar tot din --pe-bara, nu gri fix. */
.subsol-firma, .subsol-col h4, .subsol-contact b, .subsol-jos, .subsol-nota,
.harta-gol small { opacity: .82; }
.subsol-linkuri-list a:hover, .subsol a:hover { opacity: .7; }

@media (max-width: 980px) {
  .subsol-grid { grid-template-columns: 1.2fr 1fr; gap: 24px; }
  .subsol-col--harta { grid-row: span 2; }        /* harta pe dreapta, pe toată înălțimea */
  .harta-loc { aspect-ratio: 3 / 4; }
  .subsol-contact > div { white-space: normal; }
}
@media (max-width: 600px) {
  .subsol-grid { grid-template-columns: 1fr; }
  .subsol-col--harta { grid-row: auto; }
  .harta-loc { aspect-ratio: 16 / 10; }
}

/* ── PAGINI LEGALE (Termeni / Confidențialitate / Cookies) — coloană îngustă, lizibilă ── */
.doc-legal { max-width: 820px; margin: 0 auto; padding: 38px 0 24px; }
.doc-legal h1 { font-family: 'Ashemore', system-ui, sans-serif; font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin: 0 0 12px; color: var(--text); }
.doc-legal h2 { font-family: 'Ashemore', system-ui, sans-serif; font-size: var(--f-xl); font-weight: 700; margin: 30px 0 8px; color: var(--text); }
.doc-legal p, .doc-legal li { color: var(--text-2); line-height: 1.7; }
.doc-legal .doc-intro { font-size: var(--f-lg); color: var(--text); border-left: 3px solid var(--secundar); padding-left: 16px; margin: 6px 0 22px; }
.doc-legal ul { padding-left: 22px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.doc-legal a { color: var(--secundar-text); text-decoration: underline; text-underline-offset: 2px; }
.doc-firma { border-collapse: collapse; margin: 10px 0 6px; font-size: var(--f-sm); }
.doc-firma th { text-align: left; color: var(--text-3); font-weight: 600; padding: 4px 18px 4px 0; white-space: nowrap; vertical-align: top; }
.doc-firma td { color: var(--text); padding: 4px 0; }
.doc-lipsa { color: var(--caramida); background: color-mix(in oklab, var(--caramida) 10%, #fff); padding: 1px 7px; border-radius: 5px; font-size: .92em; font-weight: 600; }

/* Mențiune de document legal (licență, asigurare…) care are poză → link către vizualizatorul read-only. */
.doc-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
.doc-link:hover { text-decoration-style: solid; }
.doc-legal .doc-link, .doc-legal a.doc-link { color: var(--secundar-text); }

/* Vizualizatorul de documente — read-only, cu descurajări (drag/right-click oprite, ascuns la print). */
.doc-vizor { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.doc-vizor-fundal { position: absolute; inset: 0; background: rgb(0 0 0 / .82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.doc-vizor-cadru { position: relative; z-index: 1; max-width: min(920px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.doc-vizor-imgwrap { overflow: auto; border-radius: 10px; box-shadow: 0 20px 60px rgb(0 0 0 / .5); background: #fff; -webkit-overflow-scrolling: touch; }
.doc-vizor-img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
.doc-vizor-x { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #22303c; font-size: 17px; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / .4); z-index: 2; }
.doc-vizor-jos { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; font-size: 13.5px; }
.doc-vizor-jos b { color: #fff; }
.doc-vizor-nota { font-size: 11.5px; opacity: .75; border: 1px solid rgb(255 255 255 / .35); border-radius: 100px; padding: 2px 10px; white-space: nowrap; }
@media print { .doc-vizor { display: none !important; } }

/* Credit foto sub galeria ofertei (atribuire Wikimedia Commons pt CC BY / CC BY-SA). */
.of-credit { font-size: 11.5px; color: var(--text-3); margin: -14px 0 22px; }
.of-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Caseta evidențiată din formularul standard (OG 2/2018) — declarația-cheie despre pachet. */
.doc-legal .doc-caseta { border: 1px solid var(--linie); border-left: 4px solid var(--accent); background: var(--fond-sus); border-radius: 10px; padding: 14px 18px; margin: 8px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.doc-legal .doc-caseta p { margin: 0; }
.doc-legal .doc-drepturi { gap: 9px; }
.doc-legal .doc-nota { font-size: var(--f-sm); color: var(--text-3); border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 22px; }

/* ═══════════════════════════ TESTIMONIALE ═══════════════════════════
   Coloană laterală pe desktop, bandă jos pe telefon.

   Sliderul urcă continuu, nu sare din card în card: o mișcare lentă și constantă se citește ca
   ambianță și poate fi urmărită cu ochii, pe când un salt la fiecare 5 secunde cere atenție și
   întrerupe citirea panoului de lângă. Se oprește la hover și la focus din tastatură — altfel un
   text pe care ai vrut să-l citești fuge de sub degete.

   Lista se DUBLEAZĂ în DOM și translația merge exact -50%: la capăt, poziția arată identic cu
   începutul, deci bucla nu are cusătură vizibilă. */

/* Coloana e LATĂ pentru că poartă capturi de pe Facebook, nu text.
   La 300px, o captură de 1400px lățime se micșorează de aproape cinci ori — textul din ea devine
   fizic nelizibil, oricât ar fi mărită imaginea. 420px e minimul la care o recenzie de Facebook
   se mai poate citi. */
.pagina-cu-lateral {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px; align-items: start;
}
@media (max-width: 1250px) { .pagina-cu-lateral { grid-template-columns: 1fr; } }

.lateral { position: sticky; top: 100px; }
/* Aliniat cu PRIMUL CARD, nu cu antetul listei: rândul „primele 12 din 28" e o notă tehnică,
   iar titlul coloanei pornea de la înălțimea lui, cu un cap deasupra cardurilor. */
.lateral { padding-top: 44px; }
.lateral h2 {
  font-size: var(--f-md); font-weight: 500; margin: 0 0 18px;
  line-height: 1.3; color: var(--text-2);
  /* Majuscule mici, distanțate: un titlu de secțiune care nu concurează cu conținutul de sub el. */
  text-transform: uppercase; letter-spacing: .14em;
}

.tst-fereastra {
  position: relative; height: 590px;
  /* `clip-path` în loc de `overflow: hidden`: altfel umbra deplasată a cardurilor ar fi tăiată de
     marginea ferestrei. Decupajul lasă 14px la dreapta, exact cât respiră umbra. */
  clip-path: inset(0 -18px 0 0);
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}
.tst-banda { display: flex; flex-direction: column; gap: 18px; animation: urca 60s linear infinite; }
.tst-fereastra:hover .tst-banda,
.tst-fereastra:focus-within .tst-banda { animation-play-state: paused; }
@keyframes urca { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tst-banda { animation: none; }
  .tst-fereastra { height: auto; max-height: 560px; overflow-y: auto; mask-image: none; -webkit-mask-image: none; }
}

.tst {
  background: var(--fond-sus); border: 1.5px solid var(--linie); border-left: 4px solid var(--secundar);
  border-radius: var(--r-mare); padding: 18px 20px; box-shadow: var(--umbra);
}
.tst .txt { font-size: var(--f-md); line-height: 1.55; color: var(--text); margin: 0 0 12px; }
.tst .txt::before { content: '„'; color: var(--secundar); font-size: 1.5em; line-height: 0; vertical-align: -.2em; }
.tst .cine { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tst .nume { font-weight: 700; font-size: var(--f-md); }
.tst .unde { font-size: var(--f-sm); color: var(--text-3); }
.tst .stele { color: var(--atentie); font-size: var(--f-sm); letter-spacing: .12em; }
.tst .sursa { font-size: 13px; color: var(--text-3); }

/* ── cardul cu captură: DOAR poza ──
   Fără chenar, fără fundal, fără padding și fără niciun text dedesubt. Captura conține deja numele,
   poza de profil, data și textul recenziei — orice repetăm sub ea e informația scrisă de două ori.
   Rămâne umbra, deplasată spre dreapta, ca poza să pară așezată peste pagină.
   Transcriptul rămâne în `<figcaption class="invizibil">`: nu se vede, dar Google și cititoarele de
   ecran îl au. */
.tst.cu-poza {
  padding: 0; overflow: visible; background: none; border: 0; border-left: 0;
  border-radius: 8px; box-shadow: 10px 9px 22px -8px rgb(18 38 26 / .3);
}
.tst.cu-poza figure { margin: 0; }
.tst .captura { width: 100%; height: auto; display: block; border-radius: 8px; }
/* Numele și sursa apar doar la testimonialele SCRISE, unde nu există captură care să le conțină. */
.tst.cu-poza .cine, .tst.cu-poza .txt { display: none; }

/* Fără testimoniale: se spune ce lipsește, nu se umple cu exemple inventate. */
.tst-gol {
  border: 1.5px dashed var(--linie-tare); border-radius: var(--r-mare);
  padding: 26px 22px; text-align: center; color: var(--text-3); font-size: var(--f-sm);
}

/* ═══════════════════════ TELEFON: trei secțiuni ═══════════════════════
   Pe telefon pagina nu mai e un sul lung, ci trei zone fixe: antet cu filtrul, excursiile la
   mijloc, testimonialele jos. Fiecare cu scroll propriu.

   `100dvh`, nu `100vh`: pe telefon bara de adrese se ascunde la derulare, iar `vh` rămâne la
   înălțimea inițială — ultima secțiune ar fi tăiată sub marginea ecranului. `dvh` urmărește
   înălțimea reală.

   Se aplică DOAR pe pagina care cere aparte (`data-mobil-sectiuni`), nu peste tot: pagina unei
   oferte e un text lung, care trebuie citit derulând normal. */
/* ═══════════════════════ TELEFON ═══════════════════════
   Pagina CURGE, nu se împarte în trei zone fixe.

   Varianta cu  și scroll separat pe fiecare secțiune arăta bine în teorie: antet fix,
   excursii la mijloc, testimoniale jos. În practică, pe un ecran 9:16 rămâneau ~320px pentru
   excursii — un card și jumătate — iar antetul lipit ocupa permanent din puținul rămas. Pe telefon,
   derularea obișnuită e mai bună decât trei ferestre înghesuite una peste alta. */
@media (max-width: 900px) {
  /* Antetul NU mai e lipit: pe un ecran înalt și îngust, 74px permanenți sunt 9% din pagină
     cheltuiți pe ceva ce nu se citește. Se derulează odată cu restul. */
  .antet { position: static; backdrop-filter: none; -webkit-backdrop-filter: none;
           background: var(--fond-bara); }
  body[data-mobil-sectiuni] { height: auto; display: block; overflow: visible; }
  body[data-mobil-sectiuni] > main { display: block; overflow: visible; }
  body[data-mobil-sectiuni] .zona-filtru { max-height: none; padding: 18px 0 16px; }
  body[data-mobil-sectiuni] .zona-body { overflow: visible; min-height: 0; padding: 16px 0 4px; }
  body[data-mobil-sectiuni] .zona-jos {
    overflow: visible; height: auto; max-height: none; min-height: 0;
    border-top: 1px solid var(--linie); background: var(--fond-jos); padding: 18px 0;
  }
  body[data-mobil-sectiuni] .zona-jos .lateral { position: static; padding-top: 0; }
  body[data-mobil-sectiuni] .tst-fereastra { height: auto; overflow: visible;
    mask-image: none; -webkit-mask-image: none; clip-path: none; }
  body[data-mobil-sectiuni] .tst-banda { animation: none; }
  body[data-mobil-sectiuni] .tst-banda .dubla { display: none; }
  body[data-mobil-sectiuni] .subsol { margin-top: 0; padding: 24px 0; }

  /* Bannerul: proporție potrivită unui ecran 9:16, nu o bandă lată strivită. */
  .deschidere { padding: 34px 0 22px; }
  .lat { padding: 0 16px; }
  .panou { gap: 14px; grid-template-columns: 1fr; }
  .rand { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .c-poza { grid-row: 1; height: 190px; }
  .c-titlu { grid-column: 1; }
  .c-poza .p { min-height: 0; }
  .c-data { top: 10px; left: 10px; padding: 7px 11px 6px; min-width: 58px; }
  .c-data .zi { font-size: 23px; }
  .c-data .luna { font-size: 11.5px; }
  .c-data .zs { font-size: 11px; }
  .marcaj { bottom: 10px; left: 10px; font-size: 11.5px; padding: 4px 10px; }
  .c-titlu { padding: 14px 16px 6px; }
  .c-titlu .t { font-size: var(--f-lg); }
  .c-pret { grid-column: 1; padding: 8px 16px 14px; }
  .c-pret .p { font-size: 24px; }
}

/* ═══════════════════════ INTRO ═══════════════════════
   Sigla pe tot ecranul, apoi sloganul. O dată pe sesiune, nu la fiecare pagină: un client care
   se întoarce de la o ofertă la panou nu vrea să aștepte iar.

   Conținutul paginii EXISTĂ sub el tot timpul — intro-ul e o suprapunere, nu un ecran care întârzie
   randarea. Motoarele de căutare și cititoarele de ecran nu văd nicio pauză, iar dacă JS-ul cade
   din orice motiv, nu rămâne nimeni blocat într-un ecran gol. */
/* Ceața, nu cortina.
   Prima variantă avea fundal OPAC și dispărea prin fade: pagina apărea brusc, dintr-un ecran alb.
   Acum fundalul e semi-transparent cu `backdrop-filter: blur()` — homepage-ul e acolo tot timpul,
   dar înceţoşat. La final ceaţa se limpezeşte (blur → 0) şi pagina se apropie uşor din spate.
   E aceeaşi imagine, doar că devine clară — nu apare din nimic. */
/* Sesiunea a mai văzut intro-ul: nu se randează deloc. Clasa e pusă de scriptul din `<head>`,
   înainte de primul pixel, deci nu apucă să clipească. */
html.fara-intro .intro { display: none; }
html.fara-intro body.cu-intro > main,
html.fara-intro body.cu-intro > #antet,
html.fara-intro body.cu-intro > div:not(.intro) { transform: none; animation: none; }

/* Durată totală ~2s: sigla se aşază în 0,9s, iar de la 1,1s ceaţa se limpezeşte. Suficient cât să
   se vadă marca, prea puţin cât să enerveze pe cineva care voia doar să caute o excursie. */
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: color-mix(in oklab, var(--fond) 88%, transparent);
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  animation: intro-ceata .95s cubic-bezier(.4,0,.2,1) 1.1s forwards;
}
.intro-in { display: grid; place-items: center; gap: 26px; padding: 24px; text-align: center; }
.intro img {
  width: min(66vw, 560px); height: auto; opacity: 0;
  animation: intro-sigla .9s cubic-bezier(.22,.7,.28,1) .1s forwards,
             intro-sigla-iese .8s cubic-bezier(.4,0,.2,1) 1.15s forwards;
}
@keyframes intro-sigla { from { opacity: 0; transform: scale(.92); filter: blur(6px); }
                         to   { opacity: 1; transform: none;       filter: blur(0); } }
/* Sigla pleacă spre privitor în timp ce se stinge — întăreşte senzaţia de trecere prin ceaţă. */
@keyframes intro-sigla-iese { to { opacity: 0; transform: scale(1.12); filter: blur(10px); } }
@keyframes intro-ceata {
  to { opacity: 0; visibility: hidden;
       backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); }
}

/* Pagina de dedesubt se apropie uşor cât ţine ceaţa: de aceea pare că vine din spate. */
body.cu-intro > main, body.cu-intro > #antet, body.cu-intro > div:not(.intro) {
  transform: scale(1.035); transform-origin: 50% 42%;
  animation: intro-pagina 1.1s cubic-bezier(.4,0,.2,1) 1s forwards;
}
@keyframes intro-pagina { to { transform: none; } }

.intro .sari {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  background: none; border: 0; cursor: pointer; color: var(--text-2);
  font-size: var(--f-sm); text-decoration: underline; padding: 10px 16px;
}
.intro .sari:hover { color: var(--text); }

/* Cine a cerut mai puţină mişcare vede sigla o clipă, fără ceaţă şi fără apropiere. */
@media (prefers-reduced-motion: reduce) {
  .intro { backdrop-filter: none; -webkit-backdrop-filter: none;
           background: var(--fond); animation: intro-ceata .01s linear .8s forwards; }
  .intro img { opacity: 1; animation: none; }
  body.cu-intro > main, body.cu-intro > #antet, body.cu-intro > div:not(.intro) {
    transform: none; animation: none;
  }
}


/* ═══════════════════════════ PAGINA DE ACASĂ (body.acasa) ═══════════════════════════
   Banner fix NATURAL pe tot ecranul (fără umbrire), peste care se derulează:
   • header luminos: sigla ALINIATĂ + motorul de căutare (toate filtrele) + contact — fără dark view;
   • un titlu discret peste banner;
   • SLIDERUL care RULEAZĂ (rolă de film continuă, ca la /slider.html) cu plecările viitoare, lat;
   • sub el, exact stilul dinainte: 3 coloane de carduri + 1 coloană testimoniale (scroll vertical),
     pe fundal OPAC care acoperă bannerul la derulare (monopage).                                    */

/* ── Bannerul fix, în spatele hero-ului și al sliderului. NATURAL — fără niciun văl. ── */
/* Bannerul = FUNDALUL EROULUI, element normal `position:absolute` în interiorul `.erou` (NU un strat
   `position:fixed` peste toată pagina — acela nu se randa la unele extensii de browser). Degrade-ul
   cer→mare e fundalul de rezervă; fotografiile stau peste el. */
.banner-fix { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(165deg, #8fc4dd 0%, #4a92b5 45%, #2b6580 100%); }
.banner-fix img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; will-change: opacity, transform;
  /* DOUĂ animații: `banner-op` = apariția/dispariția în fondu (doar opacitatea, decalată din JS);
     `--misc` = o MIȘCARE PROPRIE, continuă, alta pentru fiecare imagine (data-misc 1..6). */
  animation:
    banner-op var(--ciclu, 42s) ease-in-out infinite,
    var(--misc, misc-1) var(--misc-dur, 19s) ease-in-out infinite alternate;
}
@keyframes banner-op { 0% { opacity: 0; } 4% { opacity: 1; } 22% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
/* Prima imagine = STRAT DE BAZĂ permanent (opacitate 1, doar mișcarea proprie). Fără ea, între
   tranzițiile de opacitate ale celorlalte apărea fundalul navy („hero navy, fără colaj"). Acum e mereu
   o imagine dedesubt, iar restul fac cross-fade PESTE ea. */
.banner-fix img:first-child { opacity: 1; animation: var(--misc, misc-1) var(--misc-dur, 22s) ease-in-out infinite alternate; }
@keyframes misc-1 { from { transform: scale(1.12) translate(1.5%, 2.5%); } to { transform: scale(1.18) translate(-1.5%, -3%); } }
@keyframes misc-2 { from { transform: scale(1.14) translateX(-3.5%); } to { transform: scale(1.14) translateX(3.5%); } }
@keyframes misc-3 { from { transform: scale(1.22); } to { transform: scale(1.09); } }
@keyframes misc-4 { from { transform: scale(1.12) translateY(3.5%); } to { transform: scale(1.16) translateY(-3.5%); } }
@keyframes misc-5 { from { transform: scale(1.12) translate(3%, -1.5%); } to { transform: scale(1.17) translate(-3%, 1.5%); } }
@keyframes misc-6 { from { transform: scale(1.06); } to { transform: scale(1.2); } }
.banner-fix img[data-misc="1"] { --misc: misc-1; --misc-dur: 22s; }
.banner-fix img[data-misc="2"] { --misc: misc-2; --misc-dur: 26s; }
.banner-fix img[data-misc="3"] { --misc: misc-3; --misc-dur: 19s; }
.banner-fix img[data-misc="4"] { --misc: misc-4; --misc-dur: 24s; }
.banner-fix img[data-misc="5"] { --misc: misc-5; --misc-dur: 21s; }
.banner-fix img[data-misc="6"] { --misc: misc-6; --misc-dur: 28s; }
@media (prefers-reduced-motion: reduce) {
  .banner-fix img { animation: none; }
  .banner-fix img:first-child { opacity: 1; animation: none; }
}

/* Fundalul paginii de acasă = ACELAȘI degrade ca bannerul, fixat pe viewport. Bannerul-foto (JS) stă
   PESTE el; dacă din orice motiv nu se injectează sau fotografiile nu se încarcă, pagina rămâne cu
   degrade-ul (niciodată albă). Zona clasică de jos e oricum opacă și acoperă. */
/* FUNDAL FIX PE TOT ECRANUL (persistă la scroll) — pe pseudo-elementele body-ului (element existent,
   `position:fixed`, z-index 0). NU strat injectat, NU z-index negativ → se randează la orice browser/
   extensie. `::before` = poza curentă, `::after` = poza următoare în fondu (colaj cross-fade). Conținutul
   stă PESTE (z-index). Degrade închis ca rezervă (nicicând alb). */
body.acasa { background: linear-gradient(165deg, #4a92b5 0%, #2b6580 100%); }
body.acasa::before, body.acasa::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
}
body.acasa::before { background-image: var(--poza-1, none); }
body.acasa::after { background-image: var(--poza-2, none); opacity: var(--fade, 0); transition: opacity 1.4s ease; }
body.acasa > main, body.acasa > #subsol { position: relative; z-index: 1; }
body.acasa > #antet { position: relative; z-index: 10; }

/* ACELAȘI header pe TOATE paginile → regulile NU mai sunt legate de `body.acasa`, ci de `.antet--acasa`
   (clasa header-ului), ca să se aplice și pe ofertă/listă, fără excepție. */

/* `#antet` e doar un înveliș în care se injectează header-ul. Cu display:contents cutia lui dispare,
   așa că blocul-container al header-ului sticky devine <body> (toată pagina). Fără asta, sticky
   n-avea unde să se lipească — învelișul era înalt exact cât header-ul, deci pleca imediat la scroll. */
#antet { display: contents; }

/* ── HEADER SLIM, STICKY, un singur rând: WhatsApp (stânga) · filtre interactive (mijloc) · insignă
   ovală emboss (dreapta). Înălțimea = cât e filtrul. NUANȚA vine din `--fond-bara` (editabilă din CMS),
   moștenită din `.antet` de bază — nu e hardcodată aici. ── */
.antet--acasa {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--linie);
}
.antet--acasa .antet-in {
  position: relative; display: flex; align-items: flex-end; gap: 14px;
  height: auto; min-height: 0; padding: 9px 20px 10px;
  padding-right: 272px;                 /* loc pentru insigna ovală (250px) pe dreapta */
}
/* WhatsApp: BUTON cu fond ALB (independent de nuanța header-ului), mărit ~30%. */
.antet--acasa .tel {
  align-self: center; flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--accent-text); font-weight: 700; font-size: 19px;
  padding: 9px 17px; border-radius: 100px;
  box-shadow: 0 2px 10px rgb(0 0 0 / .14); border: 1px solid rgb(0 0 0 / .06);
}
.antet--acasa .tel svg { width: 22px; height: 22px; }
.antet--acasa .tel:hover { box-shadow: 0 3px 14px rgb(0 0 0 / .2); }
/* Filtrele: câmpuri SCURTE, aliniate jos, între WhatsApp și insignă — fără să se rupă pe rânduri. */
.antet--acasa .filtru-turism {
  flex: 1 1 auto; justify-content: flex-start; max-width: none; margin: 0;
  gap: 10px; align-items: flex-end; flex-wrap: nowrap;
}
.antet--acasa .filtru-turism .camp { flex: 1 1 0; min-width: 0; }
.antet--acasa .filtru-turism label {
  color: var(--text-2); text-shadow: none; font-size: 10px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.antet--acasa .filtru-turism select,
.antet--acasa .filtru-turism input {
  box-shadow: none; border: 1px solid var(--linie); background: var(--fond-sus, #fff);
  min-width: 0; width: 100%; font-size: 13px; padding: 7px 9px; height: 34px;
}
.antet--acasa .filtru-turism select:focus,
.antet--acasa .filtru-turism input:focus { border-color: var(--secundar); box-shadow: 0 0 0 3px var(--secundar-slab); outline: none; }

/* ── INSIGNA OVALĂ (emboss + dropshadow) — pe DREAPTA, agățată de header ──
   Forma vine din SVG (.ins-forma): elipsă cu gradient + relief specular + umbră interioară. Umbra de
   plutire e un drop-shadow CSS (urmează conturul oval, nu o cutie). Sigla (mărită, fără slogan) stă
   centrată peste elipsă. */
.antet--acasa .insigna {
  position: absolute; right: 16px; top: 8px; z-index: 5;
  width: 250px; height: 136px; display: block;         /* raport = viewBox 250×136 (fără distorsiune) */
  background: none; box-shadow: none; border-radius: 0; padding: 0;
}
.antet--acasa .insigna .ins-forma {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 12px 16px rgb(0 0 0 / .45)) drop-shadow(0 2px 4px rgb(0 0 0 / .2));
}
/* Sigla centrată în oval, la mărimea păstrată (~78% din lățimea badge-ului). */
.antet--acasa .insigna img {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; height: auto; object-fit: contain; display: block; filter: none; z-index: 1;
}
.antet--acasa .insigna:hover { transform: translateY(-1px); transition: transform .15s; }

/* Elementele stil-webapp (hamburger, sertar, bară de jos) sunt ASCUNSE pe desktop — apar din @media
   mobil. `.antet-bara` pe desktop nu e o cutie (display:contents), ca insigna să rămână absolută. */
.antet-bara { display: contents; }
.antet-ham, .meniu-mobil, .meniu-fundal { display: none; }

/* Iconițele de magazin (favorite + coș). Pe desktop stau aliniate la dreapta filtrelor, chiar în
   stânga insignei ovale (spațiul rezervat de padding-right pe .antet-in). Butoane albe, ca WhatsApp. */
.antet-magazin { flex: 0 0 auto; align-self: center; display: flex; align-items: center; gap: 8px; }
.mag-ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 100px; color: var(--text);
  background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .14); border: 1px solid rgb(0 0 0 / .06);
}
.mag-ic:hover { box-shadow: 0 3px 14px rgb(0 0 0 / .2); transform: translateY(-1px); transition: transform .15s, box-shadow .15s; }
.mag-nr {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 100px; background: var(--accent); color: var(--pe-accent, #fff);
  font-size: 11px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.mag-nr[hidden] { display: none; }

/* ── Bannerul de consimțământ (GDPR) — bară SLIMĂ jos, nu o cutie mare. Text scurt cu beneficiul +
   trei acțiuni: „Personalizează" (link discret), „Doar necesare" și „Accept" (butoane de MĂRIME
   EGALĂ — cerință GDPR: refuzul la fel de ușor ca acceptul). Opțiunile granulare apar la Personalizează. */
.cc-invelis { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: center; padding: 12px; pointer-events: none; }
.cc-card { pointer-events: auto; width: min(880px, 100%); background: var(--fond-sus, #fff); color: var(--text); border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 10px 34px rgb(0 0 0 / .26); padding: 12px 16px; }
.cc-rand { display: flex; align-items: center; gap: 14px; }
.cc-emoji { font-size: 18px; }
.cc-txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); margin: 0; }
.cc-txt a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.cc-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.cc-link { background: none; border: 0; color: var(--text-2); font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 4px; white-space: nowrap; }
.cc-link:hover { color: var(--text); }
.cc-b { font: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 9px; cursor: pointer; border: 1px solid var(--linie); background: none; color: var(--text); white-space: nowrap; }
.cc-b--gol:hover { border-color: var(--secundar); }
.cc-b--pr { background: var(--accent); color: var(--pe-accent, #fff); border-color: transparent; }
.cc-b--pr:hover { filter: brightness(1.08); }
.cc-b[hidden], .cc-link[hidden] { display: none; }
.cc-optiuni { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.cc-optiuni[hidden] { display: none; }   /* `display:grid` de mai sus ar învinge atributul `hidden` — îl restabilim */
.cc-op { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.cc-op input { width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.cc-op--fix { opacity: .7; } .cc-op b { color: var(--text); }
.cc-optiuni-jos { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
@media (max-width: 620px) {
  .cc-rand { flex-direction: column; align-items: stretch; gap: 10px; }
  .cc-act { flex-wrap: wrap; }
  .cc-act .cc-b { flex: 1 1 auto; }
  .cc-link { order: 3; width: 100%; text-align: center; }
}

/* Rețelele sociale (FB/IG/TT) ca butoane FLOTANTE — orizontal, CLAR SUB header, în STÂNGA insignei.
   `top` trebuie să treacă de înălțimea header-ului (~67px: etichetă 10px + input 34px + paddinguri), altfel
   pictogramele se suprapun peste marginea de jos a header-ului. Oferta pe dreapta lasă loc insignei ovale
   (250px + margine); pe ecrane late urmărește coloana centrată. */
.social-flotant {
  position: fixed; z-index: 39; display: flex; gap: 10px;
  top: 76px;
  right: calc(280px + max(20px, (100vw - var(--lat)) / 2 + 20px));
}
.social-flotant .social-ic { box-shadow: 0 6px 16px -4px rgb(0 0 0 / .4), 0 1px 4px rgb(0 0 0 / .22); }

/* ── EROUL: spațiu peste banner care împinge sliderul spre jumătatea de jos, cu un titlu discret ── */
/* EROUL cu fotografie de fundal ROTATIVĂ, făcută DIRECT pe element (nu prin strat injectat) → se
   randează la orice browser/extensie. `background-image` (poza curentă) e stratul de bază; `::after`
   e stratul care face fade-in la poza următoare — așa se obține colajul/cross-fade robust. 46vh ca să
   încapă și primele plecări (cu prețuri) în primul ecran, fără scroll. */
/* Eroul e transparent — fundalul FIX al paginii (pseudo-elementele body) se vede prin el. Titlul stă
   peste. 46vh ca primele plecări (cu prețuri) să încapă în primul ecran. */
body.acasa .erou { min-height: 46vh; display: grid; place-items: center; text-align: center; padding: 34px 0; background: none; border: 0; }
body.acasa .erou-titlu { font-family: 'TitluScript', 'Segoe Script', cursive; color: #fff; font-weight: 700; font-size: clamp(42px, 7.5vw, 88px); line-height: 1.06; margin: 0; text-wrap: balance; text-shadow: 0 3px 4px rgb(0 0 0 / .9), 0 2px 2px rgb(0 0 0 / .85), 0 6px 22px rgb(0 0 0 / .55); }
body.acasa .erou-sub { color: #fff; margin: 12px 0 0; font-size: clamp(15px, 2vw, 19px); text-shadow: 0 1px 3px rgb(0 0 0 / .4), 0 2px 14px rgb(0 0 0 / .55); }

/* ── SLIDERUL care rulează (rolă de film) — pe toată lățimea, peste banner ── */
body.acasa .banda-plecari { padding: 4px 0 30px; }
body.acasa .banda-cap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
body.acasa .banda-cap h2 { font-family: 'Ashemore', system-ui, sans-serif; color: #fff; margin: 0; font-size: clamp(20px, 2.6vw, 28px); text-shadow: 0 2px 4px rgb(0 0 0 / .4), 0 3px 16px rgb(0 0 0 / .5); }
body.acasa .banda-cap .numar { color: rgb(255 255 255 / .92); font-size: 14px; text-shadow: 0 1px 8px rgb(0 0 0 / .7); }
/* Capetele benzii se pierd în ceață — la fel ca banda de testimoniale, dar pe orizontală: cardurile
   se dizolvă spre transparent și la stânga, și la dreapta, ca o rolă de film fără margini tăiate. */
.film-vp {
  overflow: hidden; padding: 4px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.film-track { display: flex; gap: 18px; width: max-content; padding: 0 max(20px, calc((100vw - var(--lat)) / 2 + 20px)); }
.film-track > .rand { flex: 0 0 clamp(258px, 22vw, 300px); width: auto; margin: 0; }
/* pauza la hover e legată din JS (Web Animations) */

/* ── SUB SLIDER: grila clasică 3 + 1. Fundal TRANSPARENT — bannerul rămâne vizibil PERMANENT în
   spate, nu-l acoperim la derulare. Cardurile (albe, opace) plutesc peste el; titlurile de secțiune
   devin albe ca să se citească pe fotografie. ── */
body.acasa .zona-body { position: relative; z-index: 1; background: transparent; padding-top: 30px; }
body.acasa .panou-cap h2,
body.acasa .panou-cap p,
body.acasa .panou-cap .numar,
body.acasa .lateral h2,
body.acasa #zona-jos h2 { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .45), 0 2px 12px rgb(0 0 0 / .55); }
/* Subsolul de pe acasă URMEAZĂ PALETA (--fond-bara + textele derivate), exact ca antetul — nu mai e
   închis hardcodat. Doar puțin translucid, ca bannerul să se ghicească în spate. Textele rămân pe
   tokenii paletei (--text/-2/-3), deci se citesc pe orice schemă (deschisă sau închisă). */
body.acasa #subsol .subsol {
  background: color-mix(in oklab, var(--fond-bara) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px);
}

/* ── Telefon: insignă mai mică pe dreapta, filtrele se pliază pe două coloane; hero mai scund ── */
/* ═══════════════ MOBIL — STIL WEBAPP ═══════════════
   Bara sticky = doar logo + hamburger. Filtrul coboară sub ea, un criteriu pe rând, condensat,
   SCROLLABIL (curge cu pagina, nu rămâne fixat). WhatsApp trece în bara de jos fixă (search + WA).
   Bannerul e oricum fix pe tot ecranul, în spate — deci se văd, deodată, bara, filtrul ȘI bannerul. */
@media (max-width: 760px) {
  /* Cutiile header-ului dispar → bara sticky se lipește la nivel de <body>, iar filtrul curge normal. */
  #antet, .antet--acasa, .antet--acasa .antet-in { display: contents; }

  /* BARA STICKY: logo (stânga) + hamburger (dreapta). */
  .antet-bara {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 45; padding: 7px 14px; margin: 0;
    background: color-mix(in oklab, var(--fond-bara) 92%, transparent);
    backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--linie);
  }
  /* Sigla pe mobil = ACEEAȘI insignă OVALĂ emboss ca pe desktop, doar compactă. */
  .antet-bara .insigna {
    position: relative; order: -1; display: block; padding: 0;
    width: 132px; height: 72px;                        /* raport 250×136 */
    background: none; box-shadow: none; border-radius: 0;
  }
  .antet-bara .insigna .ins-forma {
    display: block; width: 100%; height: 100%;
    filter: drop-shadow(0 6px 11px rgb(0 0 0 / .4)) drop-shadow(0 1px 3px rgb(0 0 0 / .18));
  }
  .antet-bara .insigna img {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 78%; height: auto; object-fit: contain; display: block; z-index: 1;
  }
  .antet-ham {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--text); padding: 6px; cursor: pointer;
  }
  /* Pe mobil bara e strâmtă (logo + WhatsApp + hamburger): păstrăm în bară DOAR coșul (acțiunea cheie
     de magazin); favoritele și contul rămân la un clic în sertar. Coșul compact, lângă WhatsApp. */
  .antet-bara .antet-magazin { flex: 0 0 auto; gap: 4px; }
  .antet-bara .mag-fav, .antet-bara .mag-cont { display: none; }   /* favorite + cont → în sertar */
  .antet-bara .mag-ic { width: 38px; height: 38px; box-shadow: 0 1px 6px rgb(0 0 0 / .16); }
  .antet-bara .mag-ic svg { width: 20px; height: 20px; }
  /* WhatsApp rămâne în bară (mijloc, între logo și hamburger) — compact, ca să nu fie în header doar
     pe desktop. Nu se mai ascunde. */
  .antet--acasa .tel {
    align-self: center; font-size: 13px; padding: 6px 12px; gap: 6px;
    box-shadow: 0 1px 6px rgb(0 0 0 / .16);
  }
  .antet--acasa .tel svg { width: 18px; height: 18px; }

  /* FILTRUL nu mai stă împrăștiat în pagină — se mută în sertarul „Caută" (din JS). Cât e (o clipă)
     în header, e ascuns, ca să nu clipească; în sertar îl arată `#meniu-cauta .filtru-turism`. */
  .antet--acasa .filtru-turism { display: none; }

  /* Butoanele sociale flotante: CLAR sub bara sticky (medalionul oval o face ~86px), în stânga, orizontal. */
  .social-flotant {
    top: 94px; left: 12px; right: auto; gap: 8px; z-index: 44;
  }
  .social-flotant .social-ic { width: 38px; height: 38px; }
  .social-flotant .social-ic svg { width: 20px; height: 20px; }

  /* SERTARUL mobil + fundalul. */
  .meniu-fundal {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgb(0 0 0 / .45); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .meniu-mobil {
    display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: min(85vw, 350px); background: var(--fond); box-shadow: -8px 0 30px rgb(0 0 0 / .3);
    transform: translateX(100%); transition: transform .25s ease; padding: 58px 20px 20px; overflow-y: auto;
  }
  .meniu-mobil a { padding: 13px 6px; color: var(--text); font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--linie); }
  body.meniu-deschis .meniu-fundal { opacity: 1; pointer-events: auto; }
  body.meniu-deschis .meniu-mobil { transform: translateX(0); }
  body.meniu-deschis { overflow: hidden; }

  /* „Caută" = primul element din sertar: titlu + filtrul MUTAT aici, vertical, un criteriu pe rând. */
  .meniu-cauta { border-bottom: 1px solid var(--linie); padding-bottom: 16px; margin-bottom: 6px; }
  .meniu-titlu { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
  #meniu-cauta .filtru-turism { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; margin: 0; background: none; max-width: none; border: 0; }
  #meniu-cauta .filtru-turism .camp { flex: none; flex-direction: column; align-items: stretch; gap: 4px; }
  #meniu-cauta .filtru-turism label { flex: none; color: var(--text-2); font-size: 12px; letter-spacing: .02em; text-align: left; overflow: visible; }
  #meniu-cauta .filtru-turism select,
  #meniu-cauta .filtru-turism input { width: 100%; height: 42px; font-size: 15px; }

  /* Hero mai scund, ca să se vadă bara ȘI bannerul pe primul ecran (filtrul e în sertar). */
  body.acasa .erou { min-height: 30vh; padding: 20px 0; }
  .film-track { padding: 0 16px; }
  /* Pe telefon, cardurile din slider erau uriașe (82vw = un card umplea ecranul, următorul tăiat).
     Reduse la ~60% (49vw). În plus le SCURTĂM un pic (titlu pe 1 rând, fără rândul de detalii, benzi
     mai strânse), ca toată înălțimea rolei de film să încapă în primul ecran — fără să urcăm sliderul.
     Aranjamentul rămâne clasic: poză (16:9) sus, titlu + bandă de preț dedesubt. */
  .film-track > .rand { flex-basis: 49vw; }
  .film-track > .rand .c-titlu { padding: 9px 12px 0; }
  .film-track > .rand .c-titlu .t { font-size: 14px; line-height: 1.25; -webkit-line-clamp: 1; }
  .film-track > .rand .c-titlu .detalii { display: none; }
  .film-track > .rand .c-pret { padding: 8px 12px; }
  .film-track > .rand .c-pret .p { font-size: 17px; }
}