/* Zamboni56 – "Grand Hotel" (prova stile Wes Anderson). Si appoggia a style.css senza cambiarlo. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Libre+Caslon+Text:ital@0;1&display=swap');
:root{
  --cream:#f7eedc; --pink:#f2b9c4; --pink2:#e98fa3; --plum:#4b2342; --plum2:#6b3460;
  --mustard:#e2a72e; --mint:#a9d6c3; --blue:#9fc5d8; --rust:#c45a3c; --ink:#3b2833;
  --bg:var(--cream); --bg2:#efe3cb; --card:#fffaf0; --line:#e0cfae;
  --text:var(--ink); --muted:#7c6870; --accent:var(--plum); --accent-ink:var(--cream);
  --radius:0; --font:"Jost",Futura,"Century Gothic",system-ui,sans-serif;
  --serif:"Libre Caslon Text",Georgia,serif;
}
body{background:var(--cream)}
::selection{background:var(--pink)}

/* titoli centrati e simmetrici, maiuscoletto spaziato */
h1,h2,h3{font-weight:600;letter-spacing:.02em}
h1,h2{text-transform:uppercase;letter-spacing:.06em;line-height:1.08}
h1{font-size:clamp(34px,6vw,64px)}
em{color:var(--rust);font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400}
p.lead{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:19px}
.eyebrow{color:var(--rust);font-weight:600;letter-spacing:.32em;font-size:11px}
.eyebrow::before,.eyebrow::after{content:"✦";margin:0 .8em;color:var(--mustard)}
.hero,.page-hero{text-align:center;background:none}
.hero h1,.page-hero h1,.hero p.lead,.page-hero p.lead{margin-left:auto;margin-right:auto}
.hero .btns,.page-hero .btns{justify-content:center}
section > .wrap > .eyebrow:first-child{display:table;margin:0 auto 14px}
section > .wrap > .eyebrow:first-child + h2{text-align:center}
section > .wrap > .eyebrow:first-child + h2 + p.lead{text-align:center;margin-left:auto;margin-right:auto}

/* header: insegna dell'hotel con tendina a righe */
header.site{background:var(--plum);border-bottom:0;backdrop-filter:none}
header.site::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:radial-gradient(circle at 50% 0,var(--plum) 9px,transparent 10px) 0 0/20px 14px repeat-x}
nav.main a{color:#e8d6dc;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--pink)}
nav.main a.cta{background:var(--pink);color:var(--plum);border-radius:0;letter-spacing:.14em}
nav.main a.cta::before{content:"🛎 ";display:inline-block}
nav.main a.cta:hover::before{animation:w-ring .5s ease 2}
.burger{color:var(--cream);border-color:var(--plum2);border-radius:0}
@media(max-width:820px){nav.main{background:var(--plum)}}

/* registro dell'ospite: ascensore + timbri */
.lobby{position:sticky;top:64px;z-index:49;background:var(--cream);border-bottom:1px solid var(--line);padding-top:14px}
.lobby .wrap{display:flex;align-items:center;justify-content:center;gap:28px;height:58px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lobby b{color:var(--plum);font-weight:600}
.dial{width:64px;height:36px;position:relative;cursor:pointer;flex:none}
.dial svg{display:block}
.dial .needle{transform-origin:32px 32px;transition:transform .25s ease-out}
.stamps{display:flex;gap:4px}
.stamps i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);display:inline-block}
.stamps i.on{background:var(--rust);border-color:var(--rust)}
@media(max-width:620px){.lobby .wrap{gap:14px;font-size:9px;letter-spacing:.14em}.lobby .room{display:none}}

/* pulsanti da hotel: rettangolari, filetto doppio */
.btn{border-radius:0;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;padding:15px 26px;transition:transform .2s,background .2s}
.btn.primary{background:var(--plum);color:var(--cream);box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--plum)}
.btn.primary:hover{background:var(--plum2)}
.btn.ghost{border:1px solid var(--plum);color:var(--plum);background:transparent}
.btn.ghost:hover{background:var(--pink);color:var(--plum);border-color:var(--plum)}
.wa-float{border-radius:0;background:var(--mustard);color:var(--ink);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--mustard),0 10px 20px rgba(75,35,66,.2)}

