@charset "UTF-8";
/* ===========================================================================
   Nion 2026 — foaia de stil a site-ului
   „Tricolor modern" — vezi docs/04_DESIGN_SYSTEM.md

   Un singur fișier, servit comprimat și cache-uit un an (numele poartă ?v=mtime).
   Fără framework: tot ce e aici e folosit, nimic nu e mort.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokeni
   --------------------------------------------------------------------------- */

:root {
  /* Culorile de brand, luate din cele trei brațe ale logo-ului */
  --nion-albastru: #1B62C4;
  --nion-albastru-inchis: #14498F;
  --nion-galben: #F2A31C;
  --nion-rosu: #DC3A1E;

  /* Cărămiziul de lână: culoarea motivului pe fondurile deschise. Auriul de
     marcă dispare pe crem, iar roșul de marcă e prea aprins pentru o textură
     de fundal. Ăsta e roșul stins al scoarțelor vechi, vopsite cu roibă. */
  --caramiziu: #A8422A;

  /* Tricolorul oficial — folosit exclusiv în banda de 3px de sus */
  --ro-albastru: #002B7F;
  --ro-galben: #FCD116;
  --ro-rosu: #CE1126;

  /* Neutre */
  --cerneala: #0B1020;      /* albastru-nocturn, nu negru pur */
  --cerneala-2: #141B2E;
  --cerneala-3: #1D2740;
  --in: #F7F4EE;            /* off-white cald, ca pânza de in */
  --in-2: #EDE8DE;
  --text-inchis: #12172A;
  --text-deschis: #F2F5FA;
  --text-slab: #8B94A8;
  --text-slab-pe-deschis: #5C6479;
  --verde-ok: #1E9E62;
  --verde-whatsapp: #25D366;
  --albastru-telegram: #229ED9;

  /* Culorile active ale secțiunii curente. Se rescriu pe .sectiune--deschisa,
     ca aceleași componente să funcționeze pe ambele fundaluri. */
  --fundal: var(--cerneala);
  --text: var(--text-deschis);
  --text-secundar: var(--text-slab);
  --separator: rgba(255, 255, 255, .10);
  --card-fundal: var(--cerneala-2);

  /* Fundalul din spatele motivelor. Rombul are un „ochi" decupat, care trebuie
     să arate culoarea secțiunii — de aceea nu poate fi transparent. */
  --motiv-fundal: var(--cerneala);

  --gradient-brand: linear-gradient(100deg, #1B62C4 0%, #F2A31C 52%, #DC3A1E 100%);

  /* Tipografie. Stiva de sistem e temporară: la instalarea fonturilor proprii
     se schimbă doar aceste două linii. */
  --font-titlu: "Sora", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spațiere, pe scară de 4px */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --raza-card: 16px;
  --raza-buton: 10px;
  --raza-mica: 8px;

  --umbra-sm: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .10);
  --umbra-lg: 0 8px 24px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .16);

  --latime-continut: 1200px;
  --latime-text: 68ch;

  --tranzitie: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------------
   2. Reset
   --------------------------------------------------------------------------- */

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

/* Atributul `hidden` trebuie să învingă orice `display` pus de noi.
   Fără asta, o regulă banală ca `.camp { display: block }` face ca elementele
   marcate hidden să rămână vizibile — un defect ușor de scăpat, pentru că
   apare doar la componentele cu câmpuri condiționate. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* cât ține antetul lipit */
}

body {
  margin: 0;
  background: var(--cerneala);
  color: var(--text-deschis);
  font-family: var(--font-text);
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

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

/* Contur de focalizare vizibil, dar numai la navigarea cu tastatura. */
:focus-visible {
  outline: 3px solid var(--nion-galben);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--nion-albastru); color: #fff; }

/* ---------------------------------------------------------------------------
   3. Tipografie
   --------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-titlu);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem); }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.45vw, 2.375rem); }
h3 { font-size: clamp(1.25rem, 1.13rem + .55vw, 1.625rem); }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { max-width: var(--latime-text); }
p + p { margin-top: var(--s4); }

.intro {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  color: var(--text-secundar);
  max-width: 60ch;
}

.eticheta {
  font-family: var(--font-titlu);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nion-galben);
  margin-bottom: var(--s3);
}

.subtil { font-size: .875rem; color: var(--text-secundar); }

code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: .875em;
  background: rgba(255, 255, 255, .07);
  padding: .15em .45em;
  border-radius: 4px;
}

/* Cifrele mari (prețuri, statistici) se aliniază în coloană. */
.cifra { font-family: var(--font-titlu); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   4. Aranjament
   --------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--latime-continut);
  margin-inline: auto;
  padding-inline: var(--s5);
}
.container--ingust { max-width: 760px; }

.sectiune {
  background: var(--fundal);
  color: var(--text);
  padding-block: clamp(var(--s7), 6vw, var(--s9));
}

/* Secțiunile deschise rescriu tokenii de culoare — componentele nu se schimbă. */
.sectiune--deschisa {
  --fundal: var(--in);
  --text: var(--text-inchis);
  --text-secundar: var(--text-slab-pe-deschis);
  --separator: rgba(18, 23, 42, .12);
  --card-fundal: #fff;
  --motiv-fundal: var(--in);
}
.sectiune--deschisa .eticheta { color: var(--nion-albastru); }
.sectiune--deschisa a { text-decoration-color: rgba(18, 23, 42, .3); }

