/* ============================================================================
   premium.css — stratul de finisare (sesiunea 15, 28–29.09.2026)

   Se încarcă DUPĂ stil.css, pe toate paginile. Nu înlocuiește sistemul, îl
   ridică: scară editorială, ritm, straturi, detalii de interacțiune.

   Ce face un site să pară „făcut de AI", și ce am schimbat aici:
   - același tipar repetat în fiecare secțiune (etichetă + intro + link);
     → fiecare secțiune de pe Acasă are acum altă compoziție;
   - totul la aceeași scară, nimic foarte mare, nimic foarte mic;
     → titluri de 150px lângă etichete de 14px, cu mult gol între ele;
   - carduri cu umbră, puse în grilă;
     → liste editoriale, linii fine, suprafețe care se schimbă la hover;
   - notițe de lucru vizibile pe pagină;
     → scoase. Stau în LANSARE.md, unde le e locul.
   ========================================================================= */

/* ------------------------------------------------------------ tranziții */
/* Trecerea dintre pagini e o dizolvare scurtă, făcută de browser (View
   Transitions). Unde nu e suportată, pagina se schimbă normal. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms var(--ease-out) both vt-iese; }
::view-transition-new(root) { animation: 420ms var(--ease-cinema) both vt-intra; }
@keyframes vt-iese  { to   { opacity: 0; } }
@keyframes vt-intra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Lenis: pagina nu trebuie să aibă smooth-scroll dublu. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ------------------------------------------------------ elemente comune */
.eticheta {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-8);
  font-size: var(--step--1);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.eticheta::before {
  content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .6;
}
.sect--adancit .eticheta { color: var(--text-secondary); }
.pe-intuneric .eticheta, .drum .eticheta { color: var(--c-piatra); }

.titlu-sectiune {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5.4rem);
  line-height: var(--lh-gigant);
  letter-spacing: var(--ls-gigant);
  text-wrap: balance;
}
/* măștile rândurilor create de SplitText */
.rand { padding-bottom: 0.08em; margin-bottom: -0.08em; }

.buton--deschis { background: var(--c-hartie); color: var(--c-umbra); }
.buton--deschis:hover { background: var(--c-tavan); }

/* Săgeata din link-uri alunecă la hover — detaliul mic care spune „se poate
   apăsa" fără să fie un buton. */
.mai-departe span, .index-trat .sageata { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.mai-departe:hover span { transform: translateX(6px); }

/* Blocurile care apar la derulare (clasele se pun din site.js) */
.js-miscare .apare {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s var(--ease-cinema), transform 1.1s var(--ease-cinema);
  transition-delay: var(--intarziere, 0ms);
}
.js-miscare .apare.vazut { opacity: 1; transform: none; }

/* Notițele de lucru nu mai apar pe pagini (sunt în LANSARE.md). Clasa
   .provizoriu rămâne în HTML ca să poată fi găsită cu grep, dar nu se vede. */
.nota-provizoriu { display: none !important; }
.provizoriu { text-decoration: none !important; border: 0 !important; cursor: inherit !important; }

/* Site de portofoliu (05.10): prețurile au fost mutate cu +10–15% față de lista de
   reper și nu sunt ale cabinetului. Asta SE VEDE — e cerința lui Niki, nu o notiță
   de lucru. Se scoate la lansare, odată cu lista reală (LANSARE.md §1). */
.nota-portofoliu {
  margin: var(--sp-8) 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);
}

/* ==========================================================================
   ANTET peste fotografie (doar pe Acasă)
   ========================================================================== */
.antet--peste {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  max-width: none;
  color: var(--c-hartie);
}
.antet--peste .marca-mono, .antet--peste .marca-nume,
.antet--peste .nav-principal a, .antet--peste .antet-tel { color: var(--c-hartie); }
.antet--peste .meniu summary { color: var(--c-hartie); border-color: color-mix(in srgb, var(--c-hartie) 45%, transparent); }
.antet--peste .nav-principal a[aria-current] { text-decoration: underline; }

/* ==========================================================================
   DESCHIDEREA — fotografia sălii pe tot ecranul, titlul foarte mare
   ========================================================================== */
