@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..700;1,300..500&family=Vollkorn:ital,wght@0,400..900;1,400..800&display=swap');

/* ============================================================
   Dr. Alina Diana Nemes — tema „GRĂDINA"
   Organic, desenat, bogat colorat.

   Punctul de plecare e verdictul clientului la variantele
   anterioare: „zici că le-ai luat de pe Wikipedia / zici că i-ai
   făcut testament după ce a murit". Adică monocrom, hârtie și
   cerneală, austeritate de arhivă. Aici totul e construit împotriva
   acelui verdict:
     - culorile sunt SATURATE și poartă structura (fiecare bandă are
       culoarea ei), nu sunt accent pe alb;
     - marginile dintre secțiuni nu sunt linii drepte, ci valuri;
     - fotografiile lipsă sunt înlocuite de forme desenate (frunze,
       arce, cercuri suprapuse, semne pentru specii), nu de casete
       goale;
     - tipografia e caldă: Vollkorn (serif rotund, „pâine integrală")
       pentru titluri, Rubik (sans cu colțuri moi) pentru corp.
       Niciun mono, nicăieri.

   Regula de contrast pe care nu o încalc: culoarea nu e scuză pentru
   text ilizibil. Fiecare suprafață colorată își redefinește tokenii
   de text (--pe / --pe-2) și de buton, iar perechile de mai jos sunt
   verificate ≥ 4.5:1 pentru corp și ≥ 3:1 pentru titluri mari.
   ============================================================ */

/* ---------- 1. Paletă ----------
   Bogată și naturală, dar cu corp. NU bej, NU in, NU crem, NU pastel
   spălăcit — nuanțele deschise sunt tente de frunză și de cer, iar
   greutatea vine din benzile saturate. */
