/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.2
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================
   claudiozollo.it — DIREZIONE VETRO
   docs/08-brand-direction.md · docs/10-design-system.md

   I token vivono come Global Variables di Elementor.
   I valori in :root sono il ripiego se il CSS del kit non è
   ancora stato generato.

   Contrasti su fondo --cz-bg:
   ink 19,1:1 · ink-2 7,4:1 (AAA) · ink-min 4,8:1 (AA, soglia)
   ========================================================== */

:root{
  --cz-bg:       #050507;
  --cz-bg-2:     #0D0D12;
  --cz-glass:    rgba(12,12,16,.55);
  --cz-solid:    rgba(255,255,255,.055);
  --cz-gline:    rgba(255,255,255,.14);
  --cz-ink:      #FBFBFD;
  --cz-ink-2:    #9B9BA6;
  --cz-ink-min:  #7A7A86;

  /* REVISIONE 28/09/2026 — l'interfaccia torna ad avere UN accento.
     È l'arancio già presente fra i bagliori, così il sito ha un solo
     colore invece di due. Si usa SOLO sui bottoni primari. */
  /* 18/10/2026 — D59 VETRO Pro: bottone primario bianco pieno,
     bagliori Blu profondo, Inter al posto di Jakarta + JetBrains Mono. */
  --cz-accent:       #F5F5F7;
  --cz-accent-hover: #FFFFFF;
  --cz-on-accent:    #000000;

  --cz-glow-1:   #2F6BFF;
  --cz-glow-2:   #16B8E8;
  --cz-glow-3:   #1E2A78;

  --cz-font: "Inter", -apple-system, "Segoe UI Variable Display", system-ui, sans-serif;
  --cz-mono: "Inter", -apple-system, system-ui, sans-serif;

  --cz-t-h1:   clamp(44px, 8vw, 96px);
  --cz-t-h2:   clamp(30px, 4.4vw, 52px);
  --cz-t-h3:   21px;
  --cz-t-body: 19px;
  --cz-t-num:  clamp(36px, 4vw, 52px);
  --cz-t-meta: 13px;

  --cz-1:4px;  --cz-2:8px;  --cz-3:12px; --cz-4:18px; --cz-5:26px;
  --cz-6:36px; --cz-7:52px; --cz-8:72px; --cz-9:104px;
  --cz-section: clamp(80px, 9vw, 150px);
  --cz-measure: 640px;
  --cz-grid:   1120px;

  --cz-r:      22px;
  --cz-r-pill: 100px;

  --cz-dur-fast: 160ms;
  --cz-dur-med:  300ms;
  --cz-ease: cubic-bezier(.2,0,0,1);
}

@media (prefers-reduced-motion: reduce){
  :root{ --cz-dur-fast:0ms; --cz-dur-med:0ms; }
}

/* ==========================================================
   FONDO NOTTE — solo sulle pagine già convertite a VETRO.

   Il CSS del kit Elementor scrive body.elementor-kit-NNN con il
   vecchio grigio #252931: specificità più alta di body, quindi
   vinceva lui. Il selettore :has() aggancia SOLO le pagine che
   contengono le nostre sezioni, così la home attualmente online
   resta intatta.
   Al lancio questa regola sparisce: il fondo passa nel kit.
   ========================================================== */

