/* ============================================================
   Miramonti — pagina di cortesia (sito in manutenzione)
   Scritto per questo progetto. Nessun codice di terze parti.
   Stessa palette e stessi caratteri del sito nuovo 2026.
   ============================================================ */

:root{
  --verde:        #2E3A2E;
  --verde-scuro:  #222B22;
  --verde-notte:  #1A211A;
  --crema:        #E9E1D6;
  --crema-chiara: #F5EFE6;
  --sabbia:       #C9BCA8;
  --ottone:       #A8894F;

  --fondo:        var(--crema-chiara);
  --testo:        var(--verde-notte);
  --tenue:        #6B7368;
  --tenue-chiaro: #A9B0A4;
  --bordo:        rgba(46,58,46,.16);
  --bordo-chiaro: rgba(233,225,214,.22);

  --display:   "Fraunces", "Iowan Old Style", Georgia, serif;
  --testo-font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --raggio: 12px;
  --raggio-piccolo: 7px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--fondo); color:var(--testo);
  font-family:var(--testo-font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.05; letter-spacing:-.015em; margin:0; text-wrap:balance }
h2{ font-size:clamp(30px, 3.6vw, 52px) }
.occhiello{ font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ottone); margin:0 0 18px }
.corpo{ max-width:62ch; color:var(--tenue) }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 28px; border:1px solid currentColor; border-radius:100px;
  font-size:14px; font-weight:500; letter-spacing:.03em;
  transition:background .35s ease, color .35s ease, gap .35s ease;
}
.btn:hover{ gap:17px }
.btn-pieno{ background:var(--verde); color:var(--crema); border-color:var(--verde) }
.btn-pieno:hover{ background:var(--verde-notte); border-color:var(--verde-notte) }
.btn .freccia{ transition:transform .35s ease }
.btn:hover .freccia{ transform:translateX(3px) }
.verde .btn-pieno{ background:var(--crema); color:var(--verde); border-color:var(--crema) }
.verde .btn-pieno:hover{ background:#fff; border-color:#fff }

/* ---------- testata ---------- */
.testata{
  background:var(--verde); color:var(--crema);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--gutter);
}
.marchio img{ height:28px; width:auto }
.testata .azioni{ display:flex; align-items:center; gap:22px; font-size:14px; letter-spacing:.02em }
.testata .azioni .tel{ color:var(--sabbia); transition:color .3s ease }
.testata .azioni .tel:hover{ color:var(--crema) }
.testata .azioni .btn{ padding:11px 20px; font-size:13px }
@media (max-width:560px){
  .testata .azioni .tel{ display:none }
}

/* ---------- apertura: testo su verde, foto a fianco ---------- */
.apertura{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  min-height:calc(100svh - 72px);
}
.verde{ background:var(--verde); color:var(--crema) }
.apertura .pannello{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,8vh,96px) clamp(28px,4.5vw,72px) clamp(56px,8vh,96px) var(--gutter);
}
.apertura .pannello > *{ max-width:58ch }
.apertura h1{ font-size:clamp(42px, 5.8vw, 86px) }
.apertura .corpo{ color:rgba(233,225,214,.84); margin:26px 0 0; font-size:clamp(16px,1.25vw,19px); max-width:48ch }
.apertura .pannello .btn{ margin-top:32px; align-self:flex-start }

/* due colonne solo quando l'email ci sta intera, altrimenti un blocco sotto l'altro */
.recapiti{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:22px 32px;
  margin-top:clamp(36px,5vh,56px); padding-top:28px;
  border-top:1px solid var(--bordo-chiaro);
  max-width:none !important;
}
.recapiti .indirizzo{ grid-column:1 / -1 }
.recapiti h2{
  font-family:var(--testo-font); font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sabbia); margin:0 0 10px;
}
.recapiti .grande{ font-family:var(--display); font-size:clamp(20px,1.7vw,28px); line-height:1.15; display:block; overflow-wrap:anywhere; transition:color .3s ease }
.recapiti .grande.stretto{ font-size:clamp(17px,1.3vw,22px); letter-spacing:-.01em }
.recapiti a.grande:hover{ color:var(--sabbia) }
.recapiti p{ margin:6px 0 0; font-size:14.5px; color:var(--tenue-chiaro) }
.recapiti .indicazioni{ display:inline-block; margin-top:8px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sabbia); border-bottom:1px solid rgba(201,188,168,.5); padding-bottom:3px }
.recapiti .indicazioni:hover{ color:var(--crema); border-color:var(--crema) }

.apertura .foto{ position:relative; overflow:hidden; background:var(--sabbia) }
.apertura .foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

@media (max-width:900px){
  .apertura{ grid-template-columns:1fr; min-height:0 }
  .apertura .foto{ order:-1; aspect-ratio:4/3 }
  .apertura .pannello{ padding:44px var(--gutter) 56px }
}
@media (max-width:560px){
  .recapiti{ grid-template-columns:1fr }
}

/* ---------- prenota: testo + modulo ---------- */
.sezione{ padding-block:clamp(64px, 10vh, 132px) }
.duo{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,88px); align-items:start }
.duo .corpo{ margin-top:22px }
.duo .corpo + .corpo{ margin-top:12px }
.duo .corpo a{ text-decoration:underline; text-underline-offset:3px }
@media (max-width:900px){ .duo{ grid-template-columns:1fr } }

