/* ==========================================================================
   Casa Verde 2026 — eSolar · componenta STOCARE — stylesheet pentru web
   Culorile si fonturile sunt copiate EXACT din
   creative/campaigns/casa-verde-2026-stocare/02-design-system/tokens/tokens.css
   (sursa de adevar, v2.0.0). Scara tipografica si de spatiu din acel fisier e
   gandita pentru print (pt / mm, citire la 1-3m pe un afis A3) — pe web se
   foloseste o scara proprie in rem/px, gandita pentru citire pe ecran de la
   30-60cm, dar cu ACELEASI rapoarte de ierarhie si ACELEASI reguli MUST/NEVER
   de culoare (verde principal, amber doar text-ink, rosu doar la logo).

   DEVIERE ASUMATA de la `integrity-check.py --completeness`: poarta cere rampe
   de >=4 trepte per culoare si raporteaza `sparse-ramp` (avertisment, nu eroare).
   NU o respectam aici, deliberat: ar insemna sa inventam ~12 culori pe care nu
   le foloseste nimic, contrazicand exact minimalismul sistemului parinte de
   tipar (tokens.json v2.0.0 impune "maximum 3 zone rosii" si o paleta stransa).
   Se adauga trepte doar cand un rol semantic real are nevoie de ele.
   ========================================================================== */

:root {
  /* --- Tier 1: primitive (copiate EXACT din tokens.css v2.0.0) ------------- */
  --cv-green:       #00713F;
  --cv-green-deep:  #004F2C;
  --cv-amber:       #F5B301;
  --cv-ink:         #1A1A1E;
  --cv-paper:       #FFFFFF;
  --cv-paper-warm:  #F4F2ED;
  --cv-grey:        #5A5A60;
  --cv-silver:      #CCD2D2;
  --cv-red:         #D81E05; /* DOAR logo eSolar — nu se foloseste ca element de campanie */

  /* --- Tier 2: semantic (adaugat 07.08.2026, audit 02 / F-16) --------------
     Poarta `integrity-check.py --completeness` a gasit 11 literali de culoare
     hardcodati in acest fisier: 7 culori inventate in afara design system-ului.
     Toate treceau AA (masurat), deci nu era un bug de accesibilitate — dar era
     exact mecanismul de deriva care a produs cele doua sisteme paralele de pe
     paginile vechi (F-10). Se declara aici ca roluri semantice, o singura data.
     Fiecare pereche e masurata cu assets/contrast.py, valoarea e in comentariu. */

  /* primitive suplimentare — trepte deschise/inchise ale rampelor existente,
     necesare pentru rolurile semantice de mai jos. Raman in tier 1. */
  --cv-green-050:   #E4F3EA;
  --cv-red-050:     #FBE6E1;
  --cv-red-700:     #A81600;
  --cv-amber-050:   #FFF4E5;
  --cv-amber-800:   #8A5300;
  --cv-silver-300:  #C9C9CC;
  --cv-silver-500:  #9C9CA1;

  /* text pe fundal inchis (--cv-ink) */
  --cv-on-ink:        var(--cv-silver-300);  /* 10.50:1 pe --cv-ink — text de subsol   */
  --cv-on-ink-muted:  var(--cv-silver-500);  /*  6.35:1 pe --cv-ink — legal/disclaimer */

  /* feedback de formular */
  --cv-success-bg:    var(--cv-green-050);
  --cv-success-fg:    var(--cv-green-deep);  /*  8.50:1 pe --cv-success-bg */
  --cv-danger-bg:     var(--cv-red-050);
  --cv-danger-fg:     var(--cv-red-700);     /*  6.30:1 pe --cv-danger-bg  */

  /* marcaj pentru valori nestabilite inca (ex. {{RETENTIE_TBD}}) */
  --cv-pending-bg:    var(--cv-amber-050);
  --cv-pending-fg:    var(--cv-amber-800);   /*  5.82:1 pe --cv-pending-bg */

  --cv-font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --cv-font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --cv-radius: 4px;
  --cv-focus: 3px solid var(--cv-green-deep);
}

* { box-sizing: border-box; }

