/* ==================================================================
   Restyle 2026 - Segato Angela
   Riferimento grafico: mockup-homepage-segato-angela.html (v2)
   Comportamento header: sovrapposto all'hero, poi solido allo scroll.

   NOTA SULLA SPECIFICITA'
   Il tema originale definisce #header, #footer e #content con selettori
   per ID in css/main.css. Un selettore per ID batte sempre uno per classe,
   a prescindere dall'ordine di caricamento dei fogli di stile. Per questo
   qui sotto diverse regole usano #header.sa-header invece del solo
   .sa-header: senza l'ID le regole del tema vecchio vincerebbero.
   ================================================================== */

:root{
  --sa-navy:#1D2C4D;
  --sa-navy-2:#141f38;
  --sa-blue:#2C5AA6;
  --sa-blue-2:#3868bb;
  --sa-ink:#1a2233;
  --sa-muted:#5f6b7a;
  --sa-line:#dde2ec;
  --sa-soft:#f5f7fa;
  --sa-shadow:0 18px 45px rgba(20,31,56,.12);
  --sa-header-h:82px;
  --sa-card-overlap:96px; /* di quanto le card sbordano sopra l'hero */
}

.sa *,.sa-header *,.sa-footer *{box-sizing:border-box;}
.sa{font-family:'Lato',sans-serif;color:var(--sa-ink);line-height:1.6;}
.sa h1,.sa h2,.sa h3,.sa h4{font-family:'Poppins',sans-serif;margin:0;letter-spacing:-0.01em;}
.sa a{text-decoration:none;color:inherit;}
.sa img{max-width:100%;}
.sa .sa-container,.sa-header .sa-container,.sa-footer .sa-container{width:min(1180px,calc(100% - 40px));margin:0 auto;}

.sa-header,.sa-footer{font-family:'Lato',sans-serif;}
.sa-header h1,.sa-header h2,.sa-header h3,.sa-header h4,
.sa-footer h1,.sa-footer h2,.sa-footer h3,.sa-footer h4{font-family:'Poppins',sans-serif;margin:0;}
.sa-header a,.sa-footer a{text-decoration:none;}


/* ==================================================================
   1. HEADER
   Due modalita':
   - .sa-header--overlay (solo homepage): fisso e trasparente sopra
     l'hero, testo bianco. Con lo scroll il JS aggiunge .is-scrolled
     e diventa bianco solido con testo scuro.
   - .sa-header--solid (pagine interne): sticky bianco da subito,
     perche' li' non c'e' un hero scuro sotto e trasparente sarebbe
     illeggibile.
   ================================================================== */

#header.sa-header{
  background:transparent;
  border:0;
  transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

/* --- Modalita' overlay (homepage) --- */
#header.sa-header--overlay{
  position:fixed;
  top:0; left:0; right:0;
  z-index:300;
}
/* La barra di amministrazione di WordPress e' fissa in alto: senza questo
   l'header ci finirebbe sotto quando si e' loggati. */
.admin-bar #header.sa-header--overlay{top:32px;}
@media screen and (max-width:782px){
  .admin-bar #header.sa-header--overlay{top:46px;}
}

/* --- Modalita' solida (pagine interne) ---
   Barra BLU NAVY (non piu' bianca) per coerenza con la home e, soprattutto,
   perche' il logo del sito e' uno solo: in versione bianca sta bene sull'hero
   scuro ma su una barra bianca sparirebbe. Header scuro ovunque = logo bianco
   e menu bianco leggibili su tutto il sito. */
#header.sa-header--solid{
  position:sticky;
  top:0;
  z-index:300;
  background:var(--sa-navy);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.admin-bar #header.sa-header--solid{top:32px;}

/* Allo scroll la barra diventa BLU (non piu' bianca): cosi' il logo e i
   link restano bianchi in entrambi gli stati e si leggono sempre. Era il
   punto "il logo e' tutto bianco": prima su barra bianca spariva. */
#header.sa-header--overlay.is-scrolled{
  background:var(--sa-navy);
  backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(20,31,56,.18);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.sa-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;min-height:var(--sa-header-h);}

.sa-brand{display:flex;align-items:center;gap:10px;}
.sa-brand img{max-height:46px;width:auto;display:block;transition:filter .3s ease;}
.sa-brand strong{font-size:17px;transition:color .3s ease;}

/* Le voci di questo menu sono lunghe ("Progettazione e costruzione" da sola
   misura 218px). Tutte insieme, piu' logo, lingua e pulsante, servono circa
   1130px: stanno dentro il contenitore da 1180px ma senza margine.
   Da qui due scelte: gap 18px invece di 24 per recuperare spazio, e
   white-space:nowrap perche' senza le etichette andavano a capo a meta'
   ("PROGETTAZIONE E / COSTRUZIONE") sballando l'altezza dell'header. */
.sa-links{display:flex;gap:18px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;list-style:none;margin:0;padding:0;}
.sa-links a{position:relative;padding:6px 0;white-space:nowrap;transition:color .25s ease;}
/* Sottolineatura animata: cresce da sinistra al passaggio del mouse. */
.sa-links a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--sa-blue);transition:right .25s ease;}
.sa-links a:hover:after{right:0;}

