/* =========================================================
   CAMERE.MD — Sections
   Portfolio · Process · Services · Pricing · About/Trust ·
   CTA · Contact · Lightbox
   ========================================================= */

/* Portofoliul (grila, cardurile si fereastra de proiect) sta acum in
   assets/css/portfolio.css, impreuna cu pragurile lui de ecran. */

/* =========================================================
   03 · PROCESS — signature scroll storytelling
   ========================================================= */
.proc{position:relative;overflow:hidden}
.proc-inner{position:relative;z-index:2}

.proc-track{
  position:relative;
  margin-top:clamp(44px,6vw,76px);
  --pp:0;
}

/* horizontal rail (desktop)
   A scaled div rather than an SVG dash: one composited property,
   and no dependence on how the UA resolves pathLength under a
   non-uniform viewBox. */
.proc-rail{
  position:absolute;
  top:26px;
  left:0;right:0;
  height:2px;
  display:none;
  background:var(--border);
}
.proc-rail span{
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:scaleX(var(--pp));
  transform-origin:left center;
}

/* vertical rail (mobile) */
.proc-rail-v{
  position:absolute;
  top:0;bottom:0;
  left:25px;
  width:2px;
  background:var(--border);
}
.proc-rail-v::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent);
  transform:scaleY(var(--pp));
  transform-origin:top center;
}

.proc-steps{
  position:relative;
  display:grid;
  gap:var(--sp-32) var(--sp-24);
}

.proc-step{
  position:relative;
  padding-left:var(--sp-64);
}

.proc-node{
  position:absolute;
  left:0;top:0;
  display:grid;
  place-items:center;
  width:52px;aspect-ratio:1;
  border-radius:50%;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--text-faint);
  font-family:var(--f-mono);
  font-size:var(--fs-label);
  letter-spacing:.04em;
  transform:scale(.82);
  transition:
    transform 420ms var(--e-spring),
    border-color var(--t-ui) var(--e-out),
    color var(--t-ui) var(--e-out),
    background-color var(--t-ui) var(--e-out);
}
.proc-node::after{
  content:"";
  position:absolute;
  inset:-var(--sp-8);
  border-radius:50%;
  border:1px solid var(--accent-line);
  opacity:0;
  transition:opacity var(--t-comp) var(--e-out);
}
.proc-step.is-on .proc-node{
  transform:scale(1);
  border-color:var(--accent);
  color:var(--accent-text);
  background:var(--surface-raised);
}
.proc-step.is-on .proc-node::after{opacity:1}

.proc-step h3{
  font-size:var(--fs-h4);
  text-transform:uppercase;
  letter-spacing:-.005em;
  color:var(--text-faint);
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--t-comp) var(--e-out),transform var(--t-comp) var(--e-out),color var(--t-ui) var(--e-out);
}
.proc-step p{
  margin-top:var(--sp-8);
  font-size:var(--fs-body);
  max-width:34ch;
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--t-comp) var(--e-out) 60ms,transform var(--t-comp) var(--e-out) 60ms;
}
.proc-step.is-on h3{opacity:1;transform:none;color:var(--text)}
.proc-step.is-on p{opacity:1;transform:none}

.proc-foot{
  margin-top:clamp(44px,5vw,72px);
  padding-top:var(--sp-32);
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-24);
}
.proc-claim{
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  font-weight:600;
  line-height:1.24;
  color:var(--text);
  max-width:34ch;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.proc-claim em{font-style:normal;color:var(--accent-text)}

/* =========================================================
   04 · SERVICES
   ========================================================= */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-16);
  margin-top:clamp(40px,4vw,64px);
}

.svc{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-12);
  padding:var(--sp-24);
  min-height:224px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--t-comp) var(--e-out),border-color var(--t-ui) var(--e-out);
}
.svc:hover{transform:translateY(-5px);border-color:var(--accent-line)}
.svc-shadow{
  position:absolute;inset:0;
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--t-comp) var(--e-out);
}
.svc:hover .svc-shadow{opacity:1}

.svc h3{
  font-size:var(--fs-h3);
  text-transform:uppercase;
  letter-spacing:-.005em;
  transition:transform var(--t-micro) var(--e-out);
}
.svc:hover h3{transform:translateX(4px)}
.svc p{font-size:var(--fs-body);flex:1}
.svc .tlink{margin-top:2px}

.svc .ring{width:46px}
.svc:hover .ring{border-color:var(--accent)}
.svc:hover .ring::before{opacity:1;rotate:150deg}

/* the ambient motif: a faint reticle field, revealed on hover.
   Texture, not illustration. */
.svc-motif{
  position:absolute;
  right:-30px;bottom:-40px;
  width:190px;aspect-ratio:1;
  z-index:-1;
  color:var(--accent-text);
  opacity:0;
  transform:scale(.9) rotate(-8deg);
  transition:opacity var(--t-comp) var(--e-out),transform 640ms var(--e-out);
}
.svc:hover .svc-motif{opacity:.09;transform:scale(1) rotate(0deg)}
.svc-motif svg{width:100%;height:100%}

/* the dominant one */
.svc--lead{
  grid-column:span 2;
  flex-direction:row;
  align-items:flex-end;
  gap:var(--sp-24);
  padding:0;
  border:0;
  background:var(--surface);
  min-height:320px;
}
.svc--lead .svc-media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.svc--lead .svc-media img{
  width:100%;height:100%;
  object-fit:cover;
  opacity:.42;
  transform:scale(1.02);
  transition:transform 700ms var(--e-out),opacity var(--t-comp) var(--e-out);
}
.svc--lead::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,rgba(6,9,15,.93) 0%,rgba(6,9,15,.72) 48%,rgba(6,9,15,.3) 100%);
}
.svc--lead:hover .svc-media img{transform:scale(1.06);opacity:.5}
.svc--lead .svc-lead-body{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-16);
  padding:var(--sp-32);
  max-width:44ch;
}
.svc--lead h3{color:var(--on-dark);font-size:var(--fs-h3)}
/* Voalul de deasupra fotografiei e rgba(6,9,15,.93): pe tema deschisa,
   --text-muted dadea 3.09 aici. */
.svc--lead p{color:var(--on-dark-muted)}
.svc--lead a{color:var(--on-dark-accent)}
.svc--lead .ring{border-color:var(--border)}
.svc--lead .svc-tag{
  align-self:flex-start;
  padding:var(--sp-4) var(--sp-12);
  border-radius:var(--r-pill);
  /* --accent-strong, nu --accent: albul pe #EA6B08 da 3.18, pe #B85105 da 4.98 */
  background:var(--accent-strong);
  color:var(--on-accent);
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* services closing panel */
.svc--panel{
  grid-column:span 2;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-24);
  background:var(--surface-sunken);
  border-style:dashed;
  border-color:var(--border-strong);
  min-height:0;
}
.svc--panel:hover{transform:none}
.svc--panel h3{font-size:var(--fs-h4)}

