@charset "UTF-8";
/* =============================================================================
   eHidroizolatii — foaia de stil a site-ului
   -----------------------------------------------------------------------------
   Aceasta este varianta LIZIBILĂ, cu comentarii. Se editează aici.
   La final se generează assets/css/style.css (minificat), pe care îl folosește
   site-ul automat dacă există. Dacă îl ștergi, site-ul revine la acest fișier.

   CUPRINS
     01  Reset
     02  Tokeni (culori, tipografie, spațiere)
     03  Bază și tipografie
     04  Layout: container, secțiuni, coloana-marjă
     05  Focus și accesibilitate
     06  Header și navigație
     07  Butoane
     08  Carduri
     09  Casetă de titlu, bandă de date, etichete mono
     10  Tabel de specificații
     11  Întrebări frecvente
     12  Formulare
     13  Firimituri (breadcrumb)
     14  Stratificația
     15  Footer
     16  Bara fixă de acțiune (mobil)
     17  Utilitare
     18  Pagina de acasă
     19  Mișcare redusă, print, contrast forțat
   ========================================================================== */


/* ==========================================================================
   01  RESET
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}

ul[role="list"], ol[role="list"] { list-style: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

summary::-webkit-details-marker { display: none; }


/* ==========================================================================
   02  TOKENI
   ========================================================================== */

:root {

  /* --- Paleta. Valori fixe. Nu se schimbă. --------------------------------- */
  --verde-adanc:  #1B4038;   /* header, hero, footer, benzi închise */
  --verde-lucru:  #2B5A49;   /* suprafețe secundare, hover pe închis */
  --verde-semnal: #4C8B70;   /* linii de indicare, borduri pe închis */
  --grafit:       #1A1D1E;   /* text principal */
  --grafit-mediu: #55595B;   /* text secundar */
  --beton:        #EAE7E1;   /* fundalul implicit al paginii */
  --beton-inchis: #D2CEC6;   /* borduri, separatoare, hașuri */
  --alb:          #FBFAF8;   /* carduri, câmpuri de formular */
  --portocaliu:   #D9741A;   /* SINGURUL accent */

  /* Cărămiziu desaturat, EXCLUSIV pentru mesajele de validare.
     Nu este un al doilea accent: nu apare pe butoane, pe linkuri, pe
     chenare decorative sau în grafice. Doar acolo unde formularul spune
     utilizatorului că trebuie să corecteze ceva.
     Contrast: 6,2:1 pe --alb, 5,2:1 pe --beton. NU se folosește pe fundal
     închis, unde ar coborî sub prag. */
  --eroare:       #96473A;

  /* --- Roluri. Se rescriu pe secțiunile închise. --------------------------- */
  --fundal:         var(--beton);
  --text:           var(--grafit);
  --text-secundar:  var(--grafit-mediu);
  --bordura:        var(--beton-inchis);
  --bordura-forte:  var(--verde-adanc);
  --card:           var(--alb);
  --linie-tehnica:  var(--verde-lucru);
  /* Culoarea numerelor de strat și a contoarelor.
     Separată de --linie-tehnica pentru că numerele sunt TEXT și au nevoie
     de 4,5:1, în timp ce liniile sunt elemente grafice și le ajung 3:1. */
  --numar-tehnic:   var(--verde-lucru);
  /* Halou de focus: se schimbă pe fundal închis ca să rămână vizibil. */
  --focus-halou:    var(--grafit);

  /* --- Tipografie --------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-corp:    "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --t-h1:      clamp(2.25rem, 1.60rem + 3.10vw, 4rem);
  --t-h2:      clamp(1.75rem, 1.45rem + 1.50vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 1.12rem + 0.65vw, 1.625rem);
  --t-h4:      1.125rem;
  --t-lead:    clamp(1.125rem, 1.02rem + 0.50vw, 1.375rem);
  --t-corp:    1.0625rem;   /* 17px */
  --t-mic:     0.9375rem;   /* 15px */
  --t-mono:    0.8125rem;   /* 13px */
  --t-eyebrow: 0.75rem;     /* 12px */
  --t-cifra:   clamp(1.75rem, 1.40rem + 1.60vw, 2.5rem);

  --masura: 68ch;           /* lățimea maximă a unui paragraf */

  /* --- Spațiere: pas de 4 ------------------------------------------------- */
  --sp-4:   4px;   --sp-8:   8px;   --sp-12: 12px;  --sp-16: 16px;
  --sp-24: 24px;   --sp-32: 32px;   --sp-48: 48px;  --sp-64: 64px;
  --sp-80: 80px;   --sp-120: 120px;

  --gutter:  24px;
  --sectiune-y: clamp(56px, 8vw, 120px);
  --container: 1240px;

  /* --- Formă -------------------------------------------------------------- */
  --raza: 2px;

  /* --- Mișcare ------------------------------------------------------------ */
  --tranzitie: 180ms;
  --easing-strat: cubic-bezier(.22, 1, .36, 1);
  --strat-durata: 520ms;
  --strat-decalaj: 130ms;

  /* --- Straturi de suprapunere -------------------------------------------- */
  --z-bara: 90;
  --z-header: 100;
  --z-meniu: 110;
  --z-skip: 200;

  /* --- Dimensiuni fixe ---------------------------------------------------- */
  --h-header: 60px;
  --tinta: 44px;   /* ținta minimă de atingere */
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --h-header: 72px; }
}

/* Secțiunile pe verde închis. Rescriu rolurile, nu culorile. */
.pe-inchis {
  --fundal:        var(--verde-adanc);
  --text:          var(--beton);
  /* Varianta cu color-mix trece de 4.5:1 pe verde adânc; prima linie e
     rezerva pentru browsere vechi. */
  --text-secundar: var(--beton);
  --text-secundar: color-mix(in srgb, var(--beton) 82%, var(--verde-adanc));
  --bordura:       var(--verde-lucru);
  --bordura-forte: var(--verde-semnal);
  --card:          var(--verde-lucru);
  --linie-tehnica: var(--verde-semnal);
  /* Verde-semnal pe verde-adânc dă 3,3:1. Ajunge pentru linii și chenare,
     dar NU pentru text. Numerele trec pe beton. */
  --numar-tehnic:  var(--beton);
  --focus-halou:   var(--beton);

  background: var(--fundal);
  color: var(--text);
}


/* ==========================================================================
   03  BAZĂ ȘI TIPOGRAFIE
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--fundal);
  color: var(--text);
  font-family: var(--font-corp);
  font-size: var(--t-corp);
  line-height: 1.65;
  font-weight: 400;
  /* Rezerva pe prima linie este pentru browserele vechi și, mai important,
     pentru browserul intern al aplicațiilor de social media: WebView-ul din
     Instagram și Facebook raportează greșit înălțimea ferestrei, iar 100vh
     ajunge sub bara aplicației. Unitatea dvh urmărește zona chiar vizibilă. */
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  text-transform: none;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.02em;  line-height: 1.06; }
h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em;  line-height: 1.12; }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.20; }
h4 { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.01em;  line-height: 1.30; }