.deschidere {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  background-color: var(--c-umbra);
  color: var(--c-hartie);
  isolation: isolate;
}
.deschidere-foto {
  position: absolute; inset: -6% 0 0 0; margin: 0; z-index: -2;
}
.deschidere-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%;
  transform-origin: 50% 60%;
}
.deschidere::before {           /* voalul: jos opac, unde stă textul */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--voal-ingust);
}
@media (min-width: 900px) { .deschidere::before { background: var(--voal); } }
.deschidere-int {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-16)) var(--gutter) var(--sp-12);
}
.deschidere-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8);
  margin: 0 0 var(--sp-8);
  font-size: var(--step--1); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-greige);
}
.deschidere h1 {
  margin: 0;
  max-width: 11ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-7);
  line-height: var(--lh-gigant);
  letter-spacing: var(--ls-gigant);
  text-wrap: balance;
}
.deschidere-jos {
  display: grid; gap: var(--sp-8);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid color-mix(in srgb, var(--c-hartie) 22%, transparent);
}
.deschidere-lead {
  margin: 0; max-width: 40ch;
  font-size: var(--step-1); line-height: var(--lh-snug);
  color: var(--c-tavan);
}
.deschidere-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); }
.link-tel {
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--c-hartie); text-decoration: none; white-space: nowrap;
}
.link-tel:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.deschidere-urgent {
  margin: 0; font-size: var(--step--1); color: var(--c-greige);
}
.deschidere-urgent a { color: var(--c-hartie); text-underline-offset: 0.3em; }
.deschidere-urgent strong { color: var(--c-hartie); font-weight: 600; }

@media (min-width: 900px) {
  .deschidere-jos { grid-template-columns: 1.2fr 1fr; align-items: end; }
  .deschidere-actiuni { justify-content: flex-end; }
  .deschidere-urgent { grid-column: 1 / -1; }
}

.indiciu {
  display: none;
}
@media (min-width: 900px) and (min-height: 760px) {
  .indiciu {
    display: flex; align-items: center; gap: var(--sp-3);
    position: absolute; right: var(--gutter); top: 50%;
    writing-mode: vertical-rl;
    font-size: var(--step--1); letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--c-greige); text-decoration: none;
  }
  .indiciu::after {
    content: ""; width: 1px; height: 4.5rem;
    background: linear-gradient(currentColor, transparent);
    animation: indiciu 2.4s var(--ease-in-out) infinite;
  }
}
@keyframes indiciu { 0% { transform: scaleY(0); transform-origin: top; }
                     45% { transform: scaleY(1); transform-origin: top; }
                     55% { transform: scaleY(1); transform-origin: bottom; }
                     100% { transform: scaleY(0); transform-origin: bottom; } }

/* Intrarea fără JS: pur CSS, cu `backwards`, deci textul nu depinde de ea. */
.deschidere-meta, .deschidere-jos { animation: urca var(--dur-slow) var(--ease-cinema) 380ms backwards; }

/* ==========================================================================
   DRUMUL — scena
   ========================================================================== */
.drum {
  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 măștii, nu culoare */
}
.drum-pin {
  position: relative;
  display: grid; place-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: var(--sp-16) var(--gutter);
  overflow: clip;
  perspective: 1400px;
}

/* textul mare din spate — planul cel mai îndepărtat */
.drum-fundal {
  position: absolute; inset: 0;
  display: grid; align-content: center; gap: 0.2em;
  pointer-events: none;
}
.drum-rand {
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-8);
  line-height: 0.9; letter-spacing: var(--ls-gigant);
  color: var(--c-tutun);                 /* decorativ: dublează textul accesibil de mai jos */
}
.drum-rand--2 { padding-left: 18vw; color: color-mix(in srgb, var(--c-tutun) 70%, var(--c-umbra)); }

