/* ==========================================================
   hanaua — sistem vizual
   Bazat pe direcția creativă v8, extins pentru mobil.
   ========================================================== */

:root {
  /* brand */
  --alb-cald:   #F7F4EE;
  --nisip:      #E3DCCE;
  --salvie:     #7D9B84;
  --teracota:   #B0764F;
  --maro:       #38352F;

  /* griurile calde din v8, coborâte până trec pragul de contrast 4.5:1
     pe alb cald — nuanțele sunt aceleași, doar mai adânci             */
  --fir:        #C5D3C0;  /* firul — decorativ, nu poartă informație */
  --fragment:   #726D5E;  /* fragmentele din deschidere   4.71:1 */
  --corp:       #5C584F;  /* text curent                  6.45:1 */
  --eticheta:   #776C53;  /* etichetele mici              4.72:1 */
  --sters:      #736C5B;  /* note secundare               4.75:1 */
  --citat:      #4F4B43;  /* recomandările în italic      7.91:1 */
  --salvie-txt: #54735C;  /* salvie pentru text mic       4.80:1 */
  --teracota-txt: #875433; /* teracotă accent — 5.72:1 pe crem, 4.60:1 pe nisip */
  --salvie-adanc: #47654F; /* variante pentru interiorul secțiunilor nisipii */
  --sters-adanc: #655E4D;
  --verde-accent: #3C7048; /* cuvintele evidențiate — 5.31:1, verde citibil */
  --salvie-fund: #6E8B77; /* fundalul blocului plin       3.40:1 cu crem */
  --salvie-deschis: #B9C9B4; /* arcadele pozelor */
  --teracota-pal: #EBD8C8;   /* a treia tentă de arcadă */
  --teracota-bara: #D6AE8B;  /* firul din stânga insighturilor, stins */
  --subsol-fund: #F2F1EB;    /* tentă abia perceptibilă sub linia de subsol */

  --titlu: "Cormorant Garamond", Georgia, serif;
  --text:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* geometrie: firul stă la stânga, conținutul curge la dreapta lui */
  --fir-x:  20px;
  --st:     52px;
  --dr:     22px;
  --lat:    1180px;
  --logo-lat: clamp(112px, 15vw, 142px);

  /* scară de spațiere pe multipli de 8. Ritmul vertical al paginii se
     construiește doar din valorile astea, nu din numere alese pe loc. */
  --sp-3:  1.5rem;   /* 24 */
  --sp-4:  2rem;     /* 32 */
  --sp-5:  3rem;     /* 48 */
  --sp-6:  4rem;     /* 64 */
  --sp-7:  6rem;     /* 96 */
  --sp-8:  9rem;     /* 144 */

  /* de unde pornește și unde se oprește firul, măsurat din .pagina.
     Trebuie să înceapă deasupra primului rând de text, altfel rămâne
     un rând descoperit sus. */
  --fir-sus: 2rem;
  --fir-jos: 3rem;
}

/* Pe paginile care încep cu un titlu mic de secțiune, firul pornește
   sub el. Altfel linia trece pe lângă titlu și îl încarcă; titlul arată
   mai bine singur, cu firul începând abia de la titlul mare. */
.pagina--titlu { --fir-sus: 5rem; }

/* O deschidere care conține doar eticheta nu are nevoie de distanța dintre
   două secțiuni pline. Se înjumătățește. */
.deschidere--gol + .bloc { padding-top: clamp(var(--sp-4), 5vw, var(--sp-6)); }

@media (min-width: 700px) {
  :root { --fir-x: 52px; --st: 130px; --dr: 56px; --fir-sus: 2.6rem; --fir-jos: 4rem; }
  .pagina--titlu { --fir-sus: 6rem; }
}

@media (min-width: 1100px) {
  :root { --fir-sus: 3.2rem; --fir-jos: 5rem; }
  .pagina--titlu { --fir-sus: 7rem; }
}

