/* ==========================================================================
   Caiet de Învățat AI
   Lumea vizuală: caiet dictando românesc. Hârtie, linii orizontale la 30px,
   margine roșie verticală, pix albastru pentru ce scrii tu, pix roșu pentru
   ce corectează profesorul, marker galben pentru ce înveți pe de rost.

   Regula care ține iluzia: TOT ritmul vertical este multiplu de 30px, iar
   textul curent stă pe linii, nu între ele. Dacă adaugi o marjă care nu e
   multiplu de --linie, foaia se strică imediat și se vede.

   Fonturi de sistem, fără cereri către alte domenii. Nicio imagine: hârtia,
   găurile de perforator și liniile sunt desenate din CSS.
   ========================================================================== */

:root {
  /* hârtie și cerneală */
  --hartie:      #f9f9f6;
  --hartie-2:    #f2f2ed;   /* foaia de dedesubt, casete */
  --hartie-umbra:#e6e6df;
  --linie-caiet: #c9d8e8;   /* liniatura, albastru spălăcit */
  --cerneala:    #16202e;   /* textul tipărit */
  --cerneala-2:  #4e5a6b;
  --creion:      #5f6874;   /* creionul. 5,35:1 pe hartie, 4,56 pe masa */
  --stilou:      #1d47a0;   /* pix albastru: ce scrii tu, legăturile */
  --rosu:        #b2453d;   /* pixul roșu al profesorului */
  --rosu-fad:    #c9776f;   /* același roșu, obosit: margini, contururi */
  --rosu-pal:    #f2dedb;   /* fond de casetă corectată */
  --marker:      #ffe9a0;   /* textmarker galben */
  --marker-2:    #cfe8cf;   /* textmarker verde, pentru bifat */
  --coperta:     #2b3444;   /* singura suprafata inchisa: coperta caietului */
  --coperta-text:#f3f1ea;
  --coperta-text-2: #c3c8d2;

  /* ritmul foii: nimic în afara multiplilor lui */
  --linie: 30px;
  --margine-stanga: 84px;   /* lățimea marginii roșii pe desktop */

  --f-text: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-titlu: Constantia, Cambria, Georgia, "Times New Roman", serif;
  --f-scris: "Segoe Print", "Bradley Hand", "Ink Free", cursive;  /* doar accente scurte */
  --f-masina: Consolas, "Courier New", monospace;                 /* doar date și cifre */

  --r: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: #e9e7e0;
  color: var(--cerneala);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: var(--linie);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--stilou); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: rgb(29 71 160 / .35); }
a:hover { text-decoration-color: var(--stilou); }
:focus-visible { outline: 2px solid var(--rosu); outline-offset: 3px; }

/* ---------- bara de sus: coperta caietului ---------- */
.bara {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 22px;
  background: var(--coperta);
  color: var(--coperta-text);
  border-bottom: 3px solid var(--rosu);
}
.bara .marca { display: flex; align-items: center; gap: 10px; color: var(--coperta-text);
  text-decoration: none; font-family: var(--f-titlu); font-size: 19px; letter-spacing: -.01em;
  white-space: nowrap; }
.bara .marca:hover { text-decoration: none; }
.bara .marca svg { display: block; }
.sus-progres { margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--coperta-text-2); white-space: nowrap; }
.sus-progres .text { font-family: var(--f-masina); font-variant-numeric: tabular-nums; }
.bara-bar { width: 96px; height: 8px; border: 1px solid var(--coperta-text-2); border-radius: var(--r); }
.bara-bar i { display: block; height: 100%; width: 100%; background: var(--rosu-fad);
  transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); }