body:has(#cz-hero),
body:has(#cz-bk-head),
body:has(#cz-sv-head){
  background: var(--cz-bg) !important;
  color: var(--cz-ink);
  font-family: var(--cz-font);
  font-size: var(--cz-t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Il kit impone Poppins a h1-h6 (.elementor-kit-26 h1): sulle pagine
   Vetro i titoli devono usare Plus Jakarta Sans (D43).
   Come sopra: sparisce al lancio, quando il kit viene convertito. */
body:has(#cz-hero) :is(h1,h2,h3,h4,h5,h6),
body:has(#cz-bk-head) :is(h1,h2,h3,h4,h5,h6),
body:has(#cz-sv-head) :is(h1,h2,h3,h4,h5,h6){
  font-family: var(--cz-font);
}

/* ==========================================================
   I DUE MIXIN CHE REGGONO LA DIREZIONE
   ========================================================== */

/* Vetro vero. SOLO barra di navigazione e barra CTA mobile.
   Il fondo scuro semitrasparente è anche la velatura che tiene
   il contrasto del testo sopra un bagliore acceso. */
.cz-glass{
  background: var(--cz-glass);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--cz-gline);
}

/* Finto vetro. Tutto il resto: sopra il nero è indistinguibile
   dal vetro vero e costa un decimo in disegno. */
.cz-pane{
  background: var(--cz-solid);
  border: 1px solid var(--cz-gline);
  border-radius: var(--cz-r);
}

/* Il bagliore. UN solo layer, nessun filter:blur() a runtime.
   28/09: aggiunte due strisce di luce diagonali — un gradiente
   lineare in più sullo stesso strato, costo di disegno zero. */
.cz-aurora{
  position: absolute;
  top: 0; left: -10%; right: -10%;
  height: 1100px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(104deg, transparent 38%, rgba(255,255,255,.055) 42%, transparent 46%),
    linear-gradient(104deg, transparent 54%, rgba(255,255,255,.035) 57%, transparent 60%),
    radial-gradient(38% 42% at 18% 12%, rgba(47,107,255,.42), transparent 70%),
    radial-gradient(34% 38% at 82% 26%, rgba(22,184,232,.32), transparent 72%),
    radial-gradient(40% 40% at 52% 62%, rgba(30,42,120,.45), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  will-change: transform;
}

/* L'animazione di sfondo è un lusso da desktop: su mobile lo
   sfondo è fermo, nessuno se ne accorge e il telefono respira. */
@media (min-width:1024px) and (prefers-reduced-motion: no-preference){
  .cz-aurora{ animation: cz-drift 26s ease-in-out infinite alternate; }
}
@keyframes cz-drift{ to{ transform: translate3d(26px,-22px,0) scale(1.06); } }

/* ==========================================================
   TIPOGRAFIA
   ========================================================== */

.cz-h1{ font-size:var(--cz-t-h1); font-weight:700; letter-spacing:-.035em; line-height:1.02; }
.cz-h2{ font-size:var(--cz-t-h2); font-weight:700; letter-spacing:-.03em;  line-height:1.08; }
.cz-h3{ font-size:var(--cz-t-h3); font-weight:600; letter-spacing:-.01em;  line-height:1.3; }
.cz-lead{ font-size:21px; line-height:1.55; color:var(--cz-ink-2); }

/* Il monospazio SOLO su numeri misurati e metadati: è ciò che
   li fa leggere come misure invece che come slogan. */
.cz-meta{
  font-family: var(--cz-mono);
  font-size: var(--cz-t-meta);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cz-ink-2);
}
.cz-num{
  font-family: var(--cz-mono);
  font-size: var(--cz-t-num);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* La pillola sopra il titolo. Contiene sempre qualcosa di VERO:
   disponibilità, una misura, una data. Mai un annuncio finto. */
.cz-badge,
#cz-hero-badge .elementor-heading-title,
#cz-hero-badge > div{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: var(--cz-r-pill);
  background: var(--cz-solid);
  border: 1px solid var(--cz-gline);
  font-family: var(--cz-mono);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cz-ink-2);
}
.cz-badge::before,
#cz-hero-badge .elementor-heading-title::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cz-accent); flex: 0 0 auto;
}

/* La pillola sta al centro dell'hero e sopra il bagliore */
#cz-hero-badge{ position: relative; z-index: 1; text-align: center; }

/* ==========================================================
   PAGINE SERVIZIO — stile condiviso.

   Sta nel tema e non nel CSS di pagina perché le sei pagine
   servizio usano gli stessi identificativi: si scrive una volta
   e vale per tutte. Aggiungerne una settima non costa CSS.
   ========================================================== */

#cz-sv-head, #cz-sv-live, #cz-sv-what, #cz-sv-how, #cz-sv-faq, #cz-sv-end{
  max-width: var(--cz-grid);
  margin-inline: auto;
  padding: 0 24px var(--cz-section);
}
#cz-sv-head{ padding-top: clamp(60px, 8vw, 110px); padding-bottom: var(--cz-7); }
/* build-page ha salvato l'intestazione con align-items:center: occhiello
   e paragrafo finivano al centro, il titolo a sinistra. Tutto a sinistra,
   come la pagina velocità costruita a mano. */
#cz-sv-head, #cz-sv-head > .e-con-inner{ align-items: flex-start !important; }

#cz-sv-kick{
  font-family: var(--cz-mono); font-size: var(--cz-t-meta);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--cz-ink-2); margin: 0 0 var(--cz-4);
}
#cz-sv-h1{
  font-size: var(--cz-t-h1); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.02; color: var(--cz-ink); margin: 0; max-width: 18ch;
  text-wrap: balance;
}
/* Le pagine fatte con build-page usano il widget heading CLASSICO:
   l'id #cz-sv-* sta sul contenitore, non sull'<h1>/<h2>, e il titolo
   prenderebbe le misure del kit Danish (4.8rem / 3.8rem).
   Qui il titolo eredita tutto dal contenitore che porta l'id. */