/* =========================================================
   05 · PRICING
   ========================================================= */
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  /* stretch, nu start: cardurile primesc inaltimea randului, deci flex:1 de
     pe .price-list are in ce sa creasca si CTA-ul cade la aceeasi cota in
     toate trei, indiferent cate randuri are lista. */
  align-items:stretch;
  gap:var(--sp-16);
  margin-top:clamp(40px,4vw,64px);
}

/* Titlul familiei. Ocupa randul intreg si imparte grila in doua: trei pachete
   de locuinta sus, doua de afacere jos plus iesirea spre constructor. */
.price-grup{
  grid-column:1/-1;
  display:flex;
  align-items:baseline;
  gap:var(--sp-16);
  flex-wrap:wrap;
  padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--border);
}
.price-grup:not(:first-child){margin-top:var(--sp-32)}
/* Deliberat mai mic decat titlul cardului: e o despartire, nu un al doilea
   titlu care sa concureze cu numele pachetelor de sub el. */
.price-grup h3{
  font-size:var(--fs-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-text);
}
.price-grup p{font-size:var(--fs-small);color:var(--text-muted)}

.price{
  position:relative;
  display:flex;
  flex-direction:column;
  /* 40px sus la toate, nu doar la cel recomandat: banda de badge e spatiu
     rezervat in geometria comuna, nu un plus dat cardului evidentiat. */
  padding:var(--sp-40) var(--sp-24) var(--sp-32);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
  transition:transform var(--t-comp) var(--e-out),border-color var(--t-ui) var(--e-out);
}
.price:hover{transform:translateY(-8px);border-color:var(--border-strong)}
.price-shadow{
  position:absolute;inset:0;
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-comp) var(--e-out);
}
.price:hover .price-shadow{opacity:1}

.price-head{
  display:flex;
  align-items:center;
  gap:var(--sp-16);
  padding-bottom:var(--sp-20);
  border-bottom:1px solid var(--border);
}
.price-head h3{
  font-size:var(--fs-h4);
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.price-head p{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}

/* Pretul de intrare. Stă imediat sub antet, inaintea listei: e a doua
   informatie pe care o cauta omul, dupa „pentru cine e". Cat timp sectiunea
   se numea „Preturi" si n-avea niciun pret, intrebarea ramanea fara raspuns
   pana in fereastra. */
.price-de{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding-top:var(--sp-20);
}
.price-de>span{
  font-size:var(--fs-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.price-de b{
  font-family:var(--f-head);
  font-size:var(--fs-stat);
  line-height:1;
  letter-spacing:-.01em;
}
.price-de b i{
  font-style:normal;
  font-size:var(--fs-label);
  letter-spacing:.06em;
  color:var(--text-muted);
}
.price-de small{font-size:var(--fs-small);color:var(--text-muted)}

/* A doua cifra a cardului: cat costa pe luna. Nu are voie sa se bata cu
   pretul de deasupra — jumatate din marime — dar nici sa arate ca o nota de
   subsol, fiindca pentru multi ea e cifra care conteaza. Bordura punctata o
   leaga de bonul de sub pachete: acelasi lucru, spus in doua locuri. */
.price-rate{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-4) var(--sp-8);
  margin-top:var(--sp-12);
  padding:var(--sp-8) var(--sp-12);
  border:1px dashed var(--accent-line);
  border-radius:var(--r-sm);
  background:var(--accent-wash);
}
.price-rate b{
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--accent-text);
}
.price-rate b i{font-style:normal;font-size:var(--fs-label);letter-spacing:.06em}
.price-rate small{font-size:var(--fs-small);color:var(--text-muted)}

.price-list{padding-block:var(--sp-24);flex:1}
.price-list li{
  display:flex;
  gap:var(--sp-12);
  align-items:flex-start;
  padding-block:var(--sp-8);
  font-size:var(--fs-body);
  transform:translateX(0);
  transition:transform var(--t-comp) var(--e-out);
  transition-delay:calc(var(--i,0) * 40ms);
}
.price:hover .price-list li{transform:translateX(4px)}
.price-list .ic{
  color:var(--info);
  font-size:.85em;
  margin-top:var(--sp-8);
  flex:0 0 auto;
}

/* Un singur mijloc de diferentiere: bordura. Badge-ul ramane pentru ca e
   informatie, nu decor. Scoase: bara de 3px, umbra proprie, padding-ul
   diferit si iconitele colorate - repetau acelasi mesaj de patru ori. */
.price--featured{
  border-color:var(--accent);
}

/* Ancorat in coltul cardului, nu plutind peste muchie: top/left 0 il aseaza
   pe interiorul bordurii, iar raza de sus-stanga o repeta pe cea a cardului,
   deci se imbuca in colt in loc sa iasa din el. Traieste in banda de 40px
   rezervata de .price, deci nu acopera nimic. */
.price-badge{
  position:absolute;
  top:0;left:0;
  padding:var(--sp-8) var(--sp-16);
  border-radius:var(--r-md) 0 var(--r-sm) 0;
  background:var(--accent-strong);
  color:var(--on-accent);
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* Cardul de la capatul randului: nu e un pachet, deci nu se poarta ca unul.
   Fara pret, fara badge, fond in loc de bordura plina si CTA plin — se citeste
   ca o iesire din grila, nu ca al saselea pachet. */
.price--propriu{
  border-style:dashed;
  background:var(--surface-sunken);
}
.price--propriu:hover{transform:none}
.price-propriu-text{
  flex:1;
  padding-block:var(--sp-24);
  font-size:var(--fs-body);
  color:var(--text-muted);
}

/* Puntea spre Market, sub cardurile de pachete.
   Secundar deliberat: un buton plin aici ar fi concurat cu „Alege pachetul" de
   pe fiecare card, adica exact cu ce vrem sa apese. E o iesire pentru cine nu
   cumpara un sistem, nu un al doilea indemn. */
.price-alt{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-12) var(--sp-20);
  align-items:center;
  justify-content:center;
  margin-top:var(--sp-32);
  text-align:center;
}
.price-alt p{
  margin:0;
  font-size:var(--fs-body);
  color:var(--text-muted);
}

.price-note{
  display:flex;
  gap:var(--sp-12);
  align-items:center;
  justify-content:center;
  margin-top:var(--sp-24);
  font-size:var(--fs-body);
  text-align:center;
}
.price-note .ic{color:var(--info)}

/* =========================================================
   06 · ABOUT / TRUST
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(32px,5vw,76px);
  align-items:center;
}

.about-media{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--surface-raised);
}
.about-media img{
  width:100%;height:112%;
  object-fit:cover;
  transform:translateY(var(--par,0));
  will-change:transform;
}
.about-media::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  pointer-events:none;
}

.about-badge{
  position:absolute;
  left:20px;bottom:20px;
  padding:var(--sp-16) var(--sp-20);
  border-radius:var(--r-md);
  background:rgba(10,17,28,.86);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.about-badge > b{
  display:block;
  font-family:var(--f-head);
  font-size:var(--fs-stat);
  font-weight:700;
  line-height:1;
  color:#fff;
}
.about-badge > span{
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-dark-accent);
}

.about-text{
  margin-top:var(--sp-24);
  font-size:var(--fs-lead);
  max-width:52ch;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  margin-top:var(--sp-36);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--border);
}
.stat{
  padding:var(--sp-24) var(--sp-16);
  background:var(--surface);
}
.stat > b{
  display:block;
  font-family:var(--f-head);
  font-size:var(--fs-stat);
  font-weight:700;
  line-height:1;
  color:var(--text);
  letter-spacing:-.02em;
}
.stat > span{
  display:block;
  margin-top:var(--sp-8);
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
}

.warranty{
  margin-top:var(--sp-32);
  padding-top:var(--sp-24);
  border-top:1px solid var(--border);
}
.warranty-lbl{
  display:block;
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:var(--sp-16);
}
.warranty-chips{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.warranty-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-16);
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  font-size:var(--fs-small);
  color:var(--text-muted);
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
.warranty-chip:hover{border-color:var(--accent-line);color:var(--text)}
.warranty-chip b{
  font-size:var(--fs-micro);
  letter-spacing:.08em;
  color:var(--info);
}

/* =========================================================
   07 · CTA — a dark field with one slow scan
   ========================================================= */
.cta{
  position:relative;
  background:var(--surface);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.cta-field{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(to right,var(--border-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--border-soft) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 5%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 5%,transparent 70%);
}
.cta h2{
  font-size:var(--fs-h2);
  text-transform:uppercase;
  letter-spacing:-.02em;
  /* Sectiunea a fost gandita inchisa, dar fundalul ei e var(--surface), care
     se schimba cu tema. Titlul scris fix alb ramanea alb si pe crem: 1.05,
     adica invizibil. Urmeaza tema, ca fundalul de sub el. */
  color:var(--text);
  max-width:18ch;
  margin-inline:auto;
}
.cta h2 em{font-style:normal;color:var(--accent-text)}
.cta .lead{
  margin:var(--sp-20) auto 0;
  max-width:52ch;
  font-size:var(--fs-lead);
  color:var(--text-muted);
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-16);
  justify-content:center;
  margin-top:var(--sp-40);
}
.cta-phone{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-12);
  padding:var(--sp-16) var(--sp-24);
  min-height:50px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--f-mono);
  font-size:var(--fs-lead);
  letter-spacing:.06em;
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
/* La hover devenea alb pe crem si linkul disparea sub cursor. */
.cta-phone:hover{border-color:var(--accent);color:var(--accent-text);transform:translateY(-2px)}
.cta-phone .ic{color:var(--accent-text)}

