/* =============================================================
   Felicia Meresescu — Psihoterapeut integrativ
   Paletă extrasă direct din materialul de brand:
     verde  #033D2E   auriu #C08B47 → #EFBA76   crem #EDDFD2
   ============================================================= */

:root {
  /* culori */
  --verde:        #033D2E;
  --verde-adanc:  #01251B;
  --verde-clar:   #0B5642;
  --verde-ceata:  rgba(3, 61, 46, .08);

  --auriu:        #C08B47;
  --auriu-clar:   #EFBA76;
  --auriu-adanc:  #A0692A;

  --crem:         #EDDFD2;
  --crem-clar:    #F5EBE0;
  --ivoriu:       #FCF8F3;

  --text:         #2B2620;
  --text-moale:   #6E6357;
  --text-pe-verde: rgba(245, 235, 224, .82);

  /* tipografie */
  --font-titlu:   "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-corp:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-scris:   "Pinyon Script", "Segoe Script", cursive;

  /* ritm */
  --container:    1180px;
  --pad-lat:      clamp(1.25rem, 4vw, 2.5rem);
  --pad-sectiune: clamp(4.5rem, 8.5vw, 8rem);
  --raza:         18px;
  --raza-mica:    10px;

  /* umbre */
  --umbra-mica:   0 2px 10px rgba(43, 38, 32, .05);
  --umbra:        0 18px 44px -22px rgba(43, 38, 32, .28);
  --umbra-mare:   0 40px 90px -40px rgba(3, 61, 46, .45);

  --tranzitie:    .38s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-corp);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.78;
  color: var(--text);
  background: var(--crem-clar);
  /* „clip", nu „hidden": „hidden" ar transforma body-ul în container de derulare
     și ar dezactiva position:sticky (foto din secțiunea Despre, panoul de tarife). */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-titlu);
  font-weight: 500;
  line-height: 1.16;
  margin: 0;
  color: var(--verde);
  letter-spacing: -.005em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--auriu-clar); color: var(--verde-adanc); }

:focus-visible {
  outline: 2px solid var(--auriu-adanc);
  outline-offset: 3px;
  border-radius: 4px;
}

.sari-la-continut {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--verde);
  color: var(--crem);
  border-radius: 0 0 var(--raza-mica) var(--raza-mica);
  transition: top .25s ease;
}
.sari-la-continut:focus { top: 0; }

/* ---------- utilitare ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-lat);
}
.container--ingust { max-width: 820px; }

.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.ic--mic { width: 1em; height: 1em; }

/* marcaj pentru textul provizoriu, de înlocuit de client */
.de-completat {
  background: linear-gradient(transparent 58%, rgba(239, 186, 118, .45) 0);
  box-shadow: inset 0 -1px 0 rgba(160, 105, 42, .45);
  border-radius: 2px;
  padding-inline: .12em;
}
/* elementele de tip bloc nu trebuie să se întindă pe toată lățimea */
p.de-completat,
li.de-completat,
a.de-completat,
span.de-completat {
  display: inline-block;
  max-width: 100%;
}

/* ---------- tipografie de secțiune ---------- */
.supratitlu {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
  margin: 0 0 1rem;
}
.supratitlu--pe-verde { color: var(--auriu-clar); }

.supratitlu--linii {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .9rem;
}
.supratitlu--linii::before,
.supratitlu--linii::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 90px;
  background: linear-gradient(90deg, transparent, var(--auriu));
}
.supratitlu--linii::after { background: linear-gradient(90deg, var(--auriu), transparent); }

.titlu-sectiune {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem);
  margin-bottom: .7rem;
}

.subtitlu-sectiune {
  max-width: 58ch;
  color: var(--text-moale);
  font-size: 1.05rem;
}

.antet-sectiune { text-align: center; margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.antet-sectiune .supratitlu--linii { justify-content: center; }
.antet-sectiune .subtitlu-sectiune { margin-inline: auto; }

.scris-de-mana {
  font-family: var(--font-scris);
  font-weight: 400;
  line-height: 1.35;
}

/* separator cu lotus, ca în materialul de brand */
.separator-lotus {
  display: block;
  width: min(340px, 70%);
  margin: 1.75rem auto 0;
  height: 18px;
  position: relative;
}
.separator-lotus::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--auriu), transparent);
}
.separator-lotus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--auriu-clar), var(--auriu-adanc));
  border-radius: 2px;
}

/* ---------- butoane ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--font-corp);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--tranzitie), box-shadow var(--tranzitie),
              background-color var(--tranzitie), color var(--tranzitie),
              border-color var(--tranzitie);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--verde {
  background: var(--verde);
  color: var(--crem-clar);
  box-shadow: 0 14px 30px -16px rgba(3, 61, 46, .8);
}
.btn--verde:hover { background: var(--verde-clar); box-shadow: 0 20px 38px -16px rgba(3, 61, 46, .7); }

.btn--auriu {
  background: linear-gradient(120deg, var(--auriu-adanc), var(--auriu-clar) 55%, var(--auriu));
  color: var(--verde-adanc);
  box-shadow: 0 14px 30px -16px rgba(160, 105, 42, .85);
}
.btn--auriu:hover { filter: brightness(1.06); box-shadow: 0 20px 38px -16px rgba(160, 105, 42, .75); }

.btn--contur {
  border-color: rgba(3, 61, 46, .28);
  color: var(--verde);
  background: transparent;
}
.btn--contur:hover { border-color: var(--verde); background: rgba(3, 61, 46, .05); }

.sectiune--verde .btn--contur { border-color: rgba(239, 186, 118, .45); color: var(--crem-clar); }
.sectiune--verde .btn--contur:hover { border-color: var(--auriu-clar); background: rgba(239, 186, 118, .12); }

.btn--mic { padding: .68rem 1.35rem; font-size: .72rem; }
.btn--bloc { display: flex; width: 100%; }

/* =============================================================
   HEADER
   ============================================================= */
.sit-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background-color var(--tranzitie), box-shadow var(--tranzitie),
              padding var(--tranzitie), backdrop-filter var(--tranzitie);
}
.sit-header--fixat {
  padding: .6rem 0;
  background: rgba(252, 248, 243, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(192, 139, 71, .28), 0 10px 30px -24px rgba(43, 38, 32, .5);
}

.sit-header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marca { display: flex; align-items: center; gap: .75rem; }
.marca__semn {
  width: 46px; height: auto;
  transition: transform var(--tranzitie);
}
.marca:hover .marca__semn { transform: scale(1.06); }
.marca__text { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nume {
  font-family: var(--font-titlu);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--verde);
}
.marca__rol {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
  font-weight: 400;
}

.nav-principal { display: flex; align-items: center; gap: 2rem; }
.nav-lista { display: flex; gap: 1.75rem; }
.nav-lista a {
  position: relative;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--text);
  padding-block: .35rem;
  transition: color var(--tranzitie);
}
.nav-lista a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--auriu);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--tranzitie);
}
.nav-lista a:hover, .nav-lista a.activ { color: var(--verde); }
.nav-lista a:hover::after, .nav-lista a.activ::after { transform: scaleX(1); transform-origin: left; }

.meniu-buton {
  display: none;
  width: 44px; height: 44px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
}
.meniu-buton span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--verde);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.meniu-buton[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.meniu-buton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.meniu-buton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  padding: clamp(7.5rem, 13vw, 10.5rem) 0 clamp(4rem, 7vw, 6.5rem);
  background:
    radial-gradient(900px 620px at 88% 12%, rgba(239, 186, 118, .16), transparent 62%),
    radial-gradient(760px 520px at 4% 78%, rgba(3, 61, 46, .07), transparent 60%),
    linear-gradient(170deg, var(--ivoriu) 0%, var(--crem-clar) 45%, var(--crem) 100%);
  overflow: hidden;
}

