/* ==========================================================================
   cabinetpsiholog.net — foaie de stil unica
   Fara JavaScript nicaieri: meniul, submeniul si caruselul merg numai din CSS,
   ca politica de securitate (CSP) sa poata interzice complet scripturile.
   ========================================================================== */

/* ---------- 1. Fontul ---------- */

/* Outfit, gazduit la noi. Nu de la Google: politica de securitate are
 * `font-src 'self'`, iar un font adus din afara ar cere slabirea ei plus o
 * conexiune straina la fiecare incarcare.
 *
 * Fisierul e taiat de constructor/fonturi.py la 189 de caractere si la
 * greutatile 300-700. Numele lui poarta o amprenta a continutului, pusa de
 * generator in locul semnului de mai jos - fara ea, un font schimbat nu s-ar
 * vedea un an intreg, fiindca .htaccess cere browserului sa tina minte
 * fisierele woff2 ca "immutable". */
@font-face {
  font-family: Outfit;
  src: url("../fonts/outfit.6b98b53b.woff2") format("woff2");
  font-weight: 300 700;   /* font variabil: o singura descarcare, toate greutatile */
  font-style: normal;
  /* `swap`: textul se vede imediat cu fontul de rezerva si se schimba cand
   * soseste Outfit. Alternativa ar lasa titlul invizibil o clipa. */
  font-display: swap;
}

/* ---------- 2. Valori de baza ---------- */
:root {
  --lat-max: 1200px;

  /* Verdele vine din logo: #7fb138, copacul cu coroana in forma de creier.
   * Pe alb are un contrast de doar 2.55:1, prea slab pentru text - de aceea
   * scrisul si linkurile folosesc varianta inchisa, care trece pragul de
   * 4.5:1 cerut de regulile de accesibilitate. Verdele deschis rămâne pe
   * fundaluri, unde nu se citeste nimic peste el. */
  --marca-verde: #7fb138;

  /* Fundal alb curat. Logoul original are fundal alb plin, fara transparenta,
   * deci se topeste in pagina fara sa fie nevoie de decupare - iar decuparea
   * ar lasa un contur murdar in jurul literelor. */
  --fundal: #ffffff;

  /* Zonele care trebuie sa se deosebeasca de alb - subsolul - nu mai pot fi
   * albe. Folosim un gri foarte deschis, cu o urma de verde, ca sa nu arate
   * cenusiu langa verdele marcii. */
  --fundal-alt: #f7f9f4;

  --card: #ffffff;
  --text: #1c2321;
  --text-slab: #58635e;
  --accent: #5b7f28;
  --accent-inchis: #47641e;
  --accent-slab: #eef5e2;
  --linie: #e2e5dd;

  --rotunjire: 18px;
  --rotunjire-mica: 10px;
  --umbra: 0 1px 2px rgba(31, 42, 46, .05), 0 8px 24px rgba(31, 42, 46, .06);

  --pas: clamp(1rem, 2.5vw, 1.75rem);

  /* CEL MAI MIC FONT DIN TOT SITE-UL: 15px.
   *
   * Nu e o preferinta, e o hotarare luata pentru publicul acestui site - oameni
   * care nu au toti ochi de douazeci de ani si care citesc despre ceva ce ii
   * doare. Nimic nu coboara sub asta: nici firimiturile, nici capetele de
   * coloana din subsol, nici etichetele formularului.
   *
   * Scrisa in rem, nu in px, ca sa creasca daca cineva mareste literele din
   * setarile browserului. Verificatorul se plange daca apare vreun font-size
   * mai mic. */
  --mic: 0.9375rem;

  /* A DOUA TREAPTA: 16px, pentru textul care se citeste cu adevarat - descrierea
   * unui serviciu, linkurile din meniu, durata unei sedinte.
   *
   * Regula, si motivul ei: `--mic` e numai pentru ETICHETE - firimituri, capete
   * de coloana, etichete de formular. Textul de citit primeste cel putin
   * `--mediu`. Intre 15 si 16 px nu sta nimic: acolo textul nu se deosebeste de
   * o eticheta, si arata mai mic decat este. Am facut exact greseala asta o
   * data, cu descrierea cardurilor la 15.36px si meniul la 15.2px. */
  --mediu: 1rem;

  /* Acelasi font peste tot - titluri si text. O singura descarcare, si o
   * infatisare unitara. Rezervele de dupa sunt fonturi de sistem cu proportii
   * apropiate, ca schimbarea sa nu tresara cand soseste Outfit. */
  --font: Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-titlu: var(--font);

  /* Titlurile sunt SUBTIRI, nu grase. La un font geometric ca Outfit, greutatea
   * 300 la marime mare arata modern si liniștit; 700 ar fi tipat. */
  --greutate-titlu: 300;
}