p { max-width: var(--masura); text-wrap: pretty; }

p + p { margin-top: var(--sp-16); }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

a:hover { text-decoration-color: var(--portocaliu); }

strong, b { font-weight: 600; }

/* Textul introductiv, sub titlu */
.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--text);
}

.text-mic { font-size: var(--t-mic); }

.text-secundar { color: var(--text-secundar); }

/* Supratitlul de secțiune */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

/* Orice cifră care înseamnă ceva: preț, mp, ml, telefon, cod, an. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.cifra {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-cifra);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Portocaliul pe fundal deschis dă 3,11:1 — trece pragul doar la text mare
   (≥24px). Se folosește pentru cifre afișate mare, nu pentru text curent. */
.cifra--accent { color: var(--portocaliu); }

/* Cifra dintr-o notă-cheie.
   `.nota-cheie p` are specificitate mai mare decât `.cifra`, deci îi impunea
   cifrei mărimea textului curent: 15px în loc de 28. Adică exact accentul
   vizual pentru care fusese pusă acolo dispărea, tăcut, fără să arate rupt.
   Găsit măsurând contrastul pe contact.php — raportul a ieșit sub prag tocmai
   pentru că textul era mic, iar pragul pentru text mic e mai sever. */
.nota-cheie .cifra {
  font-size: var(--t-cifra);
  line-height: 1.1;
  margin-bottom: var(--sp-8);
}

/* Listă cu semnale observabile */
.lista-semnale {
  list-style: none;
  display: grid;
  gap: var(--sp-12);
  max-width: var(--masura);
}

.lista-semnale li {
  position: relative;
  padding-left: var(--sp-24);
  border-top: 1px solid var(--bordura);
  padding-top: var(--sp-12);
}

.lista-semnale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sp-12) + 0.72em);
  width: 12px;
  height: 2px;
  background: var(--linie-tehnica);
}

/* Semnal cu titlu și explicație. Titlul poartă îngroșarea din textul
   redacțional; explicația stă dedesubt, în text secundar. */
.semnal__titlu { font-weight: 500; color: var(--text); }

.semnal__text {
  margin-top: var(--sp-4);
  color: var(--text-secundar);
  font-size: var(--t-mic);
}


/* ==========================================================================
   04  LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sectiune {
  padding-block: var(--sectiune-y);
  background: var(--fundal);
  color: var(--text);
}

.sectiune--stransa { padding-block: clamp(40px, 5vw, 64px); }

/* Coloana-marjă: eticheta secțiunii, ca pe o planșă de desen tehnic.
   Pe mobil se pliază deasupra conținutului. */
.marja {
  display: grid;
  gap: var(--sp-24);
}

@media (min-width: 1024px) {
  .marja {
    grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
    gap: 40px;
    align-items: start;
  }
}

.marja__eticheta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  border-top: 2px solid var(--bordura-forte);
  padding-top: var(--sp-12);
}

@media (min-width: 1024px) {
  .marja__eticheta { position: sticky; top: calc(var(--h-header) + var(--sp-24)); }
}

.marja__indicator {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--text-secundar);
  font-variant-numeric: tabular-nums;
}

.marja__continut { min-width: 0; }

/* Grile reutilizabile */
.grila { display: grid; gap: var(--sp-24); }

@media (min-width: 640px)  { .grila--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .grila--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grila--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stiva { display: grid; gap: var(--sp-16); align-content: start; }
.stiva--larga { gap: var(--sp-32); }

.rand-butoane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  align-items: center;
}


/* ==========================================================================
   05  FOCUS ȘI ACCESIBILITATE
   ========================================================================== */

/* Inel dublu de focus.
   Portocaliul singur are doar 2,63:1 pe fundalul de beton, sub pragul
   WCAG de 3:1. Haloul exterior în grafit (sau beton, pe fundal închis)
   garantează contrastul pe orice suprafață din paletă. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--portocaliu);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halou);
  border-radius: var(--raza);
}

:focus:not(:focus-visible) { outline: none; }

/* Sari la conținut */
.skip {
  position: absolute;
  left: var(--sp-16);
  top: -100px;
  z-index: var(--z-skip);
  background: var(--portocaliu);
  color: var(--grafit);
  font-weight: 600;
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--raza);
  transition: top var(--tranzitie) ease-out;
}

.skip:focus { top: var(--sp-16); }

/* Vizibil doar pentru cititoarele de ecran */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   06  HEADER ȘI NAVIGAȚIE
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--verde-adanc);
  color: var(--beton);
  border-bottom: 1px solid var(--verde-lucru);
  --focus-halou: var(--beton);
  --text-secundar: var(--beton);
  --text-secundar: color-mix(in srgb, var(--beton) 82%, var(--verde-adanc));
}

.header__bara {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  height: var(--h-header);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: var(--tinta);   /* ținta de atingere, nu doar înălțimea textului */
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}

.header__logo svg { flex-shrink: 0; }

.header__nume {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--beton);
  white-space: nowrap;
}

.header__nume span { color: var(--portocaliu); }

/* --- Navigația principală, desktop --------------------------------------- */

.nav { display: none; }

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }
}

.nav__link,
.nav__declansator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--tinta);
  padding: 0 var(--sp-12);
  font-size: var(--t-mic);
  font-weight: 500;
  color: var(--beton);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--tranzitie) ease-out,
              border-color var(--tranzitie) ease-out,
              background-color var(--tranzitie) ease-out;
}

.nav__link:hover,
.nav__declansator:hover { border-bottom-color: var(--verde-semnal); }

.nav__link[aria-current="page"] { border-bottom-color: var(--portocaliu); }

.nav__sageata {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--tranzitie) ease-out;
}

.nav__declansator[aria-expanded="true"] .nav__sageata {
  transform: translateY(1px) rotate(-135deg);
}

.nav__grup { position: relative; }

.nav__panou {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--verde-adanc);
  border: 1px solid var(--verde-lucru);
  border-top: 2px solid var(--portocaliu);
  padding: var(--sp-8);
  z-index: var(--z-meniu);
}

.nav__declansator[aria-expanded="true"] + .nav__panou { display: block; }

.nav__panou a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: var(--tinta);
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--t-mic);
  color: var(--beton);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color var(--tranzitie) ease-out,
              border-color var(--tranzitie) ease-out;
}

.nav__panou a:hover {
  background: var(--verde-lucru);
  border-left-color: var(--portocaliu);
}

/* Prețul din meniu este text mic: are nevoie de 4,5:1, nu de 3:1.
   Verde-semnal ar da 3,3:1 și ar pica. */
.nav__panou .mono { color: var(--text-secundar); }

/* --- Acțiunile din dreapta ------------------------------------------------ */

