/* Lama & Pettine · Barber Club — demo barbiere */
@font-face { font-family: "Anton"; src: url(../assets/fonts/anton-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument"; src: url(../assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Grotesk"; src: url(../assets/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --ink: #141210;
  --ink-2: #1d1a17;
  --ink-3: #2a2521;
  --cream: #efe6d6;
  --cream-2: #e2d3bb;
  --brass: #c8a15a;
  --red: #b3282d;
  --red-2: #d23a3f;
  --navy: #1f2a44;
  --muted: #9a9086;
  --muted-d: #6f655b;
  --line: rgba(239, 230, 214, 0.12);
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --accent: "Instrument", Georgia, serif;
  --sans: "Grotesk", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1220px;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--red); color: #fff; }
a { color: inherit; }
svg { display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.005em; }
em { font-family: var(--accent); font-style: italic; font-weight: 400; text-transform: none; color: var(--brass); letter-spacing: 0; }
h1 em, h2 em { font-size: 1.08em; }
p { margin: 0; }
.wrap { width: min(var(--wrap), calc(100% - 56px)); margin: 0 auto; }
.kick { font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kick::before { content: ""; width: 22px; height: 3px; background: repeating-linear-gradient(90deg, var(--red) 0 6px, var(--cream) 6px 12px, var(--navy) 12px 18px); }
.lead { font-size: 18px; color: var(--muted); max-width: 520px; }
section h2 { font-size: clamp(46px, 6vw, 92px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 4px; font: 700 14px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform 0.45s var(--ease), background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.btn .ar { width: 17px; height: 17px; transition: transform 0.45s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ar { transform: translateX(4px); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 14px 30px -14px rgba(179, 40, 45, 0.8); }
.btn-red:hover { background: var(--red-2); }
.btn-line { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(239, 230, 214, 0.35); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--brass); color: var(--brass); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 12.5px; gap: 0; }

/* nastro demo + badge */
.demo-ribbon { position: relative; z-index: 60; display: block; text-align: center; padding: 9px 16px; background: #0b0a09; color: #b9ae9f; font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--line); }
.demo-ribbon span { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 3px; background: var(--red); color: #fff; font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.demo-ribbon b { color: var(--cream); }
.demo-fab { position: fixed; left: 18px; bottom: 18px; z-index: 80; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: rgba(11, 19, 34, 0.92); color: #e8eef8; text-decoration: none; font-size: 13.5px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6); }
.demo-fab b { color: #8cc4ff; }
.demo-fab .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25); }
.js .demo-fab { opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.4s, transform 0.4s var(--ease); }
.js .demo-fab.show { opacity: 1; transform: none; pointer-events: auto; }

/* nav */
.nav { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px max(28px, calc((100% - var(--wrap)) / 2)); transition: background-color 0.4s, box-shadow 0.4s; }
.nav.scrolled { background: rgba(20, 18, 16, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.b-badge { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--cream); color: var(--ink); font: 400 19px var(--display); letter-spacing: 0.02em; box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--red); }
.b-badge em { color: var(--red); font-size: 20px; margin: 0 1px; }
.b-badge.sm { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--red); }
.b-badge.sm em { font-size: 16px; }
.b-txt { display: grid; line-height: 1.05; }
.b-txt b { font: 400 22px var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.b-txt small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--brass); }
.links { display: flex; gap: 32px; }
.links a { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--muted); position: relative; transition: color 0.3s; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.links a:hover { color: var(--cream); }
.links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* hero */
.hero { position: relative; padding: 30px 0 90px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 45%, rgba(200, 161, 90, 0.14), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(179, 40, 45, 0.12), transparent 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; min-height: calc(100svh - 190px); }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(239, 230, 214, 0.06); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; margin-bottom: 28px; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: ping 2s infinite; }
.status.closed .st-dot { background: var(--red); animation: none; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.h-title { font-size: clamp(76px, 9.6vw, 158px); line-height: 0.9; margin-bottom: 30px; }
.h-title .ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
.h-title .ln > span { display: inline-block; white-space: nowrap; }
.h-title em { font-size: 1.02em; color: var(--brass); line-height: 1; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

.hero-art { position: relative; height: min(640px, 76vh); }
.ring { position: absolute; left: 50%; top: 50%; width: min(560px, 100%); aspect-ratio: 1; transform: translate(-50%, -50%); animation: ringspin 40s linear infinite; }
.ring text { font: 400 19px var(--display); fill: var(--muted-d); }
@keyframes ringspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.h-head { position: absolute; left: 50%; top: 50%; width: min(410px, 78%); transform: translate(-50%, -50%); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); }
.h-head .head, .c-head .head, .tm-art .head { width: 100%; height: auto; }
.pole { position: absolute; left: 2%; top: 50%; transform: translateY(-50%); width: 62px; height: 360px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.6)); }
.p-cap { display: block; width: 70px; height: 26px; border-radius: 6px; background: linear-gradient(90deg, #7a5f2e, #e8c984 35%, #b48c45 60%, #6d5427); }
.p-top { border-radius: 35px 35px 6px 6px; height: 34px; position: relative; }
.p-top::before { content: ""; position: absolute; left: 50%; top: -18px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4dea8, #b48c45 60%, #6d5427); }
.p-glass { position: relative; flex: 1; width: 54px; overflow: hidden; background: repeating-linear-gradient(-45deg, var(--red) 0 16px, var(--cream) 16px 32px, var(--navy) 32px 48px, var(--cream) 48px 64px); background-size: 100% 90.51px; animation: pole 1.4s linear infinite; }
.p-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05) 30%, rgba(255, 255, 255, 0.55) 42%, rgba(0, 0, 0, 0.05) 56%, rgba(0, 0, 0, 0.6)); }
@keyframes pole { to { background-position: 0 90.51px; } }
.h-sci { position: absolute; right: 4%; top: 8%; width: 150px; transform: rotate(-28deg); filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.5)); }
.h-sci .sci { width: 100%; height: auto; }
.h-tag { position: absolute; padding: 10px 16px; border-radius: 3px; background: var(--cream); color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.h-tag b { font: 400 16px var(--display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); margin-right: 3px; }
.h-tag.t1 { right: 2%; top: 58%; transform: rotate(4deg); }
.h-tag.t2 { left: 16%; bottom: 5%; transform: rotate(-3deg); }

/* nastri incrociati */
.tapes { position: relative; height: 170px; overflow: hidden; margin: -20px 0 0; }
.tape { position: absolute; left: -5%; right: -5%; top: 50%; padding: 14px 0; overflow: hidden; }
.tp1 { background: var(--red); color: #fff; transform: translateY(-50%) rotate(-3deg); z-index: 2; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
.tp2 { background: var(--cream); color: var(--ink); transform: translateY(-50%) rotate(2.4deg); }
.tp-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: tape 38s linear infinite; }
.tp2 .tp-track { animation-direction: reverse; animation-duration: 46s; }
.tp-track span { font: 400 32px var(--display); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.tp-track .sci-ico, .tp-track .star { width: 24px; height: 24px; flex: 0 0 auto; }
.tp2 .star { color: var(--red); width: 18px; height: 18px; }
@keyframes tape { to { transform: translateX(-50%); } }

/* configuratore */
.cfg-sec { background: var(--cream); color: var(--ink); padding: 120px 0; position: relative; }
.cfg-sec .lead { color: var(--muted-d); }
.cfg-sec em { color: var(--red); }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cfg { margin-top: 36px; }
.cfg-l { font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-d); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.cfg-l span { letter-spacing: 0; text-transform: none; font: italic 400 17px var(--accent); color: var(--red); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.opt { height: 44px; padding: 0 18px; border-radius: 4px; border: 0; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 16, 0.12); font: 600 14px var(--sans); color: var(--ink); cursor: pointer; transition: all 0.3s var(--ease); }
.opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.opt.on { background: var(--ink); color: var(--cream); box-shadow: none; }
.fades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 26px; background: #fff; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(20, 18, 16, 0.12); overflow: hidden; position: relative; }
.fd { position: relative; z-index: 1; border: 0; background: transparent; padding: 10px 4px; cursor: pointer; display: grid; justify-items: center; gap: 0; color: var(--ink); font-family: var(--sans); transition: color 0.3s; }
.fd + .fd { box-shadow: -1px 0 0 rgba(20, 18, 16, 0.1); }
.fd b { font: 400 30px var(--display); line-height: 1.1; }
.fd span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-d); }
.fd.on { background: var(--red); color: #fff; }
.fd.on span { color: rgba(255, 255, 255, 0.85); }
.cfg-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.c-head { position: relative; width: min(470px, 100%); filter: drop-shadow(0 30px 40px rgba(20, 18, 16, 0.25)); }
.big-head .hs, .big-head .bd { opacity: 0; }
.big-head .hs.on, .big-head .bd.on { opacity: 1; }
.clip-bit { position: absolute; width: 3px; height: 9px; border-radius: 2px; background: #1d1714; pointer-events: none; z-index: 3; }
.c-card { position: relative; z-index: 2; margin-top: -40px; width: min(420px, 100%); padding: 20px 22px; border-radius: 6px; background: var(--ink); color: var(--cream); display: grid; gap: 4px; box-shadow: 0 24px 50px -24px rgba(20, 18, 16, 0.7); }
.c-card small { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.c-card b { font: 400 26px var(--display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.c-card span { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.c-card .btn { justify-self: start; }

/* listino: tabellone */
.board-sec { padding: 130px 0 110px; }
.s-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 30px; margin-bottom: 50px; }
.s-head .kick { grid-column: 1 / -1; margin-bottom: 0; }
.s-head .note { font-size: 13px; color: var(--muted); text-align: right; max-width: 260px; }
.board { --cw: 34px; padding: 26px 28px 18px; border-radius: 10px; background: #0b0a09; box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.board-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted-d); padding: 0 4px 14px; }
.fl-row { display: flex; align-items: center; gap: 18px; width: 100%; padding: 8px 4px; border: 0; border-top: 1px solid rgba(239, 230, 214, 0.06); background: transparent; color: inherit; cursor: pointer; text-align: left; position: relative; transition: background-color 0.3s; font: inherit; }
.fl-row:hover { background: rgba(179, 40, 45, 0.12); }
.fl-name, .fl-time, .fl-price { display: flex; gap: 3px; }
.fl-meta { display: flex; gap: 14px; margin-left: auto; }
.fl-row i { font-style: normal; display: grid; place-items: center; width: var(--cw); height: calc(var(--cw) * 1.36); border-radius: 3px; background: linear-gradient(180deg, #2a2521 0 49.5%, #0b0a09 49.5% 50.5%, #221e1b 50.5%); font: 400 calc(var(--cw) * 0.78) var(--display); color: var(--cream); line-height: 1; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4); }
.fl-price i { color: var(--brass); }
.fl-go { position: absolute; right: 4px; top: 50%; transform: translate(10px, -50%); opacity: 0; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 3px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.35s var(--ease); pointer-events: none; }
.fl-go .ar { width: 14px; height: 14px; }
.fl-row:hover .fl-go, .fl-row:focus-visible .fl-go { opacity: 1; transform: translate(0, -50%); }

/* rituale */
.rit { padding: 60px 0 120px; background: linear-gradient(180deg, var(--ink), #19120f 50%, var(--ink)); }
.rit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.rit-stick { position: sticky; top: 18vh; height: 64vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rit-razor { width: 100%; max-width: 560px; }
.big-razor { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7)); }
.rit-count { margin-top: 70px; font: 400 22px var(--display); letter-spacing: 0.1em; color: var(--muted-d); }
.rit-count b { font-weight: 400; color: var(--brass); font-size: 56px; }
.rit-copy { padding-top: 12vh; }
.rt-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); padding: 30px 0; opacity: 0.28; transition: opacity 0.5s; }
.rt-step.on { opacity: 1; }
.rt-n { font: 400 15px var(--display); color: var(--red); letter-spacing: 0.2em; margin-bottom: 10px; }
.rt-step h3 { font-size: clamp(34px, 3.6vw, 52px); margin-bottom: 14px; }
.rt-step p { color: var(--muted); max-width: 420px; font-size: 17px; }

/* barbieri */
.team { padding: 110px 0; }
.tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tm-card { position: relative; border-radius: 8px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.4s; }
.tm-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(-45deg, var(--red) 0 8px, var(--cream) 8px 16px, var(--navy) 16px 24px, var(--cream) 24px 32px); background-size: 100% 45.25px; opacity: 0; transition: opacity 0.4s; animation: pole 1.2s linear infinite; }
.tm-card:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(200, 161, 90, 0.45); }
.tm-card:hover::before { opacity: 1; }
.tm-art { padding: 34px 44px 10px; background: radial-gradient(60% 60% at 50% 45%, rgba(200, 161, 90, 0.16), transparent 70%); }
.tm-art .head { transition: transform 0.6s var(--ease); }
.tm-card:hover .tm-art .head { transform: rotate(-4deg) scale(1.04); }
.tm-body { padding: 10px 28px 28px; }
.tm-body small { font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); }
.tm-body h3 { font-size: 44px; margin: 4px 0 10px; }
.tm-body p { color: var(--muted); font-size: 15px; min-height: 72px; }
.tm-book { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 4px; }
.tm-book .ar { width: 15px; height: 15px; transition: transform 0.4s var(--ease); }
.tm-book:hover .ar { transform: translateX(4px); }

/* club card */
.club { padding: 90px 0 120px; }
.club-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.card { padding: 28px; border-radius: 16px; background: linear-gradient(135deg, #f3ebdd, #dccab0); color: var(--ink); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5); transform: rotate(-3deg); position: relative; overflow: hidden; }
.card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 22px solid rgba(179, 40, 45, 0.08); }
.card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.card-top .b-badge.sm { background: var(--ink); color: var(--cream); box-shadow: 0 0 0 2px #e9dcc6, 0 0 0 4px var(--red); }
.card-top b { display: block; font: 400 24px var(--display); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; }
.card-top small { font-size: 13px; color: var(--muted-d); }
.stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(20, 18, 16, 0.25); display: grid; place-items: center; }
.stamp i { display: grid; place-items: center; width: 84%; height: 84%; border-radius: 50%; background: var(--red); color: #fff; font-style: normal; transform: rotate(-12deg); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25); }
.stamp i .sci-ico { width: 52%; height: 52%; }
.stamp.last { border-color: var(--red); }
.stamp.last i { background: transparent; color: var(--red); font: 400 11px var(--display); text-transform: uppercase; letter-spacing: 0.06em; box-shadow: none; transform: rotate(-12deg); }
.card-foot { margin-top: 22px; font-size: 14px; color: var(--muted-d); }
.card-foot b { color: var(--red); text-transform: uppercase; letter-spacing: 0.06em; }

/* prenotazione */
.book { padding: 110px 0; background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: start; }
.bk > *, .cfg-grid > *, .hero-grid > *, .info-grid > * { min-width: 0; }
.bk-l { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.bk-l:first-child { margin-top: 0; }
.bk-l span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; letter-spacing: 0; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-radius: 6px; border: 0; background: var(--ink-3); color: var(--cream); font-family: var(--sans); cursor: pointer; text-align: left; transition: all 0.3s var(--ease); box-shadow: inset 0 0 0 1px var(--line); }
.chip:hover { box-shadow: inset 0 0 0 1px rgba(200, 161, 90, 0.6); }
.chip.on { background: var(--cream); color: var(--ink); box-shadow: none; }
.chip b { font-size: 14.5px; font-weight: 700; }
.chip span { font-size: 12.5px; color: var(--muted); }
.svc { flex-direction: column; align-items: flex-start; gap: 0; justify-content: center; }
.chip.on span { color: var(--muted-d); }
.av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--cream-2); flex: 0 0 auto; }
.av .head { width: 100%; height: 100%; transform: scale(1.6) translateY(4%); }
.av-any { display: grid; place-items: center; background: var(--red); color: #fff; }
.av-any .sci-ico { width: 18px; height: 18px; }
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: 0 0 auto; width: 66px; padding: 10px 0; border-radius: 6px; border: 0; background: var(--ink-3); cursor: pointer; display: flex; flex-direction: column; align-items: center; font-family: var(--sans); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line); transition: all 0.3s; }
.day small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.day b { font: 400 30px var(--display); line-height: 1.15; }
.day.on { background: var(--red); box-shadow: none; }
.day.on small { color: rgba(255, 255, 255, 0.8); }
.day:disabled { opacity: 0.3; cursor: default; }
.times { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; min-height: 104px; }
.tm { height: 42px; border-radius: 4px; border: 0; background: var(--ink-3); color: var(--cream); font: 700 14px var(--sans); cursor: pointer; transition: all 0.25s; box-shadow: inset 0 0 0 1px var(--line); }
.tm:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--brass); }
.tm.on { background: var(--cream); color: var(--ink); box-shadow: none; }
.tm:disabled { opacity: 0.25; text-decoration: line-through; cursor: default; }
.bk-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 6px; margin-bottom: 12px; }
.fld span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fld input { height: 52px; padding: 0 16px; border-radius: 6px; border: 0; background: var(--ink-3); color: var(--cream); font: 500 16px var(--sans); box-shadow: inset 0 0 0 1px var(--line); outline: none; transition: box-shadow 0.3s; }
.fld input::placeholder { color: var(--muted-d); }
.fld input:focus { box-shadow: inset 0 0 0 1.5px var(--brass); }
.fld.bad input { box-shadow: inset 0 0 0 1.5px var(--red-2); }
.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.ticket { position: sticky; top: 100px; }
.tk-in { position: relative; padding: 26px 26px 22px; border-radius: 8px; background: var(--cream); color: var(--ink); box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.9); -webkit-mask: radial-gradient(circle 12px at 0 62%, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 62%, transparent 11.5px, #000 12px) right / 51% 100% no-repeat; mask: radial-gradient(circle 12px at 0 62%, transparent 11.5px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 62%, transparent 11.5px, #000 12px) right / 51% 100% no-repeat; }
.tk-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 2px dashed rgba(20, 18, 16, 0.18); }
.tk-head .b-badge.sm { background: var(--ink); color: var(--cream); box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--red); }
.tk-head b { display: block; font: 400 22px var(--display); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.05; }
.tk-head small { font-size: 12.5px; color: var(--muted-d); letter-spacing: 0.06em; }
.tk-list { margin: 16px 0; display: grid; gap: 10px; }
.tk-list div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.tk-list dt { color: var(--muted-d); }
.tk-list dd { margin: 0; font-weight: 700; text-align: right; }
.tk-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 2px dashed rgba(20, 18, 16, 0.18); margin-bottom: 18px; }
.tk-tot span { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-d); }
.tk-tot b { font: 400 44px var(--display); color: var(--red); line-height: 1; }
.tk-btn { width: 100%; }
.tk-note { margin-top: 12px; font-size: 12px; color: var(--muted-d); text-align: center; }
.tk-done { position: absolute; inset: 0; border-radius: 8px; background: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 28px; }
.tk-done[hidden] { display: none; }
.tk-done b { font: 400 34px var(--display); text-transform: uppercase; line-height: 1; }
.tk-done p { font-size: 15px; }
.tk-done .muted { color: var(--muted-d); font-size: 12.5px; margin-bottom: 8px; }
.tk-done .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(20, 18, 16, 0.3); }

