/* ═══════════════════════════════════════════════════════════════
   FOREST RETREAT VILLAS — Sistem de design global
   Tokens, bază, navigație, sidebar mobil, footer, butoane.
   Stilurile specifice paginilor stau în /assets/css/<pagina>.css
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --cream:    #FAF7F1;
  --cream-2:  #F3EEE4;
  --green:    #3D6147;
  --green-dk: #2D4B36;
  --green-dp: #22392A;
  /* Bara de sus, ca în pagina de referință: negru translucid cu blur
     peste hero. Pe paginile fără hero nu are ce să lase să se vadă, așa
     că devine opacă în aceeași nuanță. Starea o decide PHP-ul o singură
     dată, nu JS-ul la scroll. */
  --bar-solid: #1B221E;
  --red:      #A84940;
  --red-dk:   #8F3C34;
  --text:     #1A1A1A;
  --dk:       #1A1A1A;
  --muted:    #3A3A3A;
  --muted-2:  #6B6B6B;
  --border:   rgba(0,0,0,0.08);
  --gold:     rgba(200,175,120,0.55);
  --gold-sr:  #C8AF78;
  --wa:       #25D366;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── SCARA TIPOGRAFICĂ ──────────────────────────────────────
     O singură sursă pentru mărimi. Orice pagină folosește astea,
     nimeni nu scrie font-size direct într-o secțiune.
     Valorile în px sunt la 1440px lățime. */
  --fs-display: clamp(2.3rem, 5.6vw, 4.2rem); /* h1 de hero      67px */
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.4rem); /* h1 de pagină    54px */
  --fs-h2:      clamp(1.75rem, 3.3vw, 2.75rem);/* titlu secțiune 44px */
  --fs-h3:      1.35rem;                      /* titlu card      21.6px */
  --fs-h4:      1.02rem;                      /* subtitlu        16.3px */
  --fs-lead:    1.06rem;                      /* subtitlu secț.  17px */
  --fs-body:    0.95rem;                      /* text curent     15.2px */
  --fs-small:   0.86rem;                      /* note, meta      13.8px */
  --fs-micro:   0.75rem;                      /* etichete        12px */
  --fs-eyebrow: 0.68rem;                      /* preheader       10.9px */

  --lh-tight: 1.12;
  --lh-head:  1.25;
  --lh-body:  1.75;

  --ls-eyebrow: 0.2em;
  --ls-button:  0.1em;

  --nav-h:  92px;
  --bar-h:  38px;
  --logo-h: 58px;
  --wrap:   1180px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── 2. Reset & bază ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--nav-h) + var(--bar-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: #fff;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.1;
  font-weight: 500;
  text-wrap: balance;
}

:focus-visible { outline: 2px solid var(--gold-sr); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -100px;
  z-index: 1000;
  background: var(--green); color: #fff;
  padding: 12px 20px;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   3. TIPOGRAFIE — regulile care fac site-ul consecvent
   ───────────────────────────────────────────────────────────────
   Aici se decid mărimile, greutățile și culorile. Fișierele de
   pagină NU au voie să redeclare font-size pe h1–h4 sau p: dacă o
   secțiune are nevoie de altceva, primește o clasă modificatoare
   definită tot aici.
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--text); text-wrap: balance; }

h1 { font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-head); }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-head); font-family: var(--sans); }

p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); }

/* ── FUNDALURI ÎNCHISE ──────────────────────────────────────
   Stratul de mai sus forțează culorile pentru fundal deschis, ceea ce
   ar face textul negru peste fotografii întunecate. Componentele cu
   fundal închis își declară explicit inversul.

   Când adaugi o secțiune cu fundal închis: fie îi pui clasa .on-dark,
   fie o treci în lista de aici. Nu lăsa culoarea pe seama hazardului. */
.on-dark, .fullbleed, .hero-body, #lightbox, .lb-caption {
  color: rgba(255,255,255,0.9);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.fullbleed h1, .fullbleed h2, .fullbleed h3, .fullbleed h4,
.hero-body h1, .hero-body h2 { color: #fff; }

.on-dark p, .fullbleed p, .hero-body p { color: rgba(255,255,255,0.9); }
.on-dark .eyebrow, .fullbleed .eyebrow, .hero-body .eyebrow { color: rgba(255,255,255,0.85); }
.on-dark a:not([class]), .fullbleed a:not([class]) { color: #fff; }

/* Modificatoare — singura cale corectă de a ieși din scară */
.t-display { font-size: var(--fs-display); font-weight: 400; line-height: var(--lh-tight); }
.t-lead    { font-size: var(--fs-lead);  line-height: var(--lh-body); color: var(--muted); }
.t-small   { font-size: var(--fs-small); line-height: 1.6; }
.t-micro   { font-size: var(--fs-micro); letter-spacing: 0.06em; }
.t-invert, .t-invert h1, .t-invert h2, .t-invert h3, .t-invert h4 { color: #fff; }
.t-invert p { color: rgba(255,255,255,0.9); }
.t-center  { text-align: center; }

/* ─── 3b. Elemente editoriale ───────────────────────────────── */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 18px;
}
.t-invert .eyebrow { color: rgba(255,255,255,0.9); }
.section-hdr { text-align: center; margin-bottom: 52px; }
.section-hdr p { max-width: 680px; margin: 18px auto 0; font-size: var(--fs-lead); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }

/* ─── 4. Bara de sus ────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 902;
  height: var(--bar-h);
  color: rgba(255,255,255,0.82);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.35s var(--ease);
}
.topbar-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.topbar-over {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.topbar-solid { background: var(--bar-solid); }

.topbar-sep { opacity: 0.5; }
.topbar-cta {
  font-weight: 700; color: #fff;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.55);
  transition: text-decoration-color 0.2s;
}
.topbar-cta:hover { text-decoration-color: #fff; }
/* Bara devine opacă odată cu navigația. Clasa o pune JS-ul,
   pentru că .topbar precede .nav în DOM și nu poate fi ținta
   unui selector de frate. */

/* ═══════════════════════════════════════════════════════════════
   5. NAVIGAȚIE — trei stări, o singură regulă
   ───────────────────────────────────────────────────────────────
   .nav-solid       → albă, opacă. IMPLICIT. Logo negru.
   .nav-over        → transparentă peste hero închis. Logo alb.
   .nav-over-light  → transparentă peste hero deschis. Logo negru.
   .scrolled        → suprascrie tot: albă, opacă, logo negru.

   Culorile nu se scriu de mai multe ori: fiecare stare setează
   --nav-fg, iar elementele o consumă. O stare nouă înseamnă o
   singură declarație, nu un lanț de suprascrieri.
   ═══════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: 900;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  --nav-fg: rgba(255,255,255,0.92);
  --nav-fg-soft: rgba(255,255,255,0.75);
}
.nav.nav-over-light,
.nav.nav-solid,
.nav.scrolled {
  --nav-fg: var(--muted);
  --nav-fg-soft: var(--muted-2);
}
.nav.nav-solid, .nav.scrolled {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(0,0,0,0.06);
  box-shadow: 0 2px 18px rgba(0,0,0,0.07);
}

/* PLASA DE SIGURANȚĂ.
   În modul transparent, navigația își desenează propriul voal.
   Contrastul nu mai depinde de cât de închisă e fotografia, deci
   nici o imagine luminoasă nu poate face logo-ul ilizibil. */
.nav-scrim {
  position: absolute; left: 0; right: 0;
  top: calc(-1 * var(--bar-h));
  height: calc(var(--bar-h) + var(--nav-h) + 44px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
/* Vignette de sus, nu bandă. Începe apăsat exact acolo unde stau
   logo-ul și linkurile, apoi se stinge repede, ca să se citească drept
   umbrire a cerului.

   Valoarea de 0.78 nu e aleasă din ochi: pe hero-ul actual banda de sus
   are luminanța 0.769 în zonele clare, iar textul alb ar avea 1.28:1.
   Cu voalul de aici ajunge la 4.7:1, adică peste pragul AA. */
.nav-over .nav-scrim {
  opacity: 1;
  background: linear-gradient(to bottom,
    rgba(8,14,11,0.78) 0%,
    rgba(8,14,11,0.62) 38%,
    rgba(8,14,11,0.30) 72%,
    rgba(8,14,11,0) 100%);
}
.nav-over-light .nav-scrim {
  opacity: 1;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.48) 55%, rgba(255,255,255,0) 100%);
}
.nav.scrolled .nav-scrim { opacity: 0; }

.nav-inner {
  position: relative; z-index: 1;
  max-width: var(--wrap); margin: 0 auto; padding: 0 40px;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}

/* Logo: două fișiere reale, comutate prin opacitate.
   Fără filtre CSS, deci fără artefacte pe liniile subțiri ale mărcii. */
.nav-logo { position: relative; display: block; flex: 0 0 auto; line-height: 0; }
.nav-logo img { height: var(--logo-h); width: auto; transition: opacity 0.35s var(--ease); }
/* Umbră fină DOAR peste fotografie. `:not(.scrolled)` e esențial:
   .nav-over rămâne pe element și după derulare, iar o umbră pe fundal
   alb arată murdar. */
.nav-over:not(.scrolled) .nav-link,
.nav-over:not(.scrolled) .nav-phone { text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.nav-over:not(.scrolled) .nav-logo img { filter: drop-shadow(0 1px 5px rgba(0,0,0,0.4)); }
.nav.scrolled .nav-logo img,
.nav.scrolled .nav-link,
.nav.scrolled .nav-phone { text-shadow: none; filter: none; }
.nav-logo-light { opacity: 1; }
.nav-logo-dark  { position: absolute; top: 0; left: 0; opacity: 0; }

.nav.nav-solid .nav-logo-light,
.nav.nav-over-light .nav-logo-light,
.nav.scrolled .nav-logo-light { opacity: 0; }
.nav.nav-solid .nav-logo-dark,
.nav.nav-over-light .nav-logo-dark,
.nav.scrolled .nav-logo-dark { opacity: 1; }

/* Elementele din meniu nu au voie să se înghesuie sau să se rupă pe
   două rânduri. Dacă nu mai încap, tăiem din spații și din etichete
   la praguri, nu lăsăm browserul să frângă cuvintele. */
.nav-list { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; }
.nav-item { position: relative; flex: 0 0 auto; }
/* `min-width: 0` lăsa meniul să fie comprimat sub lățimea conținutului.
   Linkurile au white-space: nowrap, deci textul ieșea din cutie și se
   suprapunea peste zona din dreapta în loc să fie tăiat. Cu max-content
   meniul își păstrează lățimea și împinge, nu se calcă. */
.nav-menu { flex: 0 1 auto; min-width: max-content; }

.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--nav-fg);
  padding: 30px 0;
  transition: color 0.35s var(--ease), opacity 0.2s;
  position: relative;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 26px;
  height: 1px; width: 0; background: currentColor; opacity: 0.65;
  transition: width 0.3s var(--ease);
}
.nav-item:hover > .nav-link::after,
.nav-item.is-active > .nav-link::after { width: 100%; }

.nav-caret { font-size: 0.85rem; opacity: 0.7; transition: transform 0.3s var(--ease); }
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* Submeniu — card discret, fără umpluturi colorate.
   Ierarhia se citește din tipografie și dintr-o săgeată care alunecă
   la hover, nu din benzi de culoare. */
.submenu {
  position: absolute; top: 100%; left: -18px;
  min-width: 286px;
  background: #fff;
  border: 1px solid rgba(20,30,25,0.07);
  box-shadow: 0 24px 56px -16px rgba(20,30,25,0.22),
              0 2px 6px rgba(20,30,25,0.05);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }

.submenu a {
  position: relative;
  display: block;
  padding: 13px 40px 13px 16px;
  transition: color 0.2s var(--ease);
}
.submenu li + li a { box-shadow: inset 0 1px 0 rgba(20,30,25,0.055); }

/* Săgeata apare din dreapta. Discretă, dar spune clar unde duce. */
.submenu a::after {
  content: '\2192';
  position: absolute; right: 16px; top: 50%;
  transform: translate(-8px, -50%);
  font-size: 0.95rem; color: var(--green);
  opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.24s var(--ease);
}
.submenu a:hover::after,
.submenu a[aria-current="page"]::after { opacity: 1; transform: translate(0, -50%); }

.submenu a:hover .submenu-label,
.submenu a[aria-current="page"] .submenu-label { color: var(--green); }
.submenu a:hover .submenu-note { color: var(--muted); }

.submenu-label {
  display: block; font-family: var(--sans);
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text); line-height: 1.35;
  transition: color 0.2s var(--ease);
}
.submenu-note {
  display: block; font-size: 0.76rem; font-weight: 500;
  color: var(--muted-2); letter-spacing: 0.01em; margin-top: 2px;
  transition: color 0.2s var(--ease);
}