.header__actiuni {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-shrink: 0;
}

.header__telefon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-width: var(--tinta);
  min-height: var(--tinta);
  padding: 0 var(--sp-8);
  color: var(--beton);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  border: 1px solid var(--verde-lucru);
  border-radius: var(--raza);
  transition: border-color var(--tranzitie) ease-out;
}

.header__telefon:hover { border-color: var(--verde-semnal); }

.header__telefon .eticheta { display: none; }

@media (min-width: 480px) { .header__telefon .eticheta { display: inline; } }

/* Sub 768px, butonul de ofertă din header ar înghesui bara. Rămâne
   accesibil din meniul mobil și din bara fixă de jos. */
.header__actiuni .btn {
  display: none;
  min-height: var(--tinta);
  padding: 0 var(--sp-16);
}

@media (min-width: 768px) { .header__actiuni .btn { display: inline-flex; } }

/* Între 1024 și 1279px bara are toate cele șase linkuri, telefonul și butonul
   de ofertă, dar nu și lățimea de la 1440. Fără această strângere, header-ul
   iese din ecran și apare scroll orizontal exact la 1024px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header__bara { gap: var(--sp-8); }
  .nav { gap: 0; }
  .nav__link,
  .nav__declansator { padding: 0 var(--sp-8); font-size: 0.875rem; }
  .header__telefon { gap: var(--sp-4); }
  .header__actiuni { gap: var(--sp-4); }
  .header__actiuni .btn { padding: 0 var(--sp-12); }
}

/* Butonul de meniu, doar pe mobil */
.meniu-buton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--tinta);
  height: var(--tinta);
  border: 1px solid var(--verde-lucru);
  border-radius: var(--raza);
  transition: border-color var(--tranzitie) ease-out;
}

.meniu-buton:hover { border-color: var(--verde-semnal); }

@media (min-width: 1024px) { .meniu-buton { display: none; } }

/* Cele trei linii ale butonului au grosimi diferite: 2 / 3 / 4.
   Este marca stratificației, nu un hamburger oarecare. */
.meniu-buton i {
  display: block;
  width: 20px;
  background: var(--beton);
  transition: transform var(--tranzitie) ease-out, opacity var(--tranzitie) ease-out;
}

.meniu-buton i:nth-child(1) { height: 2px; }
.meniu-buton i:nth-child(2) { height: 3px; }
.meniu-buton i:nth-child(3) { height: 4px; }

.meniu-buton[aria-expanded="true"] i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.meniu-buton[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.meniu-buton[aria-expanded="true"] i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); height: 2px; }

/* --- Meniul mobil --------------------------------------------------------- */

.meniu-mobil {
  display: none;
  position: fixed;
  inset: var(--h-header) 0 0 0;
  z-index: var(--z-meniu);
  background: var(--verde-adanc);
  color: var(--beton);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-24) 0 var(--sp-64);
  --focus-halou: var(--beton);
  --text-secundar: var(--beton);
  --text-secundar: color-mix(in srgb, var(--beton) 82%, var(--verde-adanc));
}

.meniu-mobil[data-deschis="true"] { display: block; }

@media (min-width: 1024px) { .meniu-mobil { display: none !important; } }

.meniu-mobil__grup { border-top: 1px solid var(--verde-lucru); }

.meniu-mobil__grup > a,
.meniu-mobil__grup > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: var(--sp-12) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--beton);
  text-decoration: none;
  text-align: left;
}

.meniu-mobil__sub {
  display: none;
  padding: 0 0 var(--sp-16) var(--sp-16);
  border-left: 2px solid var(--verde-lucru);
  margin-bottom: var(--sp-8);
}

.meniu-mobil__grup > button[aria-expanded="true"] + .meniu-mobil__sub { display: block; }

.meniu-mobil__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: var(--tinta);
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--t-mic);
  color: var(--beton);
  text-decoration: none;
}

.meniu-mobil__sub a:hover { background: var(--verde-lucru); }

.meniu-mobil__sub .mono { color: var(--text-secundar); }

.meniu-mobil .btn { width: 100%; margin-top: var(--sp-24); }

body[data-blocat="true"] { overflow: hidden; }


/* ==========================================================================
   07  BUTOANE
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 48px;
  padding: var(--sp-12) var(--sp-24);
  font-family: var(--font-corp);
  font-size: var(--t-mic);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--raza);
  cursor: pointer;
  transition: background-color var(--tranzitie) ease-out,
              border-color var(--tranzitie) ease-out,
              box-shadow var(--tranzitie) ease-out,
              transform var(--tranzitie) ease-out;
}

/* Primar.
   Text în grafit, nu alb: albul pe portocaliu dă 3,25:1 și pică AA.
   Grafitul pe portocaliu dă 5,2:1 — și este exact colorimetria
   benzii de avertizare de șantier. */
.btn--primar {
  background: var(--portocaliu);
  color: var(--grafit);
}

/* Fără ridicare și fără umbră: se schimbă doar chenarul, pe interior,
   ca să nu miște layoutul cu un pixel. */
.btn--primar:hover { box-shadow: inset 0 0 0 2px var(--grafit); }

.btn--secundar {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.btn--secundar:hover { box-shadow: inset 0 0 0 1px var(--text); }

.pe-inchis .btn--secundar:hover { background: var(--verde-lucru); }

.btn--fantoma {
  background: transparent;
  color: var(--text);
  border-color: var(--bordura);
  font-weight: 500;
}

.btn--fantoma:hover { border-color: var(--bordura-forte); }

.btn:active { transform: translateY(1px); }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--lat { width: 100%; }

/* Săgeata din butoanele-link */
.btn .sageata, .card__link .sageata {
  display: inline-block;
  width: 0.7em; height: 0.7em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--tranzitie) ease-out;
}

.card:hover .sageata, .btn:hover .sageata { transform: rotate(45deg) translate(2px, -2px); }


/* ==========================================================================
   08  CARDURI
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  background: var(--card);
  border: 1px solid var(--bordura);
  border-radius: var(--raza);
  padding: var(--sp-24);
  transition: border-color var(--tranzitie) ease-out,
              box-shadow var(--tranzitie) ease-out;
}

/* Bordura activă e de 2px, dar se compune din chenarul de 1px plus un
   contur interior de 1px. Nimic nu se mișcă la hover. */
.card:hover,
.card:focus-within {
  border-color: var(--bordura-forte);
  box-shadow: inset 0 0 0 1px var(--bordura-forte);
}

.card__antet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.card__spec {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secundar);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card__spec b { color: var(--text); font-weight: 500; }

.card p { color: var(--text-secundar); font-size: var(--t-mic); }

.card__link {
  margin-top: auto;
  padding-top: var(--sp-8);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--tinta);   /* pe cardurile care nu sunt integral clicabile,
                                 linkul este singura țintă de atingere */
  font-size: var(--t-mic);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