.elementor [id^="cz-sv-"] > .elementor-heading-title,
.elementor [id^="cz-sv-"] > .elementor-widget-container > .elementor-heading-title{
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-wrap: inherit;
  margin: 0;
}

#cz-sv-lead{
  font-size: 21px; line-height: 1.55; color: var(--cz-ink-2);
  max-width: var(--cz-measure); margin: var(--cz-5) 0 0;
}

#cz-sv-what-h, #cz-sv-how-h, #cz-sv-faq-h, #cz-sv-end-h, #cz-sv-live-h{
  font-size: var(--cz-t-h2); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.08; color: var(--cz-ink); margin: 0 0 var(--cz-7); max-width: 20ch;
}
#cz-sv-end-p, #cz-sv-live-p{
  font-size: 21px; line-height: 1.55; color: var(--cz-ink-2);
  max-width: var(--cz-measure); margin: calc(-1 * var(--cz-5)) 0 var(--cz-6);
}

/* Elenco a pannelli: le cause, i vantaggi, cosa comprende */
#cz-sv-what .elementor-icon-list-items{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--cz-4); margin: 0;
}
@media (max-width: 760px){ #cz-sv-what .elementor-icon-list-items{ grid-template-columns: 1fr; } }
#cz-sv-what .elementor-icon-list-item{
  background: var(--cz-solid); border: 1px solid var(--cz-gline);
  border-radius: var(--cz-r); padding: var(--cz-5);
  font-size: 17px; line-height: 1.5; color: var(--cz-ink-2);
}
#cz-sv-what .elementor-icon-list-item strong{
  display: block; margin-bottom: 6px; color: var(--cz-ink); font-weight: 600;
}

/* Elenco a passaggi numerati */
#cz-sv-how .elementor-icon-list-items{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--cz-5); margin: 0;
}
@media (max-width: 760px){ #cz-sv-how .elementor-icon-list-items{ grid-template-columns: 1fr; } }
#cz-sv-how .elementor-icon-list-item{
  border-top: 1px solid var(--cz-gline); padding-top: var(--cz-4);
  font-size: 17px; line-height: 1.5; color: var(--cz-ink-2);
}
#cz-sv-how .cz-step-n{
  display: block; margin-bottom: var(--cz-3);
  font-family: var(--cz-mono); font-size: var(--cz-t-meta);
  letter-spacing: .04em; color: var(--cz-ink-min);
}
#cz-sv-how .elementor-icon-list-item strong{
  display: block; margin-bottom: 6px; color: var(--cz-ink);
  font-weight: 600; font-size: 21px; letter-spacing: -.01em;
}

/* FAQ */
#cz-sv-faq .elementor-accordion-item{
  border: 0 !important; border-bottom: 1px solid var(--cz-gline) !important;
}
#cz-sv-faq .elementor-tab-title{
  padding: var(--cz-5) 0 !important; font-size: 21px; font-weight: 600;
  letter-spacing: -.01em; color: var(--cz-ink) !important; background: transparent !important;
}
#cz-sv-faq .elementor-tab-content{
  padding: 0 0 var(--cz-5) !important; background: transparent !important;
  font-size: 17px; line-height: 1.6; color: var(--cz-ink-2) !important;
  max-width: var(--cz-measure);
}
#cz-sv-faq .elementor-accordion-icon{ color: var(--cz-ink-2); }

/* CTA di chiusura */
#cz-sv-cta a, a#cz-sv-cta, #cz-sv-cta .elementor-button{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 15px 30px; border-radius: var(--cz-r-pill);
  background: var(--cz-accent); color: var(--cz-on-accent);
  border: 1px solid var(--cz-accent);
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background var(--cz-dur-fast) var(--cz-ease), transform var(--cz-dur-fast) var(--cz-ease);
}
#cz-sv-cta a:hover, a#cz-sv-cta:hover, #cz-sv-cta .elementor-button:hover{
  background: var(--cz-accent-hover); transform: translateY(-2px);
}

/* ==========================================================
   HEADER — barra di vetro flottante.
   È UNO dei due soli backdrop-filter consentiti per schermata
   (l'altro è la barra CTA mobile).
   ========================================================== */

#cz-nav{
  position: sticky; top: 14px; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 40px); max-width: 940px;
  margin: 14px auto 0;
  padding: 13px 14px 13px 22px;
  border-radius: var(--cz-r-pill);
  background: var(--cz-glass);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--cz-gline);
}