.hero__decor {
  position: absolute;
  top: -6%; right: -8%;
  width: min(46vw, 620px);
  color: rgba(3, 61, 46, .045);
  transform: rotate(12deg);
  pointer-events: none;
}
.hero__decor svg { width: 100%; height: auto; }

/* --- fundalul: iazul cu nuferi, animat discret ---
   Posterul e pus ca „background-image" pe înveliș, nu doar ca atribut „poster" al
   videoului: așa se vede din primul cadru randat, chiar dacă videoul nu pornește
   niciodată, și nu apare nicio clipire între poster și primul cadru al filmului.
   Ambele stau sub .hero__grila (z-index 1), deci textul rămâne mereu deasupra. */
.hero__fundal {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: url("../img/hero-fundal.webp") center bottom / cover no-repeat;
}

.hero__fundal-film {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  /* Videoul intră în scenă doar după ce chiar rulează (clasa se pune din JS).
     Fără asta s-ar vedea posterul propriu al elementului peste cel de pe înveliș
     — aceeași imagine, dar decalată de „object-fit", deci un salt vizibil. */
  opacity: 0;
  transition: opacity .8s ease;
}
.hero__fundal-film--pornit { opacity: 1; }

/*  Fundalul rămâne clar — fără neclaritate, fără voal peste flori. Singurul
    ajutor e o pată moale de crem chiar în mijloc, unde stă textul: acolo
    imaginea e oricum aproape albă, deci nu se pierde nimic din desen, dar
    rândurile nu mai cad peste undele apei. Marginile, unde sunt nuferii, rămân
    neatinse. */
.hero__fundal::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 62% at 52% 46%, rgba(253, 250, 244, .70) 0%, rgba(253, 250, 244, .34) 48%, transparent 82%),
    linear-gradient(to bottom, rgba(253, 250, 244, .55) 0%, transparent 22%);
}

.hero__grila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* --- portret cu ramă aurie, ecou al materialului de brand --- */
.hero__vizual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 430px;
  isolation: isolate;
}

.portret-rama {
  position: relative;
  z-index: 1;
  padding: 7px;
  border-radius: 50% 50% 46% 46% / 40% 40% 32% 32%;
  background: linear-gradient(150deg, var(--auriu-clar), var(--auriu) 35%, var(--auriu-adanc) 62%, var(--auriu-clar));
  box-shadow: var(--umbra-mare);
}
.portret {
  border-radius: inherit;
  overflow: hidden;
  background: var(--crem);
}
.portret img {
  width: 100%;
  aspect-ratio: 53 / 78;
  object-fit: cover;
  object-position: 50% 22%;
}

.portret-inel {
  position: absolute;
  inset: -24px -24px 30px -28px;
  z-index: 0;
  border-radius: 50% 50% 46% 46% / 40% 40% 32% 32%;
  border: 1px solid rgba(192, 139, 71, .45);
  pointer-events: none;
}

.hero__continut { max-width: 620px; }

/* Marca și piciorul din panoul de meniu există doar pe telefon. */
.nav-marca,
.nav-picior { display: none; }

@keyframes intraMeniu {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__logo {
  width: clamp(112px, 13vw, 152px);
  height: auto;
  /* Centrat pe orice lățime. Înainte, „margin-inline: auto" exista doar în
     media query-ul de sub 900px, deci pe desktop logoul stătea lipit de marginea
     stângă a coloanei de text. */
  margin-inline: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 10px 22px rgba(3, 61, 46, .13));
}

/*  Supratitlul din hero trebuie centrat pe ACEEAȘI coloană ca logoul.
    „.supratitlu--linii" e un flex ale cărui linii au „max-width: 90px", deci
    conținutul lui (linie + text + linie) e mai îngust decât coloana; fără
    „justify-content", restul spațiului rămâne la dreapta și tot blocul stă lipit
    de marginea stângă. Logoul, centrat cu „margin-inline: auto", ieșea atunci cu
    ~50px mai la dreapta decât supratitlul de sub el — și asta se citea drept
    „logoul nu e centrat", deși el era singurul centrat corect. */
.hero__continut .supratitlu--linii { justify-content: center; }

.hero__titlu {
  font-size: clamp(2.75rem, 1.7rem + 4.6vw, 4.5rem);
  font-weight: 500;
  margin-bottom: .35rem;
}

.hero__deviza {
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.65rem);
  color: var(--verde-clar);
  margin-bottom: 1.4rem;
}

.hero__text {
  max-width: 52ch;
  color: var(--text-moale);
  font-size: 1.075rem;
  margin-bottom: 2rem;
}

.hero__actiuni { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }

.hero__nota {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--auriu-adanc);
  /*  Singurul rând care cade peste frunzele de nufăr din fundal, și e scris mic,
      cu auriu. Un halou crem în jurul literelor îl desprinde de imagine — asta,
      în loc să acoperim tot fundalul cu un voal ca să salvăm un rând. */
  text-shadow:
    0 0 2px rgba(253, 250, 244, 1),
    0 0 5px rgba(253, 250, 244, 1),
    0 0 14px rgba(253, 250, 244, .95),
    0 0 22px rgba(253, 250, 244, .8);
}
.hero__nota .ic { filter: drop-shadow(0 0 3px rgba(253, 250, 244, .95)); }

/* =============================================================
   BANDĂ VALORI
   ============================================================= */
.banda {
  background: var(--verde);
  color: var(--text-pe-verde);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  position: relative;
}
.banda::before,
.banda::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--auriu), var(--auriu-clar), var(--auriu), transparent);
}
.banda::before { top: 0; }
.banda::after { bottom: 0; opacity: .5; }