/* Cardul întreg devine clicabil, dar linkul rămâne singurul element focusabil. */
.card--clicabil { position: relative; }

.card--clicabil .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Cardul sistemului descris pe pagina curentă, în comparativ. */
.card--activ {
  border-color: var(--bordura-forte);
  box-shadow: inset 0 0 0 1px var(--bordura-forte);
}

.card--lat { grid-column: 1 / -1; }

@media (min-width: 640px) { .card--lat { grid-column: span 2; } }


/* ==========================================================================
   09  CASETĂ DE TITLU, BANDĂ DE DATE, ETICHETE
   ========================================================================== */

/* Caseta de titlu: convenția de pe planșele de execuție.
   Închide hero-ul și poartă informația tehnică. */
.caseta-titlu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-24);
  border-top: 1px solid var(--bordura);
  border-bottom: 1px solid var(--bordura);
  padding: var(--sp-12) 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secundar);
  font-variant-numeric: tabular-nums;
}

.caseta-titlu b { color: var(--text); font-weight: 500; }

.caseta-titlu__sep {
  width: 4px; height: 4px;
  background: var(--linie-tehnica);
  flex-shrink: 0;
}

/* Banda de date: trei fapte reale, pe un rând, aliniate la marjă. */
.banda-date {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-32);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.banda-date > * {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.banda-date > * + *::before {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--bordura);
  display: none;
}

@media (min-width: 768px) { .banda-date > * + *::before { display: block; } }

/* Notă evidențiată: deplasarea și deducerea. */
.nota-cheie {
  border: 1px solid var(--bordura);
  border-left: 4px solid var(--portocaliu);
  background: var(--card);
  padding: var(--sp-16) var(--sp-24);
  border-radius: var(--raza);
  max-width: 60ch;
}

.nota-cheie p { font-size: var(--t-mic); }

/* Etichetă mică, tehnică */
.eticheta-tehnica {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secundar);
  border: 1px solid var(--bordura);
  border-radius: var(--raza);
  padding: var(--sp-4) var(--sp-8);
}


/* ==========================================================================
   10  TABEL DE SPECIFICAȚII
   ========================================================================== */

.tabel-spec {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
  background: var(--card);
  border: 1px solid var(--bordura);
  border-radius: var(--raza);
}

.tabel-spec th,
.tabel-spec td {
  text-align: left;
  padding: var(--sp-12) var(--sp-16);
  border-bottom: 1px solid var(--bordura);
}

.tabel-spec tr:last-child th,
.tabel-spec tr:last-child td { border-bottom: 0; }

.tabel-spec th {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secundar);
}

.tabel-spec td { font-weight: 500; color: var(--text); }

.tabel-spec .valoare { text-align: right; white-space: nowrap; }

.tabel-scroll { overflow-x: auto; }


/* ==========================================================================
   11  ÎNTREBĂRI FRECVENTE
   ========================================================================== */

.faq { border-top: 1px solid var(--bordura); max-width: 72ch; }

.faq details { border-bottom: 1px solid var(--bordura); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 56px;
  padding: var(--sp-16) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--tranzitie) ease-out;
}

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--linie-tehnica);
  border-bottom: 2px solid var(--linie-tehnica);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--tranzitie) ease-out;
}

.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.faq details > div {
  padding-bottom: var(--sp-24);
  color: var(--text-secundar);
  font-size: var(--t-mic);
  max-width: var(--masura);
}


/* ==========================================================================
   12  FORMULARE
   ========================================================================== */

.camp { display: grid; gap: var(--sp-8); margin-bottom: var(--sp-24); }

.camp label {
  font-size: var(--t-mic);
  font-weight: 600;
  color: var(--text);
}

.camp label .obligatoriu { color: var(--portocaliu); margin-left: 2px; }

.camp .ajutor {
  font-size: var(--t-mono);
  color: var(--text-secundar);
  line-height: 1.5;
}

.camp input[type="text"],
.camp input[type="tel"],
.camp input[type="email"],
.camp input[type="number"],
.camp input[type="file"],
.camp select,
.camp textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-12) var(--sp-16);
  background: var(--alb);
  color: var(--grafit);
  border: 1px solid var(--beton-inchis);
  border-radius: var(--raza);
  font-size: 1rem;  /* minim 16px: sub această valoare iOS mărește pagina singur */
  transition: border-color var(--tranzitie) ease-out;
}

.camp textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.camp select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--grafit) 50%),
    linear-gradient(135deg, var(--grafit) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.camp input:hover, .camp select:hover, .camp textarea:hover { border-color: var(--grafit-mediu); }

/* Stare de eroare.
   Culoarea --eroare apare NUMAI aici. Portocaliul rămâne rezervat
   acțiunii principale și focusului, ca să nu se confunde „apasă asta"
   cu „ai greșit asta".
   Marcajul nu depinde niciodată doar de culoare: chenar de 2px, bandă
   pe muchia din stânga, semn triunghiular și aria-invalid pe câmp. */
.camp[data-eroare="true"] input,
.camp[data-eroare="true"] select,
.camp[data-eroare="true"] textarea {
  border: 2px solid var(--eroare);
  box-shadow: inset 4px 0 0 var(--eroare);
}

.camp .eroare {
  display: none;
  align-items: flex-start;
  gap: var(--sp-8);
  font-size: var(--t-mono);
  font-weight: 500;
  color: var(--eroare);
}

.camp[data-eroare="true"] .eroare { display: flex; }

.camp .eroare::before {
  content: "▲";
  font-size: 0.7em;
  line-height: 1.9;
  flex-shrink: 0;
}

/* Câmp preluat din calculator */
.camp[data-preluat="true"] input,
.camp[data-preluat="true"] select {
  border-color: var(--verde-adanc);
  box-shadow: inset 0 0 0 1px var(--verde-adanc);
}

.camp[data-preluat="true"] label::after {
  content: "preluat din calculator";
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verde-adanc);
  margin-left: var(--sp-8);
}

/* Bifă */
.bifa {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-12);
  align-items: start;
  min-height: var(--tinta);
  padding-block: var(--sp-8);
  font-size: var(--t-mic);
  cursor: pointer;
}

/* 24px este minimul WCAG pentru o țintă de atingere. Eticheta din jur
   este oricum clicabilă, deci suprafața reală este mai mare. */
.bifa input[type="checkbox"] {
  width: 24px; height: 24px;
  margin: 1px 0 0;
  accent-color: var(--portocaliu);
  cursor: pointer;
}

/* Capcana pentru roboți: invizibilă pentru om, prezentă în cod. */
.capcana {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Anunț pentru cititoarele de ecran */
.anunt-formular:empty { display: none; }

.anunt-formular {
  border: 1px solid var(--eroare);
  border-left: 4px solid var(--eroare);
  background: var(--alb);
  padding: var(--sp-12) var(--sp-16);
  margin-bottom: var(--sp-24);
  font-size: var(--t-mic);
  border-radius: var(--raza);
}


/* ==========================================================================
   13  FIRIMITURI
   ========================================================================== */

.firimituri {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--text-secundar);
  /* Padding mic pe container: înălțimea o dau linkurile, care trebuie să fie
     ținte de atingere de 44px. Altfel bara ar ajunge la 76px degeaba. */
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--bordura);
}