.sa-header-right{display:flex;align-items:center;gap:18px;}
.sa-lang{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;transition:color .3s ease;}
/* Bandiere piu' grandi (erano 18px). */
.sa-lang img,.sa-mobile-menu img{width:28px;height:auto;vertical-align:middle;display:inline-block;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.sa-mobile-lang img{width:32px;}
.sa-cta-small{background:var(--sa-blue);color:#fff!important;padding:10px 18px;border-radius:100px;font-size:13px;font-weight:700;white-space:nowrap;transition:background-color .25s ease;}
.sa-cta-small:hover{background:var(--sa-blue-2);}
.sa-burger{display:none;border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;padding:4px 6px;transition:color .3s ease;}

/* Header scuro su tutto il sito: menu, lingua, logo e hamburger BIANCHI
   sia in homepage (trasparente/blu) sia nelle pagine interne (barra blu).
   -webkit-text-fill-color oltre a color: il tema base colora i link del
   menu con quella proprieta', che altrimenti vincerebbe e li terrebbe grigi. */
#header.sa-header .sa-links a,
#header.sa-header .sa-lang,
#header.sa-header .sa-lang a,
#header.sa-header .sa-burger,
#header.sa-header .sa-brand strong{color:#fff!important;-webkit-text-fill-color:#fff!important;}
#header.sa-header .sa-links a:after{background:#fff;}
#header.sa-header .sa-links a:hover{color:#8fb0e8!important;-webkit-text-fill-color:#8fb0e8!important;}

/* LOGO: header pulito, senza targhetta e senza filtro. In wp-admin va
   impostato il logo in versione BIANCA (scritta bianca, sfondo trasparente):
   cosi' si legge su tutti gli sfondi scuri dell'header. */
#header.sa-header .sa-brand img{filter:none;}

/* Menu mobile */
.sa-mobile-menu{display:none;position:fixed;left:0;right:0;top:var(--sa-header-h);background:#fff;padding:10px 20px 20px;z-index:290;border-bottom:1px solid var(--sa-line);max-height:calc(100vh - var(--sa-header-h));overflow-y:auto;box-shadow:0 18px 40px rgba(20,31,56,.14);}
.admin-bar .sa-mobile-menu{top:calc(var(--sa-header-h) + 32px);}
@media screen and (max-width:782px){
  .admin-bar .sa-mobile-menu{top:calc(var(--sa-header-h) + 46px);}
}
.sa-mobile-menu.open{display:block;}
.sa-mobile-menu a{display:block;padding:13px 0;border-bottom:1px solid var(--sa-line);font-weight:700;font-size:14px;color:var(--sa-navy);text-transform:uppercase;}
.sa-mobile-menu a:last-child{border-bottom:0;}
.sa-mobile-lang{display:flex;gap:10px;padding-top:14px;}


/* ==================================================================
   2. HERO STATICO
   Sostituisce lo slider Swiper. Immagine di sfondo + due gradienti
   sovrapposti per garantire il contrasto del testo bianco.
   ================================================================== */

.sa-hero{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  color:#fff;
  background:var(--sa-navy);
  padding:calc(var(--sa-header-h) + 70px) 0 170px;
  overflow:hidden;
}
/* Slideshow: immagini impilate, quella attiva in dissolvenza sopra le altre. */
.sa-hero-slideshow{position:absolute;inset:0;z-index:0;}
.sa-hero-slide{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:0;transition:opacity 1.2s ease;}
.sa-hero-slide.is-active{opacity:1;}
/* Gradiente scuro sopra le immagini per il contrasto del testo bianco. */
.sa-hero:before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,31,56,.94) 0%,rgba(20,31,56,.72) 45%,rgba(20,31,56,.35) 100%);
  z-index:1;
}
/* Sfumatura in fondo all'hero verso il colore del contenuto (#f9f9f9):
   elimina la riga netta ("stacco") dove la foto scura dell'hero incontrava
   lo sfondo chiaro, visibile ai lati delle card. */
.sa-hero:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(to bottom, rgba(249,249,249,0), rgba(249,249,249,1));
  z-index:1;pointer-events:none;
}
.sa-hero .sa-container{position:relative;z-index:2;}
/* Stacco bianco definitivamente risolto: l'area delle card, sotto la parte
   sovrapposta all'hero, prende lo stesso #f9f9f9 del contenuto. La sfumatura
   dell'hero finisce in #f9f9f9 esattamente dove inizia questo riempimento,
   quindi non resta nessuna fascia piu' chiara ne' riga netta. */