#cz-nav-logo a, #cz-nav-logo{
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--cz-ink); text-decoration: none; margin: 0;
}

#cz-nav-menu{ margin-left: auto; }
#cz-nav-menu .elementor-icon-list-items{ display: flex; gap: 22px; margin: 0; }
#cz-nav-menu .elementor-icon-list-item a{
  color: var(--cz-ink-2); text-decoration: none; font-size: 14px;
  transition: color var(--cz-dur-fast) var(--cz-ease);
}
#cz-nav-menu .elementor-icon-list-item a:hover{ color: var(--cz-ink); }

#cz-nav-cta a, a#cz-nav-cta{
  display: inline-flex; align-items: center;
  background: var(--cz-accent); color: var(--cz-on-accent);
  padding: 10px 20px; border-radius: var(--cz-r-pill);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background var(--cz-dur-fast) var(--cz-ease);
}
#cz-nav-cta a:hover, a#cz-nav-cta:hover{ background: var(--cz-accent-hover); }

/* Sotto gli 860px il menu sparisce e la CTA va a destra:
   su mobile la navigazione vera è il selettore di intento. */
@media (max-width: 860px){
  #cz-nav-menu{ display: none; }
  #cz-nav-cta{ margin-left: auto; }
}

/* ==========================================================
   FOOTER
   ========================================================== */

#cz-foot{
  max-width: var(--cz-grid);
  margin-inline: auto;
  padding: var(--cz-9) 24px var(--cz-8);
  border-top: 1px solid var(--cz-gline);
}

#cz-foot-cols{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--cz-7);
}
@media (max-width: 760px){ #cz-foot-cols{ grid-template-columns: 1fr; gap: var(--cz-6); } }

#cz-foot-nome{ font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--cz-ink); margin: 0; }
#cz-foot-ruolo{
  margin: 8px 0 0;
  font-family: var(--cz-mono); font-size: var(--cz-t-meta);
  letter-spacing: .04em; text-transform: uppercase; color: var(--cz-ink-2);
}

#cz-foot-servizi .elementor-icon-list-items,
#cz-foot-contatti .elementor-icon-list-items{
  display: flex; flex-direction: column; gap: 10px; margin: 0;
}
#cz-foot-servizi a, #cz-foot-contatti a{
  color: var(--cz-ink-2); text-decoration: none; font-size: 15px;
  transition: color var(--cz-dur-fast) var(--cz-ease);
}
#cz-foot-servizi a:hover, #cz-foot-contatti a:hover{ color: var(--cz-ink); }

#cz-foot-legale{
  margin: 0; padding-top: var(--cz-5);
  border-top: 1px solid var(--cz-gline);
  font-family: var(--cz-mono); font-size: 12px;
  color: var(--cz-ink-min);
}

/* ==========================================================
   CARD LAVORO — con lo screenshot dentro.
   Su fondo notte l'immagine è la SOLA fonte di colore della
   pagina: va a piena saturazione, la cornice resta neutra.
   ========================================================== */

/* Base condivisa da home (545) e /lavori/ (751): stessi id, stesso
   aspetto. Prima viveva solo nel CSS di pagina della home. */
#cz-work{
  max-width: var(--cz-grid, 1120px);
  margin-inline: auto;
  padding: 0 24px var(--cz-section, clamp(80px,9vw,150px));
}
#cz-work-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px){ #cz-work-grid{ grid-template-columns: 1fr !important; } }

#cz-w1, #cz-w2, #cz-w3, #cz-w4{
  background: var(--cz-solid, rgba(255,255,255,.055));
  border: 1px solid var(--cz-gline, rgba(255,255,255,.14));
  border-radius: var(--cz-r, 22px);
  display: flex; flex-direction: column;
  transition: transform 300ms cubic-bezier(.2,0,0,1), border-color 300ms cubic-bezier(.2,0,0,1);
}
#cz-w1:hover, #cz-w2:hover, #cz-w3:hover, #cz-w4:hover{
  transform: translateY(-5px); border-color: rgba(255,255,255,.3);
}
/* first-of-type e non first-child: il primo figlio è l'immagine */
#cz-w1 > p:first-of-type, #cz-w2 > p:first-of-type,
#cz-w3 > p:first-of-type, #cz-w4 > p:first-of-type{
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cz-ink-2, #9B9BA6); margin: 0 0 8px;
}
#cz-w1 > p:last-of-type, #cz-w2 > p:last-of-type,
#cz-w3 > p:last-of-type, #cz-w4 > p:last-of-type{
  font-size: 21px; font-weight: 600; letter-spacing: -.01em;
  color: var(--cz-ink, #FBFBFD); margin: 0;
}