/* telefonul — planul din mijloc */
.telefon {
  --w: min(20rem, 76vw, calc(74svh / 1.86));
  position: relative; z-index: 2;
  width: var(--w);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.telefon-rama {
  position: absolute; inset: 0;
  border-radius: calc(var(--w) * 0.16);
  /* rama de titan: muchie deschisă sus-dreapta, unde bate lumina (§8) */
  background:
    linear-gradient(215deg, color-mix(in srgb, var(--c-piatra) 55%, transparent) 0%, transparent 22%),
    linear-gradient(35deg, var(--c-umbra), color-mix(in srgb, var(--c-tutun) 55%, var(--c-umbra)));
  box-shadow:
    var(--shadow-xl),
    inset 0 0 0 1px color-mix(in srgb, var(--c-piatra) 42%, transparent),
    inset 0 0 0 calc(var(--w) * 0.012) color-mix(in srgb, var(--c-umbra) 90%, transparent);
}
/* butoanele laterale */
.telefon-rama::before, .telefon-rama::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--c-piatra) 45%, var(--c-umbra));
}
.telefon-rama::before { left: -2px; top: 20%; height: 7%; box-shadow: 0 calc(var(--w) * 0.16) 0 0 color-mix(in srgb, var(--c-piatra) 45%, var(--c-umbra)); }
.telefon-rama::after  { right: -2px; top: 26%; height: 11%; }

.telefon-ecran {
  position: relative;
  margin: calc(var(--w) * 0.035);
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--w) * 0.125);
  overflow: clip;
  background: var(--c-umbra);
  isolation: isolate;
}
.drum-canvas, .drum-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.drum-canvas { display: none; }
.drum-js .drum-canvas { display: block; }
.drum-js .drum-poster { visibility: hidden; }
/* luciul sticlei */
.telefon-ecran::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0) 34%);
}
.telefon-insula {
  position: absolute; z-index: 3;
  top: calc(var(--w) * 0.065); left: 50%; transform: translateX(-50%);
  width: calc(var(--w) * 0.28); height: calc(var(--w) * 0.075);
  border-radius: var(--r-pill);
  background: var(--c-umbra);
}

/* etichetele laterale — planul cel mai apropiat */
.drum-lateral {
  position: absolute; z-index: 3;
  bottom: var(--sp-12);
  display: grid; gap: var(--sp-1);
  font-size: var(--step--1);
  color: var(--c-greige);
}
.drum-lateral--st { left: var(--gutter); }
.drum-lateral b {
  font-weight: 400; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-piatra);
}
.drum-loc { position: relative; display: block; min-height: 1.6em; }
.drum-loc span { position: absolute; left: 0; white-space: nowrap;
                 font-family: var(--font-display); font-size: var(--step-2); color: var(--c-hartie); }
.drum-loc--usa { opacity: 0; }
/* Pe telefon eticheta ar sta sub bara fixă „Sună / Programează-te". */
@media (max-width: 699px) {
  .drum-lateral { display: none; }
}

/* interiorul — semnăturile */
.interior {
  position: relative; z-index: 4;
  width: 100%; max-width: var(--container);
  padding: var(--sp-16) 0;
}
.drum-js .interior { position: absolute; inset: 0; margin: auto; display: grid; align-content: center;
                     padding: var(--sp-16) var(--gutter); }