body.cv-2026 {
  margin: 0;
  font-family: var(--cv-font-body);
  color: var(--cv-ink);
  background: var(--cv-paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.cv-2026 a { color: var(--cv-green-deep); }
.cv-2026 a:hover { color: var(--cv-green); }

/* Butoanele scrise ca ANCORA (08.08.2026, F-35 — CTA-ul principal era verde pe verde).
   `.cv-2026 a` are specificitate (0,1,1) si bate `.cv-btn` (0,1,0), care declara
   `color: var(--cv-paper)`. Pe un <button> nu se intampla nimic — regula de link nu-l
   atinge — deci butonul de formular era alb, iar CTA-ul din hero, aceeasi clasa dar
   ancora, mostenea verdele-inchis de link: #004F2C pe #00713F = 1,59:1, sub orice prag.
   Defectul a aparut cand pagina de start a trecut de la `body.u-body` la `body.cv-2026`:
   pana atunci regula de link nici nu se aplica acolo. O clasa care declara si fundal, si
   text, trebuie sa castige pentru AMBELE forme in care e folosita componenta.
   (0,2,1) — castiga curat, fara `!important`. Verificat: alb pe verde 6,12:1. */
.cv-2026 a.cv-btn,
.cv-2026 a.btn,
.cv-2026 a.cv-btn:hover,
.cv-2026 a.btn:hover { color: var(--cv-paper); }

/* Focus ring MUST be green-deep or ink, never amber (design system §3.5, §on-brand focus rule) */
.cv-2026 a:focus-visible,
.cv-2026 button:focus-visible,
.cv-2026 input:focus-visible,
.cv-2026 select:focus-visible,
.cv-2026 textarea:focus-visible,
.cv-2026 [tabindex]:focus-visible {
  outline: var(--cv-focus);
  outline-offset: 2px;
}

.cv-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

.cv-nav {
  /* Netezirea fonturilor face parte din tipografia componentei, nu din
     pagina-gazda. Declarata doar pe `body.cv-2026`, paginile vechi (`u-body`)
     ramaneau pe `auto` = netezire subpixel, care ingroasa vizibil literele —
     mai ales text alb pe bara inchisa. Acelasi meniu parea bold pe unele
     pagini si normal pe altele, desi font-family, weight si size erau identice. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--cv-ink);
}
.cv-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.cv-nav a {
  display: block;
  padding: 14px 18px;
  color: var(--cv-paper);
  text-decoration: none;
  font-family: var(--cv-font-body);
  font-size: 14px;
  font-weight: 500;
}
/* DE CE font-family AICI, si nu mostenit din <body> (bug raportat 08.08.2026):
   antetul, meniul si subsolul sunt generate de build-chrome.py si inserate in
   pagini care NU au aceeasi clasa pe <body>. `body.cv-2026` primea
   `--cv-font-body`; paginile vechi au `u-body` si mosteneau Roboto de la
   nicepage.css, incarcat asincron de la Google Fonts. Rezultatul: acelasi meniu
   se randa cu doua fonturi diferite, iar pe paginile vechi „sarea" cand sosea
   Roboto (FOUT). Un component partajat nu are voie sa depinda de pagina in care
   e pus — deci isi declara singur tipografia. */
.cv-nav a:hover, .cv-nav a[aria-current="page"] { background: var(--cv-green); color: var(--cv-paper); }

/* --- Hero / titlu ------------------------------------------------------- */
.cv-hero {
  background: var(--cv-paper-warm);
  padding: 40px 0 32px;
  text-align: center;
}
.cv-hero .cv-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cv-grey);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.cv-hero h1 {
  font-family: var(--cv-font-display);
  font-weight: 900;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--cv-ink);
}
.cv-hero h1 .cv-word-verde { color: var(--cv-green); }
/* Amber NEVER carries text directly (brief §8: "Amber nu are voie sa fie niciodata... text.
   Amber este exclusiv umplere care poarta text ink.") — "2026" is ink text on an amber fill
   chip, not amber-colored text. Contrast: ink (#1A1A1E) on amber (#F5B301) = 9.36:1, verified. */
.cv-hero h1 .cv-word-2026 {
  color: var(--cv-ink);
  background: var(--cv-amber);
  padding: 0 10px;
  border-radius: 4px;
  display: inline-block;
}
.cv-hero p.cv-lead {
  font-size: 17px;
  max-width: 60ch;
  margin: 0 auto;
  color: var(--cv-ink);
}

/* --- Sectiuni generale --------------------------------------------------- */
.cv-section { padding: 36px 0; }
.cv-section h2 {
  font-family: var(--cv-font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--cv-ink);
  margin: 0 0 18px;
}
.cv-section-warm { background: var(--cv-paper-warm); }

/* Sectiunile care contin un formular isi centreaza titlul si textul introductiv, ca sa fie
   pe aceeasi axa cu coloana centrata a formularului (10.08.2026, cerut de proprietar).
   Se face prin clasa `cv-section--form` pusa in pagina, nu prin `:has()`: publicul vine de pe
   telefoane vechi, iar `:has()` n-are suport pe Android-urile mai batrane — o regula care „nu
   se aplica uneori" e mai rea decat una explicita.
   Se centreaza DOAR aceste sectiuni. Textele lungi de pe restul sitului (conditii, intrebari
   frecvente, politica) raman aliniate la stanga: randurile lungi centrate se citesc greu,
   pentru ca ochiul pierde inceputul randului urmator. */
.cv-section--form > .cv-container > h2,
.cv-section--form > .cv-container > .cv-prose,
.cv-section--form > .cv-container > p { text-align: center; }
.cv-section--form > .cv-container > .cv-prose { margin-left: auto; margin-right: auto; }
/* Etichetele si textele din interiorul formularului raman la stanga — un formular cu etichete
   centrate deasupra campurilor e greu de parcurs pe verticala. */
.cv-section--form .cv-form { text-align: left; }


/* Subtitlu de sectiune. ATENTIE LA ORDINEA IN FISIER: aceasta regula si
   `.cv-cond-group h3` au aceeasi specificitate (0,1,1), deci castiga ULTIMA
   scrisa. Trebuie sa ramana INAINTEA lui `.cv-cond-group h3` (linia ~199),
   altfel h3-urile din grupurile de conditii isi pierd dimensiunea de 15px. */
.cv-section h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--cv-ink);
  margin: 22px 0 6px;
}

/* Latime de citit. Containerul are 860px; la 16px asta inseamna 100+ caractere
   pe rand, mult peste intervalul confortabil de 45-75. Pe /stocare.html nu s-a
   vazut, pentru ca acolo paragrafele au 2-3 randuri. Pagina de informatii are
   ~2.000 de cuvinte, unde randul lung chiar rupe revenirea ochiului la stanga. */
/* Evitarea cuvantului orfan pe ultimul rand (09.08.2026). Raportat: „dosarul" ramanea
   singur pe un rand. `text-wrap: pretty` cere browserului sa rebalanseze ultimele randuri
   ca sa nu lase un singur cuvant. Unde conteaza cu adevarat (o propozitie anume) se
   foloseste in plus un spatiu neseparator in text — deterministic, merge peste tot. */
.cv-prose p,
.cv-container p,
.cv-hero p.cv-lead { text-wrap: pretty; }

