/* ==========================================================
   claudiozollo.it — VETRO PRO (D58, D59: Blu profondo + Inter)
   docs/10-design-system.md §0 · mockup: mockup-brand/d-vetro-pro.html

   Tutte le regole stanno sotto il prefisso .vp (classe sulle sezioni
   della pagina) o body:has(#vp-hero): le 12 pagine VETRO esistenti
   non vengono toccate da questo file.
   ========================================================== */

:root{
  --vp-bg:#050507; --vp-bg-2:#0B0B10;
  --vp-pane:rgba(255,255,255,.045); --vp-pane-2:rgba(255,255,255,.07);
  --vp-line:rgba(255,255,255,.11); --vp-line-2:rgba(255,255,255,.2);
  --vp-ink:#F5F5F7; --vp-ink-2:#A1A1AA; --vp-ink-3:#8A8A94;
  --vp-g1:#2F6BFF; --vp-g2:#16B8E8; --vp-g3:#1E2A78; --vp-tint:#7FB2FF;
  --vp-font:"Inter",-apple-system,"Segoe UI Variable Display",system-ui,sans-serif;
  --vp-r:24px; --vp-grid:1180px; --vp-ease:cubic-bezier(.2,.8,.2,1);
}

/* Fondo e carattere della pagina (il kit scrive ancora il vecchio grigio) */
body:has(#vp-hero){
  background:var(--vp-bg) !important; color:var(--vp-ink);
  font-family:var(--vp-font); font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body:has(#vp-hero) :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input){ font-family:var(--vp-font); }
/* Il bagliore è più largo della sezione: va tagliato in orizzontale, mai fatto scorrere */
html:has(#vp-hero){ overflow-x:clip; }
.elementor .e-con.vp.vp-hero, .elementor .e-con.vp.vp-test-sec{ overflow-x:clip !important; overflow-y:visible; }

/* ---------- impaginazione ---------- */
.elementor .e-con.vp{
  --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
  width:min(var(--vp-grid), 100% - 40px) !important; max-width:none !important;
  margin:0 auto !important; padding:clamp(90px,10vw,150px) 0 0 !important;
  gap:0 !important; position:relative;
}
.elementor .e-con.vp .e-con{ --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; }
.vp .elementor-widget{ margin-bottom:0 !important; }
.vp .elementor-widget-text-editor p{ margin:0 0 .8em; }
.vp .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* ---------- tipografia ---------- */
.vp .elementor-heading-title{ font-family:var(--vp-font) !important; color:var(--vp-ink); margin:0; }
.vp .vp-kicker .elementor-heading-title{ font-size:15px; font-weight:600; color:var(--vp-tint); letter-spacing:0; line-height:1.4; margin-bottom:14px; text-transform:none; }
.vp .vp-h2 .elementor-heading-title{ font-size:clamp(34px,4.6vw,56px); line-height:1.05; letter-spacing:-.035em; font-weight:700; max-width:20ch; }
.vp .vp-lede{ font-size:clamp(18px,1.6vw,21px); color:var(--vp-ink-2); max-width:58ch; margin-top:18px !important; line-height:1.55; }
.vp .elementor-widget-text-editor{ color:var(--vp-ink-2); font-family:var(--vp-font); }

/* ---------- bottoni ---------- */
.vp .vp-btn-1 .elementor-button, .vp .vp-btn-2 .elementor-button{
  display:inline-flex; align-items:center; height:52px; padding:0 26px !important;
  border-radius:100px !important; font:600 16px/1 var(--vp-font) !important;
  transition:transform .2s var(--vp-ease), background .2s, border-color .2s;
}
.vp .vp-btn-1 .elementor-button{ background:var(--vp-ink) !important; color:#000 !important; border:0 !important; }
.vp .vp-btn-1 .elementor-button:hover{ background:#fff !important; transform:translateY(-2px); }
.vp .vp-btn-2 .elementor-button{ background:var(--vp-pane-2) !important; color:var(--vp-ink) !important; border:1px solid var(--vp-line-2) !important; }
.vp .vp-btn-2 .elementor-button:hover{ border-color:rgba(255,255,255,.4) !important; transform:translateY(-2px); }
.vp .elementor-button .elementor-button-text{ color:inherit; }
.vp .vp-ctas{ display:flex !important; flex-direction:row !important; flex-wrap:wrap; gap:12px !important; margin-top:34px; }

/* ---------- bagliore: gradienti statici, nessun filtro a runtime ---------- */
.vp .vp-glow{ position:absolute; left:-10%; right:-10%; top:-120px; height:900px; pointer-events:none; z-index:0; opacity:.55;
  background:
    radial-gradient(38% 42% at 30% 38%, rgba(47,107,255,.55), transparent 70%),
    radial-gradient(30% 36% at 72% 30%, rgba(22,184,232,.45), transparent 70%),
    radial-gradient(40% 40% at 55% 70%, rgba(30,42,120,.6), transparent 70%); }
.vp .elementor-widget-html:has(.vp-glow){ position:absolute !important; inset:0; z-index:0; margin:0 !important; }
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .vp .vp-glow{ animation:vp-drift 22s ease-in-out infinite alternate; } }
@keyframes vp-drift{ to{ transform:translate3d(40px,-30px,0) scale(1.06); } }

/* ---------- hero ---------- */
.elementor .e-con.vp.vp-hero{ padding-top:150px !important; text-align:center; align-items:center !important; overflow:visible; }
.vp.vp-hero > *{ position:relative; z-index:1; }
.vp .vp-h1 .elementor-heading-title{ font-size:clamp(40px,6.6vw,88px); line-height:1.02; letter-spacing:-.045em; font-weight:700; max-width:20ch; margin:0 auto; }
.vp .vp-h1 .elementor-heading-title span{ color:var(--vp-ink-2); }
.vp.vp-hero .vp-lede{ margin:24px auto 0 !important; max-width:60ch; text-align:center; }
.vp.vp-hero .vp-ctas{ justify-content:center; }

/* finestre tipo Mac attorno agli screenshot */
.elementor .e-con.vp-win{ position:relative; display:block !important; padding:34px 0 0 !important; border-radius:16px; overflow:hidden; background:#111; border:1px solid var(--vp-line-2); }
.elementor .e-con.vp-win::after{ content:""; position:absolute; inset:0 0 auto 0; height:34px; border-bottom:1px solid var(--vp-line); z-index:1;
  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; }
.vp .vp-url{ position:absolute !important; top:7px; left:50%; transform:translateX(-50%); z-index:2; width:auto !important; max-width:60%; }
.vp .vp-url .elementor-heading-title{ font-size:12px; font-weight:500; color:var(--vp-ink-3); background:#0F0F14; padding:3px 32px; border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:0; }
.vp .vp-win img{ display:block; width:100% !important; height:auto !important; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:0 !important; max-width:none !important; }
.vp .vp-win .elementor-widget-image{ margin:0 !important; }

.elementor .e-con.vp-stage{ position:relative; display:block !important; width:min(1100px,100%) !important; height:clamp(300px,46vw,560px); margin:80px auto 0 !important; perspective:1600px; }
.elementor .e-con.vp-stage > .vp-win{ position:absolute; box-shadow:0 40px 120px -20px rgba(0,0,0,.8); }
.elementor .e-con.vp-stage > .vp-w-main{ left:16%; right:16%; width:auto !important; top:0; z-index:3; }
.elementor .e-con.vp-stage > .vp-w-l{ left:0; width:38% !important; top:16%; z-index:2; transform:rotateY(18deg) translateZ(-120px); opacity:.75; }
.elementor .e-con.vp-stage > .vp-w-r{ right:0; width:38% !important; top:16%; z-index:2; transform:rotateY(-18deg) translateZ(-120px); opacity:.75; }
.elementor .e-con.vp-stage::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:45%; background:linear-gradient(transparent,var(--vp-bg)); z-index:4; pointer-events:none; }

/* ---------- numeri ---------- */
.elementor .e-con.vp.vp-proof-sec{ padding-top:0 !important; margin-top:-20px !important; z-index:5; }
.elementor .e-con.vp-proof{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:14px !important; }
.elementor .e-con.vp-stat{ background:var(--vp-pane); border:1px solid var(--vp-line); border-radius:var(--vp-r); padding:26px 24px !important; gap:10px !important; }
.vp .vp-num .elementor-heading-title{ font-size:clamp(38px,4vw,54px); font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.vp .vp-stat .elementor-widget-text-editor{ font-size:15px; line-height:1.4; }
.vp .vp-method{ margin-top:14px !important; font-size:13px; color:var(--vp-ink-3); }

/* ---------- lavori ---------- */
.elementor .e-con.vp-works{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:20px !important; margin-top:56px; }
.elementor .e-con.vp-work{ background:var(--vp-pane); border:1px solid var(--vp-line); border-radius:var(--vp-r); padding:18px !important; gap:0 !important; transition:transform .35s var(--vp-ease), border-color .35s; }
.elementor .e-con.vp-work:hover{ transform:translateY(-6px); border-color:var(--vp-line-2); }
.elementor .e-con.vp-work.vp-wide{ grid-column:1/-1; display:grid !important; grid-template-columns:1.5fr 1fr; gap:28px !important; align-items:center; }
.elementor .e-con.vp-meta{ padding:20px 6px 6px !important; gap:4px !important; }
.vp .vp-wide .vp-meta{ padding:0 18px 0 0 !important; gap:8px !important; }
.vp .vp-work-h .elementor-heading-title{ font-size:22px; letter-spacing:-.02em; font-weight:600; line-height:1.25; }
.vp .vp-wide .vp-work-h .elementor-heading-title{ font-size:30px; }
.vp .vp-work-s{ font-size:15px; color:var(--vp-ink-2); }
.vp .vp-go .elementor-heading-title, .vp .vp-go .elementor-heading-title a{ font-size:15px; font-weight:500; color:var(--vp-tint); text-decoration:none; margin-top:6px; }
.vp .vp-go a:hover{ color:var(--vp-ink); }
.vp .vp-more{ margin-top:28px !important; font-size:16px; }
.vp .vp-more strong{ color:var(--vp-ink); font-weight:600; }

/* ---------- servizi: bento ---------- */
.elementor .e-con.vp-bento{ display:grid !important; grid-template-columns:repeat(6,1fr); gap:16px !important; margin-top:56px; }
.elementor .e-con.vp-tile{ position:relative; overflow:hidden; background:var(--vp-pane); border:1px solid var(--vp-line); border-radius:var(--vp-r); padding:30px !important; gap:0 !important; transition:border-color .3s, transform .3s var(--vp-ease); }
.elementor .e-con.vp-tile:hover{ border-color:var(--vp-line-2); transform:translateY(-4px); }
.elementor .e-con.vp-tile.vp-t2{ grid-column:span 2; }
.elementor .e-con.vp-tile.vp-t3{ grid-column:span 3; }
.elementor .e-con.vp-tile.vp-tseo{ grid-column:span 4; grid-row:span 2; padding:40px !important; }
.elementor .e-con.vp-tile.vp-tseo::after{ content:""; position:absolute; right:-20%; top:-30%; width:70%; height:90%; pointer-events:none; background:radial-gradient(closest-side,rgba(47,107,255,.4),transparent); }
.vp .vp-tag .elementor-heading-title{ font-size:13px; font-weight:600; color:var(--vp-tint); margin-bottom:12px; letter-spacing:0; }
.vp .vp-tile-h .elementor-heading-title{ font-size:24px; letter-spacing:-.025em; font-weight:600; line-height:1.15; }
.vp .vp-tseo .vp-tile-h .elementor-heading-title{ font-size:clamp(30px,3vw,40px); max-width:16ch; }
.vp .vp-tile .elementor-widget-text-editor{ font-size:16px; margin-top:10px !important; position:relative; z-index:1; }
.vp .vp-tile ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; font-size:15px; color:var(--vp-ink); }
.vp .vp-tseo ul{ grid-template-columns:1fr 1fr; }
.vp .vp-tile li{ padding-left:22px; position:relative; }
.vp .vp-tile li::before{ content:""; position:absolute; left:0; top:.65em; width:10px; height:2px; background:var(--vp-tint); }
.vp .vp-chart{ margin-top:30px; height:150px; display:flex; align-items:flex-end; gap:10px; position:relative; z-index:1; }
.vp .vp-chart i{ flex:1; border-radius:8px 8px 3px 3px; background:linear-gradient(var(--vp-g1),rgba(47,107,255,.25)); opacity:.85; transform-origin:bottom; transition:transform 1.2s var(--vp-ease); }
.vp-js .vp .vp-chart:not(.in) i{ transform:scaleY(.08); }
.vp .vp-chart-note{ margin-top:10px; font-size:13px; color:var(--vp-ink-3); }

/* ---------- metodo ---------- */
.elementor .e-con.vp-steps{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:16px !important; margin-top:56px; }
.elementor .e-con.vp-step{ border-top:2px solid var(--vp-line-2); padding-top:22px !important; gap:8px !important; }
.vp .vp-step-k .elementor-heading-title{ font-size:14px; color:var(--vp-tint); font-weight:600; letter-spacing:0; }
.vp .vp-step-h .elementor-heading-title{ font-size:21px; font-weight:600; letter-spacing:-.02em; }
.vp .vp-step .elementor-widget-text-editor{ font-size:16px; }

/* ---------- chi sono ---------- */
.elementor .e-con.vp-about{ display:grid !important; grid-template-columns:1.2fr 1fr; gap:56px !important; align-items:start; }
.vp .vp-big{ font-size:clamp(22px,2.2vw,28px) !important; line-height:1.45; letter-spacing:-.015em; font-weight:500; color:var(--vp-ink) !important; }
.vp .vp-big + .elementor-widget-text-editor{ margin-top:20px !important; }
.elementor .e-con.vp-card{ background:var(--vp-pane); border:1px solid var(--vp-line); border-radius:var(--vp-r); padding:30px !important; gap:18px !important; }
.vp .vp-card .elementor-widget-text-editor p{ margin:0 0 18px; }
.vp .vp-card .elementor-widget-text-editor span{ display:block; font-size:14px; color:var(--vp-ink-3); }
.vp .vp-card .elementor-widget-text-editor strong{ display:block; font-size:18px; font-weight:500; color:var(--vp-ink); }
.vp .vp-card .vp-btn-1 .elementor-button{ width:100%; justify-content:center; }

/* ---------- test velocità: vetro vero n.2 ---------- */
.elementor .e-con.vp-panel{ position:relative; z-index:1; border-radius:32px; padding:clamp(32px,5vw,64px) !important; text-align:center; overflow:hidden; align-items:center !important;
  background:rgba(255,255,255,.06); backdrop-filter:blur(26px) saturate(170%); -webkit-backdrop-filter:blur(26px) saturate(170%);
  border:1px solid var(--vp-line-2); box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.25); }
.elementor .e-con.vp.vp-test-sec{ overflow:clip; }
.vp .vp-panel .vp-h2 .elementor-heading-title{ margin:0 auto; }
.vp .vp-panel .vp-lede{ margin:16px auto 0 !important; text-align:center; }
.vp .vp-form{ display:flex; gap:10px; max-width:620px; margin:34px auto 0; flex-wrap:wrap; justify-content:center; }
.vp .vp-form input{ flex:1 1 300px; height:56px; border-radius:100px; padding:0 24px; border:1px solid var(--vp-line-2); background:rgba(0,0,0,.35); color:var(--vp-ink); font:500 17px var(--vp-font); }
.vp .vp-form input::placeholder{ color:var(--vp-ink-3); }
.vp .vp-form button{ height:56px; padding:0 28px; border-radius:100px; border:0; background:var(--vp-ink); color:#000; font:600 16px var(--vp-font); cursor:pointer; transition:transform .2s var(--vp-ease); }
.vp .vp-form button:hover{ transform:translateY(-2px); background:#fff; }
.vp .vp-out{ flex-basis:100%; margin-top:18px; color:var(--vp-ink-2); font-size:17px; min-height:3em; max-width:56ch; margin-inline:auto; }
.vp .vp-out strong{ color:var(--vp-ink); }
.vp .vp-sr{ position:absolute; left:-9999px; }

/* ---------- FAQ ---------- */
.elementor .e-con.vp-faq{ display:grid !important; grid-template-columns:1fr 1.6fr; gap:56px !important; }
.vp .vp-acc .elementor-accordion-item{ border:0 !important; border-bottom:1px solid var(--vp-line) !important; }
.vp .vp-acc .elementor-tab-title{ padding:24px 0 !important; background:transparent !important; font-size:19px; font-weight:600; letter-spacing:-.01em; }
.vp .vp-acc .elementor-tab-title a, .vp .vp-acc .elementor-accordion-title{ color:var(--vp-ink) !important; font-family:var(--vp-font) !important; }
.vp .vp-acc .elementor-tab-content{ padding:0 0 24px !important; border:0 !important; background:transparent !important; color:var(--vp-ink-2) !important; font-size:17px; line-height:1.6; max-width:60ch; }
.vp .vp-acc .elementor-accordion-icon{ color:var(--vp-ink-2) !important; }

/* ---------- chiusura ---------- */
.elementor .e-con.vp.vp-end{ text-align:center; align-items:center !important; padding-bottom:40px !important; }
.vp.vp-end .vp-h2 .elementor-heading-title{ margin:0 auto; }
.vp.vp-end .vp-lede{ margin-inline:auto !important; text-align:center; }
.vp.vp-end .vp-ctas{ justify-content:center; }

/* ---------- comparse: nascoste SOLO se il JS è vivo ---------- */
.vp-js .vp .vp-rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--vp-ease), transform .8s var(--vp-ease); }
.vp-js .vp .vp-rv.in{ opacity:1; transform:none; }
.vp-js .vp.vp-hero .vp-h1, .vp-js .vp.vp-hero .vp-lede, .vp-js .vp.vp-hero .vp-ctas{ animation:vp-up 1s var(--vp-ease) both; }
.vp-js .vp.vp-hero .vp-lede{ animation-delay:.1s; } .vp-js .vp.vp-hero .vp-ctas{ animation-delay:.2s; }
.vp-js .vp .vp-stage > .vp-w-main{ animation:vp-rise 1.2s .25s var(--vp-ease) both; }
@keyframes vp-up{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes vp-rise{ from{ opacity:0; transform:translateY(80px) rotateX(14deg); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .vp *, .vp *::before, .vp *::after{ animation:none !important; transition:none !important; }
  .vp-js .vp .vp-rv{ opacity:1; transform:none; }
  .vp-js .vp .vp-chart:not(.in) i{ transform:none; }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .elementor .e-con.vp.vp-hero{ padding-top:120px !important; }
  .vp .vp-h1 .elementor-heading-title{ font-size:clamp(36px,9vw,56px); }
  .elementor .e-con.vp-stage{ height:clamp(220px,60vw,420px); margin-top:56px !important; }
  .elementor .e-con.vp-stage > .vp-w-l, .elementor .e-con.vp-stage > .vp-w-r{ display:none !important; }
  .elementor .e-con.vp-stage > .vp-w-main{ left:0; right:0; }
  .elementor .e-con.vp-proof{ grid-template-columns:1fr 1fr; }
  .elementor .e-con.vp-works, .elementor .e-con.vp-work.vp-wide{ grid-template-columns:1fr; }
  .vp .vp-wide .vp-meta{ padding:16px 6px 6px !important; }
  .elementor .e-con.vp-bento{ grid-template-columns:1fr; }
  .elementor .e-con.vp-tile.vp-t2, .elementor .e-con.vp-tile.vp-t3, .elementor .e-con.vp-tile.vp-tseo{ grid-column:auto; grid-row:auto; }
  .vp .vp-tseo ul{ grid-template-columns:1fr; }
  .elementor .e-con.vp-steps{ grid-template-columns:1fr 1fr; }
  .elementor .e-con.vp-about, .elementor .e-con.vp-faq{ grid-template-columns:1fr; gap:32px !important; }
}
@media (max-width:520px){
  .elementor .e-con.vp-steps, .elementor .e-con.vp-proof{ grid-template-columns:1fr; }
}