/* =========================================================
   08 · CONTACT
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,44px);
  margin-top:clamp(40px,4vw,64px);
  align-items:start;
}

.form{
  padding:clamp(24px,3vw,40px);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
  box-shadow:var(--sh-sm);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-16);
}
.field{position:relative;margin-bottom:var(--sp-16)}
.field label{
  display:block;
  margin-bottom:var(--sp-8);
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  transition:color var(--t-ui) var(--e-out);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:var(--sp-16) var(--sp-16);
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:var(--fs-body);
  transition:border-color var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
.field textarea{resize:vertical;min-height:118px}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6270' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px;
  padding-right:var(--sp-40);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--text-faint)}

/* the underline is a transform, never a border-width change */
.field-line{
  position:absolute;
  left:1px;right:1px;bottom:0;
  height:2px;
  background:var(--accent);
  border-radius:0 0 var(--r-sm) var(--r-sm);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-ui) var(--e-out);
  pointer-events:none;
}
.field:focus-within .field-line{transform:scaleX(1)}
.field:focus-within label{color:var(--accent-text)}
.field:focus-within input,
.field:focus-within select,
.field:focus-within textarea{
  border-color:var(--accent-line);
  background:var(--surface-raised);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{border-color:var(--error)}
.field-err{
  display:none;
  margin-top:var(--sp-8);
  font-size:var(--fs-label);
  color:var(--error);
}
.field.has-error .field-err,
.form-consent.has-error .field-err{display:block}
.form-consent.has-error > input{outline:2px solid var(--error);outline-offset:2px;border-radius:var(--r-xs)}

.form-consent{
  display:flex;
  gap:var(--sp-12);
  align-items:flex-start;
  margin-bottom:var(--sp-20);
  font-size:var(--fs-label);
}
.form-consent input{
  width:18px;height:18px;
  margin-top:3px;
  accent-color:var(--accent);
  flex:0 0 auto;
}

/* ---------- alegerea canalului de raspuns ----------
   Formularul preda pana acum mesajul la WhatsApp si atat, deci cine n-avea
   WhatsApp n-avea pe unde sa scrie. Alegerea nu e o preferinta de stil: e
   singurul loc in care omul poate spune pe ce il gasesti.

   Sunt butoane-radio, nu un `select`: cinci optiuni care incap pe un rand se
   citesc dintr-o privire, iar un meniu inchis ar ascunde exact informatia
   pentru care s-a facut campul. Marca fiecarui serviciu isi pastreaza culoarea
   doar pe pictograma — destul cat sa se recunoasca, prea putin cat sa concureze
   cu butonul de trimis. */
.channel-pick{
  border:0;
  padding:0;
  margin:0 0 var(--sp-20);
}
.channel-pick legend{
  padding:0;
  margin-bottom:var(--sp-12);
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.channel-opts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
}
.channel-opt{cursor:pointer}
/* Butonul ramane in pagina pentru tastatura si pentru cititoarele de ecran;
   `appearance:none` singur l-ar fi lasat vizibil ca patrat gol. */
.channel-opt input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.channel-opt span{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-16);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
  font-size:var(--fs-label);
  color:var(--text-muted);
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
.channel-opt:hover span{border-color:var(--border-strong);color:var(--text)}
.channel-opt input:checked + span{
  border-color:var(--accent);
  color:var(--text);
  background:var(--surface);
}
/* Conturul de focus trebuie sa apara pe ce se vede, nu pe butonul ascuns. */
.channel-opt input:focus-visible + span{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.channel-opt .ic{width:1em;height:1em}
.channel-opt--wa i{color:#25d366}
.channel-opt--vb i{color:#7360f2}
.channel-opt--tg i{color:#2aabee}

/* Capcana pentru roboti. Scoasa din ecran, nu ascunsa cu `display:none`:
   scripturile simple sar peste campurile ascunse asa, dar completeaza tot ce
   gasesc in arborele paginii. */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.form-status{
  display:flex;
  gap:var(--sp-12);
  align-items:flex-start;
  margin-top:var(--sp-16);
  padding:var(--sp-16) var(--sp-16);
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface-sunken);
  font-size:var(--fs-body);
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--t-comp) var(--e-out),transform var(--t-comp) var(--e-out);
}
/* Continuarea, in panoul de stare. Cererea e deja inregistrata cand se vede
   butonul asta — e un drum in plus, nu pasul care lipseste. De aceea e legatura
   discreta, nu buton plin: altfel ar arata ca trimiterea n-a fost completa. */
.form-status-go{
  margin-left:auto;
  align-self:center;
  flex:0 0 auto;
  padding:var(--sp-8) var(--sp-16);
  border-radius:var(--r-sm);
  border:1px solid currentColor;
  font-size:var(--fs-label);
  white-space:nowrap;
  color:inherit;
}
/* La hover NU se foloseste `background:currentColor`: fundalul si textul ar
   ajunge amandoua pe aceeasi culoare, iar eticheta ar disparea. Se ingroasa
   doar conturul si se pune un fundal din paleta. */
.form-status-go:hover{background:var(--surface-raised)}
.form-status[hidden]{display:none}
.form-status.is-on{opacity:1;transform:none}
.form-status .ic{margin-top:var(--sp-4);flex:0 0 auto}
.form-status--ok{border-color:rgba(15,94,98,.35);background:rgba(15,94,98,.07)}
.form-status--ok .ic{color:var(--info)}
.form-status--err{border-color:rgba(210,69,69,.4);background:rgba(210,69,69,.06)}
.form-status--err .ic{color:var(--error)}

.btn[data-state="sending"]{pointer-events:none;opacity:.75}

/* contact side */
.contact-side{display:grid;gap:var(--sp-12)}
.info-card{
  display:flex;
  align-items:center;
  gap:var(--sp-16);
  padding:var(--sp-16) var(--sp-20);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
  transition:border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
a.info-card:hover{border-color:var(--accent-line);transform:translateX(4px)}
.info-card .ring{width:44px}
a.info-card:hover .ring{border-color:var(--accent)}
/* `div span`, nu `span`: inelul cu pictograma e tot un span, direct in card.
   Regula il prindea si pe el, ii impunea display:block peste display:grid din
   .ring si ii anula centrarea — pictograma statea cu 9px mai sus decat centrul
   inelului, la toate cele patru carduri. */
.info-card div span{
  display:block;
  font-size:var(--fs-micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.info-card strong{
  display:block;
  margin-top:3px;
  font-family:var(--f-head);
  font-size:var(--fs-lead);
  font-weight:600;
  color:var(--text);
}

.contact-channels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-8);
  margin-top:var(--sp-4);
}
.chan{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-8);
  padding:var(--sp-16) var(--sp-8);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--surface-raised);
  font-size:var(--fs-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  transition:border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
.chan i{font-size:var(--fs-h4)}
.chan--wa i{color:#25d366}
.chan--vb i{color:#7360f2}
.chan--tg i{color:#2aabee}
.chan:hover{transform:translateY(-4px);color:var(--text);border-color:var(--border-strong)}

/* =========================================================
   LIGHTBOX
   ========================================================= */

/* =========================================================
   PACHETE — taburi, specificatii, tabel de comparatie

   Nu introduce stil nou: reia cardul `.price` cu tot ce are (bordura, umbra,
   badge, ridicarea la hover) si adauga doar ce n-avea — trei categorii intre
   care se comuta, un bloc de specificatii citibil dintr-o privire, si un tabel
   de comparatie. Toate culorile si spatiile vin din tokeni.
   ========================================================= */

.pkg-wrap{margin-top:var(--sp-32)}

/* ---------- selectorul de categorie ----------
   Trei butoane, nu trei sectiuni una sub alta. Cu cinci carduri pe categorie,
   sectiunile stivuite insemnau o pagina lunga si mult scroll ca sa compari
   doua oferte. Asa se vad toate trei deodata, cu pretul de pornire al
   fiecareia, si se schimba dintr-o apasare. */
.pkg-picker{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-12);
  margin-bottom:var(--sp-24);
}
.pkg-pick{
  display:flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-16);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
.pkg-pick:hover{border-color:var(--border-strong)}
.pkg-pick:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.pkg-pick[aria-selected="true"]{
  border-color:var(--accent-strong);
  background:var(--accent-wash);
}
.pkg-pick__text{display:grid;gap:2px;min-width:0}
.pkg-pick__text b{
  font-family:var(--f-head);font-size:var(--fs-h4);font-weight:700;color:var(--text);
}
.pkg-pick__text > span{font-size:var(--fs-small);color:var(--text-muted)}
.pkg-pick__de{font-family:var(--f-mono);color:var(--text) !important}

/* ---------- caruselul ----------
   Coloana grilei trebuie sa poata deveni mai ingusta decat cele cinci
   carduri. Altfel pista creste dupa continut si nu mai are ce derula;
   pe mobil, chiar viewportul ajunge marit de latimea ei intrinseca. */
.pkg-view{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:var(--sp-12)}
.pkg-stage{position:relative;min-width:0}

.pkg-track{
  display:flex;
  /* Implicit, un rand flex intinde toate cardurile la inaltimea celui mai
     inalt. Cand unul se desface, celelalte patru cresteau odata cu el si
     ramaneau cu un gol sub butoane — pe ecran arata ca si cum s-ar fi
     deschis toate. `start` le lasa fiecaruia inaltimea lui. */
  align-items:start;
  gap:var(--sp-16);
  width:100%;
  min-width:0;
  margin:0;padding:var(--sp-4) 0 var(--sp-16);
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  touch-action:pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;

  /* Bara de derulare se VEDE. Pana pe 2026-09-09 era ascunsa, iar sub carusel
     statea un rand de puncte care spunea doar la al catelea card esti — nu si
     cat mai e de derulat. Bara spune amandoua, si se poate trage cu mausul.
     `thin` in loc de `auto`: pe Windows bara implicita e groasa cat un deget
     si ar fi impartit sectiunea in doua. */
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
/* WebKit nu citeste `scrollbar-width`/`scrollbar-color`, deci aceleasi doua
   reguli inca o data, in dialectul lui. Fara ele, Safari si Chrome ar arata
   bara de sistem — alta grosime, alta culoare, in afara paletei paginii. */
.pkg-track::-webkit-scrollbar{height:8px}
.pkg-track::-webkit-scrollbar-track{background:transparent}
.pkg-track::-webkit-scrollbar-thumb{
  background:var(--border-strong);
  border-radius:var(--r-pill);
}
.pkg-track::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
.pkg-track:focus-visible{outline:2px solid var(--accent-strong);outline-offset:4px}

.pkg-track > .pkg{
  flex:0 0 89%;
  min-width:0;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  container:package-card / inline-size;
  gap:0;
  padding:var(--sp-40) var(--sp-20) var(--sp-24);
  scroll-snap-align:start;
}

/* Regulile vechii liste `.price` trec pe rand la tableta. Pachetele raman
   coloane la orice latime; nici butoanele, nici antetul nu au flex-basis-ul
   de 200px al acelei liste. Nu ridicam cardul in afara pistei la hover. */
.pkg-track > .pkg:hover{transform:none}
.pkg .price-head{
  flex:none;
  min-width:0;
  min-height:112px;
  align-items:flex-start;
  gap:var(--sp-12);
  padding:0 0 var(--sp-16);
  border-right:0;
}
.pkg .price-head > div{min-width:0}
.pkg .price-head .ring{width:40px;height:40px;flex:0 0 40px}
.pkg .price-head h3{line-height:1.15;text-wrap:pretty}
.pkg .price-head p{
  margin-top:var(--sp-8);
  font-size:var(--fs-small);
  line-height:1.4;
  letter-spacing:normal;
  text-transform:none;
}
.pkg .price-de{
  flex:none;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-4);
  padding-top:var(--sp-16);
}
.pkg .price-de b{color:var(--text);white-space:nowrap}
.pkg .price-de small{flex:none}
.pkg .price-list{
  flex:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-8);
  padding:0 0 var(--sp-12);
}
.pkg .price-list li{padding:0;font-size:var(--fs-small);transform:none}
.pkg .price-list .ic{margin-top:var(--sp-4)}
.pkg .pkg-spec{min-height:148px;align-content:start}
.pkg .pkg-spec li > span{min-width:0;overflow-wrap:anywhere}
/* Pe cardurile inguste, beneficiul final poate ocupa doua randuri.
   Rezervam aceleasi doua randuri la vecini, fara sa le intindem cand un
   pachet isi deschide lista „Ce include”. Pragul urmareste cardul, nu pagina. */
@container package-card (max-width:340px){
  .pkg .pkg-spec li:last-child{min-height:3.3em}
}
.pkg .pkg-actions .btn{
  flex:none;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:var(--sp-12) var(--sp-16);
  white-space:normal;
  text-align:center;
}

/* Navigarea sta in afara cardurilor, fara sa acopere pretul sau actiunile. */
.pkg-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.pkg-nav__status{font-size:var(--fs-small);font-variant-numeric:tabular-nums;color:var(--text-muted)}
.pkg-nav__buttons{display:flex;gap:var(--sp-8)}
.pkg-arrow{
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface-raised);
  color:var(--text);
  transition:border-color var(--t-micro) var(--e-out),background-color var(--t-micro) var(--e-out);
}
.pkg-arrow:hover:not([disabled]){border-color:var(--accent);background:var(--accent-wash)}
.pkg-arrow[disabled]{opacity:.35;cursor:default}
.pkg-arrow .icon{width:18px;height:18px}
.pkg-arrow--prev .icon{transform:rotate(180deg)}

@media (min-width:720px){
  .pkg-track > .pkg{flex-basis:calc((100% - var(--sp-16)) / 2)}
  .pkg .price-head{min-height:96px}
}
@media (min-width:1200px){
  .pkg-track > .pkg{flex-basis:calc((100% - 2 * var(--sp-16)) / 3)}
  .pkg .price-head{min-height:96px}
}
/* Nu exista o treapta de patru carduri: fiecare categorie are trei pachete.
   Regula de la 1600px le dadea un sfert de rand fiecaruia si lasa ultimul
   sfert gol — o gaura in dreapta pistei pe ecranele late. Trei coloane egale
   raman trei coloane egale la orice latime peste 1200px. */
@media (max-width:380px){
  .pkg .price-head{min-height:128px}
}

/* ---------- telefon si tableta ingusta: pachetele una sub alta ----------
   Pana pe 2026-09-22 sectiunea cerea doua feluri de derulare deodata: pe
   verticala pentru pagina, pe orizontala in interiorul pistei. Pe un ecran de
   375px asta insemna UN pachet vizibil si doua ascunse dupa o glisare pe care
   n-o anunta nimic in afara de o bara de derulare subtire. Masurat acolo:
   selectorul de categorie 320px, cardul 651px, sectiunea 1891px.

   Aici pista redevine o coloana. Cele trei pachete se citesc derulate normal,
   in aceeasi directie ca restul paginii, si se pot compara fara sa tii minte
   ce scria pe cel de dinainte. Caruselul ramane de la 721px in sus, unde doua
   sau trei carduri chiar incap alaturi si glisarea are ce arata. */
@media (max-width:720px){

  /* Selectorul: trei pastile pe un rand, inalte cat un buton, intr-o
     adancitura care le tine impreuna. Pretul de pornire a plecat din ele:
     statea acolo tocmai fiindca pachetele erau dupa o glisare, iar acum se
     vede pe toate trei cardurile de dedesubt. */
  .pkg-picker{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-4);
    margin-bottom:var(--sp-20);
    padding:var(--sp-4);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:var(--surface-sunken);
  }
  .pkg-pick{
    justify-content:center;
    min-height:44px;
    padding:var(--sp-8) var(--sp-4);
    border-color:transparent;
    border-radius:var(--r-sm);
    background:none;
  }
  .pkg-pick:hover{border-color:transparent}
  .pkg-pick[aria-selected="true"]{
    border-color:transparent;
    background:var(--surface-raised);
    box-shadow:var(--sh-sm);
  }
  .pkg-pick .ring,
  .pkg-pick__de,
  .pkg-pick__text > span:last-child{display:none}
  .pkg-pick__text{justify-items:center}
  .pkg-pick__text b{font-size:var(--fs-small)}
  .pkg-pick[aria-selected="true"] .pkg-pick__text b{color:var(--accent-text)}

  /* Pista: coloana, nu rand. `overflow-x:visible` scoate si bara de derulare,
     si comenzile pe care `pachete.js` le ascunde singur cand nu mai e nimic de
     derulat (`scrollWidth <= clientWidth`) — nu trebuie spus nimanui nimic. */
  .pkg-track{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--sp-12);
    padding-bottom:0;
    overflow-x:visible;
    scroll-snap-type:none;
  }
  .pkg-track > .pkg{scroll-snap-align:none}

  /* Cardul, pe toata latimea. Inaltimile minime n-au ce alinia intr-o
     coloana: existau ca pretul si butoanele sa cada la aceeasi cota in randul
     de carduri, iar aici cardurile n-au vecini laterali. */
  .pkg-track > .pkg{padding:var(--sp-24) var(--sp-20) var(--sp-20)}
  .pkg-track > .price--featured{padding-top:var(--sp-40)}
  .pkg .price-head{min-height:0;padding-bottom:var(--sp-12)}
  .pkg .pkg-spec{min-height:0;gap:6px;margin-top:var(--sp-12);padding:var(--sp-8) 0}

  /* „de la 54.767 MDL" pe un rand: pe trei randuri ocupa 95px pentru o
     informatie care se citeste dintr-o privire. */
  .pkg .price-de{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--sp-4) var(--sp-8);
    padding-top:var(--sp-12);
  }
  .pkg .price-de small{flex:1 0 100%}

  /* O singura actiune plina pe card. Pe telefon cele doua stau una sub alta,
     in ordinea in care se citesc: intai „Alege pachetul", apoi „Vezi
     detaliile". Ca sa nu para doua butoane egale — si sa nu se piarda care e
     pasul urmator — a doua ramane link subliniat, fara umplutura si fara
     bordura, dar cu aceeasi suprafata de atins. Alaturi, pe acelasi rand,
     textul ei se lipea de marginea cardului si intra sub butonul de „sus". */
  .pkg-actions{gap:var(--sp-12)}
  .pkg .pkg-actions .btn--ghost{
    width:auto;
    min-height:44px;
    padding:var(--sp-8) 0;
    border-color:transparent;
    background:none;
    text-decoration:underline;
    text-underline-offset:3px;
  }
}

/* ---------- ce include: stranse implicit, deschise la cerere ----------
   Cardul intreg iesea de peste 600px, si cu cinci pe categorie sectiunea
   redevenea un tunel de derulat. Acum la vedere raman cele patru randuri cu
   care omul alege; ce vinde pachetul se citeste dupa ce a decis ca il
   intereseaza.

   Animatia merge pe `grid-template-rows: 0fr -> 1fr`, nu pe `max-height`:
   inaltimea tinta e cea reala, deci nu trebuie ghicita o valoare „destul de
   mare" care ar face deschiderea sa para intarziata si inchiderea brusca. */
.pkg-more{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-comp) var(--e-out);
}
.pkg-more__in{
  overflow:hidden;
  min-height:0;
  display:grid;
  gap:var(--sp-12);
}
.pkg[data-deschis="true"] .pkg-more{grid-template-rows:1fr}