/* schede = chiavi delle camere, ognuna col suo colore pastello */
.card{background:var(--card);border:1px solid var(--line);text-align:center;padding:34px 26px 28px;position:relative;box-shadow:inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--line)}
.card .num{display:inline-block;color:var(--plum);font-size:11px;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--plum);border-radius:999px;padding:6px 14px;margin-bottom:16px}
.card .num::before{content:"Camera ";}
.card ul{text-align:left}
.card ul li:before{border-radius:0;transform:rotate(45deg);background:var(--mustard)}
a.card{transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
a.card:hover{transform:rotate(-1.2deg) translateY(-4px);border-color:var(--line)}
.grid > a.card:nth-child(4n+1),body > main a.card.w-c1{background:#fde7ea}
.grid > a.card:nth-child(4n+2),a.card.w-c2{background:#e3f1ea}
.grid > a.card:nth-child(4n+3),a.card.w-c3{background:#e5eff5}
a.card.w-c4{background:#fbefd2}
.grid > a.card:nth-child(4n+1){box-shadow:inset 0 0 0 6px #fde7ea,inset 0 0 0 7px var(--pink2)}
.grid > a.card:nth-child(4n+2),a.card.w-c2{box-shadow:inset 0 0 0 6px #e3f1ea,inset 0 0 0 7px #79b9a0}
.grid > a.card:nth-child(4n+3),a.card.w-c3{box-shadow:inset 0 0 0 6px #e5eff5,inset 0 0 0 7px #74a7c0}
a.card.w-c1{box-shadow:inset 0 0 0 6px #fde7ea,inset 0 0 0 7px var(--pink2)}
a.card.w-c4{box-shadow:inset 0 0 0 6px #fbefd2,inset 0 0 0 7px var(--mustard)}
.more{color:var(--rust);text-transform:uppercase;letter-spacing:.16em;font-size:11px}

/* foto = cartoline con cornice e didascalia da museo */
.ph{border-radius:0;background:var(--card);border:1px solid var(--line)}
.ph.wide{position:relative;overflow:visible;border:0!important;padding:14px!important;background:#fffaf0;box-shadow:0 1px 0 var(--line),0 18px 30px -18px rgba(75,35,66,.35);aspect-ratio:auto}
.ph.wide img{aspect-ratio:16/9}
.ph.wide::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.w-cap{display:block;text-align:center;font-family:var(--serif);font-style:italic;color:var(--muted);font-size:14px;margin-top:12px}
.w-cap b{font-family:var(--font);font-style:normal;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:10px;color:var(--rust);margin-right:8px}
.w-cap .alt{display:block;color:var(--plum);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.ph:hover .w-cap .alt{opacity:1;transform:none}
@media (hover:none){.w-cap .alt{opacity:1;transform:none}}
.w-stamp{position:absolute;right:-12px;top:-14px;width:78px;height:78px;border-radius:50%;border:2px dashed var(--rust);color:var(--rust);display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-weight:600;background:rgba(247,238,220,.92);transform:rotate(12deg);z-index:2}

/* formule: grado di complicazione */
.plan{background:var(--card);border:1px solid var(--line);text-align:center;box-shadow:inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--line)}
.plan.hot{background:#fde7ea;border-color:var(--pink2);box-shadow:inset 0 0 0 6px #fde7ea,inset 0 0 0 7px var(--pink2)}
.plan .tag{color:var(--rust);letter-spacing:.24em}
.plan h3{text-transform:uppercase;letter-spacing:.1em;font-size:20px}
.plan .sub{font-family:var(--serif);font-style:italic}
.plan td{text-align:left}
.plan td:last-child{color:var(--plum);font-weight:600}
.plan ul{text-align:left}
.plan ul li:before{color:var(--mustard)}
.w-diff{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:2px 0 14px}
.w-diff span{color:var(--rust);letter-spacing:.3em;margin:0 6px}
.w-diff.easy span{color:#4f9c7f}

/* tabelle, faq, calendario, form */
table.simple,details,.cal{border-radius:0}
table.simple td.p{color:var(--plum)}
summary::after{color:var(--rust)}
form input,form select,form textarea{border-radius:0;background:#fffaf0}
form input:focus,form select:focus,form textarea:focus{border-color:var(--plum)}
.cal-head button{border-radius:0}
.cal-grid .d{border-radius:0}
.cal-grid .d.free{border-color:#79b9a0;background:#e3f1ea}
.cal-grid .d.busy{background:#f3d9d3;color:#b98478}
.alert.ok{background:#e3f1ea;border-color:#79b9a0;color:#2f6e57}

/* banda finale: insegna con tendina */
.band{background:var(--pink);color:var(--plum);border-radius:0;position:relative;padding-top:64px;box-shadow:inset 0 0 0 8px var(--pink),inset 0 0 0 9px var(--plum)}
.band::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:repeating-linear-gradient(90deg,var(--plum) 0 30px,var(--cream) 30px 60px);}
.band::after{content:"";position:absolute;left:0;right:0;top:30px;height:14px;background:radial-gradient(circle at 15px 0,var(--plum) 14px,transparent 15px) 0 0/60px 14px repeat-x,radial-gradient(circle at 45px 0,var(--cream) 14px,transparent 15px) 0 0/60px 14px repeat-x}
.band h2{color:var(--plum)}
.band .btn.dark{background:var(--plum);color:var(--cream)}
.band .btn.outline{border-color:var(--plum);color:var(--plum)}

/* footer */
footer.site{background:var(--plum);color:#d8c3cc;border-top:0;margin-top:60px}
footer.site h4{color:var(--pink);letter-spacing:.24em}
footer.site a:hover{color:var(--pink)}
.copy{border-top-color:var(--plum2)}

/* carrellata laterale da casa delle bambole */
.w-in{opacity:0;transform:translateX(-28px)}
.w-in.r{transform:translateX(28px)}
.w-in.on{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}

/* telegramma all'arrivo su un piano nuovo */
.w-tel{position:fixed;left:50%;bottom:22px;z-index:80;width:min(420px,calc(100% - 32px));transform:translate(-50%,160%) rotate(-1deg);background:#fbf3df;border:1px solid #d9c49a;box-shadow:0 14px 30px rgba(75,35,66,.25);padding:16px 20px 18px;font-family:"Courier New",Courier,monospace;color:var(--ink);transition:transform .6s cubic-bezier(.2,1.2,.4,1)}
.w-tel.show{transform:translate(-50%,0) rotate(-1deg)}
.w-tel .h{display:flex;justify-content:space-between;font-family:var(--font);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--rust);border-bottom:1px solid #d9c49a;padding-bottom:8px;margin-bottom:10px}
.w-tel p{font-size:13px;line-height:1.55;text-transform:uppercase}

@keyframes w-ring{25%{transform:rotate(-18deg)}75%{transform:rotate(18deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .w-in{opacity:1;transform:none}
}

/* cartoline: immagine sopra, didascalia sotto */
.ph.w-post{flex-direction:column;align-items:stretch;justify-content:flex-start;aspect-ratio:auto;padding:14px;overflow:visible;position:relative;background:#fffaf0;border:0;box-shadow:0 1px 0 var(--line),0 18px 30px -18px rgba(75,35,66,.35)}
.ph.w-post img{aspect-ratio:4/3;height:auto}
.ph.wide.w-post img{aspect-ratio:16/9}
.ph.w-post::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}

/* logo Grand Hotel */
header.site .logo img{height:42px}
footer.site .logo img{height:54px}
