/* Tuttofare — Guide pages shared styles (v2 — polish: progress bar, fade-in, hover-lift) */
:root{--navy:#16356E;--deep:#0F2750;--bg0:#0A0F1C;--line-d:rgba(255,255,255,.12);--line:#D9DDE4;--grey:#DCDCDC;--yellow:#F5B82E;--yellow-dark:#B58818;--wa:#21B557;--wa-dark:#188A43;--ink:#1a1a1a;--mute:#5C6675}
/* 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:rgba(10,15,28,.86);backdrop-filter:blur(10px);color:#fff;padding:16px 0;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line-d)}
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 .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
header.site .brand-badge{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
header.site .brand-badge svg{width:34px;height:34px}
header.site .brand b{font-family:'IBM Plex Mono',monospace;font-size:18px;letter-spacing:.03em;display:block;font-weight:700}
header.site .brand small{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);display:block}
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:block;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.18em;color:var(--mute);background:none;padding:0;margin:22px 0 12px}
article.guide h1{font-size:34px;line-height:1.18;margin:8px 0 24px;color:var(--navy);font-family:'IBM Plex Mono',monospace;font-weight:700;letter-spacing:.005em;text-transform:uppercase}
article.guide h2{font-size:22px;margin:36px 0 12px;color:var(--navy);font-family:'IBM Plex Mono',monospace;font-weight:700;text-transform:uppercase}
article.guide h3{font-size:18px;margin:28px 0 8px;color:var(--deep);font-family:'IBM Plex Mono',monospace;font-weight:700;text-transform:uppercase}
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(--deep);color:#fff;padding:28px 24px;border-radius:4px;border-left:3px solid var(--yellow);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:var(--bg0);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:28px 24px;border-radius:4px;margin:48px 0 12px;border:1px solid var(--line);border-left:3px solid var(--navy)}
.related h3{margin:0 0 14px;color:var(--navy);font-family:'IBM Plex Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.related ul{list-style:none;padding:0;margin:0}
.related li{margin:8px 0}
.related a{color:var(--navy)}
.zones-note{background:#F7F8FA;border:1px solid var(--line);padding:24px;border-radius:4px;margin:24px 0;font-size:14px;color:#333}
footer.site{background:var(--bg0);color:var(--mute);padding:36px 0;font-size:14px;border-top:1px solid var(--line-d);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}}