/* Randurile intra una dupa alta cat panoul se desface: asa ochiul urmareste
   deschiderea in loc s-o gaseasca gata facuta. Intarzierea vine din `--i`,
   pus deja pe fiecare rand de generator. */
.pkg-more .price-list > li{
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.pkg[data-deschis="true"] .pkg-more .price-list > li{
  opacity:1;
  transform:none;
  transition-delay:calc(120ms + var(--i) * 55ms);
}

.pkg-more__btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);
  width:100%;
  min-height:44px;
  margin-top:var(--sp-4);
  padding:var(--sp-8) 0;
  border:0;border-top:1px solid var(--border);
  background:none;
  color:var(--text-muted);
  font-size:var(--fs-small);font-weight:600;
  cursor:pointer;
  transition:color var(--t-ui) var(--e-out);
}
.pkg-more__btn:hover{color:var(--text)}
.pkg-more__btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.pkg-more__v{
  flex:none;
  transition:transform var(--t-ui) var(--e-out);
}
.pkg[data-deschis="true"] .pkg-more__v{transform:rotate(180deg)}

@media (prefers-reduced-motion:reduce){
  .pkg-more,.pkg-more .price-list > li,.pkg-more__v{transition:none}
}

.pkg-extra{
  display:flex;align-items:center;gap:var(--sp-8);
  margin:0;
  color:var(--text-muted);
  font-size:var(--fs-small);
}
.pkg-extra .ic{flex:none;color:var(--accent-text)}