.banda__grila {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.banda__element { text-align: center; }
.banda__element .ic {
  width: 30px; height: 30px;
  margin: 0 auto .8rem;
  color: var(--auriu-clar);
}
.banda__element h2 {
  font-size: 1.28rem;
  color: var(--crem-clar);
  margin-bottom: .3rem;
}
.banda__element p { font-size: .89rem; line-height: 1.6; }

/* =============================================================
   SECȚIUNI GENERICE
   ============================================================= */
.sectiune {
  position: relative;
  padding: var(--pad-sectiune) 0;
}
.sectiune--ivoriu { background: var(--ivoriu); }

.sectiune--verde {
  background:
    radial-gradient(800px 500px at 15% 0%, rgba(11, 86, 66, .8), transparent 60%),
    linear-gradient(160deg, var(--verde) 0%, var(--verde-adanc) 100%);
  color: var(--text-pe-verde);
  overflow: hidden;
}
.sectiune--verde h2, .sectiune--verde h3 { color: var(--crem-clar); }
.sectiune--verde .subtitlu-sectiune { color: rgba(245, 235, 224, .72); }

.decor-frunze {
  position: absolute;
  top: 50%; right: -140px;
  width: 460px; height: 460px;
  transform: translateY(-50%);
  background:
    radial-gradient(closest-side, rgba(239, 186, 118, .16), transparent 72%);
  pointer-events: none;
}
.decor-frunze--stanga { right: auto; left: -160px; }

/* =============================================================
   DESPRE
   ============================================================= */
.despre__grila {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* Fundalul animat, derulat de scroll (vezi main.js).
   Bandă pe toată lățimea, cu proporția cadrului: dacă ar acoperi toată
   secțiunea (mult mai înaltă), „cover" ar mări pasărea de aproape două ori
   și ar trece peste text. Centrată pe verticală și estompată la margini. */
.despre__film {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 3 / 2;
  max-height: 115%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* topire spre secțiunile vecine — cremul din videoclip nu e identic cu ivoriul */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.despre__film--pornit { opacity: .55; }
.despre__film canvas { display: block; width: 100%; height: 100%; }

/* peste coloana de text pasărea se retrage, ca lectura să rămână curată */
.despre__film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              transparent 0%, transparent 34%,
              rgba(252, 248, 243, .55) 58%,
              rgba(252, 248, 243, .82) 100%);
}

/* elementul de grilă se întinde pe toată înălțimea rândului (align-items: stretch,
   valoarea implicită), iar copilul lui, mai scund, poate deveni „lipicios". */
.despre__foto { position: relative; }
.despre__foto-lipicios { position: sticky; top: 7.5rem; }

.cadru-organic {
  position: relative;
  border-radius: 58% 42% 52% 48% / 44% 46% 54% 56%;
  overflow: hidden;
  box-shadow: var(--umbra);
  border: 6px solid rgba(252, 248, 243, .9);
  outline: 1px solid rgba(192, 139, 71, .3);
  outline-offset: 6px;
}
.cadru-organic img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.despre__foto:hover .cadru-organic img { transform: scale(1.04); }

.citat-plutitor {
  position: absolute;
  right: -12px; bottom: 6%;
  white-space: nowrap;
  background: var(--verde);
  color: var(--crem-clar);
  padding: .85rem 1.6rem;
  border-radius: 999px;
  box-shadow: var(--umbra);
  border: 1px solid rgba(239, 186, 118, .35);
}
.citat-plutitor .scris-de-mana { font-size: 1.55rem; color: var(--auriu-clar); }

.lista-acreditari {
  display: grid;
  gap: .9rem;
  margin: 2rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(192, 139, 71, .3);
}
.lista-acreditari li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .1rem 1rem;
  align-items: start;
  font-size: .95rem;
}
.lista-acreditari li::before {
  content: "";
  grid-row: span 2;
  width: 20px; height: 20px;
  margin-top: .35rem;
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--auriu-clar), var(--auriu-adanc));
  box-shadow: inset 0 0 0 4px var(--ivoriu);
}
.lista-acreditari strong {
  font-weight: 500;
  color: var(--verde);
  font-size: 1rem;
}
.lista-acreditari span {
  justify-self: start;
  color: var(--text-moale);
  font-size: .88rem;
}

.semnatura {
  font-size: 2.6rem;
  color: var(--verde-clar);
  margin-top: .5rem;
}

/* =============================================================
   SERVICII — ecran divizat
   Lista din stânga e sursa unică de conținut; pe ecrane mari, textul
   opțiunii active e „proiectat" în scena verde din dreapta, cu fondu.
   Sub 900px scena dispare, iar lista se comportă ca un acordeon.
   ============================================================= */
.alegere {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --- lista --- */
.alegere__lista { border-top: 1px solid rgba(192, 139, 71, .3); }

.alegere__optiune { border-bottom: 1px solid rgba(192, 139, 71, .22); }
.alegere__optiune h3 { margin: 0; font-size: inherit; }

.alegere__buton {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  width: 100%;
  padding: 1.15rem .4rem;
  text-align: left;
  transition: padding-left .45s cubic-bezier(.22, .61, .36, 1);
}
/* liniuța aurie care crește în dreptul opțiunii alese */
.alegere__buton::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--auriu);
  transform: translateY(-50%);
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.alegere__nr {
  flex: none;
  font-family: var(--font-titlu);
  font-size: .8rem;
  font-variant-numeric: lining-nums;
  letter-spacing: .24em;
  color: var(--auriu-adanc);
}

.alegere__nume {
  font-family: var(--font-titlu);
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.15;
  color: rgba(43, 38, 32, .45);
  transition: color .45s ease;
}
.alegere__buton:hover .alegere__nume { color: rgba(3, 61, 46, .78); }

.alegere__optiune.activ .alegere__buton { padding-left: 2.6rem; }
.alegere__optiune.activ .alegere__buton::before { width: 1.9rem; }
.alegere__optiune.activ .alegere__nume { color: var(--verde); }

/* Pe ecrane mari conținutul e afișat în scenă, dar rămâne în DOM —
   ascuns doar vizual, ca să fie citit de cititoarele de ecran. */
.alegere__continut {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.alegere__desc {
  color: var(--text-moale);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42ch;
}

.alegere__fise {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.alegere__fise li {
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(192, 139, 71, .4);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}

/* --- scena --- */
.alegere__scena {
  position: relative;
  min-height: 27rem;
  padding: clamp(2rem, 3.4vw, 3rem);
  border-radius: var(--raza);
  overflow: hidden;
  background:
    radial-gradient(600px 320px at 78% 8%, rgba(11, 86, 66, .95), transparent 70%),
    linear-gradient(160deg, var(--verde), var(--verde-adanc));
  border: 1px solid rgba(239, 186, 118, .35);
  box-shadow: var(--umbra-mare);
}

.alegere__filigran {
  position: absolute;
  right: -3rem; bottom: -3rem;
  width: 18rem;
  opacity: .07;
  pointer-events: none;
}

.alegere__proiectie {
  position: relative;
  opacity: 1;
  transform: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.alegere__proiectie.se-schimba {
  opacity: 0;
  transform: translateY(12px);
}

.alegere__nr-mare {
  font-family: var(--font-titlu);
  font-size: 3.6rem;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: rgba(239, 186, 118, .35);
  margin-bottom: 1rem;
}
/* e <p>, nu titlu real: scena e un duplicat decorativ (aria-hidden),
   titlurile adevărate sunt butoanele din listă. Deci fontul se pune aici. */
.alegere__titlu-mare {
  font-family: var(--font-titlu);
  font-weight: 500;
  line-height: 1.16;
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem);
  color: var(--crem-clar);
  margin-bottom: .9rem;
}
.alegere__proiectie .alegere__desc { color: rgba(245, 235, 224, .78); }
.alegere__proiectie .alegere__fise li {
  border-color: rgba(239, 186, 118, .32);
  color: var(--auriu-clar);
}

/* fără JS scena rămâne goală: o ascundem ca să nu apară o casetă verde pustie */
.fara-js .alegere__scena { display: none; }
.fara-js .alegere { grid-template-columns: 1fr; }
.fara-js .alegere__continut {
  position: static;
  width: auto; height: auto;
  margin: 0 0 1.6rem;
  clip-path: none;
  white-space: normal;
  padding-left: 2.6rem;
}

/* --- sub 900px: acordeon, fără scenă --- */
@media (max-width: 900px) {
  .alegere { grid-template-columns: 1fr; }
  .alegere__scena { display: none; }

  .alegere__continut {
    position: static;
    width: auto; height: auto;
    margin: 0;
    clip-path: none;
    white-space: normal;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1);
  }
  .alegere__continut > div { overflow: hidden; }
  .alegere__optiune.activ .alegere__continut { grid-template-rows: 1fr; }

  .alegere__desc {
    padding: 0 .4rem 1.5rem 2.6rem;
    font-size: .96rem;
  }
  .alegere__continut > div > p:last-child { padding: 0 .4rem 1.6rem 2.6rem; }
  .alegere__fise { padding: 0 .4rem 1.6rem 2.6rem; margin-top: -.4rem; }

  /* semnul + / − al acordeonului: bara verticală se strânge când se deschide.
     Cele două bare trebuie să aibă același centru — de aici valorile în px. */
  .alegere__buton { padding-right: 2.75rem; }
  .alegere__buton::after {
    content: "";
    position: absolute;
    right: 8px; top: 50%;
    width: 11px; height: 1.5px;
    background: var(--auriu-adanc);
    transform: translateY(-50%);
  }
  .alegere__nume::after {
    content: "";
    position: absolute;
    right: 12.75px; top: 50%;   /* 8px + 11px/2 − 1.5px/2 */
    width: 1.5px; height: 11px;
    background: var(--auriu-adanc);
    transform: translateY(-50%) scaleY(1);
    transition: transform .35s ease, opacity .35s ease;
  }
  .alegere__optiune.activ .alegere__nume::after {
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
  }
}

.legatura-subliniata {
  display: inline-block;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auriu-clar);
  border-bottom: 1px solid rgba(239, 186, 118, .5);
  padding-bottom: 3px;
  transition: border-color var(--tranzitie);
}
.legatura-subliniata:hover { border-color: var(--auriu-clar); }
/* în acordeonul de pe telefon linkul stă pe fundal crem, nu pe verde */
@media (max-width: 900px) {
  .alegere__lista .legatura-subliniata {
    color: var(--auriu-adanc);
    border-bottom-color: rgba(160, 105, 42, .5);
  }
}