/* ---------- foaia ---------- */
.foaie {
  position: relative;
  max-width: 940px;
  margin: 26px auto 60px;
  padding: var(--linie) 46px calc(var(--linie) * 2) var(--margine-stanga);
  background-color: var(--hartie);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--linie) - 1px),
    var(--linie-caiet) calc(var(--linie) - 1px),
    var(--linie-caiet) var(--linie)
  );
  background-position: 0 25px;   /* liniile cad exact pe linia de bază a textului */
  box-shadow: 0 1px 2px rgb(24 28 36 / .10), 0 14px 34px rgb(24 28 36 / .13);
}
/* marginea roșie și găurile de perforator */
.foaie::before {
  content: ""; position: absolute; inset: 0 auto 0 calc(var(--margine-stanga) - 22px);
  width: 1px; background: var(--rosu-fad);
}
.foaie::after {
  content: ""; position: absolute; left: 26px; top: 90px; width: 13px; height: 13px;
  border-radius: 50%; background: #e9e7e0;
  box-shadow: 0 260px 0 #e9e7e0, 0 520px 0 #e9e7e0, inset 0 1px 2px color-mix(in srgb, var(--cerneala) 22%, transparent);
}
@media (max-width: 560px) {
  .bara { height: 52px; padding: 0 14px; gap: 10px; }
  .bara .marca { font-size: 15px; gap: 7px; }
  .bara .marca svg { width: 18px; height: 20px; }
  .sus-progres { font-size: 13px; gap: 7px; }
  .bara-bar { width: 58px; height: 7px; }
}

@media (max-width: 820px) {
  :root { --margine-stanga: 44px; }
  .foaie { margin: 12px 10px 40px; padding: var(--linie) 20px var(--linie) var(--margine-stanga); }
  .foaie::after { display: none; }
  .foaie::before { left: calc(var(--margine-stanga) - 14px); }
}

/* ---------- tipografie, toată pe multipli de 30 ---------- */
h1, h2, h3, h4 { font-family: var(--f-titlu); font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 40px; line-height: 60px; margin: 0 0 var(--linie); }
h2 { font-size: 26px; line-height: var(--linie); margin: calc(var(--linie) * 2) 0 var(--linie); }
h3 { font-size: 20px; line-height: var(--linie); margin: var(--linie) 0 0; }
h4 { font-size: 16px; line-height: var(--linie); margin: 0; }
p { margin: 0 0 var(--linie); max-width: 68ch; }
.intro { font-size: 19px; color: var(--cerneala); max-width: 62ch; }
strong, b { font-weight: 650; }

/* nota scrisă în marginea roșie, ca o observație de profesor */
.nota-margine {
  position: absolute; left: 0; width: calc(var(--margine-stanga) - 30px);
  font-family: var(--f-scris); font-size: 13px; line-height: 17px;
  color: var(--rosu); transform: rotate(-3deg); text-align: right;
}
@media (max-width: 820px) { .nota-margine { display: none; } }

/* ---------- antetul lecției ---------- */
.lectie-cap { margin-bottom: calc(var(--linie) * 2); }
.lectie-cap h1 { position: relative; display: inline-block; }
.lectie-cap h1::after {
  content: ""; position: absolute; left: -2px; right: -6px; bottom: 6px; height: 7px;
  background: var(--marker); mix-blend-mode: multiply; z-index: -1;
  transform: rotate(-.4deg);
}
.meta-lectie { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 var(--linie);
  font-family: var(--f-masina); font-size: 13px; color: var(--creion);
  font-variant-numeric: tabular-nums; }