/* ---------- mesajele de vanzare ---------- */
.pkg-tags{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-12)}
.pkg-tag{
  padding:2px var(--sp-8);
  border-radius:var(--r-xs);
  background:var(--chip-bg);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.price--featured .pkg-tag{background:var(--accent-wash);color:var(--accent-text)}

/* ---------- specificatiile ----------
   Raspunsul la primele intrebari: cate camere, unde, cum se leaga, unde se
   salveaza, cat tine. Deasupra listei de functii, fiindca astea se citesc
   primele si se compara intre carduri. */
.pkg-spec{
  display:grid;gap:var(--sp-8);
  padding:var(--sp-16) 0;
  margin-top:var(--sp-16);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.pkg-spec li{
  display:flex;align-items:flex-start;gap:var(--sp-8);
  font-size:var(--fs-small);
  color:var(--text);
}
.pkg-spec .ic{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;
  color:var(--text-muted);
}
.price--featured .pkg-spec .ic{color:var(--accent-text)}

/* ---------- actiunile ----------
   Doua: alegerea pachetului si detaliile. Prima e plina, a doua e fantoma —
   ierarhia se vede fara sa fie explicata. */
.pkg-actions{display:grid;gap:var(--sp-8);margin-top:auto;padding-top:var(--sp-16)}

/* ---------- subsolul ---------- */
.pkg-foot{
  margin-top:var(--sp-40);
  padding:var(--sp-32);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
  text-align:center;
}
.pkg-foot__q{
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  font-weight:700;
  color:var(--text);
  margin-bottom:var(--sp-20);
}
.pkg-foot__actions{
  display:flex;flex-wrap:wrap;gap:var(--sp-12);justify-content:center;
}

/* ---------- banda de rate ----------
   Un bon rupt in doua: promisiunea in stanga, rata calculata in dreapta.
   Bonul il fac trei lucruri, nu o gramada de desen: linia punctata dintre
   jumatati, cele doua scobituri de la capetele ei si spalarea de accent.
   Scobiturile sunt cercuri de culoarea PAGINII, pe jumatate in afara
   cardului; `overflow:hidden` de pe card le taie si lasa exact arcul.
   Bonul sta ascuns pana cand scriptul are ce numar sa puna in el. */
.rate{
  position:relative;
  margin-top:var(--sp-24);
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  background:var(--surface-raised);
  overflow:hidden;
}
.rate__ofera{padding:var(--sp-32)}
.rate__titlu{
  font-family:var(--f-head);
  font-size:var(--fs-h3);
  line-height:1.15;
  margin-top:var(--sp-12);
  text-wrap:pretty;
}
.rate__desc{
  margin-top:var(--sp-12);
  max-width:46ch;
  color:var(--text-muted);
  line-height:1.55;
}
.rate__actiuni{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-16);
  margin-top:var(--sp-24);
}
.rate__fin{
  flex:1 1 22ch;
  font-size:var(--fs-small);
  color:var(--text-faint);
  line-height:1.4;
}

.rate__bon{
  position:relative;
  display:grid;
  align-content:center;
  gap:var(--sp-8);
  padding:var(--sp-32);
  border-left:1px dashed var(--accent-line);
  background:var(--accent-wash);
}
/* Eticheta si valoarea, pe acelasi rand: omul citeste „valoarea sistemului
   ... 24.310 MDL", apoi muta glisorul de sub ele. */
.rate__rand{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-8)}
.rate__valoare{font-family:var(--f-mono);font-size:var(--fs-body);color:var(--text)}
.rate__valoare i{font-style:normal;color:var(--text-muted)}
/* `accent-color` face treaba pe care altfel ar fi facut-o treizeci de linii
   de `::-webkit-slider-thumb` si frati de-ai lui. */