.firimituri ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-8);
  list-style: none;
}

.firimituri li { display: flex; align-items: center; }

.firimituri li + li::before { content: "›"; margin-right: var(--sp-8); }

/* Firimiturile sunt text mic, dar rămân linkuri: pe telefon trebuie să poată
   fi apăsate fără să nimerești alături. */
.firimituri a,
.firimituri [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--tinta);
  color: inherit;
  text-decoration: none;
}

.firimituri a:hover { text-decoration: underline; }

.firimituri [aria-current="page"] { color: var(--text); }


/* ==========================================================================
   14  STRATIFICAȚIA
   Elementul-semnătură. Singurul lucru de pe site care se mișcă.
   ========================================================================== */

.stratificatie {
  width: 100%;
  border: 1px solid var(--bordura);
  border-radius: var(--raza);
  background: color-mix(in srgb, var(--fundal) 92%, var(--grafit));
  padding: var(--sp-16);
}

.stratificatie svg { width: 100%; height: auto; }

/* ATENȚIE la mărimea textului din SVG.
   Unitățile de aici sunt unități de viewBox, nu pixeli de ecran: se
   micșorează odată cu desenul. La o lățime randată de 496px dintr-un
   viewBox de 640, 13 unități ajung la 10px pe ecran. De aceea textul
   din desen este declarat la 17, nu la 13. */
.stratificatie__eticheta {
  font-family: var(--font-mono);
  font-size: 17px;
  fill: var(--text-secundar);
  letter-spacing: 0.02em;
}

.stratificatie__nume { fill: var(--text); font-weight: 500; }

.stratificatie__numar {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  fill: var(--numar-tehnic);
}

/* Varianta compactă: viewBox mai îngust, deci scala e aproape 1:1. */
.stratificatie--compact .stratificatie__numar { font-size: 15px; }

.stratificatie__linie {
  stroke: var(--linie-tehnica);
  stroke-width: 1;
  fill: none;
}

/* Sub 768px etichetele din desen ar coborî sub 8px și ar deveni ilizibile.
   Se ascund, iar straturile se citesc din lista de dedesubt. */
.stratificatie__lista {
  list-style: none;
  counter-reset: strat;
  margin-top: var(--sp-16);
  border-top: 1px solid var(--bordura);
}

.stratificatie__lista li {
  counter-increment: strat;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-8) var(--sp-12);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--bordura);
  font-size: var(--t-mono);
  font-family: var(--font-mono);
}

.stratificatie__lista li::before {
  content: counter(strat);
  color: var(--numar-tehnic);
  font-weight: 500;
  min-width: 1.5em;
}

.stratificatie__lista-nume { color: var(--text); font-weight: 500; }
.stratificatie__lista-nota { color: var(--text-secundar); }

.stratificatie__legenda {
  margin-top: var(--sp-12);
  color: var(--text-secundar);
}

/* În varianta normală lista e o rezervă pentru ecrane mici, unde etichetele
   din desen s-ar micșora prea mult. În varianta compactă lista NU e o
   rezervă: e singurul loc unde scrie ce reprezintă fiecare bandă. */
@media (min-width: 768px) {
  .stratificatie:not(.stratificatie--compact) .stratificatie__lista { display: none; }
}

@media (max-width: 767px) {
  .stratificatie__eticheta,
  .stratificatie__linie { display: none; }
}

/* Straturile se construiesc de jos în sus, ca la execuție.
   6 straturi × 130 ms decalaj + 520 ms durată = 1,17 s până la final. */
.strat { transform-origin: 50% 100%; }

/* Fără JavaScript, straturile sunt vizibile din start. Ascunderea se face
   doar după ce scriptul confirmă că poate anima — altfel conținutul ar
   rămâne invizibil la utilizatorii fără JS. */
.js .stratificatie[data-anim="pregatit"] .strat { opacity: 0; }

.js .stratificatie[data-anim="pornit"] .strat {
  animation: ridica-strat var(--strat-durata) var(--easing-strat) both;
  animation-delay: calc(var(--i, 0) * var(--strat-decalaj));
}

.js .stratificatie[data-anim="pregatit"] .stratificatie__linie,
.js .stratificatie[data-anim="pregatit"] .stratificatie__eticheta,
.js .stratificatie[data-anim="pregatit"] .stratificatie__numar { opacity: 0; }

.js .stratificatie[data-anim="pornit"] .stratificatie__linie,
.js .stratificatie[data-anim="pornit"] .stratificatie__eticheta,
.js .stratificatie[data-anim="pornit"] .stratificatie__numar {
  animation: apare-eticheta 300ms ease-out both;
  animation-delay: calc(var(--i, 0) * var(--strat-decalaj) + 260ms);
}

@keyframes ridica-strat {
  from { opacity: 0; transform: translateY(18px) scaleY(0.62); }
  to   { opacity: 1; transform: none; }
}

@keyframes apare-eticheta {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   15  FOOTER
   ========================================================================== */

.footer {
  background: var(--verde-adanc);
  color: var(--beton);
  --text: var(--beton);
  --text-secundar: color-mix(in srgb, var(--beton) 82%, var(--verde-adanc));
  --bordura: var(--verde-lucru);
  --focus-halou: var(--beton);
  padding-block: var(--sp-64) var(--sp-32);
}

.footer__grila {
  display: grid;
  gap: var(--sp-32);
  padding-bottom: var(--sp-32);
  border-bottom: 1px solid var(--verde-lucru);
}

@media (min-width: 768px)  { .footer__grila { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grila { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer h2, .footer h3 { color: var(--beton); }

.footer__titlu {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secundar);
  margin-bottom: var(--sp-16);
}

.footer ul { list-style: none; display: grid; gap: var(--sp-8); }

.footer a {
  color: var(--beton);
  text-decoration: none;
  font-size: var(--t-mic);
  display: inline-flex;
  align-items: center;
  min-height: var(--tinta);   /* footerul e ultimul loc unde vrei să ratezi un link */
}

.footer a:hover { text-decoration: underline; text-decoration-color: var(--portocaliu); }

.footer__legal {
  padding-top: var(--sp-24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-24);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--text-secundar);
}

.footer__legal a { font-family: var(--font-mono); font-size: var(--t-mono); }


/* ==========================================================================
   16  BARA FIXĂ DE ACȚIUNE (MOBIL)
   Apare după ce utilizatorul a coborât în pagină. Telefonul și oferta
   rămân la un deget distanță, fără să acopere conținutul de la început.
   ========================================================================== */

.bara-actiune {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bara);
  display: none;
  gap: 1px;
  background: var(--verde-lucru);
  border-top: 1px solid var(--verde-lucru);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform var(--tranzitie) ease-out;
  --focus-halou: var(--beton);
}

@media (max-width: 1023px) { .bara-actiune { display: grid; grid-template-columns: 1fr 1fr; } }

.bara-actiune[data-vizibil="true"] { transform: none; }

/* Cât timp tastatura este deschisă, bara ar sta peste câmpul pe care îl
   completează utilizatorul sau peste butonul de trimitere. Se retrage. */
.bara-actiune[data-tastatura="true"] { transform: translateY(100%); }

.bara-actiune a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 52px;
  font-size: var(--t-mic);
  font-weight: 600;
  text-decoration: none;
}

