/* Stile B: nero caldo, Anton, Verde Sticky e ottone (colori presi dal negozio, vedi proposte/manifesto). Header, hero con il video nelle lettere e basi comuni */
:root{--ink:#efe8d0;--bg:#0d0c0a;--hot:#97a24f;--hot-2:#a9b35e;--brass:#c4a666;--grey:#2b2a24;--dim:rgba(239,232,208,.72);--pad:clamp(16px,3.5vw,48px);--bar:78px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* niente scorrimento di lato mentre gli elementi entrano in scena (clip non rompe le parti bloccate) */
body{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.top{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);z-index:20;mix-blend-mode:difference}
.top.is-solid{mix-blend-mode:normal;background:rgba(13,12,10,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(239,232,208,.08);padding-top:14px;padding-bottom:14px}
.top img{display:block;width:clamp(110px,10vw,140px);height:auto}
.top nav{display:flex;gap:28px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.top .call{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid #fff;padding-bottom:3px}
/* hero: palco fisso durante lo scroll */
.pin{position:relative;height:250vh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mask{position:absolute;inset:-2px;background:var(--bg);mix-blend-mode:multiply;display:flex;flex-direction:column;align-items:center;justify-content:center;will-change:transform;z-index:2}
.word{font-family:Anton,Impact,sans-serif;color:#fff;line-height:.86;text-transform:uppercase;white-space:nowrap;letter-spacing:.005em}
.mask .word + .word{margin-top:.02em}
.meta{position:absolute;left:0;right:0;bottom:clamp(22px,4vh,40px);display:flex;justify-content:space-between;padding:0 var(--pad);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(239,232,208,.75);z-index:3}
.meta .hint{display:flex;align-items:center;gap:10px}
.meta .hint i{width:22px;height:34px;border:2px solid rgba(239,232,208,.6);border-radius:12px;position:relative}
.meta .hint i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;background:#fff;border-radius:2px;animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(10px);opacity:0}}
.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.1) 55%,rgba(0,0,0,.35));opacity:0}
.after{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--bar) + 22px + env(safe-area-inset-bottom));z-index:4;display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:40px;visibility:hidden}
.after h1{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(54px,7.4vw,120px);line-height:.9}
.after h1 span{color:var(--hot)}
.after p{font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:rgba(239,232,208,.86);max-width:440px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;padding:16px 24px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.btn--main{background:var(--hot);color:var(--bg)}
.btn--main:hover{background:var(--hot-2)}
.btn--ghost{border:2px solid rgba(239,232,208,.8)}
/* basi delle sezioni */
/* cartellino di sezione: si deve capire al volo dove sei (Salmen, 07/10/2026) */
/* .kick.kick: vince sulle regole delle sezioni tipo ".lc__head p" che lo facevano grigio o diverso */
.kick.kick{display:flex;align-items:center;gap:14px;margin:0;padding:0;border:0;max-width:none;font-family:Inter,system-ui,sans-serif;font-size:clamp(15px,1.25vw,18px);line-height:1.2;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.kick.kick b{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:999px;background:var(--hot);color:var(--bg);font-size:13px;font-weight:800;letter-spacing:.04em}
.kick.kick::after{content:"";flex:0 1 auto;width:60px;min-width:16px;height:2px;background:var(--brass);opacity:.6}
@media (max-width:400px){.kick.kick{font-size:14px;letter-spacing:.11em}}
.h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.92;font-size:clamp(44px,6.4vw,104px)}
.h2 span{color:var(--hot)}
.next{min-height:70vh;display:grid;place-items:center;text-align:center;padding:80px 20px;color:rgba(239,232,208,.5);font-size:15px;border-top:1px solid rgba(239,232,208,.08)}
/* barra fissa in basso: WhatsApp e Chiama il locale, su tutte le pagine */
body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
.bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:grid;grid-template-columns:1fr 1fr;width:min(520px,calc(100% - 28px));background:rgba(13,12,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(239,232,208,.14);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.bar a{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.bar a svg{width:20px;height:20px;flex:none}
.bar__wa{color:var(--ink)}
.bar__wa:hover{background:rgba(239,232,208,.08)}
.bar__call{background:var(--hot);color:var(--bg)}
.bar__call:hover{background:var(--hot-2)}
/* footer comune: le informazioni della landing */
.ft{padding:clamp(70px,11vh,110px) var(--pad) 30px;border-top:1px solid rgba(239,232,208,.1);background:var(--bg)}
.ft__grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
.ft__logo{width:170px;height:auto}
.ft__lead{margin-top:18px;color:var(--dim);font-size:15px;line-height:1.6;max-width:300px}
.ft h3{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.ft p,.ft li{font-size:15px;line-height:1.6}
.ft__now{display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ft__now i{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 4px rgba(151,162,79,.22)}
.ft__now.is-closed i{background:#8a8370;box-shadow:0 0 0 4px rgba(138,131,112,.22)}
.ft__hours{list-style:none}
.ft__hours li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid rgba(239,232,208,.08)}
.ft__hours li span:last-child{color:var(--dim)}
.ft__hours li.is-today{color:var(--hot);font-weight:700}
.ft__hours li.is-today span:last-child{color:var(--hot)}
.ft__link{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--hot);padding-bottom:3px}
.ft__tel{font-family:Anton,Impact,sans-serif;font-size:clamp(28px,2.4vw,38px);line-height:1.1;display:block}
/* social sotto il logo: icona tonda + nome del profilo, area di tocco ampia */
.ft__soc{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:26px}
.ft__soc a{display:inline-flex;align-items:center;gap:14px;min-height:48px}
.ft__ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(239,232,208,.22);color:var(--ink);transition:background .25s,border-color .25s,color .25s}
.ft__ico svg{width:22px;height:22px}
.ft__soc a span:last-child{display:flex;flex-direction:column;font-size:14px;line-height:1.35;color:var(--dim)}
.ft__soc b{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ft__soc a:hover .ft__ico,.ft__soc a:focus-visible .ft__ico{background:var(--hot);border-color:var(--hot);color:var(--bg)}
.ft__base a:hover{color:var(--hot)}
.ft__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;margin-top:clamp(50px,8vh,80px);padding-top:22px;border-top:1px solid rgba(239,232,208,.08);font-size:13px;color:var(--dim)}
.ft__base nav{display:flex;gap:20px}
@media (max-width:860px){
 .top nav{display:none}
 .pin{height:200vh}
 .after{grid-template-columns:1fr;gap:6px}
 .after h1{font-size:clamp(48px,15vw,78px)}
 .meta .where{display:none}
 .meta{justify-content:center}
 .ft__grid{grid-template-columns:1fr 1fr}
 .ft__brand{grid-column:1/-1}
}
@media (max-width:520px){
 .ft__grid{grid-template-columns:1fr}
 .bar{width:100%;left:0;bottom:0;transform:none;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom)}
 .bar a{height:58px}
 :root{--bar:58px}
 body.chiuso{--bar:104px}
}
/* negozio chiuso: sopra la barra compare quando riapre e WhatsApp diventa il bottone principale */
.bar__note{grid-column:1/-1;order:1;display:none;padding:9px 12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--brass);border-bottom:1px solid rgba(239,232,208,.1)}
.bar.is-closed .bar__note{display:block}
.bar.is-closed .bar__wa{order:2;background:var(--hot);color:var(--bg)}
.bar.is-closed .bar__call{order:3;background:none;color:var(--ink)}
@media (min-width:521px){body.chiuso{--bar:112px}}
/* voto Google sotto i bottoni dell'hero */
.rating{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;color:rgba(239,232,208,.86)}
.rating b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:24px;color:var(--ink)}
.rating i{font-style:normal;letter-spacing:.12em;color:var(--brass)}
.rating span{border-bottom:1px solid rgba(239,232,208,.35)}
@media (prefers-reduced-motion:reduce){.pin{height:auto}.stage{position:relative}.mask,.meta{display:none}.shade{opacity:1}.after{visibility:visible}}
/* testo solo per lettori di schermo e motori di ricerca */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* le lettere dell'hero restano invisibili finché il font non è caricato e misurato (niente spostamenti al caricamento) */
.mask:not(.is-fit) .word{visibility:hidden}