@media (min-width: 1300px) {
  :root {
    --fir-x: calc((100vw - var(--lat)) / 2);
    --st: calc((100vw - var(--lat)) / 2 + 78px);
    --dr: calc((100vw - var(--lat)) / 2);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--alb-cald);
  color: var(--maro);
  font-family: var(--text);
  /* 400, nu 300. Recomandarea de accesibilitate e ca textul curent să nu
     coboare sub Regular; sub 24px, liniile subțiri se topesc în fundal.
     Greutatea 300 rămâne doar la serifa mare, unde chiar funcționează. */
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 700px)  { body { font-size: 17px; } }
@media (min-width: 1100px) { body { font-size: 18px; } }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--titlu);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

/* ---------- firul continuu ----------
   Un singur traseu care coboară prin toată pagina, ecou al logo-ului.
   vector-effect păstrează grosimea constantă oricât s-ar întinde
   pe verticală — altfel linia se subțiază pe paginile lungi.        */

.pagina { position: relative; }

.fir {
  position: absolute;
  left: calc(var(--fir-x) - 20px);
  top: var(--fir-sus);
  width: 40px;
  height: calc(100% - var(--fir-sus) - var(--fir-jos));
  pointer-events: none;
  z-index: 0;
}

.fir path {
  fill: none;
  stroke: var(--fir);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* atenție: firul NU intră aici. Dacă primește position:relative, iese din
   poziționarea absolută, intră în flux ca un bloc de ~1600px înălțime și
   împinge tot conținutul sub el. */
.pagina > :not(.fir) { position: relative; z-index: 1; }

/* ---------- ritm vertical ---------- */
.bloc { padding: clamp(var(--sp-6), 11vw, var(--sp-8)) var(--dr) 0 var(--st); }
.bloc--final { padding-bottom: clamp(var(--sp-5), 8vw, var(--sp-7)); padding-top: calc(clamp(var(--sp-6), 11vw, var(--sp-8)) + var(--sp-3)); }

/* subtitlurile de secțiune: toate în cărămiziu, o singură culoare pe tot
   site-ul. Un pas mai mari decât restul etichetelor mici, pentru contrast. */
.eticheta {
  position: relative;
  padding-left: 1.7rem;
  /* explicit: pe pagina de psihologi eticheta e un <h1>, iar h1 moștenește
     serifa. Fără linia asta, aceeași etichetă apărea cu alt font acolo. */
  font-family: var(--text);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teracota-txt);
  margin: 0 0 var(--sp-4);
}
.eticheta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 13px;
  height: 1.5px;
  background: currentColor;
}

/* 58 de caractere pe rând. Cercetarea tipografică dă 45–75 ca interval
   confortabil, cu 66 ca ideal; sub 45 ochiul sare prea des la capăt. */
.corp {
  color: var(--corp);
  font-size: clamp(0.97rem, 1.5vw, 1.12rem);
  line-height: 1.8;
  max-width: 58ch;
}

.nota { font-size: 0.86rem; color: var(--sters); }

/* ---------- antet ---------- */
.antet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 1.9rem) var(--dr) 0 var(--dr);
}

.antet { position: relative; z-index: 30; }
/* Wordmark-ul nu e centrat în propria cutie: „h" are ascendentă lungă, iar
   restul literelor stau jos. Măsurat pe traseu, cerneala are centrul la 70%
   din înălțime, nu la 50%. Centrarea normală lăsa butonul de meniu cu ~12px
   prea sus. Îl cobor cu 20% din înălțimea logoului. */
.antet__logo img { width: var(--logo-lat); }
.meniu-buton { margin-top: calc(var(--logo-lat) * 0.104); }