.bara-actiune .suna { background: var(--verde-adanc); color: var(--beton); }
.bara-actiune .oferta { background: var(--portocaliu); color: var(--grafit); }

/* Conținutul nu trebuie să rămână ascuns sub bară. Se adaugă și zona de
   siguranță de jos a telefoanelor cu gest de navigare, altfel ultimul rând
   din footer intră sub bara sistemului. */
/* 52px linkul + 1px chenarul de sus = 53px. Rezervăm 56px, ca ultimul rând
   din footer să nu atingă bara. Măsurat, nu estimat. */
@media (max-width: 1023px) {
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* Browserul intern din Instagram și Facebook.
   Aplicația își pune propria bară peste conținutul paginii, iar bara
   noastră fixă poate ajunge parțial sub ea. Adăugăm o rezervă suplimentară
   și mărim corespunzător spațiul rezervat în josul paginii.

   ATENȚIE: valoarea de 16px este o marjă de siguranță aleasă prudent, NU o
   măsurătoare. Comportamentul real se poate verifica doar pe telefon, cu
   linkul deschis din aplicație. Vezi LANSARE.md, secțiunea de teste pe
   dispozitiv. */
.webview-social .bara-actiune {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

@media (max-width: 1023px) {
  .webview-social { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Pe paginile cu formular bara nu apare deloc: butonul de trimitere este
   deja acțiunea principală, iar două CTA-uri concurente încurcă. */
.fara-bara-actiune .bara-actiune { display: none !important; }

@media (max-width: 1023px) {
  .fara-bara-actiune { padding-bottom: env(safe-area-inset-bottom, 0px); }
}


/* ==========================================================================
   17  UTILITARE
   ========================================================================== */

.nowrap { white-space: nowrap; }
.centrat { text-align: center; }
.masura { max-width: var(--masura); }
.masura-ingusta { max-width: 52ch; }

.separator {
  border: 0;
  border-top: 1px solid var(--bordura);
  margin-block: var(--sp-32);
}

.mt-8  { margin-top: var(--sp-8); }
/* ==========================================================================
   COMPARAȚIA ÎNAINTE / DUPĂ
   --------------------------------------------------------------------------
   Starea implicită, FĂRĂ clasa .ind--activ, este „două imagini una sub alta".
   Aceea e varianta pe care o vede cine are JavaScript oprit, și e o variantă
   completă: ambele imagini, ambele etichete. Suprapunerea se adaugă abia când
   scriptul pornește și pune .ind--activ.
   ========================================================================== */

.ind { display: grid; gap: var(--sp-8); }

.ind__cadru { display: grid; gap: var(--sp-8); }

.ind__strat { position: relative; }

.ind__strat img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--raza);
}

.ind__eticheta {
  position: absolute;
  bottom: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--grafit);
  color: var(--beton);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--raza);
}

.ind__eticheta--stanga  { left: var(--sp-8); }
.ind__eticheta--dreapta { right: var(--sp-8); }

/* Fără JavaScript nu există mâner de tras: se ascunde, ca să nu apară un
   control care nu face nimic. */
.ind__maner, .ind__linie { display: none; }

/* --- Varianta interactivă ------------------------------------------------- */

.ind--activ .ind__cadru {
  position: relative;
  display: block;
  touch-action: pan-y;      /* tragerea orizontală e a mânerului, nu a paginii */
}

.ind--activ .ind__strat {
  position: absolute;
  inset: 0;
}

/* Stratul de dedesubt dă înălțimea cadrului: rămâne în flux. */
.ind--activ .ind__strat--dupa { position: relative; }

.ind--activ .ind__strat img { border-radius: 0; }
.ind--activ .ind__cadru { border-radius: var(--raza); overflow: hidden; }

.ind--activ .ind__linie {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--alb);
  box-shadow: 0 0 0 1px var(--grafit);
  pointer-events: none;
}

/* Mânerul: un range nativ, întins peste toată imaginea, cu pista invizibilă.
   Nativ înseamnă că tastatura, atingerea și cititoarele de ecran funcționează
   fără nicio linie de cod scrisă de noi. */
.ind--activ .ind__maner {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}

.ind--activ .ind__maner::-webkit-slider-runnable-track { background: transparent; }
.ind--activ .ind__maner::-moz-range-track { background: transparent; }

/* Butonul de tras. 44px, ca orice altă țintă de atingere — vezi capcana 9. */
.ind--activ .ind__maner::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--alb);
  border: 2px solid var(--grafit);
  cursor: ew-resize;
}

.ind--activ .ind__maner::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--alb);
  border: 2px solid var(--grafit);
  cursor: ew-resize;
}

/* Focusul se vede pe cadru, nu pe pista invizibilă: altfel inelul de focus ar
   fi desenat în jurul unui dreptunghi transparent, deci nicăieri. */
.ind--activ .ind__maner:focus-visible {
  outline: none;
}

.ind--activ .ind__cadru:has(.ind__maner:focus-visible) {
  outline: 2px solid var(--portocaliu);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halou);
}

.ind figcaption {
  font-size: var(--t-mic);
  color: var(--text-secundar);
}

/* ==========================================================================
   PORTOFOLIU — filtre și carduri de lucrare
   ========================================================================== */

/* Filtrele sunt LEGĂTURI, nu butoane de JavaScript: funcționează cu JS oprit,
   se deschid în tab nou, iar fiecare filtru are adresa lui, care se poate
   trimite mai departe. Un filtru care există doar în memoria paginii nu se
   poate da nimănui. */
.filtre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
}

.filtre__optiune {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;              /* țintă de atingere; vezi capcana 9 */
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid var(--bordura);
  border-radius: var(--raza);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-size: var(--t-mic);
}

.filtre__optiune:hover { border-color: var(--bordura-forte); }

/* Starea activă NU se transmite doar prin culoare: chenarul se îngroașă și
   fundalul se schimbă, iar aria-current o anunță cititoarelor de ecran. */
.filtre__optiune--activ {
  border-color: var(--bordura-forte);
  box-shadow: inset 0 0 0 1px var(--bordura-forte);
  font-weight: 600;
}

.filtre__numar {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--text-secundar);
  font-variant-numeric: tabular-nums;
}

