/* ==========================================================================
   HERO — pasul 7 din CLAUDE.md §17. O singura sectiune, dusa pana la capat.

   Regia vine din BRIEF §13: hero STATIC si instant, nu intro cinematic.
   Parcursul prin casa incepe abia la derulare, in sesiunea urmatoare.

   Teza (BRIEF §6, teza 1): „Peste zece ani, tot noi suntem aici."
   Raspunde fricii principale a pacientului — incertitudinea legata de viitor,
   nu durerea. Durerea se rezolva mai jos in pagina, inainte de contact.

   Zero JavaScript. Secventa de intrare e pur CSS, deci daca ceva cade,
   pagina ramane intreaga si citibila.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  overflow-x: clip;                     /* plasa de siguranta pentru decupajul care iese in lat */
}

/* Textura (§8.3) — scoate suprafata din senzatia de plat digital. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background-image: var(--grain);
  opacity: calc(var(--grain-opacity) * 0.5);   /* pe hartie deschisa, jumatate ajunge */
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sari {
  position: absolute;
  left: var(--sp-4); top: var(--sp-4);
  z-index: 20;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-accent);
  color: var(--text-on-accent);
  border-radius: var(--r-xs);
  transform: translateY(-200%);
}
.sari:focus { transform: none; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--c-scoarta);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

a { color: inherit; }

/* ------------------------------------------------------------------ antet

   §15 din BRIEF: o marca scrisa de mana, mica, langa un nume asezat
   tipografic, cu tracking larg. Numele NU e finalizat (§11) — de aceea
   wordmark-ul e text simplu, inlocuibil fara sa se rearanjeze nimic.        */

.antet {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--header-h);
  padding: var(--sp-4) var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}

.marca { display: flex; align-items: center; gap: var(--sp-4); text-decoration: none; }

/* Monograma „hs" — scrisul de mana REAL al lui Niki, fotografiat si vectorizat
   (`assets/logo-hs-scris-mana.jpg`). Nu e desenata de mine: are grosimea
   variabila a penitei, ezitarile si subtierile lui, exact ca semnaturile.
   Stilizata, nu redesenata: conturul e netezit si convertit in curbe Bezier,
   ca sa dispara zimtii pragului si terminatiile mancate de vectorizare.
   Singura interventie asupra gestului e echilibrarea optica — „s" ridicat si
   marit cu 10%, ca perechea sa se citeasca drept marca, nu doua litere alaturate.
   Contur umplut, deci mosteneste culoarea prin currentColor.

   In antet intra doar CORPUL marcii, fara coada lunga. Coada exista ca sa
   sparga wordmark-ul in blocul stivuit; aici, langa un singur rand de text,
   ar atarna in gol. Deci: doua variante ale aceluiasi logo — blocul stivuit
   pentru contexte mari, varianta orizontala compacta pentru antet. */
.marca-mono {
  height: 2.5rem;
  width: auto;
  flex: none;
  overflow: visible;
  color: var(--text-primary);
}
.marca-mono path { fill: currentColor; }
.marca-nume {
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);      /* 0.22em — acelasi tracking ca in desen */
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.nav-principal { display: none; margin-left: auto; gap: var(--sp-6); }
.nav-principal a {
  font-size: var(--step--1);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-decoration: none;
  text-underline-offset: 0.35em;
}
.nav-principal a:hover { text-decoration: underline; }

.antet-tel {
  margin-left: auto;
  font-size: var(--step--1);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.antet-tel:hover { color: var(--text-primary); }

@media (min-width: 860px) {
  .nav-principal { display: flex; }
  .antet-tel { margin-left: 0; }
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-12) var(--gutter) var(--sp-24);
  display: grid;
  gap: var(--sp-8);
}

/* Titlul trece pe TOATA latimea, nu intr-o coloana langa poza.
   Motivul e masurat, nu estetic: „tot noi suntem aici." are ~670px la corpul
   de hero. Intr-o coloana de 475px se rupea in patru randuri zdrentuite, iar
   singura alternativa era sa cobor corpul titlului — adica sa slabesc exact
   frazei care duce toata teza. Asa ramane la corp intreg, pe doua randuri. */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "titlu   titlu"
      "text    media";
    align-items: start;
    column-gap: clamp(var(--sp-8), 5vw, var(--sp-24));
    row-gap: var(--sp-8);
    padding-block: var(--sp-12) var(--sp-24);
  }
  .hero-eyebrow { grid-area: eyebrow; }
  .hero h1      { grid-area: titlu; }
  /* Aliniat sus, nu centrat pe verticala. Centrat, textul pornea de la mijlocul
     unui rand inalt cat fotografia si impingea butonul „Programeaza-te" sub
     linia de plutire pe un laptop de 720px. Acum textul si poza incep de la
     aceeasi linie, iar golul de dedesubt e aer, nu greseala. */
  .hero-text    { grid-area: text; align-self: start; }
  .hero-media   { grid-area: media; }
}