#cz-w1, #cz-w2, #cz-w3, #cz-w4{
  padding: 0 !important;
  overflow: hidden;
  min-height: 0 !important;
  justify-content: flex-start !important;
}

#cz-w1 img, #cz-w2 img, #cz-w3 img, #cz-w4 img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Sono screenshot di home: se il riquadro è più basso (16/9 nelle
     card larghe) si taglia il fondo, mai il menu del sito in alto. */
  object-position: top center;
  /* Le dimensioni sono dichiarate dall'attributo width/height di
     WordPress: l'immagine non fa saltare il layout (zero CLS). */
  transition: transform 600ms cubic-bezier(.2,0,0,1);
}
#cz-w1:hover img, #cz-w2:hover img,
#cz-w3:hover img, #cz-w4:hover img{ transform: scale(1.04); }

/* Il testo torna dentro, sotto l'immagine */
#cz-w1 > p, #cz-w2 > p, #cz-w3 > p, #cz-w4 > p{
  padding-inline: 26px;
}
#cz-w1 > p:first-of-type, #cz-w2 > p:first-of-type,
#cz-w3 > p:first-of-type, #cz-w4 > p:first-of-type{ padding-top: 22px; }
#cz-w1 > p:last-of-type, #cz-w2 > p:last-of-type,
#cz-w3 > p:last-of-type, #cz-w4 > p:last-of-type{ padding-bottom: 26px; }

/* Griglia asimmetrica: la prima card è larga il doppio.
   La variazione di formato È la gerarchia — quattro riquadri
   identici si leggono come un catalogo, non come una selezione. */
@media (min-width: 900px){
  #cz-work-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  #cz-w1{ grid-column: span 2; }
  #cz-w1 img{ aspect-ratio: 16 / 9; }
  #cz-w4{ grid-column: span 2; }
  #cz-w4 img{ aspect-ratio: 16 / 9; }
}

/* ==========================================================
   BOTTONI
   ========================================================== */

.cz-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:15px 30px;
  border-radius: var(--cz-r-pill);
  font-size:16px; font-weight:600;
  text-decoration:none;
  transition: transform var(--cz-dur-fast) var(--cz-ease),
              background var(--cz-dur-fast) var(--cz-ease),
              border-color var(--cz-dur-fast) var(--cz-ease);
}
.cz-btn--1{ background:var(--cz-accent); color:var(--cz-on-accent); border:1px solid var(--cz-accent); }
.cz-btn--1:hover{ background:var(--cz-accent-hover); border-color:var(--cz-accent-hover); transform:translateY(-2px); }
.cz-btn--2{ background:var(--cz-solid); color:var(--cz-ink); border:1px solid var(--cz-gline); }
.cz-btn--2:hover{ border-color:rgba(255,255,255,.34); transform:translateY(-2px); }

/* ==========================================================
   VETRO PRO SULLE PAGINE ESISTENTI — 18/10/2026 (D58, D59)
   Allinea le pagine #cz-sv-* (servizi, costi, agenzie, chi sono,
   lavori), #cz-bk-* (prenota) e le card #cz-w* alla home
   VETRO Pro (vetro-pro.css). Solo aspetto: testi invariati.
   ========================================================== */

:root{
  --cz-solid: rgba(255,255,255,.045);
  --cz-gline: rgba(255,255,255,.11);
  --cz-r:     24px;
  --cz-t-h2:  clamp(34px, 4.6vw, 56px);
  --cz-tint:  #7FB2FF;
}

/* Bagliore Blu profondo dietro l'apertura: gradienti statici sul fondo
   della pagina, nessun elemento in più e nessun filtro a runtime. */
body:has(#cz-sv-head), body:has(#cz-bk-head){
  background:
    radial-gradient(38% 520px at 22% 120px, rgba(47,107,255,.30), transparent 70%),
    radial-gradient(30% 420px at 78% 60px, rgba(22,184,232,.20), transparent 70%),
    radial-gradient(45% 600px at 50% 380px, rgba(30,42,120,.35), transparent 72%),
    var(--cz-bg) !important;
  background-repeat: no-repeat !important;
}

/* Occhiello: blu, frase normale (era monospazio maiuscolo) */
#cz-sv-kick, #cz-sv-kick .elementor-heading-title{
  font-family: var(--cz-font) !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--cz-tint) !important;
}
.cz-meta, .cz-badge, #cz-hero-badge .elementor-heading-title{
  font-family: var(--cz-font) !important; text-transform: none !important; letter-spacing: 0 !important;
}