.filtre__optiune--activ .filtre__numar { color: var(--text); }

.card__titlu { font-size: var(--t-h4); }

/* Nota care însoțește o listă de servicii cu prețuri: condiția de suprafață.
   Se scrie o singură dată, în nota_prag_lista() din functions.php, și apare
   sub fiecare listă — meniuri, grile, aplicații înrudite. Discretă: e o
   precizare, nu un avertisment, deci nu folosește --eroare. */
.nota-prag {
  font-size: var(--t-mic);
  color: var(--text-secundar);
  margin-top: var(--sp-16);
}

/* Varianta din meniuri, unde spațiul e strâns. */
.nav__nota {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--text-secundar);
  padding: var(--sp-8) var(--sp-16) var(--sp-4);
  border-top: 1px solid var(--bordura);
  margin-top: var(--sp-4);
}

.mt-16 { margin-top: var(--sp-16); }
.mt-24 { margin-top: var(--sp-24); }
.mt-32 { margin-top: var(--sp-32); }
.mt-48 { margin-top: var(--sp-48); }


/* ==========================================================================
   18  PAGINA DE ACASĂ
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 56px); }

.hero__grila { display: grid; gap: var(--sp-32); align-items: center; }

/* Pragul este 1200px, nu 1024px, și motivul e de lizibilitate, nu de estetică.
   Textul dintr-un SVG se micșorează odată cu desenul. La 1024px, o coloană
   de hero lasă desenului circa 384px, iar etichetele ajung la 10px.
   Sub 1200px hero-ul rămâne pe o singură coloană, cu desenul plafonat la
   640px — exact lățimea viewBox-ului, deci etichetele se randează 1:1. */
@media (min-width: 1200px) {
  .hero__grila { grid-template-columns: 1.04fr 0.96fr; gap: 56px; }
}

.hero__desen { max-width: 640px; margin-inline: auto; width: 100%; }

.hero__continut { display: grid; gap: var(--sp-24); align-content: start; }

.hero .lead { max-width: 52ch; }

/* Caseta de titlu închide hero-ul pe toată lățimea, ca antetul unei planșe. */
.hero .caseta-titlu { margin-top: clamp(32px, 5vw, 56px); }

/* --- Bara de credibilitate ------------------------------------------------ */

.credibilitate { padding-block: var(--sp-24); border-bottom: 1px solid var(--bordura); }

/* --- Cele două sisteme ---------------------------------------------------- */

.sistem { display: flex; flex-direction: column; gap: var(--sp-16); }

.sistem .stratificatie { background: transparent; border: 0; padding: 0; }

.sistem__concluzie {
  border-top: 1px solid var(--bordura);
  padding-top: var(--sp-12);
  display: grid;
  gap: var(--sp-4);
}

.sistem__concluzie dt {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secundar);
}

.sistem__concluzie dd { font-size: var(--t-mic); margin: 0; }

/* --- Cum lucrăm ----------------------------------------------------------- */
/* Singurul loc din site cu numerotare. Este o secvență reală de etape,
   nu o listă de servicii. */

.proces { list-style: none; display: grid; }

.proces__pas {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8) var(--sp-24);
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--bordura);
}

.proces__pas:last-child { border-bottom: 1px solid var(--bordura); }

.proces__numar {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--numar-tehnic);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
}

.proces__titlu { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); }

.proces__text { color: var(--text-secundar); font-size: var(--t-mic); max-width: 62ch; }

.proces .nota-cheie { margin-top: var(--sp-16); grid-column: 2; }

@media (max-width: 479px) {
  .proces .nota-cheie { grid-column: 1 / -1; }
}

/* --- Desenul de pe pagina de serviciu -------------------------------------
   Aceeași limită ca la hero: 640px este lățimea viewBox-ului, deci textul
   din desen se randează cel mult 1:1 și niciodată mai mic decât 12,5px. */

.serviciu__desen { max-width: 640px; width: 100%; }

/* --- Etapele de execuție (paginile de serviciu) ---------------------------
   Este o secvență reală, deci marcajul este <ol>. Dar NU primește numere
   vizibile: numerotarea afișată e rezervată secțiunii „Cum lucrăm" de pe
   pagina de acasă. Cititoarele de ecran primesc oricum ordinea corectă. */

.etape { list-style: none; display: grid; }

.etape > li {
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--bordura);
  display: grid;
  gap: var(--sp-8);
}

.etape > li:last-child { border-bottom: 1px solid var(--bordura); }

.etape__titlu { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); }

.etape__text { color: var(--text-secundar); font-size: var(--t-mic); max-width: 62ch; }

/* --- Alte aplicații, la finalul paginii de serviciu ------------------------ */

.alte-aplicatii {
  display: grid;
  gap: var(--sp-12);
  border-top: 1px solid var(--bordura);
  padding-top: var(--sp-24);
}

@media (min-width: 640px) {
  .alte-aplicatii { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.alte-aplicatii a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  min-height: var(--tinta);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--bordura);
  border-radius: var(--raza);
  background: var(--card);
  text-decoration: none;
  font-size: var(--t-mic);
  font-weight: 600;
  transition: border-color var(--tranzitie) ease-out;
}

.alte-aplicatii a:hover { border-color: var(--bordura-forte); }

.alte-aplicatii .mono { color: var(--text-secundar); font-weight: 500; }

/* --- Materiale ------------------------------------------------------------ */
/* Listă tipografică, nu logouri: nu avem drept de utilizare a mărcilor. */

.materiale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12) var(--sp-32);
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.25rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--bordura);
  border-bottom: 1px solid var(--bordura);
  padding-block: var(--sp-24);
}

/* --- Banda către calculator ----------------------------------------------- */

.banda-cta { display: grid; gap: var(--sp-24); align-items: center; }

@media (min-width: 900px) {
  .banda-cta { grid-template-columns: 1fr auto; gap: var(--sp-48); }
}

.banda-cta h2 { max-width: 20ch; }

/* --- Calculatorul --------------------------------------------------------- */

.calc { display: grid; gap: var(--sp-32); align-items: start; }

@media (min-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-48); }
  .calc__iesire { position: sticky; top: calc(var(--h-header) + var(--sp-24)); }
}

.calc__form .camp:last-of-type { margin-bottom: 0; }

.calc__grup { border: 0; padding: 0; margin: 0 0 var(--sp-24); display: grid; gap: var(--sp-8); }

.calc__grup legend {
  font-size: var(--t-mic);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--sp-8);
}

.calc__grup .bifa { min-height: var(--tinta); align-items: center; }

.calc__tooltip { display: block; margin-top: var(--sp-4); }

.calc__iesire {
  background: var(--card);
  border: 1px solid var(--bordura);
  border-top: 2px solid var(--verde-adanc);
  border-radius: var(--raza);
  padding: var(--sp-24);
}

.calc__gol { color: var(--text-secundar); font-size: var(--t-mic); }