.hero-eyebrow {
  margin: 0 0 var(--sp-6);
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);          /* 5.37:1 */
}

.hero h1 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 400;                     /* Young Serif are o singura grosime */
  /* `balance`, nu `pretty`: pe telefon, fara randul fortat, titlul lasa „tot noi"
     orfan pe un rand de 159px. balance egalizeaza randurile, ceea ce e exact
     ce vrei la un titlu scurt. */
  text-wrap: balance;
}

.hero-lead {
  margin: 0 0 var(--sp-8);
  max-width: 34ch;
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--text-secondary);         /* 8.52:1 */
}

/* Un singur buton. §6 interzice formula „doua butoane + gradient", iar
   telefonul e deja in antet si in bara de jos pe mobil. */
.buton {
  display: inline-block;
  padding: var(--sp-4) var(--sp-8);
  background: var(--bg-accent);
  color: var(--text-on-accent);         /* 8.52:1 */
  font-size: var(--step-0);
  text-decoration: none;
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.buton:hover {
  background: var(--c-scoarta);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.hero-program {
  margin: var(--sp-6) 0 0;
  font-size: var(--step--1);
  color: var(--text-tertiary);
}
.hero-program b { font-weight: 600; color: var(--text-secondary); }

/* --------------------------------------------------------------- fotografia

   §8.2: poza iese din containerul ei. Decupajul e plafonat, ca pe ecrane
   foarte late sa nu devina un panou urias. Fara procent in calcul —
   procentele s-ar raporta la celula de grid, nu la pagina.                  */

/* Cadrul, raza si umbra stau pe <figure>, nu pe <img>, iar figura taie ce iese.
   Motivul: secventa de intrare scaleaza poza cu 2,5%, iar poza e deja lipita de
   marginea ecranului — fara taiere, pagina chiar se putea derula lateral in
   primele 640 ms. Umbra ramane intreaga: `overflow` taie copiii, nu propria umbra. */
.hero-media {
  margin: 0;
  overflow: clip;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xl);         /* umbra calda, cazuta jos-stanga */
}

@media (min-width: 900px) {
  .hero-media {
    /* Distanta de la marginea continutului pana la marginea ecranului e
       gutter-ul PLUS jumatate din cat depaseste ecranul containerul.
       Prima varianta o omitea pe prima si poza se oprea la ~50px de margine,
       adica arata ca o greseala de aliniere, nu ca un decupaj. Plafonat la
       9rem ca pe ecrane foarte late sa nu devina un panou urias. */
    margin-right: calc(-1 * min(9rem,
        var(--gutter) + max(0px, (100vw - var(--container)) / 2)));
  }
}

.hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pe mobil poza trece dintr-o margine in alta a ecranului. */
@media (max-width: 899px) {
  .hero-media { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
}

/* ------------------------------------------------- bara de jos, pe mobil

   §9 / §19: butonul de programare e vizibil PERMANENT pe mobil. E cea mai
   mare diferenta de conversie din tot site-ul, deci nu depinde de scroll
   si nu depinde de JavaScript.                                             */

.bara-mobil {
  position: fixed;
  z-index: 4;
  inset: auto 0 0 0;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  min-height: var(--mobile-bar-h);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-hair);
  box-shadow: var(--shadow-lg);
}
.bara-mobil a { flex: 1; text-align: center; text-decoration: none; }
.bara-mobil .suna {
  padding: var(--sp-3);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
}
.bara-mobil .buton { padding: var(--sp-3); box-shadow: none; }

/* Bara are min-height 64px, dar cu padding-ul ei ajunge la ~80. Rezervam
   inaltimea din token PLUS o treapta de spatiu, altfel ultimul rand de
   continut ramane pe sub bara. */
body { padding-bottom: calc(var(--mobile-bar-h) + var(--sp-6) + env(safe-area-inset-bottom)); }

@media (min-width: 860px) {
  .bara-mobil { display: none; }
  body { padding-bottom: 0; }
}

/* ---------------------------------------------------- secventa de intrare

   §7, efectul #1: un singur moment orchestrat, ~700 ms — fotografia se
   asaza, apoi textul urca in ordinea de citire. Doar transform si opacity.
   Starea de baza e „vizibil": daca animatiile sunt oprite, nu dispare nimic. */

@keyframes urca  { from { opacity: 0; transform: translateY(0.7rem); } }
@keyframes asaza { from { opacity: 0; transform: scale(1.025); } }

/* `backwards`, nu `both`: starea de dinainte de pornire se aplica doar pe
   durata intarzierii, iar dupa ce animatia se termina elementul revine la
   stilul lui normal — adica vizibil. Cu `both` textul ramane agatat de
   ultimul cadru, deci orice mediu care nu ruleaza animatia il lasa la
   opacity 0. Un hero nu are voie sa depinda de asta ca sa fie citit. */
.hero-media img { animation: asaza var(--dur-slow) var(--ease-out) backwards; }
.hero-eyebrow    { animation: urca var(--dur-base) var(--ease-out)  60ms backwards; }
.hero h1         { animation: urca var(--dur-base) var(--ease-out) 120ms backwards; }
.hero-lead       { animation: urca var(--dur-base) var(--ease-out) 200ms backwards; }
.hero-actiuni    { animation: urca var(--dur-base) var(--ease-out) 280ms backwards; }
.hero-program    { animation: urca var(--dur-base) var(--ease-out) 340ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .hero-media img, .hero-eyebrow, .hero h1,
  .hero-lead, .hero-actiuni, .hero-program { animation: none; }
}

.doar-lat { display: none; }
@media (min-width: 560px) { .doar-lat { display: inline; } }

/* ==========================================================================
   PARCURSUL + SCENA SEMNATURILOR

   Clipul e filmat pe verticala, cu telefonul. In loc sa ascundem asta, o
   ARATAM: filmarea ruleaza intr-o rama de telefon. Formatul vertical devine
   astfel intentie, nu compromis, si nu mai trebuie nici decupat orizontal,
   nici completat cu spatiu generat — §16 interzice oricum incaperi care nu
   exista, iar regula aia protejeaza toata pozitionarea.

   Rama e construita din paleta noastra, nu e un mockup fotorealist de produs:
   asa nu se dateaza si nu se bate cap in cap cu materialitatea site-ului.

   La final usile se deschid IN ecran, apoi telefonul se dizolva si ramai in
   camera intunecata, cu semnaturile. Trecerea de la „te uiti la un clip" la
   „esti inauntru" e chiar arcul scenei.
   ========================================================================== */

.scena {
  position: relative;
  background-color: var(--c-umbra);
  background-image: var(--grad-camera);
  color: var(--text-on-dark);
  --ink: var(--c-hartie);
  --ink-hot: var(--c-alama);
  --mask-on: #fff;                     /* valoare de control a mastii, nu culoare */
}
.scena-pin { position: relative; }
.scena-cadru {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--gutter);
}

