:root{
  color-scheme: light;
  --muro:#B4473A; --ocra:#E0A54C; --salvia:#7C9A5C; --insegna:#4B2317;
  --calce:#FBF8F5; --pietra:#E9E1D8; --testo:#2E1A12; --muto:#7A6358;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
html,body{margin:0}
body{font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;background:var(--calce);color:var(--testo);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--insegna)}
h2{font-weight:300;font-size:clamp(1.7rem,4.2vw,2.3rem);line-height:1.15;color:var(--insegna);margin:0 0 18px;letter-spacing:.01em}
h3{font-weight:600;font-size:1.05rem;color:var(--insegna);margin:0 0 10px}
.salta{position:absolute;left:-9999px;background:#fff;padding:10px 16px;z-index:20}
.salta:focus{left:12px;top:12px}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:18px;
  padding:10px 20px;background:rgba(251,248,245,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pietra)}
.marchio{font-weight:600;font-size:.95rem;color:var(--insegna);text-decoration:none;white-space:nowrap}
.voci{display:flex;gap:18px;margin-left:auto}
.voci a{font-size:.9rem;font-weight:500;color:var(--muto);text-decoration:none}
.voci a:hover{color:var(--muro)}
.lingua{display:flex;background:#fff;border:1px solid var(--pietra);border-radius:999px;padding:3px}
.lingua button{border:0;background:none;font:600 .8rem Montserrat,sans-serif;color:var(--insegna);padding:5px 11px;border-radius:999px;cursor:pointer}
.lingua button[aria-pressed="true"]{background:var(--insegna);color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;min-height:70vh;max-height:620px;display:flex;align-items:flex-end;
  background:url('assets/facciata.jpg') center 55%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(75,35,23,0) 30%,rgba(75,35,23,.86) 100%)}
