/* La tua isola — un solo foglio di stile, mobile-first.
   La sola media query è a 800px: non aggiungerne altre. */
:root {
  --abisso: #0d2b3e;
  --acqua: #1c6b86;
  --tufo: #efe6d3;
  --zolfo: #d98b1f;
  --carta: #fbf8f2;
  --inchiostro: #14212b;
  --grigio: #5c6a72;
  --serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --misura: 68ch;
  --raggio: 3px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  padding-bottom: 4.6rem;
  background: var(--carta);
  color: var(--inchiostro);
  font: 17px/1.6 var(--sans);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--acqua); }
a:focus-visible { outline: 3px solid var(--zolfo); outline-offset: 3px; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.2rem; }

.salta {
  position: absolute;
  top: .5rem;
  left: -100vw;
  z-index: 100;
  padding: .65rem 1rem;
  background: var(--abisso);
  color: var(--carta);
}
.salta:focus { left: .5rem; }

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.1rem;
  background: var(--abisso);
}
.marchio {
  color: var(--tufo);
  font: 1.1rem var(--serif);
  letter-spacing: .02em;
  text-decoration: none;
}
.testata nav { display: flex; gap: .8rem; font-size: .83rem; }
.testata nav a { color: var(--tufo); text-decoration: none; }
.testata nav a:hover { text-decoration: underline; }

main > section, .contatti { padding: 2.9rem 1.1rem; }
main > section > h2, .contatti h2 {
  border-left: 3px solid var(--zolfo);
  padding-left: .7rem;
}
.occhiello, .nota { max-width: var(--misura); }
.occhiello { color: var(--grigio); }
.nota { color: var(--grigio); font-size: .9rem; }

.hero { padding: 2.9rem 1.1rem !important; background: var(--abisso); color: var(--carta); }
.hero-contenuto { display: grid; gap: 1.8rem; max-width: 1080px; margin: 0 auto; }
.hero-testo { color: var(--carta); }
.hero-copertina { justify-self: center; width: min(17rem, 76vw); }
.hero-copertina img { width: 100%; border: .35rem solid var(--tufo); border-radius: 50%; }
.sopratitolo {
  margin: 0 0 .4rem;
  color: var(--zolfo);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero .occhiello { color: var(--tufo); font-size: .97rem; }
.azioni { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.1rem; }
.bottone {
  display: inline-block;
  padding: .72em 1.2em;
  border: 1px solid var(--zolfo);
  border-radius: var(--raggio);
  background: var(--zolfo);
  color: var(--inchiostro);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
}
.bottone:hover, .bottone:focus-visible { background: var(--tufo); }
.bottone.secondario { background: transparent; color: var(--carta); }
.bottone.secondario:hover, .bottone.secondario:focus-visible { background: var(--tufo); color: var(--inchiostro); }
.bottone.piccolo { padding: .6em .9em; font-size: .86rem; }

.flotta { background: var(--carta); }
.sottotitolo { margin-top: 1.8rem; color: var(--acqua); }
.griglia { display: grid; gap: 1.3rem; margin: 1rem 0 1.5rem; }
.galleria { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 1rem 0 1.5rem; }
.galleria picture { overflow: hidden; border-radius: var(--raggio); background: var(--tufo); }
.galleria img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.scheda {
  overflow: hidden;
  border: 1px solid var(--tufo);
  border-radius: var(--raggio);
  background: var(--carta);
}
.scheda img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scheda-corpo { padding: 1.1rem; }
.dati { margin: .7rem 0; padding: 0; list-style: none; font-size: .92rem; }
.dati li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dotted var(--tufo); }
.dati li > span:first-child { color: var(--grigio); }
.dotazioni { color: var(--grigio); font-size: .86rem; }
.manca {
  display: inline-block;
  padding: .04em .25em;
  border: 1px dashed var(--zolfo);
  background: var(--tufo);
  color: var(--inchiostro);
  font-size: .82rem;
  font-style: normal;
}