/* =============================================================
   PAȘI
   ============================================================= */
.pasi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
  counter-reset: pas;
}
.pas { position: relative; padding-top: 2.6rem; }
.pas::before {
  content: "";
  position: absolute;
  top: 1.05rem; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--auriu), rgba(239, 186, 118, .12));
}
.pas::after {
  content: "";
  position: absolute;
  top: calc(1.05rem - 4px); left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--auriu-clar);
  box-shadow: 0 0 0 5px rgba(239, 186, 118, .18);
}
.pas__numar {
  position: absolute;
  top: -1.1rem; right: 0;
  font-family: var(--font-titlu);
  font-size: 3.4rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(239, 186, 118, .22);
}
.pas h3 { font-size: 1.42rem; margin-bottom: .5rem; }
.pas p { font-size: .93rem; line-height: 1.72; }

.abordare__cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* =============================================================
   TARIFE
   ============================================================= */
.tarife__aranjament {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.lista-tarife {
  display: grid;
  border-top: 1px solid rgba(192, 139, 71, .3);
}

.rand-tarif {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .1rem 1.5rem;
  padding: 1.35rem .25rem;
  border-bottom: 1px solid rgba(192, 139, 71, .22);
  transition: background-color var(--tranzitie), padding-inline var(--tranzitie);
}
.rand-tarif:hover { background: rgba(239, 186, 118, .09); padding-inline: .9rem; }

.rand-tarif__nume {
  font-family: var(--font-titlu);
  font-size: 1.42rem;
  font-weight: 500;
  color: var(--verde);
}
.rand-tarif__durata {
  grid-column: 1;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-moale);
}
.rand-tarif__pret {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-titlu);
  font-size: 2.35rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--auriu-adanc);
  white-space: nowrap;
}
.rand-tarif__pret em {
  font-family: var(--font-corp);
  font-style: normal;
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--text-moale);
}

.tarife__lateral { align-self: start; }

.panou-tarife {
  padding: clamp(1.9rem, 3vw, 2.5rem);
  background:
    radial-gradient(520px 280px at 50% 0%, rgba(11, 86, 66, .92), transparent 72%),
    linear-gradient(165deg, var(--verde), var(--verde-adanc));
  border: 1px solid rgba(239, 186, 118, .4);
  border-radius: var(--raza);
  color: var(--text-pe-verde);
  box-shadow: var(--umbra-mare);
  font-size: .95rem;
}
.panou-tarife__deviza {
  font-size: 2.3rem;
  color: var(--auriu-clar);
  margin-bottom: .6rem;
}
.panou-tarife__lista {
  display: grid;
  gap: .6rem;
  margin: 1.4rem 0 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(239, 186, 118, .25);
  font-size: .9rem;
}
.panou-tarife__lista li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.55; }
.panou-tarife__lista li::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  margin-top: .28rem;
  border-radius: 50%;
  background-color: rgba(239, 186, 118, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EFBA76'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================================================
   MĂRTURII — „zid" în coloane (masonry)
   Coloane cu lățime fixă: mărturiile de lungimi diferite curg natural,
   fără cadre rigide care le-ar tăia. Cardul nu se rupe între coloane.
   Implicit e restrâns pe verticală; se extinde din buton.
   ============================================================= */
.marturii-invelis { position: relative; }
.marturii-invelis.restrans {
  max-height: 30rem;
  overflow: hidden;
}
/* voal de estompare peste ultimul rând, cât timp e restrâns */
.marturii-invelis.restrans::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--ivoriu) 88%);
  pointer-events: none;
}

.marturii-actiuni { text-align: center; margin-top: 1.75rem; }
.marturii-actiuni .btn { cursor: pointer; }
/* fără JS zidul se vede întreg, deci butonul n-are ce comuta */
.fara-js .marturii-actiuni { display: none; }

.marturii {
  columns: 3 320px;
  column-gap: clamp(1.1rem, 2.2vw, 1.7rem);
}
.marturie {
  position: relative;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.7rem);
  padding: clamp(1.8rem, 2.6vw, 2.4rem) clamp(1.5rem, 2.2vw, 2rem) clamp(1.4rem, 2vw, 1.8rem);
  background: var(--crem-clar);
  border: 1px solid rgba(192, 139, 71, .24);
  border-radius: var(--raza);
  break-inside: avoid;
  transition: transform var(--tranzitie), box-shadow var(--tranzitie), border-color var(--tranzitie);
}
.marturie:hover {
  transform: translateY(-4px);
  box-shadow: var(--umbra);
  border-color: rgba(192, 139, 71, .5);
}
.marturie::before {
  content: "\201C";
  display: block;
  font-family: var(--font-titlu);
  font-size: 3.4rem;
  line-height: .6;
  height: .5em;
  color: rgba(192, 139, 71, .4);
}
.marturie blockquote { margin: 0; }
.marturie p {
  font-family: var(--font-titlu);
  font-size: 1.14rem;
  font-style: italic;
  line-height: 1.62;
  color: var(--text);
}
.marturie p + p { margin-top: .8rem; }
.marturie figcaption {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(192, 139, 71, .25);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}

/* mărturiile mai lungi și mai puternice — pe verde */
.marturie--fp {
  background:
    radial-gradient(480px 260px at 30% 0%, rgba(11, 86, 66, .95), transparent 72%),
    linear-gradient(160deg, var(--verde), var(--verde-adanc));
  border-color: rgba(239, 186, 118, .4);
}
.marturie--fp::before { color: rgba(239, 186, 118, .5); }
.marturie--fp p { color: rgba(245, 235, 224, .9); }
.marturie--fp figcaption {
  color: var(--auriu-clar);
  border-top-color: rgba(239, 186, 118, .28);
}

.marturii__nota {
  max-width: 60ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  font-size: .84rem;
  color: var(--text-moale);
}

/* =============================================================
   ACORDEON ÎNTREBĂRI
   ============================================================= */
.acordeon { display: grid; gap: .8rem; }

.acordeon__element {
  background: var(--ivoriu);
  border: 1px solid rgba(192, 139, 71, .26);
  border-radius: var(--raza-mica);
  overflow: hidden;
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie);
}
.acordeon__element:hover { border-color: rgba(192, 139, 71, .5); }
.acordeon__element.deschis { border-color: rgba(192, 139, 71, .6); box-shadow: var(--umbra-mica); }