.cv-prose { max-width: 68ch; }
.cv-prose p, .cv-prose li { font-size: 16px; line-height: 1.65; }
.cv-prose li { margin-bottom: 6px; }

/* --- Cei 3 pasi ----------------------------------------------------------- */
.cv-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 640px) { .cv-steps { grid-template-columns: 1fr; } }

/* Varianta pe o coloana, cu numarul in stanga textului.
   DE CE: `.cv-steps` e o grila de 3 coloane, gandita pentru pasi de o
   propozitie (asa sunt pe /stocare.html). Pasii de inscriere de pe pagina de
   informatii au cate 3-4 propozitii si linkuri, iar al patrulea pas ar ramane
   singur pe randul doi. */
.cv-steps--stack { grid-template-columns: 1fr; gap: 18px; }
.cv-steps--stack .cv-step { display: flex; gap: 14px; align-items: flex-start; }
.cv-steps--stack .cv-step-num { margin-bottom: 0; flex: 0 0 auto; }
.cv-steps--stack .cv-step-body { flex: 1 1 auto; }
.cv-steps--stack .cv-step-body h3 { margin-top: 4px; }
.cv-steps--stack .cv-step-body p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
.cv-steps--stack .cv-step-body p:last-child { margin-bottom: 0; }

.cv-step { text-align: left; }
.cv-step .cv-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--cv-amber);
  color: var(--cv-ink);
  font-family: var(--cv-font-display);
  font-weight: 900;
  font-size: 16px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.cv-step p { margin: 0; font-size: 15px; }

/* --- Cele 7 conditii, grupate -------------------------------------------- */
.cv-cond-group { margin-bottom: 28px; }
.cv-cond-group h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--cv-green-deep);
  margin: 0 0 4px;
}
.cv-cond-group .cv-cond-sub {
  font-size: 13px;
  color: var(--cv-grey);
  margin: 0 0 12px;
}
.cv-cond-list { list-style: none; margin: 0; padding: 0; }
.cv-cond-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--cv-silver);
  font-size: 15px;
}
.cv-cond-list li:first-child { border-top: none; }
.cv-cond-list .cv-check {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border: 2px solid var(--cv-green-deep);
  border-radius: 3px;
  margin-top: 1px;
}

/* --- Formular -------------------------------------------------------------- */
/* Latimea si asezarea formularului (10.08.2026, iteratia a doua ceruta de proprietar).
   Istoric: 09.08 campurile au fost stranse la ~o treime (262px), dar chenarele stateau
   lipite de marginea stanga, iar blocul de consimtamant ramanea la latimea plina — trei
   latimi diferite in acelasi formular.
   Acum: O SINGURA coloana centrata, care contine tot (chenare, consimtamant, buton), deci
   nu mai exista aliniere concurenta. Latimea campului a crescut cu 25% (262 -> 328px), la
   cererea proprietarului: 328 + 16px padding x2 + 1px bordura x2 = 362px coloana.
   `margin-inline: auto` centreaza coloana; regula e pe `.cv-form`, deci se aplica identic
   pe toate cele trei formulare, fara nimic scris in pagini. */
.cv-form {
  max-width: 362px;
  margin-left: auto;
  margin-right: auto;
}
.cv-form fieldset {
  border: 1px solid var(--cv-silver);
  border-radius: var(--cv-radius);
  padding: 16px;
  margin: 0 0 20px;
}
.cv-form legend {
  font-weight: 700;
  font-size: 14px;
  color: var(--cv-green-deep);
  padding: 0 6px;
}
/* Bifa si butoanele radio in verdele campaniei, nu in albastrul sistemului de operare
   (10.08.2026). `accent-color` coloreaza controlul nativ pastrandu-i comportamentul si
   accesibilitatea — spre deosebire de trucul obisnuit (ascunzi controlul si desenezi altul),
   care rupe navigarea cu tastatura si citirea cu cititorul de ecran daca nu e facut perfect. */
.cv-2026 input[type="checkbox"],
.cv-2026 input[type="radio"] { accent-color: var(--cv-green); }

/* Campurile cu text lung CRESC pe verticala in loc sa ascunda continutul (10.08.2026).
   Un <input> de o singura linie nu poate trece textul pe randul urmator — il deruleaza
   orizontal, deci omul nu-si mai vede inceputul adresei pe care tocmai a scris-o.
   Adresa de montaj e singurul camp cu text realmente lung, deci a devenit <textarea>;
   inaltimea o ajusteaza scripts/casa-verde-2026-form.js la fiecare tastare.
   Telefonul, e-mailul si kW-ul raman pe o linie intentionat: tipul lor nativ aduce
   tastatura potrivita pe telefon si validarea de format, iar continutul lor nu are cum
   sa depaseasca randul. */
.cv-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: var(--cv-font-body);
  line-height: 1.45;
  color: var(--cv-ink);
  background: var(--cv-paper);
  border: 1px solid var(--cv-silver);
  border-radius: var(--cv-radius);
  resize: vertical;
  overflow: hidden;          /* creste singur, deci bara de derulare interna nu apare */
}
.cv-field textarea[aria-invalid="true"] {
  border-color: var(--cv-danger-fg);
  box-shadow: 0 0 0 1px var(--cv-danger-fg);
}

.cv-field { margin-bottom: 16px; }
.cv-field:last-child { margin-bottom: 0; }
.cv-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--cv-ink);
}
.cv-field .cv-help {
  display: block;
  font-size: 12.5px;
  color: var(--cv-grey);
  font-weight: 400;
  margin-top: 3px;
}
.cv-field input[type="text"],
.cv-field input[type="tel"],
.cv-field input[type="email"],
.cv-field input[type="number"],
.cv-field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: var(--cv-font-body);
  border: 1px solid var(--cv-silver);
  border-radius: var(--cv-radius);
  color: var(--cv-ink);
  background: var(--cv-paper);
}