/* Titoli di sezione a sinistra, come nella home (build-page li aveva centrati) */
#cz-sv-what, #cz-sv-how, #cz-sv-faq, #cz-sv-live,
#cz-sv-what > .e-con-inner, #cz-sv-how > .e-con-inner,
#cz-sv-faq > .e-con-inner, #cz-sv-live > .e-con-inner{ align-items: stretch !important; }
#cz-sv-what-h, #cz-sv-how-h, #cz-sv-faq-h, #cz-sv-live-h,
#cz-sv-what-h .elementor-heading-title, #cz-sv-how-h .elementor-heading-title,
#cz-sv-faq-h .elementor-heading-title, #cz-sv-live-h .elementor-heading-title{
  text-align: left !important; margin-left: 0 !important; align-self: flex-start;
  letter-spacing: -.035em !important;
}
#cz-sv-h1, #cz-sv-h1 .elementor-heading-title{ letter-spacing: -.045em !important; }

/* "Cosa ottieni": riquadri come il bento della home, tre per riga */
@media (min-width: 1000px){
  #cz-sv-what .elementor-icon-list-items{ grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
}
#cz-sv-what .elementor-icon-list-item{
  padding: 28px !important; border-radius: var(--cz-r) !important;
  transition: border-color 300ms var(--cz-ease), transform 300ms var(--cz-ease);
}
#cz-sv-what .elementor-icon-list-item:hover{ border-color: rgba(255,255,255,.2) !important; transform: translateY(-4px); }
#cz-sv-what .elementor-icon-list-item strong{
  font-size: 19px !important; letter-spacing: -.015em; margin-bottom: 8px !important; line-height: 1.3;
}
#cz-sv-what .elementor-icon-list-icon{ display: none !important; }

/* Passi del metodo: etichetta blu, linea più decisa */
#cz-sv-how .elementor-icon-list-item{ border-top: 2px solid rgba(255,255,255,.2) !important; padding-top: 22px !important; }
#cz-sv-how .cz-step-n{
  font-family: var(--cz-font) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; color: var(--cz-tint) !important;
}
#cz-sv-how .elementor-icon-list-icon{ display: none !important; }

/* FAQ: domande e risposte nel tono della home */
#cz-sv-faq .elementor-tab-title{ font-size: 19px !important; letter-spacing: -.01em; }
#cz-sv-faq .elementor-tab-title a, #cz-sv-faq .elementor-accordion-title{ font-family: var(--cz-font) !important; }

/* Card lavoro: lo screenshot dentro una finestra tipo Mac */
#cz-w1, #cz-w2, #cz-w3, #cz-w4{ position: relative; padding-top: 34px !important; border-radius: var(--cz-r) !important; }
#cz-w1::after, #cz-w2::after, #cz-w3::after, #cz-w4::after{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 34px; z-index: 1; pointer-events: none;
  border-bottom: 1px solid var(--cz-gline);
  background:
    radial-gradient(circle 5.5px at 20px 17px, #FF5F57 98%, transparent),
    radial-gradient(circle 5.5px at 38px 17px, #FEBC2E 98%, transparent),
    radial-gradient(circle 5.5px at 56px 17px, #28C840 98%, transparent),
    #1A1A20;
}
#cz-w1 > p:first-of-type, #cz-w2 > p:first-of-type,
#cz-w3 > p:first-of-type, #cz-w4 > p:first-of-type{
  font-family: var(--cz-font) !important; font-size: 14px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--cz-ink-2) !important;
}
#cz-w1 > p:last-of-type, #cz-w2 > p:last-of-type,
#cz-w3 > p:last-of-type, #cz-w4 > p:last-of-type{ font-size: 22px !important; letter-spacing: -.02em !important; }

/* Pannelli di misura (velocità) e prenotazione: stesso vetro */
#cz-sv-live .cz-pane, #cz-sv-p1, #cz-sv-p2, #cz-sv-p3, #cz-bk-side{ border-radius: var(--cz-r) !important; }

/* Le impostazioni tipografiche salvate nei widget (JetBrains Mono, maiuscolo)
   vincono su tutto il resto: qui si riallineano a Inter in un colpo solo.
   Le icone (i, eicon, fa-) restano escluse, altrimenti perdono il glifo. */