.sa-cards-wrap{background:linear-gradient(to bottom, transparent var(--sa-card-overlap), #f9f9f9 var(--sa-card-overlap));}
#content{background:#f9f9f9;}
.sa-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8fb0e8;margin-bottom:18px;}
/* Stile legato alla CLASSE .sa-hero-title, non al tag: cosi' l'utente puo'
   scegliere H1/H2/H3 (per la SEO) senza che cambi l'aspetto grafico. */
.sa-hero h1,.sa-hero .sa-hero-title{font-size:clamp(32px,4.6vw,58px);line-height:1.08;font-weight:800;max-width:640px;color:#fff;margin:0;}
.sa-hero p{font-size:18px;line-height:1.6;color:#c9d3e4;max-width:520px;margin:20px 0 0;}
.sa-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

.sa-btn{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:15px 26px;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;transition:background-color .25s ease, transform .25s ease;}
.sa-btn-primary{background:var(--sa-blue);color:#fff!important;box-shadow:0 10px 24px rgba(44,90,166,.35);}
.sa-btn-primary:hover{background:var(--sa-blue-2);transform:translateY(-2px);}
.sa-btn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff!important;}
.sa-btn-ghost:hover{background:rgba(255,255,255,.1);}


/* ==================================================================
   3. CARD SOVRAPPOSTE
   .sa-cards-wrap sta FUORI da .content-wrap (vedi principale.php).
   Il tema originale mette overflow:hidden su .content-wrap, quindi un
   margin-top negativo li' dentro verrebbe tagliato: era esattamente
   il motivo per cui le card apparivano mozzate sotto l'hero.
   ================================================================== */

.sa-cards-wrap{margin-top:calc(-1 * var(--sa-card-overlap));position:relative;z-index:20;}
.sa-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.sa-card{position:relative;display:block;min-height:230px;border-radius:14px;overflow:hidden;color:#fff;box-shadow:var(--sa-shadow);background-size:cover;background-position:center;background-color:var(--sa-navy);transition:transform .25s ease, box-shadow .25s ease;}
.sa-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,31,56,.2);}
.sa-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,31,56,.25),rgba(20,31,56,.94));}
.sa-card .sa-card-inner{position:absolute;inset:auto 20px 20px;z-index:1;}
.sa-card h3{margin:0 0 10px;font-size:19px;line-height:1.22;font-weight:800;color:#fff!important;}
.sa-card p{margin:0;font-size:13px;font-weight:400;color:rgba(255,255,255,.72);line-height:1.5;}
/* Freccia in basso a sinistra della card, sotto al testo. Si sposta di
   qualche pixel al passaggio del mouse per dare l'idea di link cliccabile. */
.sa-card-arrow{display:inline-block;margin-top:14px;font-size:20px;line-height:1;color:#fff;transition:transform .25s ease;}
.sa-card:hover .sa-card-arrow{transform:translateX(5px);}


/* ==================================================================
   4. INTRO + NUMERI
   ================================================================== */

/* Sezione azienda: testo a sinistra (modificabile a blocchi nell'editor
   della pagina Home) + immagine a destra (immagine in evidenza della pagina).
   Se non c'e' immagine, .sa-intro-grid--single fa andare il testo a piena
   larghezza limitato a 820px per la leggibilita'. */
.sa-intro{padding:100px 0 90px;}
/* align-items:start + immagine "sticky": il testo azienda e' lungo, se
   l'immagine fosse centrata resterebbe un grande vuoto sotto. Cosi' invece
   l'immagine resta in alto e accompagna la lettura scorrendo. */
.sa-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start;}
.sa-intro-grid--single{display:block;}
.sa-intro-grid--single .sa-intro-inner{max-width:820px;}
.sa-intro-media{position:sticky;top:110px;}
.sa-intro-media img{width:100%;max-height:520px;object-fit:cover;border-radius:16px;box-shadow:var(--sa-shadow);display:block;}
.sa-eyebrow-flat{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sa-blue)!important;margin-bottom:14px;}
.sa-intro h2{font-size:clamp(28px,3vw,36px);line-height:1.15;font-weight:800;margin-bottom:18px;color:var(--sa-ink)!important;}
.sa-intro-text{font-size:16px;line-height:1.75;color:var(--sa-muted);}
.sa-intro-text p{font-size:16px;line-height:1.75;color:var(--sa-muted)!important;margin:0 0 16px;}
/* Gerarchia titoli del contenuto (importante per la SEO): H2 > H3 > H4 con
   dimensioni diverse. La dimensione NON e' forzata con !important: cosi'
   dall'editor a blocchi si puo' scegliere il livello giusto (H2/H3) per la
   struttura e, se serve, ingrandire un titolo col controllo "Dimensione
   carattere" senza cambiare il livello. */
.sa-intro-text h2{font-size:28px;font-weight:800;color:var(--sa-ink)!important;line-height:1.2;margin:34px 0 14px;}
.sa-intro-text h3{font-size:22px;font-weight:800;color:var(--sa-ink)!important;line-height:1.25;margin:28px 0 12px;}
.sa-intro-text h4{font-size:18px;font-weight:700;color:var(--sa-ink)!important;line-height:1.3;margin:24px 0 10px;}
/* Rispetta la dimensione scelta nell'editor (classi dei blocchi Gutenberg). */
.sa-intro-text .has-small-font-size{font-size:14px;}
.sa-intro-text .has-medium-font-size{font-size:20px;}
.sa-intro-text .has-large-font-size{font-size:30px;line-height:1.2;}
.sa-intro-text .has-x-large-font-size{font-size:40px;line-height:1.15;}
/* Stili applicabili dal menu "Formati" dell'editor classico. */
.sa-intro-text .sa-title-big{font-size:clamp(28px,3vw,36px);font-weight:800;line-height:1.15;color:var(--sa-ink)!important;margin:34px 0 14px;}
.sa-intro-text .sa-eyebrow-flat{margin-bottom:6px;}
.sa-intro-text a{color:var(--sa-blue)!important;font-weight:700;}
.sa-intro-text strong{color:var(--sa-ink);}
/* Stili per i blocchi Gutenberg dentro il contenuto azienda: immagini,
   colonne e citazioni scritte nell'editor restano coerenti col tema. */
.sa-intro-text img{border-radius:12px;box-shadow:0 10px 28px rgba(20,31,56,.1);height:auto;}
.sa-intro-text .wp-block-image{margin:20px 0;}
.sa-intro-text .wp-block-columns{gap:28px;margin:20px 0;}
.sa-intro-text ul,.sa-intro-text ol{margin:0 0 16px;padding-left:20px;color:var(--sa-muted);line-height:1.7;}
.sa-intro-text .wp-block-quote{border-left:3px solid var(--sa-blue);padding-left:18px;margin:20px 0;color:var(--sa-ink);font-style:italic;}

.sa-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--sa-soft);border-radius:14px;overflow:hidden;margin-top:56px;}
.sa-stat{position:relative;padding:26px 26px 24px;border-left:1px solid var(--sa-line);}
.sa-stat:first-child{border-left:0;}
.sa-stat b{display:block;font-family:'Poppins',sans-serif;font-size:22px;color:var(--sa-navy)!important;margin:0 0 6px;font-weight:800;}
.sa-stat span{font-size:13px;line-height:1.4;color:var(--sa-muted)!important;}


/* ==================================================================
   5. SETTORI
   ================================================================== */

/* Gradiente simmetrico che parte e torna a #f9f9f9 (il colore delle sezioni
   sopra e sotto): cosi' i bordi combaciano e non c'e' lo "stacco". */