/* Select-ul „Tip bransament" (09.08.2026) — arata ca celelalte campuri, nu ca un
   control nativ mic. Pana acum nu era in lista de mai sus, deci ramanea la stilul
   implicit al sistemului de operare: alta latime, alta inaltime, alt font. Intr-un
   formular in care toate celelalte campuri sunt pe toata latimea, campul mic pare
   optional sau stricat — publicul are 35-70 de ani si completeaza de pe telefon.
   `appearance: none` scoate si sageata nativa, deci o punem noi ca imagine de fundal
   (SVG inline, nicio cerere in plus). Padding-ul din dreapta e 40px, ca textul optiunii
   sa nu treaca vreodata pe sub sageata. */
.cv-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5A60' d='M1.41 0 6 4.59 10.59 0 12 1.42 6 7.42 0 1.42z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.cv-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* Tinta de atingere pentru „Da / Nu" (10.08.2026, gasit la verificarea completa).
   Masurat inainte: eticheta era 42x21px, iar butonul in sine 18x18 — sub minimul de 24x24
   cerut de WCAG 2.5.8 (AA in 2.2). Exceptia de spatiere nu se aplica: intre optiuni erau
   16px, deci cercuri de 24px s-ar suprapune. Sunt 16 butoane pe pagina catre care trimite
   QR-ul din primarii, iar publicul are 35-70 de ani si apasa cu degetul, pe telefon.
   44px inaltime = recomandarea uzuala pentru degete, peste minimul de 24 al normei. */
.cv-radio-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-right: 10px;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.cv-radio-row input[type="radio"] { width: 18px; height: 18px; margin: 0; }

.cv-conditional {
  margin-top: 12px;
  padding-left: 16px;
  border-left: 3px solid var(--cv-paper-warm);
}
.cv-note {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--cv-paper-warm);
  border-radius: var(--cv-radius);
  font-size: 13.5px;
  color: var(--cv-ink);
}

/* SPECIFICITATE (reparat 10.08.2026, gasit la testul vizual al erorilor).
   `.cv-field label { display: block; font-weight: 600 }` are (0,1,1) si batea `.cv-consent`
   (0,1,0). Consecinte, vizibile pe toate paginile, si in starea normala, nu doar la eroare:
   `display: flex` nu se aplica, deci `gap` si `align-items` erau declarate degeaba, iar textul
   curgea PE SUB caseta de bifat in loc sa stea aliniat langa ea; in plus, tot paragraful de
   consimtamant (60 de cuvinte) mostenea `font-weight: 600` de la eticheta de camp si se randa
   ingrosat. Selectorul urca la (0,2,0), deci castiga.
   E a patra oara in acest proiect cand o clasa de componenta pierde in fata unei reguli de
   context (vezi F-35 la buton, marcajul de camp invalid, si acesta) — de aceea verificarea
   finala se face pe `getComputedStyle`, nu pe ce scrie in fisier. */
.cv-field .cv-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
  cursor: pointer;
}
.cv-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer; }

.cv-btn {
  display: inline-block;
  font-family: var(--cv-font-body);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  background: var(--cv-green);
  color: var(--cv-paper);
  border: none;
  border-radius: var(--cv-radius);
  cursor: pointer;
  text-align: center;
}
.cv-btn:hover { background: var(--cv-green-deep); }
.cv-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Campurile semnalate de server (10.08.2026, QA Q1). `aria-invalid` e pus de
   scripts/casa-verde-2026-form.js pe campurile numite in raspunsul de eroare si e
   scos de indata ce omul incepe sa le repare. Atributul e si semantic, nu doar
   vizual: cititoarele de ecran anunta campul ca invalid, deci semnalul nu depinde
   exclusiv de culoare (WCAG 1.4.1 — culoarea nu poate fi singurul mijloc). */
/* SPECIFICITATE, prins la testul de pe elementul randat (10.08): regula de baza a
   campurilor e `.cv-field input[type="text"]` = (0,2,1) si include `border` ca prescurtare,
   deci o regula `.cv-field [aria-invalid="true"]` = (0,2,0) pierdea, iar campul text
   marcat de server ramanea gri. Aici selectorii sunt tot (0,2,1) si scrisi DUPA regula de
   baza, deci castiga la egalitate de specificitate. Acelasi tipar de defect ca la butonul
   CTA (F-35): valoarea era declarata corect, dar nu ajungea pe ecran. */
.cv-field input[aria-invalid="true"],
.cv-field select[aria-invalid="true"] {
  border-color: var(--cv-danger-fg);      /* #A81600 pe alb — 6,30:1, peste pragul de 3:1 */
  box-shadow: 0 0 0 1px var(--cv-danger-fg);
}
/* Casetele si butoanele radio native ignora `border-color`, deci pe ele marcajul
   trebuie sa fie `outline` — altfel campul semnalat de server ramanea fara niciun
   semn vizibil (prins la testul din 10.08: bifa de consimtamant era marcata in cod,
   dar arata identic cu una corecta). */
.cv-field input[type="checkbox"][aria-invalid="true"],
.cv-field input[type="radio"][aria-invalid="true"],
.cv-radio-row [aria-invalid="true"] { outline: 2px solid var(--cv-danger-fg); outline-offset: 2px; }