.acordeon__element h3 { margin: 0; font-size: inherit; }

.acordeon__buton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.2rem clamp(1.1rem, 2vw, 1.6rem);
  text-align: left;
  font-family: var(--font-titlu);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--verde);
  transition: background-color var(--tranzitie);
}
.acordeon__buton:hover { background: rgba(239, 186, 118, .1); }

.acordeon__semn {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(192, 139, 71, .16);
  transition: background-color var(--tranzitie), transform var(--tranzitie);
}
.acordeon__semn::before,
.acordeon__semn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: var(--auriu-adanc);
  transform: translate(-50%, -50%);
  transition: transform var(--tranzitie), opacity var(--tranzitie);
}
.acordeon__semn::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeon__buton[aria-expanded="true"] .acordeon__semn { background: var(--verde); }
.acordeon__buton[aria-expanded="true"] .acordeon__semn::before,
.acordeon__buton[aria-expanded="true"] .acordeon__semn::after { background: var(--auriu-clar); }
.acordeon__buton[aria-expanded="true"] .acordeon__semn::after { transform: translate(-50%, -50%) rotate(0); }

.acordeon__panou {
  height: 0;
  overflow: hidden;
  transition: height var(--tranzitie);
}
.acordeon__continut {
  padding: 0 clamp(1.1rem, 2vw, 1.6rem) 1.5rem;
  color: var(--text-moale);
  font-size: .97rem;
}

/* =============================================================
   CONTACT
   ============================================================= */
.contact__grila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.contact-card {
  display: block;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: rgba(252, 248, 243, .055);
  border: 1px solid rgba(239, 186, 118, .26);
  border-radius: var(--raza);
  transition: transform var(--tranzitie), background-color var(--tranzitie), border-color var(--tranzitie);
}
a.contact-card:hover {
  transform: translateY(-5px);
  background: rgba(252, 248, 243, .1);
  border-color: rgba(239, 186, 118, .6);
}
.contact-card--static { cursor: default; }

.contact-card--principal {
  background: rgba(239, 186, 118, .13);
  border-color: rgba(239, 186, 118, .55);
}
a.contact-card--principal:hover { background: rgba(239, 186, 118, .2); }
.contact-card--principal .contact-card__semn { background: var(--auriu-clar); color: var(--verde-adanc); }

.contact-card__semn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(239, 186, 118, .14);
  color: var(--auriu-clar);
}
.contact-card__semn .ic { width: 22px; height: 22px; }

.contact-card h3 {
  font-size: 1.05rem;
  font-family: var(--font-corp);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--auriu-clar);
  margin-bottom: .5rem;
}
.contact-card p {
  font-size: 1.12rem;
  color: var(--crem-clar);
  line-height: 1.5;
  margin-bottom: .8rem;
}
.contact-card__actiune {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .1em;
  color: rgba(245, 235, 224, .6);
}
a.contact-card .contact-card__actiune { color: var(--auriu-clar); }

.retele { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.retele a { border-bottom: 1px solid rgba(239, 186, 118, .5); }

.contact__disclaimer {
  max-width: 66ch;
  margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
  padding: 1.2rem 1.6rem;
  text-align: center;
  font-size: .86rem;
  line-height: 1.7;
  color: rgba(245, 235, 224, .78);
  background: rgba(1, 37, 27, .45);
  border: 1px solid rgba(239, 186, 118, .22);
  border-radius: var(--raza-mica);
}
.contact__disclaimer strong { color: var(--auriu-clar); font-weight: 500; }

/* =============================================================
   MODAL CONTACT
   Deschis din butoanele „Programează". Fără JS, butoanele duc la #contact.
   ============================================================= */
.modal-contact {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.modal-contact[hidden] { display: none; }

.modal-contact__fundal {
  position: absolute;
  inset: 0;
  background: rgba(1, 37, 27, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s ease;
}
.modal-contact.deschis .modal-contact__fundal { opacity: 1; }

.modal-contact__cutie {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.75rem, 3vw, 2.25rem);
  text-align: center;
  background:
    radial-gradient(560px 320px at 50% -8%, rgba(239, 186, 118, .14), transparent 60%),
    linear-gradient(168deg, var(--ivoriu), var(--crem-clar));
  border: 1px solid rgba(192, 139, 71, .4);
  border-radius: var(--raza);
  box-shadow: var(--umbra-mare);
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
}
.modal-contact.deschis .modal-contact__cutie { transform: none; opacity: 1; }

.modal-contact__x {
  position: absolute;
  top: .85rem; right: .85rem;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--verde);
  background: rgba(192, 139, 71, .12);
  transition: background-color var(--tranzitie), color var(--tranzitie), transform var(--tranzitie);
}
.modal-contact__x:hover { background: var(--verde); color: var(--auriu-clar); transform: rotate(90deg); }
.modal-contact__x svg { width: 18px; height: 18px; fill: currentColor; }

.modal-contact__logo {
  width: 78px;
  height: auto;
  margin: 0 auto .9rem;
  filter: drop-shadow(0 8px 18px rgba(3, 61, 46, .14));
}
.modal-contact .supratitlu--linii { justify-content: center; margin-bottom: .5rem; }
.modal-contact__titlu {
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.1rem);
  margin-bottom: .5rem;
}
.modal-contact__text {
  max-width: 34ch;
  margin: 0 auto 1.6rem;
  color: var(--text-moale);
  font-size: .95rem;
}

.modal-contact__optiuni { display: grid; gap: .7rem; text-align: left; }

.modal-contact__optiune {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(192, 139, 71, .3);
  border-radius: var(--raza-mica);
  background: rgba(252, 248, 243, .6);
  transition: transform var(--tranzitie), border-color var(--tranzitie), background-color var(--tranzitie), box-shadow var(--tranzitie);
}
.modal-contact__optiune:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 139, 71, .6);
  background: var(--ivoriu);
  box-shadow: var(--umbra-mica);
}

.modal-contact__semn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(239, 186, 118, .28), rgba(3, 61, 46, .1));
  color: var(--verde);
  transition: background var(--tranzitie), color var(--tranzitie);
}
.modal-contact__semn svg { width: 22px; height: 22px; fill: currentColor; }
.modal-contact__optiune:hover .modal-contact__semn { background: var(--verde); color: var(--auriu-clar); }

.modal-contact__detaliu { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.modal-contact__eticheta {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}
.modal-contact__valoare {
  font-family: var(--font-titlu);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--verde);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.modal-contact__nota {
  margin: 1.5rem 0 0;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}

body.modal-activ { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .modal-contact__fundal,
  .modal-contact__cutie { transition: none; }
  .modal-contact__cutie { transform: none; }
}

/* =============================================================
   SUBSOL
   ============================================================= */
.subsol {
  background: var(--verde-adanc);
  color: rgba(245, 235, 224, .68);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
  font-size: .92rem;
}
.subsol::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--auriu), transparent);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.subsol__grila {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}

/* logo-ul are petale verde-închis: pe fundal închis are nevoie de un disc crem */
.subsol__marca img {
  width: 74px;
  padding: 9px;
  margin-bottom: 1rem;
  background: var(--crem);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(239, 186, 118, .4);
}
.subsol__nume {
  font-family: var(--font-titlu);
  font-size: 1.55rem;
  color: var(--crem-clar);
  margin-bottom: .1rem;
}
.subsol__rol {
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--auriu);
  margin-bottom: .9rem;
}
.subsol__deviza { font-size: 1.5rem; color: var(--auriu-clar); }