.sectiune--inchisa { --fundal: var(--cerneala); }
.sectiune--centrata { text-align: center; }
.sectiune--centrata p, .sectiune--centrata .intro { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Covorul ca textură de fundal

   Al doilea registru al motivului: banda subțire dintre secțiuni separă, ăsta
   texturează. Vezi app/Views/partials/covor-fundal.php pentru desen.

   Modificatorul e pe secțiune, nu pe .sectiune în general: `overflow: hidden`
   pus peste tot ar tăia orice element care iese intenționat din cadru, iar
   `position: relative` ar schimba referința pentru orice poziționare absolută
   dinăuntru. Aici plătim costul doar unde chiar punem motivul.
   --------------------------------------------------------------------------- */
.sectiune--cu-covor { position: relative; overflow: hidden; }
.sectiune--cu-covor > .container { position: relative; z-index: 1; }

/*
  Selectorul e legat de secțiune dinadins, nu lăsat pe `.covor-fundal` singur.

  Regula generică pierdea în fața unor selectori existenți de aceeași greutate
  scriși mai jos în fișier — `.retea > *` punea `position: relative` pe absolut
  tot din secțiunea aceea, inclusiv pe motiv, care intra atunci în flux și
  creștea pagina cu aproape o mie de pixeli. Legat de părinte, are greutate 0-2-0
  și nu mai depinde de ordinea din fișier.

  `max-width: none` anulează regula globală de imagini: motivul TREBUIE să iasă
  din cadru, altfel nu mai e fragment de țesătură, e o poză centrată.
*/
.sectiune--cu-covor > .covor-fundal {
  position: absolute;
  z-index: 0;
  max-width: none;
  pointer-events: none;
}

/* Fond închis: formă plină, aurie, care iese din întuneric. */
.sectiune--cu-covor > .covor-fundal--colt {
  top: -150px; right: -210px; width: 760px;
  color: var(--nion-galben); opacity: .075;
}
.sectiune--cu-covor > .covor-fundal--bordura {
  top: -90px; left: -140px; width: 360px;
  color: var(--nion-galben); opacity: .07;
}

/* Fond deschis: desen în contur, cărămiziu de lână. Auriul e invizibil pe crem,
   iar forma plină la aceeași opacitate iese cenușie. */
/* Așezat mai sus și mai la dreapta decât fratele lui de pe fond închis:
   secțiunile deschise au carduri albe pe trei coloane, iar motivul care trecea
   pe sub ele ieșea din spații și arăta a dezordine. Așa rămâne accent de colț,
   deasupra grilei. */
.sectiune--cu-covor > .covor-fundal--filigran {
  top: -200px; right: -230px; width: 560px;
  color: var(--caramiziu); opacity: .18;
}

/*
  Pe ecrane înguste textul ocupă toată lățimea, deci motivul ajunge inevitabil
  în spatele lui. Se strânge și se stinge — nu dispare, dar coboară sub pragul
  la care ochiul l-ar citi ca desen în loc de textură.
*/
@media (max-width: 720px) {
  .sectiune--cu-covor > .covor-fundal--colt     { top: -90px;  right: -190px; width: 460px; opacity: .05; }
  .sectiune--cu-covor > .covor-fundal--bordura  { top: -60px;  left: -160px;  width: 260px; opacity: .05; }
  .sectiune--cu-covor > .covor-fundal--filigran { top: -140px; right: -170px; width: 380px; opacity: .13; }
}

.grila { display: grid; gap: var(--s5); }
@media (min-width: 640px)  { .grila--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .grila--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grila--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grila--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grila--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------------------
   5. Banda tricoloră și motivele
   --------------------------------------------------------------------------- */

/* Singurul loc unde drapelul apare în formă pură: 3px, sus, pe toată lățimea. */
.tricolor {
  height: 3px;
  background: linear-gradient(
    to right,
    var(--ro-albastru) 0 33.34%,
    var(--ro-galben) 33.34% 66.67%,
    var(--ro-rosu) 66.67% 100%
  );
}

.motiv { color: var(--nion-galben); opacity: .55; }
.motiv--banda { display: block; width: 100%; }

.motiv--romb {
  display: inline-block;
  width: 10px; height: 10px;
  flex: 0 0 auto;
  margin-top: .45em;
  opacity: .9;
}

.motiv--colt {
  position: absolute;
  top: 0; left: 0;
  color: var(--nion-galben);
  opacity: .4;
  pointer-events: none;
}

.motiv--pom { color: var(--nion-albastru); opacity: .28; }

/* Separator între secțiuni: banda de romburi pe fundalul secțiunii următoare. */
.separator-motiv {
  background: var(--fundal, var(--cerneala));
  padding-block: var(--s5);
  overflow: hidden;
}

/* Banda se deplasează lateral foarte lent, ca o țesătură care se derulează.
   O unitate de pattern are 72px, deci deplasarea cu exact 72px face bucla
   invizibilă — nu se vede niciun salt la reluare. */
@media (prefers-reduced-motion: no-preference) {
  .separator-motiv .motiv--banda {
    animation: tese 24s linear infinite;
    width: calc(100% + 72px);
    margin-left: -72px;
  }
}
@keyframes tese {
  from { transform: translateX(0); }
  to   { transform: translateX(72px); }
}

/* ---------------------------------------------------------------------------
   6. Butoane
   --------------------------------------------------------------------------- */

.buton {
  --buton-fundal: var(--nion-albastru);
  --buton-text: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;              /* zonă de atingere confortabilă */
  padding: var(--s3) var(--s5);
  background: var(--buton-fundal);
  color: var(--buton-text);
  font-family: var(--font-titlu);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--raza-buton);
  transition: transform var(--tranzitie), box-shadow var(--tranzitie), background-color var(--tranzitie);
}
.buton:hover { transform: translateY(-1px); box-shadow: var(--umbra-lg); }
.buton:active { transform: translateY(0); }

.buton--principal { position: relative; overflow: hidden; }
.buton--principal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity var(--tranzitie);
}
.buton--principal:hover::after { opacity: 1; }
.buton--principal > * { position: relative; z-index: 1; }

.buton--whatsapp { --buton-fundal: var(--verde-whatsapp); --buton-text: #06301A; }
.buton--telegram { --buton-fundal: var(--albastru-telegram); }

.buton--fantoma {
  --buton-fundal: transparent;
  --buton-text: var(--text);
  border: 1px solid var(--separator);
}
.buton--fantoma:hover { border-color: currentColor; box-shadow: none; }

.buton--mare { min-height: 54px; padding: var(--s4) var(--s6); font-size: 1.0625rem; }
.buton--mic  { min-height: 38px; padding: var(--s2) var(--s4); font-size: .875rem; }
.buton--plin { width: 100%; }

/* ---------------------------------------------------------------------------
   7. Antet
   --------------------------------------------------------------------------- */

.sari-la-continut {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--nion-galben);
  color: #000;
  font-weight: 600;
  border-radius: 0 0 var(--raza-mica) 0;
}
.sari-la-continut:focus { left: 0; top: 0; }

.antet {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--separator);
}

/*
  Neclaritatea de fundal stă pe un pseudo-element, nu pe .antet.

  Motivul e o capcană reală a specificației: un element cu `backdrop-filter`
  (la fel ca `filter` sau `transform`) devine bloc de referință pentru toți
  descendenții `position: fixed`. Dacă efectul ar sta direct pe .antet, meniul
  de pe mobil s-ar poziționa față de antet, nu față de fereastră — și ar acoperi
  doar bara de sus, lăsând pagina vizibilă dedesubt.

  Pe pseudo-element, efectul arată identic și problema dispare.
*/
.antet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 16, 32, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .antet::before { background: var(--cerneala); }
}

.antet__interior {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 72px;
}

.antet__logo { flex: 0 0 auto; line-height: 0; }
.antet__logo img { width: auto; height: 40px; }

.antet__buton-meniu {
  margin-left: auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
}
.antet__hamburger,
.antet__hamburger::before,
.antet__hamburger::after {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--tranzitie), opacity var(--tranzitie);
}
.antet__hamburger::before, .antet__hamburger::after { content: ""; position: absolute; }
.antet__hamburger::before { transform: translateY(-7px); }
.antet__hamburger::after  { transform: translateY(7px); }

[aria-expanded="true"] .antet__hamburger { background: transparent; }
[aria-expanded="true"] .antet__hamburger::before { transform: rotate(45deg); }
[aria-expanded="true"] .antet__hamburger::after  { transform: rotate(-45deg); }

.meniu__lista { list-style: none; display: flex; }
.meniu__element { position: relative; }

.meniu__link {
  display: block;
  padding: var(--s3) var(--s3);
  font-family: var(--font-titlu);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-deschis);
  white-space: nowrap;
  transition: color var(--tranzitie);
}
.meniu__link:hover { color: #fff; }

.meniu__link.este-activ { color: #fff; }
.meniu__link.este-activ::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

.submeniu {
  list-style: none;
  background: var(--cerneala-2);
  border: 1px solid var(--separator);
  border-radius: var(--raza-mica);
}
.submeniu__link {
  display: block;
  padding: var(--s3) var(--s4);
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--tranzitie);
}
.submeniu__link:hover, .submeniu__link.este-activ { background: rgba(255, 255, 255, .06); }

.meniu__actiuni { display: flex; align-items: center; gap: var(--s3); }

/* --- Desktop --- */
@media (min-width: 1080px) {
  .antet__buton-meniu { display: none; }
  .meniu { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
  .meniu__lista { align-items: center; gap: var(--s1); }
  .meniu__extinde { display: none; }

  .meniu__element--parinte:hover .submeniu,
  .meniu__element--parinte:focus-within .submeniu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .submeniu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 230px;
    padding: var(--s2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--tranzitie), transform var(--tranzitie), visibility var(--tranzitie);
    box-shadow: var(--umbra-lg);
  }
}

/* --- Mobil: meniul ocupă tot ecranul --- */
@media (max-width: 1079px) {
  .meniu {
    position: fixed;
    inset: 75px 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: var(--s5) var(--s5) var(--s8);
    background: var(--cerneala);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--tranzitie), visibility var(--tranzitie);
  }
  .meniu.este-deschis { transform: translateX(0); visibility: visible; }

  .meniu__lista { flex-direction: column; gap: 0; }
  .meniu__element { border-bottom: 1px solid var(--separator); }
  .meniu__link { padding: var(--s4) 0; font-size: 1.125rem; }
  .meniu__link.este-activ::after { display: none; }
  .meniu__link.este-activ { color: var(--nion-galben); }

  .meniu__extinde {
    position: absolute;
    top: 4px; right: 0;
    width: 44px; height: 44px;
  }
  .meniu__extinde::before,
  .meniu__extinde::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform var(--tranzitie);
  }
  .meniu__extinde::after { transform: translate(-50%, -50%) rotate(90deg); }
  .meniu__extinde[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(0); }

  .submeniu {
    display: none;
    margin-bottom: var(--s3);
    background: transparent;
    border: 0;
    border-left: 2px solid var(--separator);
    border-radius: 0;
    padding-left: var(--s4);
  }
  .submeniu.este-deschis { display: block; }

  .meniu__actiuni { flex-direction: column; align-items: stretch; margin-top: var(--s5); }
  .meniu__actiuni .buton { width: 100%; }

  body.meniu-deschis { overflow: hidden; }
}