.nav-right { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }

/* Telefonul: eticheta mică deasupra, numărul dedesubt. Numărul are
   exact fontul linkurilor din meniu (0.8rem / 600 / ls 0.05em), ca să
   citească drept încă un element al barei, nu ca un bloc străin.
   Grupat 3-3-3 (SITE_PHONE_H), cu tabular-nums ca grupurile să fie
   egale optic, nu doar ca text. Fără icon: bara are deja destule. */
.nav-phone {
  display: inline-flex; align-items: center;
  color: var(--nav-fg); white-space: nowrap;
  transition: color 0.35s var(--ease), opacity 0.2s;
}
.nav-phone:hover { opacity: 0.82; }

.nav-phone-txt { display: flex; flex-direction: column; line-height: 1.15; }
.nav-phone-label {
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase;
  opacity: 0.62;
}
.nav-phone-num {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* Linie subțire între zona de contact și butonul de acțiune.
   Separă informația de acțiune, fără să adauge o culoare nouă. */
.nav-divider {
  width: 1px; height: 26px;
  background: currentColor; opacity: 0.22;
  color: var(--nav-fg);
}

.nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px;
  background: rgba(255,255,255,0.14);
  color: #fff; border: 1px solid rgba(255,255,255,0.55);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-btn:hover { background: rgba(255,255,255,0.26); }
.nav-btn i { font-size: 1rem; }
@media (max-width: 1320px) { .nav-btn i { display: none; } }
.nav.nav-solid .nav-btn,
.nav.nav-over-light .nav-btn,
.nav.scrolled .nav-btn { background: var(--red); border-color: var(--red); color: #fff; }
.nav.nav-solid .nav-btn:hover,
.nav.nav-over-light .nav-btn:hover,
.nav.scrolled .nav-btn:hover { background: var(--red-dk); border-color: var(--red-dk); }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px 4px; }
.nav-toggle-bar {
  display: block; width: 24px; height: 1.5px; background: #fff;
  transition: background 0.35s var(--ease), transform 0.3s var(--ease), opacity 0.2s;
}
.nav.nav-solid .nav-toggle-bar,
.nav.nav-over-light .nav-toggle-bar,
.nav.scrolled .nav-toggle-bar { background: var(--text); }

/* Spațiu sub navigație pentru paginile fără hero */
.nav-solid ~ #main { padding-top: calc(var(--nav-h) + var(--bar-h)); }

/* ─── 6. Sidebar mobil ──────────────────────────────────────── */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(20,30,24,0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.drawer-scrim.show { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 950;
  width: min(360px, 88vw);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.38s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: -16px 0 48px rgba(0,0,0,0.18);
}
.drawer.open { transform: none; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.drawer-logo img { height: 38px; width: auto; }
.drawer-close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.4rem;
  border: 1px solid var(--border);
  transition: background 0.2s, color 0.2s;
}
.drawer-close:hover { background: var(--cream); color: var(--text); }

.drawer-nav { padding: 8px 0 4px; }
/* Ultimul element nu are linie: blocul de contact de dedesubt are deja
   border-top, iar două linii lipite arată ca o eroare. */
.drawer-item { border-bottom: 1px solid var(--border); }
.drawer-item:last-child { border-bottom: none; }

.drawer-link {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px;
  font-family: var(--serif); font-size: 1.08rem; font-weight: 500;
  color: var(--text); text-align: left;
  transition: background 0.2s, color 0.2s;
}
.drawer-link:hover { background: var(--cream); }
.drawer-link[aria-current="page"] { color: var(--green); }
.drawer-link i { font-size: 1rem; color: var(--muted-2); transition: transform 0.3s var(--ease); }
.drawer-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.drawer-sub { background: var(--cream); padding: 4px 0 10px; }
.drawer-sub a {
  display: block; padding: 11px 22px 11px 40px;
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
  position: relative;
  transition: color 0.2s;
}
/* O singură linie verticală de-a lungul submeniului, în locul liniuțelor
   de dinaintea fiecărui element. Pagina curentă o colorează în verde. */
.drawer-sub a::before {
  content: ''; position: absolute; left: 26px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.drawer-sub a:first-child::before { top: 6px; }
.drawer-sub a:last-child::before  { bottom: 6px; }
.drawer-sub a[aria-current="page"]::before { background: var(--green); }
.drawer-sub a:hover, .drawer-sub a[aria-current="page"] { color: var(--green); }

.drawer-contact {
  padding: 22px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.drawer-eyebrow {
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 700; margin-bottom: 2px;
}
.drawer-contact a, .drawer-addr {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.775rem; color: var(--muted); font-weight: 600;
}
.drawer-contact a:hover { color: var(--green); }
.drawer-contact i { font-size: 1.05rem; color: var(--green); width: 20px; }
.drawer-addr { font-weight: 400; }

/* Social și limba împart un rând, ca să nu mai coboare meniul. */
.drawer-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 22px 22px;
}
.drawer-social { display: flex; gap: 10px; }
.drawer-social a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.drawer-social a:hover { background: var(--green); color: #fff; border-color: var(--green); }
.drawer-social i { font-size: 1.1rem; }

.drawer-cta {
  margin: 0 22px 26px;
  display: block; text-align: center;
  padding: 15px 20px; background: var(--red); color: #fff;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s;
}
.drawer-cta:hover { background: var(--red-dk); }

/* ═══════════════════════════════════════════════════════════════
   7. BUTOANE — o singură anatomie, patru culori
   ───────────────────────────────────────────────────────────────
   REGULA: un buton arată ÎNTOTDEAUNA a buton. Casetă plină sau
   contur, niciodată text gol. Culoarea vine din brand: roșu pentru
   acțiunea principală, verde pentru secundară, crem pe fundal închis,
   contur pentru terțiar. Fiecare buton are un icon.

   Anatomia se aplică pe TOATE clasele de buton, inclusiv pe cele
   moștenite din pagina de referință. Altfel o clasă nedefinită se
   randează ca text simplu, ceea ce s-a și întâmplat cu
   .btn-hero-primary pe secțiunile fullbleed.
   ═══════════════════════════════════════════════════════════════ */
.btn,
.btn-red, .btn-green, .btn-cream, .btn-ghost, .btn-outline, .btn-wa,
.btn-primary, .btn-hero-primary, .btn-hero-text, .btn-submit,
.btn-wa-success, .drawer-cta, .gtab-see-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 32px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease),
              color 0.22s var(--ease), transform 0.15s var(--ease);
}
.btn i, .btn-red i, .btn-green i, .btn-cream i, .btn-ghost i,
.btn-outline i, .btn-wa i, .btn-primary i, .btn-hero-primary i,
.btn-submit i, .btn-wa-success i, .drawer-cta i, .gtab-see-all i {
  font-size: 1.08em; flex: 0 0 auto;
}
.btn:active, .btn-red:active, .btn-green:active,
.btn-cream:active, .btn-outline:active, .btn-ghost:active { transform: translateY(1px); }

/* ── Roșu: acțiunea principală. Un singur roșu pe ecran. ── */
.btn-red, .btn-hero-primary, .btn-submit, .drawer-cta {
  background: var(--red); color: #fff; border-color: var(--red);
}
.btn-red:hover, .btn-hero-primary:hover, .btn-submit:hover, .drawer-cta:hover {
  background: var(--red-dk); border-color: var(--red-dk); color: #fff;
}

/* ── Verde: acțiunea secundară pe fundal deschis ── */
.btn-green, .btn-primary, .gtab-see-all, .btn-wa-success {
  background: var(--green); color: #fff; border-color: var(--green);
}
.btn-green:hover, .btn-primary:hover, .gtab-see-all:hover, .btn-wa-success:hover {
  background: var(--green-dk); border-color: var(--green-dk); color: #fff;
}

/* ── Crem: pe fundal închis, unde albul ar fi prea dur ── */
.btn-cream {
  background: var(--cream); color: var(--green-dk); border-color: var(--cream);
}
.btn-cream:hover { background: #fff; border-color: #fff; color: var(--green-dk); }

/* ── Contur: terțiar. Pe fundal deschis, verde. ── */
.btn-outline, .btn-wa {
  background: transparent; color: var(--green); border-color: var(--green);
}
.btn-outline:hover, .btn-wa:hover { background: var(--green); color: #fff; }
.btn-wa i { color: var(--wa); }
.btn-wa:hover i { color: #fff; }

/* ── Contur pe fundal închis: alb ── */
.btn-ghost, .btn-hero-text {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.6);
}
.btn-ghost:hover, .btn-hero-text:hover { background: rgba(255,255,255,0.16); border-color: #fff; }

/* Pe secțiuni întunecate, conturul verde ar dispărea. */
.on-dark .btn-outline, .fullbleed .btn-outline, .hero-body .btn-outline,
.on-dark .btn-wa, .fullbleed .btn-wa, .hero-body .btn-wa {
  color: #fff; border-color: rgba(255,255,255,0.6);
}
.on-dark .btn-wa:hover, .fullbleed .btn-wa:hover, .hero-body .btn-wa:hover {
  background: rgba(255,255,255,0.16); border-color: #fff;
}

/* ── Dimensiuni ── */
.btn-lg { padding: 18px 42px; font-size: 0.82rem; }
.btn-sm { padding: 11px 22px; font-size: 0.72rem; }
.btn-block { width: 100%; }

/* Perechea de îndemnuri: principal + secundar, niciodată doi roșii. */
.cta-pair { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Nota mică de sub îndemn. Era folosită în markup fără să fie definită. */
/* Butoanele și nota de sub ele formează un bloc.
   `inline-flex` pe bloc înseamnă că lățimea lui e exact cât ocupă
   butoanele, deci nota se centrează sub ELE, nu în toată secțiunea. */
.cta-block {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
}
.cta-block .cta-pair { justify-content: center; }

.scarcity-hint {
  display: block; text-align: center;
  margin-top: 18px;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-2);
}

.on-dark .scarcity-hint, .fullbleed .scarcity-hint, .hero-body .scarcity-hint {
  color: rgba(255,255,255,0.8);
}


/* Eticheta scurtă e pentru mobil, unde două butoane trebuie să încapă
   pe același rând. Pe ecran mare se vede doar cea lungă. */
.btn-scurt { display: none; }

@media (max-width: 640px) {
  /* Măsurat pe 375px: între marginile hero-ului rămân 295px. Anatomia
     standard (32px padding, 0.78rem, ls 0.1em) cere 375px pentru perechea
     din hero, deci aici se strânge padding-ul, fontul și spațierea. */
  .cta-pair {
    flex-direction: row; flex-wrap: nowrap;
    align-items: stretch; width: 100%; gap: 8px;
  }
  .cta-pair > * { width: auto; min-width: 0; }
  /* Clasele sunt enumerate pentru că regulile de buton de mai jos în fișier
     au aceeași specificitate ca `.cta-pair > *` și ar câștiga prin ordine. */
  .cta-pair > .btn-red, .cta-pair > .btn-green, .cta-pair > .btn-cream,
  .cta-pair > .btn-primary, .cta-pair > .btn-hero-primary, .cta-pair > .btn-submit,
  .cta-pair > .btn-ghost, .cta-pair > .btn-outline, .cta-pair > .btn-wa,
  .cta-pair > .btn-hero-text, .cta-pair > .btn-wa-success, .cta-pair > .btn {
    padding: 15px 14px;
    font-size: 0.70rem; letter-spacing: 0.06em; gap: 7px;
  }
  /* Butonul principal ia spațiul rămas, cel secundar doar cât îi trebuie. */
  .cta-pair > .btn-red, .cta-pair > .btn-green, .cta-pair > .btn-cream,
  .cta-pair > .btn-primary, .cta-pair > .btn-hero-primary,
  .cta-pair > .btn-submit { flex: 1 1 auto; }
  .cta-pair > .btn-ghost, .cta-pair > .btn-outline,
  .cta-pair > .btn-wa, .cta-pair > .btn-hero-text { flex: 0 1 auto; }
  /* Singur pe rând, un buton rămâne pe toată lățimea. */
  .cta-pair > *:only-child { flex: 1 1 100%; }

  .btn-lung  { display: none; }
  .btn-scurt { display: inline; }
}

/* ─── 8. Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--green-dk); color: #fff;
  padding: 76px 40px 0;
  position: relative;
}
/* Linia aurie de sus a fost scoasă odată cu celelalte: pe textura cu
   brăduți, orice linie orizontală taie desenul. */

/* Textura cu brăduți din footerul actual, la aceeași opacitate (0,04) ca
   pe WordPress: se simte, dar nu concurează cu textul. Fișierul e cel de
   acolo, pe calea lui, nu unul refăcut.
   Stă pe ::after fiindcă ::before ține deja linia aurie de sus. */
.footer::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url('/wp-content/uploads/2025/07/pattern-logo-forest-retreat-luxury-villas-scaled.png');
  /* Fișierul e o compoziție de 2560x1440, iar pe WordPress e afișat la
     dimensiunea lui naturală, de unde brăduții mari. `cover` îl strângea
     la 58% pe un ecran de 1500px și îi făcea mărunți, iar o valoare fixă
     mică îi făcea și mai deși. `auto` păstrează scara desenului.
     Opacitatea e mult sub cea de pe WordPress (0,04): textura trebuie
     doar bănuită, nu citită. La 0,07 concura cu textul din footer. */
  background-repeat: repeat;
  background-position: center top;
  background-size: auto;
  opacity: 0.022;
  pointer-events: none;
}
/* Conținutul stă peste textură. */
.footer > *, .footer-inner, .footer-bottom { position: relative; z-index: 1; }

.footer-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr 1.1fr 1.15fr 1.35fr;
  gap: 26px;
  padding-bottom: 56px;
}

.footer-logo { display: block; line-height: 0; margin-bottom: 22px; }
.footer-logo-v { display: none; height: 96px; width: auto; }
.footer-logo-h { display: block; height: 52px; width: auto; }

.footer-tagline {
  font-size: 0.86rem; line-height: 1.8;
  color: rgba(255,255,255,0.7); margin-bottom: 24px;
}

.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.footer-social a:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--gold-sr); color: #fff;
  transform: translateY(-2px);
}
.footer-social i { font-size: 1.05rem; }

/* Fără linie sub titlu: textura din fundal are deja desen, iar liniile
   orizontale peste ea se băteau cap în cap. Ierarhia o fac spațiul și
   culoarea: titlul e auriu stins și distanțat, lista e albă-transparentă. */
.footer-col-title {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-sr, rgba(255,255,255,0.78));
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-static {
  font-size: 0.85rem; line-height: 1.5;
  color: rgba(255,255,255,0.7);
  display: flex; align-items: flex-start; gap: 9px;
  transition: color 0.2s;
}
.footer-col a:hover { color: #fff; }
.footer-col a[aria-current="page"] { color: var(--gold-sr); }
.footer-col i { font-size: 0.95rem; opacity: 0.75; margin-top: 3px; flex: 0 0 auto; }

.footer-bottom {
  max-width: var(--wrap); margin: 0 auto;
  padding: 26px 0 30px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 0.78rem; color: rgba(255,255,255,0.65);
}
.footer-made { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; }

/* ─── 9. WhatsApp flotant ───────────────────────────────────── */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 890;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  transition: transform 0.2s, box-shadow 0.2s;
}
/* Puls discret: un singur inel care se stinge, la 3,4s. Se oprește la
   hover și pentru cine a cerut mai puțină mișcare. */
@keyframes wa-puls {
  0%, 72%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.22), 0 0 0 0 rgba(37,211,102,0.45); }
  36%           { box-shadow: 0 4px 18px rgba(0,0,0,0.22), 0 0 0 13px rgba(37,211,102,0); }
}
.wa-float { animation: wa-puls 3.4s var(--ease) infinite; }
.wa-float:hover { transform: scale(1.07); box-shadow: 0 6px 24px rgba(0,0,0,0.3); animation: none; }
.wa-float i { font-size: 1.7rem; }

