.elementor-20821 .elementor-element.elementor-element-bd0fbc9{--display:flex;--background-transition:0.3s;--margin-top:-41px;--margin-bottom:-41px;--margin-left:0px;--margin-right:0px;}/* Start custom CSS for container, class: .elementor-element-bd0fbc9 *//* ==========================================================================
   Komarom — CSS pentru landing pages
   ==========================================================================

   FIȘIERUL ĂSTA NU SE PUNE NICĂIERI PE SITE. E sursa componentelor.

   Build-ul îl copiază în fiecare pagină — gata/<slug>/stil.css și, mai important, într-un
   bloc de stil la începutul primului widget HTML al paginii. Așa fiecare pagină publicată
   își poartă stilul în ea și nu poate fi stricată de o modificare făcută pentru alta.
   În Woodmart → Custom CSS nu mai stă nimic; dacă a stat vreodată, se scoate.

   Reguli numai pentru o pagină: pagini/<slug>/stil.css. Vin după astea, deci le rescriu.

   Totul e scopat sub .kmr, deci nu se bate cu tema.
   Când se adaugă o pagină nouă cu componente noi, se adaugă aici, nu se rescrie.

   Sistemul de design e citit din CSS-ul live al komarom.ro, nu inventat.
   ========================================================================== */
  .kmr {
    --blue:#134285; --blue-dark:#092143; --blue-deep:#061530; --blue-soft:#4277BA;
    --blue-pale:#D8E4F2; --blue-tint:#EAF1F9; --blue-linie:#B4CBE6;
    /* albastrul benzii de beneficii și chenarul cardurilor ei, luate din secțiunea
       „Certificări și succese" de pe komarom.ro/servicii/ — vezi unelte/design3.js */
    --blue-band:#3160B8; --band-linie:#C7CADC;
    --green:#5EC95E; --green-dark:#43AE43;
    --ink:#222222; --muted:#5C6774; --line:#E2E7EE; --wash:#F4F7FA; --white:#FFFFFF;
    --wrap:1222px; --pad:15px;

    /* Rotunjirea. A stat o vreme în trei trepte — 16 / 10 / 22 — dar pe pagină ieșeau
       trei colțuri diferite unul lângă altul: criteriile la 16, casetele la 22, cardurile
       de beneficii la 6, cât are site-ul. Acum e una singură, 6px, cea de pe komarom.ro.
       Numele rămân toate trei, ca să nu fie de umblat prin fișier: dacă vrem iar trepte,
       se schimbă doar valorile de aici. */
    --rot:6px;         /* carduri, plăci, panouri, poze */
    --rot-mic:6px;     /* lucruri mici: cutia pozei de produs, chenare */
    --rot-mare:6px;    /* suprafețe mari: casetele, blocul de întrebări */
    --pastila:999px;   /* butoane și chipuri rămân pastile — altfel n-ar mai fi butoane */
    font-family:"DM Sans",Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6;
    color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased;
  }
  .kmr *,
  .kmr *::before,
  .kmr *::after { box-sizing:border-box; }
  /* Marginile pe verticală de pe elementele de listă vin de la temă, nu de la noi, și
     strică grilele. S-a văzut pe site, nu în previzualizare: lista din „În portofoliul
     nostru găsiți" are gap:1px, cât să iasă o linie subțire între rânduri — dar Woodmart
     pune margine pe li, iar marginea se adună peste gap. În loc de linii de 1px ieșeau
     benzi groase, ca niște dungi de tabel. Previzualizarea nu prinde asta, pentru că
     acolo nu există CSS-ul temei. Are !important pentru că regulile temei sunt mai
     specifice decât „.kmr ul li" — singurul loc din fișier unde nu câștigăm cu .elementor-20821 .elementor-element.elementor-element-bd0fbc9ul.

     NUMAI sus și jos, dinadins. Prima formă a acestei reguli era `margin:0 !important` și
     a stricat panglica de pași de la Municipalități: plăcile se îmbucă printr-o margine
     NEGATIVĂ la dreapta, iar shorthandul cu !important a omorât-o. Săgețile s-au despărțit
     și între ele a rămas o pană albă cât vârful. Se măsura: cele șase plăci însumau exact
     lățimea containerului, semn că nu se mai suprapun deloc.
     Un reset care folosește !important trebuie să atingă exact proprietatea stricată,
     nimic mai mult — altfel repară un lucru și strică altul, tăcut. */
  .kmr ul li,
  .kmr ol li { margin-top:0 !important; margin-bottom:0 !important; }
  .kmr__in { max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
  .kmr__sec { padding:82px 0; }
  .kmr__sec--wash { background:var(--wash); }
  .kmr__sec--tint { background:var(--blue-tint); }
  .kmr [id] { scroll-margin-top:90px; }
  .kmr h1,
  .kmr h2,
  .kmr h3,
  .kmr h4 { margin:0; font-weight:700; color:var(--ink); text-wrap:balance; }
  .kmr h1 { font-size:clamp(32px,4.6vw,50px); line-height:1.03; letter-spacing:-.018em; }
  .kmr h2 { font-size:clamp(26px,3.5vw,36px); line-height:1.18; letter-spacing:-.014em; }
  /* Titlurile care ocupă singure un rând întreg stau pe centru — pe stânga, cu tot spațiul
     gol în dreapta, arătau ca și cum ar fi rămas neterminate. Cele dintr-o coloană (secțiunea
     editorială, panoul) rămân pe stânga, unde începe și textul de sub ele. */
  /* ATENȚIE la specificitate: regula de mai sus, .kmr h2, are 0-1-1, iar o singură clasă
     are 0-1-0 — deci margin:0 de acolo bătea margin:auto de aici și titlul rămânea lipit
     de stânga, cu textul centrat degeaba în interiorul cutiei. De aia .elementor-20821 .elementor-element.elementor-element-bd0fbc9ul e dublu. */
  .kmr .kmr__h2-centru { text-align:center; max-width:30ch; margin-left:auto; margin-right:auto; }
  @media (max-width:600px) {
  .kmr .kmr__h2-centru { text-align:left; margin-left:0; max-width:none; } }
  .kmr h3 { font-size:18px; line-height:1.35; font-weight:800; }
  .kmr p { margin:0; }
  .kmr__eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft); }
  .kmr__eyebrow::before { content:""; width:22px; height:2px; background:var(--green); }

  /* ---------- butoane ---------- */
  .kmr__btns { display:flex; flex-wrap:wrap; gap:12px; }
  .kmr__btn { display:inline-flex; align-items:center; justify-content:center; font:600 14px/1 "DM Sans",Arial,sans-serif; text-transform:uppercase; text-decoration:none; padding:17px 35px; border-radius:var(--pastila); border:2px solid transparent; cursor:pointer; transition:background-color .18s,color .18s,border-color .18s,transform .18s; }
  .kmr__btn--primary { background:var(--green); color:var(--white); }
  .kmr__btn--primary:hover { background:var(--green-dark); transform:translateY(-2px); }
  .kmr__btn--ghost { background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
  .kmr__btn--ghost:hover { background:var(--white); color:var(--blue); border-color:var(--white); }
  .kmr__btn:focus-visible { outline:3px solid var(--green); outline-offset:3px; }

  /* Culoarea textului, apărată de temă. Woodmart colorează `a:hover`, iar `a:hover` are
     0-1-1 și bate o singură clasă, 0-1-0 — deci pe site textul butonului verde devenea
     albastru la trecerea cu mouse-ul. În previzualizare nu se vedea, pentru că acolo nu
     există CSS-ul temei; e a doua oară când tema ne ia o regulă (prima au fost marginile
     pe li). Culoarea e repetată pe toate stările, cu .elementor-20821 .elementor-element.elementor-element-bd0fbc9ul dublat și cu tagul `a`
     în el — 0-3-1, cât să nu mai poată fi luată de nimeni. */
  .kmr a.kmr__btn,
  .kmr a.kmr__btn:hover,
  .kmr a.kmr__btn:focus,
  .kmr a.kmr__btn:active,
  .kmr a.kmr__btn:visited { text-decoration:none; }
  .kmr a.kmr__btn--primary,
  .kmr a.kmr__btn--primary:hover,
  .kmr a.kmr__btn--primary:focus,
  .kmr a.kmr__btn--primary:active,
  .kmr a.kmr__btn--primary:visited { color:var(--white); }

  /* Fantoma e singura care schimbă culoarea dinadins: la hover fundalul devine alb,
     deci textul trebuie să treacă pe albastru, altfel ar fi alb pe alb. */
  .kmr a.kmr__btn--ghost,
  .kmr a.kmr__btn--ghost:focus,
  .kmr a.kmr__btn--ghost:active,
  .kmr a.kmr__btn--ghost:visited { color:var(--white); }
  .kmr a.kmr__btn--ghost:hover { color:var(--blue); }

  /* ---------- HERO pe două coloane ---------- */
  .kmr__hero { position:relative; background:var(--blue-dark); overflow:hidden; }
  .kmr__hero::before {
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(120% 90% at 82% 18%, rgba(66,119,186,.42), transparent 62%),
      linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-deep) 100%);
  }
  .kmr__hero::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(94,201,94,.55), transparent);
  }
  .kmr__hero-in { position:relative; max-width:var(--wrap); margin:0 auto; padding:74px var(--pad) 84px; display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
  @media (min-width:960px) {
  .kmr__hero-in { grid-template-columns:1.06fr .94fr; gap:64px; padding-top:88px; padding-bottom:96px; } }
  .kmr__hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
  .kmr__hero h1 { color:var(--white); }
  /* „curățenie urbană" e miezul paginii — o scoatem în verde, fără să atingem textul */
  .kmr__hero h1 .kmr__cheie { color:var(--green); }
  .kmr__hero-lead { color:rgba(255,255,255,.82); font-size:18px; line-height:1.62; max-width:54ch; }
  .kmr__hero-media { position:relative; }
  .kmr__hero-media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--rot); }

  /* ---------- intro ---------- */
  .kmr__intro { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; }
  .kmr__intro::before { content:""; width:56px; height:3px; background:var(--green); }
  .kmr__intro p { font-size:clamp(18px,2.1vw,22px); line-height:1.55; font-weight:500; color:var(--blue-soft); max-width:60ch; text-wrap:pretty; }
  .kmr__apps { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:4px 0 0; list-style:none; }
  .kmr__apps li {
    font-size:13.5px; font-weight:600; color:var(--blue); background:var(--white);
    border:1px solid var(--blue-pale); border-radius:var(--pastila); padding:6px 14px;
    cursor:default; transition:border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s;
  }
  /* Chipurile nu duc nicăieri — nu sunt linkuri și nu trebuie să pară. Dar sunt lista
     pe care vizitatorul se caută pe sine („sunt eu un laborator?"), deci merită să
     răspundă când treci peste ele. Ridicare de 2px și chenar verde: destul cât să
     simtă că le-a atins, prea puțin cât să creadă că se poate da clic. */
  .kmr__apps li:hover {
    border-color:var(--green); color:var(--blue-dark);
    transform:translateY(-2px); box-shadow:0 8px 18px -12px rgba(19,66,133,.5);
  }
  @media (prefers-reduced-motion:reduce) {
  .kmr__apps li:hover { transform:none; } }

  /* ---------- beneficii, banda albastră ----------
     Refăcută după secțiunea „Certificări și succese" de pe komarom.ro/servicii/, pe care
     clientul a arătat-o ca model. Valorile sunt citite din pagina live cu
     unelte/design3.js, nu potrivite din ochi: fundal #3160B8, carduri transparente cu
     chenar #C7CADC de 1px și colț de 6px, padding 32px, distanță 20px, titlu 22px/700,
     text 16px/1.6, iconiță verde de 42px.

     A treia formă a zonei: linii subțiri pe cinci coloane → carduri albe-translucide →
     acum chenar deschis pe albastru mai luminos, ca pe site. Diferența față de site e că
     acolo cardurile au 3 coloane egale; aici sunt cinci beneficii, deci grila e de șase
     coloane — trei sus, două late jos — ca să nu rămână un gol în rândul al doilea. */
  .kmr__band { background:var(--blue-band); position:relative; overflow:hidden; }
  .kmr__band .kmr__in { padding-top:74px; padding-bottom:74px; position:relative; z-index:1; }
  .kmr__band h2 { color:var(--white); }

  /* Punctele din fundal. Pe site sunt un PNG de 1920px (our-services-bg-img.png); aici
     sunt desenate în CSS, ca previzualizarea trimisă clientului să rămână autonomă și ca
     banda să arate la fel la orice lățime. Se sting spre mijloc, unde stă textul. */
  .kmr__band::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.20) 1.6px, transparent 1.7px);
    background-size:17px 17px;
    -webkit-mask-image:linear-gradient(90deg, #000 0, transparent 30%, transparent 70%, #000 100%);
            mask-image:linear-gradient(90deg, #000 0, transparent 30%, transparent 70%, #000 100%);
  }
  .kmr__bens { display:grid; grid-template-columns:1fr; gap:20px; }
  @media (min-width:620px)  {
  .kmr__bens { grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1040px) {
  .kmr__bens { grid-template-columns:repeat(6,1fr); } }
  @media (min-width:1040px) {
  .kmr__ben:nth-child(-n+3) { grid-column:span 2; }
  .kmr__ben:nth-child(n+4) { grid-column:span 3; }
  }
  .kmr__ben {
    position:relative; isolation:isolate; overflow:hidden;
    display:flex; flex-direction:column; gap:14px; padding:32px;
    border:1px solid var(--band-linie); border-radius:var(--rot);
    transition:box-shadow .3s, border-color .3s, transform .4s;
  }
  /* Umbra și degradeul de la hover sunt tot de pe site: linear-gradient(60deg,#61CE70,
     #134285) la 46% opacitate, plus 0 0 60px rgba(19,66,133,.24). Degradeul stă pe un
     strat separat ca să se poată aprinde treptat — pe fundal nu s-ar putea anima. */
  .kmr__ben::before {
    content:""; position:absolute; inset:0; z-index:-1; opacity:0;
    background:linear-gradient(60deg, #61CE70 0%, var(--blue) 100%);
    transition:opacity .3s;
  }
  .kmr__ben:hover { border-color:transparent; box-shadow:0 0 60px 0 rgba(19,66,133,.24); }
  .kmr__ben:hover::before { opacity:.46; }
  .kmr__ben-ico { color:var(--green); line-height:0; }
  .kmr__ben-ico svg { width:42px; height:42px; }
  .kmr__ben h3 { font-size:22px; font-weight:700; line-height:1.4; color:var(--white); letter-spacing:-.01em; }
  .kmr__ben p { font-size:16px; line-height:1.6; color:var(--white); }

  /* ---------- criteriile de alegere, cartonașe numerotate ----------
     A înlocuit panoul în două coloane cu săgeată la mijloc. Acolo, cele opt criterii
     stăteau pe două coloane într-o jumătate de pagină: „tipul zonelor care trebuie
     curățate" și „necesitatea unei soluții electrice" se rupeau pe două rânduri, iar
     rândurile ieșeau inegale, cu goluri între ele. Se citea ca un tabel prost aliniat.

     Acum ocupă toată lățimea, în cutii egale de patru pe rând. Numerele nu sunt o
     ordine de prioritate — sunt un inventar: se vede dintr-o privire că analiza are
     opt puncte, ceea ce e chiar argumentul secțiunii. */
  /* Selector dublu, din același motiv ca la .kmr__h2-centru: regula .kmr p de mai sus are
     0-1-1 și pune margin:0, iar o singură clasă are 0-1-0 — deci margin:auto nu se aplica
     deloc. Cutia rămânea lipită de stânga, cu textul centrat degeaba în interiorul ei,
     ceea ce arată aproape corect și nu e. Se măsoară, nu se verifică din ochi. */
  /* Liniuta din „SĂNĂTATE — spitale, clinici și centre medicale". La marimea titlului,
     linia de em iese cat un cuvant si taie fraza in doua. Ramane, pentru ca e in docx,
     dar la jumatate din corp si in albastru deschis: separa, nu striga. */
  .kmr .kmr__liniuta { font-size:.5em; font-weight:500; color:var(--blue-soft); vertical-align:middle; margin:0 .1em; }
  .kmr .kmr__lead-centru { max-width:62ch; margin:0 auto; text-align:center; color:var(--muted); font-size:17px; }
  @media (max-width:600px) {
  .kmr .kmr__lead-centru { text-align:left; margin-left:0; } }

  /* ---------- capul unei liste ----------
     Rândurile care anunță o listă — „Soluțiile IPC sunt potrivite pentru:", „În
     portofoliul nostru găsiți:" — nu sunt paragrafe, sunt capul listei de sub ele. Ca
     paragraf obișnuit, gri și mic, treceau neobservate exact lângă lucrul pe care îl
     introduc. Sunt mai mari, albastre, cu o dungă verde dedesubt.

     `width:fit-content` face dunga lată exact cât textul, nu cât coloana — și merge la
     fel și într-o coloană îngustă, și centrat, fără două seturi de reguli.
     Selectorul e dublu pentru că `.kmr__duo-copy p` are 0-1-1 și ar bate o clasă simplă. */
  .kmr .kmr__lista-titlu {
    font-weight:700; color:var(--blue);
    padding-bottom:12px; border-bottom:2px solid var(--green);
    width:fit-content; margin-bottom:4px; max-width:100%;
  }
  /* Mărimea vine din tag, nu din clasă. Ca <p> e un rând care anunță o listă dintr-o
     coloană; ca <h2> e chiar titlul secțiunii și ia mărimea de titlu de la .kmr h2,
     păstrând albastrul și dunga verde. Regula de 20px e legată de `p` dinadins —
     altfel ar fi bătut mărimea titlului, fiind mai specifică. */
  .kmr p.kmr__lista-titlu { font-size:20px; line-height:1.35; }
  @media (max-width:600px) {
  .kmr .kmr__lista-titlu { font-size:18px; }
  }

  /* ---------- CTA final ---------- */
  .kmr__cta { background:var(--blue-deep); color:var(--white); position:relative; overflow:hidden; }
  .kmr__cta::before { content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 50% 0%, rgba(66,119,186,.34), transparent 60%); }
  .kmr__cta .kmr__in { position:relative; padding-top:76px; padding-bottom:76px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
  .kmr__cta h2 { color:var(--white); max-width:26ch; }
  .kmr__cta p { color:rgba(255,255,255,.82); max-width:60ch; font-size:17px; }

  /* ---------- utilitare ---------- */
  .kmr__stack { display:flex; flex-direction:column; }
  .kmr__stack--28 {gap:28px}

  /* ---------- apariție la scroll ----------
     ATENȚIE: conținutul e VIZIBIL implicit. Ascunderea se activează doar prin clasa
     .kmr--anim, pe care o pune scriptul paginii. Dacă scriptul lipsește sau e eliminat
     de Elementor, pagina rămâne vizibilă — doar fără animație. Nu inversa regula asta. */
  .kmr__rise { transition:opacity .6s ease, transform .6s ease, filter .6s ease; }
  .kmr--anim .kmr__rise { opacity:0; transform:translateY(18px); filter:blur(6px); }
  .kmr--anim .kmr__rise.is-in { opacity:1; transform:none; filter:none; }

  @media (prefers-reduced-motion:reduce) {
  .kmr *,
  .kmr *::before,
  .kmr *::after { transition:none !important; animation:none !important; }
  .kmr--anim .kmr__rise { opacity:1; transform:none; filter:none; }
  }
  @media (max-width:700px) {
  .kmr__sec { padding:54px 0; }
  .kmr__btn { padding:15px 28px; }
  }

  /* ================================================================
     ADĂUGAT PENTRU MUNICIPALITĂȚI & SPAȚII PUBLICE — 20 august 2026
     Componente noi, cerute de structura acestui text (proces, întrebări
     frecvente). Se adaugă la CSS-ul comun, nu îl înlocuiesc. Paginile
     deja publicate nu sunt afectate.
     ================================================================ */

  /* ---------- secțiune editorială pe două coloane, cu imagine ---------- */
  .kmr__duo { display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
  @media (min-width:900px) {
  .kmr__duo { grid-template-columns:1.04fr .96fr; gap:58px; } }
  .kmr__duo-copy { display:flex; flex-direction:column; gap:16px; }
  .kmr__duo-copy p { color:var(--muted); font-size:16.5px; line-height:1.65; max-width:62ch; }
  .kmr__duo-copy p.kmr__duo-first { font-size:18px; color:var(--ink); font-weight:500; }
  /* Rotunjirea și tăierea stau pe container, nu pe poză: așa dunga verde de jos e tăiată
     de aceleași colțuri. Cu raza pusă pe poză, dunga ieșea cu capetele drepte în afara ei. */
  .kmr__duo-media { position:relative; border-radius:var(--rot); overflow:hidden; }
  .kmr__duo-media img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
  /* bara verde urmează colțurile pozei — altfel colțurile ei drepte ies în afară */
  .kmr__duo-media::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--green); }

  /* ---------- grila de produse ----------
     Înlocuiește caruselul Woodmart, care ieșea pe toată lățimea ferestrei, în afara
     containerului paginii. Pozele de produs au proporții foarte diferite pe site, de
     aceea cutia are raport fix și `object-fit:contain` — se încadrează, nu se taie. */
  .kmr__prods { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  @media (min-width:700px)  {
  .kmr__prods { grid-template-columns:repeat(3,1fr); } }
  @media (min-width:1000px) {
  .kmr__prods { grid-template-columns:repeat(4,1fr); } }
  .kmr__prod {
    display:flex; flex-direction:column; gap:6px; text-decoration:none; text-align:center;
    background:var(--white); border:1px solid var(--line); border-radius:var(--rot); padding:14px 16px 18px;
    transition:border-color .2s, transform .2s, box-shadow .2s;
  }
  .kmr__prod:hover { border-color:var(--blue-pale); transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(19,66,133,.5); }
  .kmr__prod:focus-visible { outline:3px solid var(--green); outline-offset:2px; }

  /* Cutia pozei: pătrată și cu poza încadrată întreagă înăuntru.
     Înainte era `display:grid; place-items:center` cu poza pe `max-width/max-height:100%`.
     Nu ținea: procentele alea se raportează la înălțimea zonei de grilă, care aici vine
     din `aspect-ratio` și nu e definită la momentul măsurării — deci pozele mai înalte
     ieșeau din cutie și `overflow:hidden` le reteza. Se vedea la monodisc și la sistemul
     cu apă pură, ambele înalte și subțiri: li se tăia mânerul.

     Acum poza umple cutia (`width/height:100%`) și se încadrează cu `object-fit:contain`
     — deci se vede întreagă, oricât de înaltă sau lată ar fi, iar cutiile rămân toate
     identice. Raportul e 1:1, nu 4:3: pozele de pe site sunt amestecate, dar utilajele
     înalte pierdeau cel mai mult pe o cutie lată. Paddingul ține produsul dezlipit de
     chenar. */
  .kmr__prod-img {
    display:block; background:var(--white); margin-bottom:8px; border-radius:var(--rot-mic);
    aspect-ratio:1/1; overflow:hidden; padding:10px;
  }
  .kmr__prod-img img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }

  /* min-height de doua randuri: numele produselor raman aliniate intre carduri,
     chiar daca denumirea categoriei se rupe pe doua randuri la unele */
  .kmr__prod-cat { font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-soft); line-height:1.3; min-height:2.6em; }
  /* Spațiul de deasupra butonului stă aici, nu pe buton: butonul are `margin-top:auto`
     ca să cadă la baza cardului, iar un al doilea margin-top l-ar anula. Așa cardul cel
     mai înalt — cel fără spațiu de prisos — tot are aer între nume și buton. */
  .kmr__prod-nume { font-size:16px; font-weight:700; line-height:1.3; color:var(--ink); margin-bottom:8px; }
  /* „Vezi detalii" — cerut de client, pe amândouă paginile cu grilă.
     Verde, ca butoanele obișnuite: verdele e culoarea de acțiune a site-ului, iar un
     buton albastru într-o pagină în care tot ce se apasă e verde ar cere să fie învățat
     din nou. La hover trece pe verdele închis, exact ca .kmr__btn--primary.

     `margin-top:auto` îl împinge la baza cardului, deci butoanele stau pe aceeași linie
     în tot rândul, oricât de lungi sunt numele produselor deasupra.
     `align-self:center` îl ține lat cât textul, dar centrat în card.
     Nu e <a>, e <span>: cardul întreg e deja legătură. */
  .kmr__prod-link {
    margin-top:auto; align-self:center;
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 18px;
    font-size:13px; font-weight:700; letter-spacing:.02em;
    color:var(--white); background:var(--green);
    border:1px solid var(--green); border-radius:var(--pastila);
    transition:background-color .2s, border-color .2s, color .2s;
  }
  .kmr__prod-link::after { content:"→"; transition:transform .2s; }
  .kmr__prod:hover .kmr__prod-link {
    background:var(--green-dark); border-color:var(--green-dark); color:var(--white);
  }
  .kmr__prod:hover .kmr__prod-link::after { transform:translateX(3px); }


/* ==========================================================================
   Reguli numai pentru pagina „comercial-birouri-horeca"
   Din pagini/comercial-birouri-horeca/stil.css. Vin după cele comune, deci le pot rescrie.
   ========================================================================== */

/* ==========================================================================
   Componentele paginii „comercial-birouri-horeca"

   Numai ale ei. Build-ul le adaugă DUPĂ cele comune, deci pot rescrie o regulă
   comună fără !important. O componentă nouă se scrie aici, nu în css-comun.css,
   dacă nu e limpede că o vor folosi și alte pagini.

   Pagina e construită din componente existente. Cele două reguli de mai jos sunt
   potriviri pentru forma ASTA de text — trei subdomenii puse unul sub altul —
   nu componente noi.
   ========================================================================== */

  /* ---------- secțiunea din mijloc, cu poza în stânga ----------
     Trei secțiuni .kmr__duo una sub alta, toate cu poza în dreapta, se citesc ca
     un șablon repetat de trei ori. Sănătate & Educație rezolvă asta alternând
     bento-urile: --b are poza în stânga, --a în dreapta. .kmr__duo n-are variantă
     inversă în css-comun, pentru că până acum n-a folosit-o decât o pagină, cu o
     singură secțiune.

     Aici e nevoie de ea o singură dată, la BIROURI, cea din mijloc. Deci stă la
     pagină, nu în comun. Dacă o mai cere o pagină, se mută în css-comun.css —
     așa s-a întâmplat și cu .kmr__gama, când a avut nevoie de ea Du Puy.

     Se schimbă ORDINEA, nu direcția: `direction:rtl` ar fi întors și textul din
     coloană. Numai de la 900px în sus, unde grila chiar are două coloane; sub
     asta cele două se așază oricum una sub alta, iar poza trebuie să rămână sub
     text, nu deasupra lui.

     Coloanele se schimbă și ele între ele. Grila comună e `1.04fr .96fr`: coloana
     de text e dinadins puțin mai lată decât cea de poză. Doar cu `order`, la
     secțiunea inversată poza ajungea în coloana de 1.04 și textul în cea de 0.96
     — măsurat, 590 față de 544 — deci poza din mijloc ieșea mai mare decât
     celelalte două, iar textul mai îngust. Raportul se inversează și el, ca cele
     trei secțiuni să fie oglindă una alteia, nu doar întoarse. */
  @media (min-width:900px) {
  .kmr__duo--invers { grid-template-columns:.96fr 1.04fr; }
  .kmr__duo--invers .kmr__duo-copy { order:2; }
  .kmr__duo--invers .kmr__duo-media { order:1; }
  }

  /* ---------- capul listei „Aplicații", înăuntrul unei coloane de text ----------
     Capcană de specificitate, aceeași familie cu cea de la .kmr__h2-centru.

     `.kmr p.kmr__lista-titlu { font-size:20px }` din css-comun are 0-1-1. Dar
     `.kmr__duo-copy p { font-size:16.5px }`, adăugat mai jos în același fișier
     pentru secțiunea editorială, are TOT 0-1-1 — și, fiind mai jos, câștigă.
     Rezultatul: capul de listă ieșea de 16,5px în loc de 20, adică exact cât
     paragraful de sub el, deci nu mai anunța nimic.

     Nu se vedea pe paginile de până acum, pentru că acolo `.kmr__lista-titlu` a
     stat mereu în altă componentă — într-o celulă de bento la Sănătate & Educație,
     în panoul de portofoliu la IPC și DU-PUY. Combinația „cap de listă înăuntrul
     unei coloane .kmr__duo-copy" apare prima oară aici.

     Se repară cu .elementor-20821 .elementor-element.elementor-element-bd0fbc9ul, nu cu !important: 0-2-1, cât să treacă de ambele.
     Se măsoară cu: node unelte/masoara.js comercial-birouri-horeca ".kmr__lista-titlu" */
  .kmr .kmr__duo-copy p.kmr__lista-titlu { font-size:20px; }

  /* Titlul „Echipamente potrivite" e h3 din docx (par. 414, 424, 434), deci rămâne
     h3. Are nevoie doar de puțin aer deasupra: vine imediat după chipurile de
     Aplicații, iar `gap`-ul coloanei singur îl lipea de ele. */
  .kmr__duo-copy h3 { margin-top:6px; color:var(--blue); }/* End custom CSS */