.drum .semnaturi { display: grid; gap: var(--sp-8); }
/* Lumina din cabinet continuă după ușă: aceeași sursă caldă, acum în spatele semnăturilor. */
.drum-js .interior::before {
  content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 45% at 50% 42%, color-mix(in srgb, var(--c-alama) 22%, transparent), transparent 70%);
}
.drum .semn { margin: 0; min-width: 0; }
.drum .semn figcaption { margin-top: var(--sp-3); font-size: var(--step-0); color: var(--c-piatra); }
.drum .sig { display: block; width: 100%; height: auto; max-height: 26svh; overflow: visible; }
.drum .pen { fill: none; stroke: var(--mask-on); stroke-linecap: round; stroke-linejoin: round; }
.drum .s-ink { stop-color: var(--ink); }
.drum .s-hot { stop-color: var(--ink-hot); }
@media (min-width: 700px) {
  .drum .semnaturi { grid-template-columns: 1.06fr .94fr; align-items: start; }
  .drum .semn--niki { margin-top: 11%; }
}
.drum .motto {
  margin: var(--sp-12) 0 0; max-width: 30ch;
  font-family: var(--font-display); font-size: var(--step-3);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
.drum .motto span { display: block; color: var(--c-piatra); }

/* Fără JS / mișcare redusă: scena devine o secțiune obișnuită — telefonul
   cu primul cadru, apoi semnăturile, una sub alta. */
html:not(.drum-js) .drum-pin { display: grid; gap: var(--sp-16); }
html:not(.drum-js) .drum-fundal, html:not(.drum-js) .drum-lateral { display: none; }

/* ==========================================================================
   DE CE AICI — trei teze, ca rânduri editoriale
   ========================================================================== */
.teze { display: grid; }
.teza2 {
  display: grid; gap: var(--sp-6);
  padding-block: var(--sp-12);
  border-top: 1px solid var(--border-hair);
}
.teza2:last-child { border-bottom: 1px solid var(--border-hair); }
.teza2 .tema {
  margin: 0; font-size: var(--step--1); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-tertiary);
}
.teza2 h3 {
  margin: 0; max-width: 16ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: var(--lh-display); letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.teza2 p:last-child { margin: 0; max-width: 46ch; color: var(--text-secondary); }
@media (min-width: 900px) {
  .teza2 { grid-template-columns: 11rem minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--sp-12);
           align-items: start; padding-block: var(--sp-16); }
  .teza2 .tema { padding-top: 0.9em; }
  .teza2 p:last-child { padding-top: 0.6em; }
}

/* ==========================================================================
   CAPUL DE SECȚIUNE pe două coloane: titlul mare stânga, textul dreapta jos
   ========================================================================== */
.cap-sectiune { display: grid; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.cap-sectiune .intro { margin: 0; }
@media (min-width: 900px) {
  .cap-sectiune { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; column-gap: var(--sp-16); }
  .cap-sectiune .eticheta { grid-column: 1 / -1; margin-bottom: 0; }
}

/* ==========================================================================
   INDEXUL DE TRATAMENTE — listă editorială, nu grilă de carduri
   ========================================================================== */
.index-trat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-strong); }
.index-trat li { border-bottom: 1px solid var(--border-strong); }
.index-trat a {
  position: relative;
  display: grid; gap: var(--sp-2) var(--sp-8);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--sp-8) var(--sp-4);
  text-decoration: none; color: var(--text-primary);
  isolation: isolate;
}
/* suprafața întunecată urcă de jos la hover */
.index-trat a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-umbra);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 520ms var(--ease-cinema);
}
.index-trat a:hover::before, .index-trat a:focus-visible::before { transform: scaleY(1); }
.index-trat a:hover, .index-trat a:focus-visible { color: var(--c-hartie); }
.index-trat a:hover .desc, .index-trat a:focus-visible .desc,
.index-trat a:hover .pret-it, .index-trat a:focus-visible .pret-it { color: var(--c-greige); }
.index-trat .nume {
  font-family: var(--font-display); font-size: var(--step-3);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  transition: transform 520ms var(--ease-cinema);
}
.index-trat a:hover .nume { transform: translateX(0.35em); }
.index-trat .desc { grid-column: 1; max-width: 52ch; font-size: var(--step--1);
                    color: var(--text-secondary); transition: color var(--dur-base); }
.index-trat .dreapta { grid-column: 2; grid-row: 1 / span 2; align-self: center;
                       display: flex; align-items: center; gap: var(--sp-6); }
.index-trat .pret-it { font-size: var(--step--1); white-space: nowrap; color: var(--text-secondary);
                       font-variant-numeric: tabular-nums; transition: color var(--dur-base); }
.index-trat .sageata { font-size: var(--step-2); line-height: 1; }
.index-trat a:hover .sageata { transform: translateX(6px); }
.sect--adancit .index-trat .desc, .sect--adancit .index-trat .pret-it { color: var(--text-secondary); }
@media (max-width: 640px) {
  .index-trat a { grid-template-columns: 1fr; padding-inline: 0; }
  .index-trat .dreapta { grid-column: 1; grid-row: auto; justify-content: space-between; }
}

/* ==========================================================================
   ECHIPA — portrete tipografice până vin fotografiile
   ========================================================================== */