/* Mesaj de eroare SUB campul cu probleme (10.08.2026, cerut de proprietar).
   Rezumatul de la capatul formularului spune cate campuri lipsesc; detaliul sta acolo unde
   se uita omul — imediat sub campul respectiv. Legatura cu campul se face prin
   `aria-describedby` din JS, deci cititorul de ecran il citeste cand ajunge pe camp.
   Triunghiul e SVG inline in CSS (nicio cerere in plus) si e pur decorativ: informatia e in
   text, nu in pictograma — culoarea si forma nu sunt singurul mijloc de a intelege (WCAG 1.4.1).
   Contrast masurat: #A81600 pe warm 6,75:1, pe alb 7,55:1 — ambele trec AA. */
.cv-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--cv-danger-fg);
  text-align: left;
}
.cv-field-error::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A81600' d='M12 2.5 23 21.5H1L12 2.5zm0 5.6a1.2 1.2 0 0 0-1.2 1.35l.45 4.9a.76.76 0 0 0 1.5 0l.45-4.9A1.2 1.2 0 0 0 12 8.1zm0 8.3a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cv-form-message { margin-top: 16px; padding: 12px 14px; border-radius: var(--cv-radius); font-size: 14px; }
.cv-form-message.cv-success { background: var(--cv-success-bg); color: var(--cv-success-fg); }
.cv-form-message.cv-error-msg { background: var(--cv-danger-bg); color: var(--cv-danger-fg); }

a.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--cv-green);
  color: var(--cv-paper);
}
a.btn:hover { background-color: var(--cv-green-deep); color: var(--cv-paper); }
a.btn:focus-visible { outline: var(--cv-focus); outline-offset: 2px; }

/* butonul mic de copiere a link-ului — tinta de atingere sub prag (32px) */
.copy-link-button { min-height: 40px; min-width: 40px; cursor: pointer; }

/* --- Contact -------------------------------------------------------------- */
.cv-contact { text-align: center; }
.cv-contact .cv-phone-big {
  display: inline-block;
  font-family: var(--cv-font-display);
  font-size: 28px;
  color: var(--cv-green-deep);
  text-decoration: none;
  margin: 8px 0;
}
.cv-contact .cv-hours { color: var(--cv-grey); font-size: 14px; }

/* --- Subsol (unificat pe toate paginile, 07.08.2026) -------------------------
   Paginile vechi aveau `2011-2024 - eSolar.ro` si NICIUN link catre politica de
   confidentialitate — care trebuie sa fie accesibila din orice pagina. Acum
   subsolul e generat din aceeasi sursa ca antetul si meniul (build-chrome.py). */
.cv-footer {
  /* Netezirea fonturilor face parte din tipografia componentei, nu din
     pagina-gazda. Declarata doar pe `body.cv-2026`, paginile vechi (`u-body`)
     ramaneau pe `auto` = netezire subpixel, care ingroasa vizibil literele —
     mai ales text alb pe bara inchisa. Acelasi meniu parea bold pe unele
     pagini si normal pe altele, desi font-family, weight si size erau identice. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--cv-font-body);
  background: var(--cv-ink);
  color: var(--cv-on-ink);
  padding: 28px 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  font-family: var(--cv-font-body);
}
.cv-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 14px;
}
.cv-footer a {
  color: var(--cv-paper);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 6px 0;          /* tinta de atingere */
  display: inline-block;
}
.cv-footer a:hover { color: var(--cv-on-ink); }
.cv-footer a:focus-visible { outline: 2px solid var(--cv-paper); outline-offset: 2px; }
.cv-footer .cv-legal {
  max-width: 640px;
  margin: 0 auto 12px;
  color: var(--cv-on-ink-muted);
  font-size: 12px;
}
.cv-footer__copy { margin: 0; color: var(--cv-on-ink-muted); font-size: 12px; }

/* --- Buton principal, consistent pe tot site-ul ------------------------------
   Un singur buton primar pe tot situl. `.u-btn-submit` (butonul Nicepage din
   formularele vechi) a fost scos din selector la 08.08.2026: nu mai exista niciun
   buton Nicepage pe sit — ultimul a plecat odata cu orfanul Informatii-Casa-Verde.html. */
/* `.btn` = butonul "Descarcă broșura" din pagina de ofertă. Era `DodgerBlue`
   (#1E90FF) cu text alb = 3.24:1 — PICA AA. A treia culoare de buton de pe site.
   Intra si el in acelasi stil primar. */
