/* ============ HERO ============ */
.hero{position:relative;min-height:860px;background:
  url('../img/home-il-loggiato-dei-serviti-como.webp') center/cover no-repeat #403817;
  color:var(--white);display:flex;flex-direction:column;justify-content:center;padding:150px 0 90px}
.hero h1{font-size:clamp(40px,5vw,72px);font-style:italic;color:var(--white);line-height:1.03}
.booking{margin-top:56px;display:inline-flex;align-items:center;gap:40px;background:var(--white);border-radius:12px;padding:24px 24px 24px 40px;color:var(--green-800);width:max-content;max-width:100%}
.booking .fields{display:flex;gap:48px}
.bk{display:flex;flex-direction:column;gap:4px}
.bk .lbl{font-family:var(--serif);font-size:16px;color:var(--green-800)}
.bk .val{display:flex;align-items:baseline;gap:14px}
.bk .day{font-family:var(--serif);font-size:40px;line-height:1;color:var(--orange)}
.bk .rest{display:flex;flex-direction:column;line-height:1.25}
.bk .rest b{font-weight:500;color:var(--green-800);font-size:16px}
.bk .rest span{font-size:12px;color:var(--olive-600)}
.btn-solid{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--white);border-radius:8px;padding:24px;font-weight:800;font-size:16px;transition:background .18s}
.btn-solid:hover{background:var(--green-600)}
.btn-solid svg{stroke:var(--white)}
.hero-note{position:absolute;right:max(24px,calc((100vw - var(--wrap))/2 + 24px));bottom:120px;display:flex;gap:24px;max-width:450px;align-items:stretch}
.hero-note::before{content:'';width:2px;background:var(--white);flex:0 0 2px}
.hero-note p{font-weight:600;font-size:20px;color:var(--white);line-height:1.35}

/* ============ SEZIONI ============ */
section{padding:0}
.sec{padding:110px 0 0}

/* CAMERE */
.rooms-head{align-items:center;text-align:center;margin:0 auto}
/* carosello full-bleed: card tutte uguali, la prima e l'ultima sbordano dai lati */
.rooms-track{margin-top:56px;display:flex;gap:27px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 calc(50vw - 155px) 8px;scrollbar-width:none}
.rooms-track::-webkit-scrollbar{display:none}
.room{flex:0 0 310px;scroll-snap-align:center;display:flex;flex-direction:column;gap:20px;transition:flex-basis .28s cubic-bezier(.22,1,.36,1)}
.room.is-active{flex-basis:372px}
.room-photo{position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:310/369}
.room-photo img{width:100%;height:100%;object-fit:cover}
.room-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px}
.room-dots i{width:6px;height:6px;border-radius:50%;background:var(--cream-50);opacity:.55}
.room-dots i:first-child{width:8px;height:8px;opacity:1}
.room-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.room-line h3{font-size:26px;color:var(--green);line-height:1.1}
.price-chip{background:var(--white);border:1px solid var(--cream-100);box-shadow:0 2px 10px rgba(6,53,49,.07);border-radius:4px;padding:4px 12px;white-space:nowrap}
.price-chip b{color:var(--green);font-size:16px;font-weight:700}
.price-chip span{font-size:12px;color:var(--green)}
.room p{font-size:14px;color:var(--olive-700)}
.room-more{display:inline-flex;align-items:center;gap:12px;color:var(--green);font-size:14px;font-weight:600;margin-top:2px}
.room-more svg{stroke:var(--green)}
.rooms-nav{display:flex;justify-content:center;gap:16px;margin-top:40px}
.arrow-btn{width:48px;height:48px;border:1.5px solid var(--green);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;transition:background .18s}
.arrow-btn svg{stroke:var(--green);transition:stroke .18s}
.arrow-btn:hover{background:var(--green)}
.arrow-btn:hover svg{stroke:var(--cream-50)}

