/*---------------------------------------------------------------------------------

 Theme Name:   4DRG
 Theme URI:    
 Description:  
 Author:       4DRG
 Author URI:   
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/* ============ VEROARGENTO - Titoli automatici (tutto il sito) ============ */
body h1,body h2,body h3,body h4{font-family:'Oswald',sans-serif;text-transform:uppercase;line-height:1.15}
body h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:600;letter-spacing:.045em}
body h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;letter-spacing:.06em}
body h3{font-size:clamp(1.1rem,2.2vw,1.4rem);font-weight:500;letter-spacing:.1em}
body h4{font-size:1rem;font-weight:500;letter-spacing:.14em}

/* ============ HERO ============ */
.va-hero{position:relative;min-height:calc(88vh + 20px);margin-bottom:-1px;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background-color:#17181A}
.va-hero .et_pb_row{width:100%;max-width:1100px;padding:56px 20px 40px}
.va-hero .et_pb_column{text-align:center}
.va-hero .et_pb_module{margin-bottom:0}

/* ---------- Occhiello con le due lineette ---------- */
.va-hero .va-eyebrow{margin-bottom:12px;opacity:0;animation:va-rise .8s ease .15s forwards}
.va-hero .va-eyebrow p{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:clamp(.7rem,1.4vw,.85rem);
  letter-spacing:.42em;text-transform:uppercase;color:#E8EAED}
.va-hero .va-eyebrow p::before,.va-hero .va-eyebrow p::after{content:"";width:44px;height:1px;
  background:#B6BCC3;opacity:.7;flex-shrink:0}

/* ---------- Titolo: metallo lucido + lampo + porporina ---------- */
/* Per un titolo piu' affilato prova font-weight:500 al posto di 600.
   Velocita' del metallo: cambia i 22s di va-sheen (piu' alto = piu' lento) */
.va-hero .va-wordmark{position:relative}
.va-hero .va-wordmark .et_pb_text_inner{position:relative}
.va-hero .va-wordmark h1{position:relative;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(3.4rem,11vw,8rem);letter-spacing:.045em;line-height:1.02;
  text-transform:uppercase;margin:0 0 4px;padding:0;
  background:linear-gradient(101deg,
    #C6CDD4 0%, #DDE2E7 20%, #B0B8C0 42%,
    #FFFFFF 48%, #FFFFFF 52%,
    #B0B8C0 58%, #DDE2E7 80%, #C6CDD4 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 30px rgba(232,234,237,.18));
  opacity:0;animation:va-rise .8s ease .15s forwards,va-sheen 16s ease-in-out .5s infinite}

/* Porporina: 5 gruppi di scintille, dissolvenze lente e sfasate.
   Durate diverse e non multiple tra loro, cosi' non vanno mai a tempo */
.va-hero .va-wordmark::before,
.va-hero .va-wordmark::after,
.va-hero .va-wordmark h1::before,
.va-hero .va-wordmark .et_pb_text_inner::before,
.va-hero .va-wordmark .et_pb_text_inner::after{
  content:"";position:absolute;inset:-10% -4%;pointer-events:none;z-index:3;
  background-repeat:no-repeat;opacity:0}

.va-hero .va-wordmark::before{
  background-image:
    radial-gradient(2.5px 2.5px at 9% 28%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 22% 62%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(3px 3px at 37% 22%,rgba(255,255,255,1),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 55% 74%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 71% 38%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 93% 55%,rgba(255,255,255,.75),rgba(255,255,255,0));
  animation:va-shimmer-1 9s ease-in-out .4s infinite}

.va-hero .va-wordmark::after{
  background-image:
    radial-gradient(2px 2px at 16% 72%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 30% 34%,rgba(255,255,255,1),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 48% 18%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 63% 66%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 80% 26%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(3px 3px at 96% 70%,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:va-shimmer-2 13s ease-in-out 1.1s infinite}

.va-hero .va-wordmark h1::before{
  background-image:
    radial-gradient(1.5px 1.5px at 12% 48%,rgba(255,255,255,.75),rgba(255,255,255,0)),
    radial-gradient(3px 3px at 27% 78%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 44% 42%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 68% 12%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 88% 40%,rgba(255,255,255,.7),rgba(255,255,255,0));
  animation:va-shimmer-3 11s ease-in-out .7s infinite}

.va-hero .va-wordmark .et_pb_text_inner::before{
  background-image:
    radial-gradient(3px 3px at 6% 62%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 35% 56%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 58% 30%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 76% 68%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 91% 20%,rgba(255,255,255,.85),rgba(255,255,255,0));
  animation:va-shimmer-1 15s ease-in-out 1.6s infinite}

.va-hero .va-wordmark .et_pb_text_inner::after{
  background-image:
    radial-gradient(2px 2px at 20% 20%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 41% 68%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 60% 48%,rgba(255,255,255,1),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 84% 76%,rgba(255,255,255,.7),rgba(255,255,255,0));
  animation:va-shimmer-2 12s ease-in-out 2.1s infinite}

/* ---------- Polvere d'argento su tutta la hero ----------
   5 strati indipendenti, 7 dimensioni da 1px a 4px, durate mai multiple tra loro */
.va-hero .et_pb_row,.va-hero .et_pb_column{position:relative}
.va-hero .et_pb_module{position:relative;z-index:2}

.va-hero::before,
.va-hero .et_pb_row::before,
.va-hero .et_pb_row::after,
.va-hero .et_pb_column::before,
.va-hero .et_pb_column::after{
  content:"";position:absolute;pointer-events:none;z-index:1;
  background-repeat:no-repeat;opacity:0}

/* strato A - copre tutta la sezione */
.va-hero::before{inset:0;
  background-image:
    radial-gradient(1px 1px at 6% 18%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 14% 74%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 23% 41%,rgba(255,255,255,.75),rgba(255,255,255,0)),
    radial-gradient(4px 4px at 31% 88%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 47% 12%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(3px 3px at 59% 63%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 71% 29%,rgba(255,255,255,.65),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 83% 81%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 91% 35%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 97% 66%,rgba(255,255,255,.7),rgba(255,255,255,0));
  animation:va-shimmer-1 13s ease-in-out 0s infinite}

/* strato B */
.va-hero .et_pb_row::before{inset:-46% -22%;
  background-image:
    radial-gradient(2px 2px at 4% 52%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 17% 21%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 28% 67%,rgba(255,255,255,.6),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 39% 34%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 53% 79%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(4px 4px at 66% 16%,rgba(255,255,255,1),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 78% 58%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 88% 90%,rgba(255,255,255,.65),rgba(255,255,255,0)),
    radial-gradient(3px 3px at 95% 44%,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:va-shimmer-2 9s ease-in-out .6s infinite}

/* strato C */
.va-hero .et_pb_row::after{inset:-46% -22%;
  background-image:
    radial-gradient(1.5px 1.5px at 9% 83%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(3px 3px at 21% 47%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 34% 9%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 44% 71%,rgba(255,255,255,.6),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 57% 38%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(4px 4px at 69% 86%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 81% 25%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 92% 61%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 99% 14%,rgba(255,255,255,.6),rgba(255,255,255,0));
  animation:va-shimmer-3 17s ease-in-out 1.3s infinite}

/* strato D */
.va-hero .et_pb_column::before{inset:-52% -26%;
  background-image:
    radial-gradient(2.5px 2.5px at 11% 31%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 26% 92%,rgba(255,255,255,.6),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 37% 55%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 49% 23%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 63% 76%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(4px 4px at 76% 42%,rgba(255,255,255,1),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 86% 7%,rgba(255,255,255,.6),rgba(255,255,255,0)),
    radial-gradient(3px 3px at 94% 69%,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:va-shimmer-4 11s ease-in-out 1.9s infinite}

/* strato E */
.va-hero .et_pb_column::after{inset:-52% -26%;
  background-image:
    radial-gradient(3px 3px at 7% 64%,rgba(255,255,255,.9),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 19% 13%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(2px 2px at 32% 80%,rgba(255,255,255,.8),rgba(255,255,255,0)),
    radial-gradient(1px 1px at 46% 49%,rgba(255,255,255,.6),rgba(255,255,255,0)),
    radial-gradient(3.5px 3.5px at 61% 27%,rgba(255,255,255,.95),rgba(255,255,255,0)),
    radial-gradient(2.5px 2.5px at 73% 94%,rgba(255,255,255,.85),rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 87% 51%,rgba(255,255,255,.7),rgba(255,255,255,0)),
    radial-gradient(4px 4px at 96% 18%,rgba(255,255,255,.95),rgba(255,255,255,0));
  animation:va-shimmer-1 15s ease-in-out .9s infinite}

/* ---------- Tagline parola per parola ---------- */
.va-hero .va-tagline p{display:flex;gap:.55em;justify-content:center;flex-wrap:wrap;margin:0;
  font-family:'Oswald',sans-serif;font-weight:300;font-size:clamp(1.5rem,4.6vw,3.3rem);
  letter-spacing:.2em;text-transform:uppercase;color:#E8EAED}
.va-hero .va-tagline span{opacity:0;transform:translateY(16px);animation:va-rise .7s ease forwards}
.va-hero .va-tagline span:nth-child(1){animation-delay:.9s}
.va-hero .va-tagline span:nth-child(2){animation-delay:1.12s}
.va-hero .va-tagline span:nth-child(3){animation-delay:1.34s}

/* ---------- Sottotitolo ---------- */
.va-hero .va-sub{opacity:0;animation:va-rise .8s ease 1.7s forwards}
.va-hero .va-sub p{max-width:560px;margin:26px auto 0;font-size:16px;line-height:1.6;color:#B6BCC3}

/* ---------- Pulsanti hero ---------- */
.va-hero .et_pb_button_module_wrapper{display:inline-block;margin:36px 8px 0;
  opacity:0;animation:va-rise .8s ease 1.95s forwards}

/* Forma e dimensioni identiche anche in hover (blocca il "salto" di Divi) */
body #page-container .va-hero .et_pb_button,
body #page-container .va-hero .et_pb_button:hover{
  font-family:'Oswald',sans-serif!important;font-weight:500!important;
  text-transform:uppercase!important;letter-spacing:2px!important;
  font-size:14px!important;border-radius:4px!important;
  padding:12px 26px!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease}

/* Via la freccina di Divi, in ogni stato */
body #page-container .va-hero .et_pb_button:before,
body #page-container .va-hero .et_pb_button:after{
  display:none!important;content:none!important;opacity:0!important;margin:0!important}

/* Primario: ottanio pieno (l'azione principale del sito) */
body #page-container .va-hero .va-cta-primary.et_pb_button,
body #page-container .va-hero .va-cta-primary .et_pb_button{
  background:#16697A!important;color:#FFFFFF!important;border:2px solid #16697A!important}
body #page-container .va-hero .va-cta-primary.et_pb_button:hover,
body #page-container .va-hero .va-cta-primary .et_pb_button:hover{
  background:#1E8098!important;color:#FFFFFF!important;border-color:#1E8098!important}

/* Secondario: trasparente col bordo */
body #page-container .va-hero .va-cta-ghost.et_pb_button,
body #page-container .va-hero .va-cta-ghost .et_pb_button{
  background:transparent!important;color:#FFFFFF!important;border:2px solid rgba(255,255,255,.45)!important}
body #page-container .va-hero .va-cta-ghost.et_pb_button:hover,
body #page-container .va-hero .va-cta-ghost .et_pb_button:hover{
  background:rgba(255,255,255,.08)!important;color:#FFFFFF!important;border-color:#FFFFFF!important}

/* ---------- Indicatore di scorrimento (nessun modulo: e' la sezione) ---------- */
.va-hero::after{content:"";position:absolute;left:50%;bottom:52px;
  width:13px;height:13px;pointer-events:none;z-index:2;
  border-right:2px solid #E8EAED;border-bottom:2px solid #E8EAED;
  transform:translateX(-50%) rotate(45deg);
  animation:va-arrow 2.2s ease-in-out 2.6s infinite}

/* ============ SISTEMA TESTI RIUTILIZZABILE (tutte le sezioni) ============ */
/* Occhiello: linea 40x1 + testo spaziato */
.va-label p{display:flex;align-items:center;gap:14px;margin:0;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:#7D848C}
.va-label p::before{content:"";width:40px;height:2px;background:#16697A;flex-shrink:0}
/* .va-label-ott resta valida per retrocompatibilita': ora e' il comportamento standard */
/* Occhiello centrato (sezioni con intro al centro) */
.va-label-center p{justify-content:center}

/* Evidenzia in ottanio una porzione di titolo o di testo, in qualsiasi sezione */
.ott{color:#16697A}

.va-body p{font-size:17px;line-height:1.7;color:#444444;margin-bottom:1.1rem}
.va-body p:last-child{margin-bottom:0}

/* ============ T1 - CHI SIAMO ============ */
.va-about{background:#FAFAFA}
.va-about .et_pb_row{width:90%;max-width:1180px}
@media (min-width:981px){
  .va-about .et_pb_row{display:flex;align-items:center;gap:96px}
  .va-about .et_pb_column{float:none;width:auto;margin:0!important}
  .va-about .et_pb_column:first-child{flex:3}
  .va-about .et_pb_column:last-child{flex:2}
}
.va-about .et_pb_module{margin-bottom:0}
.va-about h2{font-family:'Oswald',sans-serif;font-weight:500;
  font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;color:#1A1A1A;margin:16px 0 24px;padding:0}
.va-about h2 .ott{color:#16697A}

/* Filigrana "925" in ottanio dietro la colonna di testo */
@media (min-width:981px){
  .va-about .et_pb_column:first-child{position:relative}
  .va-about .et_pb_column:first-child::before{
    content:"925";position:absolute;left:-6%;top:-22%;z-index:0;pointer-events:none;
    font-family:'Oswald',sans-serif;font-weight:600;line-height:1;
    font-size:clamp(9rem,15vw,14rem);letter-spacing:.02em;
    color:transparent;-webkit-text-stroke:1px rgba(22,105,122,.14)}
  .va-about .et_pb_column:first-child .et_pb_module{position:relative;z-index:1}
}

/* Immagine 4:5 (segnaposto finche' non arrivano le foto) */
.va-about .va-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}

/* Card statistiche sovrapposta, sbordante a sinistra */
.va-stats{position:relative;z-index:2;background:#FFFFFF;
  box-shadow:0 12px 36px rgba(26,26,26,.14);
  display:grid;grid-template-columns:1fr 1fr 1fr;
  margin:-64px -32px 0 -32px;padding:26px 0}
.va-stats > div{text-align:center;padding:4px 10px}
.va-stats > div + div{border-left:1px solid #E8EAED}
.va-stats b{display:block;font-family:'Oswald',sans-serif;font-weight:500;
  font-size:26px;line-height:1.1;color:#1A1A1A}
.va-stats b.ott{color:#16697A}
.va-stats span{display:block;margin-top:6px;font-family:'Oswald',sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7D848C}
@media (max-width:980px){
  .va-stats{margin:-40px 0 0}
  .va-about .et_pb_column:last-child{margin-top:48px!important}
}

/* ============ T2 - CATEGORIE ============ */
.va-cats{background:#E8EAED}
.va-cats .et_pb_row{width:90%;max-width:1180px}

/* --- Riga introduttiva: titolo a sinistra, nota a destra --- */
.va-cats-intro{margin-bottom:56px!important}
.va-cats-intro .et_pb_module{margin-bottom:0}
@media (min-width:981px){
  .va-cats-intro{display:flex;align-items:flex-end;gap:80px}
  .va-cats-intro .et_pb_column{float:none;width:auto;margin:0!important}
  .va-cats-intro .et_pb_column:first-child{flex:1.4}
  .va-cats-intro .et_pb_column:last-child{flex:1}
}
.va-cats-intro h2{font-family:'Oswald',sans-serif;font-weight:500;
  font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.06em;line-height:1.25;
  text-transform:uppercase;color:#1A1A1A;margin:16px 0 0;padding:0}
.va-cats-intro .va-body p{max-width:380px;font-size:16px;color:#4A5057}

/* --- Griglia: UNA colonna con dentro i 12 Blurb --- */
.va-cats-grid .et_pb_column{display:flex;flex-wrap:wrap;margin-left:-20px}
.va-cats-grid .et_pb_module{width:calc(25% - 20px);margin:0 0 20px 20px!important}

/* Caselle quadrate, contenuto centrato */
.va-cats-grid .et_pb_blurb{aspect-ratio:1/1;padding:18px 12px;overflow:hidden;
  transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}
.va-cats-grid .et_pb_blurb_content{height:100%;max-width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}

/* L'icona vive dentro un dischetto ottanio chiaro */
.va-cats-grid .et_pb_main_blurb_image{margin:0 0 22px;line-height:0}
.va-cats-grid .et_pb_image_wrap{display:flex;align-items:center;justify-content:center;
  width:106px;height:106px;border-radius:50%;background:#E3EDEF;
  transition:background-color .22s ease}
.va-cats-grid .et_pb_blurb img{width:58px;height:auto;margin:0;
  transition:filter .22s ease}

.va-cats-grid .et_pb_module_header{font-family:'Oswald',sans-serif!important;font-weight:500!important;
  font-size:1.05rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:#1A1A1A!important;padding:0!important;line-height:1.2!important;text-align:center}

/* Colori: !important per battere gli stili inline dei moduli */
body #page-container .va-cats-grid .et_pb_blurb{
  background-image:none!important;background-color:#FAFAFA!important}
body #page-container .va-cats-grid .et_pb_blurb:hover{
  background-color:#FFFFFF!important;transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(26,26,26,.10)}
/* Al passaggio il dischetto si riempie e l'icona diventa bianca */
.va-cats-grid .et_pb_blurb:hover .et_pb_image_wrap{background:#16697A}
.va-cats-grid .et_pb_blurb:hover img{filter:brightness(0) invert(1)}
.va-cats-grid .et_pb_blurb:hover .et_pb_module_header{color:#16697A!important}

/* --- 12a casella: l'invito al catalogo --- */
body #page-container .va-cats-grid .va-cat-all{background-color:#16697A!important}
body #page-container .va-cats-grid .va-cat-all:hover{
  background-color:#125A6B!important;transform:translateY(-3px);
  box-shadow:0 8px 26px rgba(22,105,122,.30)}

/* dischetto trasparente e icona bianca */
.va-cats-grid .va-cat-all .et_pb_main_blurb_image{margin-bottom:18px}
.va-cats-grid .va-cat-all .et_pb_image_wrap{width:84px;height:84px;
  background:rgba(255,255,255,.14)}
.va-cats-grid .va-cat-all:hover .et_pb_image_wrap{background:rgba(255,255,255,.24)}
.va-cats-grid .va-cat-all img,
.va-cats-grid .va-cat-all:hover img{width:46px;filter:brightness(0) invert(1)}

/* titolo sempre bianco, anche in hover */
.va-cats-grid .va-cat-all .et_pb_module_header,
.va-cats-grid .va-cat-all:hover .et_pb_module_header{
  color:#FFFFFF!important;font-size:.98rem!important;letter-spacing:.1em!important;
  line-height:1.35!important;margin-bottom:12px!important}

/* riga d'invito con la freccia che scorre */
.va-cats-grid .va-cat-all .et_pb_blurb_description{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);text-align:center}
.va-cats-grid .va-cat-all .et_pb_blurb_description p{margin:0;color:inherit}
.va-cats-grid .va-cat-all .fr{display:inline-block;transition:transform .22s ease}
.va-cats-grid .va-cat-all:hover .fr{transform:translateX(6px)}

@media (max-width:980px){
  .va-cats-grid .et_pb_module{width:calc(33.33% - 20px)}
  .va-cats-intro .et_pb_module:last-child{margin-top:20px}
  /* la casella CTA ha piu' testo: rimpicciolisco per non farla scoppiare */
  .va-cats-grid .va-cat-all .et_pb_image_wrap{width:68px;height:68px}
  .va-cats-grid .va-cat-all img,
  .va-cats-grid .va-cat-all:hover img{width:38px}
  .va-cats-grid .va-cat-all .et_pb_main_blurb_image{margin-bottom:12px}
  .va-cats-grid .va-cat-all .et_pb_module_header,
  .va-cats-grid .va-cat-all:hover .et_pb_module_header{font-size:.86rem!important;margin-bottom:8px!important}
  .va-cats-grid .va-cat-all .et_pb_blurb_description{font-size:.68rem;letter-spacing:.1em}
}
@media (max-width:640px){
  .va-cats-grid .et_pb_module{width:calc(50% - 20px)}
  .va-cats-grid .et_pb_image_wrap{width:82px;height:82px}
  .va-cats-grid .et_pb_blurb img{width:46px}
  .va-cats-grid .et_pb_module_header{font-size:.95rem!important}
  /* Su telefono la CTA resta quadrata come le altre (12 caselle = 6 righe piene).
     Sparisce il titolo lungo e resta icona + invito, come le altre categorie. */
  .va-cats-grid .va-cat-all .et_pb_image_wrap{width:82px;height:82px}
  .va-cats-grid .va-cat-all img,
  .va-cats-grid .va-cat-all:hover img{width:46px}
  .va-cats-grid .va-cat-all .et_pb_main_blurb_image{margin-bottom:20px}
  .va-cats-grid .va-cat-all .et_pb_module_header,
  .va-cats-grid .va-cat-all:hover .et_pb_module_header{display:none}
  .va-cats-grid .va-cat-all .et_pb_blurb_description{font-size:.8rem;letter-spacing:.12em}
}

/* ============ T3 - COME FUNZIONA ============ */
.va-how{background:#1A1A1A}
.va-how .et_pb_row{width:90%;max-width:1180px}
.va-how .et_pb_module{margin-bottom:0}

/* Intro centrata */
.va-how-intro{margin-bottom:64px!important}
.va-how .va-label p{color:#B6BCC3}
.va-how .va-label p::before{background:#16697A}
.va-how h2{font-family:'Oswald',sans-serif;font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;color:#FFFFFF;margin:16px 0 0;padding:0}

/* I tre passi */
@media (min-width:981px){
  .va-how-steps{display:flex;gap:48px}
  .va-how-steps .et_pb_column{float:none;width:auto;margin:0!important;flex:1}
}
.va-step{border-top:1px solid #3A3A3A;padding-top:32px}
.va-step .n{display:block;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:60px;line-height:1;margin-bottom:22px;
  color:transparent;-webkit-text-stroke:1px #B6BCC3}
.va-step h3{font-family:'Oswald',sans-serif;font-weight:500;font-size:18px;
  letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF;margin:0 0 12px;padding:0}
.va-step p{font-size:15px;line-height:1.7;color:#B6BCC3;margin:0}

/* Chiusura: bottone + alternativa */
.va-how-cta{margin-top:80px!important;text-align:center}
body #page-container .va-how .et_pb_button{
  background:#16697A!important;color:#FFFFFF!important;border:2px solid #16697A!important;
  font-family:'Oswald',sans-serif!important;font-weight:500!important;font-size:14px!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  padding:16px 40px!important;border-radius:4px!important}
body #page-container .va-how .et_pb_button:hover{
  background:#1E8098!important;border-color:#1E8098!important;color:#FFFFFF!important}
body #page-container .va-how .et_pb_button:before,
body #page-container .va-how .et_pb_button:after{display:none!important;content:none!important}
.va-how-cta,.va-how-cta .et_pb_module{text-align:center!important}
.va-how-cta .et_pb_button_module_wrapper{display:inline-block}
.va-how-cta .va-alt p{margin:22px 0 0;font-size:14px;color:#B6BCC3;text-align:center}
.va-how-cta .va-alt a{color:#E8EAED;border-bottom:1px solid #4A4A4A;padding-bottom:2px}
.va-how-cta .va-alt a:hover{color:#FFFFFF;border-bottom-color:#16697A}

@media (max-width:980px){
  .va-how-steps .et_pb_column{margin-bottom:44px!important}
  .va-how-steps .et_pb_column:last-child{margin-bottom:0!important}
  .va-how-cta{margin-top:56px!important}
}

/* ============ T4 - CONTATTI ============ */
.va-contact{background:#FAFAFA}
.va-contact .et_pb_row{width:90%;max-width:1180px}
.va-contact .et_pb_module{margin-bottom:0}
@media (min-width:981px){
  .va-contact .et_pb_row{display:flex;align-items:flex-start;gap:96px}
  .va-contact .et_pb_column{float:none;width:auto;margin:0!important}
  .va-contact .et_pb_column:first-child{flex:2}
  .va-contact .et_pb_column:last-child{flex:3}
}
.va-contact h2{font-family:'Oswald',sans-serif;font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;color:#1A1A1A;margin:16px 0 20px;padding:0}

/* --- Tile di contatto: WhatsApp e Email --- */
.va-tiles{margin-top:28px}
.va-tiles a{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:24px 28px;margin-bottom:16px;border-radius:4px;
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.va-tiles a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,26,26,.14)}
.va-tiles b{display:block;font-family:'Oswald',sans-serif;font-weight:500;
  font-size:1rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.va-tiles small{display:block;font-size:.85rem;opacity:.85}
.va-tiles .fr{font-size:1.3rem;line-height:1;transition:transform .2s ease}
.va-tiles a:hover .fr{transform:translateX(6px)}
.va-tile-wa{background:#16697A}
.va-tile-wa b,.va-tile-wa small,.va-tile-wa .fr{color:#FFFFFF}
.va-tile-mail{background:#1A1A1A}
.va-tile-mail b,.va-tile-mail small,.va-tile-mail .fr{color:#FFFFFF}

/* --- Card bianca con il form --- */
.va-form-card{background:#FFFFFF;box-shadow:0 12px 36px rgba(26,26,26,.12);
  border-radius:4px;padding:44px 48px}
.va-form-card h3{font-family:'Oswald',sans-serif;font-weight:500;font-size:1.25rem;
  letter-spacing:.08em;text-transform:uppercase;color:#1A1A1A;margin:0 0 8px;padding:0}
.va-form-card .va-form-sub{font-size:.95rem;color:#6B727A;margin:0 0 26px}

/* Campi del modulo contatti Divi */
.va-form-card .et_pb_contact_form{margin:0}
.va-form-card .et_pb_contact_field{margin-bottom:16px;padding:0 8px}
.va-form-card .et_pb_contact_form input,
.va-form-card .et_pb_contact_form textarea{
  background:#FAFAFA!important;border:1px solid #B6BCC3!important;border-radius:4px!important;
  color:#1A1A1A!important;font-size:15px!important;padding:14px 16px!important}
.va-form-card .et_pb_contact_form input:focus,
.va-form-card .et_pb_contact_form textarea:focus{border-color:#16697A!important;outline:none}
.va-form-card .et_pb_contact_form input::placeholder,
.va-form-card .et_pb_contact_form textarea::placeholder{color:#7D848C}

/* Bottone invio: ottanio a tutta larghezza */
body #page-container .va-form-card .et_pb_contact_submit{
  width:100%;background:#16697A!important;color:#FFFFFF!important;
  border:2px solid #16697A!important;border-radius:4px!important;
  font-family:'Oswald',sans-serif!important;font-weight:500!important;font-size:14px!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;padding:16px 20px!important}
body #page-container .va-form-card .et_pb_contact_submit:hover{
  background:#1E8098!important;border-color:#1E8098!important}
body #page-container .va-form-card .et_pb_contact_submit:before,
body #page-container .va-form-card .et_pb_contact_submit:after{display:none!important;content:none!important}
.va-form-card .et_contact_bottom_container{width:100%;margin:6px 0 0;padding:0 8px}

/* Nota privacy sotto il bottone */
.va-form-card .va-gdpr p{margin:14px 0 0;font-size:12px;line-height:1.6;color:#9AA1A9}

@media (max-width:980px){
  .va-contact .et_pb_column:last-child{margin-top:48px!important}
  .va-form-card{padding:32px 24px}
}

/* ============ T5 - FOOTER ============ */
.va-footer{position:relative;background:#141517}
/* filo metallico in cima: la firma argento anche qui */
.va-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#B6BCC3 30%,#FFFFFF 50%,#B6BCC3 70%,transparent)}
.va-footer .et_pb_row{width:90%;max-width:1180px;position:relative;z-index:2}
.va-footer .et_pb_module{margin-bottom:0}
/* Filigrana: il wordmark enorme in contorno, appena percettibile */
.va-footer{overflow:hidden}
.va-footer::after{content:"VEROARGENTO";position:absolute;left:50%;bottom:-.18em;
  transform:translateX(-50%);z-index:1;pointer-events:none;white-space:nowrap;
  font-family:'Oswald',sans-serif;font-weight:600;line-height:1;
  font-size:clamp(6rem,14vw,13rem);letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1px rgba(182,188,195,.07)}
@media (max-width:980px){.va-footer::after{display:none}}

/* --- Riga principale: 3 colonne --- */
@media (min-width:981px){
  .va-f-main{display:flex;gap:72px}
  .va-f-main .et_pb_column{float:none;width:auto;margin:0!important}
  .va-f-main .et_pb_column:first-child{flex:1.6}
  .va-f-main .et_pb_column:nth-child(2),
  .va-f-main .et_pb_column:nth-child(3){flex:1}
}
/* Blocco brand */
.va-f-brand .stamp{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em;
  color:#B6BCC3;border:1.5px solid #B6BCC3;border-radius:3px;
  padding:3px 7px 2px;line-height:1;margin-bottom:14px}
.va-f-brand b{display:block;font-family:'Oswald',sans-serif;font-weight:500;
  font-size:20px;letter-spacing:.22em;text-transform:uppercase;color:#E8EAED}
.va-f-brand i{display:block;margin:6px 0 16px;font-style:normal;
  font-family:'Oswald',sans-serif;font-weight:300;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:#7D848C}
.va-f-brand p{margin:0;font-size:13.5px;line-height:1.8;color:#9AA1A9;max-width:300px}

/* Titoletti di colonna */
.va-f-title p{margin:0 0 16px;font-family:'Oswald',sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#7D848C}

/* Liste (contatti e link) */
.va-f-list p{margin:0 0 10px;font-size:14px;line-height:1.6;color:#B6BCC3}
.va-f-list a{color:#E8EAED;border-bottom:1px solid rgba(22,105,122,.65);padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease}
.va-f-list a:hover{color:#FFFFFF;border-bottom-color:#2FA3BC}

/* --- Barra legale in fondo --- */
.va-f-bottom{border-top:1px solid #26282B;margin-top:48px}
.va-f-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 0}
.va-f-bar p{margin:0;font-size:12px;color:#6B727A}
.va-f-bar a{color:#B6BCC3;border-bottom:1px solid rgba(22,105,122,.65);padding-bottom:1px}
.va-f-bar a:hover{color:#FFFFFF;border-bottom-color:#2FA3BC}

@media (max-width:980px){
  .va-f-main .et_pb_column{margin-bottom:36px!important}
  .va-f-main .et_pb_column:last-child{margin-bottom:0!important}
  .va-f-bar{justify-content:center;text-align:center}
}

/* ============ ANIMAZIONI ============ */
@keyframes va-rise{to{opacity:1;transform:translateY(0)}}
@keyframes va-sheen{
  0%,8%    {background-position:0% 0}    /* riposo a sinistra */
  42%,50%  {background-position:100% 0}  /* arrivo a destra e sosta */
  84%,100% {background-position:0% 0}    /* ritorno e riposo lungo */
}
/* Variante "parte dal centro": sostituisci i tre passaggi qui sopra con
   0%,8%{background-position:50% 0} 42%,50%{background-position:100% 0}
   84%,100%{background-position:50% 0} */
/* Dissolvenze morbide: salgono e scendono lentamente, poi riposano */
@keyframes va-shimmer-1{0%{opacity:0}10%{opacity:.95}20%{opacity:.2}30%{opacity:.9}42%,100%{opacity:0}}
@keyframes va-shimmer-2{0%{opacity:0}12%{opacity:.7}24%{opacity:.15}36%{opacity:.75}50%,100%{opacity:0}}
@keyframes va-shimmer-3{0%{opacity:0}9%{opacity:.85}19%{opacity:.2}30%{opacity:.8}44%,100%{opacity:0}}
@keyframes va-shimmer-4{0%{opacity:0}11%{opacity:.8}22%{opacity:.2}34%{opacity:.85}48%,100%{opacity:0}}
@keyframes va-arrow{
  0%,100%{transform:translateX(-50%) rotate(45deg) translate(0,0);opacity:.45}
  50%    {transform:translateX(-50%) rotate(45deg) translate(4px,4px);opacity:1}
}

/* ============ RIDUZIONE MOVIMENTI ============ */
@media (prefers-reduced-motion:reduce){
  .va-hero .va-eyebrow,.va-hero .va-wordmark h1,.va-hero .va-tagline span,.va-hero .va-sub,
  .va-hero .et_pb_button_module_wrapper{animation:none;opacity:1;transform:none}
  .va-hero::after{display:none}
  .va-hero .va-wordmark h1{background-position:50% 0}
  .va-hero::before,
  .va-hero .et_pb_row::before,.va-hero .et_pb_row::after,
  .va-hero .et_pb_column::before,.va-hero .et_pb_column::after,
  .va-hero .va-wordmark h1::before,
  .va-hero .va-wordmark::before,
  .va-hero .va-wordmark::after,
  .va-hero .va-wordmark .et_pb_text_inner::before,
  .va-hero .va-wordmark .et_pb_text_inner::after{display:none}
}

/* QUANDO ARRIVERA' LA FOTO VERA: caricala come sfondo della sezione e aggiungi
   il velo scuro SOPRA la foto usando il gradiente nel campo sfondo di Divi
   (Sfondo > Gradiente + Immagine), NON con ::before, che ora fa le scintille. */