/* ------------------------------------------------------------- telefonul */

.telefon {
  position: relative;
  /* Toate dimensiunile ramei deriva dintr-o singura latime. In prima varianta
     pastila si raza colturilor erau in `rem` fix, deci pe ecrane joase, unde
     telefonul se micsoreaza, pastila ajungea la peste jumatate din latime.
     1.7187 = raportul intre inaltimea totala a ramei si latimea ei. */
  --w: min(19.5rem, 88vw, calc(82svh / 1.7187));
  width: var(--w);
  padding: calc(var(--w) * 0.038);
  border-radius: calc(var(--w) * 0.135);
  background: var(--c-umbra);
  box-shadow: var(--shadow-xl),
              inset 0 0 0 1px color-mix(in srgb, var(--c-piatra) 34%, transparent);
  will-change: transform, opacity;
}
.telefon-ecran {
  position: relative;
  aspect-ratio: 900 / 1600;
  border-radius: calc(var(--w) * 0.10);
  overflow: clip;
  background: var(--c-umbra);
}
.telefon-pastila {
  position: absolute;
  z-index: 4;
  top: calc(var(--w) * 0.075); left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w) * 0.245); height: calc(var(--w) * 0.062);
  border-radius: var(--r-pill);
  background: var(--c-umbra);
}