.fondatori, .colaboratori { display: grid; gap: var(--sp-12) var(--sp-8); }
@media (min-width: 760px) {
  .fondatori { grid-template-columns: 1fr 1fr; }
  .colaboratori { grid-template-columns: 1fr 1fr; margin-top: var(--sp-16); }
}
.portret { margin: 0; }
.portret-cadru {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  overflow: clip;
  background-color: var(--c-umbra);
  background-image: var(--grad-camera);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  color: var(--c-hartie);
}
.colaboratori .portret-cadru { aspect-ratio: 16 / 10; }
.portret-cadru::after {                 /* textura */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: overlay;
}
.portret-cadru svg { width: 78%; height: auto; overflow: visible; }
.portret-cadru svg use { fill: var(--c-hartie); }
.initiale {
  font-family: var(--font-display); font-size: clamp(4rem, 3rem + 6vw, 8rem);
  line-height: 1; letter-spacing: var(--ls-gigant); color: var(--c-hartie);
}
.portret-cadru .ani {
  position: absolute; left: var(--sp-6); bottom: var(--sp-6);
  font-size: var(--step--1); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-piatra);
}
.portret h3 { margin: var(--sp-6) 0 var(--sp-1); font-family: var(--font-display); font-weight: 400;
              font-size: var(--step-3); line-height: var(--lh-display); }
.portret .rol { margin: 0 0 var(--sp-4); font-size: var(--step--1); letter-spacing: var(--ls-label);
                text-transform: uppercase; color: var(--text-tertiary); }
.portret p:last-child { margin: 0; max-width: 44ch; color: var(--text-secondary); }
.portret-cadru img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-cinema); }

/* ==========================================================================
   DECLARAȚIA — frază mare care se aprinde la derulare
   ========================================================================== */
.pe-intuneric { background-color: var(--c-umbra); background-image: var(--grad-camera); color: var(--c-hartie); }
.declaratie2 {
  margin: 0; max-width: 16ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-7); line-height: var(--lh-gigant); letter-spacing: var(--ls-gigant);
}
.declaratie2-sub { margin: var(--sp-12) 0 var(--sp-8); max-width: 38ch;
                   font-size: var(--step-1); line-height: var(--lh-snug); color: var(--c-greige); }
.pe-intuneric .mai-departe { color: var(--c-hartie); }
.cuv { display: inline-block; }

/* ==========================================================================
   CASA — fâșie orizontală de fotografii care alunecă la derulare
   ========================================================================== */
.casa { overflow: clip; }
.casa-fasie {
  display: flex; gap: var(--sp-6);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}
.casa-foto { margin: 0; flex: none; width: clamp(15rem, 34vw, 30rem); }
.casa-foto:nth-child(even) { margin-top: var(--sp-16); width: clamp(13rem, 26vw, 24rem); }
.casa-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-sm);
                 box-shadow: var(--shadow-md); }
.casa-foto:nth-child(even) img { aspect-ratio: 3 / 4; }
.casa-foto figcaption { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--text-secondary); }
@media (max-width: 699px) {
  .casa-fasie { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-4); }
  .casa-foto { scroll-snap-align: start; width: 78vw; }
  .casa-foto:nth-child(even) { width: 64vw; }
}

/* ==========================================================================
   CIFRE — prețuri ca cifre mari
   ========================================================================== */
.cifre { display: grid; gap: var(--sp-8); border-top: 1px solid var(--border-strong); padding-top: var(--sp-8); }
@media (min-width: 700px) { .cifre { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cifre { grid-template-columns: repeat(4, 1fr); } }
.cifra { margin: 0; }
.cifra dt { font-size: var(--step--1); letter-spacing: var(--ls-label); text-transform: uppercase;
            color: var(--text-secondary); }
.cifra dd { margin: var(--sp-3) 0 0; font-family: var(--font-display);
            font-size: var(--step-5); line-height: 1; letter-spacing: var(--ls-gigant); }
.cifra dd small { font-family: var(--font-text); font-size: var(--step-0); letter-spacing: 0;
                  color: var(--text-secondary); margin-left: 0.2em; }
.cifra .de-la { display: block; margin-bottom: 0.25em; font-family: var(--font-text); font-size: var(--step--1);
                letter-spacing: 0; color: var(--text-secondary); }

/* ==========================================================================
   FINALUL — programarea, pe fond închis
   ========================================================================== */
.final { padding-block: var(--sp-32) var(--sp-24); }
.final h2 { margin: 0 0 var(--sp-12); }
.final-grila { display: grid; gap: var(--sp-12); border-top: 1px solid color-mix(in srgb, var(--c-hartie) 20%, transparent);
               padding-top: var(--sp-12); }
@media (min-width: 900px) { .final-grila { grid-template-columns: 1.3fr 1fr 1fr; } }
.final-grila h3 { margin: 0 0 var(--sp-3); font-size: var(--step--1); font-weight: 400;
                  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-piatra); }