.servizi { background: var(--tufo); }
.elenco-servizi { display: grid; gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.elenco-servizi li { padding: 1rem; border-left: 3px solid var(--acqua); background: var(--carta); }
.elenco-servizi h3 { margin-bottom: .25rem; }
.elenco-servizi p { margin: 0; }

.passi { background: var(--abisso); color: var(--tufo); }
.passi h2 { border-color: var(--zolfo); }
.passi ol { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: passaggi; }
.passi li { position: relative; margin-bottom: 1.4rem; padding-left: 2.7rem; counter-increment: passaggi; }
.passi li::before {
  position: absolute;
  top: .05rem;
  left: 0;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--zolfo);
  color: var(--inchiostro);
  content: counter(passaggi);
  font-size: .88rem;
  font-weight: 700;
}
.passi p { margin: 0; }

.domande details { border-bottom: 1px solid var(--tufo); }
.domande summary { padding: .95rem 0; cursor: pointer; font-family: var(--serif); font-size: 1.08rem; }
.domande details p { max-width: var(--misura); margin: 0 0 1rem; color: var(--grigio); }

.partner { background: var(--tufo); }
.partner-card { max-width: var(--misura); overflow: hidden; padding: 1.2rem; border-left: 3px solid var(--zolfo); background: var(--carta); }
.partner-card p { margin: .4rem 0 1rem; }
.collage-partner { display: grid; grid-template-columns: 1.25fr 1fr; gap: .45rem; margin: -1.2rem -1.2rem 1.2rem; }
.collage-partner picture { overflow: hidden; background: var(--tufo); }
.collage-partner img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.collage-partner .foto-partner-principale { grid-row: span 2; }
.tipo { color: var(--grigio); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }

.contatti { background: var(--abisso); color: var(--tufo); }
.contatti a { color: var(--zolfo); }
.contatti address { margin: 1.2rem 0; font-style: normal; line-height: 1.8; }
.orari { font-size: .92rem; }
.legale { margin-top: 2rem; color: var(--tufo); font-size: .78rem; }

.wa-fisso {
  position: fixed;
  right: .7rem;
  bottom: .7rem;
  left: .7rem;
  z-index: 10;
  padding: .85em;
  border: 1px solid var(--zolfo);
  border-radius: var(--raggio);
  background: var(--zolfo);
  color: var(--inchiostro);
  box-shadow: 0 .25rem .75rem var(--grigio);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.wa-fisso:hover, .wa-fisso:focus-visible { background: var(--tufo); }

/* Pagina provvisoria per la root dell'hosting: coming_soon.html */
.coming-soon {
  display: grid;
  min-height: 100vh;
  align-content: center;
  gap: 1.5rem;
  padding: 2rem 1.1rem;
  background: var(--abisso);
  color: var(--tufo);
  text-align: center;
}
.coming-soon picture { justify-self: center; width: min(18rem, 70vw); }
.coming-soon img { width: 100%; border-radius: 50%; }
.coming-soon .sopratitolo { margin-bottom: .8rem; }
.coming-soon p { max-width: 42ch; margin: 0 auto 1rem; }
.coming-soon .bottone { margin-top: .5rem; }
.coming-soon .nota { color: var(--tufo); font-size: .84rem; }

@media print {
  .manca, .wa-fisso, .salta { display: none; }
  body { padding-bottom: 0; }
}

@media (min-width: 800px) {
  body { padding-bottom: 0; font-size: 18px; }
  h1 { font-size: 3.6rem; }
  h2 { font-size: 2.15rem; }
  main > section, .contatti { padding: 4.6rem 2rem; }
  main > section > *, .contatti > * { max-width: 1080px; margin-right: auto; margin-left: auto; }
  .hero { padding: 5.2rem 2rem !important; }
  .hero-contenuto { grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); align-items: center; }
  .hero-copertina { width: 100%; }
  .griglia { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .galleria { grid-template-columns: repeat(4, 1fr); }
  .elenco-servizi { grid-template-columns: repeat(3, 1fr); }
  .passi ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .wa-fisso { right: 1.5rem; bottom: 1.5rem; left: auto; padding: .85em 1.3em; }
  .coming-soon picture { width: 21rem; }
}