/* MIRO Padel — sito pubblico */
:root {
  --navy: #0B1020;
  --navy-2: #121a33;
  --court: #1d4ea3;        /* blu campo, dalle foto */
  --lime: #B6FF3B;
  --paper: #F4F5F7;
  --graphite: #2E2E2E;
  --ink: #0B1020;
  --ink-soft: #4a5068;
  --on-dark: #e8eaf2;
  --on-dark-soft: #9aa1bb;
  --font: 'Montserrat', system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  /* angolo della barra lime dell'isotipo */
  --slash: 56deg;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--navy);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 700;
  font-size: 15px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s;
  font-family: inherit;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.lime { background: var(--lime); color: var(--navy); }
.btn.lime:hover { background: #c8ff6b; }
.btn.line { border-color: rgba(255,255,255,.35); color: #fff; }
.btn.line:hover { border-color: #fff; }
.btn.navy { background: var(--navy); color: #fff; }
.btn.navy:hover { background: #1b2340; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; gap: 18px;
  padding: 18px var(--gutter); color: #fff; transition: background .25s, padding .25s;
}
.top.solid { background: rgba(11,16,32,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 26px; width: auto; }
.logo span { font-weight: 800; letter-spacing: .2em; font-size: 15px; }
.top .sp { flex: 1; }
.langs { display: flex; gap: 2px; }
.langs button {
  background: none; border: 0; color: var(--on-dark-soft); font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 8px; cursor: pointer; border-radius: 6px; letter-spacing: .04em;
}
.langs button:hover { color: #fff; }
.langs button[aria-pressed="true"] { color: var(--navy); background: var(--lime); }
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff;
  font: inherit; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 99px; cursor: pointer;
}
.menu-btn:hover { border-color: #fff; }
.menu-btn i { display: flex; flex-direction: column; gap: 4px; }
.menu-btn i::before, .menu-btn i::after { content: ''; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
@media (max-width: 560px) { .logo span { display: none; } .menu-btn span { display: none; } .menu-btn { padding: 11px; } }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; color: #fff; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  overflow: hidden; background: var(--navy);
}
.hero-text {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--gutter) 48px; max-width: 760px;
}
.word { margin: 0; line-height: .86; font-weight: 800; letter-spacing: -.02em; }
.word .w1 { display: block; font-size: clamp(84px, 13.5vw, 216px); }
.word .w2 { display: block; font-size: clamp(18px, 2.3vw, 34px); letter-spacing: .62em; font-weight: 500; margin-top: .9em; color: var(--on-dark); }
.tagline { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; margin: 44px 0 14px; letter-spacing: -.005em; }
.tagline::after {
  content: ''; display: block; width: 64px; height: 5px; background: var(--lime); margin-top: 18px;
  transform: skewX(-34deg); transform-origin: left;
}
.lead { color: var(--on-dark); max-width: 54ch; margin: 0 0 32px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 52px; font-size: 14px; color: var(--on-dark-soft); font-weight: 500; }
.facts span { display: inline-flex; align-items: center; gap: 9px; }
.facts .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(182,255,59,.18); }

/* pannello foto tagliato dalla diagonale dell'isotipo */
.hero-photo { position: relative; min-height: 100%; }
.hero-photo .ph {
  position: absolute; inset: 0; background: url('/img/smash.jpg') center 30% / cover no-repeat;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-photo .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,16,32,.35), rgba(11,16,32,0) 30%, rgba(11,16,32,.25)); }
.hero-photo .slash {
  position: absolute; left: -2%; bottom: 0; width: 15%; height: 100%; background: var(--lime);
  clip-path: polygon(0 100%, 55% 100%, 100% 0, 45% 0);
  transform-origin: bottom left; animation: slash-in 1s cubic-bezier(.2,.8,.2,1) .15s both;
}
@keyframes slash-in { from { clip-path: polygon(0 100%, 55% 100%, 55% 100%, 0 100%); } }
@media (prefers-reduced-motion: reduce) { .hero-photo .slash { animation: none; } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto 46svh; }
  .hero-text { padding-top: 110px; padding-bottom: 40px; }
  .hero-photo .ph { clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
  .hero-photo .slash { width: 100%; height: 16%; left: 0; top: 0; bottom: auto; clip-path: polygon(0 88%, 100% 0, 100% 34%, 0 100%); animation: none; }
  .facts { margin-top: 36px; gap: 14px 24px; }
}

/* ---------- tamburo 3D (programmi + menu) ---------- */
.programs { position: relative; background: var(--navy); color: #fff; }
.programs-track { height: calc(var(--n, 6) * 62svh + 100svh); }
.programs-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 4vw;
  padding: 90px var(--gutter) 40px; max-width: var(--max); margin: 0 auto;
}
.programs-head { position: absolute; top: 96px; left: var(--gutter); right: var(--gutter); display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.programs-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--lime); letter-spacing: .02em; }
.programs-head p { margin: 0; color: var(--on-dark-soft); font-size: 15px; }
.programs-head .count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--on-dark-soft); font-size: 14px; font-weight: 600; }