.obiectiv { margin: 0 0 var(--linie); max-width: 66ch; }
.obiectiv b { font-weight: 650; background: var(--marker-2); padding: 1px 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- liste ---------- */
ul.puncte, ol.pasi { margin: 0 0 var(--linie); padding: 0; list-style: none; counter-reset: p; }
ul.puncte li, ol.pasi li { position: relative; padding-left: 34px; margin: 0 0 var(--linie);
  max-width: 66ch; }
ul.puncte li::before {
  content: ""; position: absolute; left: 8px; top: 13px; width: 9px; height: 2px;
  background: var(--cerneala);
}
ol.pasi li { counter-increment: p; }
ol.pasi li::before {
  content: counter(p) "."; position: absolute; left: 2px; top: 0;
  font-family: var(--f-titlu); font-weight: 700; color: var(--rosu);
}
.puncte span, .pasi span { color: var(--cerneala-2); }

/* ---------- schema: desen pe hârtie milimetrică, lipit cu bandă ---------- */
figure.schema {
  position: relative; margin: 0 0 calc(var(--linie) * 2); padding: 29px 18px;
  background-color: #fdfdfb;
  background-image:
    linear-gradient(to right, rgb(29 71 160 / .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(29 71 160 / .07) 1px, transparent 1px);
  background-size: 15px 15px;
  border: 1px solid var(--hartie-umbra);
  box-shadow: 0 1px 2px rgb(24 28 36 / .07), 0 8px 18px rgb(24 28 36 / .07);
}
figure.schema::before,
figure.schema::after {
  content: ""; position: absolute; top: -9px; width: 62px; height: 18px;
  background: rgb(255 233 160 / .75); border: 1px solid rgb(0 0 0 / .05);
  transform: rotate(-2deg);
}
figure.schema::before { left: 24px; }
figure.schema::after { right: 24px; transform: rotate(2.4deg); }
figure.schema svg { width: 100%; height: auto; display: block; }
figure.schema figcaption { margin: var(--linie) 0 0; font-size: 14.5px; line-height: var(--linie);
  color: var(--creion); max-width: 72ch; }

/* culorile desenului, în aceeași lume */
.nod rect { fill: #ffffff; stroke: var(--cerneala-2); stroke-width: 1.2; }
.nod-hl rect { fill: #fff8e2; stroke: var(--rosu); stroke-width: 1.6; }
.nod-warn rect { fill: var(--rosu-pal); stroke: var(--rosu); }
.nod-box rect { fill: #fbfbf8; stroke-dasharray: 4 3; }
.nod-mic rect { fill: #ffffff; }
.nt { fill: var(--cerneala); font-size: 13px; font-weight: 650; text-anchor: middle;
  font-family: var(--f-text); }
.nt-l { text-anchor: start; }
.nt-sm { font-size: 12px; }
.ns { fill: var(--cerneala-2); font-size: 11.5px; text-anchor: middle; font-family: var(--f-text); }
.ns-l { text-anchor: start; }
.ns-hl { fill: var(--rosu); }
.ns-mut { fill: var(--creion); }
.ns-mono { font-family: var(--f-masina); font-size: 11px; fill: var(--stilou); }
.et { fill: var(--creion); font-size: 12px; text-anchor: middle; font-family: var(--f-text); }
.et-l { text-anchor: start; }
.et-hl { fill: var(--rosu); }
.et-warn { fill: var(--rosu); font-weight: 650; }
.pas { fill: var(--rosu); font-size: 12px; font-family: var(--f-titlu); font-weight: 700;
  text-anchor: start; }
.op { fill: var(--cerneala-2); font-size: 20px; text-anchor: middle; font-family: var(--f-titlu); }
.ar { stroke: var(--cerneala-2); stroke-width: 1.4; fill: none; }
.ar-dash { stroke-dasharray: 5 4; }
.ar-warn { stroke: var(--rosu); }
.ar-thin { stroke: var(--creion); stroke-width: 1; stroke-dasharray: 2 3; }
.ar-h { fill: var(--cerneala-2); }
.axa { stroke: var(--cerneala-2); stroke-width: 1.2; }
.pct { fill: var(--rosu); }
.sep { stroke: var(--hartie-umbra); stroke-width: 1; }
.masa { fill: #ffffff; stroke: var(--cerneala-2); stroke-dasharray: 4 3; }
.masa-linie { stroke: var(--cerneala); stroke-width: 1.6; }
.strat { fill: #f4f4ef; stroke: var(--cerneala-2); }
.strat-hl { fill: var(--marker); stroke: var(--rosu); }
.strat-warn { fill: var(--rosu-pal); stroke: var(--rosu); }
.zona { fill: none; stroke: var(--cerneala-2); }
.zona-nu { stroke: var(--rosu); stroke-dasharray: 5 4; }
.zona-da { stroke: #4a7c59; }

/* ---------- greșit și corect, ca pe teză ---------- */
.exemplu { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 0 0 var(--linie); }
@media (max-width: 780px) { .exemplu { grid-template-columns: 1fr; } }
.exemplu > div { position: relative; padding: 29px 20px; background: #fdfdfb;
  border: 1px solid var(--hartie-umbra); }
.exemplu .rau { background: var(--rosu-pal); border-color: var(--rosu-fad); }
.exemplu .bun { background: #f1f7f0; border-color: #a9c6ab; }
.exemplu h4 { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 15px; font-family: var(--f-text); font-weight: 650; }
.exemplu .rau h4 { color: var(--rosu); }
.exemplu .rau h4 span { text-decoration: line-through;
  text-decoration-color: var(--rosu); }
.exemplu .bun h4 { color: #3c6b46; }
.exemplu pre { margin: 0; white-space: pre-wrap; font-family: var(--f-masina);
  font-size: 13px; line-height: var(--linie); color: var(--cerneala); }
.nota-ex { font-size: 15px; color: var(--creion); max-width: 68ch; }
.semn-svg { flex: none; }

/* ---------- regula: propoziția pe care o subliniezi cu markerul ---------- */
.regula { margin: 0 0 var(--linie); padding: 0 0 0 20px; border-left: 2px solid var(--rosu-fad); }
.regula .et-r { font-family: var(--f-scris); font-size: 15px; color: var(--rosu);
  line-height: var(--linie); }
.regula p.text { font-family: var(--f-titlu); font-size: 24px; line-height: var(--linie);
  margin: 0 0 var(--linie); max-width: 46ch; }
.regula p.text mark { background: var(--marker); padding: 1px 2px; color: inherit; }
.regula p.de-ce { color: var(--cerneala-2); margin: 0 0 var(--linie); }

/* ---------- capcane: însemnare cu pix roșu ---------- */
.capcane { margin: 0 0 var(--linie); padding: 29px 22px; background: var(--rosu-pal);
  border: 1px dashed var(--rosu-fad); }
.capcane h3 { margin: 0; font-size: 17px; color: var(--rosu); font-family: var(--f-text); }
.capcane ul.puncte li { margin-bottom: 0; }
.capcane ul.puncte li::before { background: var(--rosu); }
.capcane ul.puncte li span { color: var(--cerneala); }

/* ---------- cod și tabele ---------- */
pre.cod { margin: 0 0 var(--linie); padding: 28px 22px 29px; background: #fdfdfb;
  border: 1px solid var(--hartie-umbra); border-top: 2px solid var(--cerneala-2);
  overflow-x: auto; font-family: var(--f-masina); font-size: 13.5px; line-height: var(--linie);
  color: var(--cerneala); }
pre.cod b { color: var(--rosu); font-weight: 700; }

table { width: 100%; border-collapse: collapse; margin: 0 0 var(--linie); font-size: 15px; }
th { text-align: left; padding: 0 12px; height: 28px; background: var(--hartie-2);
  border-bottom: 2px solid var(--cerneala-2); font-weight: 650; font-size: 13px; }
td { padding: 0 12px; height: 29px; border-bottom: 1px solid var(--hartie-umbra);
  color: var(--cerneala-2); vertical-align: top; line-height: var(--linie); }
td:first-child { color: var(--cerneala); }

/* ---------- unelte: fișe de lucru ---------- */
.unealta, .exercitiu, .quiz {
  margin: 0 0 var(--linie); padding: 29px 24px;  /* 29 + chenarul de 1px = o linie */
  background: #fdfdfb; border: 1px solid var(--cerneala-2);
  box-shadow: 0 1px 2px rgb(24 28 36 / .06), 0 8px 18px rgb(24 28 36 / .07);
}
.unealta > h3, .exercitiu h3, .quiz h3 { margin: 0; font-size: 20px; }
.unealta .sub, .exercitiu .cerinta { color: var(--cerneala-2); margin: 0 0 var(--linie);
  font-size: 15.5px; line-height: var(--linie); max-width: 66ch; }

.camp { margin: 0 0 var(--linie); }
.camp label { display: block; font-size: 13px; font-weight: 650; color: var(--rosu);
  margin-bottom: 0; letter-spacing: .01em; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
textarea, select {
  width: 100%; padding: 4px 8px; color: var(--stilou); background: transparent;
  border: 0; border-bottom: 1px solid var(--linie-caiet); border-radius: 0;
  font-family: var(--f-text); font-size: 16px; line-height: var(--linie);
}
input[type="text"], input[type="number"], input[type="email"], input[type="tel"] { height: 29px; }  /* plus chenarul de jos */
input::placeholder, textarea::placeholder { color: #6a7280; }  /* 4,76:1 */
textarea {
  min-height: calc(var(--linie) * 4); resize: vertical; padding: 0 8px; border-bottom: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0,
    transparent calc(var(--linie) - 1px), var(--linie-caiet) calc(var(--linie) - 1px),
    var(--linie-caiet) var(--linie));
  font-family: var(--f-text); font-size: 16px;
}
input:focus, textarea:focus { border-bottom-color: var(--rosu); background-color: #fffdf4; }
/* la mouse rămâne doar chenarul roșu de jos, la tastatură se vede inelul întreg */
input:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--rosu); outline-offset: 2px;
}
.randuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }

button {
  font-family: var(--f-text); font-size: 15px; font-weight: 650; cursor: pointer;
  height: var(--linie); padding: 0 16px; line-height: 28px; border-radius: var(--r);
  border: 1px solid var(--rosu-fad); background: #fdfdfb; color: var(--rosu);
  transition: background .15s var(--ease);
}
button:hover { background: var(--rosu-pal); }
/* rosu stins, dar destul de inchis cat textul deschis sa treaca pragul: 4,64:1 */
button.primar { background: #b85349; border-color: #b85349; color: #fffaf9; }
button.primar:hover { background: var(--rosu); border-color: var(--rosu); }
button:disabled { cursor: default; opacity: .55; border-style: dashed; }
.butoane { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 var(--linie); }

.rezultat { margin: 0 0 var(--linie); padding: 14px 16px; background: #fffdf4;
  border: 1px dashed var(--cerneala-2); font-family: var(--f-masina); font-size: 13.5px;
  line-height: var(--linie); white-space: pre-wrap; color: var(--cerneala); }
.rezultat:empty { display: none; }
.cifra { display: block; font-family: var(--f-titlu); font-size: 34px; line-height: 60px;
  color: var(--rosu); font-variant-numeric: tabular-nums; margin-bottom: 0; }
.ipoteza-ceruta { color: var(--rosu); font-family: var(--f-text); font-size: 15px;
  line-height: var(--linie); margin: 0; }

.verdict { display: inline-block; padding: 3px 12px; border: 1px solid currentColor;
  font-family: var(--f-scris); font-size: 16px; transform: rotate(-1.5deg); }
.verdict.da { color: #3c6b46; background: #eef5ee; }
.verdict.nu { color: var(--rosu); background: var(--rosu-pal); }

ul.bife { list-style: none; margin: 0 0 var(--linie); padding: 0; }
ul.bife li { margin: 0; }
ul.bife label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  color: var(--cerneala-2); line-height: var(--linie); }
ul.bife input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--rosu); flex: none; }
ul.bife input:checked + span { color: var(--cerneala); }

/* ---------- exercițiul: fișa de lucru ---------- */
.exercitiu { background: #fffdf7; border-color: var(--rosu-fad); }
.lista-verificari { list-style: none; margin: 29px 0 0; padding: 0;
  border-top: 1px solid var(--hartie-umbra); }
.lista-verificari li { display: flex; gap: 12px; align-items: flex-start; padding: 0;
  font-size: 15.5px; line-height: var(--linie); }
.lista-verificari .semn { flex: none; margin-top: 4px; }
.lista-verificari .da { color: var(--cerneala-2); }
.lista-verificari .nu { color: var(--cerneala); }
.lista-verificari .sfat { display: block; color: var(--creion); font-size: 14.5px;
  line-height: var(--linie); }

/* ---------- autoevaluare: grila de test ---------- */
.intrebare { padding: 0; margin: 0 0 var(--linie); }
.intrebare + .intrebare { border-top: 1px solid var(--hartie-umbra); padding-top: 29px; }
.intrebare p.q { margin: 0; font-weight: 650; max-width: 66ch; }
.optiuni { display: flex; flex-direction: column; align-items: stretch; }
.optiuni button { display: flex; gap: 10px; align-items: flex-start; text-align: left;
  font-weight: 400; color: var(--cerneala); background: none; border: 0; border-radius: 0;
  height: auto; min-height: var(--linie); padding: 0; line-height: var(--linie); max-width: 64ch; }
.optiuni .litera { flex: none; width: 22px; font-family: var(--f-masina); font-size: 13px;
  color: var(--rosu); }
.optiuni .semn-svg { flex: none; margin-top: 6px; }
.optiuni button:hover:not([aria-disabled="true"]) .text-opt { text-decoration: underline;
  text-decoration-color: var(--rosu); text-underline-offset: 3px; }
.optiuni button[aria-disabled="true"] { cursor: default; }
.optiuni button.aleasa-bine .text-opt { background: var(--marker-2); padding: 1px 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.optiuni button.aleasa-rau .text-opt { color: var(--rosu); text-decoration: line-through;
  text-decoration-color: var(--rosu); }
.explicatie { margin: 0; color: var(--cerneala-2); font-size: 15.5px; line-height: var(--linie);
  max-width: 68ch; }
.explicatie:empty { display: none; }

/* ---------- finalul lecției ---------- */
.final { margin-top: calc(var(--linie) * 2); padding-top: 29px;
  border-top: 1px solid var(--rosu-fad); display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; }
.navig { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.navig a { font-size: 15px; color: var(--stilou); }

/* ---------- coperta și cuprinsul ---------- */
.coperta { margin-bottom: calc(var(--linie) * 2); }
.coperta h1 { font-size: 46px; line-height: 60px; margin: 0 0 var(--linie); }
.eticheta-caiet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 26px;
  margin: 0 0 calc(var(--linie) * 2); padding: 28px 26px;
  border: 2px solid var(--cerneala-2); background: #fffdf7; max-width: 640px;
}
.eticheta-caiet div { border-bottom: 1px solid var(--linie-caiet); padding-bottom: 0;
  margin-bottom: 29px; }
.eticheta-caiet span { display: block; font-size: 12.5px; color: var(--creion); }
.eticheta-caiet b { font-family: var(--f-scris); font-size: 17px; color: var(--stilou);
  font-weight: 400; }

.nivel { margin: 0 0 calc(var(--linie) * 2); }
.nivel h2 { margin-top: 0; }
.nivel .pentru { display: block; font-family: var(--f-scris); font-size: 16px;
  color: var(--rosu); margin: 0 0 var(--linie); }
.cuprins { list-style: none; margin: var(--linie) 0 0; padding: 0; }
.cuprins li { margin: 0; }
/* aliniere la baza ar face rândul de 33px, pentru că cifrele sunt la 13px și titlul
   la 17px; rândul trebuie să rămână exact o linie de caiet */
.cuprins a { display: flex; align-items: flex-start; gap: 10px; padding: 0;
  height: var(--linie); color: var(--cerneala); text-decoration: none; }
.cuprins a:hover .titlu { text-decoration: underline; text-decoration-color: var(--rosu); }
.cuprins .nr { font-family: var(--f-masina); font-size: 13px; color: var(--rosu);
  font-variant-numeric: tabular-nums; flex: none; width: 34px; }
.cuprins .titlu { font-weight: 650; flex: none; max-width: 62%; }
.cuprins .puncte-linie { flex: 1; border-bottom: 1px dotted var(--creion); height: 23px; }
.cuprins .durata { font-family: var(--f-masina); font-size: 13px; color: var(--creion); flex: none; }
.cuprins .bifa { flex: none; width: 20px; }
.cuprins .descriere { margin: 0 0 0 44px; color: var(--cerneala-2); font-size: 15px;
  line-height: var(--linie); max-width: 64ch; }
.cuprins li.gata .titlu { color: var(--creion); }

.materiale { list-style: none; margin: var(--linie) 0 0; padding: 0; }
.materiale li { margin: 0; }
.materiale a { font-weight: 650; }
.materiale span { color: var(--creion); font-size: 15px; line-height: var(--linie); }

.subsol { margin-top: calc(var(--linie) * 2); padding-top: 29px;
  border-top: 1px solid var(--linie-caiet); color: var(--creion); font-size: 14.5px;
  line-height: var(--linie); }

/* ---------- traseul lateral, pe paginile de lecție ---------- */
.cu-traseu { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 34px;
  max-width: 1280px; margin: 0 auto; align-items: start; }
@media (max-width: 1100px) { .cu-traseu { grid-template-columns: minmax(0, 1fr); } }
.traseu { position: sticky; top: 86px; padding: 26px 20px 26px 0; }
@media (max-width: 1100px) { .traseu { position: static; padding: 0 20px 30px; } }
.traseu h2 { font-size: 15px; margin: 0 0 8px; font-family: var(--f-text);
  color: var(--creion); font-weight: 650; }
.traseu h2 + ol { margin-bottom: 20px; }
.traseu ol { list-style: none; margin: 0; padding: 0; }
.traseu a { display: flex; gap: 8px; padding: 4px 8px; color: var(--cerneala-2);
  font-size: 14.5px; line-height: 22px; text-decoration: none; border-left: 2px solid transparent; }
.traseu a:hover { color: var(--cerneala); background: rgb(255 255 255 / .6); }
.traseu a.acum { border-left-color: var(--rosu); color: var(--cerneala); font-weight: 650;
  background: rgb(255 255 255 / .75); }
.traseu a.gata .nr { color: #4a7c59; }
.traseu .nr { font-family: var(--f-masina); font-size: 12.5px; color: var(--creion); flex: none; }

@media print {
  body { background: #fff; }
  .bara, .traseu, .butoane, .final { display: none; }
  .foaie { box-shadow: none; margin: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* tabelele se desfac în rânduri pe ecran îngust, ca să nu se strivească */
@media (max-width: 620px) {
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--cerneala-2); padding: 6px 0; }
  td { height: auto; border: 0; padding: 0 0 6px; }
  td::before { content: attr(data-et); display: block; font-size: 12.5px; color: var(--rosu);
    font-weight: 650; line-height: var(--linie); }
}

/* Pe ecran ingust schema nu se mai micsoreaza pana nu se mai citeste: ramane la o
   latime minima si se trage lateral, ca o plansa prea mare pentru pagina. */
@media (max-width: 620px) {
  figure.schema { overflow-x: auto; }
  figure.schema svg, figure.schema figcaption { min-width: 520px; }
}

/* ---------- paginile comerciale: oferta, formularul, intrebarile ---------- */
.oferta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--linie); margin: 0 0 var(--linie); }
.varianta { padding: 29px 24px; background: #fdfdfb; border: 1px solid var(--cerneala-2);
  box-shadow: 0 1px 2px rgb(24 28 36 / .06), 0 8px 18px rgb(24 28 36 / .07); }
.varianta-hot { border-color: var(--rosu); background: #fffdf7; }
.varianta h3 { margin: 0; }
.varianta .pret { margin: 0; }
.varianta .pret b { font-family: var(--f-titlu); font-size: 34px; line-height: 60px;
  color: var(--rosu); font-variant-numeric: tabular-nums; }
.varianta .pret span { font-size: 15px; color: var(--creion); }
.varianta .pentru-cine { color: var(--cerneala-2); }
.varianta ul.puncte li { margin-bottom: 0; }
.buton-plata { display: inline-flex; align-items: center; height: var(--linie); padding: 0 16px;
  background: #b85349; color: #fffaf9; border-radius: var(--r); font-weight: 650; font-size: 15px;
  text-decoration: none; }
.buton-plata:hover { background: var(--rosu); color: #fffaf9; text-decoration: none; }

.formular-inscriere { max-width: 520px; }
.formular-inscriere code { font-family: var(--f-masina); font-size: 13.5px; color: var(--stilou); }

.intrebari { margin: 0 0 var(--linie); }
.intrebari dl { margin: 0; }
.intrebari dt { font-weight: 650; margin: 0; }
.intrebari dd { margin: 0 0 var(--linie); color: var(--cerneala-2); max-width: 68ch; }

@media (max-width: 780px) {
  .oferta { grid-template-columns: 1fr; }
}

/* lecțiile care intră în pachetul plătit: titlu stins și un lacăt desenat */
.cuprins li.inchisa .titlu { color: var(--cerneala-2); font-weight: 400; }
.cuprins li.inchisa .bifa { display: flex; align-items: center; height: var(--linie); }