/* ============================================================
   Home studio tecnico e pagine istituzionali — moduli nativi
   ============================================================ */

/* --- hero --- */
/* Divi genera selettori molto specifici (.et_pb_text_0 h1): serve alzare la
   specificità, altrimenti il titolo resta del colore di default. */
.vs-hero{position:relative;overflow:hidden}
.vs-hero .et_pb_row{max-width:1240px;position:relative;z-index:2}
/* Il gradiente del modulo copre da sinistra, ma la neve in alto resta chiara e
   il titolo bianco ci spariva sopra. Questo secondo velo scurisce la fascia
   alto-sinistra dove cade il testo, senza spegnere la foto sulla destra. */
.vs-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(8,22,36,.72) 0%,rgba(8,22,36,.42) 38%,
rgba(8,22,36,0) 72%)}
/* Le due stagioni. Divi non ha uno slideshow di sfondo per le sezioni: la foto
   invernale resta lo sfondo nativo (modificabile dal Builder), quella estiva è
   questo livello che le va sopra e si alterna in dissolvenza.
   Per cambiare la foto estiva basta cambiare HERO_IMG_2 in build_pagine.py.
   Si anima solo l'opacità di un livello decorativo: se l'animazione non parte
   si vede la foto invernale e il testo resta comunque leggibile. */
.vs-hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0}
/* La foto estiva pesa 140 KB e si vede solo dopo 7 s: su phone e tablet non la
   carichiamo affatto (LCP), resta solo da desktop. image-set serve il WebP
   generato da LiteSpeed ai browser che lo supportano. */