body:has(#cz-sv-head) .elementor *:not(i):not(svg):not(path):not([class*="eicon"]):not([class*="fa-"]),
body:has(#cz-bk-head) .elementor *:not(i):not(svg):not(path):not([class*="eicon"]):not([class*="fa-"]){
  font-family: var(--cz-font) !important;
}
body:has(#cz-sv-head) .elementor :is(.elementor-heading-title, p, span, small, label),
body:has(#cz-bk-head) .elementor :is(.elementor-heading-title, p, span, small, label){
  text-transform: none !important;
}

/* ---------- MODULO DI PRENOTAZIONE (/prenota/) ---------- */
body:has(#cz-bk-head) .elementor-field-group .elementor-field-textual,
body:has(#cz-bk-head) .elementor-select-wrapper select{
  background-color: rgba(255,255,255,.045) !important;
  color: var(--cz-ink) !important;
  border: 1px solid var(--cz-gline) !important;
  border-radius: 12px !important;
  min-height: 50px;
}
body:has(#cz-bk-head) .elementor-field-group .elementor-field-textual:focus,
body:has(#cz-bk-head) .elementor-select-wrapper select:focus{
  border-color: rgba(127,178,255,.8) !important; outline: none;
  box-shadow: 0 0 0 3px rgba(47,107,255,.25);
}
body:has(#cz-bk-head) .elementor-select-wrapper::before,
body:has(#cz-bk-head) .elementor-select-wrapper .select-caret-down-wrapper{ color: var(--cz-ink-2) !important; }
body:has(#cz-bk-head) .elementor-select-wrapper select option{ background: #0B0B10; color: #F5F5F7; }
body:has(#cz-bk-head) .elementor-field-group ::placeholder{ color: var(--cz-ink-min) !important; }

/* Budget: le opzioni diventano pillole su una riga */
body:has(#cz-bk-head) .elementor-field-type-radio .elementor-field-subgroup{
  display: flex !important; flex-wrap: wrap; gap: 10px; width: 100%;
}
body:has(#cz-bk-head) .elementor-field-type-radio .elementor-field-option{
  position: relative; display: inline-flex !important; align-items: center; gap: 10px;
  margin: 0 !important; padding: 11px 18px 11px 14px; border: 1px solid var(--cz-gline);
  border-radius: 100px; background: rgba(255,255,255,.045); cursor: pointer;
  transition: border-color 160ms var(--cz-ease), background 160ms var(--cz-ease);
}
body:has(#cz-bk-head) .elementor-field-type-radio .elementor-field-option:hover{ border-color: rgba(255,255,255,.3); }
body:has(#cz-bk-head) .elementor-field-type-radio .elementor-field-option:has(input:checked){
  border-color: var(--cz-tint); background: rgba(47,107,255,.16);
}
body:has(#cz-bk-head) .elementor-field-type-radio .elementor-field-option input{
  margin: 0 !important; accent-color: #2F6BFF; width: 16px; height: 16px; flex: none;
}
body:has(#cz-bk-head) .elementor-field-type-radio .elementor-field-option label{
  display: inline !important; margin: 0 !important; font-size: 15px; color: var(--cz-ink); cursor: pointer;
}

/* Consenso privacy: casella e testo sulla stessa riga, testo che scorre normale */
body:has(#cz-bk-head) .elementor-field-type-acceptance .elementor-field-subgroup,
body:has(#cz-bk-head) .elementor-field-type-acceptance .elementor-field-option{
  display: flex !important; align-items: flex-start; gap: 10px; width: 100%;
}
body:has(#cz-bk-head) .elementor-field-type-acceptance input{
  margin: 3px 0 0 !important; accent-color: #2F6BFF; width: 18px; height: 18px; flex: none;
}
body:has(#cz-bk-head) .elementor-field-type-acceptance label{
  display: block !important; flex: 1; margin: 0 !important;
  font-size: 14px !important; line-height: 1.5; color: var(--cz-ink-2) !important;
}
body:has(#cz-bk-head) .elementor-field-type-acceptance label a{ color: var(--cz-tint) !important; display: inline !important; }

/* Footer: niente maiuscoletto monospazio */
#cz-foot-ruolo, #cz-foot-legale{
  font-family: var(--cz-font) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 14px !important;
}

/* ==========================================================
   BANNER COOKIE (Complianz) — VETRO Pro, 18/10/2026
   Solo aspetto: testi e impostazioni legali restano nel plugin.
   "Accetta" e "Nega" hanno la stessa misura e la stessa
   evidenza: rifiutare deve essere facile quanto accettare
   (linee guida del Garante privacy sui cookie).
   ========================================================== */

.cmplz-cookiebanner.cmplz-cookiebanner{
  --cmplz_banner_background_color: rgba(14,14,20,.94);
  --cmplz_banner_border_color: rgba(255,255,255,.14);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 22px 22px 22px 22px;
  --cmplz_banner_width: 420px;
  --cmplz_banner_margin: 16px;
  --cmplz_text_color: #C9C9D1;
  --cmplz_text_font_size: 13px;
  --cmplz_title_font_size: 15px;
  --cmplz_link_font_size: 13px;
  --cmplz_hyperlink_color: #7FB2FF;
  --cmplz_button_font_size: 14px;
  --cmplz_button_border_radius: 100px 100px 100px 100px;
  --cmplz_button_accept_background_color: #F5F5F7;
  --cmplz_button_accept_border_color: #F5F5F7;
  --cmplz_button_accept_text_color: #000000;
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: rgba(245,245,247,.85);
  --cmplz_button_deny_text_color: #F5F5F7;
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: transparent;
  --cmplz_button_settings_text_color: #A1A1AA;
  --cmplz_slider_active_color: #2F6BFF;
  --cmplz_slider_inactive_color: #3A3A42;
  --cmplz_category_header_always_active_color: #7FB2FF;
  font-family: "Inter", -apple-system, system-ui, sans-serif !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  padding: 20px 22px !important;
}
.cmplz-cookiebanner .cmplz-logo{ display: none !important; }
.cmplz-cookiebanner .cmplz-title{ color: #F5F5F7 !important; font-weight: 600 !important; }
.cmplz-cookiebanner .cmplz-close{ color: #A1A1AA !important; }
.cmplz-cookiebanner .cmplz-close:hover{ color: #F5F5F7 !important; }
.cmplz-cookiebanner .cmplz-divider{ border-color: rgba(255,255,255,.11) !important; }
.cmplz-cookiebanner .cmplz-category{ background: rgba(255,255,255,.05) !important; border-radius: 14px !important; }
.cmplz-cookiebanner .cmplz-category-title,
.cmplz-cookiebanner .cmplz-description{ color: #C9C9D1 !important; }

/* Accetta e Nega affiancati, stessa misura; le preferenze come link */
.cmplz-cookiebanner .cmplz-buttons{
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  width: 100% !important; min-height: 44px; margin: 0 !important;
  font-family: inherit !important; font-weight: 600 !important;
  border-width: 1px !important; border-style: solid !important;
  transition: transform 160ms cubic-bezier(.2,0,0,1), background 160ms;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover{ transform: translateY(-1px); }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover{ background: rgba(255,255,255,.08) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options{
  grid-column: 1 / -1; min-height: 36px !important; font-weight: 500 !important;
  text-decoration: underline; text-underline-offset: 3px;
}
.cmplz-cookiebanner .cmplz-btn:focus-visible{ outline: 2px solid #F5F5F7; outline-offset: 2px; }

/* Telefono: barra compatta in basso, non mezzo schermo */
@media (max-width: 768px){
  .cmplz-cookiebanner.cmplz-cookiebanner{
    --cmplz_text_font_size: 12.5px;
    left: 10px !important; right: 10px !important; bottom: 10px !important;
    width: auto !important; max-width: none !important;
    padding: 14px 16px !important; border-radius: 18px !important;
  }
  .cmplz-cookiebanner .cmplz-header{ margin-bottom: 4px !important; }
  /* Testo informativo e link alla privacy restano interi: si risparmia
     spazio su margini e corpo, mai sull'informativa. */
  .cmplz-cookiebanner .cmplz-message{ line-height: 1.45 !important; margin-bottom: 8px !important; }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{ min-height: 42px; }
  .cmplz-cookiebanner .cmplz-documents{ margin-top: 4px !important; }
}

/* ==========================================================
   ACCESSIBILITÀ
   Il focus non si toglie mai: l'accessibilità è un servizio a
   listino e questo sito è il primo campione.
   ========================================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--cz-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================
   MOVIMENTO
   Solo transform e opacity: mai width, height, top o left.

   ⚠️ LEZIONE 28/09 — la comparsa allo scroll è nascosta SOLO se
   il JavaScript è vivo. Senza la classe .cz-js il contenuto è
   visibile e basta. Sulla reference guardata quel giorno una
   sezione intera restava bianca perché l'animazione non era
   partita: un effetto non deve mai poter cancellare il contenuto.
   ========================================================== */

.cz-js .cz-rv{
  opacity:0;
  transform:translateY(14px);
  transition: opacity .7s var(--cz-ease), transform .7s var(--cz-ease);
}
.cz-js .cz-rv.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .cz-js .cz-rv{ opacity:1; transform:none; transition:none; }
  .cz-aurora{ animation:none; }
}