/* ---------- 2. Reset scurt ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* PRAGUL DE MARIME, pus o singura data, la radacina.
 *
 * Toate marimile din foaia asta sunt scrise in `rem`, adica se raporteaza la
 * marimea implicita a fontului din browser. Aceea NU e intotdeauna 16px: cine
 * a schimbat-o in setari - de pilda la 14px in Firefox - primea tot site-ul cu
 * 12% mai mic, iar "pragul de 15px" ajungea in realitate la 13.1px.
 *
 * `max(16px, 1rem)` ridica podeaua fara sa strice tavanul:
 *   browser la 14px  ->  max(16, 14) = 16px   (il ridicam)
 *   browser la 16px  ->  max(16, 16) = 16px   (neschimbat)
 *   browser la 20px  ->  max(16, 20) = 20px   (il lasam sa creasca)
 *
 * Merge fiindca `rem` scris in font-size-ul RADACINII inseamna, prin regula
 * CSS, valoarea implicita a browserului - nu valoarea calculata, deci nu se
 * invarte in cerc.
 *
 * PRETUL, spus deschis: cine a cerut anume litere mai mici de 16px nu le mai
 * primeste. Cine a cerut mai mari, le primeste in continuare. Pe un site citit
 * de oameni care nu au toti ochi de douazeci de ani, schimbul merita. */
html {
  font-size: max(16px, 1rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--fundal);
  color: var(--text);
  font: 400 clamp(1rem, .95rem + .2vw, 1.075rem)/1.65 var(--font);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-inchis); }
h1, h2, h3 {
  font-family: var(--font-titlu); font-weight: var(--greutate-titlu);
  line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .6em;
}
h1 { font-size: clamp(1.95rem, 1.3rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem); }
/* Titlurile mici se pierd la 300 - la marime mica un font subtire nu mai are
 * cu ce sa se deosebeasca de textul din jur. De la h3 in jos, greutate medie. */
h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.25rem); font-weight: 500; letter-spacing: -.01em; }
p, ul, ol { margin: 0 0 1.1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Sarim peste meniu, pentru cine navigheaza de la tastatura */
.sari-la-continut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7em 1.2em;
  border-radius: 0 0 var(--rotunjire-mica) 0;
}
.sari-la-continut:focus { left: 0; }

/* ---------- 3. Invelis ---------- */
.invelis { width: 100%; max-width: var(--lat-max); margin-inline: auto; padding-inline: var(--pas); }

/* ---------- 4. Banda de sus ---------- */
/* Linia verde de sus e chiar marginea de sus a benzii, nu un element in plus -
 * asa nu adauga nimic la structura paginii. */
.bara-sus {
  border-top: 4px solid var(--marca-verde);
  border-bottom: 1px solid var(--linie);
  background: var(--fundal);
}
.bara-sus p {
  margin: 0; padding-block: .6rem;
  text-align: center; font-size: var(--mic); color: var(--text-slab);
}
.bara-sus a {
  color: var(--accent); font-weight: 600; text-decoration: none;
  white-space: nowrap;   /* numarul de telefon nu se rupe pe doua randuri */
}
.bara-sus a:hover { text-decoration: underline; }

/* ---------- 5. Antet ---------- */
.antet {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 50;
}
/* Logoul la stanga, meniul la dreapta, pe un singur rând.
 * `margin-right: auto` pe logo impinge tot restul catre dreapta. */