/* Cadrele stau stivuite si se aprinde doar unul. */
.cadru, .cadru-gaura {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cadru { opacity: 0; }
.cadru:first-of-type { opacity: 1; }   /* fara JS ramane primul cadru, intreg */

.usa-grup { position: absolute; inset: 0; opacity: 0; }
.usa-gol {
  position: absolute;
  left: 3.9941%; top: 0; width: 89.4970%; height: 96.6667%;
  perspective: 1100px;
}
/* Golul din spatele usii trebuie sa CITEASCA drept spatiu, altfel canaturile
   par ca dispar in nimic. Gradientul cald plus umbra interioara dau adancime. */
.usa-fund {
  position: absolute; inset: 0;
  background-color: var(--c-umbra);
  background-image: var(--grad-camera);
  box-shadow: inset 0 0 4rem 1rem color-mix(in srgb, var(--c-umbra) 88%, transparent);
}
.canat {
  position: absolute; top: 0; height: 100%;
  filter: brightness(var(--lum, 1));
  will-change: transform;
}
.canat-st { left: 0;  width: 53.8843%; transform-origin: left center; }
.canat-dr { right: 0; width: 46.1157%; transform-origin: right center; }

/* ---------------------------------------------------------------- interior */

.interior { display: grid; place-items: center; padding: var(--sp-16) var(--gutter); }
.interior-continut { position: relative; width: 100%; max-width: var(--container); }

.semnaturi { display: grid; gap: var(--sp-8); }
.semn { margin: 0; min-width: 0; }
.semn figcaption {
  margin-top: var(--sp-3);
  font-size: var(--step-0);
  color: var(--c-piatra);              /* 7.97:1 pe umbra */
}
.sig { display: block; width: 100%; height: auto; overflow: visible; }
.pen { fill: none; stroke: var(--mask-on); stroke-linecap: round; stroke-linejoin: round; }
.s-ink { stop-color: var(--ink); }
.s-hot { stop-color: var(--ink-hot); }

@media (min-width: 700px) {
  .semnaturi { grid-template-columns: 1.06fr .94fr; align-items: start; }
  .semn--niki { margin-top: 11%; }
}

.scena .motto {
  margin: var(--sp-12) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--text-on-dark);
  opacity: var(--t, 1);
  transform: translateY(calc((1 - var(--t, 1)) * var(--sp-6)));
}
.scena .motto span { display: block; color: var(--c-piatra); }

/* ---------------------------------------------------------- animatia ON */

/* 560vh, nu 420: cu 32 de cadre pe 46%% din parcurs, la 420vh fiecare cadru
   primea ~40px de scroll si miscarea se citea in trepte. Acum primeste ~60,
   iar cu suprapunerea dintre cadre trecerea e continua. Scrollul paginii NU e
   incetinit — doar animatia are mai mult drum pe care sa se desfasoare. */
body.scena-js .scena { height: 560vh; }
body.scena-js .scena-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}
body.scena-js .scena-cadru { position: absolute; inset: 0; }
body.scena-js .interior { position: absolute; inset: 0; opacity: 0; align-content: center; }
body.scena-js .sig { max-height: 24svh; }

/* ==========================================================================
   RESTUL PAGINII ACASA — pasul 9 din §17: „de ce aici", tratamente, echipa.
   ========================================================================== */

