/* =========================================================
   Principino — foglio di stile
   Stile: elegante e caldo · mobile-first
   Palette: panna / carbone caldo / terracotta / salvia
   ========================================================= */

:root{
  /* Palette: Ocra & crema */
  --bg:        #F7F1E1;
  --bg-soft:   #EDE1C4;
  --ink:       #33291A;
  --ink-soft:  #6D5F45;
  --line:      #DCC9A2;
  --terra:     #9A6A1B;
  --terra-dk:  #7C5210;
  --red:       #FF3131;
  --sage:      #C0A163;
  --card:      #FFFFFF;
  --header-bg: rgba(247,241,225,.92);
  --ph1:       #EFE6CE;
  --ph2:       #E3D3AE;
  --ph3:       #D0BC8E;
  --tint1:     #FBF6E9;
  --tint2:     #F0E4C9;
  --foot-txt:  #F0E7D4;
  --foot-dim:  #AEA083;
  --foot-line: #463B27;
  --shadow:    0 1px 2px rgba(40,38,32,.05), 0 8px 24px rgba(40,38,32,.07);
  --radius:    14px;
  --maxw:      680px;
  --serif:     'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- lingua: mostra/nascondi ---------- */
html[data-lang="it"] .en{ display:none !important; }
html[data-lang="en"] .it{ display:none !important; }

/* ---------- tipografia ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:800; line-height:1.18; color:var(--ink); margin:0 0 .4em; }
h1{ font-size:2.1rem; letter-spacing:-.2px; }
h2{ font-size:1.6rem; margin-top:.2em; }
h3{ font-size:1.25rem; font-family:var(--sans); font-weight:600; letter-spacing:.2px; }
p{ margin:0 0 1.1em; }
a{ color:var(--terra); text-decoration:none; }
a:hover{ color:var(--terra-dk); text-decoration:underline; }
strong{ font-weight:600; }
.small{ font-size:.9rem; color:var(--ink-soft); }
.center{ text-align:center; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
section{ padding:44px 0; }
section.alt{ background:var(--bg-soft); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.bar{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink); letter-spacing:.3px; }
.brand:hover{ text-decoration:none; color:var(--terra); }
.brand small{ font-family:var(--sans); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:-4px; }
.brand .o{ color:var(--red); }

/* logo */
.logo-hero{ display:block; width:min(340px,82%); margin:0 auto 10px; }
.logo-foot{ display:block; width:210px; max-width:70%; margin:0 0 4px; }

/* toggle lingua */
.lang{ display:flex; gap:2px; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang button{
  font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.06em;
  border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  padding:5px 11px; border-radius:999px; line-height:1;
}
.lang button.on{ background:var(--terra); color:#fff; }

/* ---------- navigazione ---------- */
nav.main{ border-bottom:1px solid var(--line); background:var(--bg); }
nav.main .wrap{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
nav.main .wrap::-webkit-scrollbar{ display:none; }
nav.main a{
  flex:0 0 auto; color:var(--ink-soft); font-size:.86rem; font-weight:600; letter-spacing:.02em;
  padding:14px 12px; border-bottom:2px solid transparent; white-space:nowrap;
}
nav.main a:hover{ color:var(--ink); text-decoration:none; }
nav.main a.active{ color:var(--terra); border-bottom-color:var(--terra); }

/* ---------- hero ---------- */
.hero{ position:relative; }
.hero .photo{ aspect-ratio:4/3; }
.hero-body{ padding:34px 0 8px; }
.eyebrow{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--terra); font-weight:600; margin-bottom:12px; }
.lede{ font-size:1.15rem; color:var(--ink-soft); }

/* ---------- placeholder foto ---------- */
.photo{
  position:relative; width:100%; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,var(--ph1),var(--ph2) 55%,var(--ph3));
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); text-align:center;
}
.photo .tag{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; padding:8px 12px;
  background:rgba(255,255,255,.72); border-radius:999px; font-weight:600;
}
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.photo.tall{ aspect-ratio:3/4; }
.photo.wide{ aspect-ratio:16/10; }
.photo.square{ aspect-ratio:1/1; }

.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gallery .photo{ aspect-ratio:1/1; }
.gallery .span2{ grid-column:span 2; aspect-ratio:16/10; }

/* ---------- card / features ---------- */
.card.tint{ background:linear-gradient(135deg,var(--tint1),var(--tint2)); }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin:0 0 16px;
}
.feature{ display:flex; gap:14px; align-items:flex-start; margin:0 0 20px; }
.feature .ic{
  flex:0 0 40px; height:40px; border-radius:11px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  border:1px solid var(--line);
}
.feature .ic svg{ width:20px; height:20px; stroke:var(--terra); fill:none; stroke-width:1.7; }
.feature h3{ margin:.1em 0 .25em; }
.feature p{ margin:0; color:var(--ink-soft); font-size:.97rem; }

