/* ==========================================================================
   Magazin de ghiduri fiscale — sistem vizual.
   Un singur set de „tokens" sus; restul foii doar le foloseste. Daca vrei alta
   culoare de brand, schimbi --accent si se schimba tot site-ul.
   ========================================================================== */

:root{
  /* Pagina e albă; suprafețele (carduri, panouri, secțiuni) sunt gri deschis.
     „camp” e albul care trebuie să rămână alb PESTE gri: câmpurile de
     formular, pastila variantei alese, sertarul coșului. Fără el, un câmp gri
     pe un card gri dispare și nu se mai vede unde scrii. */
  --fundal:#ffffff;
  --card:#f5f5f7;
  --camp:#ffffff;
  --text:#0f172a;
  --text-sec:#64748b;
  --text-slab:#64748b;
  --rama:#e5e8ee;
  --rama-tare:#cbd5e1;

  --accent:#1d4ed8;
  --accent-inchis:#1e40af;
  --accent-slab:#eef2ff;
  --verde:#15803d;
  --verde-slab:#f0fdf4;
  --chihlimbar:#b45309;
  --chihlimbar-slab:#fffbeb;
  --rosu:#b91c1c;
  --rosu-slab:#fef2f2;

  --r-mic:8px; --r:12px; --r-mare:18px;
  --umbra:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.14);
  --umbra-ridicat:0 2px 4px rgba(15,23,42,.05), 0 18px 40px -18px rgba(15,23,42,.28);
  --lat:1180px;
  --antet:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fundal);color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(30px,4.4vw,46px);font-weight:800}
h2{font-size:clamp(23px,2.6vw,31px);font-weight:750}
h3{font-size:19px;font-weight:700}
p{margin:0 0 1em}
.invizibil{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.container{max-width:var(--lat);margin:0 auto;padding:0 22px}

/* ------------------------------------------------------------------ antet */
.antet{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rama);
}
.antet .container{display:flex;align-items:center;gap:18px;height:var(--antet)}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;
  color:var(--text);font-size:17px}
.marca:hover{text-decoration:none}
.marca .sigla{width:36px;height:36px;border-radius:9px;overflow:hidden;flex:none;
  box-shadow:0 1px 3px rgba(15,23,42,.18);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.marca .sigla img{width:100%;height:100%;object-fit:cover;display:block}
.marca:hover .sigla{transform:rotate(-6deg) scale(1.06)}
.marca small{display:block;font-size:10px;font-weight:600;color:var(--text-slab);
  letter-spacing:.04em;text-transform:uppercase;margin-top:-2px;line-height:1.25;
  max-width:34ch}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a.leg{padding:9px 13px;border-radius:var(--r-mic);color:var(--text-sec);font-weight:600;
  font-size:14.5px}
.nav a.leg:hover{background:var(--accent-slab);color:var(--accent);text-decoration:none}

/* Telefonul din antet. Pe ecrane înguste rămâne doar iconița, rotundă: butonul
   de apel e cel mai util tocmai pe telefon, unde apeși și sună. Numărul scris
   ar fi împins coșul afară din antet. */
.telefon-antet{
  display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:var(--card);color:var(--text);font-size:14.5px;font-weight:650;
  white-space:nowrap;transition:background .2s ease,color .2s ease;
}
.telefon-antet:hover{background:#e8e8ed;color:var(--accent);text-decoration:none}
.telefon-antet svg{color:var(--accent);flex:none}
@media(max-width:820px){
  .telefon-antet{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}
  .telefon-cifre{display:none}
}

.buton-cos{
  display:flex;align-items:center;gap:9px;
  background:var(--card);padding:9px 15px;border-radius:999px;cursor:pointer;border:0;
  font:inherit;font-size:14.5px;font-weight:650;color:var(--text);
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.buton-cos:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-slab)}
.buton-cos:active{transform:scale(.97)}
.buton-cos .numar{min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;
  display:grid;place-items:center}
.buton-cos[data-gol="1"] .numar{background:var(--rama-tare);color:var(--text-sec)}

/* ----------------------------------------------------------------- butoane */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  font:inherit;font-weight:650;font-size:15px;line-height:1.2;text-align:center;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .08s,color .15s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn-primar{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(29,78,216,.3)}
.btn-primar:hover{background:var(--accent-inchis)}
.btn-secundar{background:var(--camp);color:var(--text);border-color:var(--rama-tare)}
.btn-secundar:hover{border-color:var(--text-slab);background:#f0f0f3}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:#166534}
.btn-sters{background:transparent;color:var(--text-sec);border-color:var(--rama)}
.btn-sters:hover{color:var(--rosu);border-color:#fecaca;background:var(--rosu-slab)}
.btn-mic{padding:8px 14px;font-size:13.5px;border-radius:9px}
.btn-lat{width:100%}
/* Butonul care încheie comanda: mai mare decât restul, fiindcă e ultimul pas
   și trebuie să se vadă că el e acțiunea principală a paginii. */
.btn-trimite{font-size:19px;font-weight:700;padding:16px 26px;letter-spacing:-.01em}

.btn:disabled{opacity:.5;cursor:not-allowed}

/* -------------------------------------------------------------------- hero */
.hero{padding:64px 0 34px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-160px 0 auto -10%;height:520px;z-index:-1;
  background:radial-gradient(60% 60% at 22% 30%,rgba(29,78,216,.10),transparent 70%),
             radial-gradient(50% 50% at 80% 10%,rgba(21,128,61,.07),transparent 70%);
}
/* Eroul pe două coloane: textul la stânga, poza la dreapta.
   Poza stă într-un dreptunghi rotunjit cu fundal gri — dacă imaginea are alt
   raport decât cadrul, marginile rămân gri, nu albe pe alb (adică invizibile). */
.hero-grila{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:52px;align-items:center;position:relative}

/* Poza e de 1,7 ori mai mare decât coloana ei și crește SPRE STÂNGA, peste
   text. Marginea negativă e exact jumătate din creștere (70%), așa că muchia
   din dreapta rămâne fixă, lipită de marginea paginii — altfel ar ieși din
   ecran și ar apărea derulare pe orizontală. */
.hero-foto{margin:0 0 0 -70%;width:170%;border-radius:24px;overflow:hidden;
  background:var(--card);aspect-ratio:4/3;position:relative;z-index:1;
  box-shadow:0 2px 8px rgba(15,23,42,.05), 0 28px 60px -28px rgba(15,23,42,.30)}

/* Textul stă DEASUPRA pozei. Fără asta, suprapunerea l-ar acoperi. */
.hero-text{position:relative;z-index:2}

/* Poza se stinge în alb pe partea dinspre text, ca literele să aibă mereu un
   fond deschis sub ele, oricât de încărcată e imaginea în zona aceea. */
.hero-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    var(--fundal) 0%, rgba(255,255,255,.92) 26%, rgba(255,255,255,0) 56%);
}
.hero-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,.84,.28,1)}
.hero-foto:hover img{transform:scale(1.03)}