.sect { padding-block: var(--sp-24); }
.sect-int { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sect--adancit { background: var(--bg-sunken); }      /* greige, suprafata mare (§8) */

.eyebrow {
  margin: 0 0 var(--sp-8);
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.intro { max-width: 52ch; font-size: var(--step-1); line-height: var(--lh-snug);
         color: var(--text-secondary); margin: 0 0 var(--sp-8); }

/* Continut inca neconfirmat. Marcat VIZIBIL, ca sa nu ajunga din greseala in
   varianta aratata mamei sau, mai rau, in productie (§18). */
.provizoriu {
  text-decoration: underline dotted var(--c-alama);
  text-underline-offset: 0.3em;
  cursor: help;
}
.nota-provizoriu {
  margin: var(--sp-12) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--c-alama);
  font-size: var(--step--1);
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* Pe fundalul adancit, textul tertiar urca o treapta — REGULA GENERALA, nu
   corectie punctuala. --c-scoarta da 5.37:1 pe hartie, dar cade la 4.11:1 pe
   greige, sub pragul de 4.5 din §12. Scrie chiar in tabelul de perechi
   verificate din tokens.css. M-a prins de trei ori pana am scris-o asa. */
.sect--adancit :is(.eyebrow, .grup-int, .rol, .reteta dt, .medic-portret) {
  color: var(--text-secondary);
}

/* ------------------------------------------------------- de ce aici (4)

   Trei fraze mari, nu trei carduri cu iconuri: diferentiatorii sunt fapte
   verbale, iar o pictograma langa „fisa ta nu pleaca din camera asta" ar
   dilua-o. Teza 1 lipseste deliberat din lista — e deja titlul hero-ului, iar
   repetata la doua ecrane distanta si-ar pierde greutatea.                  */

.teza { border-top: 1px solid var(--border-hair); padding-block: var(--sp-12); }
.teza:last-of-type { border-bottom: 1px solid var(--border-hair); }
.teza h3 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  text-wrap: balance;
}
.teza p { margin: 0; max-width: 54ch; color: var(--text-secondary); }

@media (min-width: 860px) {
  .teza { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start; }
  .teza h3 { margin-bottom: 0; }
}

/* -------------------------------------------------------- tratamente (5)

   Structura de „reteta" (Hirata, §16): ce folosim, cat dureaza, ce simti.
   Cardurile NU sunt numerotate — sunt o lista, nu o secventa (§6).          */

.retete { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 820px) { .retete { grid-template-columns: repeat(3, 1fr); } }

.reteta {
  padding: var(--sp-8);
  background: var(--bg-surface);
  border-radius: var(--r-xs);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.reteta:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.reteta h3 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
}
.reteta dl { margin: 0; }
.reteta dt {
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: var(--sp-6);
}
.reteta dl > dt:first-child { margin-top: 0; }
.reteta dd { margin: var(--sp-2) 0 0; color: var(--text-secondary); }

/* ------------------------------------------------------------ echipa (6)

   Doi medici ai casei, plus doi specialisti care lucreaza aici. Ierarhia e
   deliberata si se vede in marime, nu intr-o eticheta: cabinetul e al celor
   doua generatii. Un cabinet mic nu imprumuta arhitectura unei clinici cu 25
   de medici (§15) — asta i-ar dilua exact avantajul.                        */

.echipa { display: grid; gap: var(--sp-12); margin-top: var(--sp-8); }
@media (min-width: 780px) { .echipa { grid-template-columns: 1fr 1fr; } }

.medic { margin: 0; }
.medic-portret {
  aspect-ratio: 4 / 5;
  background: var(--bg-sunken);
  border: 1px dashed var(--c-piatra);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-6);
  font-size: var(--step--1);
  color: var(--text-secondary);          /* tertiar ar da 4.11:1 pe greige */
}
.medic :is(h2, h3) {
  margin: var(--sp-6) 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
}
.medic .rol {
  margin: 0 0 var(--sp-4);
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.medic > p:last-child { margin: 0; color: var(--text-secondary); max-width: 46ch; }

.echipa--colab { margin-top: var(--sp-16); }
.echipa--colab .medic-portret { aspect-ratio: 3 / 2; }
.echipa--colab .medic :is(h2, h3) { font-size: var(--step-1); }

/* ==========================================================================
   PASUL 10 — cabinetul, preturi, contact.
   ========================================================================== */

/* ------------------------------------------------------------ cabinetul (7)

   Fara fotografii, si asta e de fapt alegerea corecta: §16 spune ca un cadru
   larg din cabinet strica increderea cat timp incaperea nu e renovata in
   aceeasi cheie. Deci sectiunea isi ia alta treaba, si mai importanta —
   raspunde fricii de DURERE, a doua ca intensitate dupa incertitudine (§3),
   si o rezolva inainte de pagina de contact, cum cere brief-ul.             */

.sect--intuneric {
  background-color: var(--c-umbra);
  background-image: var(--grad-camera);
  color: var(--text-on-dark);
}
.sect--intuneric .eyebrow { color: var(--c-piatra); }   /* 7.97:1 pe umbra */

.declaratie {
  margin: 0 0 var(--sp-6);
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 400;
  text-wrap: balance;
}
.declaratie-sub { margin: 0 0 var(--sp-16); max-width: 46ch;
                  font-size: var(--step-1); line-height: var(--lh-snug); color: var(--c-piatra); }

.pasi { display: grid; gap: var(--sp-12); }
@media (min-width: 820px) { .pasi { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); } }
.pas { border-top: 1px solid color-mix(in srgb, var(--c-piatra) 40%, transparent);
       padding-top: var(--sp-6); }
.pas :is(h2, h3) { margin: 0 0 var(--sp-3); font-family: var(--font-display);
          font-size: var(--step-2); line-height: var(--lh-display);
          letter-spacing: var(--ls-display); font-weight: 400; }
.pas p { margin: 0; color: var(--c-piatra); max-width: 42ch; }

/* --------------------------------------------------------------- preturi (8)

   §9: cabinetele fug de preturi, iar cine le publica castiga incredere. Deci
   nimic nu e ascuns — grupele sunt pliate doar ca sa nu ingroape pagina sub
   150 de randuri, iar intervalul fiecarei grupe se vede FARA sa o deschizi.  */

.preturi { margin-top: var(--sp-8); border-top: 1px solid var(--border-hair); }
.grup { border-bottom: 1px solid var(--border-hair); }
.grup summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
}
.grup summary::-webkit-details-marker { display: none; }
.grup-nume { font-family: var(--font-display); font-size: var(--step-1);
             letter-spacing: var(--ls-display); }
.grup-int { font-size: var(--step--1); color: var(--text-tertiary); white-space: nowrap; }
.grup[open] .grup-nume { color: var(--text-primary); }
.grup-lista { padding-bottom: var(--sp-6); }
.pret {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-6);
  padding: var(--sp-2) 0;
  border-top: 1px solid color-mix(in srgb, var(--c-piatra) 26%, transparent);
}
.pret span { color: var(--text-secondary); }
.pret b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- contact (9) */