.drum { position: relative; height: min(64svh, 560px); perspective: 1100px; perspective-origin: 50% 50%; overflow: hidden; }
.drum ul { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.drum li {
  position: absolute; left: 0; right: 0; top: 50%; height: var(--line); margin-top: calc(var(--line) / -2);
  display: flex; align-items: center; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em;
  font-size: var(--fs); line-height: 1; white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  color: rgba(255,255,255,.9); will-change: transform, opacity; transform-origin: 50% 50%;
}
.drum li .ix { font-size: .2em; font-weight: 600; letter-spacing: 0; margin-right: 1em; color: var(--on-dark-soft); align-self: flex-start; margin-top: .6em; font-variant-numeric: tabular-nums; }
.drum li.on { color: #fff; }
.drum li.on .ix { color: var(--lime); }
.drum li .tx { position: relative; }
.drum li.on .tx::after {
  content: ''; position: absolute; left: 0; bottom: -.08em; height: .09em; width: 100%; background: var(--lime);
  transform: skewX(-34deg); transform-origin: left; animation: under .35s ease-out;
}
@keyframes under { from { transform: skewX(-34deg) scaleX(0); } }
.programs .drum { --fs: clamp(38px, 6.4vw, 104px); --line: calc(var(--fs) * 1.3); }

.detail { position: relative; height: min(64svh, 560px); }
.detail article {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px;
  opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; pointer-events: none;
}
.detail article.on { opacity: 1; transform: none; pointer-events: auto; }
.detail .img {
  aspect-ratio: 4 / 3; width: 100%; background: center / cover no-repeat var(--navy-2); border-radius: 4px;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}
.detail h3 { margin: 0; font-size: 26px; font-weight: 800; }
.detail p { margin: 0; color: var(--on-dark); max-width: 46ch; }
.detail a { align-self: flex-start; color: var(--lime); font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; font-size: 15px; }

/* versione statica: movimento ridotto */
.flat .drum li { transform: none !important; opacity: 1 !important; position: static; height: auto; margin: 0; padding: .1em 0; color: rgba(255,255,255,.35); }
.flat .drum ul { position: static; }
.flat .drum { height: auto; perspective: none; }
.flat .drum li.on { color: #fff; }
.programs.flat .drum { --fs: clamp(30px, 4.6vw, 64px); }

@media (max-width: 900px) {
  .programs-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-content: start; gap: 0; padding-top: 140px; }
  .programs .drum { --fs: clamp(30px, 10vw, 54px); height: 34svh; }
  .detail { height: auto; min-height: 44svh; }
  .detail article { justify-content: flex-start; gap: 14px; }
  .detail .img { aspect-ratio: 16 / 9; max-height: 22svh; }
  .detail h3 { display: none; }
  .detail p { font-size: 15px; }
  .programs-head { top: 84px; }
}

/* ---------- overlay menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 80; background: var(--navy); color: #fff; display: grid;
  grid-template-rows: auto 1fr auto; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s;
}
.menu.open { visibility: visible; opacity: 1; transition: opacity .3s; }
.menu-top { display: flex; align-items: center; gap: 18px; padding: 18px var(--gutter); }
.menu-top .sp { flex: 1; }
.menu-close { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 99px; cursor: pointer; }
.menu-close:hover { border-color: #fff; }
.menu .drum { height: 100%; --fs: clamp(44px, 9vw, 136px); --line: calc(var(--fs) * 1.1); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; max-width: var(--max); margin: 0 auto; width: 100%; padding: 0 var(--gutter); }
.menu .drum.dragging { cursor: grabbing; }
.menu .drum li { cursor: pointer; justify-content: flex-start; left: var(--gutter); right: var(--gutter); }
.menu .drum li:not(.on) { color: rgba(255,255,255,.55); }
.menu .drum li:hover { color: #fff; }
.menu-foot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px var(--gutter) 24px; color: var(--on-dark-soft); font-size: 13px; }
.menu-foot a { color: #fff; font-weight: 600; text-decoration: none; }
.menu.flat .drum { display: flex; align-items: center; }
.menu.flat .drum ul { display: flex; flex-direction: column; }
.menu.flat .drum li { color: rgba(255,255,255,.8); }

/* ---------- chi siamo ---------- */
.us { background: var(--paper); color: var(--ink); padding: clamp(80px, 12vw, 160px) 0; position: relative; overflow: hidden; }
.us-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 6vw; align-items: center; }
.miro-split { --big: clamp(84px, 10.5vw, 180px); display: flex; align-items: flex-start; line-height: .8; font-weight: 800; letter-spacing: -.03em; }
.miro-split .half { display: flex; flex-direction: column; }
.miro-split .big { font-size: var(--big); }
.miro-split .who { font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-top: 22px; padding-left: .2em; }
.miro-split .who small { display: block; font-weight: 500; color: var(--ink-soft); font-size: 14px; }
.miro-split .cut {
  flex: none; width: calc(var(--big) * .3); height: calc(var(--big) * .72); margin: calc(var(--big) * .02) calc(var(--big) * .06) 0;
  background: var(--lime); clip-path: polygon(0 100%, 50% 100%, 100% 0, 50% 0);
}
.us h2 { font-size: 15px; color: var(--court); margin: 0 0 18px; font-weight: 700; }
.us p { margin: 0 0 18px; font-size: 19px; line-height: 1.65; max-width: 52ch; }
.us p:first-of-type { font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.45; }
@media (max-width: 900px) { .us-grid { grid-template-columns: 1fr; } .miro-split { --big: clamp(72px, 24vw, 140px); } }

/* ---------- il club ---------- */
.club { background: #fff; color: var(--ink); padding: clamp(80px, 10vw, 140px) 0; }
.club-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.club-head h2 { margin: 0; font-size: clamp(44px, 6vw, 88px); font-weight: 800; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
.club-head p { margin: 0; color: var(--ink-soft); font-size: 18px; }
.club-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.club-photo { min-height: 460px; background: url('/img/court-garden.jpg') center / cover; border-radius: 4px; }
.club-info { display: flex; flex-direction: column; }
.club-info dl { margin: 0; }
.club-info .row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid #e3e5ea; }
.club-info .row:last-child { border-bottom: 1px solid #e3e5ea; }
.club-info dt { font-weight: 600; color: var(--ink-soft); font-size: 15px; }
.club-info dd { margin: 0; font-weight: 700; font-size: 19px; }
.club-info dd a { font-weight: 600; font-size: 15px; color: var(--court); display: inline-block; margin-top: 6px; }
.map { margin-top: 28px; flex: 1; min-height: 260px; border-radius: 4px; overflow: hidden; background: var(--paper); }
.map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; filter: saturate(.85); }
@media (max-width: 900px) { .club-grid { grid-template-columns: 1fr; } .club-photo { min-height: 300px; } .club-info .row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- matera band ---------- */
.band { position: relative; height: clamp(320px, 60vh, 640px); background: url('/img/matera.jpg') center 60% / cover; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,16,32,.55), rgba(11,16,32,0) 50%); }

/* ---------- cta ---------- */
.cta { background: var(--lime); color: var(--navy); padding: clamp(70px, 10vw, 130px) 0; }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.cta h2 { margin: 0; font-size: clamp(48px, 7.4vw, 120px); font-weight: 800; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.cta p { margin: 0 0 26px; font-size: 18px; font-weight: 500; max-width: 42ch; }
@media (max-width: 900px) { .cta .wrap { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { background: var(--navy); color: var(--on-dark-soft); padding: 40px 0 46px; font-size: 14px; }
.foot .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot .sp { flex: 1; }
.foot a { color: var(--on-dark); text-decoration: none; font-weight: 600; }
.foot a:hover { color: #fff; }

/* bottone whatsapp fisso su mobile */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: var(--lime);
  color: var(--navy); display: none; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.wa-float svg { width: 28px; height: 28px; }
@media (max-width: 900px) { .wa-float { display: flex; } }