/* ---------------------------------------------------------------------------
   8. Erou (hero)
   --------------------------------------------------------------------------- */

.erou {
  position: relative;
  padding-block: clamp(var(--s8), 9vw, var(--s10));
  overflow: hidden;
}

/* „Vrâsta" — dungile din scoarță, la opacitate foarte mică. Decorativ, atât. */
.erou::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, .04) 0 2px,
      transparent 2px 26px
    );
  pointer-events: none;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   Fundalul animat al eroului

   Trei straturi, fiecare cu ritmul lui. Împreună sugerează un semnal de
   televiziune, fără să imite kitschul obișnuit (static, glitch, zăpadă).

   Regula după care e construit: fiecare strat trebuie să treacă neobservat
   dacă te uiți direct la el, și să lipsească dacă îl scoți. Un fundal care
   îți fură atenția de la titlu e un fundal prost.

   Tehnic: se animă exclusiv `transform` și `opacity`, deci totul rulează pe
   placa video, fără recalculări de aranjament.
   --------------------------------------------------------------------------- */

.erou__fundal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.erou__fundal > span {
  position: absolute;
  display: block;
}

/* Stratul 1 — urzeala: rețeaua de fire, statică.
   E și canavaua unui covor, și grila de pixeli a unui ecran. */
.erou__urzeala {
  inset: 0;
  background:
    repeating-linear-gradient(to right,  rgba(255, 255, 255, .022) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .022) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}

/* Stratul 2 — liniile de scanare ale unui ecran, coborând foarte încet.
   Deplasarea e exact cât o perioadă a modelului (4px), deci bucla e invizibilă:
   nu există niciun salt la reluare. */
.erou__linii {
  inset: -8px 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .030) 0 1px,
    transparent 1px 4px
  );
  opacity: .8;
}

/* Stratul 3 — trecerea semnalului: o undă largă și moale care traversează
   ecranul din când în când, ca o baleiere de emisie. Rar și lent, altfel
   devine un banner publicitar. */
.erou__semnal {
  top: -20%;
  bottom: -20%;
  left: -35%;
  width: 32%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(122, 176, 255, .05) 35%,
    rgba(180, 214, 255, .11) 50%,
    rgba(122, 176, 255, .05) 65%,
    transparent 100%
  );
  filter: blur(22px);
  transform: skewX(-14deg);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .erou__linii  { animation: scanare 5.5s linear infinite; }
  .erou__semnal { animation: baleiere 17s cubic-bezier(.45, 0, .55, 1) infinite; }
}

@keyframes scanare {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 4px, 0); }
}

@keyframes baleiere {
  /* Traversarea ocupă prima treime a ciclului; restul e pauză, ca efectul să
     fie o apariție, nu o mișcare continuă care obosește. */
  0%   { transform: translate3d(0, 0, 0) skewX(-14deg); opacity: 0; }
  6%   { opacity: 1; }
  28%  { opacity: 1; }
  34%  { transform: translate3d(420%, 0, 0) skewX(-14deg); opacity: 0; }
  100% { transform: translate3d(420%, 0, 0) skewX(-14deg); opacity: 0; }
}

/* Aurele colorate stau într-un strat separat, ca să se poată mișca singure,
   fără să antreneze și dungile. Mișcarea e foarte lentă și foarte mică:
   trebuie simțită, nu observată. */
.erou::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(50% 45% at 78% 18%, rgba(27, 98, 196, .34) 0%, transparent 68%),
    radial-gradient(45% 40% at 14% 88%, rgba(220, 58, 30, .20) 0%, transparent 66%),
    radial-gradient(40% 35% at 55% 60%, rgba(242, 163, 28, .12) 0%, transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .erou::after { animation: respira 26s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 2%, 0) scale(1.08); }
}

.erou > .container { position: relative; z-index: 3; }

/* Pe desktop, eroul se împarte în două: mesajul în stânga, televizorul în
   dreapta. Sub 1024px televizorul trece sub text, nu dispare — e conținut
   real, nu decor. */
.erou__grila { display: grid; gap: var(--s8); align-items: center; }
@media (min-width: 1024px) {
  .erou__grila { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7); }
}

.erou__titlu { max-width: 16ch; }

/* ---------------------------------------------------------------------------
   Televizorul cu programul curent
   --------------------------------------------------------------------------- */

/*
  Aparatul e construit din trei piese, ca unul adevărat: rama cu bărbie,
  ecranul, și piciorul. Fără picior arăta a fereastră lipită pe pagină —
  talpa e ce transformă un dreptunghi într-un obiect așezat undeva.
*/
.televizor {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin-inline: auto;
}

/* Lumina ecranului, revărsată în spate. Dă senzația de aparat aprins într-o
   cameră, nu de imagine suprapusă. */
.televizor::before {
  content: "";
  position: absolute;
  inset: 8% 4% 14%;
  background: radial-gradient(58% 52% at 50% 42%, rgba(59, 130, 246, .32) 0%, transparent 72%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

.televizor__rama {
  position: relative;
  /* Ramele subțiri sus și lateral, bărbia mai groasă — proporția unui
     televizor de acum, nu a unuia din 2005. */
  padding: 10px 10px 0;
  background:
    linear-gradient(180deg, #232C42 0%, #131A2B 8%, #0A0E1A 92%, #161D30 100%);
  border-radius: 16px 16px 12px 12px;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, .45),
    0 2px 0 rgba(255, 255, 255, .07) inset,
    0 -1px 0 rgba(0, 0, 0, .6) inset,
    0 0 0 1px rgba(255, 255, 255, .06);
}

/* Bărbia: butoanele de canal, marca discretă și ledul. */
.televizor__barbie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  height: 46px;
  padding-inline: var(--s4);
}

.televizor__marca {
  position: absolute;
  right: var(--s4);
  font-family: var(--font-titlu);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .22);
  user-select: none;
}

.televizor__led {
  position: absolute;
  left: var(--s4);
  width: 5px; height: 5px;
  background: var(--verde-ok);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(30, 158, 98, .9);
}
@media (prefers-reduced-motion: no-preference) {
  .televizor__led { animation: led 4s ease-in-out infinite; }
}
@keyframes led {
  0%, 92%, 100% { opacity: 1; }
  95%           { opacity: .35; }
}