.contact { display: grid; gap: var(--sp-12); margin-top: var(--sp-8); }
@media (min-width: 820px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact :is(h2, h3) { margin: 0 0 var(--sp-3); font-size: var(--step--1);
              letter-spacing: var(--ls-label); text-transform: uppercase;
              color: var(--text-tertiary); font-weight: 600; }
.contact-bloc + .contact-bloc { margin-top: var(--sp-8); }
.contact p { margin: 0; }
.contact a { color: var(--text-primary); text-underline-offset: 0.3em; }
.contact .mare { font-family: var(--font-display); font-size: var(--step-2);
                 letter-spacing: var(--ls-display); }
.harta {
  display: inline-block; margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  text-decoration: none; color: var(--text-secondary);
}
.harta:hover { border-color: var(--c-scoarta); color: var(--text-primary); }

/* ==========================================================================
   SUBSOL si elemente comune tuturor paginilor
   ========================================================================== */

.subsol { background: var(--bg-sunken); padding-block: var(--sp-16); margin-top: var(--sp-24); }
.subsol-int {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: var(--sp-8); font-size: var(--step--1); color: var(--text-secondary);
}
@media (min-width: 760px) { .subsol-int { grid-template-columns: repeat(3, 1fr); } }
.subsol p { margin: 0 0 var(--sp-2); }
.subsol a { color: var(--text-secondary); text-underline-offset: 0.3em; }
.subsol a:hover { color: var(--text-primary); }
.subsol-nume { font-family: var(--font-display); font-size: var(--step-1);
               letter-spacing: var(--ls-display); color: var(--text-primary); }
.subsol nav { display: grid; gap: var(--sp-2); align-content: start; }
.subsol-cui { grid-column: 1 / -1; padding-top: var(--sp-6);
              border-top: 1px solid var(--border-hair);
              /* secundar, nu tertiar: subsolul e tot pe greige, unde --c-scoarta
                 cade la 4.11:1. A patra oara cand ma prinde aceeasi pereche. */
              color: var(--text-secondary); }

.nav-principal a[aria-current="page"] { color: var(--text-primary); text-decoration: underline; }

/* ---------------------------------------------------- legaturi „mai departe" */

.mai-departe {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  margin-top: var(--sp-8);
  font-size: var(--step-0);
  /* secundar, nu tertiar: legaturile astea apar si pe fundal greige, unde
     --c-scoarta cade la 4.11:1. Aceeasi pereche, a cincea oara. */
  color: var(--text-secondary);
  text-underline-offset: 0.35em;
}
.mai-departe:hover { color: var(--text-primary); }
.sect--intuneric .mai-departe { color: var(--c-piatra); }
.sect--intuneric .mai-departe:hover { color: var(--text-on-dark); }

/* Titlul unei pagini care si-a luat continutul de pe Acasa. Acolo sectiunea
   avea o eticheta mica; de sine statatoare, pagina are nevoie de un H1 real. */
.titlu-pagina {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-size: var(--step-4);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 400;
  max-width: 20ch; text-wrap: balance;
}
.sect--intuneric .titlu-pagina { color: var(--text-on-dark); }

/* ------------------------------------------------------------- fir de urma */

.urma { font-size: var(--step--1); color: var(--text-tertiary); margin: 0 0 var(--sp-6); }
.urma a { color: var(--text-tertiary); text-underline-offset: 0.3em; }
.urma a:hover { color: var(--text-primary); }

/* ------------------------------------------------- capul unei pagini interne */

.cap { padding-block: var(--sp-16) var(--sp-12); }
.cap h1 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-size: var(--step-4);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 400;
  max-width: 20ch; text-wrap: balance;
}
.cap .intro { font-size: var(--step-1); max-width: 52ch; }

/* --------------------------------------------------------- pagina tratament */

.pas-mare { border-top: 1px solid var(--border-hair); padding-block: var(--sp-8); }
.pas-mare h2 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400;
}
.pas-mare p { margin: 0 0 var(--sp-4); max-width: 58ch; color: var(--text-secondary); }
.pas-mare p:last-child { margin-bottom: 0; }
@media (min-width: 860px) {
  .pas-mare { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-12); }
  .pas-mare h2 { margin-bottom: 0; }
}