.cv-btn,
a.btn {
  font-family: var(--cv-font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  padding: 14px 28px;
  min-height: 48px;        /* tinta de atingere confortabila */
  border: none;
  border-radius: var(--cv-radius);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

/* --- Pagina legala (politica de confidentialitate) -------------------------- */
.cv-legal-page h1 { font-family: var(--cv-font-display); font-size: 28px; margin-bottom: 4px; }
.cv-legal-page .cv-updated { color: var(--cv-grey); font-size: 13px; margin-bottom: 28px; }
.cv-legal-page h2 { font-size: 18px; color: var(--cv-green-deep); margin: 28px 0 8px; }
.cv-legal-page p, .cv-legal-page li { font-size: 15px; line-height: 1.6; }
/* Tabelul e acum comun paginii de politica si oricarei alte pagini (`.cv-table`).
   Regulile sunt IDENTICE cu cele de dinainte — doar lista de selectori s-a
   largit — ca politica-confidentialitate.html sa se randeze la fel, octet cu
   octet, si sa nu existe doua stiluri de tabel pe acelasi site. */
.cv-legal-page table,
.cv-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.cv-legal-page th, .cv-legal-page td,
.cv-table th, .cv-table td { border: 1px solid var(--cv-silver); padding: 8px 10px; text-align: left; }
.cv-legal-page th,
.cv-table th { background: var(--cv-paper-warm); }
/* Coloana din stanga a tabelului de valabilitati e un antet de rand, nu date. */
.cv-table tbody th { font-weight: 700; }
/* La 320px un tabel de 3 coloane nu incape. Deruleaza tabelul in cutia lui,
   NU pagina — derularea orizontala a paginii intregi e bug, nu solutie. */
.cv-table-wrap { overflow-x: auto; margin: 10px 0 16px; }
.cv-tbd { background: var(--cv-pending-bg); color: var(--cv-pending-fg); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; font-weight: 600; }

/* ── Antetul site-ului (rescris 07.08.2026) ────────────────────────────────
   De ce e o componenta proprie, nu un patch:
   antetul vechi era `.header` cu `float:left` pe FIECARE <a> din interior si
   `overflow:hidden`, iar regulile lui stateau intr-un <style> inline care se
   incarca DUPA foaia noastra. Orice corectie devenea un razboi de specificitate,
   si cele 11 linkuri `tel:` din <details> mosteneau si ele `float:left` — de
   aici asezarea rupta. Am inlocuit blocul cu clase proprii (`cv-sitehead`),
   pe care regulile vechi nu le mai prind deloc. Fara `!important`, fara lupta.

   UX: numarul de campanie e actiunea principala din antet pentru publicul care
   nu completeaza formulare (design system §5.3) — deci primeste pictograma de
   telefon, corp mare, si o tinta de atingere de min. 44px (peste minimul WCAG
   2.5.8 de 24px, pentru ca publicul are 35–70 de ani si e pe telefon). */

.cv-sitehead {
  /* Netezirea fonturilor face parte din tipografia componentei, nu din
     pagina-gazda. Declarata doar pe `body.cv-2026`, paginile vechi (`u-body`)
     ramaneau pe `auto` = netezire subpixel, care ingroasa vizibil literele —
     mai ales text alb pe bara inchisa. Acelasi meniu parea bold pe unele
     pagini si normal pe altele, desi font-family, weight si size erau identice. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--cv-font-body);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 32px;
  /* parintele Nicepage (`.u-sheet`) e el insusi flex container, deci fara
     `width:100%` antetul se stramta la continut (429px in loc de 1140px) si
     logo-ul + contactul se lipeau in mijloc. `flex-basis:100%` acopera si
     cazul in care parintele ramane flex dupa un re-export. */
  width: 100%;
  flex: 1 1 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 24px;
  font-family: var(--cv-font-body);
}
.cv-sitehead__logo { display: inline-flex; flex: 0 0 auto; }
.cv-sitehead__logo img { display: block; height: 52px; width: auto; }

/* Ritm vertical explicit. Nicepage are o regula globala pe `p` cu margin 20px
   care castiga in fata unei singure clase — de aceea copiii sunt prefixati cu
   `.cv-sitehead` (0,2,0) si marginile sunt anulate explicit. Spatierea vine
   DOAR din `gap`, ca sa fie previzibila. */
.cv-sitehead .cv-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.cv-sitehead .cv-contact > * { margin: 0; }

.cv-contact__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* tinta de atingere confortabila */
  font-family: var(--cv-font-display);
  font-size: 24px;
  line-height: 1.1;
  color: var(--cv-green-deep);   /* 9.75:1 pe alb */
  text-decoration: none;
}
.cv-contact__call:hover { color: var(--cv-green); text-decoration: underline; }
.cv-contact__icon { flex: 0 0 auto; }

.cv-sitehead .cv-contact__hours {
  font-size: 13px;
  line-height: 1.3;
  color: var(--cv-grey);         /* 6.85:1 */
}

.cv-sitehead .cv-contact__more { margin-top: 2px; font-size: 13px; }
.cv-contact__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;                /* tinta de atingere */
  color: var(--cv-green-deep);
  cursor: pointer;
  list-style: none;
}
.cv-contact__more summary::-webkit-details-marker { display: none; }
.cv-contact__more summary::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s ease;
}
.cv-contact__more[open] summary::after { transform: rotate(180deg); }
.cv-contact__more summary:focus-visible { outline: var(--cv-focus); outline-offset: 2px; }

.cv-contact__more ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  text-align: right;
}
/* Doua feluri de intrari in aceeasi lista: numere apelabile (`<a href="tel:">`) si numere
   doar afisate (`<span>`, vezi OTHER_PHONES_PLAIN din build-chrome.py). Regula e comuna,
   deci arata identic — aceeasi marime, aceeasi culoare, acelasi chenar. Fara ea, `<span>`
   mostenea 13px si culoarea parintelui, iar lipsa padding-ului scotea randurile grilei din
   aliniere (raportat 11.08.2026: „arata gresit"). Daca se mai adauga vreodata un al treilea
   fel de intrare, se adauga AICI in lista de selectori, nu intr-o regula noua. */