/* ---------- butonul de meniu ---------- */
.meniu-buton {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.45rem 0;
  cursor: pointer;
  font-family: var(--text);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eticheta);
}
.meniu-buton:hover { color: var(--maro); }
.meniu-buton__linii { display: block; width: 20px; }
.meniu-buton__linii span {
  display: block;
  height: 1px;
  background: currentColor;
  margin: 4px 0;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.meniu-buton[aria-expanded="true"] .meniu-buton__linii span:first-child { transform: translateY(5px) rotate(45deg); }
.meniu-buton[aria-expanded="true"] .meniu-buton__linii span:nth-child(2) { opacity: 0; }
.meniu-buton[aria-expanded="true"] .meniu-buton__linii span:last-child { transform: translateY(-5px) rotate(-45deg); }

.meniu-panou {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: var(--dr);
  min-width: 220px;
  background: var(--alb-cald);
  border: 0.5px solid var(--nisip);
  border-radius: 3px;
  padding: 0.7rem 0;
  box-shadow: 0 10px 30px rgba(56, 53, 47, 0.07);
  list-style: none;
  margin: 0;
}
.meniu-panou[hidden] { display: none; }
.meniu-panou li + li { border-top: 0.5px solid rgba(227, 220, 206, 0.7); }
.meniu-panou a {
  display: block;
  padding: 0.62rem 1.3rem;
  font-size: 0.92rem;
  color: var(--corp);
}
.meniu-panou a:hover { color: var(--teracota-txt); background: rgba(227, 220, 206, 0.28); }
.meniu-panou a[aria-current="page"] { color: var(--teracota-txt); font-weight: 400; }
.meniu-panou__legal a { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--eticheta); }

/* ---------- deschiderea ---------- */
.deschidere { padding-top: clamp(2.8rem, 8vw, 4.8rem); }

.fragment {
  font-family: var(--titlu);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 4.4vw, 1.9rem);
  line-height: 1.35;
  color: var(--fragment);
  margin: 0 0 0.7em;
  max-width: 34ch;
}

/* decalaj mic, cât să nu fie riglă — pe telefon dispare aproape complet,
   ca fragmentele să rămână un grup, nu patru rânduri risipite */
.fragment + .fragment { margin-left: clamp(0.4rem, 2.5vw, 1.8rem); }
.fragment + .fragment + .fragment { margin-left: clamp(0.15rem, 1vw, 0.7rem); }
.fragment + .fragment + .fragment + .fragment { margin-left: clamp(0.6rem, 3.5vw, 2.6rem); }
/* Pauza dintre ce se aude și ce se răspunde.
   Atenție: :last-of-type numără toți frații <p>, iar ultimul din secțiune
   e paragraful de sub titlu, nu al patrulea citat. Deci regula se pune pe
   titlu, nu pe citat: „primul .raspuns care vine după un .fragment". */
.fragment + .raspuns { margin-top: clamp(var(--sp-6), 9vw, var(--sp-7)); }

/* ghilimelele poartă accentul — altfel deschiderea e complet gri */
.fragment .g { color: var(--teracota-txt); }

.raspuns {
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-3);
  max-width: 21ch;
}

/* pe ecran lat titlul se întinde; îngustarea de pe telefon nu are ce căuta
   pe desktop, unde coloana are peste 1000px */
@media (min-width: 700px)  { .raspuns { max-width: 32ch; } }
@media (min-width: 1100px) { .raspuns { max-width: 40ch; } }

/* la 32px+ e text mare, deci pragul e 3:1 — salvia profundă îl trece */
.raspuns em { font-style: normal; color: var(--salvie-fund); }

/* cuvântul scos în evidență — doar verde, cu un pic de greutate în plus */
.accent { color: var(--verde-accent); font-weight: 500; }
.accent--teracota { color: var(--teracota-txt); }

/* ---------- „insight hanaua" ----------
   Blocul ăsta e vocea hanaua despre om, nu o rubrică de fișă. Ca să se
   vadă că vorbește cineva, e pus în serifa de citat, italic, mai mare
   decât restul, și separat de un fir vertical de salvie. Se termină cu
   semnătura, care spune cine a scris.
   „hanaua" preia alternanța din wordmark: h verde adânc, a verde,
   n și u cărămizii — în variantele închise, cele din logo cad sub
   pragul de contrast la text mic. */