:root{
  /* verde de frunză */
  --verde:#0E5C41;          /* text și butoane pe deschis — 7.7:1 pe --lumina */
  --verde-strat:#0C4E38;    /* fundal de bandă (solid, ca valul să se potrivească) */
  --verde-viu:#17A06B;      /* decor */
  --verde-crud:#7FD4A8;     /* decor pe închis */
  --verde-pal:#D8F0DF;      /* petale */

  /* coral / piersică / teracotă */
  --coral:#EF6A45;          /* decor */
  --coral-strat:#A83A19;    /* fundal de bandă */
  --coral-adanc:#A6390E;    /* text pe deschis — 5.2:1 pe petala piersică */
  --piersica:#FFB58A;       /* decor */
  --piersica-pal:#FFDFCC;   /* petale */

  /* muștar */
  --mustar:#E9A81B;         /* fundal de bandă + butoane pe închis */
  --mustar-pal:#FBE6B4;     /* petale */
  --mustar-adanc:#7A4F00;   /* text pe deschis */

  /* cer */
  --cer:#3F97D6;            /* decor */
  --cer-clar:#CFE9F7;       /* fundal de bandă deschisă */
  --cer-adanc:#124E74;      /* text și butoane pe cer — 8.6:1 */
  --cer-pal:#D3E9F8;        /* petale */

  /* prună — folosit rar, doar ca a cincea petală și în cluster */
  --pruna:#5A2A4E;
  --pruna-pal:#E9DFF2;

  /* neutre: nu gri, ci verzuiuri. Un gri rece ar readuce exact
     senzația de document care s-a respins. */
  --cerneala:#1E2A22;       /* 13:1 pe --lumina */
  --cerneala-2:#4A5B50;     /* 7:1 pe --lumina */
  --lumina:#FDFCF4;         /* alb cald cu tentă verde-galben */
  --lumina2:#EFF6E4;        /* bandă alternativă, tentă de frunză crudă */
  --clar:#F2FBF4;           /* text pe suprafețe închise */
  --clar-2:#BCDCC9;         /* text secundar pe închis — 8.4:1 pe verde-strat */

  /* tokeni de suprafață: se rescriu pe fiecare bandă colorată, ca
     butoanele și textul să nu trebuiască selectate cu specificitate */
  --pe:var(--cerneala);
  --pe-2:var(--cerneala-2);
  --bp-bg:var(--verde);     --bp-tx:#FBFEF6;   /* buton plin */
  --bc-bd:var(--verde);     --bc-tx:var(--verde); /* buton contur */

  --titlu:'Vollkorn', Georgia, 'Times New Roman', serif;
  --corp:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Era 1180px centrat: pe un ecran de 1920 ramaneau ~370px goi de
     fiecare parte, si tot site-ul parea impins la mijloc. */
  --wrap:1840px;
  /* Continutul nu sta lipit de marginea din stanga, dar nici centrat:
     porneste de la un prag care creste cu ecranul. */
  --marg-st:clamp(24px,6.5vw,215px);
  /* antetul porneste mai din stanga decat textul - vezi comun.css */
  --marg-nav:clamp(16px,2.2vw,72px);
  --gut:26px;
  --pad:clamp(62px, 7.5vw, 104px);
  --val-h:74px;

  --r-mic:14px;
  --r-med:26px;
  --r-mare:44px;

  --u1:0 2px 6px rgba(20,50,36,.06), 0 10px 24px -12px rgba(20,50,36,.18);
  --u2:0 4px 12px rgba(20,50,36,.08), 0 26px 54px -26px rgba(20,50,36,.34);

  --tranz:.22s cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. Reset și bază ---------- */
*{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  /* clip, nu hidden: hidden pe body ar face din body un container de
     derulare și ar rupe antetul sticky */
  overflow-x:clip;
}

body{
  overflow-x:clip;
  font-family:var(--corp);
  font-size:17.5px;
  line-height:1.66;
  color:var(--cerneala);
  background:var(--lumina);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
ul,ol{list-style:none}

h1,h2,h3,h4{font-family:var(--titlu);font-weight:700;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(38px,6.4vw,74px);font-weight:800}
h2{font-size:clamp(28px,3.7vw,44px)}
h3{font-size:clamp(20px,2.1vw,26px)}
h4{font-size:19px}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

::selection{background:var(--mustar);color:#2A1B02}

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

.sari{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--verde);color:#fff;padding:12px 20px;border-radius:999px;
}
.sari:focus{left:16px}

/* ---------- 3. Suprafețe ----------
   Fiecare bandă e o suprafață cu tokenii ei. Culorile de fundal sunt
   SOLIDE la margini (gradientele organice se sting înainte de muchie),
   ca valul de la capăt să se poată potrivi exact cu vecinul. */

.brazda{width:min(var(--wrap), 100% - var(--marg-st) - var(--gut));margin-inline:var(--marg-st) auto;position:relative;z-index:2}

.strat{position:relative;overflow:hidden;padding:var(--pad) 0}

.strat--lumina{background:var(--lumina)}
.strat--lumina2{background:var(--lumina2)}

.strat--verde{
  background:
    radial-gradient(52% 62% at 10% 6%, rgba(23,160,107,.42), transparent 64%),
    radial-gradient(46% 58% at 92% 88%, rgba(63,151,214,.30), transparent 62%),
    var(--verde-strat);
  --pe:var(--clar); --pe-2:var(--clar-2);
  --bp-bg:var(--mustar); --bp-tx:#2A1B02;
  --bc-bd:rgba(242,251,244,.62); --bc-tx:var(--clar);
  color:var(--clar);
}

.strat--coral{
  background:
    radial-gradient(50% 60% at 88% 4%, rgba(255,181,138,.34), transparent 62%),
    radial-gradient(60% 70% at 4% 96%, rgba(90,42,78,.34), transparent 66%),
    var(--coral-strat);
  --pe:#FFF4EE; --pe-2:#FBE6DC;
  --bp-bg:var(--mustar); --bp-tx:#2A1B02;
  --bc-bd:rgba(255,244,238,.66); --bc-tx:#FFF4EE;
  color:#FFF4EE;
}

.strat--cer{
  background:
    radial-gradient(70% 66% at 50% 0%, #E9F6FE, transparent 72%),
    var(--cer-clar);
  --pe:#0C2E42; --pe-2:#1F5271;
  --bp-bg:var(--cer-adanc); --bp-tx:#F4FBFF;
  --bc-bd:var(--cer-adanc); --bc-tx:var(--cer-adanc);
  color:#0C2E42;
}

.strat--mustar{
  background:
    radial-gradient(56% 70% at 88% 100%, rgba(239,106,69,.30), transparent 64%),
    var(--mustar);
  --pe:#2A1B02; --pe-2:#4A3208;
  --bp-bg:#22160B; --bp-tx:#FFF6E2;
  --bc-bd:#2A1B02; --bc-tx:#2A1B02;
  color:#2A1B02;
}

/* benzile care poartă val la capete au nevoie de aer peste el */
.strat--verde,.strat--coral,.strat--cer{
  padding-top:calc(var(--pad) + 40px);
  padding-bottom:calc(var(--pad) + 40px);
}
.strat--mustar{padding-top:calc(var(--pad) + 40px)}

/* ---------- 4. Forme desenate ----------
   Astea sunt materialul vizual al temei: n-avem fotografii, deci
   frunzele, arcele și cercurile țin locul lor. Toate sunt decorative
   (aria-hidden) și stau în containere cu overflow ascuns, ca să nu
   producă niciodată derulare pe orizontală. */

.dec{position:absolute;pointer-events:none;z-index:1}

.dec-frunza{fill:currentColor;opacity:.16}
.dec-frunza .nerv{stroke:currentColor;stroke-width:2.2;fill:none;opacity:.55}
.dec-arc{color:currentColor}
.dec-cerc{border-radius:50%}

/* valul dintre secțiuni — marginea nu e dreaptă nicăieri în site */
.val{position:absolute;left:0;width:100%;height:var(--val-h);display:block;z-index:1;pointer-events:none}
.val--sus{top:0}
.val--jos{bottom:0}

/* frunze din deschidere */
.dec-frunza--p1{width:340px;top:-70px;left:-90px;color:var(--verde-crud);transform:rotate(24deg)}
.dec-frunza--p2{width:260px;bottom:-40px;left:32%;color:var(--mustar);transform:rotate(-38deg);opacity:.2}
.dec-frunza--p3{width:420px;top:8%;right:-130px;color:var(--cer);transform:rotate(-14deg);opacity:.2}
.dec-cerc--p1{width:200px;height:200px;top:52%;left:-70px;background:var(--coral);opacity:.2}
.dec-cerc--p2{width:320px;height:320px;bottom:-140px;right:6%;background:var(--verde-viu);opacity:.22}

/* frunze pe benzi */
.dec-frunza--banda{width:300px;bottom:-90px;left:-60px;color:#5A3B00;opacity:.14;transform:rotate(-20deg)}
.dec-frunza--subsol{width:380px;top:-60px;right:-110px;color:var(--verde-crud);opacity:.14;transform:rotate(18deg)}
.dec-frunza--despre{width:300px;top:-60px;right:8%;color:var(--piersica);opacity:.28;transform:rotate(32deg)}
.dec-frunza--faq{width:280px;bottom:-80px;right:-70px;color:var(--verde-viu);opacity:.14;transform:rotate(-24deg)}
.dec-frunza--dp{width:260px;top:-50px;left:-80px;color:var(--mustar);opacity:.2;transform:rotate(40deg)}
.dec-frunza--ap1{width:320px;top:-70px;right:-90px;color:var(--verde-viu);opacity:.16;transform:rotate(-28deg)}
.dec-frunza--ap2{width:320px;bottom:-80px;left:-90px;color:var(--cer);opacity:.18;transform:rotate(22deg)}
.dec-frunza--panou{width:190px;right:-46px;bottom:-46px;color:var(--c,var(--verde));opacity:.14;transform:rotate(-18deg)}

.dec-cerc--intro{width:280px;height:280px;top:-90px;right:-80px;background:var(--mustar);opacity:.2}
.dec-cerc--despre{width:240px;height:240px;bottom:-100px;left:12%;background:var(--mustar);opacity:.22}
.dec-cerc--ta{width:300px;height:300px;top:-120px;right:-100px;background:var(--piersica);opacity:.4}
.dec-cerc--pc{width:220px;height:220px;bottom:-90px;left:-60px;background:var(--cer);opacity:.22}
.dec-cerc--rec{width:260px;height:260px;top:-110px;right:-90px;background:var(--verde-crud);opacity:.35}
.dec-cerc--a{width:220px;height:220px;top:-80px;left:14%;background:#FFF0C4;opacity:.5}
.dec-cerc--b{width:150px;height:150px;bottom:6%;right:8%;background:var(--coral);opacity:.32}

/* soarele și norii din zona pentru animale — partea cea mai caldă din site */
.dec-arc--soare{width:300px;top:12px;right:5%;color:var(--mustar);opacity:.55}
.dec-arc--soare-mare{width:min(520px,72vw);top:-10px;left:50%;transform:translateX(-50%);color:var(--mustar);opacity:.5}
.dec-arc--intro{width:280px;bottom:-30px;left:6%;color:var(--verde-crud);opacity:.3}
.dec-arc--carare{width:320px;top:40px;right:-60px;color:var(--mustar);opacity:.3}
.dec-cerc--nor1{width:180px;height:180px;top:16%;left:-50px;background:#fff;opacity:.62}
.dec-cerc--nor2{width:120px;height:120px;top:30%;left:52px;background:#fff;opacity:.5}

/* ---------- 5. Antet ---------- */
.cap{
  position:sticky;top:0;z-index:60;
  background:var(--lumina);
  box-shadow:0 2px 18px -10px rgba(20,50,36,.4);
}
/* dunga colorată de sub antet: paleta întreagă, dintr-o privire */
.cap::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--verde) 0 22%,var(--cer) 22% 46%,var(--mustar) 46% 72%,var(--coral) 72% 100%);
}
.cap-in{
  width:min(var(--wrap), 100% - var(--marg-nav) - var(--gut));margin-inline:var(--marg-nav) auto;
  display:flex;align-items:center;gap:22px;padding:14px 0;
}
.cap-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.cap-semn{width:26px;height:29px;display:block;color:var(--verde)}
.cap-semn svg{width:100%;height:100%;fill:currentColor}
.cap-nume{display:flex;flex-direction:column;line-height:1.12}
.cap-nume b{font-family:var(--titlu);font-size:19px;font-weight:800;color:var(--cerneala)}
.cap-nume i{font-style:normal;font-size:12px;color:var(--cerneala-2)}

/* Cele șapte linkuri + logo + butonul de programare abia încap pe 1180px.
   Pasul de rând al meniului e strâns intenționat: dacă meniul se rupe pe
   două rânduri, antetul se îngroașă și mănâncă din deschidere. */
.nav-links{display:flex;gap:1px;margin-left:auto;flex-wrap:nowrap}
.nav-links a{
  /* Categoriile erau la 14.5px - prea mici pentru o bara care e singurul
     mod de a naviga in site. Urcate la 17px, cu mai mult spatiu de click. */
  position:relative;text-decoration:none;font-size:17px;font-weight:500;
  white-space:nowrap;
  color:var(--cerneala-2);padding:10px 14px;border-radius:999px;
  transition:color var(--tranz),background var(--tranz);
}
.nav-links a:hover{color:var(--verde);background:var(--verde-pal)}

.cap-logo{min-width:0}
.cap-nume b,.cap-nume i{white-space:nowrap}
.nav-links a.activ{color:var(--verde);font-weight:600}
.nav-links a.activ::after{
  content:'';position:absolute;left:10px;right:10px;bottom:2px;height:4px;
  border-radius:999px;background:var(--mustar);
}
.cap-cta{flex:0 0 auto;padding:13px 22px;font-size:16px}

.nav-toggle{
  display:none;margin-left:auto;background:var(--verde);color:#fff;border:0;
  width:46px;height:46px;border-radius:16px;font-size:20px;cursor:pointer;
}

/* ---------- 6. Butoane, etichete, petale ---------- */
.buton{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:15.5px;line-height:1.2;
  transition:transform var(--tranz),box-shadow var(--tranz),background var(--tranz);
}
.buton .sag{flex:0 0 auto;transition:transform var(--tranz)}
.buton:hover{transform:translateY(-2px)}
.buton:hover .sag{transform:translateX(3px)}

.buton--plin{background:var(--bp-bg);color:var(--bp-tx);box-shadow:var(--u1)}
.buton--plin:hover{box-shadow:var(--u2)}
.buton--clar{background:transparent;color:var(--bc-tx);box-shadow:inset 0 0 0 2.5px var(--bc-bd)}
.buton--clar:hover{background:rgba(255,255,255,.12)}
.strat--lumina .buton--clar:hover,.strat--lumina2 .buton--clar:hover,.strat--cer .buton--clar:hover{background:rgba(14,92,65,.08)}
.buton--inchis{background:var(--cerneala);color:var(--lumina);box-shadow:var(--u1)}
.buton--inchis:hover{box-shadow:var(--u2)}

.acte{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.act-jos{margin:26px 0 0}

.eticheta{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verde);
  background:var(--verde-pal);padding:6px 14px;border-radius:999px;margin-bottom:14px;
}
.eticheta--clar{background:rgba(255,255,255,.16);color:var(--pe)}
.strat--cer .eticheta{background:#fff;color:var(--cer-adanc)}
.strat--mustar .eticheta{background:rgba(42,27,2,.12);color:#2A1B02}

/* petale = etichetele de conținut. Cinci nuanțe care se rotesc, ca să
   fie un strat de culoare, nu un rând de chenare gri. */
.petale{display:flex;flex-wrap:wrap;gap:11px;margin:20px 0 0}
.petala{
  /* Erau la 14px si se pierdeau intre textul de deasupra si cercurile
     de dedesubt. Marite, cu mai mult corp, ca sa lege cele doua blocuri. */
  font-size:16px;font-weight:600;padding:10px 20px;
  border-radius:999px 999px 999px 6px; /* petală, nu pastilă simetrică */
}
.petala--0{background:var(--verde-pal);color:var(--verde)}
.petala--1{background:var(--piersica-pal);color:var(--coral-adanc)}
.petala--2{background:var(--mustar-pal);color:var(--mustar-adanc)}
.petala--3{background:var(--cer-pal);color:var(--cer-adanc)}
.petala--4{background:var(--pruna-pal);color:var(--pruna)}
.petale--clar .petala{background:rgba(255,255,255,.17);color:var(--pe);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}

/* listă cu bulină-frunză desenată din border-radius */
.lista-frunze{display:grid;gap:11px}
.lista-frunze li{position:relative;padding-left:30px;color:var(--pe)}
.lista-frunze li::before{
  content:'';position:absolute;left:0;top:.48em;width:14px;height:14px;
  border-radius:0 68% 0 68%;background:var(--verde-viu);transform:rotate(-8deg);
}
.lista-frunze li:nth-child(5n+2)::before{background:var(--coral)}
.lista-frunze li:nth-child(5n+3)::before{background:var(--mustar)}
.lista-frunze li:nth-child(5n+4)::before{background:var(--cer)}
.lista-frunze li:nth-child(5n+5)::before{background:var(--verde-crud)}
.lista-frunze--grila{grid-template-columns:repeat(2,1fr);gap:14px 34px;font-size:18px}

/* ---------- 7. Capete de secțiune ---------- */
.cap-sec{margin-bottom:44px;max-width:none}
.cap-sec h2{color:var(--pe)}
/* măsura se pune pe TITLU, în unitățile lui — un max-width în „ch" pus pe
   container se calcula în fontul de corp și rupea titlurile în cinci rânduri */
.cap-lat h2{max-width:24ch}
.cap-lat .sub{max-width:62ch}
.cap-despicat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:26px 52px;align-items:end}
.cap-langa{padding-bottom:6px}
.sub{font-size:19px;color:var(--pe-2);margin:14px 0 0;max-width:60ch}
.mic-titlu{font-size:20px;margin:30px 0 6px;color:var(--pe)}

/* ---------- 8. Deschiderea („poiana") ----------
   Nu e hero cu poză în dreapta și text în stânga. Titlul trece lat peste
   tot, textul stă sub el, iar portretul e un medalion organic pus în
   dreapta jos, împreună cu semințele — cifrele practicii. */
.poiana{
  position:relative;overflow:hidden;
  /* Era clamp(56,7vw,92) sus si +52px jos: pe ecran mare heroul trecea
     de o inaltime de ecran si impingea restul paginii prea jos. */
  padding:clamp(38px,4vw,58px) 0 calc(clamp(38px,4vw,58px) + 34px);
  background:
    radial-gradient(52% 60% at 12% 8%, rgba(23,160,107,.42), transparent 64%),
    radial-gradient(46% 56% at 88% 14%, rgba(63,151,214,.30), transparent 62%),
    radial-gradient(60% 54% at 76% 98%, rgba(233,168,27,.24), transparent 64%),
    var(--verde-strat);
  color:var(--clar);
  --pe:var(--clar); --pe-2:var(--clar-2);
  --bp-bg:var(--mustar); --bp-tx:#2A1B02;
  --bc-bd:rgba(242,251,244,.62); --bc-tx:var(--clar);
}
.poiana-titlu{margin:0;max-width:16ch}
.poiana-titlu em{font-style:italic;color:var(--mustar)}
/* `align-items:end` alinia coloanele la BAZA: textul cobora pana la
   baza medalionului, lasand un gol mare sub titlu, iar fotografia
   parea impinsa in jos. Pe `start`, si textul si poza incep imediat
   sub titlu, iar heroul se scurteaza cu inaltimea golului. */
.poiana-corp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px 52px;align-items:start;margin-top:20px}
.poiana-corp--pilon,.poiana--scurt .poiana-corp{grid-template-columns:minmax(0,1fr)}
.poiana-text .lead{font-size:clamp(18px,1.9vw,21px);color:var(--pe);max-width:60ch}

/* medalionul: forma neregulată e obținută din border-radius asimetric,
   nu dintr-o mască pe imagine — rămâne o formă desenată, nu un decupaj */
.medalion{
  position:relative;margin:0;
  border-radius:58% 42% 46% 54% / 46% 52% 48% 54%;
  overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6);
  outline:6px solid rgba(255,255,255,.18);outline-offset:-3px;
  transform:rotate(-2.5deg);
  /* plafon de latime: fara el, medalionul crestea cat coloana si tragea
     heroul in jos cu cateva sute de pixeli pe ecran mare */
  max-width:min(100%, 660px);
  margin-top:-6px;
  /* impins spre marginea din dreapta a coloanei lui, nu lipit de text */
  margin-left:auto;
  margin-right:0;
}
.medalion img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.medalion figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 20px 16px;text-align:center;
  font-family:var(--titlu);font-style:italic;font-size:19px;color:#fff;
  background:linear-gradient(transparent,rgba(8,40,28,.86));
}

/* semințele: cifrele practicii, în cercuri, nu într-un rând de statistici */
.seminte{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.samanta{
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  width:132px;height:132px;border-radius:50%;padding:12px;
}
.samanta b{font-family:var(--titlu);font-size:34px;font-weight:800;line-height:1}
.samanta span{font-size:13.5px;line-height:1.3;margin-top:6px}
.samanta--0{background:var(--mustar);color:#2A1B02}
.samanta--1{background:var(--verde-crud);color:#0A3A29}
.samanta--2{background:var(--piersica);color:#5C2308}

.poiana--cer{
  background:
    radial-gradient(74% 70% at 50% 0%, #EAF6FE, transparent 74%),
    var(--cer-clar);
  color:#0C2E42;
  --pe:#0C2E42; --pe-2:#1F5271;
  --bp-bg:var(--cer-adanc); --bp-tx:#F4FBFF;
  --bc-bd:var(--cer-adanc); --bc-tx:var(--cer-adanc);
}
.poiana--cer .poiana-titlu em{color:var(--coral-adanc)}
.poiana--pilon{
  /* Fundalul e chiar culoarea direcției, la saturație plină — nu o versiune
     stinsă a ei. Stratul deschis din colț urcă doar cu 10%, cât să se vadă
     lumină, nu cât să scadă contrastul textului sub 4.5:1. */
  background:
    radial-gradient(52% 60% at 90% 4%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(60% 72% at 4% 100%, rgba(0,0,0,.24), transparent 66%),
    var(--c,var(--verde-strat));
}
.poiana--scurt{padding-bottom:calc(clamp(48px,5.5vw,74px) + 52px);padding-top:clamp(48px,5.5vw,74px)}
.poiana--404 .poiana-titlu em{color:var(--piersica)}

/* ancorele din capul paginilor: pastile, nu un rând de linkuri subliniate */
.ancore{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.ancore a{
  text-decoration:none;font-size:14.5px;font-weight:500;
  padding:9px 17px;border-radius:999px;
  background:rgba(255,255,255,.14);color:var(--pe);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition:background var(--tranz),transform var(--tranz);
}
.ancore a:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.poiana--cer .ancore a{background:#fff;color:var(--cer-adanc);box-shadow:inset 0 0 0 1.5px rgba(18,78,116,.24)}
.poiana--cer .ancore a:hover{background:#fff}

/* ---------- 9. Cei doi piloni: două panouri-frunză decalate ----------
   Nu sunt două carduri identice pe un rând. Sunt două panouri cu colțuri
   diferite, ușor decalate pe verticală, fiecare cu culoarea direcției. */
.frunze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.panou-frunza{
  position:relative;overflow:hidden;padding:52px 44px 44px;
  background:linear-gradient(152deg,#E9F5EC,#D6EEDF);
  box-shadow:var(--u1);
}
.panou-frunza--0{border-radius:92px 28px 92px 28px}
.panou-frunza--1{border-radius:28px 92px 28px 92px;margin-top:58px;background:linear-gradient(152deg,#FCEDE1,#F7DCC8)}
.panou-frunza > *{position:relative;z-index:2}
.panou-nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;
  background:var(--c);color:#fff;
  font-family:var(--titlu);font-size:25px;font-weight:800;margin-bottom:18px;
}
.panou-frunza h3{color:var(--c);font-size:clamp(26px,2.8vw,34px)}
.panou-lead{margin-top:12px;font-size:18px;color:var(--cerneala)}
.panou-lista{margin-top:28px;padding-top:24px;border-top:2px dashed rgba(30,42,34,.18)}
.panou-lista h4{margin-bottom:14px;color:var(--cerneala)}

/* ---------- 10. Text ---------- */
.text-2col{columns:2;column-gap:52px;max-width:none}
.text-2col p{color:var(--pe);break-inside:avoid}
.text-2col--intai{font-size:18.5px}
/* inițială mare, desenată din tipografie: începutul unui text, nu o casetă */
.intai::first-letter{
  font-family:var(--titlu);font-size:4.1em;line-height:.78;font-weight:800;
  float:left;margin:.06em .12em 0 0;color:var(--mustar);
}
.fraza{
  font-family:var(--titlu);font-style:italic;font-size:clamp(22px,2.6vw,30px);
  line-height:1.3;color:var(--verde);max-width:22ch;
}
.despre-pilon{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:30px 56px;align-items:start}
.despre-pilon .text-2col{columns:1;font-size:18.5px}

/* ---------- 11. Zona pentru animale ----------
   Aici direcția are voie să fie cea mai caldă din site: cer, soare
   desenat, semne pentru specii trasate de mână în SVG. */
.specii{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.specie{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border-radius:999px;padding:8px 18px 8px 10px;
  box-shadow:0 2px 10px -4px rgba(12,46,66,.4);
}
.specie b{font-size:15px;color:var(--cer-adanc)}
.specie-semn{width:30px;height:30px;fill:var(--cer-adanc);color:var(--cer-adanc);flex:0 0 auto}
.specii--mari .specie{padding:12px 24px 12px 14px}
.specii--mari .specie-semn{width:42px;height:42px}
.specii--mari .specie b{font-size:17px}
/* pe fond deschis neutru semnele preiau culoarea direcției */
.zona-animale--pagina .specie b,.zona-animale--pagina .specie-semn{color:var(--c);fill:var(--c)}
.teaser-animale .specie b,.teaser-animale .specie-semn{color:var(--verde);fill:var(--verde)}

.animale-corp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px 52px;align-items:start;margin-top:8px}
.animale-corp .text-2col{columns:1;font-size:18px}
.animale-motive h3{font-size:20px;margin-bottom:14px;color:var(--pe)}

.reguli{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.regula{
  position:relative;padding:30px 26px 26px;
  background:rgba(255,255,255,.72);
  border-radius:34px 10px 34px 10px;
}
.strat--lumina2 .regula{background:rgba(255,255,255,.8)}
.regula-nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;margin-bottom:12px;
  background:var(--cer-adanc);color:#fff;font-family:var(--titlu);font-weight:800;font-size:17px;
}
.zona-animale--pagina .regula-nr{background:var(--c)}
.regula h4{color:var(--pe);margin-bottom:8px}
.regula p{font-size:15.5px;color:var(--pe-2)}

.nota-atentie{
  background:#FFF3D6;border-radius:34px 34px 34px 8px;
  padding:26px 28px;box-shadow:0 3px 14px -6px rgba(12,46,66,.4);
  border-left:8px solid var(--coral-strat);
}
.nota-atentie b{display:block;font-family:var(--titlu);font-size:21px;color:var(--coral-strat);margin-bottom:8px}
.nota-atentie p{font-size:15.5px;color:#3A2A10}

.teaser-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:34px 52px;align-items:center}
.teaser-animale h2{margin-top:4px}
.specii--mari{flex-direction:column;align-items:flex-start}

/* ---------- 12. Cărarea (pașii) ----------
   Pașii nu sunt patru cutii pe un rând, ci o potecă: punctată pe mijloc,
   cu opriri stânga-dreapta. Forma spune „se merge pe rând". */
.carare{position:relative;margin-top:8px}
.carare::before{
  content:'';position:absolute;left:50%;top:14px;bottom:14px;width:4px;margin-left:-2px;
  background:repeating-linear-gradient(var(--pe-2) 0 9px, transparent 9px 21px);
  opacity:.5;
}
.pas{position:relative;width:calc(50% - 46px);padding:26px 28px;margin-bottom:26px;
  background:rgba(255,255,255,.1);border-radius:32px 12px 32px 12px}
.strat--lumina .pas,.strat--lumina2 .pas{background:rgba(14,92,65,.06)}
.pas--0{margin-right:auto}
.pas--1{margin-left:auto;border-radius:12px 32px 12px 32px}
.pas-nr{
  position:absolute;top:26px;width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mustar);color:#2A1B02;
  font-family:var(--titlu);font-weight:800;font-size:18px;z-index:2;
}
.pas--0 .pas-nr{right:-69px}
.pas--1 .pas-nr{left:-69px}
.pas-corp h3{font-size:21px;color:var(--pe);margin-bottom:6px}
.pas-corp p{color:var(--pe-2);font-size:16px}

/* pe direcțiile secundare cărarea e mai strânsă, pe o singură coloană */
.carare--strans::before{left:23px}
.carare--strans .pas{width:100%;margin:0 0 18px;padding-left:74px}
.carare--strans .pas-nr{left:0;right:auto}

/* ---------- 13. Tulpina (direcțiile secundare pe pagina de start) ----------
   Nu trei carduri cu iconițe: o tulpină cu trei ramuri. Ierarhia se vede
   din formă — sunt ramuri ale aceleiași practici, nu servicii separate. */
.tulpina{position:relative;padding-left:34px}
.tulpina::before{
  content:'';position:absolute;left:33px;top:24px;bottom:24px;width:5px;border-radius:999px;
  background:linear-gradient(var(--verde-viu),var(--cer),var(--mustar));
}
.ram{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);gap:24px;align-items:start;padding:22px 0}
.ram-bulb{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:68px;height:68px;border-radius:50%;font-size:26px;color:#fff;
}
.ram--0 .ram-bulb{background:var(--verde)}
.ram--1 .ram-bulb{background:var(--cer-adanc)}
.ram--2 .ram-bulb{background:var(--coral-strat)}
/* Ramura care duce la o pagina intreaga, nu la o ancora: bulbul primeste
   un inel, ca sa se vada ca in spatele ei e mai mult. */
.ram--pagina .ram-bulb{box-shadow:0 0 0 5px rgba(255,255,255,.75),0 0 0 7px currentColor}
.ram-corp{padding-top:6px}
.ram-corp h3{margin-bottom:6px}
.ram-corp p{color:var(--cerneala-2);max-width:62ch}
.leg{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-weight:600;font-size:15px;color:var(--verde);text-decoration:none;
  border-bottom:2px solid var(--verde-crud);padding-bottom:2px;
}
.leg:hover{border-bottom-color:var(--verde)}
.ram--1 .leg{color:var(--cer-adanc);border-bottom-color:var(--cer)}
.ram--2 .leg{color:var(--coral-adanc);border-bottom-color:var(--piersica)}

/* ---------- 14. Despre ---------- */
.despre-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:40px 56px;align-items:start}
.despre-grid p{color:var(--pe)}
.portret-blob{
  margin:0;overflow:hidden;
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
  outline:7px solid rgba(255,255,255,.22);outline-offset:-4px;
  transform:rotate(3deg);
  box-shadow:0 24px 56px -26px rgba(0,0,0,.55);
}
.portret-blob img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

/* ---------- 15. Publicații („recolta") ---------- */
.recolta{display:grid;gap:18px}
.rod{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;align-items:start;
  padding:24px 26px;border-radius:30px 10px 30px 10px;background:var(--lumina2)}
.rod-nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;color:#fff;
  font-family:var(--titlu);font-weight:800;font-size:21px;
}
/* cinci roade, cinci nuanțe — lista de publicații e dovada de autoritate a
   unui medic, nu are voie să arate a bibliografie cenușie */
.rod--0{background:#E2F3E7} .rod--0 .rod-nr{background:var(--verde)}
.rod--1{background:#FDE7DC} .rod--1 .rod-nr{background:var(--coral-strat)}
.rod--2{background:#DEEEF9} .rod--2 .rod-nr{background:var(--cer-adanc)}
.rod--3{background:#FBF0D2} .rod--3 .rod-nr{background:var(--mustar-adanc)}
.rod--4{background:#F0E6F6} .rod--4 .rod-nr{background:var(--pruna)}
.rod-corp h2{font-size:clamp(19px,1.85vw,23px);line-height:1.28}
.rod-corp a{text-decoration:none;color:var(--cerneala);border-bottom:2px solid var(--verde-crud)}
.rod-corp a:hover{color:var(--verde);border-bottom-color:var(--verde)}
.rod-meta{margin-top:9px;font-size:15px;color:var(--cerneala-2)}

.cercetare-mic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 56px;align-items:start}
.recolta--mic{gap:12px}
.recolta--mic .rod{grid-template-columns:44px minmax(0,1fr);gap:16px;padding:16px 20px;background:#fff;font-size:16px;line-height:1.45}
.recolta--mic .rod-nr{width:44px;height:44px;font-size:16px}

/* ---------- 16. Muguri (sloturile video) ----------
   Filmările nu există încă. Nu las un dreptunghi gri „în curând": desenez
   un mugur și scriu starea. E o stare asumată, în limbajul temei. */
.boboci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.boboc{
  padding:28px 26px 26px;background:#fff;
  border-radius:16px 16px 60px 60px / 16px 16px 30px 30px;
  box-shadow:var(--u1);
}
.boboc--dummy{display:none}
.boboc-cap{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.boboc-semn{width:32px;height:44px;fill:var(--verde-viu);color:var(--verde-viu);flex:0 0 auto}
.boboc-stare{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mustar-adanc);background:var(--mustar-pal);padding:5px 12px;border-radius:999px;
}
.boboc h3{font-size:20px;margin-bottom:8px}
.boboc p{font-size:15.5px;color:var(--cerneala-2)}

/* ---------- 17. Întrebări ----------
   Deschise, toate. Fără acordeon: nimic din conținut nu depinde de JS. */
.intrebari{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.intrebare{padding:26px 28px;border-radius:30px 8px 30px 8px;background:#E2F3E7;border-left:7px solid var(--verde)}
.intrebare--1{border-left-color:var(--coral-strat);background:#FDE7DC}
.intrebare--2{border-left-color:var(--cer-adanc);background:#DEEEF9}
.intrebare--3{border-left-color:var(--mustar);background:#FBF0D2}
.intrebare h3{font-size:20px;margin-bottom:8px}
.intrebare p{color:var(--cerneala-2);font-size:16px}

/* ---------- 18. Direcții secundare (pagina) ----------
   Cercuri suprapuse: formele spun exact ce spune textul — uneltele se
   întrepătrund, nu stau în cutii separate. */
.secundara-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:36px 56px;align-items:start}
.cluster{position:relative;display:block;width:132px;height:78px;margin-bottom:18px}
.cluster i{position:absolute;top:0;width:78px;height:78px;border-radius:50%;mix-blend-mode:multiply}
.cluster i:nth-child(1){left:0;background:var(--verde-crud)}
.cluster i:nth-child(2){left:27px;background:var(--mustar-pal)}
.cluster i:nth-child(3){left:54px;background:var(--cer-pal)}
.cluster--1 i:nth-child(1){background:var(--cer-pal)}
.cluster--1 i:nth-child(2){background:var(--pruna-pal)}
.cluster--1 i:nth-child(3){background:var(--piersica-pal)}
.cluster--2 i:nth-child(1){background:var(--piersica-pal)}
.cluster--2 i:nth-child(2){background:var(--mustar-pal)}
.cluster--2 i:nth-child(3){background:var(--verde-pal)}

/* ---------- 19. Contact („ghivece") ---------- */
.ghivece{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ghiveci{
  position:relative;padding:34px 28px 28px;background:var(--lumina2);
  border-radius:26px 26px 76px 76px / 26px 26px 40px 40px;
}
.ghiveci-semn{
  display:block;width:54px;height:54px;margin-bottom:16px;
  border-radius:62% 38% 46% 54% / 44% 52% 48% 56%;
}
/* fiecare ghiveci are tenta lui: pe fundal deschis, trei carduri de aceeași
   nuanță se citesc ca un tabel — trei nuanțe se citesc ca o grădină */
.ghiveci--0{background:#E2F3E7}
.ghiveci--1{background:#DEEEF9}
.ghiveci--2{background:#FDE7DC}
.ghiveci--0 .ghiveci-semn{background:var(--verde-viu)}
.ghiveci--1 .ghiveci-semn{background:var(--cer)}
.ghiveci--2 .ghiveci-semn{background:var(--coral)}
.ghiveci h2{font-size:23px;margin-bottom:14px}
.ghiveci-linii{display:grid;gap:9px;font-size:17.5px}
.ghiveci-linii a{color:var(--verde);font-weight:600;text-decoration:none;border-bottom:2px solid var(--verde-crud)}
.ghiveci-linii a:hover{border-bottom-color:var(--verde)}
.ghiveci--1 .ghiveci-linii a{color:var(--cer-adanc);border-bottom-color:var(--cer)}
.ghiveci--2 .ghiveci-linii a{color:var(--coral-adanc);border-bottom-color:var(--piersica)}
.ghiveci-nota{margin-top:18px;font-size:15px;color:var(--cerneala-2)}

/* ---------- 20. Banda finală ---------- */
.banda-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:26px 44px;align-items:center}
.banda-final h2{max-width:20ch}
.banda-final p{margin-top:12px;font-size:18px;color:var(--pe-2);max-width:56ch}
.banda-act{justify-self:end}

/* ---------- 21. Subsol ---------- */
.subsol{
  position:relative;overflow:hidden;
  background:var(--verde-strat);color:var(--clar);
  padding:calc(var(--pad) + 40px) 0 40px;
  --pe:var(--clar); --pe-2:var(--clar-2);
}
.subsol-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.9fr);gap:34px 46px}
.subsol-nume{font-family:var(--titlu);font-size:23px;font-weight:800;display:block;margin-bottom:10px}
.subsol-a p{color:var(--clar-2);font-size:15.5px;max-width:46ch}
.subsol-social{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.subsol-social a{color:var(--clar);text-decoration:none;border-bottom:2px solid var(--verde-viu);font-weight:500}
.subsol-social a:hover{border-bottom-color:var(--mustar)}
.subsol-social span{color:var(--clar-2)}
.subsol h3{font-size:18px;margin-bottom:12px;color:var(--mustar)}
.subsol ul{display:grid;gap:8px;font-size:15.5px;color:var(--clar-2)}
.subsol ul a{color:var(--clar-2);text-decoration:none}
.subsol ul a:hover{color:var(--clar);text-decoration:underline}
.subsol-jos{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(188,220,201,.28);
  font-size:14px;color:var(--clar-2);
}

/* ---------- 22. Chat ----------
   Clasele sunt fixe (app.js le caută); îmbrăcămintea e a temei. */
.chat-fab{
  position:fixed;right:20px;bottom:20px;z-index:80;
  background:var(--verde);color:#fff;border:0;cursor:pointer;
  font-family:var(--corp);font-size:15px;font-weight:600;
  padding:15px 24px;border-radius:999px 999px 999px 10px;
  box-shadow:0 12px 32px -12px rgba(8,40,28,.75);
  max-width:calc(100vw - 40px);
  transition:transform var(--tranz),background var(--tranz);
}
.chat-fab:hover{transform:translateY(-2px);background:#0A4B35}
.chat-panel{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:min(400px, calc(100vw - 40px));max-height:min(640px, calc(100vh - 40px));
  display:flex;flex-direction:column;
  background:var(--lumina);border-radius:28px 28px 12px 28px;overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(8,40,28,.6);
}
.chat-panel:not(.deschis){display:none}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;background:var(--verde);color:#fff}
.chat-head b{font-family:var(--titlu);font-size:18px}
.chat-inchide{background:rgba(255,255,255,.18);border:0;color:#fff;cursor:pointer;
  width:34px;height:34px;border-radius:50%;font-size:15px}
.chat-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px;min-height:120px}
.chat-msg{max-width:86%;padding:11px 15px;font-size:15px;line-height:1.5;border-radius:18px}
.chat-msg.bot{background:var(--lumina2);color:var(--cerneala);border-radius:18px 18px 18px 5px;align-self:flex-start}
.chat-msg.eu{background:var(--verde);color:#fff;border-radius:18px 18px 5px 18px;align-self:flex-end}
.chat-sugestii{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.chat-sugestie{
  background:var(--mustar-pal);color:var(--mustar-adanc);border:0;cursor:pointer;
  font-family:var(--corp);font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;
}
.chat-sugestie:hover{background:var(--mustar);color:#2A1B02}
.chat-form{display:flex;gap:8px;padding:0 18px 12px}
.chat-form input{
  flex:1;min-width:0;font-family:var(--corp);font-size:15px;padding:12px 16px;
  border:2px solid var(--lumina2);border-radius:999px;background:#fff;color:var(--cerneala);
}
.chat-form input:focus{outline:none;border-color:var(--verde)}
.chat-form button{
  background:var(--verde);color:#fff;border:0;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:19px;flex:0 0 auto;
}
.chat-nota{padding:0 18px 16px;font-size:12.5px;line-height:1.45;color:var(--cerneala-2)}

/* ---------- 23. Sub 980px ----------
   Formele rămân, dar totul devine o singură coloană. Decorurile mari se
   micșorează, ca să nu ajungă să acopere textul pe ecrane înguste. */
@media (max-width:980px){
  .nav-links{
    display:none;order:3;width:100%;flex-direction:column;gap:2px;
    margin:12px 0 4px;
  }
  body.meniu-deschis .nav-links{display:flex}
  .nav-links a{padding:12px 14px;font-size:16.5px;border-radius:14px}
  .nav-links a.activ::after{display:none}
  .nav-links a.activ{background:var(--verde-pal)}
  .cap-in{flex-wrap:wrap}
  .cap-cta{display:none}
  .nav-toggle{display:block}

  .cap-despicat,.poiana-corp,.despre-grid,.teaser-grid,.animale-corp,
  .cercetare-mic,.secundara-grid,.despre-pilon,.banda-in{grid-template-columns:minmax(0,1fr)}
  .cap-langa{padding-bottom:0}
  .banda-act{justify-self:start}
  .frunze,.reguli,.boboci,.intrebari,.ghivece{grid-template-columns:minmax(0,1fr)}
  .panou-frunza--1{margin-top:0}
  .text-2col{columns:1}
  .lista-frunze--grila{grid-template-columns:minmax(0,1fr)}
  .specii--mari{flex-direction:row}

  /* cărarea se îndreaptă: o singură coloană, cu punctele pe stânga */
  .carare::before{left:23px}
  .pas,.pas--0,.pas--1{width:100%;margin:0 0 18px;padding-left:74px;border-radius:12px 32px 12px 32px}
  .pas--0 .pas-nr,.pas--1 .pas-nr{left:0;right:auto}

  .medalion{max-width:460px}
  .portret-blob{max-width:380px}
  .subsol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* decorurile mari se strâng, ca să nu iasă din ecran */
  .dec-frunza--p1{width:200px;left:-70px}
  .dec-frunza--p3{width:240px;right:-90px}
  .dec-cerc--p2{width:200px;height:200px;right:-60px}
  .dec-arc--soare{width:200px}
}

/* ---------- 24. Sub 620px ---------- */
@media (max-width:620px){
  :root{--gut:18px;--pad:clamp(48px,11vw,64px);--val-h:44px}
  body{font-size:16.5px}
  h1{font-size:clamp(32px,9vw,42px)}

  .poiana{padding-bottom:calc(clamp(44px,9vw,64px) + 40px);padding-top:clamp(44px,9vw,64px)}
  .poiana-titlu{max-width:none}
  .seminte{gap:12px}
  .samanta{width:calc(50% - 6px);height:auto;aspect-ratio:1/1;border-radius:44% 56% 52% 48% / 50% 48% 52% 50%}
  .samanta b{font-size:29px}

  .panou-frunza{padding:36px 24px 30px}
  .panou-frunza--0,.panou-frunza--1{border-radius:54px 18px 54px 18px}
  .regula,.intrebare,.rod,.pas,.boboc,.ghiveci{padding-left:22px;padding-right:22px}
  .rod{grid-template-columns:minmax(0,1fr);gap:14px}
  .recolta--mic .rod{grid-template-columns:44px minmax(0,1fr)}
  .ram{grid-template-columns:52px minmax(0,1fr);gap:16px}
  .ram-bulb{width:52px;height:52px;font-size:21px}
  .tulpina{padding-left:24px}
  .tulpina::before{left:23px}
  .pas{padding-left:64px}
  .carare--strans .pas{padding-left:64px}
  .subsol-grid{grid-template-columns:minmax(0,1fr)}
  .specii--mari{flex-direction:column}

  .chat-fab{right:12px;bottom:12px;padding:13px 18px;font-size:14px}
  .chat-panel{right:10px;left:10px;bottom:10px;width:auto;max-height:calc(100vh - 20px)}

  /* pe telefon decorurile mari nu-și mai merită locul: rămân doar
     câteva, mici, ca să nu concureze cu textul */
  .dec-frunza--p2,.dec-frunza--banda,.dec-frunza--despre,.dec-frunza--faq,
  .dec-frunza--dp,.dec-frunza--ap1,.dec-frunza--ap2,.dec-cerc--nor2{display:none}
  .dec-frunza--p1{width:150px;top:-40px;left:-55px}
  .dec-frunza--p3{width:170px;right:-65px}
  .dec-cerc--p1,.dec-cerc--p2,.dec-cerc--intro,.dec-cerc--despre,
  .dec-cerc--ta,.dec-cerc--pc,.dec-cerc--rec,.dec-cerc--a,.dec-cerc--b{width:150px;height:150px}
  .dec-arc--soare,.dec-arc--intro,.dec-arc--carare{width:160px}
  .dec-arc--soare-mare{width:260px}
}

/* ---------- 25. Mișcare redusă ----------
   Tema n-are animații de intrare (conținutul e vizibil din start), dar
   are tranziții și derulare lină. Astea se opresc la cerere. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .buton:hover,.ancore a:hover,.chat-fab:hover{transform:none}
}

/* ---------- 26. Tipar ---------- */
@media print{
  .cap,.chat-fab,.chat-panel,.dec,.val,.sari{display:none}
  body{background:#fff;color:#000}
  .strat,.poiana,.subsol{background:#fff;color:#000;padding:18px 0}
}


/* ═══════════ MOBIL — ținte de atins ═══════════
   La 390px, „Detalii", linkurile din subsol și cele din cuprins aveau
   18–28px. Sub degetul unui om, alea se ratează. */
@media (max-width:620px){
  .leg,
  .subsol a,
  .cap-logo,
  .lista-frunze a{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  .petala{font-size:15px;padding-block:9px}
  .cta-row .btn,.btn{min-height:46px}
  .contact-linie a,.fisa a,.contact a{display:inline-flex;align-items:center;min-height:44px}
  /* telefonul si mailul din fisa de contact stau in <li> simple, fara
     clasa - acopera-le pe toate, sunt cele mai apasate de pe telefon */
  li > a{display:inline-flex;align-items:center;min-height:44px}

}


/* clipurile reale: acelasi „boboc", dar cu poster in loc de mugur desenat */
.boboc--plin{text-decoration:none;color:inherit;display:block}
.boboc-poster{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;border-radius:26px 26px 26px 8px;margin-bottom:14px}
.boboc-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.boboc--plin:hover .boboc-poster img{transform:scale(1.04)}
.boboc-play{
  position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding-left:4px;
  background:var(--mustar);color:#2A1B02;font-size:20px;font-weight:700;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion:reduce){ .boboc-poster img{transition:none} }


/* ═══════════ tarife ═══════════
   Un rând pe serviciu, cifra mare la dreapta. Nu e tabel: pe telefon un
   tabel de două coloane se strâmtează urât. */
.tarife{list-style:none;margin:0;padding:0}
.tarif{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:6px 28px;padding:24px 26px;border-radius:26px;margin-bottom:14px;
  background:var(--verde-pal);
}
.tarif--1{background:var(--piersica-pal)}
.tarif--2{background:var(--mustar-pal)}
.tarif--3{background:var(--cer-pal)}
.tarif-nume{font-family:var(--titlu);font-size:22px;font-weight:800;color:var(--cerneala)}
.tarif-pret{white-space:nowrap;font-size:16px;color:var(--cerneala-2)}
.tarif-pret b{font-family:var(--titlu);font-size:34px;color:var(--cerneala)}
.tarif-nota{grid-column:1 / -1;font-size:15px;color:var(--cerneala-2)}
.tarife-nota{margin-top:20px;max-width:70ch;color:var(--cerneala-2)}

/* cifra din capul paginii unei direcții - duce la pagina de tarife */
.pret-cap{margin-top:18px}
.pret-cap a{
  display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;
  color:var(--pe);font-size:16px;
  padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);
}
.pret-cap a b{font-family:var(--titlu);font-size:26px;font-weight:800}
.pret-cap a:hover{background:rgba(255,255,255,.26)}

@media (max-width:620px){
  .tarif{grid-template-columns:1fr;gap:4px;padding:20px}
  .tarif-nume{font-size:20px}
  .tarif-pret b{font-size:30px}
}

/* ═══════════ antetul pe un singur rând (desktop) ═══════════
   Opt categorii + logo + butonul de programare. Dacă meniul se rupe în
   două rânduri, antetul se îngroașă cu ~30px și mănâncă din deschiderea
   paginii - de aceea se strâmtează în trepte în loc să se rupă.

   Ordinea în care cedează: întâi spațiile dintre categorii, apoi garda din
   jurul lor, apoi rândul mic de sub nume, apoi corpul literei, și abia la
   final butonul de programare (pagina Contact rămâne în meniu, deci nu se
   pierde drumul - se pierde scurtătura).

   Blocul stă la SFÂRȘITUL fișierului dinadins: regulile `.buton` de mai sus
   au aceeași specificitate, iar mai devreme în fișier le pierdeau. Pragul
   de jos (981px) le ține departe de meniul-sertar de pe telefon. */
@media (min-width:981px) and (max-width:1620px){
  .cap-in{gap:14px}
  .nav-links a{padding:10px 11px}
}
@media (min-width:981px) and (max-width:1460px){
  .nav-links a{padding:9px 8px;font-size:16px}
  .cap-in .cap-cta{padding:12px 17px}
}
@media (min-width:981px) and (max-width:1380px){
  .cap-in{gap:12px}
  .nav-links a{padding:9px 6px;font-size:15px}
  .cap-nume i{display:none}
  .cap-in .cap-cta{padding:11px 14px;font-size:15px}
}
@media (min-width:981px) and (max-width:1280px){
  .cap-in .cap-cta{display:none}
}
@media (min-width:981px) and (max-width:1180px){
  .nav-links a{padding:8px 5px;font-size:14px}
  .cap-semn{display:none}
  .cap-nume b{font-size:17px}
}