.antet__rand { display: flex; align-items: center; gap: 1.5rem; min-height: 82px; }

.marca { display: flex; text-decoration: none; color: inherit; margin-right: auto; }
/* Fisierul are 392x73. La 235px il aratam la 60% din marimea lui, adica are
 * inca 1.67 pixeli de imagine pentru fiecare pixel de ecran - destul ca sa
 * arate curat si pe ecranele cu densitate dubla. Mai mare de atat ar incepe
 * sa se vada moale, fiindca original mai mare nu exista. */
.marca img { width: 235px; height: auto; }

@media (max-width: 420px) {
  .marca img { width: 190px; }
}

/* Butonul de meniu pe telefon — comutator din CSS, fara JS */
.meniu-comutator { position: absolute; opacity: 0; pointer-events: none; }
.meniu-buton {
  display: none; cursor: pointer; padding: .55rem; margin: -.55rem -.4rem -.55rem 0;
  border-radius: var(--rotunjire-mica); color: var(--text);
}
.meniu-buton svg { width: 26px; height: 26px; }
.meniu-comutator:focus-visible ~ .antet__rand .meniu-buton { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 5. Navigatie ---------- */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: block; padding: .55rem .7rem; border-radius: var(--rotunjire-mica);
  text-decoration: none; color: var(--text); font-size: var(--mediu); white-space: nowrap;
}
.nav a:hover { background: var(--accent-slab); color: var(--accent-inchis); }
.nav [aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Submeniul se deschide la hover si la focus — deci si de la tastatura */
.nav__grup { position: relative; }
.nav__grup > ul {
  position: absolute; top: calc(100% + .35rem); left: 0; min-width: 265px;
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--rotunjire);
  box-shadow: var(--umbra); padding: .4rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__grup:hover > ul,
.nav__grup:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.nav__grup > ul a { white-space: normal; font-size: var(--mic); }
.nav__grup > a::after {
  content: ""; display: inline-block; vertical-align: .17em; margin-left: .42em;
  width: .42em; height: .42em; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 980px) {
  .meniu-buton { display: block; }
  /* Pe telefon meniul iese din rând si devine un panou peste pagina. */
  .nav {
    position: fixed; inset: 82px 0 auto; max-height: calc(100dvh - 82px); overflow-y: auto;
    background: var(--card); border-bottom: 1px solid var(--linie);
    padding: .6rem var(--pas) 1.4rem; box-shadow: var(--umbra);
    display: none;
  }
  .meniu-comutator:checked ~ .antet__rand .nav { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .8rem .6rem; border-radius: var(--rotunjire-mica); }
  .nav > ul > li + li { border-top: 1px solid var(--linie); }
  /* Pe telefon submeniul sta desfasurat — nu are rost hover unde nu exista mouse */
  .nav__grup > ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; min-width: 0; padding: 0 0 .4rem .9rem;
    background: transparent;
  }
  .nav__grup > ul a { color: var(--text-slab); padding-block: .6rem; }
  .nav__grup > a::after { display: none; }
}

/* ---------- 6. Carusel — numai CSS ---------- */
.hero { padding-block: clamp(1.5rem, 3vw, 2.75rem) 0; }
.carusel {
  position: relative; border-radius: var(--rotunjire);
  overflow: hidden; background: var(--fundal-alt);

  /* Inaltime adevarata, pe toata lungimea.
   *
   * ATENTIE, capcana platita deja: NU se scrie `aspect-ratio` plus
   * `max-height`. La un element cu raport dat si lățime automată, cand
   * max-height taie inaltimea, browserul recalculeaza si LATIMEA ca sa
   * pastreze raportul - hero-ul se ingusteaza la ~60% si rămâne un gol alb in
   * dreapta. Nu se scurteaza, se subtiaza.
   *
   * Cu `height` adevarata, latimea rămâne 100% si fotografia se taie pe
   * verticala prin `object-fit: cover`.
   *
   * De ce o opreliste: lasat liber, pe un ecran de 1440 hero-ul ajungea la
   * 619px si se termina la 785px de sus, adica umplea tot primul ecran.
   * Vizitatorul vedea o fotografie de stoc si nimic altceva - nici titlul,
   * nici serviciile, nici telefonul. */
  width: 100%;
  height: 500px;
}