/* Piciorul */
.televizor__suport {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.televizor__gat {
  width: 86px;
  height: 16px;
  background: linear-gradient(180deg, #161D30 0%, #0C1120 100%);
  /* Trapez: mai lat la bază decât la vârf. */
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.televizor__talpa {
  width: 168px;
  height: 7px;
  background: linear-gradient(180deg, #1B2338 0%, #0A0E1A 100%);
  border-radius: 3px;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .05) inset;
}

.televizor__ecran {
  position: relative;
  overflow: hidden;
  padding: var(--s5);
  min-height: 218px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(115% 95% at 50% 0%, #1C2949 0%, #0A0E1A 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 10px 40px rgba(0, 0, 0, .55),
    inset 0 -20px 50px rgba(0, 0, 0, .35);   /* vinietă: marginile mai închise */
}

/* Reflexia de sticlă: o bandă diagonală de lumină, foarte slabă. E detaliul
   care face diferența dintre „un dreptunghi închis" și „un panou de sticlă". */
.televizor__sticla {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, .07) 0%,
    rgba(255, 255, 255, .025) 18%,
    transparent 34%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

.televizor__linii {
  position: absolute;
  inset: -6px 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .028) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .televizor__linii { animation: scanare 4s linear infinite; }
}

.televizor__antet {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s4);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.televizor__canal { display: flex; align-items: center; gap: var(--s3); min-width: 0; }

.televizor__logo {
  width: 40px; height: 40px;
  object-fit: contain;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--raza-mica);
  padding: 3px;
  transition: opacity var(--tranzitie);
}
.televizor__logo--gol { opacity: .5; }

.televizor__nume {
  font-family: var(--font-titlu);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-deschis);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.televizor__live {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
  font-family: var(--font-titlu);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #FF8B72;
}
.televizor__punct {
  width: 7px; height: 7px;
  background: var(--nion-rosu);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(220, 58, 30, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .televizor__punct { animation: puls 2.2s ease-out infinite; }
}
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(220, 58, 30, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(220, 58, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 58, 30, 0); }
}

.televizor__continut {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--s4);
}

.televizor__emisiune {
  font-family: var(--font-titlu);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  max-width: none;
  /* Titlurile lungi de film se taie la două rânduri, ca înălțimea componentei
     să nu sară la fiecare schimbare de canal. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.1em;
}

.televizor__ore {
  margin-top: var(--s2);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-slab);
}

.televizor__bara {
  height: 3px;
  margin-top: var(--s4);
  background: rgba(255, 255, 255, .10);
  border-radius: 3px;
  overflow: hidden;
}
.televizor__progres {
  display: block;
  height: 100%;
  background: var(--gradient-brand);
  border-radius: 3px;
  transition: width 1s linear;
}

.televizor__urmeaza {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s4);
  font-size: .875rem;
  color: var(--text-slab);
  max-width: none;
}
.televizor__urmeaza > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.televizor__eticheta-mica {
  flex: 0 0 auto;
  font-family: var(--font-titlu);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nion-galben);
}

.televizor__indicatoare {
  display: flex;
  justify-content: center;
  gap: var(--s1);
}
.televizor__indicator {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
}
.televizor__indicator::before {
  content: "";
  width: 6px; height: 6px;
  background: rgba(255, 255, 255, .25);
  border-radius: 50%;
  transition: background-color var(--tranzitie), transform var(--tranzitie);
}
.televizor__indicator:hover::before { background: rgba(255, 255, 255, .5); }
.televizor__indicator.este-activ::before {
  background: var(--nion-galben);
  transform: scale(1.5);
}

.televizor__nota {
  margin: 0;
  padding-top: var(--s4);
  font-size: .6875rem;
  text-align: center;
  color: var(--text-slab);
  opacity: .7;
  max-width: none;
}

/* Schimbarea canalului: o scurtă stingere, ca la comutarea unui televizor. */
.televizor__continut, .televizor__canal { transition: opacity 260ms ease; }
.televizor.se-schimba .televizor__continut,
.televizor.se-schimba .televizor__canal { opacity: 0; }

/* ---------------------------------------------------------------------------
   Telecomanda

   Butoanele chiar funcționează: săgețile schimbă canalul, OK oprește rotația,
   iar butoanele colorate duc în paginile importante. Un obiect desenat care nu
   răspunde la apăsare e mai rău decât lipsa lui — vizitatorul încearcă, nu se
   întâmplă nimic, și rămâne cu impresia că site-ul e stricat.
   --------------------------------------------------------------------------- */

.erou__scena { position: relative; }

.telecomanda { display: none; }

/*
  Telecomanda apare doar unde chiar e loc pentru ea. Sub acest prag, aceleași
  comenzi rămân disponibile pe indicatoarele de sub ecran — nu se pierde nimic.

  Așezarea e în FLUX, nu poziționată absolut în afara scenei. O primă variantă
  o scotea în afara containerului cu `right: -78px`; părea în regulă pe un ecran
  larg, dar la exact 1280px ieșea din pagină, iar `overflow-x: hidden` de pe body
  doar ascundea defectul în loc să-l repare. Aici televizorul cedează lățimea
  de care are nevoie telecomanda, deci nimic nu iese niciodată din cadru.
*/
@media (min-width: 1280px) {
  .erou__scena {
    display: flex;
    align-items: flex-end;
    gap: var(--s4);
  }
  .erou__scena .televizor {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline: 0;
  }
  .telecomanda {
    display: block;
    flex: 0 0 74px;
    width: 74px;
    margin-bottom: var(--s6);
    /* Ușor înclinată, ca și cum ar fi lăsată pe masă lângă televizor. */
    transform: rotate(7deg);
    transform-origin: bottom center;
    transition: transform var(--tranzitie);
  }
  .telecomanda:hover { transform: rotate(4deg) translateY(-3px); }
}

.telecomanda__corp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 11px 8px 13px;
  background: linear-gradient(160deg, #222B40 0%, #141A2A 45%, #0C111C 100%);
  border-radius: 26px;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, .55),
    0 1px 0 rgba(255, 255, 255, .10) inset,
    0 0 0 1px rgba(255, 255, 255, .05);
}

.telecomanda__pornire {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  color: rgba(255, 120, 96, .85);
  background: rgba(220, 58, 30, .16);
  border-radius: 50%;
}

.telecomanda__ecranas {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 6px 7px;
  background: rgba(0, 0, 0, .35);
  border-radius: 5px;
}
.telecomanda__bara-mica {
  height: 2px;
  background: rgba(122, 176, 255, .35);
  border-radius: 2px;
}
.telecomanda__bara-mica--scurta { width: 60%; }

/* Discul de navigare */
.telecomanda__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: radial-gradient(circle at 50% 35%, #2A3450 0%, #151B2B 70%);
  border-radius: 50%;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .5) inset,
    0 1px 0 rgba(255, 255, 255, .07);
}

.telecomanda__sageata {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 26px; height: 16px;
  color: rgba(255, 255, 255, .55);
  border-radius: 4px;
  transition: color var(--tranzitie), transform var(--tranzitie);
}
.telecomanda__sageata--sus { top: 2px; }
.telecomanda__sageata--jos { bottom: 2px; }
.telecomanda__sageata:hover { color: var(--nion-galben); }
.telecomanda__sageata:active { transform: translateX(-50%) scale(.88); }

.telecomanda__ok {
  width: 26px; height: 26px;
  font-family: var(--font-titlu);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .75);
  background: linear-gradient(180deg, #37415C 0%, #222A3E 100%);
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 2px 4px rgba(0, 0, 0, .4);
  transition: transform var(--tranzitie), color var(--tranzitie);
}
.telecomanda__ok:hover { color: #fff; }
.telecomanda__ok:active { transform: scale(.9); }

/* Basculantele — pur decorative, marcate ca atare. */
.telecomanda__basculante { display: flex; gap: 6px; width: 100%; padding-inline: 3px; }
.telecomanda__basculanta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0;
  background: rgba(255, 255, 255, .045);
  border-radius: 10px;
}
.telecomanda__basculanta i {
  font-family: var(--font-titlu);
  font-style: normal;
  font-size: .375rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .35);
}
.telecomanda__basculanta b {
  font-size: .5rem;
  line-height: 1;
  color: rgba(255, 255, 255, .45);
}

/* Butoanele colorate. Pe orice telecomandă, cel roșu e primul apăsat —
   aici duce fix unde vrem: la testul gratuit. */
.telecomanda__colorate {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: 100%;
  padding-inline: 4px;
}
.telecomanda__buton-color {
  height: 11px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: transform var(--tranzitie), filter var(--tranzitie);
}
.telecomanda__buton-color:hover { transform: scale(1.12); filter: brightness(1.25); }
.telecomanda__buton-color--rosu     { background: #D93A28; }
.telecomanda__buton-color--verde    { background: #23A05B; }
.telecomanda__buton-color--galben   { background: #E0AE22; }
.telecomanda__buton-color--albastru { background: #2F6FCB; }

.telecomanda__marca {
  font-family: var(--font-titlu);
  font-size: .375rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .2);
}

/* Un indiciu discret, care se stinge după prima interacțiune. */
.telecomanda__indiciu {
  margin: var(--s2) 0 0;
  font-size: .5625rem;
  text-align: center;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-slab);
  opacity: .6;
  max-width: none;
  transition: opacity var(--tranzitie);
}
.telecomanda.a-fost-folosita .telecomanda__indiciu { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .telecomanda__indiciu { animation: clipeste 3.5s ease-in-out infinite; }
}
@keyframes clipeste {
  0%, 100% { opacity: .25; }
  50%      { opacity: .7; }
}
.erou__subtitlu {
  margin-top: var(--s5);
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  color: var(--text-slab);
}
.erou__actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s7);
}

/* ---------------------------------------------------------------------------
   9. Bandă de încredere
   --------------------------------------------------------------------------- */

.incredere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s5);
  padding: var(--s6) 0;
  border-block: 1px solid var(--separator);
}
.incredere__element { text-align: center; }
.incredere__cifra {
  font-family: var(--font-titlu);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.incredere__eticheta {
  margin-top: var(--s2);
  font-size: .875rem;
  color: var(--text-secundar);
}

/* ---------------------------------------------------------------------------
   10. Carduri
   --------------------------------------------------------------------------- */

.card-link {
  display: block;
  padding: var(--s5);
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  text-decoration: none;
  text-align: left;
  transition: border-color var(--tranzitie), transform var(--tranzitie);
}
.card-link:hover { border-color: var(--nion-albastru); transform: translateY(-2px); }
.card-link h2, .card-link h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.card-link p { font-size: .9375rem; color: var(--text-secundar); margin: 0; }

/* --- Card de pachet --- */
.card-pachet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  transition: transform var(--tranzitie), box-shadow var(--tranzitie);
}
.card-pachet:hover { transform: translateY(-3px); box-shadow: var(--umbra-lg); }