.modulo{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:20px 22px }
.modulo .intero{ grid-column:1 / -1 }
.modulo label{ display:grid; gap:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue) }
.modulo input,.modulo select,.modulo textarea{
  font:inherit; font-size:16px; color:var(--testo);
  background:rgba(255,255,255,.55); border:1px solid var(--bordo); border-radius:var(--raggio-piccolo);
  padding:13px 14px; width:100%; min-height:50px;
}
.modulo textarea{ min-height:130px; resize:vertical }
.modulo input:focus,.modulo select:focus,.modulo textarea:focus{ outline:2px solid var(--ottone); outline-offset:2px }
.modulo fieldset{ border:0; padding:0; margin:0; min-width:0 }
.modulo legend{ padding:0; margin:0 0 10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue) }
.modulo .scelte{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px }
.modulo .scelte label{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  font-size:16px; letter-spacing:0; text-transform:none; color:var(--testo);
  padding:12px 14px; min-height:50px;
  background:rgba(255,255,255,.55); border:1px solid var(--bordo); border-radius:var(--raggio-piccolo);
  transition:border-color .2s ease, background-color .2s ease;
}
.modulo .scelte label:hover{ border-color:var(--ottone) }
.modulo .scelte label:has(:checked){ border-color:var(--ottone); background:rgba(255,255,255,.9) }
.modulo .scelte input{ width:18px; height:18px; min-height:0; padding:0; margin:0; flex:0 0 auto; accent-color:var(--ottone) }
.modulo .trappola{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.modulo .invio{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:6px }
.modulo .nota-invio{ margin:0; font-size:13.5px; color:var(--tenue); max-width:44ch }
.modulo .nota-invio a{ text-decoration:underline; text-underline-offset:3px }
.esito{ margin:24px 0 0; font-size:17px; line-height:1.6; color:var(--testo) }
.esito.errore{ color:#8a2d2d }
@media (max-width:700px){
  .modulo{ grid-template-columns:1fr }
  .modulo .scelte{ grid-template-columns:1fr }
}

/* ---------- pagina di testo (privacy) ---------- */
.testa-pagina{ padding-block:clamp(56px,9vh,110px) clamp(40px,6vh,72px) }
.testa-pagina h1{ font-size:clamp(36px,5.5vw,76px) }
.testa-pagina .sotto{ margin:18px 0 0; font-size:clamp(16px,1.3vw,19px); color:var(--tenue-chiaro); max-width:60ch }
.testa-pagina .torna{ display:inline-block; margin-top:28px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sabbia); border-bottom:1px solid rgba(201,188,168,.5); padding-bottom:3px }
.testa-pagina .torna:hover{ color:var(--crema); border-color:var(--crema) }
.testo-legale{ max-width:72ch }
.testo-legale h2{ font-size:clamp(22px,2vw,30px); margin:44px 0 12px }
.testo-legale h2:first-child{ margin-top:0 }
.testo-legale p{ margin:0 0 14px; color:var(--tenue) }
.testo-legale p strong{ color:var(--testo); font-weight:500 }
.testo-legale address{ font-style:normal; color:var(--testo); line-height:1.7; margin:0 0 14px }
.elenco{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:10px; color:var(--tenue) }
.elenco li{ position:relative; padding-left:22px }
.elenco li::before{ content:""; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--ottone) }
.testo-legale .aggiornamento{ margin-top:44px; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ottone) }

/* ---------- piede ---------- */
.piede{ background:var(--verde-notte); color:var(--crema); padding-block:clamp(56px,8vh,96px) 0 }
.piede a{ transition:color .3s ease }
.piede a:hover{ color:var(--sabbia) }
.piede .apice{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,80px); align-items:end;
  padding-bottom:clamp(40px,6vh,64px); border-bottom:1px solid var(--bordo-chiaro);
}
.piede .payoff{ font-family:var(--display); font-weight:300; font-size:clamp(30px,3.6vw,54px); line-height:1.12; letter-spacing:-.02em; margin:0 }
.piede .payoff em{ font-style:italic; color:var(--sabbia) }
.piede .recapito{ display:grid; gap:6px; justify-items:start }
.piede .recapito .etichetta{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sabbia) }
.piede .telefono{ font-family:var(--display); font-size:clamp(26px,2.7vw,38px); line-height:1.1; letter-spacing:-.01em; white-space:nowrap }
.piede .posta{ font-size:15px; color:var(--tenue-chiaro); word-break:break-word }
.piede .posta:hover{ color:var(--crema) }
.piede address{ font-style:normal; font-size:15px; line-height:1.7; color:var(--tenue-chiaro); margin-top:8px }
.piede .fine{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between; align-items:center;
  padding-block:24px 30px; font-size:12.5px; color:var(--tenue-chiaro);
}
.piede .fine nav{ display:flex; flex-wrap:wrap; gap:8px 18px }
@media (max-width:900px){ .piede .apice{ grid-template-columns:1fr; align-items:start; gap:34px } }
@media (max-width:560px){ .piede .fine{ flex-direction:column; align-items:flex-start } }

/* ---------- accessibilita' ---------- */
.salta{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--crema); color:var(--verde); padding:12px 20px }
.salta:focus{ left:12px; top:12px }
:focus-visible{ outline:2px solid var(--ottone); outline-offset:3px }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important } html{ scroll-behavior:auto } }