.insegna{position:relative;z-index:1;width:100%;max-width:880px;margin:0 auto;padding:0 24px 42px;color:#fff}
.insegna small{display:block;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;margin-bottom:10px;opacity:.92}
.insegna h1{margin:0;font-weight:300;font-size:clamp(2.2rem,7.5vw,3.8rem);line-height:1.03;letter-spacing:.02em}
.insegna p{max-width:46ch;margin:14px 0 24px;font-size:1.05rem;opacity:.95}
.azioni{display:flex;flex-wrap:wrap;gap:12px}
.fasce{height:22px;background:repeating-linear-gradient(180deg,var(--ocra) 0 7px,var(--muro) 7px 11px)}

/* ---------- bottoni ---------- */
.bottone{display:inline-block;border-radius:12px;font:600 1rem Montserrat,sans-serif;
  padding:15px 24px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .2s,color .2s}
.bottone.primario{background:var(--muro);color:#fff}
.bottone.primario:hover{background:#9c3a2f}
.bottone.chiaro{background:rgba(255,255,255,.92);color:var(--insegna);border-color:var(--pietra)}
.bottone.chiaro:hover{background:#fff;border-color:var(--salvia)}
.bottone.piccolo{padding:11px 18px;font-size:.92rem;background:transparent;border-color:var(--salvia);color:#4F6B37}
.bottone.piccolo:hover{background:#EEF3E8}
.bottone.disattivo{opacity:.55;pointer-events:none}
:focus-visible{outline:3px solid var(--ocra);outline-offset:2px}

/* ---------- sezioni ---------- */
main{max-width:880px;margin:0 auto;padding:0 24px}
section{padding:58px 0;border-bottom:1px solid var(--pietra)}
section:last-child{border-bottom:0}
section.scuro{border-bottom:0}
.scuro{background:#F3EDE6;margin:0 -24px;padding:58px 24px;border-radius:0}
.occhiello{color:var(--muto);max-width:60ch;margin:-6px 0 26px}
.benvenuti p{max-width:62ch}
.punti{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.punti li{background:#fff;border:1px solid var(--pietra);border-radius:999px;padding:8px 15px;font-size:.88rem;font-weight:500}

/* ---------- voto ---------- */
.voto{display:grid;grid-template-columns:auto 1fr;gap:18px 20px;align-items:start}
.votoNum{background:var(--insegna);color:#fff;font-size:1.6rem;font-weight:600;border-radius:14px 14px 14px 4px;padding:14px 18px;line-height:1}
.votoTesto strong{display:block;font-size:.95rem;color:var(--insegna)}
.citazione{font-size:1.15rem;font-weight:300;font-style:italic;margin:10px 0 4px;max-width:46ch}
.firma{font-size:.85rem;color:var(--muto)}
.categorie{grid-column:1/-1;list-style:none;padding:0;margin:6px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.categorie li{background:#fff;border:1px solid var(--pietra);border-radius:12px;padding:12px 14px}
.categorie b{display:block;font-size:1.2rem;color:var(--muro);font-weight:600}
.categorie span{font-size:.82rem;color:var(--muto)}

/* ---------- camere ---------- */
.camere{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.camera{background:#fff;border:1px solid var(--pietra);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.camera h3{margin:6px 0 0}
.camera p{margin:0;color:var(--muto);font-size:.93rem}
.camera .prezzo{margin:6px 0 12px;color:var(--testo)}
.camera .bottone{align-self:flex-start;margin-top:auto}
.foto.vuota{background:repeating-linear-gradient(135deg,#F1E8DE 0 10px,#EAE0D4 10px 20px);
  border-radius:10px;min-height:150px;display:flex;align-items:center;justify-content:center;
  color:var(--muto);font-size:.85rem;font-style:italic;text-align:center;padding:10px;margin:0}
.sotto{margin-top:32px}
.dotazioni{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 18px}
.dotazioni li{position:relative;padding-left:24px;font-size:.95rem}
.dotazioni li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--salvia)}

/* ---------- regole / distanze ---------- */
.due{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;margin-top:26px}
.regole,.distanze{list-style:none;padding:0;margin:0}
.regole li,.distanze li{padding:9px 0;border-bottom:1px dashed #DCCFC1;font-size:.94rem}
.regole li:last-child,.distanze li:last-child{border-bottom:0}
.regole b{color:var(--insegna);margin-right:8px}
.distanze li{display:flex;justify-content:space-between;gap:16px}
.distanze b{color:var(--muro);white-space:nowrap}
.indirizzo{font-size:1.12rem;font-weight:500;color:var(--insegna);margin:0 0 10px}
#dove p{max-width:60ch}
#dove .bottone{margin-top:6px}

/* ---------- galleria ---------- */
.griglia-foto{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.griglia-foto figure{margin:0}
.griglia-foto .grande{grid-column:span 4;border-radius:14px;overflow:hidden}
.griglia-foto .grande img{width:100%;height:clamp(220px,34vw,360px);object-fit:cover}
.nota{color:var(--muto);font-size:.86rem;margin-top:16px}
code{background:#F1E8DE;border-radius:5px;padding:1px 5px;font-size:.85em}

/* ---------- contatti ---------- */
.contatti{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 30px}
.riquadro{background:#fff;border-left:5px solid var(--ocra);border-radius:0 12px 12px 0;padding:20px 22px}
.riquadro p{color:var(--muto);font-size:.94rem;margin:0 0 14px;max-width:52ch}
#instagram p,#contatti p{max-width:60ch}

/* ---------- da compilare ---------- */
.compilare{background:#FFF3B0;border-bottom:1px dashed #C9A227;padding:1px 5px;border-radius:3px}

/* ---------- footer ---------- */
footer{background:var(--insegna);color:#F3E7DF;padding:34px 24px;text-align:center;font-size:.9rem}
footer p{margin:4px 0}
footer a{color:#F3E7DF}
.codici{opacity:.72;font-size:.82rem;letter-spacing:.02em}

@media (max-width:760px){
  .voci{display:none}
  .lingua{margin-left:auto}
  .camere,.due{grid-template-columns:1fr}
  .griglia-foto{grid-template-columns:1fr 1fr}
  .griglia-foto .grande{grid-column:span 2}
  .voto{grid-template-columns:1fr}
  .azioni .bottone,.contatti .bottone{flex:1 1 100%;text-align:center}
}