.insight {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--sters);
  margin: 0 0 var(--sp-3);
}
.insight .h { color: var(--salvie-adanc); }
.insight .a { color: var(--salvie-txt); }
.insight .n { color: var(--teracota-txt); }

.insight-bloc {
  border-left: 1.75px solid var(--teracota-bara);
  padding-left: clamp(1rem, 2.2vw, 1.6rem);
  margin: 0 0 var(--sp-4);
  max-width: 42rem;
}
.insight-bloc .corp {
  font-family: var(--titlu);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.55;
  color: var(--citat);
  max-width: 46ch;
}
.insight-bloc .corp + .corp { margin-top: var(--sp-3); }
/* eticheta de deasupra spune deja cine vorbește; a doua semnătură
   sub text ar repeta același lucru. */


/* ---------- format, locație, preț ---------- */
.date-om {
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: 0.55rem;
  max-width: 34rem;
}
.date-om > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
}
.date-om dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--sters);
}
.date-om dd {
  margin: 0;
  font-size: clamp(0.94rem, 1.4vw, 1.04rem);
  color: var(--maro);
}

/* Rolul stă lipit de nume, nu de contact: numele îl împinge cu doar
   câțiva pixeli, iar blocul de contact își ia distanța lui de dedesubt. */
.om-lung .titlu-mic { margin-bottom: 0.4rem; }

.rol {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--sters);
  margin: 0;
}

/* ---------- contactul ---------- */
.om__contact {
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  color: var(--salvie-txt);
  margin: var(--sp-3) 0 var(--sp-4);
}
.om__contact a { border-bottom: 1px solid rgba(84, 115, 92, 0.35); }
.om__contact a:hover { color: var(--teracota-txt); border-bottom-color: currentColor; }

/* ---------- un psiholog, pe larg ---------- */
.om-lung {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--sp-4), 5vw, var(--sp-6));
  max-width: 1080px;
}
@media (min-width: 780px) {
  .om-lung { grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
}
.om-lung .om__foto { max-width: 230px; margin-bottom: 0; }
.om-lung .corp + .corp { margin-top: var(--sp-3); }
.om-lung .om__nume { margin-top: var(--sp-3); }
.om__vorba { margin-bottom: 1.1rem; }

/* ---------- oameni ---------- */
.oameni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 250px));
  justify-content: start;
  gap: clamp(var(--sp-4), 4vw, var(--sp-5));
  max-width: 1080px;
}

/* Raport fix 3:4, identic cu al pozelor, ca „cover" să nu mai aibă ce tăia.
   Înainte cadrul de pe carduri ieșea 328x270, adică mai lat decât înalt,
   și pierdea 38% din înălțime — exact partea cu capul.
   Arcada e în procente, ca să se scaleze la orice lățime de card. */
.om__foto {
  aspect-ratio: 3 / 4;
  background: var(--ton, var(--salvie-deschis));
  border-radius: 50% 50% 6px 6px / 35% 35% 6px 6px;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}


.om__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.om__nume { font-size: 1.05rem; margin: 0 0 0.25rem; }

.om__specializari {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teracota-txt);
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.om__nume { margin-top: var(--sp-3); }
.om__vorba {
  font-family: var(--titlu);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.4;
  color: var(--citat);
  margin: 0 0 0.75rem;
}

.om__tel {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--salvie-txt);
  margin: 0;
}

.om__cpr { font-size: 10px; letter-spacing: 0.06em; color: var(--eticheta); margin: 0.4rem 0 0; }
.om__cpr a { border-bottom: 1px solid currentColor; }
.om__cpr a:hover { color: var(--salvie-txt); }