@media(max-width:900px){
  .hero-grila{grid-template-columns:1fr;gap:34px}
  /* Sub o coloană, suprapunerea n-are sens: poza revine la lățimea ei. */
  .hero-foto{margin:0;width:100%;aspect-ratio:16/10;max-width:560px}
  .hero-foto::after{display:none}
}

.hero .eticheta{
  display:inline-flex;align-items:center;gap:8px;background:var(--accent-slab);
  color:var(--accent-inchis);font-size:13px;font-weight:700;padding:6px 13px;
  border-radius:999px;margin-bottom:18px;letter-spacing:.01em;
}
.hero p.intro{font-size:18.5px;color:var(--text-sec);max-width:62ch;margin-top:16px}
.hero .puncte{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding:0;list-style:none}
.hero .puncte li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--text-sec);
  font-weight:550}
.hero .puncte svg{flex:none;color:var(--verde)}

/* ------------------------------------------------------------------ grila */
.sectiune{padding:26px 0 70px}
.cap-sectiune{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:26px;flex-wrap:wrap}
.cap-sectiune p{margin:6px 0 0;color:var(--text-sec)}

.grila{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}

.produs{
  background:var(--card);border-radius:22px;
  padding:18px 18px 26px;display:flex;flex-direction:column;text-align:center;
  box-shadow:var(--umbra);
  transition:box-shadow .35s cubic-bezier(.22,.8,.3,1),
             transform .35s cubic-bezier(.22,.8,.3,1),
             border-color .35s ease;
}
.produs:hover{box-shadow:var(--umbra-ridicat);transform:translateY(-5px);
  border-color:var(--rama-tare)}

.placa-imagine{display:block;border-radius:14px;overflow:hidden;background:#eef1f6;
  aspect-ratio:210/297;position:relative}
.placa-imagine img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.8,.3,1)}
.produs:hover .placa-imagine img{transform:scale(1.045)}
/* o lumină trece peste copertă la trecerea mouse-ului */
.placa-imagine::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .75s cubic-bezier(.22,.8,.3,1);
}
.produs:hover .placa-imagine::after{transform:translateX(120%)}

.placa-corp{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px 4px 0;flex:1}
.placa-corp .variante{width:100%;max-width:240px}

.placa-titlu{font-size:22px;font-weight:750;letter-spacing:-.025em;line-height:1.2;margin:2px 0 0}
.placa-titlu a{color:var(--text)}
.placa-titlu a:hover{color:var(--accent);text-decoration:none}

.placa-text{color:var(--text-sec);font-size:14.5px;line-height:1.5;margin:0;
  max-width:32ch}

/* Al doilea rând din card: data actualizării. Mai mic și mai stins decât anul
   apariției — sunt două fapte înrudite, iar ochiul trebuie să vadă imediat că
   al doilea îl detaliază pe primul, nu concurează cu el. */
.placa-actualizat{display:block;font-size:13px;color:var(--text-slab);margin-top:2px}

.placa-meta{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;
  font-size:16px;font-weight:700;color:var(--text);align-items:center}

.placa-pret{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:4px 0 0}

.placa-actiuni{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  justify-content:center;margin-top:auto;padding-top:16px}

/* Legătura albastră cu săgeată, ca „Află mai multe ›". */
.leg-sageata{display:inline-flex;align-items:center;gap:3px;font-size:14.5px;
  font-weight:600;color:var(--accent)}
.leg-sageata::after{content:"\203A";font-size:1.25em;line-height:0;transform:translateY(-1px);
  transition:transform .22s cubic-bezier(.22,.8,.3,1)}
.leg-sageata:hover{text-decoration:none}
.leg-sageata:hover::after{transform:translate(3px,-1px)}

.meta{display:flex;flex-wrap:wrap;gap:7px 14px;font-size:13px;color:var(--text-slab);
  align-items:center}