.subsol__titlu {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--auriu-clar);
  margin-bottom: 1.1rem;
}
.subsol ul { display: grid; gap: .55rem; }
.subsol a { transition: color var(--tranzitie); }
.subsol a:hover { color: var(--auriu-clar); }
.subsol__legal { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(239, 186, 118, .18); }

.subsol__jos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(239, 186, 118, .16);
  font-size: .78rem;
  color: rgba(245, 235, 224, .45);
}
.subsol__jos p { margin: 0; }

/* =============================================================
   BUTON FLOTANT (mobil)
   ============================================================= */
.buton-flotant {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 90;
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.35rem;
  background: linear-gradient(120deg, var(--auriu-adanc), var(--auriu-clar) 55%, var(--auriu));
  color: var(--verde-adanc);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px -12px rgba(1, 37, 27, .6);
  transition: transform var(--tranzitie), opacity var(--tranzitie);
}
.buton-flotant svg { width: 18px; height: 18px; fill: currentColor; }
/* nu are rost peste secțiunea de contact — acolo ar acoperi chiar datele de contact */
.buton-flotant--ascuns {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}

/* =============================================================
   ANIMAȚII LA DERULARE
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
}
.reveal.vizibil { opacity: 1; transform: none; }

/* Subsolul redus n-are coloane, deci lista legală trebuie centrată și pusă pe
   un rând, nu într-o grilă verticală ca în subsolul complet. */
.subsol__legal--centrat {
  grid-auto-flow: column;
  justify-content: center;
  gap: 1.6rem;
  margin: 0 0 1.2rem;
  padding-top: 0;
  border-top: 0;
  flex-basis: 100%;
  font-size: .78rem;
}
@media (max-width: 34rem) {
  /* Trei linkuri pe un rând nu încap pe telefon; se întorc în coloană. */
  .subsol__legal--centrat { grid-auto-flow: row; gap: .5rem; text-align: center; }
}

/* =============================================================
   PAGINI INTERIOARE (confidențialitate, cookie-uri, informații legale)
   ============================================================= */
.pagina-text { padding: clamp(8rem, 14vw, 11rem) 0 var(--pad-sectiune); }
.pagina-text h2 { font-size: 1.8rem; margin: 2.4rem 0 .8rem; }
.pagina-text h2:first-of-type { margin-top: 1.5rem; }
.pagina-text p, .pagina-text li { color: var(--text-moale); }
.pagina-text ul { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.1rem; }
.pagina-text ul li { position: relative; padding-left: 1.4rem; }
.pagina-text ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--auriu);
}
.pagina-text a:not(.btn) { color: var(--verde-clar); border-bottom: 1px solid rgba(192, 139, 71, .5); }

/* ---------- tabelul de cookie-uri ----------
   Patru coloane nu încap pe un telefon și nu au cum să încapă: numele unui
   cookie nu se rupe, iar scopul are nevoie de o frază. De aceea tabelul își
   derulează propriul înveliș pe orizontală — pagina în sine nu derulează
   niciodată lateral. Învelișul e focusabil, ca derularea să fie posibilă și
   de la tastatură. */
.tabel-invelis {
  overflow-x: auto;
  margin: 1.4rem 0 .8rem;
  border: 1px solid rgba(192, 139, 71, .28);
  border-radius: var(--raza-mica);
}
.tabel-invelis:focus-visible { outline: 2px solid var(--auriu); outline-offset: 2px; }

.tabel-cookie {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: .88rem;
}
.tabel-cookie th,
.tabel-cookie td {
  text-align: left;
  vertical-align: top;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(192, 139, 71, .16);
}
.tabel-cookie tbody tr:last-child th,
.tabel-cookie tbody tr:last-child td { border-bottom: 0; }

.tabel-cookie thead th {
  font-family: var(--font-corp);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-moale);
  background: rgba(192, 139, 71, .07);
  white-space: nowrap;
}

.tabel-cookie tbody th { font-weight: 400; white-space: nowrap; }
.tabel-cookie code {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: .85em;
  color: var(--verde);
}
.tabel-cookie td { color: var(--text-moale); }

.tabel-cookie__fel {
  display: block;
  margin-top: .25rem;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-moale);
}

.nota-tabel { font-size: .82rem; font-style: italic; }

/* ---------- panoul de preferințe ---------- */
.panou-cookie {
  margin: 2.6rem 0 1rem;
  padding: 1.6rem 1.7rem;
  background: rgba(192, 139, 71, .06);
  border: 1px solid rgba(192, 139, 71, .28);
  border-radius: var(--raza-mica);
  /* „:target" — cine vine din linkul „Preferințele tale" trebuie să vadă unde a
     ajuns; altfel sare la o ancoră care arată exact ca restul paginii. */
  scroll-margin-top: 7rem;
}
.panou-cookie:target { border-color: var(--auriu); }
.panou-cookie h2:first-of-type { margin-top: 0; }

.panou-cookie__lista { margin: 1.2rem 0; }
/* Bulinele aurii ale paginii de text n-au ce căuta lângă niște căsuțe de bifat. */
.panou-cookie__lista li { padding-left: 0; }
.panou-cookie__lista li::before { display: none; }

.panou-cookie__lista label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
}
.panou-cookie__lista input[disabled] + span { color: var(--text-moale); }
.panou-cookie__lista input[disabled] { cursor: default; }

.panou-cookie__nota { display: block; font-size: .8rem; color: var(--text-moale); }
.panou-cookie__butoane:empty { display: none; }
.panou-cookie form + form { margin-top: 1rem; }

/* =============================================================
   BARA DE COOKIE-URI
   Fixată jos, peste conținut, dar fără voal și fără capturarea
   focusului: pagina rămâne citibilă și navigabilă cu ea afișată.
   Un perete care obligă la un clic înainte de a citi ceva e exact
   tiparul întunecat pe care legea îl interzice.
   ============================================================= */
.bara-cookie {
  position: fixed;
  inset: auto 0 0;
  z-index: 200;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  background: var(--verde-adanc);
  color: var(--crem-clar);
  border-top: 1px solid rgba(239, 186, 118, .28);
  box-shadow: 0 -18px 40px -22px rgba(0, 0, 0, .7);
  animation: bara-cookie-intra .45s cubic-bezier(.22, .61, .36, 1) both;
  /* Nu acoperă bara de sistem de pe iPhone. */
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

@keyframes bara-cookie-intra {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bara-cookie { animation: none; }
}

.bara-cookie__continut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: var(--container);
  margin: 0 auto;
}

.bara-cookie__text { flex: 1 1 24rem; font-size: .84rem; line-height: 1.6; }
.bara-cookie__text p { margin: 0; color: rgba(245, 235, 224, .82); }
.bara-cookie__text strong { color: var(--crem-clar); }

.bara-cookie__titlu {
  font-family: var(--font-corp);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--auriu-clar) !important;
  margin-bottom: .35rem !important;
}

.bara-cookie__actiuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1rem;
}

/* Butoanele stau pe verde, deci conturul trebuie inversat — la fel ca în
   secțiunile verzi ale paginii. AMBELE la fel: refuzul nu se estompează. */
.bara-cookie .btn--contur {
  border-color: rgba(239, 186, 118, .5);
  color: var(--crem-clar);
  background: transparent;
}
.bara-cookie .btn--contur:hover { border-color: var(--auriu-clar); background: rgba(239, 186, 118, .12); }

.bara-cookie__link {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--auriu-clar);
  border-bottom: 1px solid rgba(239, 186, 118, .4);
  padding-bottom: .1rem;
}
.bara-cookie__link:hover { color: var(--crem-clar); border-color: var(--crem-clar); }

