/* Voltino — sistema di marca. Token da brand identity approvata. */
@font-face{font-family:'Nunito';src:url('/fonts/Nunito.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/PublicSans.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --giallo:#FFCE00; --giallo-scuro:#E8B400;
  --blu:#0B2A5B; --blu-chiaro:#93A9C9;
  --gas:#0E9AA7; --gas-testo:#0B7C87;
  --verde:#1F8A4C; --verde-testo:#17703D;
  --corallo:#E8543F; --corallo-testo:#C63A26;
  --crema:#FFFCF2; --sabbia:#F4F0E4; --bordo:#EDE7D6;
  --grigio:#6B6558; --grafite:#4A4636;
  --display:'Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --testo:'Public Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--grafite);font-family:var(--testo);font-size:17px;line-height:1.65;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);color:var(--blu);letter-spacing:-.03em;line-height:1.1;margin:0}
h1{font-weight:900;font-size:clamp(2.1rem,5.2vw,3.75rem);letter-spacing:-.038em;text-wrap:balance}
h2{font-weight:800;font-size:clamp(1.6rem,3.4vw,2.15rem);letter-spacing:-.025em;text-wrap:balance}
h3{font-weight:800;font-size:1.18rem;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
a{color:var(--gas-testo)}
a:hover{color:var(--blu)}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--giallo);color:var(--blu);padding:12px 18px;border-radius:10px;font-weight:700}

/* ---- CTA telefonica: l'azione primaria ---- */
.tel{display:inline-flex;align-items:center;gap:14px;background:var(--giallo);border:3px solid var(--blu);border-radius:999px;padding:14px 30px 14px 22px;box-shadow:0 5px 0 var(--blu);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.tel:hover{background:var(--giallo);transform:translateY(2px);box-shadow:0 3px 0 var(--blu);color:var(--blu)}
.tel:active{transform:translateY(5px);box-shadow:0 0 0 var(--blu)}
.tel svg{flex:0 0 auto;stroke:var(--blu)}
.tel-num{display:block;font-family:var(--display);font-weight:900;font-size:1.75rem;color:var(--blu);letter-spacing:-.025em;line-height:1.05}
.tel-sub{display:block;font-size:.8rem;font-weight:600;color:var(--grafite)}
.tel-sm{padding:9px 20px 9px 16px;gap:10px;box-shadow:0 3px 0 var(--blu)}
.tel-sm .tel-num{font-size:1.05rem}

.btn2{display:inline-flex;align-items:center;gap:10px;border:2.5px solid var(--blu);border-radius:999px;padding:13px 26px;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--blu);text-decoration:none;background:transparent}
.btn2:hover{background:var(--blu);color:#fff}

/* ---- stato apertura ---- */
.stato{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600}
.dot{width:9px;height:9px;border-radius:999px;flex:0 0 auto}
.aperto .dot{background:var(--verde);box-shadow:0 0 0 3px rgba(31,138,76,.18)}
.aperto{color:var(--verde-testo)}
.chiuso .dot{background:#A9A294}
.chiuso{color:var(--grafite)}

/* ---- header ---- */
header{background:var(--crema);border-bottom:1px solid var(--bordo);position:sticky;top:0;z-index:20}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo span{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--blu);letter-spacing:-.03em}
.hright{display:flex;align-items:center;gap:16px}

/* ---- hero ---- */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--bordo);border-radius:999px;padding:8px 15px;font-size:.85rem;color:var(--grafite)}
.hero-sub{font-size:1.16rem;color:var(--grafite);max-width:34em;margin-top:18px}
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
.mascotte{display:block;margin:0 auto;width:min(300px,72vw);height:auto}

/* ---- sezioni ---- */
section{padding:56px 0}
.sabbia{background:var(--sabbia);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.lead{font-size:1.08rem;color:var(--grafite);max-width:44em;margin-top:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
.card{background:#fff;border:2px solid var(--bordo);border-radius:18px;padding:26px 24px}
.card h3{margin-bottom:8px}
.card p{font-size:.98rem;color:var(--grafite)}
.num{font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--giallo-scuro);line-height:1;margin-bottom:12px;-webkit-text-stroke:0}
.stat{font-family:var(--testo);font-weight:700;font-size:2rem;color:var(--blu);font-variant-numeric:tabular-nums;line-height:1.1}
.statlbl{font-size:.85rem;color:var(--grigio)}

.fonte{display:flex;align-items:flex-start;gap:14px;background:#fff;border:2px solid var(--bordo);border-radius:16px;padding:20px 22px;margin-top:28px}
.fonte svg{flex:0 0 auto;stroke:var(--gas-testo)}
.fonte p{font-size:.95rem;color:var(--grafite)}

/* ---- fascia CTA ---- */
.fascia{background:var(--blu);color:#fff;padding:52px 0}
.fascia h2{color:#fff}
.fascia p{color:#C8D6EA;margin-top:14px;max-width:40em}
.fascia .tel{margin-top:26px}

/* ---- footer ---- */
footer{background:var(--crema);border-top:1px solid var(--bordo);padding:44px 0 32px;font-size:.9rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer h4{font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--blu);margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
footer a{color:var(--grafite);text-decoration:none}
footer a:hover{color:var(--blu);text-decoration:underline}
.legale{margin-top:30px;padding-top:20px;border-top:1px solid var(--bordo);color:var(--grigio);font-size:.82rem;line-height:1.6}

/* ---- pagine testo ---- */
.doc{padding:44px 0 64px;max-width:760px}
.doc h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:8px}
.doc h2{font-size:1.3rem;margin:34px 0 10px}
.doc p,.doc li{font-size:1rem;color:var(--grafite)}
.doc ul{padding-left:22px;display:flex;flex-direction:column;gap:6px;margin:10px 0}
.doc .agg{color:var(--grigio);font-size:.9rem}
.doc table{border-collapse:collapse;width:100%;margin:14px 0}
.doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--bordo);font-size:.95rem;vertical-align:top}
.doc th{font-family:var(--display);font-weight:800;color:var(--blu)}

/* ---- barra mobile fissa ---- */
.mobilebar{display:none}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-grid .mascotte{order:-1;width:min(210px,55vw)}
  .grid3{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .hright .tel{display:none}
  body{padding-bottom:78px}
  .mobilebar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--crema);border-top:1px solid var(--bordo);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .mobilebar .tel{display:flex;width:100%;justify-content:center;padding:12px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* utility (sostituiscono gli attributi style inline, per una CSP senza unsafe-inline) */
.logo.small span{font-size:1.25rem}
.logo.mb{margin-bottom:10px}
.claim{color:var(--grigio);font-size:.9rem}
.legale.flat{margin-top:0;border:0;padding-top:0}
.mt14{margin-top:14px}
.mt24{margin-top:24px}
.mt26{margin-top:26px}

/* blocco casi d'uso nell'hero */
.casi{background:#fff;border:2px solid var(--bordo);border-radius:18px;padding:22px 24px;margin-top:24px;max-width:38em}
.casi h2{font-size:1.2rem;letter-spacing:-.015em;line-height:1.3}
.casi p{font-size:1rem;color:var(--grafite);margin-top:10px}