/* ============================================================
   EGERIA - sistema di stile
   Ricavato dall'export Webflow originale (egeria.webflow.css)
   e dai valori calcolati sulla pagina resa.
   Classi da usare nelle righe/colonne di WPBakery.
   ============================================================ */

/* ---------- Caratteri (file locali, nessuna dipendenza esterna) ---------- */
@font-face{font-family:'Rubik';src:url('egeria-webflow/fonts/Rubik-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Rubik';src:url('egeria-webflow/fonts/Rubik-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Rubik';src:url('egeria-webflow/fonts/Rubik-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Rubik';src:url('egeria-webflow/fonts/Rubik-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Mulish';src:url('egeria-webflow/fonts/Mulish-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Mulish';src:url('egeria-webflow/fonts/Mulish-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Mulish';src:url('egeria-webflow/fonts/Mulish-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Mulish';src:url('egeria-webflow/fonts/Mulish-Black.ttf') format('truetype');font-weight:900;font-display:swap}

/* ---------- Tavolozza ---------- */
:root{
  --eg-verde:#91b238;
  --eg-verde-chiaro:#a0c736;
  --eg-verde-scuro:#15312b;
  --eg-verde-extra:#112b25;
  --eg-testo:#2c3025;
  --eg-testo2:#2b3024;
  --eg-grigio:#f8f8f8;
  --eg-bianco:#fff;
}

/* ---------- Tipografia di base ---------- */
body:not(.eg-landing),
body:not(.eg-landing) .the7-content,
body:not(.eg-landing) #main .wf-wrap{
  font-family:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body:not(.eg-landing) #main p,
body:not(.eg-landing) #main li,
body:not(.eg-landing) .wpb_text_column p{
  font-family:'Mulish',sans-serif;
  font-size:18px;
  line-height:27px;
  color:#555;
}
body:not(.eg-landing) #main :is(h1,h2,h3,h4,h5,h6),
body:not(.eg-landing) .wpb_text_column :is(h1,h2,h3){
  font-family:'Rubik',sans-serif;
  font-weight:700;
  color:var(--eg-testo2);
  letter-spacing:normal;
}
body:not(.eg-landing) #main h1, body:not(.eg-landing) .wpb_text_column h1{font-size:40px;line-height:48px;margin-bottom:24px}
body:not(.eg-landing) #main h2, body:not(.eg-landing) .wpb_text_column h2{font-size:32px;line-height:40px;margin-bottom:20px}
body:not(.eg-landing) #main h3, body:not(.eg-landing) .wpb_text_column h3{font-size:24px;line-height:32px;margin-bottom:16px}

/* ---------- Occhiello verde sopra il titolo ---------- */
.eg-occhiello,
.eg-occhiello p{
  font-family:'Rubik',sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:19.6px !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--eg-verde-chiaro) !important;
  margin-bottom:8px;
}

/* ---------- Bottone ---------- */
.eg-btn a,
a.eg-btn,
.eg-btn .vc_general.vc_btn3{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--eg-verde-chiaro) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:5px !important;
  padding:12px 24px !important;
  font-family:'Rubik',sans-serif !important;
  font-size:14px !important;
  font-weight:500 !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-decoration:none !important;
  transition:background .2s ease;
}
.eg-btn a:hover,
a.eg-btn:hover,
.eg-btn .vc_general.vc_btn3:hover{background:var(--eg-verde) !important}

/* ---------- Sezione scura (come "Benefici") ---------- */
.eg-scura{
  background-color:var(--eg-testo) !important;
  padding:60px 60px 120px !important;
}
.eg-scura,
.eg-scura p,
.eg-scura li{color:#fff !important}
.eg-scura h1,.eg-scura h2,.eg-scura h3{color:#fff !important}
.eg-scura .eg-occhiello,
.eg-scura .eg-occhiello p{color:var(--eg-verde-chiaro) !important}

/* ---------- Sezione chiara ---------- */
.eg-chiara{background-color:var(--eg-grigio) !important;padding:80px 0 !important}
.eg-bianca{background-color:#fff !important;padding:80px 0 !important}

/* ---------- Titolo di sezione centrato ---------- */
.eg-titolo-sezione{
  max-width:751px;
  margin:0 auto 40px;
  text-align:center;
}
.eg-titolo-sezione:before{
  content:"";
  display:block;
  width:70px;
  height:2px;
  background:var(--eg-verde-chiaro);
  margin:0 auto 24px;
}

/* ---------- Scheda ---------- */
.eg-card .vc_column-inner,
.eg-card > .wpb_wrapper{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(160,199,54,.35);
  border-radius:8px;
  padding:32px !important;
  height:100%;
}
.eg-card-chiara .vc_column-inner,
.eg-card-chiara > .wpb_wrapper{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:8px;
  padding:32px !important;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}

/* ---------- Elenco numerato con pallino verde ---------- */
.eg-numerata ol{list-style:none;counter-reset:eg;padding-left:0}
.eg-numerata ol li{counter-increment:eg;position:relative;padding-left:84px;min-height:60px;margin-bottom:30px;display:block;padding-top:14px;font-family:'Mulish',sans-serif;font-size:18px;line-height:27px}
.eg-numerata ol li:before{
  content:counter(eg);
  position:absolute;left:0;top:0;
  width:60px;height:60px;border-radius:50%;
  background:var(--eg-verde-chiaro);color:#fff;
  font-family:'Rubik',sans-serif;font-size:24px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Immagine su cerchio verde ---------- */
.eg-cerchio img{
  border-radius:50%;
  background:var(--eg-verde-chiaro);
  padding:18px;
}

/* ---------- Contenitore stretto ---------- */
.eg-stretto .vc_column-inner{max-width:1000px;margin:0 auto}

/* ---------- Adattamento su schermi piccoli ---------- */
@media (max-width:991px){
  body:not(.eg-landing) #main h1, body:not(.eg-landing) .wpb_text_column h1{font-size:32px;line-height:40px}
  body:not(.eg-landing) #main h2, body:not(.eg-landing) .wpb_text_column h2{font-size:26px;line-height:34px}
  .eg-scura{padding:48px 24px 72px !important}
  .eg-chiara,.eg-bianca{padding:48px 0 !important}
}


/* ---------- Sezioni a tutta larghezza: solo spaziatura verticale ---------- */
.vc_row.eg-scura, .vc_row.eg-chiara, .vc_row.eg-bianca { padding-left:0 !important; padding-right:0 !important; }
.vc_row.eg-scura .wpb_column, .vc_row.eg-chiara .wpb_column, .vc_row.eg-bianca .wpb_column { padding-left:15px; padding-right:15px; }
.vc_row.eg-scura + .vc_row.eg-scura { padding-top:0 !important; margin-top:-60px; }
/* ---------- Pie' di pagina Egeria ---------- */
.eg-footer{background:var(--eg-testo);color:#fff;padding:64px 24px 0;font-family:'Mulish',sans-serif;font-size:15px;line-height:24px}
.eg-footer-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px}
.eg-footer-col{flex:1 1 170px;min-width:150px}
.eg-footer-brand{flex:1 1 260px}
.eg-footer-logo{width:150px;height:auto;margin-bottom:20px;display:block}
.eg-footer-tit{font-family:'Rubik',sans-serif;font-size:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--eg-verde-chiaro);margin-bottom:14px}
.eg-footer p{color:rgba(255,255,255,.75);margin:0 0 8px;font-size:15px;line-height:24px}
.eg-footer ul{list-style:none;margin:0;padding:0}
.eg-footer ul li{margin-bottom:9px}
.eg-footer a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s}
.eg-footer a:hover{color:var(--eg-verde-chiaro)}
.eg-footer-basso{max-width:1200px;margin:48px auto 0;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.6)}
.eg-footer-firma a{color:var(--eg-verde-chiaro)}
@media (max-width:767px){
  .eg-footer{padding:48px 20px 0}
  .eg-footer-in{gap:28px}
  .eg-footer-col{flex:1 1 45%}
  .eg-footer-basso{flex-direction:column;text-align:center;justify-content:center}
}
/* ==========================================================
   Misure prese dalla landing dei semi (semi-mantis.html):
   barra 126px, logo 133x116, voci Rubik 16/24 500, spazio 55px,
   tendina 204x120 sotto la voce, sfondo #f8f8f8, raggio 5px
   ========================================================== */

/* --- Intestazione: identica alla landing --- */
.eg-header{padding:5px 24px !important}
.eg-header .navbarcontainer-2{max-width:1439px;margin:0 auto}
.eg-header .navbar-content-2{max-width:1151px}
.eg-header .navbar-brand-2 img,
.eg-header .vectors-wrapper-2{width:133px;height:auto;max-width:none;flex:0 0 auto;object-fit:contain}
.eg-header .navbar-menu-2{grid-column-gap:55px;column-gap:55px}

/* --- Tendina Prodotti: apre anche senza gli script di Webflow --- */
.eg-header .dropdown{position:relative}
.eg-header .w-dropdown-toggle{cursor:pointer}
.eg-header .dropdown-list{min-width:204px;z-index:950}
.eg-header .dropdown:hover > .dropdown-list,
.eg-header .dropdown.eg-aperta > .dropdown-list,
.eg-header .dropdown-list.w--open{
  display:block;
  background-color:#f8f8f8;
  border-radius:5px;
  box-shadow:0 2px 5px rgba(0,0,0,.2);
  font-family:Rubik,sans-serif;
}
.eg-header .dropdown-list a{display:block;padding:10px 20px;color:#2b3024;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;text-decoration:none}
.eg-header .dropdown-list a:hover{color:#a0c736}
/* piccola zona di sicurezza: passando dal titolo alla tendina non si chiude */
.eg-header .dropdown:after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}

/* --- Schede e riquadri: si sollevano al passaggio del mouse --- */
.eg-scheda > div,
.eg-vetrina-card,
.eg-mosaico-card{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.eg-scheda:hover > div{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.eg-vetrina-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.14)}
.eg-vetrina-card .eg-freccia{display:inline-block;transition:transform .25s ease}
.eg-vetrina-card:hover .eg-freccia{transform:translateX(5px)}
.eg-mosaico-card:hover{background:rgba(255,255,255,.09)}

/* --- Blocco a mosaico --- */
@media (max-width:1100px){
  .eg-mosaico-riga{flex-wrap:wrap}
  .eg-mosaico-riga > div:first-child{flex:1 1 100% !important;min-height:260px !important}
}
@media (max-width:767px){
  .eg-mosaico{padding:56px 24px !important}
  .eg-mosaico-riga{flex-direction:column;gap:20px !important}
}

/* --- Schede: tre per riga senza andare a capo --- */
.benefici .columns,
div[style*="gap:48px"][style*="flex-wrap:wrap"]{
  flex-wrap:nowrap !important;
}
.benefici .columns > div,
.benefici .card,
.benefici .card-2{
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:353px;
}

/* su schermi stretti tornano a impilarsi */
@media (max-width:1100px){
  .benefici .columns,
  div[style*="gap:48px"][style*="flex-wrap:wrap"]{flex-wrap:wrap !important}
  .benefici .columns > div{flex:1 1 320px !important;max-width:none}
}
@media (max-width:991px){
  .la-storia-2{padding:48px 24px !important;flex-direction:column}
  .la-storia-2 .container-2{flex-direction:column;gap:32px}
  .la-storia-2 .container-2 > div{width:100% !important}
  .la-storia-2 img{width:100% !important;height:auto !important;max-height:360px}
  .benefici{padding:48px 24px 72px !important}
  .hero-no-image{height:320px !important}
  .eg-header{padding:5px 16px !important}
  .eg-header .navbar-brand-2 img,
  .eg-header .vectors-wrapper-2{width:96px}
}