/* Pragul de mai jos NU e ales din ochi. E lățimea de ecran la care fotografia
 * atinge singura 500px, deci de unde incolo opreliștea nu mai are ce opri:
 *
 *   latime_continut = ecran - 2 * clamp(16px, 2.5vw, 28px)  =  0.95 * ecran
 *   inaltime        = latime_continut * 509/940             =  0.5144 * ecran
 *   0.5144 * ecran = 500  ->  ecran = 972px
 *
 * Daca se schimba inaltimea de sus, se recalculeaza si numarul de aici -
 * altfel apare un salt de inaltime exact la trecere. */
@media (max-width: 970px) {
  .carusel { height: auto; aspect-ratio: 940 / 509; }
}
/* Fara umbra, deliberat. Umbra e pentru lucrurile care trebuie sa para ridicate
 * deasupra paginii - submeniul, cardul sub mouse. Hero-ul e un bloc static, iar
 * pe alb curat o umbra sub o fotografie atat de lata nu se citeste ca adancime,
 * ci ca o pata gri pe margini. Colturile rotunjite spun deja destul.
 * Daca o vrei inapoi: box-shadow: var(--umbra); aici. */
.carusel__pista { display: flex; width: 300%; height: 100%; animation: culisare 18s infinite; }
.carusel__cadru { width: 33.3333%; height: 100%; display: block; }
.carusel__cadru picture { display: block; height: 100%; }
.carusel__cadru img { width: 100%; height: 100%; object-fit: cover; }

/* Pe unde se taie fiecare fotografie, cand hero-ul e mai scund decat raportul
 * ei. Vezi comentariile din constructor/pagini.mjs pentru de ce fiecare. */
.carusel__cadru img.taiere-centru { object-position: center center; }
.carusel__cadru img.taiere-jos    { object-position: center 62%; }
.carusel__cadru img.taiere-sus    { object-position: center 30%; }

@keyframes culisare {
  0%,    28.0% { transform: translateX(0); }
  33.3%, 61.3% { transform: translateX(-33.3333%); }
  66.6%, 94.6% { transform: translateX(-66.6666%); }
  100%         { transform: translateX(0); }
}

/* Pauza — tot din CSS, printr-un comutator ascuns */
.carusel-pauza { position: absolute; opacity: 0; pointer-events: none; }
.carusel-pauza:checked ~ .carusel .carusel__pista { animation-play-state: paused; }
.carusel__pauza-buton {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 3; cursor: pointer;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .88); border-radius: 50%;
  box-shadow: 0 1px 6px rgba(31, 42, 46, .25); color: var(--text);
}
.carusel__pauza-buton svg { width: 15px; height: 15px; }
.carusel__pauza-buton .semn-redare { display: none; }
.carusel-pauza:checked ~ .carusel .carusel__pauza-buton .semn-redare { display: block; }
.carusel-pauza:checked ~ .carusel .carusel__pauza-buton .semn-pauza { display: none; }
.carusel-pauza:focus-visible ~ .carusel .carusel__pauza-buton { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Cine a cerut sistemului mai putina miscare nu primeste carusel rotitor */
@media (prefers-reduced-motion: reduce) {
  .carusel__pista { animation: none; }
  .carusel__pauza-buton { display: none; }
}

/* ---------- 7. Continut ---------- */
.pagina { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem); }
.pagina__titlu { margin-bottom: .35em; }
.pagina__subtitlu { color: var(--text-slab); font-size: 1.08rem; margin-bottom: 2em; }
.proza { max-width: 74ch; }
.proza ul { padding-left: 1.15em; }
.proza li { margin-bottom: .42em; }
.proza strong { font-weight: 600; }