.calc__tabel {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-16);
}

.calc__tabel th,
.calc__tabel td {
  text-align: left;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--bordura);
  font-weight: 500;
  vertical-align: baseline;
}

.calc__tabel th { color: var(--text-secundar); }
.calc__cant { color: var(--text-secundar); white-space: nowrap; }
.calc__val  { text-align: right; white-space: nowrap; color: var(--text); }

.calc__tabel--secundar { margin-top: var(--sp-24); }

.calc__total {
  border-top: 2px solid var(--verde-adanc);
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
}

.calc__total-eticheta {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secundar);
}

.calc__lei { color: var(--text-secundar); }

.calc__nota {
  font-size: var(--t-mono);
  line-height: 1.55;
  color: var(--text);
  border-left: 2px solid var(--bordura-forte);
  padding-left: var(--sp-12);
  margin-top: var(--sp-16);
}

.calc__deplasare {
  margin-top: var(--sp-24);
  border: 1px solid var(--bordura);
  border-left: 4px solid var(--portocaliu);
  padding: var(--sp-16);
  border-radius: var(--raza);
}

.calc__deplasare p { font-size: var(--t-mic); }
.calc__deplasare .mono { color: var(--text-secundar); }

.calc__disclaimer {
  margin-top: var(--sp-16);
  font-size: var(--t-mono);
  line-height: 1.55;
  color: var(--text-secundar);
}

.calc__cta { margin-top: var(--sp-24); }

/* --- Testimoniale (apar automat când array-ul se populează) --------------- */

.testimonial {
  border-left: 2px solid var(--bordura-forte);
  padding-left: var(--sp-24);
  max-width: 62ch;
}

.testimonial blockquote { font-size: var(--t-lead); line-height: 1.5; }

.testimonial figcaption {
  margin-top: var(--sp-12);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--text-secundar);
}


/* ==========================================================================
   18b  HARTA ZONEI DE ACOPERIRE  (contact.php)
   --------------------------------------------------------------------------
   Desenată în pagină, ca SVG. Nicio hartă încorporată de la un serviciu
   extern: ar aduce câteva sute de kiloocteți de JavaScript și, mai ales, o
   cerere către alt domeniu — exact ce s-a eliminat mutând fonturile pe
   serverul nostru. Vezi regula 12 din tools/verifica-continut.php.

   Conturul e schematic. Nu se folosește pentru a măsura nimic, iar pagina
   scrie asta sub desen.
   ========================================================================== */

.harta {
  margin: 0;
  max-width: 46rem;
}

.harta__desen {
  display: block;
  width: 100%;
  height: auto;
  /* Desenul trebuie să respire: pe fundal închis, conturul deschis are nevoie
     de spațiu ca să nu pară lipit de textul de deasupra. */
  margin-block: var(--sp-8);
  overflow: visible;
}

/* Restul țării: prezent, dar retras. */
.harta__tara {
  fill: var(--verde-lucru);
  stroke: var(--verde-semnal);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Zona principală. Haloul dă suprafață, punctul dă poziția exactă. */
.harta__halou {
  fill: var(--portocaliu);
  opacity: 0.28;
}

.harta__centru {
  fill: var(--portocaliu);
  stroke: var(--verde-adanc);
  stroke-width: 3;
}

.harta__linie {
  stroke: var(--portocaliu);
  stroke-width: 2;
}

.harta__capat { fill: var(--portocaliu); }

.harta__eticheta {
  fill: var(--beton);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
}

/* --verde-semnal pe --verde-adanc dă un contrast de 2,3:1 — sub prag pentru
   text. Se folosește culoarea de bordură, care e deschisă. */
.harta__sub {
  fill: var(--beton-inchis);
  font-family: var(--font-mono);
  font-size: 21px;
}

.harta__nota { margin-top: var(--sp-8); }

/* Sub 640px, silueta se strânge atât de mult încât eticheta din dreapta ar
   deveni ilizibilă. Se ascunde tot indicatorul — aceeași informație e scrisă
   în text imediat sub hartă, la „Zona principală". */
@media (max-width: 640px) {
  .harta__eticheta,
  .harta__sub,
  .harta__capat,
  .harta__linie { display: none; }

  /* Fără etichetă, sfertul din dreapta al desenului rămâne gol. viewBox nu se
     poate schimba din CSS, deci se taie: figura ascunde ce iese, iar desenul
     se lățește exact cât să iasă din cadru partea goală (980 ÷ 800 = 1,225).
     `overflow: visible` de mai sus s-ar bate cap în cap cu asta, de aceea se
     anulează aici. */
  .harta { overflow: hidden; }
  .harta__desen { width: 122.5%; overflow: hidden; }
}

/* Contrast forțat: fără culori de umplere, harta ar deveni o pată. Se
   păstrează conturul, singurul lucru care mai poartă informație. */
@media (forced-colors: active) {
  .harta__tara   { fill: Canvas; stroke: CanvasText; }
  .harta__centru { fill: Highlight; stroke: CanvasText; }
  .harta__halou  { fill: none; stroke: CanvasText; stroke-width: 2; }
}


/* ==========================================================================
   18c  GALERIA UNUI PROIECT
   --------------------------------------------------------------------------
   Grilă simplă, o coloană pe mobil, două de la 700px. Fiecare fotografie e un
   link către varianta mare — fără vizualizator, fără JavaScript: browserul o
   deschide singur, iar înapoi se ajunge cu butonul obișnuit.
   ========================================================================== */

.galerie {
  display: grid;
  gap: var(--sp-24);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}

.galerie__item { margin: 0; }

.galerie__item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bordura);
  background: var(--card);
}

.galerie__item a:focus-visible img { outline: 3px solid var(--focus-halou); outline-offset: 2px; }

.galerie__item figcaption {
  margin-top: var(--sp-8);
  font-size: var(--t-mono);
  color: var(--text-secundar);
}


/* ==========================================================================
   19  MIȘCARE REDUSĂ, PRINT, CONTRAST FORȚAT
   ========================================================================== */

/* Dacă utilizatorul a cerut mai puțină mișcare, site-ul stă complet pe loc.
   Stratificația se afișează întreagă, instantaneu. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .stratificatie[data-anim] .strat,
  .js .stratificatie[data-anim] .stratificatie__linie,
  .js .stratificatie[data-anim] .stratificatie__eticheta,
  .js .stratificatie[data-anim] .stratificatie__numar {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .bara-actiune[data-vizibil="true"] { transform: none; }
}

/* Modul cu contrast forțat din Windows: chenarele trebuie să rămână vizibile. */
@media (forced-colors: active) {
  .btn, .card, .camp input, .camp select, .camp textarea { border: 1px solid; }
  :focus-visible { outline: 3px solid; }
}

@media print {
  .header, .footer, .bara-actiune, .meniu-mobil, .skip { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .sectiune { padding-block: 12mm; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}