.card-pachet--recomandat {
  padding-top: var(--s7);
  border-color: transparent;
  background:
    linear-gradient(var(--card-fundal), var(--card-fundal)) padding-box,
    var(--gradient-brand) border-box;
  border: 2px solid transparent;
}

.card-pachet__eticheta {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: var(--s1) var(--s4);
  background: var(--nion-galben);
  color: #12172A;               /* niciodată alb pe galben: contrast 2.1:1 */
  font-family: var(--font-titlu);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
}

.card-pachet__titlu { font-size: 1.125rem; font-weight: 600; color: var(--text-secundar); }
.card-pachet__pret {
  margin-top: var(--s2);
  font-family: var(--font-titlu);
  font-size: 2.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.card-pachet__pe-luna { margin-top: var(--s2); font-size: .9375rem; color: var(--text-secundar); }
.card-pachet__economie {
  display: inline-block;
  margin-top: var(--s3);
  padding: 2px var(--s3);
  background: rgba(30, 158, 98, .15);
  color: var(--verde-ok);
  font-size: .8125rem;
  font-weight: 600;
  border-radius: 999px;
}
.card-pachet__lista { margin: var(--s5) 0; flex: 1; }
.card-pachet .buton { margin-top: auto; }

/* --- Listă cu marcator-romb --- */
.lista-romb { list-style: none; display: grid; gap: var(--s3); }
.lista-romb li { display: flex; align-items: flex-start; gap: var(--s3); font-size: .9375rem; }
.lista-romb .motiv--romb { color: var(--nion-galben); }

/* ---------------------------------------------------------------------------
   11. Acordeon (întrebări frecvente)
   --------------------------------------------------------------------------- */

/* <details>/<summary> nativ: funcționează fără JavaScript, e accesibil implicit
   și Google îi citește conținutul. */
.acordeon { border-top: 1px solid var(--separator); }
.acordeon__element { border-bottom: 1px solid var(--separator); }

.acordeon__intrebare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  font-family: var(--font-titlu);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.acordeon__intrebare::-webkit-details-marker { display: none; }
.acordeon__intrebare::after {
  content: "";
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--tranzitie);
}
[open] > .acordeon__intrebare::after { transform: rotate(-135deg) translateY(-2px); }

.acordeon__raspuns { padding-bottom: var(--s5); color: var(--text-secundar); }
.acordeon__raspuns p { max-width: 62ch; }

/* ---------------------------------------------------------------------------
   12. Firimituri (breadcrumb)
   --------------------------------------------------------------------------- */

.firimituri { padding-block: var(--s4); font-size: .875rem; color: var(--text-secundar); }
.firimituri ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.firimituri li::after { content: "›"; margin-left: var(--s2); opacity: .5; }
.firimituri li:last-child::after { display: none; }
.firimituri a { text-decoration: none; }
.firimituri a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   13. Subsol
   --------------------------------------------------------------------------- */

.subsol {
  background: #070B16;
  color: var(--text-slab);
  --motiv-fundal: #070B16;
  --separator: rgba(255, 255, 255, .08);
}
.subsol__interior {
  display: grid;
  gap: var(--s6);
  padding-block: var(--s7);
}
@media (min-width: 720px)  { .subsol__interior { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .subsol__interior { grid-template-columns: 1.4fr repeat(4, 1fr); } }

.subsol__logo { height: 36px; width: auto; }
.subsol__tagline { margin-top: var(--s4); font-size: .9375rem; max-width: 30ch; }
.subsol__contact { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.subsol__program { margin-top: var(--s4); font-size: .875rem; color: var(--verde-ok); }

.subsol__titlu {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-deschis);
  margin-bottom: var(--s4);
}
.subsol__lista { list-style: none; display: grid; gap: var(--s3); }
.subsol__lista a { font-size: .9375rem; text-decoration: none; transition: color var(--tranzitie); }
.subsol__lista a:hover { color: var(--text-deschis); text-decoration: underline; }

.subsol__legal {
  display: grid;
  gap: var(--s5);
  padding-block: var(--s5);
  border-top: 1px solid var(--separator);
  font-size: .8125rem;
}
@media (min-width: 900px) { .subsol__legal { grid-template-columns: 1.2fr 1fr auto; align-items: start; } }
.subsol__legal p { margin: 0; max-width: none; }
.subsol__legal a { text-decoration: none; }
.subsol__legal a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   14. Buton flotant WhatsApp
   --------------------------------------------------------------------------- */

.whatsapp-flotant {
  position: fixed;
  right: var(--s5);
  bottom: var(--s5);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: var(--verde-whatsapp);
  color: #06301A;
  border-radius: 50%;
  box-shadow: var(--umbra-lg);
  transition: transform var(--tranzitie), opacity var(--tranzitie), visibility var(--tranzitie);
}
.whatsapp-flotant:hover { transform: scale(1.06); }

/* Se ascunde cât timp un apel la acțiune principal e vizibil pe ecran,
   ca să nu existe două butoane care cer același lucru. */
.whatsapp-flotant.este-ascuns {
  opacity: 0;
  visibility: hidden;
  transform: scale(.8);
}

/* ---------------------------------------------------------------------------
   15. Apariția la derulare

   Clasa `js-apare` e pusă de JavaScript, nu scrisă în HTML. Motivul e simplu:
   dacă ar fi în HTML și JavaScript-ul n-ar rula, conținutul ar rămâne invizibil
   definitiv. Așa, fără JS, pagina e pur și simplu vizibilă.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js-apare {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
  }
  .js-apare.este-vizibil {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Într-o grilă, elementele apar unul după altul, la 60 ms distanță.
     Peste opt, întârzierea s-ar acumula prea mult și ar părea lentă. */
  .js-apare:nth-child(2) { transition-delay: .06s; }
  .js-apare:nth-child(3) { transition-delay: .12s; }
  .js-apare:nth-child(4) { transition-delay: .18s; }
  .js-apare:nth-child(5) { transition-delay: .24s; }
  .js-apare:nth-child(6) { transition-delay: .30s; }
  .js-apare:nth-child(7) { transition-delay: .36s; }
  .js-apare:nth-child(n+8) { transition-delay: .42s; }
}

/* ---------------------------------------------------------------------------
   16. Insigne
   --------------------------------------------------------------------------- */

.insigna {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s2);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  color: var(--text-secundar);
}
.insigna--hd  { background: rgba(27, 98, 196, .18);  color: #7FB0F5; }
.insigna--4k  { background: rgba(242, 163, 28, .18); color: var(--nion-galben); }
.insigna--nou { background: rgba(220, 58, 30, .18);  color: #FF8B72; }

/* ---------------------------------------------------------------------------
   17. Preferințe de sistem
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .buton:hover, .card-pachet:hover, .card-link:hover, .whatsapp-flotant:hover {
    transform: none;
  }
}

@media print {
  .antet, .subsol, .whatsapp-flotant, .tricolor, .motiv, .covor-fundal,
  .sari-la-continut { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Bonusul de luni gratuite, lipit de durata pachetului. */
.card-pachet__bonus {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: rgba(30, 158, 98, .16);
  color: var(--verde-ok);
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Secțiunea despre rețea

   Argumentul tehnic e cel mai greu de comunicat: toată lumea spune „servere
   rapide". Aici structura face diferența — afirmația stă în stânga, iar dovada
   verificabilă (pagina publică de monitorizare) e chiar lângă ea, nu ascunsă
   în subsol.
   --------------------------------------------------------------------------- */

.retea {
  position: relative;
  overflow: hidden;
}
.retea::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 88% 30%, rgba(27, 98, 196, .18) 0%, transparent 65%),
    radial-gradient(50% 60% at 6% 85%, rgba(242, 163, 28, .08) 0%, transparent 70%);
  pointer-events: none;
}
.retea > * { position: relative; }

.retea__grila { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .retea__grila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
}

.retea__dovada {
  margin-top: var(--s6);
  padding: var(--s5);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--separator);
  border-left: 3px solid var(--verde-ok);
  border-radius: var(--raza-mica);
}
.retea__dovada-text { font-size: .9375rem; margin-bottom: var(--s4); }