@media (max-width: 46rem) {
  /* Pe telefon butoanele trec sub text și se întind pe toată lățimea — dar
     rămân egale între ele. */
  .bara-cookie__actiuni { width: 100%; }
  .bara-cookie__actiuni .btn { flex: 1 1 10rem; }
}

/* =============================================================
   FRUNZE DE FUNDAL
   Ecou al filigranului din materialul de brand. Fiecare frunză își
   primește poziția, mărimea, opacitatea și ritmul prin variabile,
   ca să nu se miște două la fel.
   Stratul își taie singur conținutul (overflow: hidden pe el, nu pe
   secțiune) — altfel ar strica position: sticky din Despre și Tarife.
   ============================================================= */
.svg-simboluri { position: absolute; width: 0; height: 0; overflow: hidden; }

.frunze {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--verde);
}
.frunze--aurii { color: var(--auriu); }
.frunze--pe-verde { color: var(--auriu-clar); }

/* conținutul secțiunilor stă deasupra frunzelor */
.container { position: relative; z-index: 1; }

.frunza {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 200px);
  aspect-ratio: 100 / 140;
  fill: currentColor;
  opacity: var(--o, .06);
  animation: plutire var(--d, 30s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes plutire {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1);
  }
  30% {
    transform: translate3d(calc(var(--dx, 20px) * .55), calc(var(--dy, 30px) * -1), 0)
               rotate(calc(var(--r, 0deg) + 7deg)) scale(1.04);
  }
  62% {
    transform: translate3d(var(--dx, 20px), calc(var(--dy, 30px) * .35), 0)
               rotate(calc(var(--r, 0deg) - 5deg)) scale(.98);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1);
  }
}

/* =============================================================
   ECRAN DE ÎNCĂRCARE
   Apare la fiecare intrare pe pagină și se ridică precum o cortină.
   Fără JavaScript nu se afișează deloc (vezi .fara-js), ca să nu
   existe riscul de a rămâne blocat peste conținut.
   ============================================================= */
.fara-js .incarcare { display: none; }
html.se-incarca body { overflow: hidden; }

.incarcare {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.75rem;
  padding: 2rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(760px 520px at 50% 34%, rgba(239, 186, 118, .18), transparent 62%),
    linear-gradient(170deg, var(--ivoriu) 0%, var(--crem-clar) 52%, var(--crem) 100%);
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), visibility 0s .9s;
}

.incarcare--gata {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
}
.incarcare--gata .incarcare__interior,
.incarcare--gata .incarcare__text {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .4s ease, transform .55s cubic-bezier(.76, 0, .24, 1);
}

.incarcare__interior {
  position: relative;
  display: grid;
  place-items: center;
  width: 182px; height: 182px;
}

.incarcare__logo {
  width: 122px;
  height: auto;
  animation: apareLogo 1s cubic-bezier(.22, .61, .36, 1) both;
  filter: drop-shadow(0 12px 26px rgba(3, 61, 46, .16));
}
@keyframes apareLogo {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: none; }
}

.incarcare__inel {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: rotire 2.4s linear infinite;
}
.incarcare__urma {
  fill: none;
  stroke: rgba(192, 139, 71, .22);
  stroke-width: 1.5;
}
.incarcare__arc {
  fill: none;
  stroke: var(--auriu);
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: deseneazaArc 1.8s ease-in-out infinite;
}
@keyframes rotire { to { transform: rotate(360deg); } }
@keyframes deseneazaArc {
  0%   { stroke-dasharray: 2 200; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 108 200; stroke-dashoffset: -28; }
  100% { stroke-dasharray: 2 200; stroke-dashoffset: -138; }
}