.sa-sectors{background:linear-gradient(180deg,#f9f9f9 0%,#eef2f8 50%,#f9f9f9 100%);padding:90px 0;}
.sa-sector-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:40px;}
.sa-sector-head h2,.sa-sector-head .sa-section-title{font-size:28px;font-weight:800;color:var(--sa-ink)!important;margin:0;line-height:1.2;}
.sa-sector-head p{max-width:420px;color:var(--sa-muted)!important;font-size:15px;line-height:1.6;margin:0;}
.sa-sector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
.sa-sector-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(20,31,56,.08);transition:transform .25s ease, box-shadow .25s ease;}
.sa-sector-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(20,31,56,.14);}
.sa-sector-card .sa-ph{height:110px;background-size:cover;background-position:center;background-color:#e7ebf2;}
.sa-sector-card div.sa-lbl{padding:16px;text-align:center;font-weight:800;font-size:12.5px;letter-spacing:.02em;color:var(--sa-navy)!important;}


/* ==================================================================
   6. FASCIA CONTATTI + FORM
   ================================================================== */

.sa-cta-form{background:linear-gradient(100deg,var(--sa-navy) 0%,var(--sa-navy-2) 100%);color:#fff;padding:90px 0;}
.sa-cta-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.sa-cta-form-copy h3{font-size:28px;font-weight:800;line-height:1.25;margin:16px 0;color:#fff!important;}
.sa-cta-form-copy p{color:#c9d3e4!important;font-size:15px;line-height:1.7;}
.sa-cta-contacts{display:flex;flex-wrap:wrap;gap:34px;margin-top:28px;}
.sa-cta-contacts .sa-lbl{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#8fa3c9!important;margin-bottom:4px;}
.sa-cta-contacts .sa-val{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:#fff!important;}

.sa-contact-card{background:#fff;border-radius:14px;padding:30px;box-shadow:var(--sa-shadow);color:var(--sa-ink);}
.sa-contact-card .wpcf7-form-control-wrap{display:block;margin-bottom:12px;}
.sa-contact-card input[type=text],
.sa-contact-card input[type=email],
.sa-contact-card input[type=tel],
.sa-contact-card select,
.sa-contact-card textarea{width:100%;border:1px solid var(--sa-line);border-radius:8px;padding:11px 13px;font-family:'Lato',sans-serif;font-size:14px;color:var(--sa-ink);background:var(--sa-soft);}
.sa-contact-card input:focus,
.sa-contact-card textarea:focus{outline:2px solid var(--sa-blue);outline-offset:1px;border-color:var(--sa-blue);}
.sa-contact-card textarea{resize:vertical;min-height:120px;}
.sa-contact-card input[type=submit]{background:var(--sa-blue);color:#fff;border:0;border-radius:100px;padding:14px 26px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;width:100%;transition:background-color .25s ease;}
.sa-contact-card input[type=submit]:hover{background:var(--sa-blue-2);}
.sa-contact-card label{font-size:12px;color:var(--sa-muted);line-height:1.5;}
.sa-contact-card .wpcf7-list-item{margin:0;}
.sa-contact-card .wpcf7-not-valid-tip{font-size:12px;color:#d63638;}


/* ==================================================================
   6bis. PRODOTTI (WooCommerce)
   Compare solo se ci sono prodotti pubblicati.
   ================================================================== */

.sa-products{padding:90px 0;}
.sa-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sa-product-card{border:1px solid var(--sa-line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;color:inherit;transition:transform .25s ease, box-shadow .25s ease;}
.sa-product-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(20,31,56,.1);}
.sa-product-card .sa-ph{height:210px;background-size:cover;background-position:center;background-color:#e7ebf2;}
.sa-product-copy{padding:18px 20px;}
.sa-product-copy h4{font-size:16px;margin:0 0 6px;font-weight:700;color:var(--sa-ink)!important;}
.sa-product-price{font-family:'Poppins',sans-serif;font-weight:800;color:var(--sa-blue)!important;font-size:15px;}
.sa-product-price del{color:var(--sa-muted)!important;font-weight:400;margin-right:6px;}
.sa-product-price ins{text-decoration:none;}
@media(max-width:980px){.sa-products-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.sa-products,.sa-news{padding:60px 0;}.sa-products-grid{grid-template-columns:1fr;}}


/* ==================================================================
   7. NEWS
   ================================================================== */

.sa-news{padding:90px 0;}
.sa-news-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;}
.sa-news-title h2,.sa-news-title .sa-section-title{font-size:30px;font-weight:800;color:var(--sa-ink)!important;margin:0;line-height:1.2;}
.sa-news-all{color:var(--sa-blue)!important;font-weight:800;font-size:13px;white-space:nowrap;}
/* Colonne fisse e non auto-fit: oggi in archivio c'e' un solo articolo e
   con auto-fit quell'unica card si allargava a tutti i 1180px del
   contenitore, con un risultato sproporzionato. Con repeat(3,1fr)
   occupa un terzo, come nel mockup, qualunque sia il numero di news. */
.sa-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sa-news-card{border:1px solid var(--sa-line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease;}
.sa-news-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(20,31,56,.1);}
.sa-news-card .sa-ph{height:150px;background-size:cover;background-position:center;background-color:#e7ebf2;}
.sa-news-copy{padding:20px;display:flex;flex-direction:column;flex:1;}
.sa-news-copy small{color:#8a94a3!important;font-size:12px;}
.sa-news-copy h4{font-size:16px;margin:8px 0;line-height:1.3;font-weight:700;color:var(--sa-ink)!important;}
.sa-news-copy p{font-size:13px;color:var(--sa-muted)!important;line-height:1.5;flex:1;}
.sa-news-copy a{font-size:12px;color:var(--sa-blue)!important;font-weight:800;}


/* ==================================================================
   8. MAPPA
   Il tema carica FitVids con questo selettore:
     iframe[src*="google.com/maps"]
   FitVids calcola le proporzioni da width/height dell'iframe. Con
   width="100%" fa parseInt("100%") = 100 e ottiene un rapporto di
   380/100 = 3.8, cioe' "alto il 380% della larghezza": su 1841px di
   viewport diventavano quasi 7000px di mappa. Da qui la mappa gigante.
   Soluzione: class="no-fv" sull'iframe (FitVids e' inizializzato con
   ignore:".no-fv"). Le due regole qui sotto sono una rete di sicurezza
   nel caso FitVids riesca comunque ad avvolgere l'elemento.
   ================================================================== */

.sa-map-wrap{position:relative;line-height:0;}
.sa-map{display:block;width:100%;height:380px;border:0;}
.sa-map-wrap .fluid-width-video-wrapper{padding-top:0!important;height:auto!important;position:static!important;}
.sa-map-wrap .fluid-width-video-wrapper iframe{position:static!important;height:380px!important;width:100%!important;}


/* ==================================================================
   9. BANNER FINALE + FOOTER
   ================================================================== */

.sa-bottom-banner{background:var(--sa-navy);color:#fff!important;text-align:center;padding:18px 20px;font-size:14px;}
.sa-bottom-banner a{color:#8fb0e8!important;font-weight:800;margin-left:6px;}

/* #footer.sa-footer e non solo .sa-footer: il tema originale ha
   #footer{background-color:#eeeeee} in css/imports/footer.css e per
   specificita' vincerebbe, lasciando il footer grigio illeggibile. */
#footer.sa-footer{background:var(--sa-navy)!important;color:#c3ccce;padding:56px 0 26px;border:0;}
.sa-foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12);}
.sa-foot-grid h5{color:#fff!important;font-size:13px;font-weight:700;margin-bottom:14px;}
.sa-foot-grid p,.sa-foot-grid a,.sa-foot-grid li{font-size:13.5px;color:#a9b4c2!important;line-height:2;}
.sa-foot-grid a:hover{color:#fff!important;}
.sa-foot-grid ul{list-style:none;margin:0;padding:0;}
.sa-foot-bottom{padding-top:22px;font-size:12.5px;color:#8a96a8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.sa-foot-bottom a{color:#c3ccce!important;}
#footer.sa-footer .sa-brand img{max-height:40px;}


/* ==================================================================
   10. ANIMAZIONI REVEAL
   La classe .sa-js viene messa su <html> da uno script inline in
   header.php. Senza JS quella classe non c'e', quindi gli elementi
   restano visibili: nessun rischio di contenuti invisibili.
   ================================================================== */

.sa-js .sa-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.sa-js .sa-reveal.sa-visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .sa-js .sa-reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .sa-card:hover,.sa-sector-card:hover,.sa-news-card:hover,.sa-btn-primary:hover{transform:none!important;}
  html{scroll-behavior:auto;}
}


/* ==================================================================
   11. RESPONSIVE
   ================================================================== */

@media(max-width:1024px){
  .sa-intro-grid{grid-template-columns:1fr;gap:44px;}
  .sa-cta-form-grid{grid-template-columns:1fr;gap:40px;}
}

/* Soglia hamburger a 1200px e non a 980.
   Il menu esteso richiede circa 1130px di larghezza utile, che si hanno
   solo da 1200px di viewport in su. A 1024px (iPad orizzontale) le voci
   si accavallavano sul pulsante e le bandierine della lingua venivano
   tagliate: era il problema segnalato su iPad. */
@media(max-width:1200px){
  .sa-links,.sa-lang{display:none;}
  .sa-burger{display:block;}
}

@media(max-width:980px){
  .sa-cards{grid-template-columns:repeat(2,1fr);}
  .sa-stats{grid-template-columns:repeat(2,1fr);}
  .sa-stat:nth-child(3){border-left:0;}
  .sa-stat:nth-child(3),.sa-stat:nth-child(4){border-top:1px solid var(--sa-line);}
  .sa-news-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:860px){
  .sa-hero{min-height:560px;padding:calc(var(--sa-header-h) + 50px) 0 140px;}
  .sa-hero p{font-size:16px;}
  .sa-sector-head{display:block;}
  .sa-sector-head p{margin-top:12px;}
  .sa-foot-grid{grid-template-columns:1fr;}
  .sa-intro,.sa-sectors,.sa-news,.sa-cta-form{padding:60px 0;}
}

@media(max-width:680px){
  .sa-cards,.sa-news-grid,.sa-stats{grid-template-columns:1fr;}
  .sa-stat{border-left:0!important;border-top:1px solid var(--sa-line)!important;}
  .sa-stat:first-child{border-top:0!important;}
  :root{--sa-card-overlap:60px;}
  .sa-hero{padding:calc(var(--sa-header-h) + 40px) 0 110px;}
  .sa-hero-actions{flex-direction:column;align-items:flex-start;}
  .sa-hero-actions .sa-btn{width:100%;justify-content:center;}
  .sa-sector-grid{grid-template-columns:1fr 1fr;}
  .sa-contact-card{padding:22px;}
  .sa-map,.sa-map-wrap .fluid-width-video-wrapper iframe{height:300px!important;}
  .sa-news-title{display:block;}
  .sa-news-all{display:inline-block;margin-top:10px;}
  .sa-foot-bottom{flex-direction:column;}
}


/* ==================================================================
   PAGINE INTERNE (restyle 2026)
   Tutto scoped a .sa-internal (classe sul body): non tocca la home.
   ================================================================== */

.sa-internal .sa-container{width:min(1180px,calc(100% - 40px));margin:0 auto;}

/* --- Fascia titolo scura --- */
.sa-page-title{position:relative;background:var(--sa-navy);color:#fff;padding:56px 0 48px;overflow:hidden;}
.sa-page-title--img{background-size:cover;background-position:center;}
.sa-page-title--img:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,31,56,.94),rgba(20,31,56,.7));}
.sa-page-title .sa-container{position:relative;z-index:1;}
.sa-page-title h1{font-family:'Poppins',sans-serif;font-size:clamp(28px,3.6vw,46px);font-weight:800;color:#fff;line-height:1.1;margin:10px 0 0;}
.sa-breadcrumb{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8fb0e8;}
.sa-breadcrumb a{color:#8fb0e8;text-decoration:none;}
.sa-breadcrumb a:hover{color:#fff;}
.sa-breadcrumb span,.sa-breadcrumb .breadcrumb_last{color:#c9d3e4;}

/* --- Contenuto generale --- */
.sa-internal #content{background:#fff;padding:64px 0;}
.sa-internal #content .content-wrap{padding:0;overflow:visible;}
.sa-internal #content .container-fluid,
.sa-internal #content .container{width:auto;max-width:1180px;margin:0 auto;padding:0 20px;}
.sa-internal #content .row{margin:0;}
/* Colonna di lettura per i testi semplici (about, privacy, ecc.) */
.sa-internal .content_personalized_content{width:100%!important;max-width:860px;margin:0 auto!important;}
.sa-internal .attrezzerie_ul{padding-top:0!important;}
.sa-internal .page-intro-text{max-width:900px;margin:0 auto;}

.sa-internal #content p{font-size:16px;line-height:1.8;color:var(--sa-muted);margin:0 0 16px;}
.sa-internal #content h1,.sa-internal #content h2,.sa-internal #content h3,.sa-internal #content h4{font-family:'Poppins',sans-serif;color:var(--sa-ink);line-height:1.2;}
.sa-internal #content h2{font-size:28px;font-weight:800;margin:34px 0 14px;}
.sa-internal #content h3{font-size:22px;font-weight:800;margin:26px 0 12px;}
.sa-internal #content h4{font-size:18px;font-weight:700;margin:22px 0 10px;}
.sa-internal #content a{color:var(--sa-blue);font-weight:600;}
.sa-internal #content ul,.sa-internal #content ol{color:var(--sa-muted);line-height:1.8;margin:0 0 16px;padding-left:20px;}
.sa-internal #content strong{color:var(--sa-ink);}
.sa-internal #content img{max-width:100%;height:auto;border-radius:12px;}

/* --- Servizi: righe testo + immagine alternate --- */
.sa-internal .heading-decorated{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;color:var(--sa-ink);margin:0 0 16px;}
.sa-internal .service-text,.sa-internal .service-text p{color:var(--sa-muted);line-height:1.8;}
.sa-internal .section-md{padding:34px 0;}
.sa-internal .section-md img{width:100%;height:auto;border-radius:16px;box-shadow:var(--sa-shadow);object-fit:cover;}

/* --- Gallery stampi (stampaggio / attrezzerie) --- */
.sa-internal .attrezzerie_ul .row img{border-radius:12px;box-shadow:0 10px 28px rgba(20,31,56,.1);}
.sa-internal .attrezzerie_ul .row p{color:var(--sa-muted);}
.sa-internal h2[style*="text-align:center"]{font-family:'Poppins',sans-serif;font-weight:800;color:var(--sa-ink);margin:40px 0 20px;}

/* --- Contatti --- */
.sa-internal .contact-info-box{background:var(--sa-soft);border-radius:16px;padding:30px;}
.sa-internal .contact-info-title{font-family:'Poppins',sans-serif;font-weight:800;color:var(--sa-navy);font-size:22px;margin:0 0 8px;}
.sa-internal .contact-info-line{height:3px;width:48px;background:var(--sa-blue);border-radius:2px;margin:0 0 18px;}
.sa-internal .contact-info-item{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--sa-ink);font-size:15px;}
.sa-internal .contact-info-icon{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--sa-blue);box-shadow:0 4px 12px rgba(20,31,56,.08);}
.sa-internal .wpcf7 input[type=text],
.sa-internal .wpcf7 input[type=email],
.sa-internal .wpcf7 input[type=tel],
.sa-internal .wpcf7 textarea,
.sa-internal .wpcf7 select{width:100%;border:1px solid var(--sa-line);border-radius:8px;padding:12px 14px;font-family:'Lato',sans-serif;font-size:14px;color:var(--sa-ink);background:var(--sa-soft);margin-bottom:12px;}
.sa-internal .wpcf7 textarea{min-height:130px;resize:vertical;}
.sa-internal .wpcf7 input[type=submit]{background:var(--sa-blue);color:#fff;border:0;border-radius:100px;padding:14px 30px;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:background-color .25s ease;}
.sa-internal .wpcf7 input[type=submit]:hover{background:var(--sa-blue-2);}

/* --- News: griglia articoli (index.php) --- */
.sa-internal .content_news{padding:16px 2px 22px;}
.sa-internal .content_news .heading{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;color:var(--sa-ink)!important;margin:14px 0 8px;}
.sa-internal .content_news p{color:var(--sa-muted);font-size:14px;line-height:1.6;}
.sa-internal .thumbnail{border-radius:14px;box-shadow:0 10px 28px rgba(20,31,56,.1);}
.sa-internal .content_news .button{background:var(--sa-blue)!important;color:#fff!important;border:0!important;border-radius:100px!important;padding:11px 24px!important;font-weight:700!important;text-transform:uppercase;font-size:12px;letter-spacing:.03em;}
.sa-internal .content_news .button:hover{background:var(--sa-blue-2)!important;}

/* --- Mappa nelle pagine interne --- */
.sa-internal .sa-map-wrap{margin-top:20px;line-height:0;}
.sa-internal .sa-map{display:block;width:100%;height:360px;border:0;}

@media(max-width:680px){
  .sa-page-title{padding:38px 0 32px;}
  .sa-internal #content{padding:44px 0;}
  .sa-internal .sa-map{height:280px;}
}


/* ==================================================================
   COSTRUTTORE A SEZIONI (Pagina a sezioni) - blocchi grafici
   ================================================================== */

.sa-flex .sa-flex-sec{padding:70px 0;}
.sa-flex .sa-flex-sec + .sa-flex-sec{padding-top:0;} /* evita doppio spazio tra blocchi bianchi consecutivi */
.sa-flex .sa-flex-cta,.sa-flex .is-soft{padding:70px 0!important;}

/* Testo ricco (wysiwyg) */
.sa-flex-rte{max-width:860px;font-size:16px;line-height:1.8;color:var(--sa-muted);}
.sa-flex-rte:not(.sa-flex-ti .sa-flex-rte){margin:0 auto;}
.sa-flex-rte p{margin:0 0 16px;color:var(--sa-muted);}
.sa-flex-rte h2,.sa-flex-rte h3,.sa-flex-rte h4{font-family:'Poppins',sans-serif;color:var(--sa-ink);line-height:1.2;}
.sa-flex-rte h2{font-size:28px;font-weight:800;margin:30px 0 14px;}
.sa-flex-rte h3{font-size:22px;font-weight:800;margin:24px 0 12px;}
.sa-flex-rte ul,.sa-flex-rte ol{margin:0 0 16px;padding-left:20px;line-height:1.8;}
.sa-flex-rte a{color:var(--sa-blue);font-weight:600;}
.sa-flex-rte strong{color:var(--sa-ink);}
.sa-flex-rte img{border-radius:12px;max-width:100%;height:auto;}

.sa-flex-title{font-family:'Poppins',sans-serif;font-size:clamp(26px,3vw,34px);font-weight:800;color:var(--sa-ink);line-height:1.15;margin:0 0 16px;}
.sa-flex-head{margin-bottom:34px;}

/* Testo + immagine */
.sa-flex-ti.is-soft{background:var(--sa-soft);}
.sa-flex-ti-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.sa-flex-ti-grid.no-img{grid-template-columns:1fr;}
.sa-flex-ti-grid.no-img .sa-flex-rte{max-width:860px;}
.sa-flex-ti.img-left .sa-flex-ti-text{order:2;}
.sa-flex-ti.img-left .sa-flex-ti-media{order:1;}
.sa-flex-ti-media img{width:100%;height:100%;max-height:460px;object-fit:cover;border-radius:16px;box-shadow:var(--sa-shadow);display:block;}
.sa-flex-ti-text .sa-flex-rte{max-width:none;}

/* Cards */
.sa-flex-cards-grid{display:grid;gap:20px;}
.sa-flex-card{background:#fff;border:1px solid var(--sa-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:transform .25s ease, box-shadow .25s ease;}
a.sa-flex-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(20,31,56,.12);}
.sa-flex-card-img{height:180px;background-size:cover;background-position:center;background-color:#e7ebf2;}
.sa-flex-card-body{padding:24px;}
.sa-flex-card-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--sa-soft);color:var(--sa-blue);font-size:20px;margin-bottom:14px;}
.sa-flex-card h3{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:var(--sa-ink);margin:0 0 8px;}
.sa-flex-card p{font-size:14px;line-height:1.6;color:var(--sa-muted);margin:0;}

/* Numeri: riusa .sa-stats gia' definito, aggiungo solo un contenitore */
.sa-flex-numeri .sa-stats{max-width:900px;margin:0 auto;}

/* Galleria */
.sa-flex-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.sa-flex-gitem{display:block;padding-top:70%;background-size:cover;background-position:center;background-color:#e7ebf2;border-radius:12px;box-shadow:0 10px 28px rgba(20,31,56,.1);transition:transform .25s ease;}
.sa-flex-gitem:hover{transform:scale(1.02);}

/* Fascia CTA scura */
.sa-flex-cta{background:linear-gradient(100deg,var(--sa-navy),var(--sa-navy-2));color:#fff;}
.sa-flex-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.sa-flex-cta-title{font-family:'Poppins',sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#fff;margin:0 0 8px;max-width:640px;}
.sa-flex-cta p{color:#c9d3e4;margin:0;max-width:640px;font-size:15px;line-height:1.6;}

/* Citazione */
.sa-flex-quote blockquote{max-width:820px;margin:0 auto;border-left:4px solid var(--sa-blue);padding:6px 0 6px 26px;}
.sa-flex-quote blockquote p{font-family:'Poppins',sans-serif;font-size:clamp(20px,2.4vw,26px);font-weight:600;color:var(--sa-ink);line-height:1.4;margin:0 0 12px;font-style:italic;}
.sa-flex-quote cite{color:var(--sa-blue);font-weight:700;font-style:normal;font-size:14px;text-transform:uppercase;letter-spacing:.04em;}

@media(max-width:860px){
  .sa-flex .sa-flex-sec{padding:48px 0;}
  .sa-flex-ti-grid{grid-template-columns:1fr!important;gap:28px;}
  .sa-flex-ti.img-left .sa-flex-ti-text{order:1;}
  .sa-flex-ti.img-left .sa-flex-ti-media{order:2;}
  .sa-flex-cards-grid{grid-template-columns:1fr!important;}
  .sa-flex-cta-inner{flex-direction:column;align-items:flex-start;}
}


/* --- Blocchi aggiuntivi (pulsanti, elenco, quadri) + larghezza testo --- */

/* Testo: larghezza scelta dall'utente */
.sa-flex-testo.sa-w-stretta .sa-flex-rte{max-width:860px;margin:0 auto;}
.sa-flex-testo.sa-w-piena .sa-flex-rte{max-width:none;margin:0;}

/* Pulsanti allineabili */
.sa-flex-buttons-row{display:flex;flex-wrap:wrap;gap:14px;}
.sa-flex-buttons.is-centro .sa-flex-buttons-row{justify-content:center;}
.sa-flex-buttons.is-destra .sa-flex-buttons-row{justify-content:flex-end;}
.sa-flex-buttons.is-sinistra .sa-flex-buttons-row{justify-content:flex-start;}
/* Bottone "solo bordo" su sfondo chiaro (quello base e' pensato per sfondo scuro) */
.sa-btn-ghost--dark{border:1px solid var(--sa-line)!important;color:var(--sa-ink)!important;background:transparent;}
.sa-btn-ghost--dark:hover{background:var(--sa-soft);}

/* Elenco / vantaggi con spunta */
.sa-flex-list .sa-flex-title{margin-bottom:22px;}
.sa-flex-list-ul{list-style:none;padding:0;margin:0;column-gap:40px;}
.sa-flex-list-ul li{position:relative;padding-left:30px;margin:0 0 14px;color:var(--sa-ink);font-size:16px;line-height:1.6;break-inside:avoid;-webkit-column-break-inside:avoid;}
.sa-flex-list-ul li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--sa-blue);}
.sa-flex-list-ul li:after{content:"";position:absolute;left:6px;top:8px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* Quadri con immagine (come le card della home) */
.sa-flex-tiles-grid{display:grid;gap:18px;}
.sa-tile{position:relative;display:block;min-height:230px;border-radius:14px;overflow:hidden;color:#fff;box-shadow:var(--sa-shadow);background:var(--sa-navy);background-size:cover;background-position:center;text-decoration:none;transition:transform .25s ease, box-shadow .25s ease;}
a.sa-tile:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,31,56,.2);}
.sa-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,31,56,.25),rgba(20,31,56,.94));}
.sa-tile-inner{position:absolute;inset:auto 20px 20px;z-index:1;}
.sa-tile h3{font-family:'Poppins',sans-serif;margin:0 0 8px;font-size:19px;line-height:1.22;font-weight:800;color:#fff;}
.sa-tile p{margin:0;font-size:13px;font-weight:400;color:rgba(255,255,255,.75);line-height:1.5;}

@media(max-width:860px){
  .sa-flex-tiles-grid{grid-template-columns:1fr 1fr!important;}
  .sa-flex-list-ul{columns:1!important;}
}
@media(max-width:560px){
  .sa-flex-tiles-grid{grid-template-columns:1fr!important;}
}


/* --- Sfondi dei blocchi (grigio chiaro / blu navy) --- */
.sa-flex-sec.sa-bg-chiaro{background:var(--sa-soft);}
.sa-flex-sec.sa-bg-navy{background:var(--sa-navy);}
.sa-flex-sec.sa-bg-navy .sa-flex-title,
.sa-flex-sec.sa-bg-navy h2,
.sa-flex-sec.sa-bg-navy h3,
.sa-flex-sec.sa-bg-navy h4{color:#fff!important;}
.sa-flex-sec.sa-bg-navy .sa-flex-rte,
.sa-flex-sec.sa-bg-navy .sa-flex-rte p,
.sa-flex-sec.sa-bg-navy p,
.sa-flex-sec.sa-bg-navy li{color:#c9d3e4!important;}
.sa-flex-sec.sa-bg-navy .sa-eyebrow-flat{color:#8fb0e8!important;}
.sa-flex-sec.sa-bg-navy .sa-flex-rte a{color:#8fb0e8!important;}
/* Card su fondo blu */
.sa-flex-sec.sa-bg-navy .sa-flex-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.sa-flex-sec.sa-bg-navy .sa-flex-card h3{color:#fff;}
.sa-flex-sec.sa-bg-navy .sa-flex-card p{color:#c9d3e4;}
.sa-flex-sec.sa-bg-navy .sa-flex-card-ico{background:rgba(255,255,255,.08);color:#8fb0e8;}
/* Elenco su fondo blu */
.sa-flex-sec.sa-bg-navy .sa-flex-list-ul li:before{background:var(--sa-blue);}

/* Griglia numerata (screenshot): celle su fondo blu con linee sottili di
   separazione ottenute con un gap che lascia intravedere lo sfondo chiaro. */
.sa-flex-numgrid{padding:70px 0;}
.sa-numgrid{display:grid;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:4px;overflow:hidden;}
.sa-numcell{background:var(--sa-navy);padding:30px 26px 34px;min-height:190px;display:flex;flex-direction:column;}
.sa-numcell-n{display:block;font-family:'Poppins',sans-serif;font-size:12px;font-weight:800;letter-spacing:.06em;color:#8fb0e8;margin-bottom:18px;}
.sa-numcell h3{font-family:'Poppins',sans-serif;font-size:19px;font-weight:800;color:#fff;line-height:1.25;margin:0;}
.sa-numcell p{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#c9d3e4;}
/* Variante griglia numerata su sfondo chiaro/bianco */
.sa-flex-numgrid:not(.sa-bg-navy) .sa-numgrid{background:var(--sa-line);border-color:var(--sa-line);}
.sa-flex-numgrid:not(.sa-bg-navy) .sa-numcell{background:#fff;}
.sa-flex-numgrid:not(.sa-bg-navy) .sa-numcell-n{color:var(--sa-blue);}
.sa-flex-numgrid:not(.sa-bg-navy) .sa-numcell h3{color:var(--sa-ink);}
.sa-flex-numgrid:not(.sa-bg-navy) .sa-numcell p{color:var(--sa-muted);}

@media(max-width:860px){ .sa-numgrid{grid-template-columns:repeat(2,1fr)!important;} }
@media(max-width:520px){ .sa-numgrid{grid-template-columns:1fr!important;} }


/* --- Blocco Testo come contenitore (titolo + testo + pulsanti) --- */
.sa-flex-testo.sa-w-stretta .sa-flex-textbox{max-width:860px;margin:0 auto;}
.sa-flex-testo.sa-w-piena .sa-flex-textbox{max-width:none;}
.sa-flex-textbox .sa-flex-rte{max-width:none;margin:0;}
.sa-flex-textbox .sa-flex-title{margin-bottom:14px;}
/* Bottone "solo bordo" leggibile anche su fondo blu */
.sa-bg-navy .sa-btn-ghost--dark{border-color:rgba(255,255,255,.45)!important;color:#fff!important;}
.sa-bg-navy .sa-btn-ghost--dark:hover{background:rgba(255,255,255,.1);}