.rate__glisor{width:100%;margin:var(--sp-4) 0;accent-color:var(--accent);cursor:pointer}
.rate__glisor:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* `hidden` pierde in fata lui `display:grid` daca nu i se spune altfel. */
.rate__bon[hidden]{display:none}
.rate__bon::before,
.rate__bon::after{
  content:"";
  position:absolute;
  left:-10px;
  width:18px;
  height:18px;
  border:1px solid var(--accent-line);
  border-radius:50%;
  background:var(--surface);
}
.rate__bon::before{top:-10px}
.rate__bon::after{bottom:-10px}
.rate__eticheta{
  font-family:var(--f-head);
  font-size:var(--fs-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.rate__suma{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-8);
}
.rate__suma span{font-size:var(--fs-small);color:var(--text-muted)}
.rate__suma b{
  font-family:var(--f-mono);
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--accent-text);
}
.rate__suma i{
  font-style:normal;
  font-family:var(--f-mono);
  font-size:var(--fs-body);
  color:var(--accent-text);
}
.rate__nota{font-size:var(--fs-small);color:var(--text-muted);line-height:1.4}

/* Sub 860 px bonul trece dedesubt: linia punctata si scobiturile se culca
   odata cu el, altfel ar ramane doua bule in coltul din stanga. */
