/* ---- COMPONENTA D: cele trei D-uri extrase din sigla, cu luciu si stralucire ---- */
.dcx-row{--dcx-gap:clamp(14px,4.6vw,58px);display:flex;justify-content:center;align-items:flex-start;gap:var(--dcx-gap);margin:0}
.dcx{flex:0 0 auto;width:var(--dcx-w,clamp(104px,15vw,164px));display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--fg-soft,#44536f)}
/* Caseta desenului e chiar latimea D-ului, deci procentele de mai jos (iconita, luciu)
   se raporteaza direct la D, nu la coloana din jurul lui. */
.dcx-box{position:relative;display:block;width:86%;filter:drop-shadow(0 10px 18px var(--dcx-sh,rgba(15,25,50,.3)));transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .3s ease}
.dcx-svg{display:block;width:100%;height:auto}
/* iconita de serviciu, alba, centrata in D; umbra fina o tine lizibila si peste
   partea deschisa a gradientului */
.dcx-ico{position:absolute;left:50%;top:50%;width:var(--dcx-icw,44%);height:auto;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 4px rgba(10,16,32,.7)) drop-shadow(0 0 2px rgba(10,16,32,.6)) drop-shadow(0 1px 2px rgba(10,16,32,.5))}
.dcx-lb{font-size:1rem;font-weight:600;line-height:1.3;text-align:center;transition:color .15s ease}
.dcx-pl{display:block;margin-top:-6px;min-height:1.35em;font-size:1rem;line-height:1.35;color:var(--fg-mute,#4A5568);text-align:center;transition:opacity .3s ease}
.dcx-pl.is-off{opacity:0}
.dcx:hover .dcx-box,.dcx:focus-visible .dcx-box{transform:scale(1.03);filter:drop-shadow(0 18px 30px var(--dcx-sh2,rgba(15,25,50,.45)))}
.dcx:hover .dcx-lb,.dcx:focus-visible .dcx-lb{color:var(--hd,#1b2a4a)}
.dcx:focus-visible{outline:2px solid var(--teal,#2d6e7e);outline-offset:6px;border-radius:16px}
/* dara de lumina care traverseaza D-ul de la stanga la dreapta, 700ms */
.dcx-dara{transform:translateX(-84px)}
.dcx:hover .dcx-dara,.dcx:focus-visible .dcx-dara,.dcx.is-luc .dcx-dara{animation:dcx-dara 700ms ease-out}
@keyframes dcx-dara{from{transform:translateX(-84px)}to{transform:translateX(132px)}}
/* culoarea umbrei si latimea iconitei, pe fiecare serviciu.
   Iconitele nu au acelasi format: cea de dezinsectie e mult mai lata decat inalta,
   deci primeste cateva procente in plus ca sa para la fel de mare ca celelalte doua. */
.dcx-der{--dcx-sh:rgba(194,47,31,.34);--dcx-sh2:rgba(194,47,31,.5);--dcx-icw:58%}
.dcx-dez{--dcx-sh:rgba(121,40,118,.34);--dcx-sh2:rgba(121,40,118,.5);--dcx-icw:64%}
.dcx-dif{--dcx-sh:rgba(72,124,196,.34);--dcx-sh2:rgba(72,124,196,.52);--dcx-icw:52%}
/* un singur D, mare, in heroul paginii de serviciu */
.dcx-row.dcx-solo{gap:0}
.dcx-solo .dcx{width:var(--dcx-w,clamp(160px,26vw,300px))}
@media(prefers-reduced-motion:reduce){
  .dcx-box{transition:none}.dcx-pl{transition:none}
  .dcx:hover .dcx-dara,.dcx:focus-visible .dcx-dara,.dcx.is-luc .dcx-dara{animation:none}
}