/* info */
.info { padding: 110px 0 120px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.orari { list-style: none; padding: 0; margin: 34px 0 26px; border-top: 1px solid var(--line); }
.orari li { display: flex; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--muted); }
.orari li b { font-weight: 600; color: var(--cream); }
.orari li.today { color: var(--cream); background: linear-gradient(90deg, rgba(179, 40, 45, 0.18), transparent); padding-left: 14px; }
.orari li.today span::after { content: "oggi"; margin-left: 10px; padding: 2px 8px; border-radius: 3px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 2px; }
.addr { color: var(--muted); font-size: 15px; }
.addr b { color: var(--cream); }
.fq { border-bottom: 1px solid var(--line); }
.fq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font: 400 24px var(--display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.fq summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: all 0.3s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--cream); transition: transform 0.35s var(--ease); }
.pm::after { transform: rotate(90deg); }
.fq[open] .pm { background: var(--red); box-shadow: none; }
.fq[open] .pm::after { transform: rotate(0); }
.fq p { padding: 0 40px 22px 0; color: var(--muted); }

/* footer */
.foot { padding: 60px 0 40px; overflow: hidden; border-top: 1px solid var(--line); }
.foot-big { font: 400 clamp(64px, 14.5vw, 230px) var(--display); text-transform: uppercase; white-space: nowrap; text-align: center; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px rgba(239, 230, 214, 0.22); letter-spacing: 0.01em; margin-bottom: 40px; }
.foot-in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.foot a { color: var(--brass); }