/* ---------- momentul plin de salvie ---------- */
.salvie {
  background: var(--salvie-fund);
  margin-top: clamp(var(--sp-6), 11vw, var(--sp-8));
  padding: clamp(var(--sp-5), 8vw, var(--sp-7)) var(--dr) clamp(var(--sp-5), 8vw, var(--sp-7)) var(--st);
  display: flex;
  gap: clamp(1.2rem, 2.8vw, 2.2rem);
  align-items: flex-start;
}

/* monograma la stânga textului, ca în v8. Traseul ei e îngroșat în fișier:
   la 56px, conturul original de 10.9 dădea 0.7px și se pierdea pe verde. */
.salvie__semn {
  width: clamp(46px, 6vw, 62px);
  flex-shrink: 0;
  margin-top: 0.2em;
}

.salvie p {
  font-family: var(--titlu);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  line-height: 1.4;
  color: var(--alb-cald);
  max-width: 32ch;
}

@media (min-width: 700px)  { .salvie p { max-width: 44ch; } }
@media (min-width: 1100px) { .salvie p { max-width: 54ch; } }

/* ---------- două coloane ---------- */
.doua {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(var(--sp-5), 5vw, var(--sp-7));
  max-width: 1080px;
}
/* Ultimul element dintr-o coloană nu-și mai adaugă marginea proprie peste
   distanța dintre coloane. Pe telefon, unde coloanele se stivuiesc, cele
   două se însumau și lăsau un gol de aproape 90px sub titlurile scurte. */
.doua > div > :last-child { margin-bottom: 0; }

/* paragrafele care se succed într-o coloană au nevoie de aer între ele */
.doua .corp + .corp { margin-top: var(--sp-3); }

/* Notă laterală fără etichetă proprie: se lipește de baza coloanei vecine,
   ca să nu plutească sus lângă titlul mare și să pară un al doilea început. */
.nota-lat { align-self: end; }
.nota-lat .corp { color: var(--sters); font-size: clamp(0.9rem, 1.3vw, 1rem); }
@media (max-width: 699px) { .nota-lat { align-self: start; } }

.titlu-mic {
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  line-height: 1.28;
  margin: 0 0 var(--sp-3);
  max-width: 26ch;
}

/* listă simplă, fără buline — liniuțe de aceeași salvie ca firul */
.lista { list-style: none; margin: var(--sp-3) 0 0; padding: 0; max-width: 34ch; }
.lista li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--corp);
  font-size: clamp(0.94rem, 1.6vw, 1.06rem);
  line-height: 1.9;
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 8px;
  height: 1px;
  background: var(--salvie);
}
.lista--teracota li::before { background: var(--teracota); }
.lista--studii li { line-height: 1.65; margin-bottom: 0.5rem; font-size: clamp(0.9rem, 1.3vw, 1rem); }
.lista--studii { max-width: 40rem; }

.spre {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--teracota-txt);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.spre:hover { border-bottom-color: var(--teracota-txt); }
.spre::after { content: " \2192"; }

