:root{
  --bg:#f9f7f3; --bianco:#ffffff; --testo:#1c1b19; --grigio:#5f5c56; --riga:#e6e2da;
  --scuro:#1c1b19; --accento:#b5573d; --accento-scuro:#9a4731; --oro:#c9a45c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--testo);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:"Playfair Display",Georgia,serif;font-weight:500;line-height:1.15;letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
.w{width:min(1140px,100% - 48px);margin-inline:auto}
@media(max-width:640px){.w{width:min(1140px,100% - 32px)}}
.centro{text-align:center}
.stretto{max-width:680px;margin-inline:auto}

/* testata */
/* trasparente sopra l'immagine di apertura, solida appena si scorre. Niente backdrop-filter: romperebbe il menù fisso */
.testa{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .25s,border-color .25s,box-shadow .25s;color:#fff}
.testa .marchio .m2{color:#fff;transition:color .25s}
.testa .nav a{color:rgba(255,255,255,.85)}
.testa .nav a:hover,.testa .nav a[aria-current]{color:#fff}
.testa .burger span{background:#fff}
.testa.scrolled,body.menu-aperto .testa{background:var(--bg);border-bottom-color:var(--riga);color:var(--testo);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.testa.scrolled .marchio .m2,body.menu-aperto .marchio .m2{color:var(--testo)}
.testa.scrolled .nav a,body.menu-aperto .nav a{color:var(--grigio)}
.testa.scrolled .nav a:hover,.testa.scrolled .nav a[aria-current],body.menu-aperto .nav a:hover,body.menu-aperto .nav a[aria-current]{color:var(--testo)}
.testa.scrolled .burger span,body.menu-aperto .burger span{background:var(--testo)}
.testa .w{display:flex;align-items:center;gap:32px;height:78px}
.marchio{text-decoration:none;display:flex;flex-direction:column;line-height:1;font-family:"Playfair Display",serif}
.marchio .m1{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accento);font-family:Inter,sans-serif;font-weight:600;margin-bottom:4px}
.marchio .m2{font-size:24px;font-weight:500}
.nav{display:flex;gap:30px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--grigio);padding:6px 0;border-bottom:1.5px solid transparent;transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--testo);border-bottom-color:var(--accento)}
.nav .tel-mobile{display:none}
.prenota{display:inline-flex;align-items:center;gap:8px;background:var(--accento);color:#fff;text-decoration:none;padding:12px 20px;border-radius:4px;font-size:15px;font-weight:600;transition:background .15s}
.prenota:hover{background:var(--accento-scuro)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;height:2px;background:var(--testo);border-radius:2px;transition:.2s}
@media(max-width:960px){
  .testa .w{gap:14px;height:68px}
  .burger{display:flex}
  .prenota{padding:10px 14px}
  .prenota svg{display:none}
  .nav{position:fixed;top:68px;left:0;right:0;bottom:0;z-index:60;background:var(--bg);flex-direction:column;gap:0;padding:12px 24px;transform:translateX(100%);transition:transform .25s;font-size:19px;margin:0;border-top:1px solid var(--riga);overflow-y:auto;color:var(--testo)}
  .nav a{padding:16px 0;border-bottom:1px solid var(--riga)}
  .testa .nav a{color:var(--testo)}
  .nav a:hover,.nav a[aria-current]{border-bottom-color:var(--riga)}
  .nav .tel-mobile{display:block;color:var(--accento);font-weight:600}
  body.menu-aperto .nav{transform:none}
  body.menu-aperto{overflow:hidden}
  body.menu-aperto .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-aperto .burger span:nth-child(2){opacity:0}
  body.menu-aperto .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* immagini e segnaposto */
.img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.segnaposto{background:
  radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.10),transparent 60%),
  linear-gradient(160deg,#2b2823 0%,#1f1d1a 55%,#151412 100%);
  position:relative;min-height:220px}
.segnaposto:after{content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;opacity:.9}
.segnaposto.chiaro{background:linear-gradient(160deg,#ece7de,#e2dcd1)}
.quadro{border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.quadro.alto{aspect-ratio:4/5}
.quadro.largo{aspect-ratio:16/9}

/* apertura */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;margin-top:-78px;padding-top:78px}
@media(max-width:960px){.hero{margin-top:-68px;padding-top:68px;min-height:min(78vh,640px)}}
.hero .sfondo{position:absolute;inset:0}
.hero .sfondo .img{border-radius:0}
.hero .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.35) 0%,rgba(20,18,16,.15) 40%,rgba(20,18,16,.78) 100%)}
.hero .w{position:relative;z-index:2;padding:80px 0 64px}
.hero .occhiello{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:18px}
.hero h1{font-size:clamp(38px,5.6vw,64px);max-width:16ch;margin-bottom:20px;color:#fff}
.hero p.sotto{font-size:19px;max-width:54ch;color:rgba(255,255,255,.88);margin-bottom:30px}
.azioni{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:14px 26px;border-radius:4px;font-weight:600;font-size:16px;transition:.15s}
.btn.pieno{background:var(--accento);color:#fff}
.btn.pieno:hover{background:var(--accento-scuro)}
.btn.bianco{background:#fff;color:var(--testo)}
.btn.bianco:hover{background:#f1ede6}
.btn.linea{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn.linea:hover{background:rgba(255,255,255,.12)}
.btn.scuro{background:var(--scuro);color:#fff}
.btn.scuro:hover{background:var(--accento)}

/* fascia informazioni sotto l'apertura */
.info{background:var(--bianco);border-bottom:1px solid var(--riga)}
.info .w{display:grid;grid-template-columns:repeat(3,1fr)}
.info div{padding:22px 24px 22px 0;display:flex;gap:14px;align-items:center;font-size:15px;color:var(--grigio)}
.info div+div{border-left:1px solid var(--riga);padding-left:24px}
.info b{display:block;color:var(--testo);font-weight:600;font-size:16px}
.info svg{flex:none;color:var(--accento)}
@media(max-width:820px){.info .w{grid-template-columns:1fr}.info div+div{border-left:0;border-top:1px solid var(--riga);padding-left:0}}

/* sezioni */
.sez{padding:96px 0}
.sez.compatta{padding:64px 0}
.sez.bianca{background:var(--bianco)}
.sez.scura{background:var(--scuro);color:#fff}
.sez.scura .grigio{color:rgba(255,255,255,.75)}
.occhiello{font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accento);font-weight:600;margin-bottom:14px}
.sez.scura .occhiello{color:var(--oro)}
h2{font-size:clamp(30px,4vw,44px);margin-bottom:18px}
h3{font-size:24px;margin-bottom:10px}
.intro{font-size:18.5px;color:var(--grigio);max-width:60ch;margin-bottom:0}
.centro .intro{margin-inline:auto}
.grigio{color:var(--grigio)}

.due{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.due.inverti>*:first-child{order:2}
@media(max-width:860px){.due{grid-template-columns:1fr;gap:36px}.due.inverti>*:first-child{order:0}}

.tre{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
@media(max-width:860px){.tre{grid-template-columns:1fr;gap:32px}}
.proposta{text-decoration:none;display:block}
.proposta .quadro{margin-bottom:20px;transition:transform .25s}
.proposta:hover .quadro{transform:translateY(-4px)}
.proposta h3{margin-bottom:6px}
.proposta p{color:var(--grigio);margin-bottom:8px;font-size:16px}
.proposta .prezzo{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accento);font-weight:600}
.proposta .link{font-weight:600;font-size:15px;border-bottom:1.5px solid var(--accento);padding-bottom:2px}

.servizi{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
@media(max-width:960px){.servizi{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.servizi{grid-template-columns:1fr}}
.servizio{background:var(--bianco);border:1px solid var(--riga);border-radius:6px;padding:26px 24px}
.servizio svg{color:var(--accento);margin-bottom:14px}
.servizio b{display:block;font-size:17px;margin-bottom:4px}
.servizio span{color:var(--grigio);font-size:15px;line-height:1.55;display:block}

.elenco{list-style:none;padding:0;margin:20px 0 0}
.elenco li{padding:12px 0 12px 30px;border-top:1px solid var(--riga);position:relative;color:var(--grigio)}
.elenco li:last-child{border-bottom:1px solid var(--riga)}
.elenco li:before{content:"";position:absolute;left:4px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--accento)}
.sez.scura .elenco li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}

.galleria{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:44px;
  aspect-ratio:2/1.5;
}
.galleria>.quadro{aspect-ratio:1;min-width:0;min-height:0}
.galleria>.galleria-grande{
  grid-column:1 / 3;
  grid-row:1 / 4;
  aspect-ratio:auto;
  width:100%;
  height:100%;
}
.galleria>.galleria-grande .img{width:100%;height:100%;object-fit:cover}
.galleria>div:nth-child(2){grid-column:3;grid-row:1}
.galleria>div:nth-child(3){grid-column:4;grid-row:1}
.galleria>div:nth-child(4){grid-column:3;grid-row:2}
.galleria>div:nth-child(5){grid-column:4;grid-row:2}
.galleria>div:nth-child(6){grid-column:3;grid-row:3}
.galleria>div:nth-child(7){grid-column:4;grid-row:3}
@media(max-width:700px){
  .galleria{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    aspect-ratio:auto;
  }
  .galleria>.galleria-grande{
    grid-column:1 / -1;
    grid-row:auto;
    aspect-ratio:4/5;
    height:auto;
  }
  .galleria>div:nth-child(n+2){
    grid-column:auto;
    grid-row:auto;
  }
  .galleria>.quadro:not(.galleria-grande){aspect-ratio:1}
}

.partite{display:grid;gap:10px;margin-top:28px;max-width:720px}
.partita{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:13px 18px}
.partita .ora{font-family:"Playfair Display",serif;font-size:19px;color:var(--oro);font-variant-numeric:tabular-nums}
.partita .lega{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.nota{font-size:15px;color:var(--grigio);margin-top:20px;max-width:60ch}
.sez.scura .nota{color:rgba(255,255,255,.65)}

.orari{list-style:none;padding:0;margin:0;max-width:360px}
.orari li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--riga);font-size:16px}
.orari li.chiuso span:last-child{color:var(--accento);font-weight:600}
.mappa{border:0;width:100%;height:100%;min-height:360px;border-radius:6px;filter:saturate(.85)}

.chiusura{background:var(--accento);color:#fff}
.chiusura .w{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:56px 0;flex-wrap:wrap}
.chiusura h2{color:#fff;margin-bottom:6px;font-size:clamp(26px,3.4vw,36px)}
.chiusura p{margin:0;color:rgba(255,255,255,.85)}

/* piede */
.piede{background:var(--scuro);color:rgba(255,255,255,.7);padding:64px 0 28px;font-size:15px}
.piede a{color:#fff;text-decoration:none}
.piede a:hover{text-decoration:underline}
.colonne{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.colonne{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.colonne{grid-template-columns:1fr}}
.fmarchio{font-family:"Playfair Display",serif;font-size:24px;color:#fff;margin-bottom:12px}
.ftit{color:#fff;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.fnota{font-size:13.5px;color:rgba(255,255,255,.5)}
.legale{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:20px;font-size:13px;color:rgba(255,255,255,.45)}


/* apertura corta per le sottopagine */
.hero.corto{min-height:min(56vh,480px)}
.hero.corto .w{padding:64px 0 48px}
.hero.corto h1{font-size:clamp(34px,4.8vw,54px)}
/* le griglie a tre colonne impostate in pagina tornano a una colonna sul telefono */
@media(max-width:860px){.servizi{grid-template-columns:1fr!important}}

/* ── pagina menù ── */
.menu-indice{position:sticky;top:78px;z-index:30;background:var(--bg);border-bottom:1px solid var(--riga)}
@media(max-width:960px){.menu-indice{top:68px}}
.menu-indice .w{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.menu-indice .w::-webkit-scrollbar{display:none}
.menu-indice a{flex:none;text-decoration:none;font-size:13.5px;font-weight:500;color:var(--grigio);padding:7px 13px;border:1px solid var(--riga);border-radius:99px;background:var(--bianco);white-space:nowrap}
.menu-indice a:hover{color:var(--testo);border-color:var(--testo)}
.menu-corpo{padding-top:56px}
.menu-sez{max-width:820px;margin:0 auto 64px;scroll-margin-top:140px}
.menu-sez h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:8px;padding-bottom:14px;border-bottom:2px solid var(--testo)}
.menu-nota{color:var(--grigio);font-size:16px;margin:14px 0 8px;max-width:64ch}
.voci{list-style:none;padding:0;margin:14px 0 0}
.voci li{display:grid;grid-template-columns:auto 1fr auto;column-gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--riga)}
.voci .nome{font-weight:500;font-size:17px}
.voci .nome sup{color:var(--accento);font-size:11px;margin-left:2px}
.voci .puntini{border-bottom:1px dotted #c9c3b8;transform:translateY(-5px)}
.voci .prezzo{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;color:var(--accento)}
.voci .prezzo small{font-weight:400;color:var(--grigio);font-size:12px;margin-left:3px}
.voci .desc{grid-column:1/-1;color:var(--grigio);font-size:15px;line-height:1.5;margin-top:2px}
.menu-legale{max-width:820px;margin:0 auto;color:var(--grigio);font-size:14px;border-top:1px solid var(--riga);padding-top:22px}
.piatti{list-style:none;padding:0;margin:18px 0 0;columns:2;column-gap:32px}
@media(max-width:700px){.piatti{columns:1}}
.piatti li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--riga);display:flex;justify-content:space-between;gap:14px;font-size:16px}
.piatti li span:last-child{color:var(--accento);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Logo ufficiale Club Ogliastrillo - sorgente PDF cliente 15/09/2026 */
.marchio-logo{display:flex!important;align-items:center;justify-content:center;line-height:1;text-decoration:none;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.45);border-radius:10px;padding:5px 8px;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.marchio-logo img{display:block;width:148px;height:auto;max-height:58px}
.testa.scrolled .marchio-logo,body.menu-aperto .marchio-logo{background:#fff;border-color:var(--riga);box-shadow:none}
@media(max-width:760px){.marchio-logo{padding:4px 6px;border-radius:8px}.marchio-logo img{width:122px;max-height:48px}}
.hero:not(.corto) .velo{background:linear-gradient(180deg,rgba(20,18,16,.58) 0%,rgba(20,18,16,.32) 40%,rgba(20,18,16,.86) 100%)}