.cv-contact__more a,
.cv-contact__more li > span {
  display: block;
  padding: 7px 0;                /* fiecare numar ramane usor de atins */
  color: var(--cv-ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;             /* egal pe ambele feluri -> randurile grilei se aliniaza */
  white-space: nowrap;
}
.cv-contact__more a:hover { text-decoration: underline; color: var(--cv-green-deep); }

/* Pe telefon formularul merge dintr-o margine in alta (10.08.2026, cerut de proprietar).
   `.cv-container` are 20px padding lateral; il anulam cu margini negative exact cat el,
   deci coloana ocupa toata latimea ecranului. Bordurile laterale si colturile rotunjite se
   scot — o bordura lipita de marginea sticlei arata a defect de randare, nu a chenar.
   Padding-ul interior ramane, ca textul sa nu atinga marginea. */
@media (max-width: 640px) {
  .cv-form {
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }
  .cv-form fieldset {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .cv-form > .cv-field,
  .cv-form > button,
  .cv-form > .cv-form-message { margin-left: 16px; margin-right: 16px; }
}

/* Telefon: totul pe centru, pe o singura coloana, cu numarul si mai mare —
   e principalul lucru pe care il face cineva venit prin QR de pe afis. */
@media (max-width: 640px) {
  .cv-sitehead {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 16px;
  }
  .cv-sitehead__logo img { height: 46px; }
  /* specificitatea trebuie sa o egaleze pe cea a regulii de baza
     `.cv-sitehead .cv-contact` (0,2,0), altfel media query-ul nu castiga */
  .cv-sitehead .cv-contact { align-items: center; text-align: center; }
  .cv-sitehead .cv-contact__call { font-size: 28px; }
  .cv-sitehead .cv-contact__more ul { grid-template-columns: 1fr; text-align: center; }
}

/* Navigatia pe telefon (audit 02, Tier 3) --------------------------------------
   flex-wrap cu etichete de latimi diferite produce randuri zdrentuite si tinte
   de atingere inegale. Publicul tinta (35-70, rural, vine prin QR de pe telefon)
   are nevoie de tinte mari si previzibile — deci pe mobil fiecare intrare ocupa
   randul intreg, cu separator vizibil.

   PRAGUL E 767px, NU 640px (reparat 08.08.2026, raportat: „bara de meniu e mai
   inalta"). Cele 5 intrari ocupa 708px pe un rand — masurat, la 14px/`padding
   14px 18px`. Cu stivuirea la 640px ramanea o banda de 67px latime (641-707px)
   in care `flex-wrap` rupea bara pe DOUA randuri: 98px inaltime, cu „Despre noi"
   singur pe randul al doilea. Nimeni n-a proiectat starea aia — era doar ce se
   intampla intre doua reguli. Pragul se muta deasupra latimii reale a randului,
   deci bara ori e un rand intreg, ori e stivuita; nu exista stare intermediara.

   BUGET: randul orizontal are 708px din 767 disponibili. O eticheta noua sau
   redenumita trebuie sa incapa in restul de ~59px, altfel se muta si pragul.
   `flex-wrap: wrap` ramane ca plasa de siguranta — daca bugetul se depaseste
   candva, bara se rupe pe doua randuri in loc sa iasa din ecran. */
@media (max-width: 767px) {
  .cv-nav ul { display: block; }
  .cv-nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .cv-nav a { padding: 15px 20px; font-size: 15px; }
}

/* Select-ul de bransament: optiunea-placeholder era "------------------",
   arata ca un camp stricat SI trecea validarea `required` (valoarea nu era
   goala). Acum are value="" + disabled + selected, deci validarea nativa
   obliga la o alegere reala. Cat timp e neales, textul e gri ca la celelalte
   campuri; dupa alegere devine culoarea normala de text. */
/* `:invalid` (nu `:has()`) — select-ul e `required` cu placeholder value="",
   deci e invalid exact cat timp nu s-a ales nimic. Suport mai bun pe telefoane
   vechi, care e exact publicul care ajunge aici prin QR. */
select:invalid { color: var(--cv-grey); }
select option { color: var(--cv-ink); }
select option[value=""] { color: var(--cv-grey); }

/* --- Text ajutator sub eticheta (F-07, 07.08.2026) --------------------------
   Inainte: toate cele 6 etichete erau `display:none` (clasa Nicepage
   `u-label-none`), iar rolul lor il tinea `placeholder`-ul. Problema masurata:
   placeholder-ul DISPARE cand omul incepe sa scrie, exact cand are mai mare
   nevoie de el — iar campurile de aici nu sunt evidente ("kW", "branșament").
   Publicul are 35-70 de ani si completeaza de pe telefon. WCAG 3.3.2.
   Acum: eticheta vizibila deasupra campului + text ajutator sub ea, exact
   tiparul de pe /stocare.html. Placeholder-ele redundante au fost scoase
   (NN/g: un placeholder ramas langa o eticheta poate fi citit ca valoare
   deja completata). */
.cv-help {
  display: block;
  font-family: var(--cv-font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--cv-grey);      /* 6.85:1 — cea mai deschisa valoare permisa */
  margin: -2px 0 5px;
  text-align: left;
}

/* Caseta de consimtamant: 16px e sub pragul confortabil. Eticheta care o
   inconjoara e deja o tinta mare (deci WCAG 2.5.8 e satisfacut prin ea), dar
   pentru un public de 35-70 de ani pe telefon, caseta in sine trebuie sa fie
   usor de nimerit. */
input[name="consent"] { width: 22px; height: 22px; }

/* --- Intrebari frecvente (dezvaluire nativa) ------------------------------
   INLOCUIESTE acordeonul JS de pe pagina de informatii.
   DE CE, motivul principal, si NU e accesibilitatea:
   acordeonul vechi ascundea raspunsurile cu `max-height: 0` si le deschidea
   DOAR din JavaScript. Cu JS oprit, blocat sau cazut la jumatate — cazul
   normal pe date mobile la tara — 47% din pagina ramanea de necitit si nimic
   de pe ecran nu sugera ca exista. Pierdere de continut, nu doar de a11y.
   `<details>` merge fara JS, iar cand e inchis scoate continutul si din
   arborele de accesibilitate SI din ordinea de tabulare (inainte, toate cele
   7 raspunsuri si cele 8 linkuri din ele erau citite de cititorul de ecran si
   tabulabile, desi invizibile pe ecran).
   Tiparul vizual e copiat din `.cv-contact__more` de mai sus — acelasi
   triunghi rotativ, acelasi inel de focus — ca sa nu apara al doilea fel de
   "dezvaluire" pe acelasi site. */
.cv-faq { max-width: 68ch; }
.cv-faq__item {
  border-top: 1px solid var(--cv-silver);
}
.cv-faq__item:last-child { border-bottom: 1px solid var(--cv-silver); }
.cv-faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;               /* tinta de atingere confortabila */
  font-size: 16px;
  font-weight: 700;
  color: var(--cv-ink);
  cursor: pointer;
  list-style: none;
}
.cv-faq__item summary::-webkit-details-marker { display: none; }
.cv-faq__item summary::before {
  content: "";
  flex: 0 0 auto;
  margin-top: 7px;
  width: 0; height: 0;
  border-left: 5px solid var(--cv-green-deep);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.cv-faq__item[open] summary::before { transform: rotate(90deg); }
.cv-faq__item summary:hover { color: var(--cv-green-deep); }
.cv-faq__item summary:focus-visible { outline: var(--cv-focus); outline-offset: 2px; }
.cv-faq__answer { padding: 0 0 16px 15px; }
.cv-faq__answer p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; }
.cv-faq__answer p:last-child { margin-bottom: 0; }
.cv-faq__answer ul { margin: 0 0 10px; padding-left: 20px; }
.cv-faq__answer li { font-size: 15.5px; line-height: 1.6; margin-bottom: 4px; }

/* Linkurile lungi (adrese Facebook lipite intregi) nu trebuie sa impinga
   pagina in derulare orizontala pe telefon. */
.cv-faq__answer a { word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
  .cv-faq__item summary::before,
  .cv-contact__more summary::after { transition: none; }
}

/* Atribuire de sursa / data verificarii. Pana acum exista doar `.cv-updated`,
   dar era limitat la `.cv-legal-page`. Pe o pagina informativa care afirma
   ceva despre starea unui program de stat, sursa si data trebuie sa fie
   vizibile langa afirmatie, nu ascunse in subsol. */
.cv-source { font-size: 13.5px; color: var(--cv-grey); margin-top: 14px; }

/* --- Broșura, ca imagini responsive -------------------------------------
   Paginile broșurii raman imagini (sunt scanari A4 de tipar), dar nu se mai
   servesc la rezolutia de tipar: 23,63 MB de JPEG-uri de pana la 3.721px
   latime ajungeau pe telefoane care le afiseaza la ~360px. Acum exista
   variante de 800w si 1600w (WebP + JPEG), alese de browser prin `srcset`.
   Originalul ramane pe server si se deschide la click — tabelele de preturi
   sunt dense si trebuie sa poata fi citite marite. */
.cv-brosura { display: grid; gap: 22px; }
.cv-brosura__page { margin: 0; }
.cv-brosura__page a {
  display: block;
  border: 1px solid var(--cv-silver);
  border-radius: var(--cv-radius);
  overflow: hidden;
  background: var(--cv-paper);
}
.cv-brosura__page a:focus-visible { outline: var(--cv-focus); outline-offset: 2px; }
/* `height:auto` + width/height in markup => browserul rezerva spatiul si
   pagina nu mai sare cand se incarca imaginile (fara layout shift). */
.cv-brosura__page img { display: block; width: 100%; height: auto; }
.cv-brosura__page figcaption {
  font-size: 13.5px;
  color: var(--cv-grey);
  margin-top: 6px;
  padding: 4px 0;              /* tinta de atingere pentru linkul din caption */
}

/* Campul „copiaza linkul brosurii". Era stilizat de nicepage.css; odata ce
   pagina de oferta nu mai incarca acel fisier, componenta are nevoie de
   reguli proprii, din aceleasi tokenuri ca restul formularelor. */
.copy-link { display: flex; gap: 8px; max-width: 520px; }
.copy-link-input {
  flex: 1 1 auto;
  min-width: 0;                  /* altfel input-ul refuza sa se micsoreze in flex la 320px */
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--cv-grey);
  border: 1px solid var(--cv-silver);
  border-radius: var(--cv-radius);
  background: var(--cv-paper);
}
.copy-link-button {
  flex: 0 0 auto;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--cv-paper);
  background: var(--cv-green);   /* 6.12:1 pe alb, ca restul butoanelor */
  border: none;
  border-radius: var(--cv-radius);
}
.copy-link-button:hover { background: var(--cv-green-deep); }
@media (max-width: 640px) { .copy-link { flex-wrap: wrap; } .copy-link-button { width: 100%; } }