/* ---------- Bara de titlu ----------
 *
 * Numele paginii la stanga, drumul pana la ea la dreapta. Reface bara temei
 * vechi, dar coloratа cu verdele din logo.
 *
 * De ce un verde deschis si nu #7fb138 plin: pe verdele logoului, scrisul alb
 * are un contrast de doar 2.4:1 - sub pragul de 4.5:1 - deci ar fi greu de
 * citit. Cu un verde palid si scris inchis ajungem la peste 7:1, si verdele se
 * vede la fel de bine.
 *
 * Nu apare pe prima pagina: acolo sunt caruselul si titlul sub el. */
.bara-titlu {
  background: linear-gradient(180deg, #f5faed 0%, #e8f2d7 100%);
  border-bottom: 1px solid #d8e7bf;
}
.bara-titlu .invelis {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
}
.bara-titlu h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
}

/* Panglica de firimituri */
.firimituri { font-size: var(--mic); color: var(--text-slab); }
.firimituri ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45em; margin: 0; padding: 0; }
.firimituri li + li::before { content: "/"; margin-right: .45em; color: #b9cf95; }
.firimituri a { color: var(--accent-inchis); }

/* ---------- Pagina "Despre mine" ---------- */
.cv h2 { margin-bottom: .15em; }
.cv__nume { color: var(--text-slab); margin-bottom: 2em; }
.cv h3 {
  margin-top: 2em; margin-bottom: .7em;
  padding-bottom: .35em; border-bottom: 1px solid var(--linie);
}
.cv ul { padding-left: 1.3em; }
.cv li { margin-bottom: .5em; }
.cv li::marker { color: var(--marca-verde); }

/* Lista de formare continua are 16 randuri. Pe o singura coloana e un perete
 * de text pe care ochiul il sare; pe doua se poate parcurge.
 * `break-inside: avoid` tine fiecare rand intreg, sa nu se rupa intre coloane. */
.cv__doua-coloane { columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
.cv__doua-coloane li { break-inside: avoid; margin-bottom: .8em; }
@media (max-width: 820px) {
  .cv__doua-coloane { columns: 1; }
}

.cv__acum {
  margin-top: 1.6em; padding: .8em 1.1em;
  background: var(--accent-slab); border-radius: var(--rotunjire-mica);
  display: inline-block;
}

/* ---------- 8. Carduri ---------- */
.carduri {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  padding: 0; margin: 0; list-style: none;
}
.card {
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--rotunjire);
  padding: clamp(1.15rem, 2vw, 1.6rem); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--umbra); border-color: #cfd8d6; }
/* Titlul de card: mai mare decat textul din card, ca sa se citeasca de la
 * distanta care e cardul. Greutatea rămâne 500 si nu coboara la 300 ca la
 * titlurile mari - la marimea asta un font subtire ar incepe sa se topeasca in
 * textul de dedesubt. */
.card h2, .card h3 {
  font-size: clamp(1.22rem, 1.1rem + .45vw, 1.42rem);
  font-weight: 500; letter-spacing: -.015em; line-height: 1.25;
  margin-bottom: .55em;
}
.card h2 a, .card h3 a { text-decoration: none; color: inherit; }
.card h2 a:hover, .card h3 a:hover { color: var(--accent); }
.card p { color: var(--text-slab); font-size: var(--mediu); margin-bottom: 1.1em; }
.card__mai-mult { margin-top: auto; font-size: var(--mic); font-weight: 600; text-decoration: none; }
.card__mai-mult::after { content: " \203A"; }

/* ---------- 9. Butoane ---------- */
.buton {
  display: inline-block; padding: .78em 1.5em; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 600;
  border: 0; cursor: pointer; font-size: 1rem; font-family: inherit;
  transition: background .16s ease, transform .16s ease;
}
.buton:hover { background: var(--accent-inchis); color: #fff; transform: translateY(-1px); }
.buton--linie { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.buton--linie:hover { background: var(--accent-slab); color: var(--accent-inchis); }

/* ---------- Lista "Cand ai nevoie de ajutorul unui psiholog" ---------- */
/* Fara fundal si fara bara verde, deliberat.
 *
 * Pe site-ul vechi lista sta intr-un "reading box" al temei Avada: fundal gri
 * si o bara verde in stanga. Acolo avea rost - pagina era incarcata si lista
 * trebuia sa se desprinda de ea. Pe alb curat nu mai are ce sa desprinda:
 * titlul face deja separarea, iar cutia adauga doar zgomot.
 *
 * Din marca rămâne exact cat trebuie: bulinele verzi. */
.caseta-intrebare { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.caseta-intrebare h2 {
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  margin-bottom: .9em;
}
.caseta-intrebare h2 em { font-style: italic; }

.caseta ul { margin: 0; padding-left: 1.3em; max-width: 88ch; }
/* Punctele sunt propozitii lungi; au nevoie de aer intre ele ca sa nu se
 * amestece la citit. */
.caseta li { margin-bottom: .7em; }
.caseta li:last-child { margin-bottom: 0; }
.caseta li::marker { color: var(--marca-verde); }

/* ---------- Tarife ---------- */
/* Propozitiile sunt cele de pe site-ul vechi, doar regrupate pe serviciu.
 * Pretul e scos in evidenta cu un `span` fara greutate semantica: nu adaugam
 * `strong`, ca sa nu schimbam ce e important in text - schimbam doar ce se vede
 * intai. */
.tarife {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: .8rem; max-width: 46rem;
}
.tarife li {
  border: 1px solid var(--linie); border-radius: var(--rotunjire);
  border-left: 4px solid var(--marca-verde);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.5vw, 1.6rem);
}
.tarife p { margin: 0; }
.tarife__cost { font-size: 1.06rem; }
.tarife__durata { color: var(--text-slab); font-size: var(--mediu); margin-top: .35em; }
.tarife__pret {
  font-size: 1.22em; font-weight: 600; color: var(--accent);
  white-space: nowrap;   /* "200 RON" nu se rupe pe doua randuri */
}

/* ---------- 10. Chemare la actiune ---------- */
.chemare {
  background: var(--accent-slab); border-radius: var(--rotunjire);
  padding: clamp(1.6rem, 3.5vw, 2.6rem); text-align: center; margin-top: clamp(2rem, 4vw, 3rem);
}
.chemare h2 { margin-bottom: .45em; }
.chemare p { color: var(--text-slab); max-width: 52ch; margin-inline: auto; }
.chemare__butoane { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.4rem; }

/* ---------- 11. Formular ---------- */
.formular { display: grid; gap: 1.05rem; max-width: 40rem; }
.camp { display: grid; gap: .4rem; }
.camp > span { font-size: var(--mic); font-weight: 600; }
.camp em { font-style: normal; color: var(--text-slab); font-weight: 400; }
.camp input, .camp textarea, .camp select {
  font: inherit; color: inherit; width: 100%;
  padding: .72em .85em; border: 1px solid var(--linie); border-radius: var(--rotunjire-mica);
  background: var(--card);
  line-height: 1.45;   /* aceeasi la toate trei, altfel select-ul iese mai scund */
}
.camp textarea { min-height: 9.5rem; resize: vertical; }
.camp input:focus, .camp textarea:focus, .camp select:focus {
  border-color: var(--accent); outline: 2px solid var(--accent-slab);
}

/* Select-ul, adus la aceeasi infatisare cu casetele de text.
 *
 * `appearance: none` scoate desenul sistemului - altfel arata ca o piesa
 * strains langa celelalte campuri, cu alt fundal si alta rotunjire. In locul
 * sagetii native desenam una proprie, in aceeasi culoare cu textul slab.
 *
 * Sageata e un SVG scris direct in adresa (data:). Politica de securitate o
 * permite: `img-src 'self' data:` acopera si imaginile de fundal din CSS. */
.camp select {
  appearance: none;
  padding-right: 2.4em;   /* loc pentru sageata */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2358635e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95em center;
  cursor: pointer;
}

/* Cat timp nu s-a ales nimic, textul "Alege din lista" e slab - se vede ca e o
 * invitatie, nu un raspuns. Se face fara JavaScript, uitandu-ne la ce optiune e
 * bifata. Browserele care nu inteleg `:has` arata textul normal, ceea ce e in
 * regula: nu se strica nimic. */
.camp select:has(option[value=""]:checked) { color: var(--text-slab); }
.camp select option { color: var(--text); }
.bifa { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--mic); line-height: 1.5; }
.bifa input { margin-top: .28em; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--accent); }
/* Capcana pentru roboti: un camp pe care omul nu il vede, deci nu il completeaza */
.capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.anunt { border-radius: var(--rotunjire-mica); padding: .95em 1.15em; margin-bottom: 1.5rem; font-size: var(--mediu); }
.anunt--bun { background: var(--accent-slab); color: var(--accent-inchis); }
.anunt--rau { background: #fdeceb; color: #8d2b22; }

/* ---------- 12. Pagina de contact ---------- */
/* Datele la stanga, formularul la dreapta.
 *
 * Doua lucruri reparate aici. Intai, formularul era un turn de cinci campuri pe
 * toata latimea, cu jumatate de ecran gol in dreapta. Al doilea si mai
 * important: numarul de telefon - calea prin care majoritatea oamenilor chiar
 * fac o programare - era cel mai mic text din pagina, iar cel mai mare era un
 * titlu care doar anunta formularul de dedesubt. Ierarhia era pe dos. */
.contact-aranjare {
  display: grid; align-items: start;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 23.5rem) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .contact-aranjare { grid-template-columns: 1fr; }
}

.contact-text {
  background: var(--fundal-alt); border-radius: var(--rotunjire);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: 1.02rem;
}
.contact-text p { margin: 0 0 1.1em; }
.contact-text p:last-child { margin-bottom: 0; }

/* Nota despre metrou si despre adresa data la telefon: se citeste, dar nu
 * concureaza cu telefonul, care rămâne lucrul cel mai apasat din caseta. */
.contact-nota {
  font-size: var(--mic); color: var(--text-slab); line-height: 1.5;
  padding-top: 1.05em; border-top: 1px solid var(--linie);
}

/* Telefonul, scos in fata: e cel mai des primul pas adevarat. */
.contact-text a {
  font-size: 1.32em; font-weight: 600; text-decoration: none;
  color: var(--accent); white-space: nowrap;
}
.contact-text a:hover { text-decoration: underline; }

.contact-formular h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }

/* Campurile scurte, cate doua pe rand. Pe telefon se intorc unul sub altul -
 * doua casete pe un ecran de 390px ar fi prea inguste pentru un numar. */
.camp-pereche { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
  .camp-pereche { grid-template-columns: 1fr; }
}

/* ---------- 13. Subsol ---------- */
.subsol { background: var(--fundal-alt); border-top: 1px solid var(--linie); padding-block: clamp(2rem, 4vw, 3rem); font-size: var(--mic); }
.subsol__coloane { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
/* Capetele de coloana din subsol: mici si cu majuscule, deci au nevoie de
 * greutate ca sa se citeasca. */
/* La 15px cu majuscule, greutatea 600 ar fi prea grea; 500 e destul. */
.subsol h2 { font-size: var(--mic); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--text-slab); margin-bottom: .9em; }
.subsol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.subsol a { text-decoration: none; color: var(--text); }
.subsol a:hover { color: var(--accent); text-decoration: underline; }
.subsol__legal {
  border-top: 1px solid var(--linie); margin-top: 2rem; padding-top: 1.4rem;
  color: var(--text-slab); display: grid; gap: .2rem;
}
.subsol__legal p { margin: 0; }
.subsol__legal strong { color: var(--text); font-weight: 600; }
/* Specialitatea sta imediat sub nume si nu trebuie sa se stinga in scrisul mic
 * si cenusiu al subsolului: culoarea plina a textului, nu cea slaba. */
.subsol__specialitate { color: var(--text); font-weight: 500; }
.subsol__legal a { color: var(--accent); }

.subsol__jos { border-top: 1px solid var(--linie); margin-top: 1.4rem; padding-top: 1.2rem; color: var(--text-slab); display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; }
.subsol__jos p { margin: 0; }