/* Tuttofare — Guide pages shared styles (v2 — polish: progress bar, fade-in, hover-lift) */
:root{--navy:#16356E;--deep:#0F2750;--grey:#DCDCDC;--yellow:#F5B82E;--yellow-dark:#B58818;--wa:#21B557;--wa-dark:#188A43;--ink:#1a1a1a;--mute:#6b6b6b}
/* Reading progress bar */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--yellow) 0%,var(--wa) 100%);z-index:100;transition:width .1s linear;box-shadow:0 0 6px rgba(0,0,0,.15)}
/* Fade-in-on-scroll utility */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .55s ease-out,transform .55s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.fade-in{opacity:1;transform:none;transition:none}.read-progress{display:none}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fafafa;line-height:1.65}
.wrap{max-width:780px;margin:0 auto;padding:0 24px}
header.site{background:var(--navy);color:#fff;padding:14px 0;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.08)}
header.site .wrap{max-width:1080px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
header.site a.logo{color:#fff;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-weight:700;letter-spacing:.04em}
header.site .phone{font-family:'IBM Plex Mono',monospace;font-size:14px;color:rgba(255,255,255,.92)}
header.site .phone a{color:var(--yellow);text-decoration:none;font-weight:700}
nav.crumb{font-size:13px;color:var(--mute);padding:24px 0 0}
nav.crumb a{color:var(--mute);text-decoration:none;border-bottom:1px dotted #bbb}
nav.crumb a:hover{color:var(--navy)}
article.guide{padding:14px 0 56px}
article.guide .meta{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);background:var(--grey);padding:4px 10px;border-radius:4px;margin:18px 0 12px}
article.guide h1{font-size:34px;line-height:1.2;margin:8px 0 24px;color:var(--navy);font-family:'IBM Plex Mono',monospace;letter-spacing:-.01em}
article.guide h2{font-size:22px;margin:36px 0 12px;color:var(--navy);font-family:'IBM Plex Mono',monospace}
article.guide h3{font-size:18px;margin:28px 0 8px;color:var(--deep);font-family:'IBM Plex Mono',monospace}
article.guide h4{font-size:17px;margin:26px 0 8px;color:var(--deep);font-family:'IBM Plex Mono',monospace}
article.guide p{margin:0 0 14px}
article.guide ul{margin:8px 0 18px;padding-left:22px}
article.guide li{margin:6px 0}
article.guide strong{color:var(--navy)}
article.guide a{color:var(--navy);text-decoration:underline}
.cta{background:var(--navy);color:#fff;padding:28px 24px;border-radius:8px;margin:36px 0 12px}
.cta p{color:rgba(255,255,255,.92);margin:0 0 18px;font-size:16px}
.cta strong{color:#fff}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;text-decoration:none;padding:14px 22px;border-radius:6px;font-weight:700;font-family:'IBM Plex Sans',sans-serif;font-size:15px;transition:background .15s}
.btn-wa:hover{background:var(--wa-dark);color:#fff;text-decoration:none}
.btn-wa svg{width:18px;height:18px}
.related{background:#fff;padding:32px 24px;border-radius:8px;margin:48px 0 12px;border:1px solid #ececec}
.related h3{margin:0 0 14px;color:var(--navy);font-family:'IBM Plex Mono',monospace;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.related ul{list-style:none;padding:0;margin:0}
.related li{margin:8px 0}
.related a{color:var(--navy)}
.zones-note{background:var(--grey);padding:24px;border-radius:8px;margin:24px 0;font-size:14px;color:#333}
footer.site{background:var(--navy);color:rgba(255,255,255,.7);padding:36px 0;font-size:14px;border-top:3px solid var(--grey);margin-top:48px}
footer.site .wrap{max-width:1080px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer.site b{color:#fff;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}
footer.site a{color:var(--yellow);text-decoration:none}
.wa-float{position:fixed;right:18px;bottom:18px;background:var(--wa);color:#fff;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.18);text-decoration:none;z-index:60;transition:background .15s}
.wa-float:hover{background:var(--wa-dark)}
.wa-float svg{width:30px;height:30px;fill:#fff}
@media (max-width:520px){article.guide h1{font-size:26px}article.guide h2{font-size:20px}article.guide h3{font-size:17px}.cta{padding:22px 18px}}