/* B&B Dimora Cirillo */

:root{
  --calce:#f8f2e7;
  --calce2:#f0e5d1;
  --carta:#fffaf1;
  --inchiostro:#13283b;
  --testo:#2d3640;
  --muto:#6a737c;
  --golfo:#1d6a86;
  --turchese:#2f9db0;
  --turchese-d:#1b7d8f;
  --salvia:#6b9a7d;
  --senape:#dba02a;
  --malva:#b9798c;
  --pompeiano:#b2442c;
  --wa:#169a4c;
  --serif:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{
  margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.55;
  color:var(--testo);background:var(--calce);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd,figure,blockquote{margin-top:0}
:focus-visible{outline:3px solid var(--turchese);outline-offset:3px;border-radius:6px}

/* ---------- testata ---------- */
.top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 14px;background:rgba(248,242,231,.93);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid rgba(19,40,59,.08);
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--inchiostro);min-width:0}
.brand__mark{width:30px;height:30px;flex:none}
.brand__name{font-family:var(--serif);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;white-space:nowrap}
.menu{display:none}
.top__right{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:1px solid rgba(19,40,59,.22);border-radius:999px;padding:2px}
.lang button{
  border:0;background:none;font:700 .78rem/1 var(--sans);padding:0 11px;min-height:38px;border-radius:999px;
  color:var(--inchiostro);cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--inchiostro);color:#fff}

/* ---------- pulsanti ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:54px;padding:0 1.4em;
  border-radius:999px;font:700 1rem/1.15 var(--sans);text-decoration:none;text-align:center;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
}
.btn:active{transform:scale(.98)}
.btn svg{width:1.35em;height:1.35em;flex:none}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 10px 22px -10px rgba(22,154,76,.8)}
.btn--wa:hover{background:#12843f}
.btn--ghost{border-color:var(--inchiostro);color:var(--inchiostro);background:transparent}
.btn--ghost:hover{background:var(--inchiostro);color:#fff}
.btn--light{background:#fff;color:var(--inchiostro)}
.btn--navy{background:var(--inchiostro);color:#fff}
.btn--sm{min-height:48px;font-size:.95rem;padding:0 1.15em}
.btn--xs{min-height:40px;width:40px;padding:0;font-size:.88rem}
.btn--xs span{display:none}
.btn--lg{min-height:62px;font-size:1.08rem;padding:0 1.8em}
.link{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--inchiostro);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--turchese)}
.link svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- tipografia ---------- */
.eyebrow{font:700 .74rem/1.2 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--pompeiano);margin:0 0 .85rem}
.eyebrow--light{color:#f2c680}
h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(2.7rem,11.6vw,5.6rem);line-height:1;
  letter-spacing:-.022em;margin:0 0 .35em;color:var(--inchiostro);font-variation-settings:"opsz" 144;
}
h1 em{font-style:italic;font-weight:400;color:var(--turchese-d)}
h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.95rem,7.7vw,3.15rem);line-height:1.08;
  letter-spacing:-.016em;color:var(--inchiostro);margin:0 0 .55em;
}
h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;line-height:1.15;color:var(--inchiostro);margin:0}
.lead{font-size:1.14rem;line-height:1.5;margin:0 0 1.2rem;color:#35424e;max-width:34em}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;gap:24px;padding:18px 18px 40px;max-width:1280px;margin:0 auto}
.hero__media{order:-1}
.collage{display:grid;grid-template-columns:1.16fr 1fr;gap:10px;height:clamp(300px,88vw,390px)}
.collage__col{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0}
.arco{
  position:relative;margin:0;overflow:hidden;background:var(--calce2);
  border-radius:50% 50% 16px 16px / 30% 30% 16px 16px;
}
.arco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.c1,.c2{min-height:0}
.tondo{margin:0;width:70%;aspect-ratio:1;justify-self:end;border-radius:50%;overflow:hidden;background:var(--calce2);box-shadow:0 0 0 5px var(--calce)}
.tondo{position:relative}
.tondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.score{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--inchiostro);margin:0 0 1.2rem;font-size:.95rem;line-height:1.3}
.score b{
  display:grid;place-items:center;width:48px;height:48px;border-radius:13px 13px 13px 2px;
  background:var(--inchiostro);color:#fff;font:700 1.3rem/1 var(--sans);flex:none;
}
.score strong{font-weight:700}
.cta-row{display:grid;gap:10px}