/* ─── 10. Banner cookie ─────────────────────────────────────── */
.cookie-bar {
  position: fixed; left: 22px; bottom: 22px; z-index: 960;
  max-width: 420px; background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  padding: 22px 24px;
  animation: cookieIn 0.4s var(--ease);
}
@keyframes cookieIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookie-bar p { font-size: 0.84rem; line-height: 1.65; color: var(--muted); margin-bottom: 16px; }
.cookie-bar a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-btn {
  flex: 1; padding: 10px 18px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cookie-reject:hover { background: var(--cream); }
.cookie-accept { background: var(--green); color: #fff; border-color: var(--green); }
.cookie-accept:hover { background: var(--green-dk); border-color: var(--green-dk); }

/* ─── 11. Reveal la scroll ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Desktop îngust — strângem spațiile înainte de a trece la sidebar */
/* Între 1181 și 1320 nu mai încape eticheta de deasupra numărului. */
@media (max-width: 1320px) {
  .nav-list { gap: 22px; }
}

@media (max-width: 1180px) {
  .nav-inner { padding: 0 24px; gap: 18px; }
  .nav-list { gap: 20px; }
  .nav-link { font-size: 0.75rem; letter-spacing: 0.03em; }
  .nav-right { gap: 14px; }
  .nav-divider { display: none; }
  /* Numărul urmează fontul linkurilor din meniu la fiecare prag. */
  .nav-phone-num { font-size: 0.75rem; letter-spacing: 0.03em; }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.2fr; gap: 20px; }
  .footer-col a, .footer-static { font-size: 0.8rem; }
}

/* Tabletă și mobil — navigația trece în sidebar */
@media (max-width: 1024px) {
  :root { --nav-h: 76px; --logo-h: 54px; }

  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-btn { padding: 10px 20px; font-size: 0.7rem; }

  .footer { padding: 60px 28px 0; }
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 24px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* Tabletă portret */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  /* Cu 5 coloane pe grilă de 2, ultima ar rămâne singură lângă un gol.
     O lățim pe tot rândul ca să arate intenționat. */
  .footer-contact { grid-column: 1 / -1; }
  .footer-contact ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
}

/* Mobil */
@media (max-width: 767px) {
  :root { --nav-h: 72px; --bar-h: 34px; --logo-h: 50px; }

  /* Categoriile principale ale meniului, puțin mai ferme pe mobil. */
  .drawer-link { font-weight: 600; }

  .wrap { padding: 0 20px; }
  .nav-inner { padding: 0 18px; gap: 12px; }
  .section-hdr { margin-bottom: 36px; }

  .topbar-inner { font-size: 0.6rem; letter-spacing: 0.08em; gap: 7px; padding: 0 12px; }
  .topbar-hide-sm { display: none; }

  .nav-phone { display: none; }
  .nav-btn { padding: 9px 16px; font-size: 0.66rem; letter-spacing: 0.07em; }

  /* Footer: logo vertical, centrat */
  .footer { padding: 52px 20px 0; text-align: center; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 38px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-logo { margin: 0 auto 20px; }
  .footer-logo-v { display: block; margin: 0 auto; height: 118px; }
  .footer-logo-h { display: none; }
  .footer-tagline { margin-left: auto; margin-right: auto; }
  .footer-social { justify-content: center; }
  .footer-col { text-align: left; }
  .footer-col-title { font-size: 0.64rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; font-size: 0.72rem; }

  .cookie-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px 20px; }
  .wa-float { width: 52px; height: 52px; right: 16px; bottom: 24px; }
  .wa-float i { font-size: 1.5rem; }
}

/* Mobil îngust */
@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr; gap: 26px; }
  .footer-col { text-align: center; }
  .footer-col a, .footer-static { justify-content: center; }
  .footer-col-title { margin-bottom: 12px; }
  .nav-btn { display: none; }
  /* Rămâne panou lateral, nu ecran plin: se vede o fâșie din pagină,
     ca utilizatorul să înțeleagă că poate închide atingând în afară. */
  .drawer { width: 86vw; }
  .footer-contact ul { grid-template-columns: 1fr; }
}