/* ---------- închiderea paginii ---------- */
.inchidere {
  font-family: var(--titlu);
  font-weight: 300;
  font-size: clamp(1.65rem, 6vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* 36ch încape fraza pe un rând de la ~950px în sus. Sub atât se rupe
     singură după virgulă, care e locul potrivit oricum. */
  max-width: 36ch;
}
.inchidere .paranteza { color: var(--salvie-txt); }

/* ---------- trasee (evaluare) ---------- */
/* linia desparte două motive, deci nu are ce căuta nici sub etichetă,
   nici după ultimul. Trei motive = două separatoare. */
.traseu { padding-block: clamp(var(--sp-4), 3.5vw, var(--sp-5)); border-top: 0.5px solid var(--nisip); max-width: 44rem; }
.traseu:first-of-type { border-top: 0; padding-top: 0; }
/* Eticheta stă prea aproape de primul titlu. Cu margin nu merge: marginile
   verticale a doi vecini se contopesc și rămâne doar cea mai mare. Padding-ul
   se adaugă, deci el face treaba. */
.eticheta + .traseu { padding-top: var(--sp-3); }
.traseu h2, .traseu h3 { font-size: clamp(1.2rem, 2.8vw, 1.55rem); margin-bottom: 0.6rem; }
/* subtitlu în interiorul unui punct al politicii: vizibil mai mic decât titlul
   punctului, altfel ierarhia se pierde și pare că a început alt capitol. */
.traseu h3.sub-titlu { font-size: clamp(1rem, 2.1vw, 1.15rem); padding-top: var(--sp-3); }
.traseu .corp + .corp { margin-top: 0.9rem; }

.pret {
  font-family: var(--titlu);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.55;
  max-width: 30rem;
  margin: 1.2rem 0 0.7rem;
}
.pret em { font-style: normal; color: var(--salvie-txt); }

/* ---------- subsol ---------- */
.subsol {
  position: relative;
  z-index: 1;
  background: var(--subsol-fund);
  border-top: 0.5px solid var(--nisip);
  /* fara marja proprie: ultima secțiune are deja padding jos, iar cele
     două se adunau și lăsau aproape 300px de gol până la subsol */
  margin-top: 0;
  padding: clamp(var(--sp-4), 4vw, var(--sp-5)) var(--dr);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.subsol img { width: clamp(104px, 13vw, 126px); }

.subsol__legal {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--eticheta);
}
.subsol__legal a:hover { color: var(--salvie-txt); }

/* ---------- placeholder ---------- */
mark.ph {
  background: rgba(176, 118, 79, 0.13);
  color: inherit;
  padding: 0 0.18em;
  border-radius: 2px;
}
.salvie mark.ph { background: rgba(247, 244, 238, 0.2); }

/* ---------- accesibilitate ---------- */
:focus-visible { outline: 1.5px solid var(--teracota-txt); outline-offset: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print {
  .fir { display: none; }
  body { background: #fff; }
}

/* ==========================================================
   De la tabletă în sus, etichetele mici cresc cu un pas.
   Pe telefon rămân mărimile inițiale: ecranul e îngust, iar un
   text spațiat și cu majuscule ocupă acolo mult mai mult loc.
   ========================================================== */
@media (min-width: 700px) {
  .eticheta { font-size: 14px; letter-spacing: 0.22em; padding-left: 1.9rem; }
  .eticheta::before { top: 0.68em; width: 15px; }
  .rol { font-size: 13px; letter-spacing: 0.17em; }
  .insight { font-size: 15px; letter-spacing: 0.14em; }
  .date-om dt { font-size: 13px; letter-spacing: 0.14em; }
  .meniu-buton { font-size: 12px; letter-spacing: 0.2em; }
  .meniu-panou__legal a { font-size: 12px; }
  .subsol__legal { font-size: 12px; }
  .spre { font-size: 0.96rem; }
  .om__tel { font-size: 14px; letter-spacing: 0.04em; }
  .nota { font-size: 0.92rem; }
}

/* ==========================================================
   Doar pe telefon.
   ========================================================== */
@media (max-width: 699px) {
  /* Deschiderea e densă: patru citate, un titlu mare și un paragraf.
     Un rând în plus înainte de secțiunea următoare o desparte clar. */
  .deschidere + .bloc { padding-top: calc(var(--sp-6) + var(--sp-3)); }

  /* Grila lăsa coloana la 250px și o lipea la stânga, deci cardul întreg
     era decentrat — nu conținutul lui. Întâi coloana ocupă toată lățimea,
     abia apoi are sens centrarea. */
  .oameni { grid-template-columns: 1fr; justify-content: stretch; }
  .oameni article { text-align: center; }
  .oameni .om__foto { max-width: 260px; margin-left: auto; margin-right: auto; }

  /* deschiderea de pe psihologi păstrează spațiul redus și pe telefon */
  .deschidere--gol + .bloc { padding-top: var(--sp-4); }
}