.final-grila p { margin: 0; color: var(--c-tavan); }
.final-tel { font-family: var(--font-display); font-size: var(--step-5); line-height: 1;
             letter-spacing: var(--ls-gigant); color: var(--c-hartie); text-decoration: none; }
.final-tel:hover { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }
.final a:not(.final-tel):not(.buton) { color: var(--c-hartie); text-underline-offset: 0.3em; }
.final .buton { margin-top: var(--sp-8); }

/* ==========================================================================
   SUBSOL — cu numele scris foarte mare, ca semnătura paginii
   ========================================================================== */
.subsol {
  position: relative; overflow: clip;
  background-color: var(--c-umbra);
  color: var(--c-greige);
  padding-bottom: var(--sp-8);
}
.acasa .subsol { margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--c-hartie) 12%, transparent); }
.subsol-int { color: var(--c-greige); }
.subsol a { color: var(--c-greige); }               /* 10.48:1 pe umbră */
.subsol a:hover { color: var(--c-hartie); }
.subsol-nume { color: var(--c-hartie); }
.subsol-cui { color: var(--c-piatra) !important; border-top-color: color-mix(in srgb, var(--c-hartie) 14%, transparent) !important; }

/* titlu doar pentru cititoare de ecran */
.sari-vizual {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* portretele de pe pagina Echipa folosesc același cadru tipografic */
.medic .portret-cadru { box-shadow: var(--shadow-md); }
.echipa--colab .portret-cadru { aspect-ratio: 3 / 2; }
.subsol-mare {
  margin: var(--sp-16) 0 0;
  padding-inline: var(--gutter);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.5rem, 1rem + 13vw, 15rem);
  line-height: 0.82; letter-spacing: var(--ls-gigant);
  white-space: nowrap;
  color: var(--c-tutun);
  user-select: none;
}
.subsol-demo {
  max-width: var(--container); margin: var(--sp-8) auto 0; padding-inline: var(--gutter);
  font-size: var(--step--1); color: var(--c-piatra);
}

/* ==========================================================================
   PAGINILE INTERIOARE — capul paginii mai mare, mai editorial
   ========================================================================== */
.titlu-pagina,
.cap h1 {
  font-size: clamp(2.8rem, 1.6rem + 5vw, 6.5rem) !important;
  line-height: var(--lh-gigant) !important;
  letter-spacing: var(--ls-gigant) !important;
  max-width: 14ch;
}
.cap { padding-top: var(--sp-16); }
.cap .intro { font-size: var(--step-2); max-width: 36ch; margin-top: var(--sp-8); }

/* Pașii rețetei: titlul în coloana stângă, tot textul în dreapta.
   Defect prins la analiza din 30.09: grila avea doar două coloane și niciun
   loc fixat, deci un pas cu DOUĂ paragrafe își punea al doilea în stânga, sub
   titlu. Pe paginile de tratament asta se întâmpla la aproape fiecare pas. */
@media (min-width: 860px) {
  /* row-gap 0: titlul se întinde pe 20 de rânduri implicite, iar cele goale
     au înălțime zero — dar un row-gap s-ar fi adunat de 19 ori între ele. */
  .pas-mare { row-gap: 0; align-items: start; }
  .pas-mare > h2 { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: var(--sp-12); }
  .pas-mare > :not(h2) { grid-column: 2; }
  .pas-mare > p { margin-bottom: var(--sp-4); }
  .pas-mare > p:last-child { margin-bottom: 0; }
}