/* elenco spazi */
.rooms{ display:flex; flex-direction:column; gap:14px; }
.room{ display:flex; gap:14px; align-items:center; }
.room .photo{ flex:0 0 110px; width:110px; height:110px; aspect-ratio:auto; }
.room h3{ margin:0 0 3px; }
.room p{ margin:0; font-size:.93rem; color:var(--ink-soft); }

/* ---------- liste ---------- */
ul.clean{ list-style:none; padding:0; margin:0 0 1.1em; }
ul.clean li{ position:relative; padding:0 0 0 26px; margin:0 0 12px; }
ul.clean li::before{
  content:""; position:absolute; left:2px; top:.6em; width:8px; height:8px;
  border-radius:50%; background:var(--terra);
}
ul.rules li::before{ background:var(--sage); }

/* riga info (chiave/valore) */
.kv{ border-top:1px solid var(--line); }
.kv div{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.kv dt{ color:var(--ink-soft); font-weight:600; font-size:.92rem; }
.kv dd{ margin:0; text-align:right; }

/* ---------- callout ---------- */
.note{
  border-left:3px solid var(--sage); background:var(--bg-soft);
  padding:14px 16px; border-radius:0 10px 10px 0; margin:0 0 18px; font-size:.95rem;
}
.note.warn{ border-left-color:var(--terra); }
.note strong{ color:var(--ink); }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:15px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  background:var(--terra); color:#fff; box-shadow:var(--shadow); transition:transform .06s ease, background .15s ease;
}
.btn:hover{ background:var(--terra-dk); color:#fff; text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn.block{ display:flex; width:100%; }
.btn.ghost{ background:transparent; color:var(--terra); border-color:var(--terra); box-shadow:none; }
.btn.ghost:hover{ background:var(--terra); color:#fff; }
.btn.lg{ font-size:1.08rem; padding:17px 30px; }

/* ---------- price cards (prenota) ---------- */
.compare{ display:flex; flex-direction:column; gap:14px; }
.plan{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:20px; box-shadow:var(--shadow); }
.plan.best{ border:2px solid var(--terra); position:relative; }
.plan.best .badge{
  position:absolute; top:-11px; left:20px; background:var(--terra); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
.plan h3{ margin:.2em 0 .2em; font-family:var(--serif); font-size:1.5rem; }
.plan .who{ font-size:.85rem; color:var(--ink-soft); margin-bottom:12px; }

/* ---------- footer ---------- */
footer.site{ background:var(--ink); color:var(--foot-txt); padding:40px 0 34px; }
footer.site a{ color:var(--foot-txt); text-decoration:underline; }
footer.site .brand{ color:#fff; }
footer.site .cols{ display:flex; flex-direction:column; gap:22px; margin-top:18px; }
footer.site h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--foot-dim); margin:0 0 8px; }
footer.site p{ margin:0 0 6px; font-size:.94rem; color:var(--foot-txt2); }
footer.site .legal{ margin-top:26px; padding-top:18px; border-top:1px solid var(--foot-line); font-size:.8rem; color:var(--foot-dim); }

/* ---------- utilita' ---------- */
.stack-lg > * + *{ margin-top:10px; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.pill{ display:inline-block; font-size:.78rem; font-weight:600; color:var(--sage); background:var(--bg-soft); border:1px solid var(--line); padding:3px 10px; border-radius:999px; }

/* ---------- desktop: mantiene la colonna centrata ma con piu' respiro ---------- */
@media (min-width:720px){
  body{ font-size:18px; }
  h1{ font-size:3rem; }
  section{ padding:56px 0; }
  .compare{ flex-direction:row; }
  .compare .plan{ flex:1; }
}

/* ---------- guida passo-passo (quinto letto) ---------- */
.steps{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.step{ margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.step img{ width:100%; display:block; aspect-ratio:3/4; object-fit:cover; }
.step figcaption{ padding:10px 12px 12px; font-size:.85rem; color:var(--ink-soft); line-height:1.45; }
.step figcaption b{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--terra); color:#fff; font-size:.78rem; margin-right:6px; }

/* ---------- form consigli ---------- */
.field{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 12px; }
.field:focus{ outline:2px solid var(--terra); border-color:var(--terra); }
textarea.field{ resize:vertical; }

/* ---------- box emergenze (112) ---------- */
.sos{ background:var(--card); border:2px solid #D93636; border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); }
.sos-head{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.sos-ic{ font-size:1.9rem; line-height:1; }
.sos-num{ font-family:var(--serif); font-weight:800; font-size:4rem; line-height:1;
  color:#D93636; text-align:center; letter-spacing:2px; margin:6px 0 8px; }

/* ---------- pillole download traduzioni ---------- */
.dl-langs{ display:flex; flex-wrap:wrap; gap:8px; }
.pillbtn{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:.95rem; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--terra); border-radius:999px;
  padding:9px 16px; text-decoration:none;
}
.pillbtn:hover{ background:var(--terra); color:#fff; text-decoration:none; }

.pillbtn .flag, .pillbtn img.flag{ width:24px; height:16px; object-fit:cover; border-radius:3px;
  box-shadow:0 0 0 1px rgba(31,50,55,.15); display:block; }

/* ---------- facsimile a video ---------- */
.doc{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 20px; box-shadow:var(--shadow); overflow:hidden; font-size:.92rem; line-height:1.55; }
.doc .wm{ position:absolute; left:50%; white-space:nowrap; pointer-events:none; user-select:none;
  font-family:var(--sans); font-weight:800; font-size:2.1rem; color:rgba(184,64,64,.13);
  transform:translateX(-50%) rotate(-28deg); z-index:1; }
.doc .w1{ top:26%; } .doc .w2{ top:64%; }
.doc > *:not(.wm){ position:relative; z-index:2; }
.doc-banner{ background:var(--bg-soft); border:1px solid var(--terra); border-radius:8px;
  padding:10px 12px; font-size:.82rem; line-height:1.45; margin-bottom:16px; }
.doc-title{ text-align:center; font-size:1.05rem !important; margin-bottom:2px; }
.doc-sub{ text-align:center; font-size:.8rem; color:var(--ink-soft); margin-bottom:14px; }
.doc .decl{ text-align:center; font-weight:800; letter-spacing:.06em; margin:10px 0; }
.doc .chk{ padding-left:20px; text-indent:-20px; margin-bottom:7px; }
.doc-privt{ font-size:.72rem; font-weight:700; margin:14px 0 2px; }
.doc-priv{ font-size:.7rem; line-height:1.4; color:#555; }
.pillbtn{ cursor:pointer; font-family:var(--sans); }
button.pillbtn{ background:var(--bg); }
.pillbtn.on{ background:var(--terra); color:#fff; }

.pillbtn svg{ flex:0 0 auto; }

/* ---------- form richiesta ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
form label{ display:block; font-size:.88rem; font-weight:600; color:var(--ink-soft); margin-bottom:2px; }
form label .small{ font-weight:400; }

/* =========================================================
   Widget Vikey — colori nella gamma del sito
   Il widget legge var(--booking-brand-*) con fallback azzurro:
   ridichiarandole qui vincono le nostre. Le regole .*-cyan-*
   sono classi Tailwind interne al widget: non esistono
   altrove nel sito, quindi non toccano nient'altro.
   ========================================================= */
:root{
  --booking-brand-strong:  #9A6A1B;   /* selezione, giorno di oggi, bordi anteprima */
  --booking-brand-medium:  #F0E4C9;   /* intervallo di notti selezionato */
  --booking-brand-soft:    #FBF6E9;   /* sfondi tenui e hover */

  --booking-calendar-selected-bg:     #9A6A1B;
  --booking-calendar-selected-text:   #FFFFFF;
  --booking-calendar-range-bg:        #F0E4C9;
  --booking-calendar-range-text:      #33291A;
  --booking-calendar-preview-border:  #9A6A1B;
  --booking-calendar-today-accent:    #9A6A1B;
  --booking-calendar-readable-text:   #33291A;
}
/* Le stesse variabili anche sui contenitori del widget: lì le ridichiara
   il widget stesso, quindi lì vanno battute (custom property + !important). */
#vikey-slot,
.vikey-booking-widget-root,
.vikey-booking-card,
.booking-date-range-picker,
.rdrCalendarWrapper{
  --booking-brand-strong:            #9A6A1B !important;
  --booking-brand-medium:            #F0E4C9 !important;
  --booking-brand-soft:              #FBF6E9 !important;
  --booking-calendar-selected-bg:    #9A6A1B !important;
  --booking-calendar-selected-text:  #FFFFFF !important;
  --booking-calendar-range-bg:       #F0E4C9 !important;
  --booking-calendar-range-text:     #33291A !important;
  --booking-calendar-preview-border: #9A6A1B !important;
  --booking-calendar-today-accent:   #9A6A1B !important;
}
.bg-cyan-50,.bg-cyan-100,.bg-sky-50,.bg-sky-100,.bg-blue-50,.bg-blue-100{ background-color:#FBF6E9 !important; }
.bg-cyan-500,.bg-cyan-600,.bg-cyan-700,.bg-sky-500,.bg-sky-600,.bg-sky-700,
.bg-blue-500,.bg-blue-600,.bg-blue-700{ background-color:#9A6A1B !important; color:#fff !important; }
.hover\:bg-cyan-600:hover,.hover\:bg-cyan-700:hover,.hover\:bg-sky-600:hover,
.hover\:bg-sky-700:hover,.hover\:bg-blue-600:hover,.hover\:bg-blue-700:hover{ background-color:#7C5210 !important; }
.text-cyan-500,.text-cyan-600,.text-cyan-700,.text-cyan-800,.text-sky-500,.text-sky-600,
.text-sky-700,.text-blue-500,.text-blue-600,.text-blue-700{ color:#9A6A1B !important; }
.border-cyan-400,.border-cyan-500,.border-cyan-600,.border-sky-500,.border-sky-600,
.border-blue-500,.border-blue-600{ border-color:#9A6A1B !important; }
.fill-cyan-500,.fill-cyan-600,.fill-cyan-700,.fill-sky-600,.fill-blue-600{ fill:#9A6A1B !important; }
.stroke-cyan-500,.stroke-cyan-600,.stroke-sky-600,.stroke-blue-600{ stroke:#9A6A1B !important; }
.ring-cyan-500,.ring-sky-500,.ring-blue-500,
.focus\:ring-cyan-500:focus,.focus\:ring-sky-500:focus,.focus\:ring-blue-500:focus{ --tw-ring-color:#9A6A1B !important; }
.accent-cyan-600,.accent-sky-600,.accent-blue-600{ accent-color:#9A6A1B !important; }