.lista-trat { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.lista-trat a, .lista-trat span {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--bg-surface); border-radius: var(--r-xs); box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.lista-trat a:hover { box-shadow: var(--shadow-md); }
.lista-trat span { opacity: .62; box-shadow: none; }
.lista-trat b { font-family: var(--font-display); font-size: var(--step-1);
                font-weight: 400; letter-spacing: var(--ls-display); }
.lista-trat i { font-style: normal; font-size: var(--step--1); color: var(--text-tertiary);
                white-space: nowrap; }

/* ==========================================================================
   MENIU DE MOBIL, FORMULAR, URGENTE
   ========================================================================== */

/* Meniul e un <details>, deci functioneaza fara JavaScript. Pana acum, sub
   860px navigarea era pur si simplu ascunsa — telefonul, de unde vine
   majoritatea traficului dintr-o cautare medicala, ramanea fara nicio cale
   spre celelalte pagini. */
.meniu { position: relative; margin-left: auto; }
.meniu summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--step--1); letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  cursor: pointer; list-style: none;
}
.meniu summary::-webkit-details-marker { display: none; }
.meniu-linii { display: block; width: 1.1em; height: 2px; background: currentColor;
               box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
.meniu-lista {
  position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 20;
  display: grid; gap: var(--sp-1);
  min-width: 12rem; padding: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-hair); border-radius: var(--r-xs);
  box-shadow: var(--shadow-lg);
}
.meniu-lista a { display: block; padding: var(--sp-2) 0; color: var(--text-secondary);
                 text-decoration: none; font-size: var(--step-0); }
.meniu-lista a:hover, .meniu-lista a[aria-current="page"] { color: var(--text-primary); }
@media (min-width: 900px) { .meniu { display: none; } }
@media (max-width: 899px) { .antet-tel { margin-left: auto; } }

/* Sub 520px, antetul nu mai incape: marca (193px) + telefon (84) + butonul de
   meniu (90) plus spatiile depasesc latimea utila. Telefonul iese, pentru ca e
   redundant — bara fixa de jos are butonul „Suna", vizibil permanent (§9). */
@media (max-width: 520px) { .antet-tel { display: none; } }

/* ------------------------------------------------------------------ urgente */

.urgenta-tel { margin: var(--sp-8) 0 var(--sp-2); }
.urgenta-tel a { font-family: var(--font-display); font-size: var(--step-4);
                 letter-spacing: var(--ls-display); color: var(--text-on-dark);
                 text-decoration: none; }
.urgenta-tel a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.urgenta-prog { margin: 0; color: var(--c-piatra); font-size: var(--step--1); }

.dupa-tratament {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.dupa-tratament .mai-departe { margin-top: 0; }

/* ---------------------------------------------------------------- formular */

.formular { max-width: 34rem; margin-top: var(--sp-8); }
.camp { margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-2); }
.camp label { font-size: var(--step--1); letter-spacing: var(--ls-label);
              text-transform: uppercase; color: var(--text-secondary); }
.camp .optional { text-transform: none; letter-spacing: var(--ls-body); }
.camp input[type=text], .camp input[type=tel], .camp textarea {
  font: inherit; font-size: var(--step-0);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  width: 100%;
}
.camp input:focus-visible, .camp textarea:focus-visible { border-color: var(--c-scoarta); }
.ajutor { font-size: var(--step--1); color: var(--text-secondary); }
.camp--acord label { text-transform: none; letter-spacing: var(--ls-body);
                     font-size: var(--step-0); }