.retea__punct-live {
  width: 7px; height: 7px;
  background: var(--verde-ok);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(30, 158, 98, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .retea__punct-live { animation: puls-verde 2.4s ease-out infinite; }
}
@keyframes puls-verde {
  0%   { box-shadow: 0 0 0 0 rgba(30, 158, 98, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(30, 158, 98, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 158, 98, 0); }
}

/* Punctele de argument, ca o listă numerotată vizual, nu ca patru carduri.
   Cardurile ar semăna cu secțiunea de dedesubt; linia verticală le leagă
   într-un singur raționament. */
.retea__puncte {
  list-style: none;
  display: grid;
  gap: var(--s5);
  padding-left: var(--s5);
  border-left: 1px solid var(--separator);
}
.retea__punct { position: relative; }
.retea__punct::before {
  content: "";
  position: absolute;
  left: calc(var(--s5) * -1 - 5px);
  top: .55em;
  width: 9px; height: 9px;
  background: var(--nion-galben);
  /* Romb, nu bulină: aceeași formă ca marcatorii din restul paginii. */
  transform: rotate(45deg);
}
.retea__punct h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.retea__punct p { font-size: .9375rem; color: var(--text-secundar); margin: 0; }

/* ---------------------------------------------------------------------------
   Pași numerotați (cum se cumpără, ghiduri de instalare)

   Numărul stă într-un romb, nu într-un cerc: aceeași formă ca marcatorii de
   listă și ca motivele de scoarță din restul paginii. Detaliul e mic, dar
   e ce face ca elementele să pară dintr-un singur set, nu adunate.
   --------------------------------------------------------------------------- */

.pasi {
  list-style: none;
  counter-reset: pas;
  display: grid;
  gap: var(--s6);
}
@media (min-width: 900px) {
  .pasi { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}

.pas {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
}

/*
  Rombul se obține prin `clip-path`, nu prin `transform: rotate(45deg)`.

  Rotația ar înclina și cifra dinăuntru, iar readucerea ei la orizontală ar cere
  o contra-rotație pe un element separat — două transformări care se anulează,
  plus un `<span>` în plus în HTML doar de dragul CSS-ului. Cu `clip-path`,
  forma se taie din cutie, iar textul rămâne pur și simplu drept.
*/
.pas__numar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  font-family: var(--font-titlu);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cerneala);
  background: var(--nion-galben);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.pas h3 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.pas p  { font-size: .9375rem; color: var(--text-secundar); margin: 0; }

/* ---------------------------------------------------------------------------
   Atenționare — o condiție care trebuie spusă din start
   --------------------------------------------------------------------------- */

.atentionare {
  padding: var(--s5);
  background: rgba(242, 163, 28, .10);
  border-left: 3px solid var(--nion-galben);
  border-radius: 0 var(--raza-mica) var(--raza-mica) 0;
}
.atentionare p { margin: 0; font-size: .9375rem; max-width: 78ch; }

/* Butoanele cardului de pachet, unul sub altul. */
.card-pachet__actiuni { margin-top: auto; display: grid; gap: var(--s2); }

/* ---------------------------------------------------------------------------
   Configuratorul de comandă

   Stă între vizitator și butonul de comandă, deci trebuie să arate ca un ajutor,
   nu ca un obstacol. De asta: nimic marcat obligatoriu, nicio validare care
   blochează, iar butoanele funcționează și necompletat.
   --------------------------------------------------------------------------- */

.configurator {
  padding: var(--s6);
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  transition: box-shadow 400ms ease, border-color 400ms ease;
}

/* Sclipire scurtă când un card de pachet trimite alegerea aici — altfel
   derularea pare că n-a făcut nimic. */
.configurator.a-primit-pachet {
  border-color: var(--nion-galben);
  box-shadow: 0 0 0 4px rgba(242, 163, 28, .16);
}

.configurator__titlu { font-size: 1.25rem; }
.configurator__nota {
  margin-top: var(--s2);
  font-size: .875rem;
  color: var(--text-secundar);
}

.configurator__campuri {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s6);
}
@media (min-width: 720px) {
  .configurator__campuri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configurator__campuri > .camp:first-child { grid-column: 1 / -1; }
}

.camp { display: block; }
.camp__eticheta {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--font-titlu);
  font-size: .875rem;
  font-weight: 600;
}
.camp__ajutor {
  margin-top: var(--s2);
  font-size: .8125rem;
  color: var(--text-secundar);
  max-width: 60ch;
}

.camp__control {
  width: 100%;
  min-height: 46px;
  padding: var(--s3) var(--s4);
  background: var(--fundal);
  color: var(--text);
  border: 1px solid var(--separator);
  border-radius: var(--raza-buton);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie);
}
.camp__control:hover { border-color: rgba(255, 255, 255, .2); }
.sectiune--deschisa .camp__control:hover { border-color: rgba(18, 23, 42, .28); }
.camp__control:focus-visible { border-color: var(--nion-albastru); }

/* Starea adresei MAC — semnal discret, niciodată un mesaj de eroare roșu:
   câmpul e opțional, iar o eroare agresivă ar sugera că blochează comanda. */
.camp__control.este-valid   { border-color: var(--verde-ok); }
.camp__control.este-invalid { border-color: var(--nion-galben); }

/* Chipuri pentru numărul de conexiuni */
.chipuri { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 72px;
  min-height: 52px;
  padding: var(--s2) var(--s4);
  background: var(--fundal);
  color: var(--text);
  font-family: var(--font-titlu);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  border: 1px solid var(--separator);
  border-radius: var(--raza-buton);
  transition: border-color var(--tranzitie), background-color var(--tranzitie), transform var(--tranzitie);
}
.chip small {
  font-family: var(--font-text);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--text-secundar);
}
.chip:hover { border-color: rgba(255, 255, 255, .28); }
.sectiune--deschisa .chip:hover { border-color: rgba(18, 23, 42, .3); }
.chip:active { transform: scale(.97); }

.chip.este-ales {
  background: var(--nion-albastru);
  border-color: var(--nion-albastru);
  color: #fff;
}
.chip.este-ales small { color: rgba(255, 255, 255, .82); }

.configurator__actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.configurator__rezumat {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px dashed var(--separator);
  font-size: .8125rem;
  color: var(--text-secundar);
  max-width: none;
}

/* Suplimentul afișat pe cardul de pachet când sunt alese mai multe conexiuni */
.card-pachet__supliment {
  margin-top: var(--s1);
  font-size: .75rem;
  font-weight: 600;
  color: var(--nion-albastru);
}
.sectiune--inchisa .card-pachet__supliment { color: #7FB0F5; }

/* Pagina de test: argumentele în stânga, configuratorul în dreapta. */
.test-grila { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 900px) {
  .test-grila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
}

/* ---------------------------------------------------------------------------
   Cardul de pachet cu conexiuni suplimentare

   Când vizitatorul alege mai multe conexiuni, prețul de pe card crește. Fără
   un semnal vizual, cifra mai mare pare o eroare sau o schimbare de preț. Cu
   el, e limpede că a primit ceva în plus pentru banii aceia.
   --------------------------------------------------------------------------- */

.card-pachet.are-conexiuni-extra {
  border-color: var(--nion-albastru);
  box-shadow: 0 0 0 1px var(--nion-albastru);
}
.card-pachet.are-conexiuni-extra .card-pachet__pret {
  color: #7FB0F5;
  transition: color var(--tranzitie);
}
.sectiune--deschisa .card-pachet.are-conexiuni-extra .card-pachet__pret {
  color: var(--nion-albastru);
}

/* Rândul care s-a schimbat se scoate în evidență — e singurul din listă care
   nu mai spune același lucru ca înainte. */
.card-pachet__conexiuni.este-modificat span:not(.motiv) {
  font-weight: 700;
  color: #7FB0F5;
}
.sectiune--deschisa .card-pachet__conexiuni.este-modificat span:not(.motiv) {
  color: var(--nion-albastru);
}
.card-pachet__conexiuni.este-modificat .motiv--romb { color: var(--nion-albastru); }

/* Prețul se schimbă la un click; o tranziție scurtă arată că e o consecință
   a alegerii, nu o valoare care era deja acolo. */
.card-pachet__pret,
.card-pachet__pe-luna span { transition: color var(--tranzitie); }

/* ---------------------------------------------------------------------------
   Grila de canale și filtrele
   --------------------------------------------------------------------------- */

.filtre {
  display: grid;
  gap: var(--s5);
  padding: var(--s5);
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  margin-bottom: var(--s6);
}

.filtre__cautare { max-width: 460px; }

.cautare { position: relative; display: flex; align-items: center; }
.cautare__lupa {
  position: absolute;
  left: var(--s4);
  color: var(--text-secundar);
  pointer-events: none;
}
.cautare__camp { padding-left: 46px; padding-right: 40px; }
.cautare__camp::-webkit-search-cancel-button { display: none; }

.cautare__sterge {
  position: absolute;
  right: var(--s2);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-secundar);
  border-radius: 50%;
}
.cautare__sterge:hover { color: var(--text); background: rgba(255, 255, 255, .08); }