/* CHI SIAMO + STAFF (griglie a due colonne) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.duo .sec-head{max-width:480px}
.duo p{margin-top:2px}
.collage{position:relative;aspect-ratio:477/547;max-width:520px;justify-self:end;width:100%}
.collage .c-big{position:absolute;left:0;top:26px;width:71.7%;aspect-ratio:342/407;border-radius:13px;object-fit:cover;box-shadow:0 18px 44px rgba(6,53,49,.16)}
.collage .c-card{position:absolute;right:0;top:0;width:41.7%;aspect-ratio:199/217;border-radius:13px;background:var(--white);box-shadow:0 18px 44px rgba(6,53,49,.14);display:flex;align-items:center;justify-content:center}
.collage .c-card img{width:60%;height:auto}
.collage .c-small{position:absolute;right:6%;bottom:0;width:42%;aspect-ratio:201/240;border-radius:13px;object-fit:cover;box-shadow:0 18px 44px rgba(6,53,49,.16)}
.staff-photo{position:relative;border-radius:13px;overflow:hidden;max-width:477px;aspect-ratio:477/612}
.staff-photo img{width:100%;height:100%;object-fit:cover}
.staff-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 24px 22px;color:var(--white);font-weight:700;font-size:18px;background:linear-gradient(transparent,rgba(6,53,49,.65))}
.quote h2{font-size:clamp(32px,3.2vw,46px)}

/* DOVE SIAMO */
.where{margin-top:110px;background:var(--orange);color:var(--white);padding:110px 0}
.where .duo{align-items:center}
.where .eyebrow{color:var(--green)}
.where h2{color:var(--white)}
.where p{color:var(--cream-50)}
.map-wrap{position:relative;justify-self:end;max-width:440px;width:100%}
.map-wrap>img{border-radius:14px;aspect-ratio:440/479;object-fit:cover;width:100%;box-shadow:0 24px 60px rgba(64,56,23,.35)}
.map-wrap>.map-export{aspect-ratio:auto;border-radius:0;box-shadow:none;object-fit:contain}
.map-card{position:absolute;left:-62px;top:38%;width:125px;background:var(--white);border-radius:8px;padding:12px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 16px 40px rgba(64,56,23,.3)}
.map-card img{width:75px}
.map-card svg{display:block}

/* SERVIZI / ACCORDION */
.services .duo{grid-template-columns:380px 1fr;gap:100px;align-items:start}
.acc-list{display:flex;flex-direction:column;gap:6px;padding-top:40px}
.acc{border:1.5px solid var(--olive-700);background:transparent;border-radius:8px;overflow:hidden}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 24px 16px 20px;text-align:left}
.acc-head .l{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--olive-700)}
.acc-head .l svg{stroke:var(--orange)}
.acc-head>svg{stroke:var(--olive-700);transition:transform .25s}
.acc.open .acc-head>svg{transform:rotate(180deg)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc.open .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden;min-height:0}
/* niente padding verticale sul figlio della griglia: impedirebbe il collasso a 0 */
.acc-body-in{padding:0 24px 0 50px;font-size:15px;color:var(--olive-700)}
.acc-body-in>*:first-child{margin-top:2px}
.acc-body-in>*:last-child{margin-bottom:18px}
.acc-body-in ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.acc-body-in li{padding-left:16px;position:relative}
.acc-body-in li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.acc-body-in .note{margin-top:10px;font-size:13.5px;color:var(--olive-600);font-style:italic}
.acc-body-in .directions-home-note{color:var(--green);font-style:normal;font-weight:800}
.acc-body-in .directions-home-link{margin-top:14px;padding:9px 16px;font-size:14px}

/* RECENSIONI */
.reviews{margin-top:110px;position:relative;background:
  url('../img/recensioni-il-loggiato-dei-serviti-como.webp') center/cover no-repeat #403817;
  color:var(--white);padding:120px 0 200px}
.reviews .eyebrow,.reviews h2{color:var(--white)}
.reviews .sec-head{text-align:center;align-items:center;margin:0 auto}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:80px;margin:80px auto 0;max-width:960px}
.rev{display:flex;flex-direction:column;gap:16px}
.rev .qmark{font-family:var(--serif);font-size:56px;line-height:.6;color:var(--cream-50);height:28px}
.rev p{font-size:14px;color:var(--cream-50);line-height:1.6}
.rev-stars{color:var(--gold);font-size:13px;letter-spacing:3px;line-height:1}
.rev-stars .off{opacity:.35}
.rev cite{font-family:var(--serif);font-style:normal;font-size:18px;letter-spacing:.06em}
.reviews-nav{display:none}

body.home .reviews{background-image:url('../img/recensioni-il-loggiato-dei-serviti-como.webp')}

/* FOOTER */
.site-foot{position:relative;background:var(--green);color:var(--white);padding:200px 0 0}
.foot-logo-card{position:absolute;left:50%;top:-108px;transform:translateX(-50%);width:199px;height:217px;background:var(--white);border-radius:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 44px rgba(6,53,49,.25)}
.foot-logo-card img{width:119px}
.foot-cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:56px;padding-bottom:90px}
.foot-cols h4{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--white);margin-bottom:12px}
.foot-cols p,.foot-cols a{font-size:14px;color:var(--white);line-height:1.6}
.foot-cols a:hover{text-decoration:underline}
.socials{display:flex;gap:13px}
.socials a{width:40px;height:40px;background:var(--green-600);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .18s}
.socials a:hover{background:var(--white)}
.socials svg{fill:var(--white);transition:fill .18s}
.socials a:hover svg{fill:var(--green)}
.foot-cols .ico-line{display:flex;gap:10px;align-items:flex-start}
.foot-cols .ico-line svg{flex:0 0 auto;margin-top:2px}
.foot-bar{background:var(--green-600);padding:16px 0}
.foot-bar .wrap{display:flex;justify-content:space-between;gap:24px;font-size:12px;color:var(--white)}
.foot-bar a:hover{text-decoration:underline}