.incarcare__text { animation: apareText .9s .35s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes apareText {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.incarcare__nume {
  font-family: var(--font-titlu);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  color: var(--verde);
  margin: 0 0 .35rem;
}
.incarcare__rol {
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
  margin: 0;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1080px) {
  .nav-lista { gap: 1.25rem; }
  .nav-lista a { font-size: .78rem; }
  .banda__grila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 900px) {
  .meniu-buton { display: flex; }

  /* ATENȚIE, capcană rezolvată aici:
     „backdrop-filter" pe .sit-header--fixat transformă antetul în bloc
     conținător pentru descendenții „position: fixed" — la fel ca „transform".
     Panoul de meniu, fiind copil al antetului, se micșora brusc la înălțimea
     lui, iar jumătate din linkuri ieșeau peste pagină. Se vedea doar DUPĂ
     derulare, când apare clasa --fixat, de unde impresia că se strică „uneori".
     Cât timp meniul e deschis, antetul renunță la blur. */
  body.meniu-activ .sit-header--fixat {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-principal {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(370px, 88vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 4.75rem 2rem 2rem;
    /* pe ecrane mici conținutul poate depăși înălțimea: să se poată derula,
       nu să iasă din panou */
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(420px 300px at 100% 0%, rgba(239, 186, 118, .16), transparent 62%),
      linear-gradient(170deg, var(--ivoriu) 0%, var(--crem-clar) 100%);
    box-shadow: -20px 0 60px -30px rgba(43, 38, 32, .6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--tranzitie), visibility var(--tranzitie);
  }
  .nav-principal.deschis { transform: none; visibility: visible; }

  /* --- marca din capul panoului --- */
  .nav-marca,
  .nav-picior { display: block; }

  .nav-marca { text-align: center; padding-bottom: 1.5rem; }
  .nav-marca img {
    width: 74px;
    margin: 0 auto .6rem;
    filter: drop-shadow(0 8px 18px rgba(3, 61, 46, .14));
  }
  .nav-marca__nume {
    font-family: var(--font-titlu);
    font-size: 1.45rem;
    color: var(--verde);
    margin: 0;
    line-height: 1.1;
  }
  .nav-marca__rol {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--auriu-adanc);
    margin: .3rem 0 0;
  }
  /* firul auriu care desparte marca de linkuri */
  .nav-marca::after {
    content: "";
    display: block;
    width: 68px;
    height: 1px;
    margin: 1.4rem auto 0;
    background: linear-gradient(90deg, transparent, var(--auriu), transparent);
  }

  /* --- linkurile --- */
  .nav-lista { flex-direction: column; gap: 0; width: 100%; }
  .nav-lista li { border-bottom: 1px solid rgba(192, 139, 71, .16); }
  .nav-lista li:last-child { border-bottom: 0; }
  .nav-lista a {
    display: block;
    padding: .95rem .25rem;
    font-size: 1.2rem;
    font-family: var(--font-titlu);
    letter-spacing: 0;
    color: var(--verde);
    transition: color var(--tranzitie), padding-left var(--tranzitie);
  }
  /* punctul auriu apare la atingere, ca un semn de „aici ești" */
  .nav-lista a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 5px;
    margin-right: 0;
    border-radius: 50%;
    background: var(--auriu);
    vertical-align: middle;
    transition: width var(--tranzitie), margin-right var(--tranzitie);
  }
  .nav-lista a:hover,
  .nav-lista a:focus-visible,
  .nav-lista a.activ { color: var(--auriu-adanc); }
  .nav-lista a:hover::before,
  .nav-lista a:focus-visible::before,
  .nav-lista a.activ::before { width: 5px; margin-right: .55rem; }

  .nav-cta { width: 100%; margin-top: 1.75rem; }

  /* --- piciorul: numărul la un deget distanță --- */
  .nav-picior { margin-top: auto; padding-top: 1.75rem; text-align: center; }
  .nav-picior__telefon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-titlu);
    font-size: 1.15rem;
    color: var(--verde);
  }
  .nav-picior__telefon svg { width: 17px; height: 17px; fill: var(--auriu); }
  .nav-picior__nota {
    margin: .5rem 0 0;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-moale);
  }

  /* --- intrarea scalonată a linkurilor --- */
  .nav-principal.deschis .nav-marca,
  .nav-principal.deschis .nav-lista li,
  .nav-principal.deschis .nav-cta,
  .nav-principal.deschis .nav-picior {
    animation: intraMeniu .5s cubic-bezier(.22, .61, .36, 1) both;
  }
  .nav-principal.deschis .nav-marca { animation-delay: .05s; }
  .nav-principal.deschis .nav-lista li:nth-child(1) { animation-delay: .10s; }
  .nav-principal.deschis .nav-lista li:nth-child(2) { animation-delay: .145s; }
  .nav-principal.deschis .nav-lista li:nth-child(3) { animation-delay: .19s; }
  .nav-principal.deschis .nav-lista li:nth-child(4) { animation-delay: .235s; }
  .nav-principal.deschis .nav-lista li:nth-child(5) { animation-delay: .28s; }
  .nav-principal.deschis .nav-lista li:nth-child(6) { animation-delay: .325s; }
  .nav-principal.deschis .nav-lista li:nth-child(7) { animation-delay: .37s; }
  .nav-principal.deschis .nav-cta { animation-delay: .42s; }
  .nav-principal.deschis .nav-picior { animation-delay: .47s; }

  body.meniu-activ { overflow: hidden; }
  body.meniu-activ::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(1, 37, 27, .45);
    backdrop-filter: blur(2px);
  }

  /*  Fundalul e o imagine 16:9, hero-ul de pe telefon e o coloană foarte înaltă.
      „cover" ar mări imaginea de ~1,6 ori și ar tăia exact marginile — adică
      tocmai nuferii — lăsând pe ecran doar centrul gol. Așa că pe mobil nu mai
      umple secțiunea: devine o BANDĂ la baza ei, la lățime întreagă și la
      proporția reală, deci se văd ambele grupuri de flori.

      Partea de sus a imaginii e oricum un crem aproape plat, așa că se topește
      în fundalul secțiunii printr-o mască — nu se vede unde începe banda. */
  .hero__fundal {
    top: auto;
    height: calc(100vw / 1.8636);   /* raportul videoului: 2016/1080 */
    background-size: 100% auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
  }
  .hero__fundal-film { object-fit: fill; }
  /* voalul de lizibilitate n-are rost peste o bandă joasă: masca face treaba */
  .hero__fundal::after { background: none; }

  .hero__grila { grid-template-columns: 1fr; gap: 3rem; }
  .hero__vizual { order: 2; max-width: 360px; }
  .hero__continut { order: 1; text-align: center; margin-inline: auto; }
  .hero__text { margin-inline: auto; }
  .hero__actiuni { justify-content: center; }
  .hero__nota { justify-content: center; }
  .portret-inel { inset: -20px -20px 26px -22px; }

  .despre__grila { grid-template-columns: 1fr; gap: 3rem; }
  .despre__foto { max-width: 440px; margin-inline: auto; width: 100%; }
  .despre__foto-lipicios { position: static; }

  /* Pasărea rămâne vizibilă și pe telefon, dar altfel așezată.

     Pe desktop banda stă centrată vertical, în spatele celor două coloane.
     Pe mobil secțiunea e o singură coloană foarte înaltă, deci o bandă fixată
     la mijloc ar fi trecut o dată prin ecran și ar fi dispărut. Aici devine
     LIPICIOASĂ: rămâne agățată sub antet cât timp derulezi secțiunea și se
     desprinde abia la capătul ei.

     „margin-bottom" negativ, egal cu înălțimea: elementul nu consumă spațiu în
     flux, deci nu împinge fotografia mai jos — se comportă ca un fundal, dar
     rămâne lipicios, ceea ce „position: absolute" nu permite. */
  .despre__film {
    position: sticky;
    top: 5rem;                                  /* sub antetul fix */
    left: auto;
    right: auto;
    transform: none;
    aspect-ratio: auto;
    height: min(52vh, 420px);
    margin-bottom: calc(-1 * min(52vh, 420px));
    max-height: none;
    /* topire în jos, spre text — pe desktop estomparea e laterală */
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 97%);
  }

  /* Conținutul trebuie să treacă PESTE fundal. Fără „position", un bloc
     nepoziționat s-ar desena sub elementul lipicios, care e poziționat. */
  .despre__grila { position: relative; z-index: 1; }

  /* Mai discretă decât pe desktop: aici textul chiar trece peste ea. */
  .despre__film--pornit { opacity: .3; }
  .despre__film::after {
    background: linear-gradient(to bottom, rgba(252, 248, 243, .12) 0%, rgba(252, 248, 243, .8) 100%);
  }

  /* Cu bara de administrare, antetul coboară — și pasărea odată cu el. */
  html.are-bara-admin .despre__film { top: 8.25rem; }

  .tarife__aranjament { grid-template-columns: 1fr; }

  .subsol__grila { grid-template-columns: 1fr 1fr; }
  .subsol__marca { grid-column: 1 / -1; }

  .buton-flotant { display: inline-flex; }
}

@media (max-width: 620px) {
  :root { --raza: 14px; }

  /* mai puține frunze și mai mici: ecran mic, plus mai puțină muncă de randare */
  .frunza { width: calc(var(--w) * .62); }
  .frunze .frunza:nth-child(n+4) { display: none; }
  .incarcare__interior { width: 156px; height: 156px; }
  .incarcare__logo { width: 104px; }

  .marca__nume { font-size: 1.1rem; }
  .marca__semn { width: 38px; }

  .banda__grila { grid-template-columns: 1fr; gap: 1.75rem; }
  .banda__element { display: grid; grid-template-columns: 34px 1fr; gap: .2rem .9rem; text-align: left; }
  .banda__element .ic { grid-row: span 2; margin: .2rem 0 0; width: 26px; height: 26px; }

  .pas { padding-top: 2.2rem; }
  .pas__numar { font-size: 2.8rem; }

  .subsol__grila { grid-template-columns: 1fr; }
  .subsol__jos { flex-direction: column; text-align: center; }
  .subsol__jos p { width: 100%; }

  .citat-plutitor { right: 50%; transform: translateX(50%); bottom: -18px; }
  .citat-plutitor .scris-de-mana { font-size: 1.3rem; }

  .rand-tarif { gap: .15rem .9rem; padding-block: 1.1rem; }
  .rand-tarif__nume { font-size: 1.22rem; }
  .rand-tarif__pret { font-size: 1.9rem; }
  .acordeon__buton { font-size: 1.1rem; padding: 1rem 1.1rem; }
}

/* =============================================================
   ACCESIBILITATE / PREFERINȚE
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .alegere__proiectie.se-schimba { opacity: 1; transform: none; }
  /* frunzele rămân, dar nemișcate; ecranul de încărcare doar se estompează */
  .frunza { animation: none !important; }
  .incarcare__inel { display: none; }
  .incarcare__logo, .incarcare__text { animation: none !important; }
  .incarcare { transition: opacity .3s ease, visibility 0s .3s !important; }
  .incarcare--gata { clip-path: none; opacity: 0; }
}

@media print {
  .sit-header, .buton-flotant, .hero__decor, .decor-frunze { display: none !important; }
  body { background: #fff; color: #000; }
  .sectiune--verde, .banda, .subsol { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}