/* ============================================================
   Cartesio - custom overrides + hero slider (sostituisce Slider Revolution)
   ============================================================ */

/* ---------- entrance animations: mostra sempre il contenuto ----------
   (WOW.js/animate.css lasciano gli elementi nascosti finche' non si scrolla;
   su sito statico forziamo la visibilita' per evitare contenuti invisibili) */
.wow{visibility:visible!important;animation:none!important;opacity:1!important}
.elementor-invisible{visibility:visible!important;opacity:1!important}
.animated{animation:none!important}

/* ---------- HERO SLIDER ---------- */
.cartesio-hero{position:relative;overflow:hidden;background:#001022}
.cartesio-hero-slides{position:relative;height:600px}
@media(max-width:991px){.cartesio-hero-slides{height:460px}}
@media(max-width:575px){.cartesio-hero-slides{height:420px}}

.chero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  display:flex;align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease;
  z-index:1;
}
.chero-slide.is-active{opacity:1;visibility:visible;z-index:2}
.chero-slide::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,6,18,.78) 0%,rgba(0,6,18,.55) 50%,rgba(0,6,18,.35) 100%);
}
.chero-slide .container{position:relative;z-index:2}

.chero-caption{max-width:640px;color:#fff;
  transform:translateY(18px);opacity:0;transition:all .8s ease .25s}
.chero-slide.is-active .chero-caption{transform:translateY(0);opacity:1}

.chero-eyebrow{display:inline-block;font-family:'Poppins',sans-serif;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  font-size:14px;color:#f00;margin-bottom:18px}
.chero-title{font-family:'Poppins',sans-serif;font-weight:700;
  font-size:42px;line-height:1.18;color:#fff;margin:0 0 18px}
@media(max-width:767px){.chero-title{font-size:30px}}
.chero-text{font-family:'Roboto',sans-serif;font-size:17px;line-height:1.7;
  color:rgba(255,255,255,.9);margin:0}

/* arrows */
.chero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;font-size:30px;line-height:1;
  cursor:pointer;transition:background .25s;display:flex;align-items:center;justify-content:center}
.chero-nav:hover{background:#f00}
.chero-prev{left:30px}.chero-next{right:30px}
@media(max-width:575px){.chero-nav{width:38px;height:38px;font-size:22px}.chero-prev{left:12px}.chero-next{right:12px}}

/* dots */
.chero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  z-index:5;display:flex;gap:10px}
.chero-dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;
  background:transparent;padding:0;cursor:pointer;transition:background .25s}
.chero-dots button.is-active{background:#f00;border-color:#f00}

/* ---------- header su pagine senza banner (es. service) ----------
   .header-trans ha il menu bianco (pensato per stare sopra un banner/hero scuro).
   Sulle pagine senza #pagetitle lo sfondo e' bianco -> menu scuro leggibile. */
body.no-pagetitle #ct-header-wrap.header-trans .ct-header-main:not(.h-fixed){position:relative}
body.no-pagetitle #ct-header-wrap.header-trans .ct-header-main:not(.h-fixed) .ct-main-menu>li>a{color:#10233f}
body.no-pagetitle #ct-header-wrap.header-trans .ct-header-main:not(.h-fixed) .ct-main-menu>li>a:before{background-color:#c1282a}
body.no-pagetitle #ct-header-wrap.header-trans .ct-header-main:not(.h-fixed) .ct-header-meta .header-right-item{color:#10233f}

/* ---------- pagina Qualità / ISO 9001 ---------- */
.qualita{max-width:920px;margin:0 auto}
.qualita-intro{display:flex;gap:36px;align-items:center;margin-bottom:40px;flex-wrap:wrap}
.qualita-cert{flex:0 0 220px;text-align:center}
.qualita-cert img{max-width:200px;width:100%;height:auto}
.qualita-intro-text{flex:1 1 360px}
.qualita-intro-text h3{margin-top:0}
.qualita h2{margin-top:36px}
.qualita h3{margin-top:28px;font-size:20px}
.qualita ul{margin:0 0 18px 22px;list-style:disc}
.qualita ul li{margin-bottom:7px;line-height:1.6}
.qualita-sign{margin-top:34px;font-style:italic;color:#10233f}
@media(max-width:575px){.qualita-intro{gap:22px}.qualita-cert{flex-basis:100%}}

/* ---------- Round 2 §7.1: griglia "Impiantistica elettrica & TLC" — card di altezza uniforme ---------- */
/* le foto stock hanno proporzioni diverse: le forzo allo stesso rapporto delle card IT (300/215)
   con object-fit cover; i titoli (1-3 righe) li clampo a 2 righe -> tutte le card stessa altezza,
   cosi' la griglia masonry le allinea in righe pulite. Scoped al solo id di questa griglia. */
#ct_service_grid-impiantistica .item--featured img{width:100%;height:auto;aspect-ratio:300/215;object-fit:cover}
#ct_service_grid-impiantistica .item--title{min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Round 2 §7.2: griglia "Servizi specialistici" — card di altezza uniforme (come §7.1) ---------- */
#ct_service_grid-specialistici .item--featured img{width:100%;height:auto;aspect-ratio:300/215;object-fit:cover}
#ct_service_grid-specialistici .item--title{min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}