@media (max-width:860px){
  .rate{grid-template-columns:minmax(0,1fr)}
  .rate__ofera{padding:var(--sp-24)}
  .rate__bon{padding:var(--sp-24);border-left:0;border-top:1px dashed var(--accent-line)}
  .rate__bon::before{top:-10px;left:-10px}
  .rate__bon::after{top:-10px;bottom:auto;left:auto;right:-10px}
}

/* ---------- tabelul de comparatie ----------
   Se deschide la cerere, in aceeasi fereastra ca detaliile pachetului. Nu sta
   in pagina: 15 pachete × 8 randuri ar fi fost mai mult decat toata sectiunea.
   Deruleaza pe orizontala in propriul container — pagina nu se misca lateral. */
.pkg-cmp{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pkg-cmp table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--fs-small)}
.pkg-cmp th,.pkg-cmp td{
  padding:var(--sp-12);
  border-bottom:1px solid var(--border-soft);
  text-align:left;
  vertical-align:top;
}
.pkg-cmp thead th{
  position:sticky;top:0;
  background:var(--surface-raised);
  font-family:var(--f-head);
  font-size:var(--fs-label);
  letter-spacing:.04em;
  color:var(--text);
}
/* Prima coloana e eticheta randului: ramane la vedere cand tabelul se muta. */
.pkg-cmp tbody th{
  position:sticky;left:0;
  background:var(--surface-raised);
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
}
.pkg-cmp td{color:var(--text)}
.pkg-cmp .is-rec{background:var(--accent-wash)}
.pkg-cmp .pkg-cmp__pret{font-family:var(--f-mono);white-space:nowrap}

@media (max-width:720px){
  .pkg-foot{padding:var(--sp-20)}
  .pkg-foot__actions .btn{width:100%}
}

/* =========================================================
   COAJA PAGINILOR GENERATE (servicii, fise de produs)
   Mutate aici din `serviciu.css`: sunt ale COJII, nu ale unei pagini.
   Cat au stat acolo, cele 151 de fise de produs — care incarca alta foaie —
   au avut firimiturile nestilate, una sub alta.
   ========================================================= */

/* ---------- firimituri ---------- */
/* Nu sunt decor: pe o pagina in care intri direct din cautare, ele sunt
   singurul lucru care spune unde esti si ce mai e in jur. */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
  align-items:center;
  margin-bottom:var(--sp-24);
  font-size:var(--fs-small);
  color:var(--text-muted);
}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-text);text-decoration:underline}
.crumbs .ic{width:14px;height:14px;color:var(--text-faint)}
.crumbs [aria-current]{color:var(--text)}