/* Ecrane joase în peisaj — sidebar-ul trebuie să rămână utilizabil */
@media (max-height: 520px) {
  .drawer-link { padding: 11px 22px; font-size: 1rem; font-weight: 600; }
  .drawer-contact { padding: 16px 22px; gap: 9px; }
  .drawer-cta { margin-bottom: 18px; padding: 12px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   13. HERO — componentă partajată de majoritatea paginilor
   Imaginea e <img>, nu background-image: preload scanner-ul
   browserului nu vede imaginile din CSS. Diferență măsurată pe
   landing page-urile existente: LCP de la 27s la 7s.
   ═══════════════════════════════════════════════════════════════ */
/* Dimensiunile hero-ului sunt cele de pe familie.forestretreatvillas.ro,
   landing page-ul care convertește deja. Sunt preluate din CSS-ul lui, nu
   aproximate: titlu clamp(2.8rem, 6.5vw, 5.4rem) cu line-height 1.06 și
   letter-spacing -0.01em, subtitlu 1.12rem/1.8, supratitlu 0.87rem cu
   0.22em, buton 0.78rem cu padding 15px 40px. Pe telefon, aceleași valori
   ca în media query-ul lui, nu mai mici. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + var(--bar-h) + 38px) 40px 100px;
  overflow: hidden;
  color: #fff;
}
.hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Trei straturi: o pată centrală care întunecă exact zona în care stă
     textul, un gradient vertical care ține nava și piciorul, și o vignetă
     care închide colțurile. Fără pata centrală, titlul alb se pierde pe
     fotografiile cu cer senin sau zăpadă în soare. */
  background:
    radial-gradient(ellipse 74% 60% at 50% 50%, rgba(6,10,14,0.46) 0%, rgba(6,10,14,0) 68%),
    linear-gradient(to bottom, rgba(10,18,14,0.66) 0%, rgba(10,18,14,0.44) 32%, rgba(10,18,14,0.60) 62%, rgba(10,18,14,0.88) 100%),
    radial-gradient(ellipse 98% 90% at 50% 46%, rgba(0,0,0,0) 46%, rgba(4,8,12,0.52) 100%);
}
.hero-body { position: relative; z-index: 2; max-width: 1120px; }

.hero-eyebrow {
  display: block;
  font-size: 0.87rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; font-weight: 500;
  margin-bottom: 32px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.hero h1 {
  /* Valorile de pe landing-ul corporate: clamp(2.6rem, 6vw, 5rem) și
     max-width 1000px. Prima dată am luat 2.8rem/6.5vw/5.4rem și 820px, de
     pe landing-ul de vile, dar acolo titlul are 24 de caractere pe rând.
     Cu 820px, titlurile mai lungi cădeau pe patru rânduri. */
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; color: #fff;
  max-width: 1000px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
  margin-bottom: 24px;
}
/* Titlurile lungi (homepage: 41 de caractere pe primul rând) au nevoie de
   mai multă lățime și de un pas mai jos, ca să rămână pe două rânduri,
   adică pe rândurile marcate cu <br> în text. */
.hero h1.h1-lung { max-width: 1240px; font-size: clamp(2.4rem, 5vw, 4.25rem); }
/* Pe telefon titlurile din hero au rânduri alese de mână: .br-d e ruptura
   de pe desktop, .br-m cea de pe telefon. --k e lățimea celui mai lung
   rând de pe telefon, în sute de pixeli la 100px (plus 5% rezervă), ca
   titlul să se micșoreze exact cât să nu mai rupă singur rândul. */
.hero h1 .br-m { display: none; }
@media (max-width: 767px) {
  .hero h1 .br-d { display: none; }
  .hero h1 .br-m { display: inline; }
  .hero h1[style*="--k"] {
    white-space: nowrap;
    font-size: min(2.6rem, calc((100vw - 48px) / var(--k)));
  }
}
.hero-sub {
  font-size: 1.12rem; line-height: 1.8; font-weight: 300;
  color: #fff;
  max-width: 680px; margin: 0 auto 52px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
/* Butoanele din hero au padding-ul de pe landing-ul de referință: 15px 40px,
   nu 32px. Diferența de 8px pe fiecare parte se vede, butonul nu mai pare
   strâns lângă un titlu de 5.4rem. */
.hero-ctas .btn-red, .hero-ctas .btn-ghost,
.hero-ctas .btn-hero-primary, .hero-ctas .btn-wa { padding: 15px 40px; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 36px;
  border: 1px solid rgba(255,255,255,0.6); color: #fff;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

.hero-hint {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,255,255,0.85);
}
.hero-hint i { color: var(--gold-sr); font-size: 0.7rem; }

/* Intrarea în scenă: o singură coregrafie la încărcare, eșalonată. */
.hero-eyebrow, .hero h1, .hero-sub, .hero-ctas, .hero-hint {
  opacity: 0; transform: translateY(18px);
  animation: heroIn 0.9s var(--ease) forwards;
}
.hero h1     { animation-delay: 0.10s; }
.hero-sub    { animation-delay: 0.20s; }
.hero-ctas   { animation-delay: 0.30s; }
.hero-hint   { animation-delay: 0.40s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  /* Ecranul întreg, nu 92%: fotografia trebuie să ajungă până jos, ca
     prima privire să fie doar hero. */
  .hero { padding: calc(var(--nav-h) + var(--bar-h) + 30px) 24px 48px; min-height: 100svh; }
  .hero-img { object-position: center 42%; }
  .hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; margin-bottom: 16px; white-space: normal; }
  .hero h1 { font-size: 2.6rem; font-weight: 500; }
  .hero h1.h1-lung { font-size: 2.25rem; }
  .hero-sub { font-size: 0.92rem; margin-bottom: 40px; }
  .hero-ctas { flex-direction: column; width: 100%; gap: 20px; }
  .hero-ctas .btn-red, .hero-ctas .btn-ghost,
  .hero-ctas .btn-hero-primary { width: 100%; justify-content: center; }

  /* Paginile de vile, homepage și team building folosesc .cta-block în
     hero, nu .hero-ctas. Regula comună de telefon le strânge unul lângă
     altul și le micșorează fontul la 11.2px, ca să încapă două pe un rând.
     În hero nu e nevoie: acolo încap pe verticală, la mărimea lor, ca pe
     landing-ul de referință. */
  .hero .cta-block { display: flex; width: 100%; gap: 20px; }
  .hero .cta-pair {
    flex-direction: column; flex-wrap: nowrap;
    width: 100%; gap: 20px;
  }
  .hero .cta-pair > .btn-red, .hero .cta-pair > .btn-ghost,
  .hero .cta-pair > .btn-wa, .hero .cta-pair > .btn-outline,
  .hero .cta-pair > .btn-hero-primary, .hero .cta-pair > .btn-hero-text {
    width: 100%; justify-content: center;
    padding: 15px 40px; font-size: 0.78rem; letter-spacing: var(--ls-button);
  }
  .hero .cta-block > .scarcity-hint,
  .hero .cta-block > .hero-hint { margin-top: 14px; font-size: 0.75rem; }

  /* Butoanele din hero sunt acum pe toată lățimea, deci textul lung încape.
     Eticheta scurtă e pentru butoanele înghesuite două pe un rând, nu
     pentru unul de 327px care spune „Rezervare" și lasă loc gol. */
  .hero .btn-lung  { display: inline; }
  .hero .btn-scurt { display: none; }
  .hero-hint { font-size: 0.75rem; letter-spacing: 0.1em; margin-top: 14px; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════
   14. FAQ — componentă partajată
   ───────────────────────────────────────────────────────────────
   Designul e cel din landing-urile existente: semnul „+" într-un
   cerc subțire, care se rotește 45° și devine „×". Păstrat ca atare.

   Două schimbări față de original, ambele necesare:
   1. Întrebarea e <button>, nu <div>: focusabilă de la tastatură,
      cu aria-expanded. Resetul de buton e mai jos.
   2. max-height 1600px, nu 500px. Pe /intrebari-frecvente/ există
      răspunsuri care depășeau 500px și erau tăiate.
   ═══════════════════════════════════════════════════════════════ */
.faq-section { background: var(--cream); padding: 96px 40px; }
.faq-inner   { max-width: 760px; margin: 0 auto; }
.faq-hdr     { text-align: center; margin-bottom: 52px; }
.faq-list    { margin-top: 40px; }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-q {
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 22px 0;
  font-family: var(--sans);
  font-size: 0.96rem; font-weight: 600; line-height: 1.5;
  color: var(--text);
  transition: color 0.2s;
}
.faq-q:hover { color: var(--green); }
.faq-q:focus-visible { outline: 2px solid var(--gold-sr); outline-offset: -2px; }

.faq-ico {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1px solid rgba(0,0,0,0.16); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 400; color: var(--muted);
  transition: transform 0.25s var(--ease), border-color 0.2s, color 0.2s;
}
.faq-q:hover .faq-ico { border-color: var(--green); color: var(--green); }
.faq-item.open .faq-ico { transform: rotate(45deg); border-color: var(--green); color: var(--green); }

.faq-a {
  font-size: var(--fs-body); color: var(--muted);
  line-height: 1.8; font-weight: 400;
  max-height: 0; overflow: hidden;
  transition: max-height 0.32s ease, padding-bottom 0.32s ease;
}
.faq-item.open .faq-a { max-height: 1600px; padding-bottom: 22px; }
.faq-a p { margin-bottom: 0; font-size: inherit; line-height: inherit; color: inherit; }

@media (max-width: 767px) { .faq-section { padding: 64px 20px; } }

/* ═══════════════════════════════════════════════════════════════
   15. ANTET DE PAGINĂ — tiparul pentru toate paginile interioare
   Orice pagină fără hero începe cu blocul ăsta. Same eyebrow, same
   h1, same subtitlu, aceeași respirație. Consecvența nu e o opțiune
   pe care o alege fiecare pagină, e o componentă.
   ═══════════════════════════════════════════════════════════════ */
/* Capul paginilor fără fotografie: aceeași verde ca subsolul, ca pagina
   să fie prinsă între două benzi de aceeași culoare. Pe fond închis,
   linia de jos nu mai are ce despărți, așa că dispare. */
.page-hdr {
  background: var(--green-dk);
  color: #fff;
  padding: 72px 0 64px;
  text-align: center;
}
/* Aceeași textură cu brăduți ca în footer, la aceeași opacitate, pe toate
   suprafețele mari de verde: capul paginilor și capul articolelor. Erau
   singurele bucăți întinse de verde plat din site, iar când se vedeau una
   sub alta cu footerul, pe pagini scurte, se simțea că sunt două lucruri
   diferite. Fișierul e cel de pe WordPress, pe calea lui.

   Nu se pune pe butoane, etichete sau chip-uri: la câțiva zeci de pixeli,
   textura devine o pată murdară, nu un desen. */
.page-hdr, .articol-cap { position: relative; isolation: isolate; }
.page-hdr::after, .articol-cap::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url('/wp-content/uploads/2025/07/pattern-logo-forest-retreat-luxury-villas-scaled.png');
  background-repeat: repeat;
  background-position: center top;
  background-size: auto;
  opacity: 0.022;
  pointer-events: none;
}
.page-hdr > *, .articol-cap > * { position: relative; z-index: 1; }

.page-hdr h1 { margin-bottom: 18px; color: #fff; }
.page-hdr .eyebrow { color: var(--gold-sr); }
.page-hdr .t-lead {
  max-width: 680px; margin: 0 auto;
  color: rgba(255,255,255,0.82);
}
.page-hdr a { color: #fff; text-decoration-color: var(--gold); }
.page-hdr a:hover { text-decoration-color: #fff; }
/* ── ALTERNANȚA DE FUNDAL ──────────────────────────────────
   Regula: o secțiune crem, una albă, pe rând. Culoarea NU se mai
   scrie în regula fiecărei secțiuni, ci se aplică prin clasă, în
   ordinea din pagină. Așa alternanța rămâne corectă chiar dacă
   mutăm, adăugăm sau ștergem secțiuni.

   Excepții: hero-ul și secțiunile cu fotografie pe toată lățimea
   (.fullbleed) își au propriul fundal și sunt sărite. */
/* Specificitatea de element (0,1,1) e intenționată: fișierele de pagină
   se încarcă DUPĂ main.css, deci o regulă simplă `.bg-cream` ar pierde
   în fața unui `.vile-section { background: ... }` rămas acolo.
   Aici alternanța trebuie să aibă ultimul cuvânt. */
section.bg-cream, div.bg-cream, article.bg-cream { background: var(--cream); }
section.bg-white, div.bg-white, article.bg-white { background: #fff; }

@media (max-width: 767px) { .page-hdr { padding: 44px 0 40px; } }

/* ═══════════════════════════════════════════════════════════════
   16. SELECTOR DE LIMBĂ
   Limba activă e text, nu link: nu are sens să dai click pe unde
   ești deja. Limba indisponibilă e vizibil inactivă, nu un link
   care duce în 404.
   ═══════════════════════════════════════════════════════════════ */
.lang-switch {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-switch > i { font-size: 1rem; opacity: 0.55; }
.lang-switch a, .lang-switch .lang-on, .lang-switch .lang-soon {
  padding: 3px 6px;
  transition: color 0.2s, background 0.2s;
}
.lang-switch .lang-on { color: inherit; opacity: 1; }
.lang-switch a { opacity: 0.6; }
.lang-switch a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.lang-switch .lang-soon { opacity: 0.38; cursor: default; }

/* În navigație: moștenește culoarea barei, deci merge și peste hero,
   și pe fundal alb, fără reguli separate. */
.lang-switch-nav { color: var(--nav-fg); }
.lang-switch-nav .lang-on { position: relative; }
.lang-switch-nav .lang-on::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 0;
  height: 1px; background: currentColor; opacity: 0.55;
}

/* În footer: lângă drepturile de autor. */
.lang-switch-footer { color: rgba(255,255,255,0.82); }

/* În sidebar: etichete întregi, pe rânduri, ca degetul să nimerească. */
.lang-switch-drawer {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 0; color: var(--muted);
}
.lang-switch-drawer > i { display: none; }
.lang-switch-drawer a,
.lang-switch-drawer .lang-on,
.lang-switch-drawer .lang-soon {
  width: auto; padding: 7px 11px; line-height: 1;
  border: 1px solid var(--border);
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.lang-switch-drawer .lang-on {
  background: var(--green); border-color: var(--green); color: #fff;
}
.lang-switch-drawer .lang-soon { color: var(--muted-2); opacity: 0.55; cursor: default; }

@media (max-width: 1180px) { .lang-switch-nav { display: none; } }

/* Adresa din footer e link către hartă, dar iconul rămâne în aceeași
   familie cu restul coloanei. Un accent auriu aici ar sugera o
   ierarhie care nu există. */

/* Text doar pentru cititoarele de ecran. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Formular de contact ───────────────────────────────────────
   Paginile cu modal își au formularul stilat în CSS-ul lor de pagină.
   Contactul îl are direct în pagină, deci regulile stau aici. */
.contact-form { margin-top: 24px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-form .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.contact-form label {
  font-size: var(--fs-small); font-weight: 600; color: var(--text);
}
.contact-form input, .contact-form textarea, .contact-form select {
  font-family: var(--sans); font-size: var(--fs-body); color: var(--text);
  padding: 12px 14px; border: 1px solid var(--line, var(--border)); border-radius: 0;
  background: #fff; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: 2px solid var(--green); outline-offset: -2px; border-color: var(--green);
}
.contact-form textarea { resize: vertical; min-height: 96px; }

.form-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-small); color: var(--muted); margin: 6px 0 22px;
}
.form-check input { margin-top: 3px; flex: 0 0 auto; width: auto; }
.form-check a { text-decoration: underline; color: var(--green); }

.form-ok {
  border: 1px solid var(--green); padding: 24px; margin-top: 24px;
  background: var(--cream);
}
.form-ok h3 { font-family: var(--sans); font-size: var(--fs-h4); font-weight: 700; margin-bottom: 8px; }
.form-ok p  { font-size: var(--fs-small); margin: 0; }

@media (max-width: 640px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* ─── Blocul de îndemn în secțiuni centrate ─────────────────────────
   .cta-block e `inline-flex` ca nota de dedesubt să se centreze sub
   butoane, nu sub toată secțiunea. Dar un element inline nu răspunde la
   `margin: auto`, așa că într-o secțiune centrată rămânea lipit stânga.
   Aici îl facem bloc de lățimea conținutului, centrat pe orizontală. */
.buyout-section .cta-block,
.salina-section .cta-block,
.comun-section .cta-block,
.amenities-inner > .cta-block,
.activities-inner > .cta-block,
.pricing-inner .cta-block,
.fullbleed .cta-block,
.section-hdr + .cta-block {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; margin-inline: 0;
}
/* Nota de dedesubt e mai lată decât butonul, așa că `width: fit-content`
   dădea blocului lățimea notei și butonul rămânea lipit stânga în el.
   Cu lățime plină și `align-items: center`, ambele se centrează. */
.buyout-section .cta-pair,
.salina-section .cta-pair,
.comun-section .cta-pair,
.amenities-inner > .cta-block .cta-pair,
.activities-inner > .cta-block .cta-pair,
.pricing-inner .cta-pair,
.fullbleed .cta-pair,
.section-hdr + .cta-block .cta-pair { justify-content: center; width: 100%; }

/* ─── Pagina de contact ─────────────────────────────────────────────
   Formularul și datele de contact pe același rând: cine scrie completează,
   cine sună are numărul la vedere fără să deruleze. */
.contact-section { padding: 88px 0; }
.contact-layout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
/* Formularul stă într-o casetă proprie: fără ea, câmpurile curgeau direct
   în pagină și se amestecau vizual cu lista de contact de alături. */
.contact-form-col {
  background: var(--cream); border: 1px solid var(--border);
  padding: 40px 38px;
}
.contact-form-col h2 { margin: 6px 0 14px; }
.contact-form-col > p { color: var(--muted); margin-bottom: 4px; }
.contact-form-col .contact-form input,
.contact-form-col .contact-form select,
.contact-form-col .contact-form textarea { background: #fff; }

.contact-info-col { position: sticky; top: calc(var(--nav-h) + 20px); }
.ci-titlu { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; margin: 6px 0 18px; }
.ci-card {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px;
  align-items: start; padding: 16px 18px; margin-bottom: 10px;
  border: 1px solid var(--line-2, var(--border)); background: var(--cream);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ci-card:hover { border-color: var(--green); transform: translateY(-2px); }
.ci-card > i { grid-row: 1 / 3; font-size: 1.3rem; color: var(--green); margin-top: 2px; }
.ci-et  { font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase;
          font-weight: 700; color: var(--muted-2); }
.ci-val { font-size: var(--fs-small); color: var(--text); font-weight: 600; line-height: 1.5; }
.ci-card-wa { border-color: var(--green); border-width: 2px; background: rgba(61,97,71,0.07); }

.ci-ore {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; margin-top: 18px; border-top: 1px solid var(--border);
}
.ci-ore > i { font-size: 1.2rem; color: var(--green); margin-top: 2px; }
.ci-ore strong { display: block; font-size: var(--fs-small); margin-bottom: 3px; }
.ci-ore span   { font-size: var(--fs-micro); color: var(--muted); line-height: 1.6; }

/* Harta stă lipită de footer, pe toată lățimea. */
.map-section { line-height: 0; border-top: 1px solid var(--border); position: relative; }
.map-section iframe { filter: saturate(0.9); }

/* Cât timp harta e blocată nu ocupă loc; în locul ei stă cardul cu adresa,
   care are aceeași înălțime, ca pagina să nu sară când harta pornește. */
.map-section iframe[data-blocat] { display: none; }

.harta-substitut {
  min-height: 420px; display: flex; align-items: center; justify-content: center;
  background: var(--cream); border-top: 1px solid var(--border);
  padding: 40px 20px; line-height: var(--lh-body);
}
.harta-substitut[hidden] { display: none; }
.harta-substitut-corp { max-width: 520px; text-align: center; }
.harta-substitut-corp .ti { font-size: 2rem; color: var(--green); display: block; margin-bottom: 12px; }
.harta-substitut-corp h2 { font-size: var(--fs-h3); margin-bottom: 6px; }
.harta-substitut-corp p { color: var(--muted); margin-bottom: 8px; }
.harta-nota { font-size: var(--fs-small); }
.harta-actiuni {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-form-col { padding: 28px 22px; }
  .contact-info-col { position: static; }
  .contact-section { padding: 56px 0; }
  .map-section iframe { height: 320px; }
  .harta-substitut { min-height: 320px; padding: 32px 16px; }
  .harta-actiuni .btn-outline { width: 100%; }
}

/* ─── Testimoniale pe paginile de vilă ──────────────────────────────
   Markup-ul (.t-grid/.t-card) a venit din landingurile portate, dar
   regulile lui nu au fost aduse odată cu el: citatele apăreau ca text
   simplu, fără casetă și pe o singură coloană. */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.t-card {
  background: #fff; border: 1px solid var(--border);
  padding: 30px 28px; display: flex; flex-direction: column;
}
.t-quote-mark {
  font-family: var(--serif); font-size: 3rem; line-height: 0.7;
  color: var(--green); opacity: 0.32; margin-bottom: 10px;
}
.t-text {
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.7;
  color: var(--text); margin: 0 0 18px; flex: 1;
}
.t-text strong { font-weight: 600; }
.t-author { font-size: var(--fs-small); font-weight: 700; color: var(--text); }
.t-meta   { font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--muted-2); margin-top: 3px; }

@media (max-width: 980px) { .t-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .t-grid { grid-template-columns: 1fr; gap: 16px; }
                            .t-card { padding: 24px 22px; } }

/* ─── Limba în bară: doar codul curent ──────────────────────────────
   Varianta „glob + RO + EN" ocupa ~93px din bară. Aici rămâne doar codul
   activ, iar celelalte limbi apar la clic. <details> ține starea. */
.lang-drop { position: relative; flex: 0 0 auto; }
.lang-drop summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 7px; color: var(--nav-fg);
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid transparent; transition: border-color 0.2s var(--ease), opacity 0.2s;
}
.lang-drop summary::-webkit-details-marker { display: none; }
.lang-drop summary:hover { opacity: 0.8; }
.lang-drop summary i { font-size: 0.8rem; transition: transform 0.25s var(--ease); }
.lang-drop[open] summary i { transform: rotate(180deg); }
.lang-drop[open] summary { border-color: currentColor; opacity: 1; }
.lang-drop summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.lang-drop-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 132px; padding: 6px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; gap: 2px;
}
.lang-drop-menu > * {
  display: flex; align-items: baseline; gap: 7px;
  padding: 9px 11px; font-family: var(--sans); font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); white-space: nowrap;
}
.lang-drop-menu .lang-on { background: var(--green); color: #fff; }
.lang-drop-menu a:hover  { background: var(--cream); }
.lang-drop-menu .lang-soon { color: var(--muted-2); cursor: default; }
.lang-drop-menu .lang-soon em {
  font-style: normal; font-size: 0.62rem; letter-spacing: 0.06em;
  text-transform: none; opacity: 0.85;
}
@media (max-width: 1180px) { .lang-drop { display: none; } }

/* ─── Subtitlul din hero, pe ecran mare ─────────────────────────────
   La 700px, subtitlurile mai lungi lăsau un ultim rând cu două cuvinte
   („câteva zile."). Măsurat pe cel mai lung de pe site (99 de caractere),
   780px îl aduc pe un singur rând; cele care tot se rup au acum al doilea
   rând plin, nu o văduvă. Doar pe desktop: pe mobil lățimea o dă ecranul. */
@media (min-width: 1025px) {
  .hero-sub { max-width: 780px; }
}

/* ─── Butonul secundar pe fundal deschis ────────────────────────────
   .btn-ghost e alb cu contur alb: e făcut pentru fotografii și secțiuni
   întunecate. Pe crem sau alb dispare complet. Aici îi dăm culorile
   închise, fără să atingem varianta de pe fundal întunecat. */
.bg-cream .btn-ghost, .bg-white .btn-ghost,
.page-hdr .btn-ghost, .contact-section .btn-ghost,
section:not(.hero) > .wrap .btn-ghost {
  color: var(--text); border-color: var(--line-2, var(--border));
}
.bg-cream .btn-ghost:hover, .bg-white .btn-ghost:hover,
.page-hdr .btn-ghost:hover, .contact-section .btn-ghost:hover {
  background: rgba(0,0,0,0.04); border-color: var(--green); color: var(--green);
}
/* Pe fotografie sau secțiune întunecată rămâne alb. */
.hero .btn-ghost, .fullbleed .btn-ghost, .on-dark .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,0.6);
}
.hero .btn-ghost:hover, .fullbleed .btn-ghost:hover, .on-dark .btn-ghost:hover {
  background: rgba(255,255,255,0.16); border-color: #fff; color: #fff;
}

/* ─── Panoul de dotări: ultimul rând centrat ────────────────────────
   Grila pe 4 coloane lăsa un rând final cu două elemente lipite stânga
   și un gol în dreapta. Cu flexbox, rândul incomplet se centrează. */
.amenity-panel.active {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.amenity-panel.active > * { flex: 0 1 calc(25% - 24px); min-width: 150px; }
@media (max-width: 900px) { .amenity-panel.active > * { flex: 0 1 calc(50% - 12px); } }
@media (max-width: 560px) { .amenity-panel.active > * { flex: 0 1 calc(50% - 8px); min-width: 0; } }

/* ─── Casetele de informații, pe fundalul potrivit ──────────────────
   .comun-item avea doar contur, fără fundal: pe o secțiune crem se
   confunda cu ea. Acum caseta ia culoarea opusă secțiunii, ca să se
   desprindă de fond în ambele situații. */
.bg-cream .comun-item, .comun-section.bg-cream .comun-item { background: #fff; }
.bg-white .comun-item, .comun-section.bg-white .comun-item { background: var(--cream); }
.comun-item { transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
a.comun-item:hover { border-color: var(--green); transform: translateY(-2px); }

/* ─── Bandă ANPC și credit, în josul footerului ─────────────────────
   Badge-urile stau pe fundal alb, deci primesc o casetă proprie ca să
   nu pară lipite pe verde. Se micșorează pe mobil și se stivuiesc. */
.footer-anpc {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px; padding: 34px 0 6px;
  position: relative; z-index: 1;
}
.footer-anpc a {
  display: block; line-height: 0;
  border-radius: 6px; overflow: hidden;
  opacity: 0.92; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-anpc a:hover { opacity: 1; transform: translateY(-2px); }
.footer-anpc img { display: block; height: 46px; width: auto; }

/* Creditul stă pe rândul de jos, în locul în care era mesajul comercial. */
a.footer-made { transition: color 0.2s var(--ease); }
a.footer-made:hover { color: rgba(255,255,255,0.95); }

@media (max-width: 560px) {
  .footer-anpc { gap: 10px; padding-top: 26px; }
  .footer-anpc img { height: 38px; }
}

/* ═══ CONSIMȚĂMÂNT COOKIE ════════════════════════════════════════════
   Bannerul stă jos, pe toată lățimea, fără voal peste pagină: omul poate
   citi site-ul înainte să decidă. Cele trei butoane au aceeași formă și
   aceeași mărime, fiindcă EDPB cere ca refuzul să fie la fel de ușor ca
   acceptul; doar cel de accept are fond plin, ca reper vizual. */

.cons {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  background: #fff; border-top: 1px solid var(--line-2, var(--border));
  box-shadow: 0 -8px 34px rgba(0,0,0,0.12);
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: cons-intra 0.4s var(--ease) both;
}
@keyframes cons-intra { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cons { animation: none; } }

.cons-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.cons-text { flex: 1 1 420px; min-width: 0; }
.cons-text h2 {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
  color: var(--text); margin-bottom: 6px;
}
.cons-text p { font-size: var(--fs-small); color: var(--muted); margin: 0; line-height: 1.6; }
.cons-text a { color: var(--green); text-decoration: underline; }

.cons-actiuni { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

.cons-btn {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 20px; border: 1px solid var(--line-2, var(--border));
  background: #fff; color: var(--text); cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cons-btn:hover { border-color: var(--green); color: var(--green); }
.cons-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cons-btn-pri { background: var(--green); border-color: var(--green); color: #fff; }
.cons-btn-pri:hover { background: var(--green-dk); border-color: var(--green-dk); color: #fff; }

/* ─── Fereastra de preferințe ─────────────────────────────────────── */
.cons-modal { position: fixed; inset: 0; z-index: 9995; display: flex;
              align-items: center; justify-content: center; padding: 20px; }

/* Regula de deasupra pune `display: flex` și, fiind scrisă de noi, bate
   `[hidden] { display: none }` din foaia browserului. Fără rândul de mai
   jos, fereastra de preferințe rămâne pe ecran deși JS o marchează
   ascunsă, deci apare singură peste banner la fiecare vizitator nou.
   Aceeași plasă și pentru banner, ca să nu se repete dacă i se adaugă
   cândva un `display`. */
.cons-modal[hidden],
.cons[hidden] { display: none; }
.cons-scrim { position: absolute; inset: 0; background: rgba(8,12,10,0.6); }
.cons-box {
  position: relative; background: #fff; width: 100%; max-width: 640px;
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0,0,0,0.3);
}
.cons-box-cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 26px 18px; border-bottom: 1px solid var(--border);
}
.cons-box-cap h2 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; margin: 0; }
.cons-x {
  background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px;
}
.cons-x:hover { color: var(--text); }
.cons-x:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.cons-box-corp { overflow-y: auto; padding: 22px 26px; -webkit-overflow-scrolling: touch; }
.cons-intro { font-size: var(--fs-small); color: var(--muted); margin-bottom: 22px; }

.cons-cat { padding: 18px 0; border-bottom: 1px solid var(--border); }
.cons-cat:last-child { border-bottom: 0; padding-bottom: 4px; }
.cons-cat-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer; margin-bottom: 8px;
}
.cons-comutator-fix, .cons-comutator-fix * { cursor: default; }
.cons-cat-nume { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--text); }
.cons-cat-desc { font-size: var(--fs-small); color: var(--muted); margin: 0 0 8px; line-height: 1.65; }
.cons-cat-meta { font-size: var(--fs-micro); color: var(--muted-2); margin: 0; line-height: 1.6; }

/* comutatorul: caseta reală rămâne, dar e ascunsă vizual, ca tastatura
   și cititoarele de ecran să funcționeze normal */
.cons-comutator { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cons-comutator input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px;
}
.cons-pastila {
  display: block; width: 46px; height: 26px; border-radius: 13px;
  background: var(--line-2, #c9c9c9); position: relative;
  transition: background 0.25s var(--ease);
}
.cons-pastila::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.25s var(--ease);
}
.cons-comutator input:checked + .cons-pastila { background: var(--green); }
.cons-comutator input:checked + .cons-pastila::after { transform: translateX(20px); }
.cons-comutator input:disabled + .cons-pastila { background: var(--green); opacity: 0.45; }
.cons-comutator input:focus-visible + .cons-pastila { outline: 2px solid var(--green); outline-offset: 3px; }
.cons-mereu { font-size: var(--fs-micro); color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; }

.cons-box-jos {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  padding: 18px 26px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--cream);
}

@media (max-width: 860px) {
  .cons-inner { gap: 18px; }
  .cons-actiuni { width: 100%; }
  .cons-btn { flex: 1 1 auto; text-align: center; justify-content: center; padding: 13px 14px; }
}
@media (max-width: 560px) {
  .cons { padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .cons-actiuni { flex-direction: column; }
  .cons-btn { width: 100%; }
  .cons-box-cap, .cons-box-corp, .cons-box-jos { padding-left: 18px; padding-right: 18px; }
  .cons-box-jos { flex-direction: column-reverse; }
  .cons-box-jos .cons-btn { width: 100%; }
  .cons-box { max-height: 92vh; }
}

/* ─── Acordul din formulare ──────────────────────────────────────────
   Bifa nu e niciodată preselectată: consimțământul trebuie să fie o
   acțiune a persoanei, nu o setare implicită. Textul e mic, dar lizibil
   (nu sub 12px), iar zona de clic cuprinde tot rândul. */
.form-acord {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 18px 0 22px; cursor: pointer;
  font-size: var(--fs-small); color: var(--muted); line-height: 1.6;
}
.form-acord input[type="checkbox"] {
  margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px;
  accent-color: var(--green); cursor: pointer;
}
.form-acord a { color: var(--green); text-decoration: underline; }
.form-acord input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ═══ FORMULARE: capcană, eroare, succes ═════════════════════════════
   Capcana trebuie să fie invizibilă pentru om, dar completabilă de un
   robot. `display: none` ar fi cea mai simplă cale și tocmai de aceea
   roboții buni o verifică; de aceea câmpul e scos din ecran, nu ascuns. */

.camp-capcana {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-eroare {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #fdf3f2;
  border-left: 3px solid var(--red, #A84940);
  color: #7a2f28;
  font-size: var(--fs-small);
  line-height: 1.55;
}
.form-eroare[hidden] { display: none; }

.form-succes {
  padding: 22px 24px;
  background: var(--cream);
  border-left: 3px solid var(--green);
  line-height: var(--lh-body);
}
.form-succes strong { display: block; margin-bottom: 4px; color: var(--text); }

/* ═══ BENZILE CU FOTOGRAFIE PE TOATĂ LĂȚIMEA ════════════════════════
   Fiecare bandă își aduce propriul voal, dar acela e un gradient de
   sus în jos: întunecă marginile la fel de mult ca centrul, iar acolo
   unde stă titlul fotografia rămâne la fel de aglomerată.

   Peste el punem o pată întunecată în mijloc, care se stinge spre
   margini. Textul câștigă contrast exact unde e, fotografia rămâne
   vizibilă pe margini. Aceeași rezolvare ca la hero.

   Regula stă aici, nu în foile de pagină, ca să prindă toate benzile
   de pe tot site-ul, inclusiv pe cele adăugate mai târziu. */

/* Așezarea de bază a benzii. Era scrisă doar în home.css și vila.css,
   deci o pagină care nu încarcă una dintre ele (blogul, de pildă) avea
   banda fără centrare și fără spațiere. Aici o are toată lumea. */
.fullbleed {
  position: relative; isolation: isolate;
  min-height: 460px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 40px; color: #fff;
}
.fullbleed-inner { max-width: 780px; }
.fullbleed h2 { margin-bottom: 20px; text-shadow: 0 2px 24px rgba(0,0,0,0.3); }
.fullbleed p  { margin-bottom: 30px; }

@media (max-width: 767px) {
  .fullbleed { padding: 56px 20px; min-height: 340px; }

  /* Subtitlul antetului de pagină, cu 2px mai mic pe telefon. La 17px,
     textele de patru rânduri făceau antetul mai înalt decât conținutul
     de sub el. */
  .page-hdr .t-lead { font-size: 0.94rem; }

  /* Titlul benzilor, mai mare pe telefon. La 1.75rem, cât dădea clamp-ul
     la 375px, arăta mai mic decât butonul de dedesubt, care e scris cu
     majuscule și spațiat. 2rem e pasul următor care încape încă:
     cel mai lung titlu din site are 72 de caractere și rămâne pe 3
     rânduri. Valoarea e una singură, pentru toate paginile. */
  .fullbleed h2 { font-size: 2rem; line-height: 1.14; }
}

.fullbleed::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 64% at 50% 50%, rgba(3,7,5,0.52) 0%, rgba(3,7,5,0) 70%),
    radial-gradient(ellipse 96% 90% at 50% 50%, rgba(0,0,0,0) 52%, rgba(3,7,5,0.34) 100%);
}

/* Conținutul rămâne deasupra petei. */
.fullbleed > *,
.fullbleed-inner { position: relative; z-index: 1; }

/* ─── Banda de dinaintea footerului ────────────────────────────────
   Mai înaltă decât celelalte, fiindcă e ultimul lucru pe care îl vede
   omul înainte să plece.

   Am încercat aici și un degrade care aducea verdele footerului peste
   fotografie, ca trecerea să nu mai fie o linie dreaptă. Nu a ieșit:
   verdele acoperea jumătate de imagine și se vedea ca o ceață, nu ca o
   trecere. Rămâne tăietura curată. */
.fullbleed.fb-final { min-height: 560px; }

@media (max-width: 767px) {
  .fullbleed.fb-final { min-height: 420px; }
}

/* Butonul de trimitere al formularului de contact stă la stânga, sub
   câmpuri, aliniat cu ele. Regula comună `.cta-block` centrează, fiindcă
   e gândită pentru îndemnurile din mijlocul paginii; într-un formular,
   centrarea rupe coloana pe care o formează câmpurile. */
.contact-form .cta-block  { align-items: flex-start; }
.contact-form .cta-pair   { justify-content: flex-start; }
.contact-form .scarcity-hint { text-align: left; }

/* Intrarea în redacție, în subsol. Nu e pentru vizitatori, dar nici
   ascunsă: cine scrie articolele trebuie s-o găsească fără să ceară
   adresa de fiecare dată. */
/* În coloana „Informații" acum, nu în bara de copyright. Rămâne mai
   ștearsă decât linkurile de deasupra ei: e o intrare pentru cine scrie
   articolele, nu o pagină pentru oaspeți. */
.footer-col .footer-redactie {
  color: rgba(255,255,255,0.42); letter-spacing: 0.06em;
}
.footer-col .footer-redactie:hover { color: #fff; }

/* Limba: pe același rând cu restul listei, cu spațiu deasupra care o
   desparte de linkurile de pagini. */
.footer-limbi { margin-top: 6px; }
.footer-limbi .lang-switch-footer {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.86rem;
}
.footer-limbi .lang-switch-footer i { font-size: 1rem; opacity: 0.7; }
.footer-limbi .lang-on { color: #fff; font-weight: 600; }
.footer-limbi .lang-soon { color: rgba(255,255,255,0.38); cursor: default; }


/* ═══ RECENZII ══════════════════════════════════════════════════════
   O singură secțiune de recenzii pentru tot site-ul: homepage, vile,
   team building. Stă în main.css, nu într-o foaie de pagină, fiindcă
   apare pe pagini care încarcă foi diferite.

   Casetele sunt egale ca înălțime, cu semnătura împinsă jos: un citat
   de un rând și unul de patru arată tot ca două casete, nu ca două
   forme diferite. */

.rec-sectiune { padding: 88px 40px; }
.rec-inner    { max-width: 1060px; margin: 0 auto; }
.rec-cap      { text-align: center; margin-bottom: 40px; }
.rec-cap h2   { margin-top: 12px; }

/* Notele, ca subtitlu. Ocupau înainte o secțiune întreagă, cu chenar
   sus și jos, pentru două cifre. */
.rec-note { display: flex; justify-content: center; align-items: center;
            flex-wrap: wrap; gap: 28px; margin: 18px 0 0; }
.rec-nota { display: inline-flex; align-items: baseline; gap: 9px; }
.rec-nota + .rec-nota { padding-left: 28px; border-left: 1px solid var(--border); }
.rec-nota-cifra { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem;
                  line-height: 1; color: var(--text); }
.rec-nota-sursa { font-size: 0.66rem; letter-spacing: 0.14em;
                  text-transform: uppercase; color: var(--muted); }
.rec-stele { color: #d8a22e; font-size: 0.8rem; letter-spacing: 1px; }

.rec-grid   { display: grid; gap: 22px; }
.rec-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rec-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rec-grid > * { min-width: 0; }

.rec-card { display: flex; flex-direction: column; height: 100%;
            background: var(--cream); border: 1px solid rgba(61,97,71,0.14);
            padding: 28px 28px 24px; }
.rec-text { font-family: 'Cormorant Garamond', serif; font-size: 1.28rem;
            font-weight: 400; color: var(--text); line-height: 1.55;
            margin: 0 0 18px; }
.rec-text strong { font-weight: 600; }

/* Semnătura coboară la baza casetei, oricât de scurt ar fi citatul. */
.rec-jos { margin-top: auto; display: flex; align-items: center;
           flex-wrap: wrap; gap: 6px 10px; }
.rec-autor { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
             color: var(--text); font-weight: 700; font-family: 'Nunito', sans-serif; }
.rec-meta  { flex: 1 1 100%; font-size: 0.72rem; color: var(--muted); }

@media (max-width: 900px) {
  .rec-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .rec-sectiune { padding: 56px 20px; }
  .rec-grid, .rec-grid-2, .rec-grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .rec-card { padding: 22px 20px 20px; }
  .rec-text { font-size: 1.14rem; }
  /* Pe telefon notele nu încap una lângă alta: „52 recenzii" ieșea din
     ecran. Una sub alta, fără linia care nu mai desparte nimic. */
  .rec-note { flex-direction: column; gap: 10px; margin-top: 16px; }
  .rec-nota + .rec-nota { padding-left: 0; border-left: none; }
  .rec-nota-cifra { font-size: 1.55rem; }
}

/* Creditele foto: obligatorii pentru licențele CC, dar nu sunt conținut.
   Rămân lizibile și la vedere, fără să concureze cu textul paginii. */
.foto-credite {
  margin: 36px auto 0; max-width: 900px;
  font-size: 0.72rem; line-height: 1.7; color: var(--muted-2, var(--muted));
  text-align: center;
}
.foto-credite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foto-credite a:hover { color: var(--green); }

/* ═══ ÎNDEMNUL DIN CASETE ══════════════════════════════════════════
   „Citește articolul", „Vezi activitățile" și celelalte erau doar text
   verde cu o săgeată. Pe o caseta al cărei întreg e clickabil, nimeni nu
   le citea ca butoane. Primesc un contur, ca butoanele mici de pe
   cardurile de vile, deci același semn pentru același rol.

   Stau în main.css, o dată, ca blogul și homepage-ul să nu se
   despartă în stil la prima modificare pe una din foi. */
.blog-card-link,
.poarta-link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--green);
  font-family: 'Nunito', sans-serif; font-size: var(--fs-micro);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green); background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* Caseta întreagă e linkul, deci starea de hover vine de la ea. */
.blog-card:hover .blog-card-link,
.blog-card:focus-within .blog-card-link,
.poarta:hover .poarta-link,
.poarta:focus-within .poarta-link {
  background: var(--green); color: #fff; border-color: var(--green);
}
.blog-card-link i, .poarta-link i { transition: transform 0.25s; }
.blog-card:hover .blog-card-link i,
.poarta:hover .poarta-link i { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .blog-card-link, .poarta-link,
  .blog-card-link i, .poarta-link i { transition: none; }
  .blog-card:hover .blog-card-link i,
  .poarta:hover .poarta-link i { transform: none; }
}

/* ═══ SECȚIUNILE PE DOUĂ COLOANE, PE TELEFON ═══════════════════════
   Ordinea e mereu aceeași: titlu, poză, conținut. Omul vede despre ce e
   vorba, apoi locul, apoi detaliile. Totul centrat.

   Regula stă aici, în main.css, o singură dată. Era scrisă identic în
   home.css și în team-building.css, iar când am reparat-o am reparat doar
   una: pagina de sărbători, care încarcă team-building.css, a rămas cu
   varianta veche, cu supratitlul sub poză și textul lipit de marginea
   ecranului. Două copii ale aceleiași reguli înseamnă că a doua se uită.

   `!important` pe înălțimi e necesar fiindcă foile de pagină se încarcă
   după main.css și pun acolo valori pentru desktop. */
@media (max-width: 600px) {
  .split { display: flex !important; flex-direction: column; }
  /* Selector cu un nivel în plus: `.split-body { display: flex }` din
     home.css și team-building.css are aceeași specificitate și se încarcă
     după main.css, deci ar câștiga. Fără `contents`, poza nu mai e frate
     cu textul și nu se poate strecura între titlu și paragrafe: rămânea
     ultima pe pagină. */
  .split > .split-body { display: contents; }

  /* Implicit, orice bucată de conținut vine după poză, cu gutieră. */
  .split > .split-body > * { order: 3; padding-inline: 20px; text-align: center; }
  .split > .split-body > *:last-child { padding-bottom: 40px; }

  /* Supratitlul și titlul urcă deasupra pozei. */
  .split > .split-body > .eyebrow,
  .split > .split-body > h2,
  .split > .split-body > h3,
  .split > .split-body > .split-hdr { order: 1; }
  .split > .split-body > .eyebrow { padding-top: 36px; }
  .split > .split-body > h2 { margin-bottom: 0; }

  /* Poza pe 3:2, nu pe format înalt: la ATV se vedeau munții și jumătate
     de roată. Cu spațiu de respirat sus și jos. */
  .split-img {
    order: 2; height: auto !important; min-height: unset !important;
    aspect-ratio: 3/2; width: 100%; margin: 30px 0 28px; padding: 0;
  }
  .split-img img { height: 100%; object-position: center center; }

  /* Listele și îndemnurile, centrate ca restul. */
  .split > .split-body > ul,
  .split > .split-body > ol { list-style-position: inside; }
  .split > .split-body > .cta-block,
  .split > .split-body > .cta-pair { align-items: center; justify-content: center; }

  /* Paginile cu învelișuri (acasă, team building) își păstrează spațierea. */
  .split-hdr { padding: 40px 20px 24px; }
  .split-content { order: 3; padding: 24px 20px 40px; text-align: center; }
}

/* Notă de serviciu sub o grilă de carduri: icon în cerc, titlu, o frază.
   Pentru servicii fără fotografie, ca să nu stea ca un card gol printre
   cele cu imagine. */
.serviciu-nota {
  display: flex; align-items: flex-start; gap: 18px;
  max-width: 720px; margin: 48px auto 0; padding: 26px 28px;
  background: #fff; border: 1px solid var(--border);
}
.serviciu-nota > i {
  flex: 0 0 52px; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(61,97,71,0.18); border-radius: 50%;
  color: var(--green); font-size: 1.5rem;
}
.serviciu-nota h3 { font-size: var(--fs-h3); margin: 4px 0 6px; }
.serviciu-nota p  { margin: 0; color: var(--muted); }
@media (max-width: 600px) {
  .serviciu-nota { flex-direction: column; align-items: center; text-align: center; padding: 22px 20px; }
}

/* ═══ DESPRE NOI ═══════════════════════════════════════════════════════
   Textul clientului e o poveste lungă, spusă la persoana întâi. Stă într-o
   coloană îngustă, ca un text de citit, nu într-o grilă de casete. */
.despre-proza { padding: 88px 24px; }
.despre-proza-inner { max-width: 640px; margin: 0 auto; }
.despre-proza p {
  font-size: 1.02rem; line-height: 1.85; color: var(--muted);
  margin: 0 0 18px;
}
.despre-proza .despre-accent {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.4;
  color: var(--text); margin: 34px 0; text-align: center;
}
.despre-proza .despre-bun-venit {
  font-family: var(--serif); font-size: 1.35rem; color: var(--green-dk);
  margin-top: 30px;
}
.despre-proza .despre-semnatura {
  font-family: var(--serif); font-style: italic; font-size: 1.25rem;
  color: var(--text); margin: 0;
}

/* Cele cinci stele: centrat, sobru. Fotografia certificatului, când
   vine de la client, se așază aici. */
.stele-section { padding: 80px 24px; text-align: center; }
.stele-inner { max-width: 620px; margin: 0 auto; }
.stele-marca { color: #d8a22e; font-size: 1.4rem; letter-spacing: 4px; margin-bottom: 18px; }
.stele-marca i { margin: 0 2px; }
.stele-inner h2 { margin: 10px 0 16px; }
.stele-inner p { color: var(--muted); }

@media (max-width: 600px) {
  .despre-proza { padding: 56px 20px; }
  .despre-proza .despre-accent { font-size: 1.28rem; }
  .stele-section { padding: 56px 20px; }
}

/* ═══ FORMULARUL „VERIFICAȚI DISPONIBILITATEA" ════════════════════════
   Aceeași formă ca formularul de pe pagina de sărbători, cu prefix propriu
   (disp-) ca să nu se încurce cu acela, care are stilurile în pagină. Se
   deschide cu :target. */
.disp-modal { display: none; position: fixed; inset: 0; z-index: 9500;
              overflow-y: auto; -webkit-overflow-scrolling: touch; }
.disp-modal:target { display: block; }
.disp-voal  { position: fixed; inset: 0; background: rgba(14,24,18,0.66); backdrop-filter: blur(2px); }
.disp-cutie { position: relative; max-width: 800px; margin: 48px auto; background: #fff;
              padding: 52px 52px 44px; box-shadow: 0 30px 80px rgba(14,24,18,0.34); }
.disp-inchide {
  position: absolute; top: 14px; right: 14px; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.3rem; border: 1px solid var(--border); background: #fff;
  transition: color .2s, background .2s, border-color .2s;
}
.disp-inchide:hover, .disp-inchide:focus-visible { color: #fff; background: var(--green); border-color: var(--green); }
.disp-cap { text-align: center; margin-bottom: 34px; }
.disp-cap h2 { margin: 10px 0 12px; }
.disp-cap p  { color: var(--muted); max-width: 560px; margin: 0 auto; }

.disp-pas { margin-bottom: 30px; }
.disp-q {
  display: block; margin-bottom: 12px;
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-dk);
}
.disp-optiuni { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.disp-optiuni.patru { grid-template-columns: repeat(4, 1fr); }
.disp-optiuni input { position: absolute; opacity: 0; pointer-events: none; }
.disp-optiuni label {
  display: block; padding: 14px 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--border); background: var(--cream);
  transition: border-color .2s, background .2s;
}
.disp-optiuni label:hover { border-color: var(--green); }
.disp-optiuni input:checked + label { border-color: var(--green); background: #fff; box-shadow: inset 0 0 0 1px var(--green); }
.disp-optiuni input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; }
.disp-optiuni .o-nume { display: block; font-weight: 700; color: var(--text); }
.disp-optiuni .o-det  { display: block; font-size: .85rem; color: var(--muted-2); margin-top: 2px; }

.disp-randuri { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.disp-camp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.disp-camp .lbl { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.disp-camp input {
  font-family: var(--sans); font-size: var(--fs-body); color: var(--text);
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 0; background: #fff; width: 100%;
}
.disp-camp input:focus { outline: none; border-color: var(--green); }
.disp-hint { font-size: .88rem; color: var(--red); margin: 10px 0 0; min-height: 1.2em; }
.disp-hint.ok { color: var(--green); }
.disp-previzualizare {
  background: var(--cream); border: 1px solid var(--border); padding: 18px 20px;
  font-size: .95rem; color: var(--muted); line-height: 1.7; margin-bottom: 20px;
}
.disp-fin { font-size: var(--fs-small); color: var(--muted-2); text-align: center; margin: 16px 0 0; }
.disp-form .cta-block { display: flex; justify-content: center; }

@media (max-width: 860px) { .disp-optiuni, .disp-optiuni.patru { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .disp-cutie   { margin: 0; padding: 56px 20px 32px; min-height: 100%; }
  .disp-inchide { top: 10px; right: 10px; }
}
@media (max-width: 460px) {
  .disp-optiuni, .disp-optiuni.patru { grid-template-columns: 1fr; }
  .disp-randuri { grid-template-columns: 1fr; }
}