@media (min-width:981px){.vs-hero:after{background:linear-gradient(180deg,rgba(10,27,43,.78) 0%,rgba(11,30,46,.45) 45%,rgba(9,24,38,.86) 100%),url(https://www.valdisoleappartamenti.it/wp-content/uploads/2026/08/casa-cristina-5-1536x746.jpg) center center/cover no-repeat;
background-image:linear-gradient(180deg,rgba(10,27,43,.78) 0%,rgba(11,30,46,.45) 45%,rgba(9,24,38,.86) 100%),image-set(url(https://www.valdisoleappartamenti.it/wp-content/uploads/2026/08/casa-cristina-5-1536x746.jpg.webp) type("image/webp"),url(https://www.valdisoleappartamenti.it/wp-content/uploads/2026/08/casa-cristina-5-1536x746.jpg) type("image/jpeg"));
animation:vs-hero-stagioni 18s ease-in-out infinite}}
@keyframes vs-hero-stagioni{0%,42%{opacity:0}52%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.vs-hero:after{animation:none}}
/* Colore: l'attributo nativo background_layout="dark" fa già il suo lavoro,
   queste regole sono il rinforzo per le classi di Divi ad alta specificità. */
.vs-hero .vs-hero-txt h1,
.vs-hero .et_pb_text h1,
.vs-hero .et_pb_text_inner h1{color:#ffffff!important;
font-family:'Bricolage Grotesque',sans-serif!important;font-weight:600!important;
font-size:clamp(32px,5vw,58px)!important;line-height:1.08!important;
letter-spacing:-.015em;margin:0!important;padding:0!important;max-width:17ch;
text-wrap:balance;text-shadow:0 2px 20px rgba(5,16,27,.62)}
.vs-hero .vs-hero-txt h1 em{font-style:normal;color:#8ecafc!important}
.vs-hero .vs-hero-txt .vs-hero-sub{color:#e8f0f7!important;
text-shadow:0 1px 14px rgba(5,16,27,.55)}
.vs-hero .vs-hero-txt .vs-hero-tag{color:#ffffff!important}
.vs-hero-tag{display:inline-block;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:999px;margin:0 0 22px}
.vs-hero-txt h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;color:#fff;
font-size:clamp(34px,6vw,66px);line-height:1.06;letter-spacing:-.015em;margin:0;padding:0;
max-width:16ch;text-wrap:balance}
.vs-hero-txt h1 em{font-style:normal;color:#8ecafc}
.vs-hero-sub{color:#e3edf5;font-size:clamp(16px,2vw,19px);line-height:1.6;max-width:58ch;margin:20px 0 0}
/* Divi mette module_class sul bottone, non sul wrapper: era il wrapper (block)
   a mandare i due pulsanti a capo. Si affiancano agendo su quello. */
.vs-hero .et_pb_button_module_wrapper{display:inline-block;vertical-align:top;
margin:0 12px 12px 0}
.vs-b-hero,.vs-b-ghost{display:inline-block;margin:0 12px 12px 0}
.vs-b .et_pb_button{padding:16px 28px!important;font-size:15.5px!important;transition:background .15s}
.vs-b-hero .et_pb_button:hover{background:#25611e!important}
.vs-b-ghost .et_pb_button{border:1px solid rgba(255,255,255,.45)!important}
.vs-b-ghost .et_pb_button:hover{background:rgba(255,255,255,.28)!important}
.vs-b .et_pb_button:after{display:none!important}
.vs-b-center{text-align:center}
.vs-b-center .et_pb_button{margin:0 auto}

/* --- fatti chiave, a cavallo dell'hero --- */
.vs-facts-sec .et_pb_row{max-width:1080px;background:#fff;border:1px solid #e3e9ee;
border-radius:18px;box-shadow:0 24px 54px -26px rgba(13,35,53,.4);
margin-top:-56px!important;padding:0!important;position:relative;z-index:5}
.vs-facts-row .et_pb_column{padding:22px 20px!important;text-align:center;margin-bottom:0!important;
border-right:1px solid #eef2f5}
.vs-facts-row .et_pb_column:last-child{border-right:0}
.vs-fact{margin-bottom:0!important}
.vs-fact-v{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(17px,2.1vw,26px);
font-weight:600;color:#1a6fb4;line-height:1.1;margin:0}
.vs-fact-l{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#55636f;margin:7px 0 0}

/* --- intestazioni di sezione --- */
.vs-sez-head,.vs-page-head{margin-bottom:36px!important}
.vs-al-center{text-align:center}
.vs-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:#2f7d27;margin:0}
.vs-sez-head h2,.vs-page-head h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-.015em;margin:14px 0 0;
color:#172a3a;padding:0;text-wrap:balance}
.vs-lead{font-size:16.5px;line-height:1.7;color:#55636f;margin:18px 0 0;max-width:62ch}
.vs-al-center .vs-lead{margin-left:auto;margin-right:auto}

/* --- testate di sezione: titolo a sinistra, descrizione a destra (come da bozza) --- */
.vs-testata-row{align-items:flex-end;margin-bottom:34px!important}
.vs-testata-row .et_pb_column{margin-bottom:12px!important}
.vs-testata-t .vs-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:#2b7523;margin:0}
.vs-testata-t h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.015em;margin:12px 0 0;
color:#172a3a;padding:0;text-wrap:balance}
.vs-testata-d .vs-lead{font-size:15px;line-height:1.65;color:#55636f;margin:0;padding-bottom:6px}
.vs-testata-chiara .vs-eyebrow{color:#9fdb90}   /* 4.19:1 -> 5.4:1 su fondo blu */
.vs-testata-chiara h2{color:#ffffff!important}
.vs-testata-chiara .vs-lead{color:#c3d4e2}

/* --- servizi: card compatte, icona in badge quadrato --- */
.vs-serv{background:#fff;border:1px solid #e3e9ee;border-radius:16px;padding:22px 20px!important;
height:100%;transition:border-color .18s,box-shadow .18s,transform .18s}
.vs-serv:hover{border-color:#1a6fb4;box-shadow:0 16px 34px -20px rgba(26,111,180,.35);
transform:translateY(-3px)}
.vs-serv .et_pb_main_blurb_image{margin-bottom:14px;display:block;text-align:left}
.vs-serv .et-pb-icon{width:46px;height:46px;border-radius:12px;background:#e8f1f9;
display:inline-flex!important;align-items:center;justify-content:center;
font-size:20px!important;line-height:1}
.vs-serv-v .et-pb-icon{background:#eaf6e7}
.vs-serv .et_pb_module_header{font-family:'Bricolage Grotesque',sans-serif!important;
font-weight:600!important;font-size:18.5px!important;line-height:1.25!important;
color:#172a3a!important;padding-bottom:8px!important;text-align:left}
.vs-serv .et_pb_blurb_description{text-align:left}
.vs-serv .et_pb_blurb_description p{font-size:14px;line-height:1.6;color:#55636f;margin:0}
/* Intestazioni dei due gruppi nella sezione alternativa ("Cosa facciamo" /
   "Perché con noi"): più piccole di una testata di sezione, servono a dire
   che le tre card sotto rispondono alla stessa domanda. */
.vs-gruppo-row{margin-bottom:0!important;padding-bottom:0!important}
.vs-gruppo{margin-bottom:18px!important}
.vs-gruppo .vs-gruppo-t{font-family:'Bricolage Grotesque',sans-serif!important;
font-weight:600!important;font-size:clamp(22px,2.6vw,28px)!important;
line-height:1.2!important;color:#172a3a!important;margin:0!important;padding:0!important}
.vs-card-nuove .vs-gruppo-row:not(:first-child) .vs-gruppo{margin-top:26px!important}

.vs-serv-row{margin-bottom:0!important}
/* Card della stessa riga alla stessa altezza. Le colonne di Divi flottano, e
   senza un contenitore flex l'height:100% della card non ha un riferimento:
   le tre schede restano di altezze diverse. Larghezze e gutter sono ancora
   quelli di Divi, qui si cambia solo il modo in cui la riga le dispone. */
.vs-serv-row{display:flex;flex-wrap:wrap;align-items:stretch}
.vs-serv-row .et_pb_column{display:flex;margin-bottom:20px!important}
.vs-serv-row .et_pb_column>.et_pb_module{width:100%}

/* --- metodo --- */
.vs-metodo-row .et_pb_column{background:#fff;border:1px solid #e3e9ee;border-radius:18px;
padding:24px!important;margin-bottom:16px!important}
.vs-step{margin-bottom:0!important}
.vs-step-n{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;
color:#1a6fb4;margin:0}
.vs-step h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:19px;
margin:10px 0 0;padding:0;color:#172a3a}
.vs-step p{font-size:14px;line-height:1.6;color:#55636f;margin:8px 0 0}

/* --- testo di pagina --- */
.vs-ptext{max-width:70ch}
.vs-ptext h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
font-size:clamp(22px,2.8vw,30px);margin:0 0 14px;padding:0;color:#172a3a}
.vs-ptext h2:not(:first-child){margin-top:32px}
.vs-ptext p{font-size:16.5px;line-height:1.75;color:#41525f;margin:0 0 14px;padding:0}
.vs-img-r .et_pb_image_wrap{border-radius:18px;overflow:hidden;display:block}
.vs-img-r img{width:100%;aspect-ratio:4/3;object-fit:cover}
.vs-2col .et_pb_column{margin-bottom:24px!important}

/* --- entità --- */
.vs-entita{background:#fff;border:1px solid #e3e9ee;border-radius:18px;padding:26px!important;
margin-bottom:0!important}
.vs-entita h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:21px;
margin:0;padding:0;color:#172a3a}
.vs-ent-addr{font-size:14px;color:#14507e;font-weight:600;margin:8px 0 12px}
.vs-entita p{font-size:14.5px;line-height:1.6;color:#55636f;margin:0}
.vs-contatti a{color:#1a6fb4;font-weight:600}
.vs-contatti{line-height:2}

/* --- CTA --- */
.vs-cta-row{align-items:center}
.vs-cta-txt h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(22px,2.8vw,30px);
color:#fff;margin:0;padding:0}
.vs-cta-txt p{font-size:15.5px;color:#c3d4e2;margin:10px 0 0;max-width:52ch}
.vs-cta-btn{text-align:right}
.vs-cta-btn .et_pb_button{padding:15px 28px!important;font-size:15px!important}
.vs-cta-btn .et_pb_button:hover{background:#25611e!important}
.vs-cta-btn .et_pb_button:after{display:none!important}

/* --- form contatti --- */
.vs-form-col{background:#f6f8fa;border:1px solid #e3e9ee;border-radius:22px;
padding:clamp(24px,4vw,36px)!important}
.vs-form-head h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:26px;
margin:0 0 20px;padding:0;color:#172a3a}
.vs-form .et_pb_contact_form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vs-form p.et_pb_contact_field{margin:0!important;padding:0!important;width:auto!important;float:none!important}
.vs-form .et_pb_contact_field_last{width:auto!important}
.vs-form .et_pb_contact_form_field_fullwidth,
.vs-form .et_contact_bottom_container{grid-column:1/-1}
.vs-form .et_pb_contact_field label{display:block;font-size:11.5px;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;color:#55636f;margin:0 0 6px}
.vs-form .et_pb_contact_field .input,.vs-form select{background:#fff!important;
border:1px solid #d7e0e8!important;border-radius:12px!important;height:48px;padding:0 14px!important;
font-size:15px!important;color:#172a3a!important;width:100%!important;box-sizing:border-box}
.vs-form textarea.input{height:110px;padding:12px 14px!important;resize:vertical}
.vs-form .et_pb_contact_field .input:focus{border-color:#1a6fb4!important;outline:none}
.vs-form .et_pb_contact_field[data-type="checkbox"] .input{height:auto;background:transparent!important;
border:none!important;padding:0!important}
.vs-form .et_pb_contact_field[data-type="checkbox"] label{text-transform:none;font-size:13.5px;
font-weight:600;letter-spacing:0;color:#55636f;display:inline}
.vs-form .et_contact_bottom_container{float:none;text-align:left;width:100%;margin:4px 0 0}
.vs-form .et_pb_contact_submit{width:100%;border-radius:14px!important;padding:17px!important;
font-weight:800!important;font-size:16px!important;margin:0}
.vs-form .et_pb_contact_submit:after{display:none!important}
.vs-mappa{margin-top:20px!important}

/* --- accessibilita' (checklist sito-go-live) ---
   NB: queste regole stanno QUI, dentro lo script che genera il CSS:
   appenderle al file .css generato non serve, il build successivo lo riscrive. */
.vs-menu .et_pb_menu__menu>nav>ul>li>a{min-height:44px;display:flex;align-items:center}
.vs-tb-left a,.vs-contatti a{min-height:44px;display:inline-flex;align-items:center}
#vs-skip{position:absolute!important;left:-9999px!important;top:0;z-index:99999;
background:#0f2c44;color:#fff!important;padding:12px 20px;border-radius:0 0 8px 0;
font-weight:700;text-decoration:none}
#vs-skip:focus,#vs-skip:focus-visible{left:0!important}

@media (max-width:980px){
  .vs-facts-row .et_pb_column{width:50%!important;border-bottom:1px solid #eef2f5}
  .vs-facts-row .et_pb_column:nth-child(2n){border-right:0}
  .vs-cta-btn{text-align:left}
  .vs-cta-row .et_pb_column{width:100%!important}
}
@media (max-width:980px){
  /* testata: titolo e descrizione uno sotto l'altro */
  .vs-testata-row .et_pb_column{width:100%!important;margin-right:0!important}
  .vs-testata-d .vs-lead{margin-top:10px}
  /* servizi: due per riga sul tablet */
  .vs-serv-row .et_pb_column{width:calc(50% - 10px)!important;margin-right:20px!important}
  .vs-serv-row .et_pb_column:nth-child(2n),
  .vs-serv-row .et_pb_column:last-child{margin-right:0!important}
}
@media (max-width:640px){
  .vs-form .et_pb_contact_form{grid-template-columns:1fr}
  .vs-facts-sec .et_pb_row{margin-top:-28px!important;width:94%}
  /* servizi e fatti: uno per riga */
  .vs-serv-row .et_pb_column,
  .vs-facts-row .et_pb_column,
  .vs-metodo-row .et_pb_column{width:100%!important;margin-right:0!important}
  .vs-facts-row .et_pb_column{border-right:0;border-bottom:1px solid #eef2f5}
  .vs-facts-row .et_pb_column:last-child{border-bottom:0}
  /* hero: più compatto e con il testo che respira */
  .vs-hero .vs-hero-txt h1{font-size:clamp(28px,8.5vw,38px)!important;max-width:100%}
  .vs-hero .vs-hero-txt .vs-hero-sub{font-size:15px}
  .vs-hero .et_pb_button_module_wrapper{display:block;margin:0 0 10px}
  .vs-hero .et_pb_button{display:block;text-align:center;padding:14px 20px!important}
  .vs-b-center .et_pb_button{display:block;text-align:center}
  /* testate: dimensioni più contenute */
  .vs-testata-t h2{font-size:clamp(24px,7vw,32px)}
  .vs-ptext p{font-size:15.5px}
}

/* --- pagina 404 (404.php del child theme) --- */
.error404 #left-area{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.vs-404 .vs-page-head{margin:0 0 28px}
.vs-404 .vs-page-head h1{font-size:clamp(1.9rem,1.2rem + 2vw,2.7rem);font-weight:600;line-height:1.15;
  letter-spacing:-.02em;color:var(--vs-ink,#172a3a);margin:0;padding:0;text-wrap:balance}
.vs-404 .vs-lead{max-width:58ch;margin:12px 0 0;font-size:1.05rem;line-height:1.6;color:var(--vs-grey,#55636f)}
.vs-404-link ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0}
.vs-404-link li{margin:0}
.vs-404-link a{display:inline-block;min-height:44px;line-height:1.2;padding:12px 18px;border-radius:8px;
  border:1px solid var(--vs-line,#e3e9ee);background:#fff;color:var(--vs-blue,#1a6fb4);
  font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.vs-404-link a:hover,.vs-404-link a:focus-visible{border-color:var(--vs-blue,#1a6fb4);background:var(--vs-bg,#f6f8fa)}
.vs-404-cerca{margin:0 0 10px;color:var(--vs-grey,#55636f)}
.vs-404 .searchform,.vs-404 #searchform{max-width:420px;margin:0 0 26px}
.vs-404-tel{color:var(--vs-grey,#55636f)}
.vs-404-tel a{color:var(--vs-blue,#1a6fb4);font-weight:600}