/* Eticheta „Servicii” din sertarul de pe telefon: nu e link, e un cap de lista. */
.drawer-label{
  padding-top:var(--sp-12);
  font-size:var(--fs-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* Titlurile din subsol sunt <h2> pe paginile astea, nu <h4>: pe o pagina care
   incepe cu <h1>, saritul de la 1 la 4 rupe schema de titluri. Arata la fel. */
.footer-title{
  margin:0 0 var(--sp-16);
  font-size:var(--fs-label);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* =========================================================
   05b · DIN MAGAZIN — vitrina de pe pagina de start
   Cardurile se scriu cu `node _dev/vitrina.js`, din ce e bifat „Recomandat"
   in panoul magazinului. Aceeasi mecanica de pista ca la pachete: nu e o
   alegere de stil, e ca sa se simta ca acelasi site — omul a derulat deja o
   pista cu degetul cu doua sectiuni mai sus.
   ========================================================= */

.vt-sec .head{margin-bottom:var(--sp-32)}

.vt-stage{position:relative;min-width:0}

.vt-track{
  display:flex;
  align-items:stretch;
  gap:var(--sp-16);
  width:100%;
  min-width:0;
  margin:0;
  padding:var(--sp-4) 0 var(--sp-16);
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  touch-action:pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;
  /* Bara se VEDE, ca la pachete: spune si la al catelea esti, si cat mai e. */
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.vt-track::-webkit-scrollbar{height:8px}
.vt-track::-webkit-scrollbar-track{background:transparent}
.vt-track::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}
.vt-track::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
.vt-track:focus-visible{outline:2px solid var(--accent-strong);outline-offset:4px}

/* ---------- cardul ---------- */
.vt{
  position:relative;
  display:flex;
  flex-direction:column;
  /* Latimea unui card: pe telefon se vede unul si o bucata din urmatorul —
     bucata aia e singurul lucru care spune ca mai sunt. */
  flex:0 0 76%;
  min-width:0;
  scroll-snap-align:start;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
  transition:border-color var(--t-ui) var(--e-out),
             transform var(--t-ui) var(--e-out);
}
.vt:hover{border-color:var(--accent-line);transform:translateY(-3px)}

.vt__link{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-16) var(--sp-16) var(--sp-8);
  color:var(--text);
  text-decoration:none;
}
.vt__link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Pozele produselor vin din magazin cu fundal ALB ars in ele. Pe tema inchisa
   un fundal transparent ar lasa un patrat alb; il dam noi, in ambele teme. */
.vt__ph{
  display:block;
  margin-bottom:var(--sp-12);
  border-radius:var(--r-md);
  background:#fff;
  overflow:hidden;
}
.vt__ph img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  padding:var(--sp-12);
}

.vt__cat{
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.vt__nume{
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  line-height:1.2;
  /* Doua randuri, apoi taiat: denumirile de model au si patruzeci de caractere,
     iar un card care creste dupa nume strica randul intreg. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.vt__spec{font-size:var(--fs-small);color:var(--text-muted)}

.vt__jos{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
  align-items:baseline;
  justify-content:space-between;
  margin:auto 0 0;
  padding:var(--sp-8) var(--sp-16) var(--sp-16);
}
.vt__pret{font-size:var(--fs-h4);color:var(--accent-text);white-space:nowrap}
.vt__pret span{font-size:var(--fs-small);color:var(--text-muted)}

.vt__stoc{font-size:var(--fs-micro)}
.vt-stoc--da{color:var(--success)}
.vt-stoc--asteapta{color:var(--warning)}
.vt-stoc--nu{color:var(--text-muted)}

/* ---------- butonul de trimis ---------- */
/* Sta in coltul pozei, nu sub pret: acolo nu concureaza cu pretul si cu numele,
   si e departe de marginea in care degetul trage ca sa deruleze pista. */
.vt__share{
  position:absolute;
  top:var(--sp-12);
  right:var(--sp-12);
  display:inline-flex;
  gap:var(--sp-4);
  align-items:center;
  min-height:36px;
  padding:var(--sp-4) var(--sp-12);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text-muted);
  font-size:var(--fs-micro);
  cursor:pointer;
  transition:border-color var(--t-ui) var(--e-out),
             color var(--t-ui) var(--e-out);
}
.vt__share .ic{width:15px;height:15px}
.vt__share:hover{border-color:var(--accent-line);color:var(--accent-text)}
.vt__share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vt__share.is-copiat{border-color:var(--success);color:var(--success)}

/* ---------- subsolul sectiunii ---------- */
.vt-foot{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-16);
  align-items:center;
  justify-content:space-between;
  margin-top:var(--sp-24);
  padding-top:var(--sp-24);
  border-top:1px solid var(--border);
}
.vt-foot__q{margin:0;font-size:var(--fs-body);color:var(--text-muted)}
.vt-foot__q b{color:var(--text)}

@media (min-width:700px){
  .vt{flex-basis:calc((100% - var(--sp-16)) / 2)}
}
@media (min-width:960px){
  .vt{flex-basis:calc((100% - 2 * var(--sp-16)) / 3)}
}
@media (min-width:1200px){
  .vt{flex-basis:calc((100% - 3 * var(--sp-16)) / 4)}
}

@media (prefers-reduced-motion:reduce){
  .vt{transition:none}
  .vt:hover{transform:none}
}

/* ---------- sagetile vitrinei ----------
   Pista gliseaza cu degetul — masurat: la 390 px, o tragere de 176 px o muta
   288 px. Dar asta nu ajuta pe cine nu incearca, iar bucata din cardul urmator
   nu spune destul de tare „mai sunt". Acelasi limbaj ca sagetile galeriei de
   poze a produsului: nu inventam un al doilea fel de a spune acelasi lucru.
   Le pune `assets/js/vitrina.js`; fara JavaScript pista tot gliseaza. */
.vt-stage--nav{position:relative}

.vt-nav{
  position:absolute;
  top:38%;                       /* pe poza cardului, nu peste pret */
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;                    /* tinta de atingere, nu marimea desenului */
  height:44px;
  margin-top:-22px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--sh-md);
  cursor:pointer;
  transition:border-color var(--t-ui) var(--e-out),
             opacity var(--t-ui) var(--e-out);
}
.vt-nav svg{width:22px;height:22px}
.vt-nav--inapoi{left:calc(var(--sp-12) * -1)}
.vt-nav--inainte{right:calc(var(--sp-12) * -1)}
.vt-nav:hover{border-color:var(--accent-line)}
.vt-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Pe ecran mare intra in pagina cand treci cu mausul peste pista — o vitrina
   e despre produse, nu despre comenzile ei. Pe telefon nu exista „peste”. */
@media (hover:hover) and (min-width:700px){
  .vt-nav{opacity:0}
  .vt-stage--nav:hover .vt-nav,
  .vt-nav:focus-visible{opacity:1}
}

/* Pe telefon sagetile stau INAUNTRU, ca sa nu iasa din ecran. */
@media (max-width:699px){
  .vt-nav--inapoi{left:var(--sp-4)}
  .vt-nav--inainte{right:var(--sp-4)}
}

@media (prefers-reduced-motion:reduce){
  .vt-nav{transition:none}
}