@keyframes sale{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero__text>*{animation:sale .8s cubic-bezier(.2,.7,.2,1) both}
  .hero__text>*:nth-child(2){animation-delay:.08s}
  .hero__text>*:nth-child(3){animation-delay:.16s}
  .hero__text>*:nth-child(4){animation-delay:.24s}
  .hero__text>*:nth-child(5){animation-delay:.32s}
  .c1{animation:sale .9s cubic-bezier(.2,.7,.2,1) both}
  .c2{animation:sale .9s .12s cubic-bezier(.2,.7,.2,1) both}
  .c3{animation:sale .9s .24s cubic-bezier(.2,.7,.2,1) both}
}

/* ---------- striscia dei voti ---------- */
.strip{background:var(--carta);border-block:1px solid rgba(19,40,59,.08);padding:26px 18px 28px}
.strip__title{text-align:center;font:700 .74rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muto);margin:0 0 16px}
.strip__list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:880px}
.strip__list li{background:#fff;border-radius:18px;padding:14px 10px 12px;text-align:center;box-shadow:0 8px 22px -16px rgba(19,40,59,.5)}
.strip__list b{display:block;font:600 2.4rem/1 var(--serif);color:var(--inchiostro);margin-bottom:4px}
.strip__list span{font-size:.88rem;color:var(--muto);font-weight:500}

/* ---------- sezioni ---------- */
.sec{padding:58px 0}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
.sec__intro{max-width:36em;color:#3b4751}
.sec--navy{background:var(--inchiostro);color:#d3dfea}
.sec--navy h2{color:#fff}
.sec--sand{background:var(--calce2)}
.spectrum{display:flex;width:118px;height:6px;border-radius:99px;overflow:hidden;margin-bottom:24px}
.spectrum i{flex:1;background:var(--c)}

/* ---------- camere ---------- */
.rooms{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 20px;margin-top:22px;
  scroll-padding-left:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rooms::-webkit-scrollbar{display:none}
.room{
  --on:#fff;flex:0 0 80%;max-width:340px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--carta);border-radius:24px;overflow:hidden;border-top:6px solid var(--c);
  box-shadow:0 18px 36px -22px rgba(19,40,59,.55);
}
.room:nth-child(4){--on:#2b2108}
.room__photo{position:relative;aspect-ratio:4/5;background:var(--calce2)}
.room--solo .room__photo{aspect-ratio:.69}
.room__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s ease}
.room__tag{
  position:absolute;left:12px;bottom:12px;background:var(--c);color:var(--on);
  font:700 .78rem/1 var(--sans);padding:9px 13px;border-radius:999px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
}
.room__thumbs{display:flex;gap:8px;padding:12px 16px 0}
.room__thumbs button{
  width:50px;height:50px;padding:0;border:2px solid transparent;border-radius:11px;overflow:hidden;
  background:var(--calce2);cursor:pointer;opacity:.72;transition:opacity .2s,border-color .2s;
}
.room__thumbs button.on{border-color:var(--c);opacity:1}
.room__thumbs img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.room__body{display:flex;flex-direction:column;gap:9px;padding:14px 16px 18px;flex:1}
.room__body p{margin:0 0 6px;font-size:.95rem;line-height:1.45;color:#46525c}
.room__body .btn{margin-top:auto}
.swipe{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 26px;color:var(--muto);font-size:.84rem;font-weight:500;transition:opacity .3s}
.swipe svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:spinge 1.6s ease-in-out infinite}
.swipe.hide{opacity:0}
@keyframes spinge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.inall{
  list-style:none;margin:0;padding:16px 18px;background:#fff;border-radius:20px;display:flex;flex-wrap:wrap;gap:8px 18px;
  border:1px dashed rgba(19,40,59,.25);
}
.inall li{font-size:.93rem;display:flex;align-items:center;gap:8px;line-height:1.3}
.inall li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--turchese);flex:none}
.inall .inall__t{width:100%;font-weight:700;color:var(--inchiostro)}
.inall .inall__t::before{display:none}

/* ---------- posizione ---------- */
.pos{display:grid;gap:30px}
.pos__head p:last-child{margin-bottom:0}
.pos__facts{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:center}
.pos__facts dl{margin:0;display:grid;gap:20px}
.pos__facts dt{font:600 2.3rem/1 var(--serif);color:#fff}
.pos__facts dd{margin:6px 0 0;font-size:.92rem;line-height:1.35;color:#b4c6d6}
.pos__photo{aspect-ratio:3/5;width:100%}
.pos__more{display:grid;gap:18px;align-content:start}
.pos__more p{margin:0}
.pos__more b{color:#fff}

.quote{
  --c:var(--turchese);position:relative;margin:0;padding:20px 20px 18px 22px;background:var(--carta);
  border-radius:20px;border-left:6px solid var(--c);box-shadow:0 16px 30px -24px rgba(19,40,59,.6);
}
.quote p{margin:0 0 .6em;font:400 1.1rem/1.45 var(--serif);color:var(--inchiostro);font-variation-settings:"opsz" 20}
.quote footer{font-size:.8rem;color:var(--muto);font-weight:500}
.quote--dark{background:rgba(255,255,255,.07);border-left-color:#f2c680;box-shadow:none}
.quote--dark p{color:#fff}
.quote--dark footer{color:#a9bdce}
.quote--chip{padding:14px 16px 14px 18px;border-radius:16px;box-shadow:none;background:var(--carta);border-left-color:var(--senape)}
.quote--chip p{margin:0;font-size:1rem}

/* ---------- colazione ---------- */
.colaz{display:grid;gap:30px}
.chips{display:grid;gap:10px;margin-top:20px}
.colaz__mosaic{column-count:2;column-gap:10px}
.colaz__mosaic .tile{break-inside:avoid;margin-bottom:10px;-webkit-column-break-inside:avoid}
.tile{margin:0;border-radius:20px;overflow:hidden;background:var(--calce);position:relative}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.t34{aspect-ratio:3/4}
.t11{aspect-ratio:1}

/* ---------- casa ---------- */
.casa{display:grid;gap:30px}
.casa__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kw{grid-column:1/-1;aspect-ratio:2/1}
.k4{grid-row:span 2}
.k2,.k3{aspect-ratio:4/3}
.casa .tile{border-radius:20px}
.zoom img{inset:auto;left:var(--l);top:var(--t);width:var(--w);height:auto;max-width:none}
.casa figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 8px 10px;text-align:center;color:#fff;
  font:700 .76rem/1.2 var(--sans);letter-spacing:.02em;background:linear-gradient(transparent,rgba(19,40,59,.74));
}

/* ---------- recensioni ---------- */
.rev{display:grid;gap:22px;margin-top:26px}
.rev__score{background:var(--carta);border-radius:26px;padding:22px 20px 24px;box-shadow:0 18px 34px -26px rgba(19,40,59,.6)}
.bigscore{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.bigscore b{font:600 4.2rem/1 var(--serif);color:var(--inchiostro);letter-spacing:-.03em}
.bigscore span{font-size:1rem;line-height:1.35}
.bigscore strong{font-size:1.2rem;color:var(--inchiostro)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bars li{display:grid;grid-template-columns:7.4em 1fr 2.3em;gap:10px;align-items:center;font-size:.92rem}
.bars i{display:block;height:9px;background:rgba(19,40,59,.1);border-radius:99px;overflow:hidden}
.bars u{
  display:block;height:100%;width:calc(var(--v) * 10%);border-radius:99px;text-decoration:none;
  background:linear-gradient(90deg,var(--turchese),var(--golfo));transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.js .rev__score:not(.in) .bars u{transform:scaleX(0)}
.bars b{text-align:right;font-weight:700;color:var(--inchiostro)}
.rev__quotes{display:grid;gap:14px}
.more{margin:26px 0 0}

/* ---------- libro degli ospiti ---------- */
.sec--book{background:#eadcc0;overflow:hidden;padding:58px 0 40px}
.book{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 26px 38px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-padding-left:26px;
}
.book::-webkit-scrollbar{display:none}
.note{
  flex:0 0 74%;max-width:300px;margin:0;scroll-snap-align:start;background:#fff;padding:10px 10px 14px;border-radius:5px;
  box-shadow:0 18px 30px -16px rgba(60,38,8,.6);transform:rotate(var(--r,0deg));
}
.note img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:2px;filter:brightness(1.2) contrast(1.08)}
.quote--book{max-width:620px;margin:6px auto 0;--c:var(--pompeiano)}
.quote--book p{font-style:italic}

/* ---------- comodità ---------- */
.comfort{margin-top:26px}
.amen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.amen li{
  display:flex;flex-direction:column;gap:8px;background:var(--carta);border-radius:18px;padding:14px 14px 15px;
  font-size:.93rem;line-height:1.35;font-weight:600;color:var(--inchiostro);box-shadow:0 12px 24px -22px rgba(19,40,59,.7);
}
.amen li.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px}
.amen svg{width:28px;height:28px;color:var(--golfo);flex:none}
.bath{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bath .tile{aspect-ratio:4/3}

/* ---------- invito finale ---------- */
.cta{background:linear-gradient(165deg,#13283b 0%,#1a4560 100%);color:#d3dfea;padding:60px 0;text-align:center;position:relative;overflow:hidden}
.cta::before,.cta::after{
  content:"";position:absolute;border:2px solid rgba(255,255,255,.09);border-radius:999px 999px 0 0;border-bottom:0;pointer-events:none;
}
.cta::before{width:300px;height:360px;left:-120px;bottom:-40px}
.cta::after{width:220px;height:280px;right:-80px;bottom:-30px}
.cta__in{position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{max-width:30em;margin-inline:auto}
.cta .btn{width:100%;max-width:420px}
.cta .quote{max-width:560px;margin:34px auto 0;text-align:left}

/* ---------- piè di pagina ---------- */
.foot{background:#0d1d2c;color:#a9bccb;padding:40px 0 calc(36px + env(safe-area-inset-bottom));font-size:.93rem}
.foot p{margin:0 0 .5em}
.foot a{color:#fff}
.foot__name{font:600 1.35rem/1.2 var(--serif);color:#fff}
.foot__links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:18px 0}
.foot__links a{font-weight:600}
.foot__small{font-size:.78rem;line-height:1.5;opacity:.85;border-top:1px solid rgba(255,255,255,.13);padding-top:16px;margin-top:18px}

/* ---------- comparsa allo scorrimento ---------- */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .swipe svg{animation:none}
}

/* ---------- telefono largo / tablet ---------- */
@media (min-width:520px){
  .btn--xs{width:auto;padding:0 1.05em}
  .btn--xs span{display:inline}
  .top{padding:10px 20px}
}

/* ---------- computer ---------- */
@media (min-width:900px){
  body{font-size:1.125rem}
  .top{padding:12px 32px;gap:24px}
  .menu{display:flex;gap:30px;margin-left:auto}
  .menu a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--inchiostro);padding:8px 0;border-bottom:2px solid transparent}
  .menu a:hover{border-color:var(--turchese)}
  .foot{padding-bottom:44px}

  .hero{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:center;
    padding:56px 40px 84px;min-height:min(720px,calc(100vh - 110px));
  }
  .hero__media{order:0}
  .collage{height:clamp(500px,66vh,640px);gap:14px}
  .collage__col{gap:14px}
  .cta-row{display:flex;flex-wrap:wrap;gap:12px}
  .lead{font-size:1.25rem}

  .strip{padding:34px 40px}
  .strip__list{grid-template-columns:repeat(4,1fr);gap:16px}
  .strip__list b{font-size:2.9rem}

  .sec{padding:100px 0}
  .wrap{padding:0 40px}
  .rooms{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:20px;overflow:visible;max-width:1280px;
    margin:30px auto 0;padding:8px 40px 24px;
  }
  .room{max-width:none}
  .swipe{display:none}

  .pos{grid-template-columns:1.05fr 1fr;grid-template-areas:"head facts" "more facts";gap:34px 90px;align-items:start}
  .pos__head{grid-area:head}
  .pos__facts{grid-area:facts;grid-template-columns:1fr 1fr;gap:28px;align-self:center}
  .pos__facts dt{font-size:2.8rem}
  .pos__more{grid-area:more}

  .colaz{grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
  .colaz__mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-count:auto;gap:14px}
  .colaz__mosaic .tile{aspect-ratio:3/4;margin-bottom:0}

  .casa{grid-template-columns:.85fr 1.25fr;gap:70px;align-items:center}
  .casa__grid{gap:16px}

  .rev{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:start}
  .rev__score{position:sticky;top:96px}
  .rev__quotes{gap:18px}
  .quote p{font-size:1.18rem}

  .book{justify-content:center;overflow:visible;padding:40px 40px 40px}
  .note{flex:0 0 176px;max-width:none}

  .comfort{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:stretch}
  .amen{gap:14px}
  .amen li,.amen li.wide{grid-column:auto;flex-direction:row;align-items:center;gap:16px;padding:0 20px;min-height:84px;font-size:1rem}
  .bath{margin-top:0;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:14px}
  .bath .tile{aspect-ratio:auto}

  .cta{padding:104px 0}
}