/* intro + cursore */
.intro { display: none; }
.anim .intro { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.cut { position: absolute; inset: 0; background: var(--ink); display: grid; place-items: center; }
.cut-a { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 62%); }
.cut-b { clip-path: polygon(0 62%, 100% 38%, 100% 100%, 0 100%); }
.i-logo { font: 400 clamp(90px, 15vw, 190px) var(--display); color: var(--cream); letter-spacing: 0.02em; }
.i-logo em { color: var(--red); }
.slash { position: absolute; left: -10%; top: 50%; width: 120%; height: 3px; background: var(--red); box-shadow: 0 0 20px 2px rgba(210, 58, 63, 0.8); transform: rotate(-13deg) scaleX(0); transform-origin: left center; }
.cur { display: none; }
@media (pointer: fine) {
  .js.anim .cur { display: block; position: fixed; left: 0; top: 0; z-index: 95; width: 64px; pointer-events: none; margin: -32px 0 0 -32px; opacity: 0; transition: opacity 0.3s; }
  .cur.on { opacity: 1; }
  .cur .cur-sci { width: 100%; height: auto; transform: rotate(-35deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
}

/* stati animazione */
.anim [data-h], .anim [data-r] { opacity: 0; }
.anim .h-title .ln > span { transform: translateY(110%); }
.anim .h-head, .anim .pole, .anim .h-sci, .anim .h-tag, .anim .ring { opacity: 0; }

@media (max-width: 1000px) {
  .links { display: none; }
  .hero-grid, .cfg-grid, .rit-grid, .club-grid, .bk, .info-grid { grid-template-columns: 1fr; }
  .hero-grid { min-height: 0; }
  .hero-art { height: 520px; order: -1; }
  .tm-grid { grid-template-columns: 1fr 1fr; }
  .rit-stick { position: relative; top: 0; height: auto; padding: 20px 0; }
  .rit-copy { padding-top: 0; }
  .rt-step { min-height: 0; opacity: 1; }
  .ticket { position: relative; top: 0; }
  .board { --cw: 26px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 36px); }
  .nav { padding: 12px 18px; }
  .b-badge { width: 42px; height: 42px; font-size: 16px; }
  .b-txt b { font-size: 19px; }
  .btn-sm .long { display: none; }
  .demo-ribbon { font-size: 11.5px; padding: 8px 10px; }
  .hero { padding: 10px 0 60px; }
  .hero-art { height: 390px; }
  .h-head { width: 76%; }
  .pole { height: 250px; width: 44px; left: 0; }
  .p-cap { width: 50px; }
  .p-glass { width: 38px; }
  .h-sci { width: 96px; right: 0; top: 4%; }
  .h-tag { font-size: 11.5px; padding: 8px 11px; }
  .h-tag b { font-size: 13px; }
  .h-tag.t2 { left: 8%; bottom: 2%; }
  .h-title { font-size: 21vw; }
  .ctas .btn { width: 100%; }
  .tapes { height: 130px; }
  .tp-track span { font-size: 24px; }
  .cfg-sec { padding: 80px 0; }
  .opt { height: 40px; padding: 0 13px; font-size: 13px; }
  .s-head { grid-template-columns: 1fr; }
  .s-head .note { text-align: left; }
  .board { --cw: 16px; padding: 18px 12px 10px; }
  .fl-row { flex-wrap: wrap; gap: 6px; padding: 10px 2px; }
  .fl-name, .fl-time, .fl-price { gap: 2px; }
  .fl-meta { gap: 8px; }
  .fl-go { display: none; }
  .rit { padding: 30px 0 80px; }
  .tm-grid { grid-template-columns: 1fr; }
  .card { transform: rotate(-2deg); padding: 22px; }
  .stamps { gap: 8px; }
  .bk-2 { grid-template-columns: 1fr; }
  .times { grid-template-columns: repeat(4, 1fr); }
  .chip { min-height: 48px; padding: 8px 12px; }
  .fq summary { font-size: 20px; }
  .foot { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-glass, .tp-track, .ring, .st-dot, .tm-card::before { animation: none; }
}