.meta span{display:inline-flex;align-items:center;gap:5px}

/* ------------------------------------------- selector de varianta + pret */
.variante{display:flex;background:#e8e8ed;border-radius:11px;padding:4px;gap:4px}
.variante label{flex:1;position:relative;cursor:pointer}
.variante input{position:absolute;opacity:0;width:0;height:0}
.variante .fata{
  display:block;text-align:center;padding:9px 6px;border-radius:8px;font-size:13.5px;
  font-weight:650;color:var(--text-sec);transition:background .15s,color .15s,box-shadow .15s;
}
.variante .fata .p{display:block;font-size:12px;font-weight:600;color:var(--text-slab);
  margin-top:1px}
.variante input:checked + .fata{background:var(--camp);color:var(--text);
  box-shadow:0 1px 3px rgba(15,23,42,.12)}
.variante input:checked + .fata .p{color:var(--accent)}
.variante input:focus-visible + .fata{outline:2px solid var(--accent);outline-offset:1px}
.variante label.indisponibil{opacity:.45;cursor:not-allowed}

.rand-pret{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:2px}
.pret{font-size:25px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.pret small{font-size:13px;font-weight:600;color:var(--text-slab);letter-spacing:0}

/* ----------------------------------------------------------- pagina ghid */
.ghid-cap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;
  padding:44px 0 20px;align-items:start}
/* Coperta NU e lipită. A fost, și se vedea prost: rămânea pe loc, iar panoul
   de cumpărare de sub ea urca peste. Acum coloana se mișcă întreagă. */
.ghid-cap .coperta-mare{border-radius:var(--r-mare);overflow:hidden;
  box-shadow:var(--umbra-ridicat)}
/* ------------------------------------------------------------- carusel */
/* Un singur rând de ghiduri, derulat pe orizontală. Pista se poate derula și
   cu degetul, și cu roata, și cu tastatura — săgețile sunt un plus, nu singura
   cale. Cardurile se opresc aliniate (scroll-snap), ca să nu rămână unul
   tăiat în jumătate. */
.carusel{position:relative;margin:0 -22px}
.carusel-pista{
  display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;
  /* „proximity", nu „mandatory": cu aliniere obligatorie, o derulare mică e
     trasă înapoi la cardul cel mai apropiat, iar butonul pare că nu face nimic. */
  scroll-snap-type:x proximity;padding:4px 22px 8px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carusel-pista::-webkit-scrollbar{display:none}
.carusel-pista:focus-visible{outline:3px solid var(--accent);outline-offset:4px;
  border-radius:var(--r)}
.carusel-pista > .produs{flex:0 0 272px;scroll-snap-align:start}

.carusel-sageti{display:flex;gap:8px}
.sageata{
  width:36px;height:36px;border-radius:50%;border:0;background:var(--card);
  color:var(--text);display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease,opacity .2s ease,transform .12s ease;
}
.sageata:hover:not(:disabled){background:#e8e8ed}
.sageata:active:not(:disabled){transform:scale(.93)}
.sageata:disabled{opacity:.3;cursor:default}
.sageata:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Pe ecrane mici marginea negativă ar scoate pista din pagină. */
@media(max-width:640px){
  .carusel{margin:0 -22px}
  .carusel-pista > .produs{flex-basis:250px}
}

/* ------------------------------------------------------------- autorul */
.autor{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:center;
  padding:26px}
.autor-poza{border-radius:16px;overflow:hidden;background:#0f172a;aspect-ratio:4/5}
.autor-poza img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.autor:hover .autor-poza img{transform:scale(1.03)}
.autor-text h3{font-size:24px;font-weight:750;letter-spacing:-.02em;margin:0 0 12px}
.autor-text p{font-size:16.5px;line-height:1.65;color:var(--text-sec);margin:0}
.autor-repere{display:flex;flex-wrap:wrap;gap:12px 34px;list-style:none;padding:0;
  margin:22px 0 0}
.autor-repere li{display:flex;flex-direction:column}
.autor-repere b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.autor-repere span{font-size:13px;color:var(--text-slab)}
@media(max-width:680px){
  .autor{grid-template-columns:1fr;gap:22px;text-align:center}
  .autor-poza{max-width:220px;margin-inline:auto}
  .autor-repere{justify-content:center}
}

.panel{background:var(--card);border-radius:var(--r-mare);
  padding:22px;box-shadow:var(--umbra)}
.panel + .panel{margin-top:18px}
/* Data actualizării, sub titlu. Mică și gri — o informație care liniștește,
   nu una care strigă. La un ghid fiscal contează mult, deci nu o ascundem de
   tot: rămâne lizibilă, doar discretă. */
.actualizat{font-size:13.5px;color:var(--text-slab);margin:10px 0 0;
  letter-spacing:.01em}

.etichete{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0;list-style:none}
.etichete li{background:var(--accent-slab);color:var(--accent-inchis);font-size:12.5px;
  font-weight:650;padding:4px 11px;border-radius:999px}
/* Cuprinsul păstrează structura cărții: capitol, subcapitol, secțiune.
   Adâncimea se citește din retragere și din greutatea literei, nu din
   simboluri — lista rămâne o listă, nu un desen. */
.cuprins{list-style:none;padding:0;margin:0}
.cuprins li{padding:9px 0;font-size:15px;line-height:1.45;
  border-bottom:1px solid var(--rama)}
.cuprins li:last-child{border-bottom:0}

.cuprins li.niv-1{font-weight:650;color:var(--text);padding-top:16px}
.cuprins li.niv-1:first-child{padding-top:9px}
.cuprins li.niv-2{padding-left:20px;color:var(--text-sec)}
.cuprins li.niv-3{padding-left:40px;color:var(--text-slab);font-size:14px;
  border-bottom-style:dotted}
.proza p{font-size:16.5px;color:#334155}

/* ------------------------------------------------------------------- cos */
.sertar-fundal{position:fixed;inset:0;background:rgba(15,23,42,.42);opacity:0;
  pointer-events:none;transition:opacity .25s;z-index:90;backdrop-filter:blur(2px)}
.sertar-fundal.deschis{opacity:1;pointer-events:auto}
.sertar{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--camp);
  z-index:100;transform:translateX(102%);
  /* Închis: ascuns de tot (visibility), abia după ce a terminat de alunecat.
     Altfel umbra lui rămânea ca o dungă gri pe marginea dreaptă a fiecărei
     pagini, iar tasta Tab ajungea pe butoanele din coșul nevăzut. */
  visibility:hidden;
  transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s linear .28s;
  display:flex;flex-direction:column;box-shadow:-20px 0 60px -20px rgba(15,23,42,.4);
}
.sertar.deschis{transform:none;visibility:visible;
  transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s}
.sertar header{display:flex;align-items:center;gap:12px;padding:19px 22px;
  border-bottom:1px solid var(--rama)}
.sertar header h2{font-size:18px;font-weight:730}
.inchide{margin-left:auto;background:none;border:0;cursor:pointer;padding:7px;border-radius:8px;
  color:var(--text-sec);line-height:0}
.inchide:hover{background:var(--card);color:var(--text)}
.sertar .continut{flex:1;overflow-y:auto;padding:8px 22px}
.sertar footer{border-top:1px solid var(--rama);padding:18px 22px;background:var(--card)}

.linie{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--rama)}
.linie:last-child{border-bottom:0}
.linie .mini{width:44px;height:62px;border-radius:6px;object-fit:contain;flex:none;
  background:#eef1f6}
.linie .desc{flex:1;min-width:0}
.linie .desc b{display:block;font-size:14.5px;font-weight:650;line-height:1.35}
.linie .desc .var{font-size:12.5px;color:var(--text-slab);margin-top:2px}
.linie .desc .pret-linie{font-size:14.5px;font-weight:700;margin-top:6px}
.linie .unelte{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cantitate{display:flex;align-items:center;border:1px solid var(--rama);border-radius:9px;
  overflow:hidden}
.cantitate button{width:28px;height:28px;border:0;background:var(--camp);cursor:pointer;
  color:var(--text-sec);font-size:15px;line-height:1}
.cantitate button:hover{background:var(--card);color:var(--text)}
.cantitate span{min-width:26px;text-align:center;font-size:13.5px;font-weight:650;
  font-variant-numeric:tabular-nums}
.sterge-linie{background:none;border:0;color:var(--text-slab);cursor:pointer;padding:3px;
  border-radius:6px;line-height:0}
.sterge-linie:hover{color:var(--rosu);background:var(--rosu-slab)}

.totaluri{font-size:14.5px;margin-bottom:14px}
.totaluri div{display:flex;justify-content:space-between;padding:4px 0;color:var(--text-sec)}
/* Reducerea, în lista de totaluri: verde, ca să se citească drept câștig. */
.totaluri div.reducere{color:var(--verde);font-weight:600}

/* Îndemnul: cât mai lipsește până la reducere. Când e câștigată, devine verde. */
.indemn-reducere{font-size:13px;line-height:1.45;margin:10px 0 0;padding:9px 12px;
  border-radius:var(--r-mic);background:var(--chihlimbar-slab);color:#6b4700}
.indemn-reducere b{font-weight:750}
.indemn-reducere.castigat{background:var(--verde-slab);color:#005c07}

.totaluri div.mare{color:var(--text);font-size:19px;font-weight:800;padding-top:11px;
  margin-top:6px;border-top:1px solid var(--rama);letter-spacing:-.02em}
.gol{text-align:center;padding:56px 20px;color:var(--text-slab)}
.gol svg{margin:0 auto 14px;color:var(--rama-tare)}

/* ----------------------------------------------------------- formularele */
.doua-coloane{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:34px;
  align-items:start;padding-top:30px;padding-bottom:64px}
.rezumat-lipit{position:sticky;top:calc(var(--antet) + 22px)}
fieldset{border:0;padding:0;margin:0 0 34px}
/* Titlurile de secțiune din formular: de două ori mai mari și negre, ca
   secțiunile să se distingă dintr-o privire. Spațierea între litere scade —
   la 25 px, cea de dinainte ar fi întins textul peste tot rândul. */
legend{font-size:25px;font-weight:750;letter-spacing:.01em;text-transform:uppercase;
  color:var(--text);padding:0;margin-bottom:18px;line-height:1.15}
/* Formular strâns: rândurile stau aproape, ca ochiul să nu alerge. Câmpurile
   rămân destul de înalte cât să fie ușor de atins pe telefon. */
.camp{margin-bottom:11px}
.camp label{display:block;font-size:13.5px;font-weight:650;margin-bottom:4px;color:#334155}
.camp .ajutor{font-size:12.5px;color:var(--text-slab);font-weight:500;margin-left:6px}
.ajutor-camp{font-size:12.5px;color:var(--text-slab);margin:0 0 6px;line-height:1.4}
.ajutor-camp b{font-weight:650;color:var(--text-sec)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--rama-tare);border-radius:9px;
  font:inherit;font-size:15px;background:var(--camp);color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-slab)}
input.gresit,select.gresit{border-color:#f87171;background:var(--rosu-slab)}
textarea{resize:vertical;min-height:70px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.eroare-camp{color:var(--rosu);font-size:13px;margin-top:5px;font-weight:600}
.doi{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.trei{display:grid;grid-template-columns:2fr 1.4fr .9fr;gap:11px}
@media(max-width:640px){.doi,.trei{grid-template-columns:1fr}}

.comutator{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.comutator label{position:relative;cursor:pointer}
.comutator input{position:absolute;opacity:0}
.comutator .fata{display:block;border:1.5px solid var(--rama-tare);border-radius:12px;
  padding:11px 14px;background:var(--camp);transition:border-color .15s,box-shadow .15s,background .15s}
.comutator .fata b{display:block;font-size:15px;font-weight:700}
.comutator .fata span{font-size:13px;color:var(--text-slab)}
.comutator input:checked + .fata{border-color:var(--accent);background:var(--accent-slab);
  box-shadow:0 0 0 3px rgba(29,78,216,.10)}
.comutator input:focus-visible + .fata{outline:2px solid var(--accent);outline-offset:2px}

/* Câmpurile care se completează din ANAF, cât timp sunt blocate: se văd, dar
   se citește imediat că nu sunt de scris. Nu le stingem de tot — datele de pe
   factură trebuie să rămână lizibile. */
input.blocat, select.blocat{
  background:var(--card);border-color:var(--rama);color:var(--text-sec);
  cursor:default;
}
select.blocat{pointer-events:none}
input.blocat:focus, select.blocat:focus{box-shadow:none;border-color:var(--rama)}

/* Bifa „Livrează la aceeași adresă" — mai mare, ușor de nimerit cu degetul. */
.bifa{display:flex;align-items:center;gap:11px;font-weight:600;font-size:15px;
  cursor:pointer;margin:0}
.camp label.bifa{display:flex}
.nota-bifa{font-size:12.5px;color:var(--text-slab);margin:6px 0 0 33px;line-height:1.4}

.bifa input[type=checkbox]{
  width:22px;height:22px;margin:0;flex:none;accent-color:var(--accent);cursor:pointer;
}

.rand-cui{display:flex;gap:10px}
.rand-cui input{flex:1}
.stare-anaf{font-size:13px;margin-top:7px;font-weight:600;min-height:19px}
.stare-anaf.bine{color:var(--verde)}
.stare-anaf.rau{color:var(--chihlimbar)}
.stare-anaf.astept{color:var(--text-slab)}

/* --------------------------------------------------------------- diverse */
.referinta-plata{font-size:13.5px;line-height:1.65;color:var(--text-sec);
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--rama)}
.referinta-plata b{color:var(--text);font-weight:650}

.caseta{border-radius:var(--r);padding:15px 17px;font-size:14.5px;line-height:1.6}
.caseta.info{background:var(--accent-slab);color:#1e3a8a}
.caseta.atentie{background:var(--chihlimbar-slab);color:#78350f}
.caseta.bine{background:var(--verde-slab);color:#14532d}
.caseta.rau{background:var(--rosu-slab);color:#7f1d1d}
.caseta b{font-weight:700}

.pasi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;
  padding:34px;background:var(--card);border-radius:var(--r-mare);
  box-shadow:var(--umbra)}
.pas .nr{width:31px;height:31px;border-radius:9px;background:var(--text);color:#fff;
  display:grid;place-items:center;font-weight:750;font-size:14px;margin-bottom:11px}
.pas b{display:block;font-size:15.5px;margin-bottom:4px}
.pas p{color:var(--text-sec);font-size:14px;margin:0}

.subsol{border-top:1px solid var(--rama);background:var(--card);padding:34px 0;margin-top:auto;
  color:var(--text-sec);font-size:14px}
.subsol-firma{line-height:1.8;max-width:56ch}
.subsol-firma a{color:inherit}
.subsol-firma a:hover{color:var(--accent)}

.subsol .container{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

.mesaj-flotant{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);
  background:var(--text);color:#fff;padding:12px 20px;border-radius:11px;font-size:14.5px;
  font-weight:600;z-index:200;box-shadow:var(--umbra-ridicat);transition:transform .3s;
  max-width:calc(100% - 40px)}
.mesaj-flotant.vizibil{transform:translate(-50%,0)}

/* ----------------------------------------------------------------- panou */
.panou-cap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.filtre{display:flex;gap:7px;flex-wrap:wrap}
.filtre a{padding:7px 14px;border-radius:999px;font-size:13.5px;
  font-weight:650;color:var(--text-sec);background:var(--card)}
.filtre a.activ{background:var(--text);color:#fff;border-color:var(--text)}
.filtre a:hover{text-decoration:none;border-color:var(--rama-tare)}
.fise{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  margin-bottom:24px}
.fisa{background:var(--card);border-radius:var(--r);padding:16px 18px}
.fisa .val{font-size:25px;font-weight:800;letter-spacing:-.02em}
.fisa .et{font-size:12.5px;color:var(--text-slab);font-weight:650;text-transform:uppercase;
  letter-spacing:.05em}

table.tabel{width:100%;border-collapse:collapse;background:var(--camp);border:1px solid var(--rama);
  border-radius:var(--r);overflow:hidden;font-size:14.5px}
table.tabel th{text-align:left;padding:12px 15px;background:var(--card);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-slab);font-weight:700;
  border-bottom:1px solid var(--rama);white-space:nowrap}
table.tabel td{padding:13px 15px;border-bottom:1px solid var(--rama);vertical-align:top}
table.tabel tr:last-child td{border-bottom:0}
table.tabel tbody tr:hover{background:var(--card)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.stare{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:4px 10px;border-radius:999px;white-space:nowrap}
.stare::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.stare.noua{background:var(--chihlimbar-slab);color:var(--chihlimbar)}
.stare.platita{background:var(--accent-slab);color:var(--accent-inchis)}
.stare.livrata{background:var(--verde-slab);color:var(--verde)}
.stare.anulata{background:#f1f5f9;color:var(--text-slab)}

.jurnal{list-style:none;padding:0;margin:0;font-size:13.5px}
.jurnal li{padding:9px 0;border-bottom:1px solid var(--rama);display:flex;gap:12px}
.jurnal li:last-child{border-bottom:0}
.jurnal .cand{color:var(--text-slab);white-space:nowrap;font-variant-numeric:tabular-nums}
.jurnal .det{color:var(--text-sec);word-break:break-word}

.intrare-panou{max-width:390px;margin:90px auto;padding:0 22px}

@media(max-width:920px){
  .ghid-cap,.doua-coloane{grid-template-columns:1fr}
  .ghid-cap .coperta-mare,.rezumat-lipit{position:static}
  .ghid-cap{gap:26px}
}
@media(max-width:560px){
  /* Întreruperea de rând pusă pentru ecrane late strică titlul pe telefon:
     acolo textul se rupe singur, unde trebuie. */
  br.doar-lat{display:none}
  /* Subtitlul lung ar împinge antetul pe trei rânduri pe telefon.
     Acolo numele mărcii e destul; restul se citește oricum în pagină. */
  .marca small{display:none}
  .hero{padding:40px 0 26px}
  .nav a.leg{display:none}
  .sectiune{padding-bottom:48px}
  .pasi{padding:22px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   MIȘCARE
   Regula: mișcarea slujește citirea, nu se remarcă singură. Nimic nu se mișcă
   mai mult de ~20px și nimic nu durează mai mult de 0,6s. Tot blocul se stinge
   la „prefers-reduced-motion" (vezi regula de la finalul foii).
   ========================================================================== */

@keyframes urca {
  from { opacity:0; transform:translateY(18px) }
  to   { opacity:1; transform:none }
}
@keyframes urca-putin {
  from { opacity:0; transform:translateY(9px) }
  to   { opacity:1; transform:none }
}
@keyframes apare {
  from { opacity:0 } to { opacity:1 }
}
@keyframes pop {
  0%   { transform:scale(1) }
  40%  { transform:scale(1.32) }
  100% { transform:scale(1) }
}
@keyframes respira {
  0%,100% { transform:translate(0,0) scale(1) }
  50%     { transform:translate(2%,-2%) scale(1.06) }
}
@keyframes alunecare-pret {
  from { opacity:0; transform:translateY(7px) }
  to   { opacity:1; transform:none }
}

/* --------------------------------------------------- intrarea în pagină */
/* Antetul și eroul intră singure, în cascadă, imediat ce se încarcă pagina. */
.antet          { animation:apare .5s ease both }
/* Eroul folosește aceeași mișcare măsurată ca restul site-ului: opacitatea în
   900 ms, deplasarea de 30 px în 700 ms. Două animații pe element, fiindcă un
   singur @keyframes nu poate avea două durate. */
.hero .eticheta,
.hero h1,
.hero p.intro,
.hero .puncte li{
  animation:intra-opacitate 900ms cubic-bezier(.42,0,.58,1) both,
            intra-deplasare 700ms cubic-bezier(.42,0,.58,1) both;
}
.hero .eticheta { animation-delay:0ms, 0ms }
.hero h1        { animation-delay:70ms, 70ms }
.hero p.intro   { animation-delay:140ms, 140ms }
.hero-foto      { animation-delay:100ms, 100ms }
.hero .puncte li{ animation-delay:210ms, 210ms }
.hero .puncte li:nth-child(1){ animation-delay:210ms, 210ms }
.hero .puncte li:nth-child(2){ animation-delay:270ms, 270ms }
.hero .puncte li:nth-child(3){ animation-delay:330ms, 330ms }

/* Petele colorate din spatele eroului se mișcă foarte încet, ca o respirație. */
.hero::before { animation:respira 18s ease-in-out infinite }

/* Pagina ghidului: coloanele intră una după alta. */
/* --------------------------------------- capul paginii unui ghid

   Aceeași mișcare ca la carduri, dar jucată la încărcare, fiindcă tot ce e
   aici e deja pe ecran. Ca să iasă IDENTIC cu apariția la derulare, opacitatea
   și deplasarea au durate diferite (900 / 700 ms) — imposibil cu un singur
   @keyframes, deci sunt două animații pe același element.

   Sunt animații CSS, nu clase puse din JavaScript: elementele astea nu se
   ascund niciodată: dacă JavaScript-ul nu pornește, pagina rămâne întreagă. */
@keyframes intra-opacitate { from { opacity:0 } to { opacity:1 } }
@keyframes intra-deplasare { from { transform:translateY(30px) } to { transform:none } }

.intra-la-incarcare{
  animation:intra-opacitate 900ms cubic-bezier(.42,0,.58,1) both,
            intra-deplasare 700ms cubic-bezier(.42,0,.58,1) both;
}
/* Decalajul dintre ele: destul cât să se citească o ordine, prea puțin cât să
   aștepți. Coperta și panoul de cumpărare pleacă odată cu titlul — ele sunt
   motivul pentru care omul a intrat pe pagină. */
.ghid-cap .etichete.intra-la-incarcare      { animation-delay:0ms, 0ms }
.ghid-cap h1.intra-la-incarcare             { animation-delay:60ms, 60ms }
.ghid-cap > div:first-child > p.intra-la-incarcare { animation-delay:120ms, 120ms }
.ghid-cap .cifre.intra-la-incarcare         { animation-delay:180ms, 180ms }
.ghid-cap .proza.intra-la-incarcare         { animation-delay:240ms, 240ms }
.ghid-cap .coperta-mare.intra-la-incarcare  { animation-delay:80ms, 80ms }
.ghid-cap .panel.intra-la-incarcare         { animation-delay:180ms, 180ms }

/* ------------------------------------------------- apariția la derulare */
/* Elementele marcate în JS pornesc ascunse și apar când ajung în ecran. */
/* Valorile de aici NU sunt din ochi: le-am măsurat pe apple.com/ro/iphone,
   cadru cu cadru, în Chrome (6 septembrie 2026).

     pornire      elementul începe când marginea lui de sus atinge exact
                  marginea de jos a ecranului — deci mișcarea e deja pornită
                  când ajunge sub ochii tăi, de-asta pare fluidă, nu bruscă
     opacitate    0 → 1 în 900 ms
     deplasare    30 px de jos în sus, în 700 ms
     curba        simetrică: cubic-bezier(.42, 0, .58, 1), adică ease-in-out

   Deplasarea se termină cu 200 ms ÎNAINTEA estompării: elementul „se așază"
   întâi și abia apoi devine complet opac. Ăsta e amănuntul care face
   diferența — cu durate egale, efectul iese sec.

   Ei o fac din JavaScript, cadru cu cadru. Aici e o tranziție CSS: arată
   identic și costă mult mai puțin. */
/* Starea ascunsă și tranziția stau în DOUĂ clase, nu în una — dinadins.
   Dacă ar fi împreună, elementul (care e deja desenat, vizibil) ar începe să
   se estompeze ÎNAPOI, spre starea ascunsă, chiar la încărcarea paginii: ai
   vedea cardurile dispărând încet. JavaScript-ul pune întâi `apare-la-derulare`
   (fără tranziție), forțează browserul să rețină starea ascunsă, și abia apoi
   adaugă `cu-miscare`. Așa singura mișcare care se joacă e cea de intrare. */
.apare-la-derulare {
  opacity:0;
  transform:translateY(30px);
  will-change:opacity, transform;
}
.apare-la-derulare.cu-miscare {
  transition:opacity 900ms cubic-bezier(.42,0,.58,1),
             transform 700ms cubic-bezier(.42,0,.58,1);
}
.apare-la-derulare.vizibil { opacity:1; transform:none }

/* --------------------------------------------------------------- carduri */
/* Ridicarea, coperta și lumina stau sus, lângă restul stilului plăcii. */
.produs .btn-primar { transition:background .15s, transform .28s cubic-bezier(.34,1.4,.64,1),
                                 box-shadow .28s }
.produs:hover .btn-primar { transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(29,78,216,.65) }

/* ------------------------------------------------------------- prețuri */
/* Prețul mare se schimbă cu o mică alunecare, ca să se vadă că s-a schimbat. */
.pret [data-eticheta-pret],
.placa-pret [data-eticheta-pret] { display:inline-block }
.pret [data-eticheta-pret].schimbat,
.placa-pret [data-eticheta-pret].schimbat { animation:alunecare-pret .32s cubic-bezier(.22,.8,.3,1) }

/* Pastila variantei alunecă, nu sare. */
.variante .fata { transition:background .22s cubic-bezier(.22,.8,.3,1), color .18s,
                             box-shadow .22s, transform .18s }
.variante input:checked + .fata { transform:translateY(-1px) }

/* ---------------------------------------------------------------- antet */
/* La derulare, antetul se strânge puțin și capătă umbră — semn discret că
   pagina a plecat de sus. */
.antet { transition:box-shadow .3s ease, background .3s ease }
.antet .container { transition:height .3s cubic-bezier(.22,.8,.3,1) }
.antet.derulat { box-shadow:0 1px 0 rgba(15,23,42,.06), 0 10px 30px -22px rgba(15,23,42,.5) }
.antet.derulat .container { height:58px }

/* Numărul din butonul coșului sare când se schimbă. */
.buton-cos .numar { transition:background .25s ease }
.buton-cos .numar.pop { animation:pop .42s cubic-bezier(.34,1.5,.64,1) }
.buton-cos svg { transition:transform .3s cubic-bezier(.34,1.5,.64,1) }
.buton-cos:hover svg { transform:translateY(-1px) rotate(-7deg) }

/* ------------------------------------------------------------ sertarul */
/* Liniile din coș intră una după alta când se deschide sertarul. */
.sertar.deschis .continut .linie { animation:urca-putin .38s ease both }
.sertar.deschis .continut .linie:nth-child(1){ animation-delay:.06s }
.sertar.deschis .continut .linie:nth-child(2){ animation-delay:.11s }
.sertar.deschis .continut .linie:nth-child(3){ animation-delay:.16s }
.sertar.deschis .continut .linie:nth-child(4){ animation-delay:.21s }
.sertar.deschis .continut .linie:nth-child(n+5){ animation-delay:.26s }
.linie { transition:opacity .25s ease, transform .25s ease }
.linie.iese { opacity:0; transform:translateX(26px) }

/* --------------------------------------------------------- pași, panel */
.pas { animation:urca-putin .5s ease both }
.pasi.vizibil .pas:nth-child(1){ animation-delay:.05s }
.pasi.vizibil .pas:nth-child(2){ animation-delay:.13s }
.pasi.vizibil .pas:nth-child(3){ animation-delay:.21s }
.pasi.vizibil .pas:nth-child(4){ animation-delay:.29s }
.pas .nr { transition:transform .3s cubic-bezier(.34,1.5,.64,1), background .3s }
.pasi:hover .pas:hover .nr { transform:scale(1.12) rotate(-5deg); background:var(--accent) }

/* Rândurile din cuprins se subliniază la trecerea mouse-ului. */
/* Rândurile de cuprins stau pe loc la trecerea mouse-ului. Deplasarea lor
   făcea textul să „unduiască" și îngreuna citirea listei. */
.cuprins li { transition:color .2s ease }
.cuprins li:hover { color:var(--accent-inchis) }

/* ------------------------------------------------------------- afișul */
.afis { border-radius:var(--r-mare); overflow:hidden;
  box-shadow:var(--umbra); background:var(--card) }
.afis img { width:100%; display:block; transition:transform .6s cubic-bezier(.22,.8,.3,1) }
.afis:hover img { transform:scale(1.015) }

/* -------------------------------------------------------- date-cheie */
.cifre { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 0 }
.cifra { flex:1; min-width:120px; background:var(--card);
  border-radius:var(--r); padding:14px 16px; text-align:center;
  transition:transform .3s cubic-bezier(.22,.8,.3,1), border-color .3s, box-shadow .3s }
.cifra:hover { transform:translateY(-3px); border-color:var(--rama-tare); box-shadow:var(--umbra) }
.cifra b { display:block; font-size:23px; font-weight:800; letter-spacing:-.03em;
  color:var(--accent-inchis) }
.cifra span { font-size:12.5px; color:var(--text-slab); font-weight:650 }

/* ---------------------------------------------- oprirea totală a mișcării */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after {
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .apare-la-derulare, .apare-la-derulare.cu-miscare {
    opacity:1 !important; transform:none !important }
}

/* ==========================================================================
   PANOUL CU REDUCEREA — locul fotografiei din erou

   E singurul element din pagină care are voie să se miște continuu, fiindcă
   are un singur lucru de spus și trebuie observat. Mișcarea e lentă și fără
   contur ascuțit: două pete de culoare care se rotesc încet una peste alta.
   La „prefers-reduced-motion" rămâne un fundal fix, la fel de citibil.
   ========================================================================== */

.promo{
  position:relative;margin:0;border-radius:24px;overflow:hidden;
  background:#0b1020;color:#fff;min-height:340px;display:grid;place-items:center;
  padding:44px 34px;text-align:center;
  box-shadow:0 2px 8px rgba(15,23,42,.06), 0 28px 60px -28px rgba(15,23,42,.45);
}

/* Petele colorate. Sunt pe un strat propriu, ca textul de deasupra să rămână
   perfect stabil — dacă s-ar mișca fundalul împreună cu litera, s-ar citi greu. */
.promo-fundal{
  position:absolute;inset:-40%;
  background:
    radial-gradient(38% 38% at 30% 32%, rgba(37,99,235,.85), transparent 68%),
    radial-gradient(34% 34% at 72% 62%, rgba(16,185,129,.70), transparent 68%),
    radial-gradient(30% 30% at 55% 20%, rgba(139,92,246,.55), transparent 70%);
  animation:promo-roteste 22s linear infinite;
  will-change:transform;
}
@keyframes promo-roteste{
  from{transform:rotate(0deg) scale(1.05)}
  to  {transform:rotate(360deg) scale(1.05)}
}

.promo-continut{position:relative;z-index:1;max-width:22ch}

.promo-eticheta{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 14px;
  margin-bottom:18px;
}

.promo-cifra{
  font-size:clamp(64px,9vw,104px);font-weight:800;line-height:1;
  letter-spacing:-.05em;display:flex;align-items:baseline;justify-content:center;
  animation:promo-respira 4.5s ease-in-out infinite;
}
.promo-minus{font-size:.55em;font-weight:700;margin-right:.04em}
.promo-procent{font-size:.46em;font-weight:700;margin-left:.04em}
@keyframes promo-respira{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.045)}
}

.promo-text{
  font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.9);
  margin:16px 0 24px;letter-spacing:-.01em;
}
.promo-text b{color:#fff;font-weight:750}

.promo .btn-primar{background:#fff;color:#0b1020;font-weight:650}
.promo .btn-primar:hover{background:rgba(255,255,255,.88)}

@media(max-width:900px){
  .promo{min-height:280px;padding:36px 26px}
}

@media (prefers-reduced-motion:reduce){
  .promo-fundal{animation:none;transform:rotate(28deg) scale(1.05)}
  .promo-cifra{animation:none}
}