.filtre__grupuri { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .filtre__grupuri { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s5); }
}

.filtru__eticheta {
  display: block;
  margin-bottom: var(--s2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secundar);
}

.chipuri--mici { gap: var(--s1); }
.chip--mic {
  flex-direction: row;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  min-height: 34px;
  padding: var(--s1) var(--s3);
  font-size: .8125rem;
  font-weight: 600;
  border-radius: 999px;
}
.chip--mic small { font-size: .6875rem; opacity: .7; }

.filtre__rezultat {
  margin: 0;
  font-size: .875rem;
  color: var(--text-secundar);
  min-height: 1.4em;
  max-width: none;
}

/* --- Grila --- */

.grila-canale {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s3);
}

.canal {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  padding: var(--s3);
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-mica);
  transition: border-color var(--tranzitie);
}
.canal:hover { border-color: rgba(255, 255, 255, .22); }
.sectiune--deschisa .canal:hover { border-color: rgba(18, 23, 42, .28); }

.canal__logo {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  object-fit: contain;
  background: rgba(255, 255, 255, .05);
  border-radius: 6px;
  padding: 3px;
}
.sectiune--deschisa .canal__logo { background: rgba(18, 23, 42, .05); }

/* Fără logo se afișează inițialele: o plăcuță goală ar face grila să pară
   incompletă, inițialele arată intenționat. */
.canal__logo--text {
  display: grid;
  place-items: center;
  padding: 0;
  font-family: var(--font-titlu);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-secundar);
  letter-spacing: .02em;
}

.canal__nume {
  flex: 1;
  min-width: 0;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.canal__insigne {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.insigna--uhd    { background: rgba(242, 163, 28, .16); color: var(--nion-galben); }
.insigna--fhd    { background: rgba(27, 98, 196, .18);  color: #7FB0F5; }
.insigna--arhiva { background: rgba(30, 158, 98, .16);  color: #4FD695; }
.sectiune--deschisa .insigna--fhd    { color: var(--nion-albastru); }
.sectiune--deschisa .insigna--arhiva { color: #14764A; }
.sectiune--deschisa .insigna--uhd,
.sectiune--deschisa .insigna--4k     { color: #9A6206; }

.grila-canale__gol {
  padding: var(--s7) 0;
  text-align: center;
  color: var(--text-secundar);
  max-width: none;
}

/* Lista scurtată la primele câteva zeci de canale.

   Restul rămân în HTML — sunt numele pentru care oamenii ajung aici — dar se
   ascund până la prima atingere a unui filtru, a căutării sau a butonului.
   Regula atârnă de .cu-js: fără JavaScript lista se vede întreagă, pentru că
   n-ar exista nimic care s-o desfacă. */
.cu-js .grila-canale[data-limitat] .canal[data-peste-limita] { display: none; }

.grila-canale__mai-mult {
  margin-top: var(--s6);
  text-align: center;
  max-width: none;
}

.legatura-buton {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  font: inherit;
}
.legatura-buton:hover { color: var(--nion-galben); }

/* Numărul de canale, lângă numele categoriei */
.card-link__numar {
  display: inline-block;
  margin-left: var(--s2);
  padding: 1px var(--s2);
  font-family: var(--font-text);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secundar);
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
  vertical-align: middle;
}
.sectiune--deschisa .card-link__numar { background: rgba(18, 23, 42, .07); }

/* ---------------------------------------------------------------------------
   Planuri de abonament

   Două planuri pe aceeași pagină cer o separare vizuală limpede: dacă
   cardurile curg unul după altul, cineva compară „24 luni" din Econom cu
   „1 lună" din Complet și trage concluzii greșite.
   --------------------------------------------------------------------------- */

.plan + .plan { margin-top: var(--s9); }

.plan__antet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--separator);
}

.plan__nume {
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  margin-bottom: var(--s2);
}
.plan__descriere {
  font-size: .9375rem;
  color: var(--text-secundar);
  max-width: 62ch;
  margin: 0;
}

.plan__insigna {
  flex: 0 0 auto;
  padding: var(--s1) var(--s4);
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-titlu);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* Cardurile planului econom sunt vizibil mai discrete decât cele complete —
   ierarhia trebuie să se vadă fără să citești. */
.plan--econom .card-pachet { background: transparent; }
.plan--econom .card-pachet__pret { font-size: 2.25rem; }

/* Atenționare pentru ce NU intră într-un plan. Roșu, nu galben: e o limitare,
   nu o informație suplimentară, iar culoarea trebuie să spună asta. */
.atentionare--rosie {
  background: rgba(220, 58, 30, .10);
  border-left-color: var(--nion-rosu);
}

/* ---------------------------------------------------------------------------
   Ghiduri de instalare
   --------------------------------------------------------------------------- */

.ghid__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s5);
  padding: var(--s4) 0;
  border-block: 1px solid var(--separator);
  font-size: .875rem;
  color: var(--text-secundar);
}
.ghid__meta-item strong { color: var(--text); font-weight: 700; }

.ghid__necesar { margin-top: var(--s6); }
.ghid__necesar-titlu {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secundar);
  margin-bottom: var(--s3);
}

.ghid-pasi { list-style: none; display: grid; gap: var(--s7); }

.ghid-pas { display: flex; gap: var(--s5); align-items: flex-start; }
.ghid-pas__continut { flex: 1; min-width: 0; }
.ghid-pas__titlu { font-size: 1.1875rem; margin-bottom: var(--s3); }
.ghid-pas p { font-size: .9375rem; }

/* Butonul de descărcare al unui pas: rar, dar când există e chiar acțiunea
   pasului, deci stă separat de text, nu topit în el. */
.ghid-pas__actiune { margin-top: var(--s4); }

/* Ilustrațiile sunt scheme, nu capturi de ecran — vezi comentariul din
   app/Views/partials/ilustratie.php. Rama subliniază că e un desen. */
.ilustratie { margin: var(--s5) 0 0; }
.ilustratie__desen {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--raza-mica);
}
.ilustratie__eticheta {
  margin-top: var(--s2);
  font-size: .75rem;
  color: var(--text-secundar);
  opacity: .8;
}

.card-ghid__meta {
  margin-top: var(--s3);
  font-size: .75rem;
  color: var(--text-secundar);
  opacity: .8;
}

@media (max-width: 560px) {
  .ghid-pas { gap: var(--s4); }
}

/* Pictogramele aparatelor din cardurile de ghid. Siluete desenate, nu
   fotografii de produs — vezi motivul în app/Views/partials/pictograma-aparat.php */
.pictograma-aparat {
  color: var(--nion-galben);
  opacity: .75;
  margin-bottom: var(--s3);
  transition: opacity var(--tranzitie), transform var(--tranzitie);
}
.card-ghid:hover .pictograma-aparat { opacity: 1; transform: translateY(-2px); }

/* Capturi de ecran reale în ghiduri. Rama subțire le separă de fundalul
   paginii — fără ea, o captură cu fundal închis pare că se scurge în pagină. */
.captura { margin: var(--s5) 0 0; }
.captura__imagine {
  width: 100%;
  height: auto;
  border-radius: var(--raza-mica);
  border: 1px solid var(--separator);
}
.captura__eticheta {
  margin-top: var(--s2);
  font-size: .75rem;
  color: var(--text-secundar);
  opacity: .8;
}

/* ---------------------------------------------------------------------------
   11. Paginile juridice

   Text lung, citit rar dar cu atenție: coloană îngustă, rânduri aerisite,
   titluri care se disting fără să strige.
   --------------------------------------------------------------------------- */