/* Control de rand. Fragmentul marcat incepe pe un rand nou.
   DE CE nu <br>: un <br> e o ruptura fixa, valabila la orice latime — pe
   telefon ar produce randuri orfane. Un span block incepe randul nou, dar in
   rest se sparge natural, deci pe ecran ingust nu strica nimic. Nici nu bagam
   marcaj de prezentare in mijlocul propozitiei. */
.cv-line { display: block; }

/* --- Film: fatada de incarcare la cerere (08.08.2026, pagina de start) -----
   Pagina de start avea un <iframe> catre youtube.com incarcat la deschiderea
   paginii. Doua probleme, dintre care una de conformitate:
   1. `politica-confidentialitate.html` §9 declara ca situl NU foloseste
      cookie-uri de analiza, publicitate sau urmarire. Un iframe YouTube
      incarcat automat contacteaza Google si seteaza cookie-uri de urmarire
      inainte ca vizitatorul sa ceara ceva — deci afirmatia din politica era
      falsa exact pe prima pagina a sitului.
   2. Costul: filmul se descarca pe date mobile, la tara, pentru un public care
      a venit sa se preinscrie, nu sa se uite la un film.
   Fatada nu contacteaza niciun server tert pana la apasare. Nu foloseste
   miniatura de pe i.ytimg.com — ar fi fost tot o cerere catre Google la
   incarcarea paginii, adica exact ce reparam. */
.cv-video {
  max-width: 720px;
  margin: 8px 0 16px;
}

.cv-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--cv-radius);
}