.acord { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.acord input { margin-top: 0.3em; width: 1.1em; height: 1.1em; accent-color: var(--c-scoarta); }
.acord a { color: var(--text-primary); text-underline-offset: 0.3em; }
.stare { margin: 0; font-size: var(--step-0); }
.stare--eroare { color: var(--c-tutun); font-weight: 600; }
.stare--ok { color: var(--text-secondary); }
.stare:empty { display: none; }


/* ==========================================================================
   MIȘCAREA PAGINII — scroll lin la ancore + revelare la derulare

   Doua lucruri diferite, pe care merita sa nu le confundam:

   1. Scrollul propriu-zis ramane al browserului. Nu il interceptam, nu il
      incetinim, nu il „amortizam" cu JavaScript. Un pacient cu durere care
      cauta un numar de telefon trebuie sa ajunga jos cand da din deget, nu
      cand termina biblioteca noastra de animatie (§7: fara scroll-jacking).
      Singura interventie e `scroll-behavior: smooth`, care se aplica DOAR la
      salturile pe ancora — adica exact acolo unde saltul instantaneu il face
      pe om sa piarda unde a ajuns.

   2. Continutul apare la derulare, cu decalaj mic intre elementele fratii.
      Asta e „reveal la scroll cu stagger discret" din §7, si e singura miscare
      din restul paginii. Pornim de la o deplasare de 14px, nu de la 40: cat sa
      se simta ca pagina traieste, nu cat sa se astepte dupa ea.

   Plasa de siguranta: opacitatea initiala se aplica NUMAI daca <html> a primit
   clasa `js-miscare`, pusa de JavaScript. Daca JS-ul cade, sau daca un cititor
   de ecran ori un motor de cautare nu ruleaza scriptul, textul e vizibil de la
   inceput. Un site medical nu are voie sa-si ascunda continutul in spatele
   unei animatii.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: var(--sp-16); }

.js-miscare .apare {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--intarziere, 0ms);
}
.js-miscare .apare.vazut { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-miscare .apare { opacity: 1; transform: none; transition: none; }
}

/* La tiparire nimic nu se reveleaza, pentru ca nu se deruleaza nimic. Fara
   regula asta, o pagina tiparita ar iesi cu jumatate din text alb pe alb. */
@media print {
  .js-miscare .apare { opacity: 1 !important; transform: none !important; }
  .bara-mobil, .meniu, .sari { display: none; }
  .intrebare > .raspuns { display: block; }
}


/* ==========================================================================
   LISTA DE TRATAMENTE, ÎNTREBĂRI FRECVENTE
   ========================================================================== */

/* Randul are acum trei informatii, nu doua: nume, o fraza care spune despre ce
   e vorba, si pretul. Numele si fraza stau impreuna intr-o coloana care se
   poate ingusta; pretul ramane la dreapta si nu se rupe niciodata. */
.lista-trat .trat-nume { display: grid; gap: var(--sp-1); min-width: 0; }
.lista-trat em {
  font-style: normal;
  font-size: var(--step--1);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 46ch;
}
.lista-trat a { align-items: start; }
.lista-trat i { padding-top: 0.35em; }        /* aliniat cu prima linie a numelui */

@media (max-width: 560px) {
  /* Sub 560px, pretul langa un nume de doua randuri lasa numele pe trei si
     arata rupt. Trece dedesubt, cu numele pe toata latimea. */
  .lista-trat a { flex-direction: column; gap: var(--sp-2); }
  .lista-trat i { padding-top: 0; }
}

/* ------------------------------------------------------------ intrebari */

/* Fiecare intrebare e un <details>, deci se deschide fara JavaScript, iar
   raspunsul e in pagina si pentru Google chiar cand e inchis vizual. */
.intrebare {
  border-bottom: 1px solid var(--border-hair);
}
.intrebare:first-of-type { border-top: 1px solid var(--border-hair); }
.intrebare > summary {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-6) 0;
  cursor: pointer;
  list-style: none;
}
.intrebare > summary::-webkit-details-marker { display: none; }
.intrebare > summary :is(h2, h3) {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}
/* Semnul e desenat din doua linii, ca sa se roteasca in „minus" la deschidere
   fara sa schimbam caracterul — un „+" tipografic si un „−" tipografic au
   latimi diferite si ar face titlul sa tresara. */
.intrebare > summary::after {
  content: "";
  flex: none;
  width: 0.85em; height: 0.85em;
  align-self: center;
  background:
    linear-gradient(var(--text-secondary), var(--text-secondary)) center/100% 1.5px no-repeat,
    linear-gradient(var(--text-secondary), var(--text-secondary)) center/1.5px 100% no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
.intrebare[open] > summary::after { transform: rotate(90deg); background-size: 100% 1.5px, 0 0; }
/* La hover subliniem, nu schimbam culoarea: singurul accent cald disponibil
   (--c-scoarta) da 4.11:1 pe greige, sub pragul de 4.5. */
.intrebare > summary:hover :is(h2, h3) { text-decoration: underline; text-underline-offset: 0.18em; }

.raspuns { padding-bottom: var(--sp-6); max-width: 62ch; }
.raspuns p { margin: 0 0 var(--sp-4); color: var(--text-secondary); }
.raspuns p:last-child { margin-bottom: 0; }
.raspuns a { color: var(--text-primary); text-underline-offset: 0.3em; }

@media (prefers-reduced-motion: reduce) {
  .intrebare > summary::after { transition: none; }
}

/* ---------------------------------------------------- banda de urgenta */

/* Pe pagina de acasa, imediat sub hero. Cel mai frecvent motiv pentru care
   cineva deschide site-ul unui cabinet stomatologic e ca il doare acum —
   iar drumul catre pagina de urgente nu are voie sa treaca prin meniu. */
.banda-urgenta {
  background: var(--bg-sunken);
  border-block: 1px solid var(--border-hair);
  padding-block: var(--sp-4);
}
.banda-urgenta .sect-int { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
                           align-items: baseline; }
.banda-urgenta p { margin: 0; font-size: var(--step-0); color: var(--text-secondary); }
.banda-urgenta strong { color: var(--text-primary); font-weight: 600; }
.banda-urgenta a { color: var(--text-primary); text-underline-offset: 0.3em; }