.nota-actualizare {
  margin-top: var(--s5);
  color: var(--text-secundar);
  font-size: .875rem;
}

/* Cuprinsul: apare doar la documentele cu peste cinci secțiuni. */
.cuprins {
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s8);
}
.cuprins__titlu {
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secundar);
  margin-bottom: var(--s3);
}
.cuprins__lista {
  margin: 0;
  padding-left: 1.35em;
  display: grid;
  gap: var(--s2);
  font-size: .9375rem;
}
.cuprins__lista a { text-decoration-thickness: 1px; }

/*
  Corpul documentului.

  `text-wrap: pretty` scapă de rândul final rămas cu un singur cuvânt — la un
  text de zece mii de semne, diferența dintre a arăta îngrijit și a arăta
  nefinisat. Browserele care nu-l cunosc îl ignoră.
*/
.text-juridic { max-width: 68ch; }
.text-juridic h2 {
  font-size: 1.25rem;
  margin-top: var(--s8);
  margin-bottom: var(--s4);
  scroll-margin-top: 90px;   /* antetul fix nu acoperă titlul la salt din cuprins */
}
.text-juridic h2:first-child { margin-top: 0; }
.text-juridic p {
  margin-bottom: var(--s4);
  line-height: 1.75;
  text-wrap: pretty;
}
.text-juridic .lista-romb { margin: 0 0 var(--s5); }

/* Tabelul din politica de cookies și din perioadele de păstrare a datelor.
   Se derulează pe orizontală în containerul lui — niciodată toată pagina. */
.tabel-container {
  overflow-x: auto;
  margin: 0 0 var(--s6);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  min-width: 30rem;
}
.tabel th, .tabel td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--separator);
  vertical-align: top;
}
.tabel th {
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secundar);
  white-space: nowrap;
}
.tabel tr:last-child td { border-bottom: 0; }

/* Cardurile de pe pagina de contact: un canal pe card, cu valoarea scoasă în
   evidență — omul caută numărul, nu explicația de sub el. */
.card-contact {
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  padding: var(--s5);
}
.card-contact h3 {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secundar);
  margin-bottom: var(--s2);
}
.card-contact__valoare {
  font-family: var(--font-titlu);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: var(--s3);
  word-break: break-word;
}
.card-contact__valoare a { text-decoration: none; }
.card-contact__valoare a:hover { text-decoration: underline; }
.card-contact p:last-child {
  font-size: .875rem;
  color: var(--text-secundar);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   12. Pagini B2B — reseller și retransmisie
   --------------------------------------------------------------------------- */

/* Cardul de preț pe credit: un singur număr mare, restul în jurul lui.
   Spre deosebire de cardurile de abonament, aici nu se enumeră nimic — lista
   e aceeași la toate treptele și stă separat, mai jos în pagină. */
.card-credit {
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  padding: var(--s6) var(--s5);
  text-align: center;
  position: relative;
}
.card-credit--ales { border-color: var(--nion-galben); }
.card-credit__insigna {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--nion-galben);
  color: #0B1020;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.card-credit h3 {
  font-size: .9375rem;
  margin-bottom: var(--s4);
  min-height: 2.6em;         /* titlurile pe două rânduri nu mai decalează prețul */
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-credit__pret {
  font-family: var(--font-titlu);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
.card-credit__unitate {
  color: var(--text-secundar);
  font-size: .8125rem;
  margin: var(--s2) 0 var(--s4);
}
.card-credit__conditie {
  font-size: .8125rem;
  color: var(--text-secundar);
  margin: 0;
  border-top: 1px solid var(--separator);
  padding-top: var(--s4);
}

/* Lista de „ce include": pe două coloane când e loc, ca să nu curgă o coloană
   lungă de opt rânduri pe jumătate de ecran gol. */
@media (min-width: 720px) {
  .lista-romb--doua-coloane { grid-template-columns: repeat(2, 1fr); column-gap: var(--s6); }
}

/* Varianta gravă a atenționării: pentru lucrurile de care depinde răspunderea
   juridică a celui care citește. Aceeași formă, alt accent — roșu în loc de
   auriu — ca să nu se piardă printre notele obișnuite. */
.atentionare--serioasa {
  border-left-color: var(--nion-rosu);
  background: rgba(220, 58, 30, .07);
}
.atentionare--serioasa p { font-size: 1rem; }

/* Cardul de metodă de plată: titlu, explicație, iar jos — separat — cât
   durează până se activează. Timpul e ce compară omul între metode. */
.card-plata {
  background: var(--card-fundal);
  border: 1px solid var(--separator);
  border-radius: var(--raza-card);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
}
.card-plata h3 { font-size: 1.0625rem; margin-bottom: var(--s3); }
.card-plata p { font-size: .9375rem; color: var(--text-secundar); margin-bottom: var(--s4); }
.card-plata__timp {
  margin: auto 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--separator);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--verde-ok);
}

/* ---------------------------------------------------------------------------
   13. Formularul de contact
   --------------------------------------------------------------------------- */

.formular { margin-top: var(--s7); display: grid; gap: var(--s5); }

@media (min-width: 640px) {
  .formular__pereche { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

.camp--ingust { max-width: 12rem; }

/*
  Câmpul-capcană pentru roboți.

  Nu `display: none` și nu `type="hidden"`: roboții mai buni le ignoră pe
  amândouă. Scos din pagină prin poziționare, rămâne un câmp text obișnuit în
  cod — exact ce completează automat. `tabindex="-1"` și `aria-hidden` în HTML
  îl țin departe de tastatură și de cititoarele de ecran.
*/
.formular__capcana {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.camp__control--eroare { border-color: var(--nion-rosu); }
.camp__control--eroare:focus { outline-color: var(--nion-rosu); }

.camp__eroare {
  margin-top: var(--s2);
  font-size: .8125rem;
  color: var(--nion-rosu);
}
.sectiune--deschisa .camp__eroare { color: #A82812; }

.camp__control--zona { min-height: 9rem; resize: vertical; line-height: 1.6; }

.formular__actiuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
}
.formular__actiuni .camp__ajutor { margin: 0; flex: 1; min-width: 16rem; }

/* Confirmarea că mesajul a plecat. Verde, nu auriu: e singurul loc din site
   unde culoarea trebuie să spună „s-a rezolvat", nu „ia aminte". */
.atentionare--reusita {
  border-left-color: var(--verde-ok);
  background: rgba(30, 158, 98, .10);
}

/* ---------------------------------------------------------------------------
   14. Bannerul de cookies

   Jos, pe toată lățimea, peste conținut dar fără să-l blocheze: cine vrea să
   citească fără să aleagă, poate. Nu întunecă pagina și nu prinde focalizarea
   într-o capcană.
   --------------------------------------------------------------------------- */

.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--cerneala-2);
  border-top: 1px solid var(--separator);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .3);
  padding: var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom, 0px));

  /* Intră de jos, discret. Starea inițială e cea ascunsă, ca banner-ul să nu
     „sară" în pagină înainte ca JavaScript-ul să decidă dacă are ce căuta. */
  transform: translateY(100%);
  opacity: 0;
  transition: transform .28s ease-out, opacity .28s ease-out;
}
.cookies.este-vizibil { transform: translateY(0); opacity: 1; }

/* Cine a cerut mai puțină mișcare îl primește direct, fără alunecare. */
@media (prefers-reduced-motion: reduce) {
  .cookies { transition: none; transform: none; }
}

.cookies__continut {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
}

.cookies__text {
  margin: 0;
  font-size: .875rem;
  color: var(--text-secundar);
  max-width: 62ch;
  flex: 1 1 20rem;
}
.cookies__text a { color: inherit; }

/*
  Cele două butoane au aceeași mărime și aceeași greutate vizuală.

  Nu e o preferință de design, e o cerință: GDPR cere ca refuzul să fie la fel
  de ușor ca acceptul. „Accept" mare și colorat lângă un „Refuză" mărunt și gri
  e exact tiparul pentru care s-au dat amenzi în Franța și în Italia.
*/
.cookies__actiuni {
  display: flex;
  gap: var(--s3);
  flex: 0 0 auto;
}
.cookies__actiuni .buton { min-width: 7rem; justify-content: center; }

@media (max-width: 560px) {
  .cookies__continut { flex-direction: column; align-items: stretch; }
  .cookies__actiuni { justify-content: stretch; }
  .cookies__actiuni .buton { flex: 1; }
}