/* ============================================================
   Antica Dimora Mascarella — palette derived from the apartment:
   lime-plaster vault, cotto floor, petrol-blue tiles, black steel.
   ============================================================ */
:root{
  --bg:#EDEAE4;
  --bg-raised:#F6F4EF;
  --bg-sunk:#E4E0D8;
  --fg:#1D1A17;
  --fg-muted:#5D584F;
  --fg-faint:#8A857A;
  --rule:rgba(29,26,23,.16);
  --rule-soft:rgba(29,26,23,.09);
  --accent:#10556C;
  --accent-hover:#0B3F51;
  --on-accent:#F6F4EF;
  --cotto:#B45B33;
  --deep:#14181B;
  --on-deep:#E8E4DC;
  --on-deep-muted:#9DA6A9;
  --shadow:0 1px 2px rgba(29,26,23,.06), 0 8px 28px rgba(29,26,23,.07);
  --maxw:1220px;
  --gutter:clamp(1rem, 4vw, 3.25rem);
  --serif:"Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:"Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181B;
    --bg-raised:#1C2227;
    --bg-sunk:#0F1316;
    --fg:#E8E4DC;
    --fg-muted:#A7AEB0;
    --fg-faint:#7C8386;
    --rule:rgba(232,228,220,.18);
    --rule-soft:rgba(232,228,220,.10);
    --accent:#5AA8C0;
    --accent-hover:#7DC0D4;
    --on-accent:#0C2831;
    --cotto:#D2794D;
    --deep:#0C1013;
    --on-deep:#E8E4DC;
    --on-deep-muted:#99A2A5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 32px rgba(0,0,0,.34);
  }
}
:root[data-theme="dark"]{
  --bg:#14181B; --bg-raised:#1C2227; --bg-sunk:#0F1316;
  --fg:#E8E4DC; --fg-muted:#A7AEB0; --fg-faint:#7C8386;
  --rule:rgba(232,228,220,.18); --rule-soft:rgba(232,228,220,.10);
  --accent:#5AA8C0; --accent-hover:#7DC0D4; --on-accent:#0C2831;
  --cotto:#D2794D; --deep:#0C1013; --on-deep:#E8E4DC; --on-deep-muted:#99A2A5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 32px rgba(0,0,0,.34);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.62;
  font-synthesis-weight:none; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.005em}
h1{font-size:clamp(2.5rem,6.4vw,4.9rem); line-height:.98; font-weight:700}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem); line-height:1.08}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.2}
p{margin:0}
.lede{font-size:clamp(1.1rem,1.6vw,1.28rem); line-height:1.55; color:var(--fg-muted)}
.prose{display:flex; flex-direction:column; gap:1.05em; max-width:60ch; color:var(--fg-muted)}
.prose strong{color:var(--fg); font-weight:600}
.eyebrow{
  font-size:.7rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.eyebrow--deep{color:#8FC6D8}
.num{font-variant-numeric:tabular-nums}

/* ---------- arch mark (the apartment's quarter-round window) ---------- */
.arch{display:block; overflow:visible}
.arch path{fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:square; vector-effect:non-scaling-stroke}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.head-in{display:flex; align-items:center; gap:clamp(.75rem,2vw,2rem); min-height:66px; padding-block:.55rem}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; min-width:0}
.brand .arch{width:22px; height:22px; color:var(--accent); flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1.08; min-width:0}
.brand-name{font-family:var(--serif); font-weight:600; font-size:1.02rem; white-space:nowrap}
.brand-sub{font-size:.61rem; letter-spacing:.17em; text-transform:uppercase; color:var(--fg-faint)}
.nav{display:flex; gap:clamp(.9rem,1.5vw,1.35rem)}
.nav a{font-size:.83rem; white-space:nowrap; text-decoration:none; color:var(--fg-muted); padding-block:.4rem; border-bottom:1px solid transparent}
.nav a:hover{color:var(--fg); border-bottom-color:var(--cotto)}
.langs{display:flex; gap:1px; background:var(--rule); border-radius:999px; padding:2px; flex:none}
.langs button{
  font:inherit; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border:0; background:transparent; color:var(--fg-muted); cursor:pointer;
  padding:.3rem .52rem; border-radius:999px; line-height:1;
}
.langs button[aria-pressed="true"]{background:var(--bg-raised); color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.12)}
@media (max-width:1180px){ .nav{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; padding:.72rem 1.15rem; border-radius:2px; border:1px solid transparent;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--accent); color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{border-color:var(--rule); color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg); background:var(--bg-raised)}
.btn--light{background:var(--on-deep); color:var(--deep)}
.btn--light:hover{background:#fff}
.btn--outline-light{border-color:rgba(232,228,220,.42); color:var(--on-deep)}
.btn--outline-light:hover{border-color:var(--on-deep); background:rgba(232,228,220,.08)}
.btn--sm{padding:.55rem .9rem; font-size:.79rem}

/* pulsante WhatsApp nell'intestazione: testo su schermi larghi, solo fumetto su stretti */
.btn--wa{gap:.42rem}
.wa-ico{width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round}
@media (max-width:860px){
  .btn--wa{padding-inline:.7rem; gap:.34rem}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(1.5rem,4vw,3rem)}
.hero-frame{position:relative}
.hero-img{
  width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--bg-sunk);
  border-radius:2px;
}
.hero-plate{
  background:var(--bg); padding:clamp(1.25rem,3vw,2.2rem) clamp(1.25rem,3vw,2.4rem) 0 0;
  margin-top:-2.5rem; max-width:min(100%, 46rem); position:relative;
}
.hero-plate .eyebrow{margin-bottom:.85rem}
.hero h1{margin-bottom:.85rem}
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.1rem;
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--rule);
  font-size:.87rem; color:var(--fg-muted);
}
.hero-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--cotto); flex:none}
.stars{display:inline-flex; align-items:center; gap:.4rem; color:var(--fg); font-weight:500}
.stars svg{width:13px; height:13px; fill:var(--cotto)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem}
@media (max-width:640px){ .hero-plate{margin-top:-1.25rem; padding-right:0} }

/* ---------- section scaffolding ---------- */
section{scroll-margin-top:80px}
.sec{padding-block:clamp(3.75rem,8vw,7rem)}
.sec--sunk{background:var(--bg-sunk)}
.sec-head{
  display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:clamp(1rem,3vw,3rem);
  align-items:start; padding-top:1.4rem; border-top:1px solid var(--cotto);
  margin-bottom:clamp(2rem,4vw,3.25rem);
}
.sec-head h2{max-width:22ch}
.sec-head .sec-intro{margin-top:.9rem; max-width:56ch; color:var(--fg-muted); font-size:1rem}
@media (max-width:760px){
  .sec-head{grid-template-columns:1fr; gap:.9rem}
}

/* ---------- la dimora ---------- */
.dimora-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
.dimora-grid figure{margin:0}
.dimora-grid img{aspect-ratio:1/1; object-fit:cover; width:100%; border-radius:2px; background:var(--bg-sunk)}
.traits{display:grid; gap:0; margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--rule)}
.trait{display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:clamp(1rem,3vw,2.5rem); padding-block:1.35rem; border-bottom:1px solid var(--rule)}
.trait h3{font-size:1.12rem}
.trait p{color:var(--fg-muted); font-size:.96rem; max-width:58ch}
@media (max-width:860px){
  .dimora-grid{grid-template-columns:1fr}
  .trait{grid-template-columns:1fr; gap:.35rem}
}

/* ---------- il palazzo (dark band) ---------- */
.band{background:var(--deep); color:var(--on-deep); border-block:1px solid rgba(232,228,220,.14)}
.band .lede, .band p{color:var(--on-deep-muted)}
.band-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.band h2{color:var(--on-deep)}
.band .arch-big{width:clamp(56px,9vw,96px); height:auto; color:var(--cotto); margin-bottom:1.6rem}
.band-facts{display:flex; flex-wrap:wrap; gap:.5rem 2.2rem; margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(232,228,220,.18)}
.band-fact{display:flex; flex-direction:column; gap:.15rem}
.band-fact b{font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1; color:var(--on-deep)}
.band-fact span{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-muted)}
.band-pics{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.band-pics img{width:100%; object-fit:cover; border-radius:2px; background:#222}
.band-pics img:first-child{grid-row:span 2; height:100%; min-height:0; aspect-ratio:auto}
.band-pics img:nth-child(2){aspect-ratio:4/3}
.band-pics img:nth-child(3){aspect-ratio:4/3}
@media (max-width:860px){ .band-grid{grid-template-columns:1fr} }

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(6,1fr); gap:.7rem clamp(.5rem,1vw,.8rem); align-items:start}
.gal figure{margin:0; position:relative; grid-column:span 2}
.gal figure.w3{grid-column:span 3}
.gal figure.w6{grid-column:span 6}
.gal img{width:100%; height:auto; object-fit:cover; border-radius:2px; background:var(--bg-sunk)}
.gal .r43{aspect-ratio:4/3}
.gal .r34{aspect-ratio:3/4}
.gal .r11{aspect-ratio:1/1}
.gal .r169{aspect-ratio:16/9}
.gal figcaption{
  margin-top:.55rem; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-faint);
}
@media (max-width:900px){ .gal{grid-template-columns:repeat(4,1fr)} .gal figure.w3{grid-column:span 2} .gal figure.w6{grid-column:span 4} }
@media (max-width:560px){ .gal{grid-template-columns:repeat(2,1fr)} .gal figure{grid-column:span 1} .gal figure.w3, .gal figure.w6{grid-column:span 2} .gal figcaption{font-size:.68rem} }

/* ---------- comfort ---------- */
.amen{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr)); gap:clamp(1.5rem,3vw,2.5rem)}
.amen section{display:flex; flex-direction:column; gap:.85rem}
.amen h3{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--accent); padding-bottom:.7rem; border-bottom:1px solid var(--rule)}
.amen ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.42rem}
.amen li{font-size:.93rem; color:var(--fg-muted); position:relative; padding-left:1rem}
.amen li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--cotto)}

/* ---------- posizione ---------- */
.loc-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start}
.scale{display:flex; flex-direction:column; gap:0; margin:0; border-top:1px solid var(--rule)}
.scale-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(4.5rem,7.5rem) 3.6rem;
  align-items:center; gap:.9rem; padding-block:.72rem; border-bottom:1px solid var(--rule-soft);
}
.scale-row dt{font-size:.94rem}
.scale-bar{height:3px; background:var(--rule-soft); position:relative; border-radius:2px}
.scale-bar i{position:absolute; inset:0 auto 0 0; background:var(--cotto); border-radius:2px; display:block}
.scale-row dd{margin:0; font-size:.86rem; color:var(--fg-muted); text-align:right; font-variant-numeric:tabular-nums}
.scale-legend{margin-top:.85rem; font-size:.76rem; color:var(--fg-faint)}
.nearby{display:flex; flex-direction:column; gap:1.1rem; margin-top:0}
.nearby li{list-style:none}
.nearby ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.05rem}
.nearby b{display:block; font-weight:600; font-size:.97rem}
.nearby span{display:block; font-size:.89rem; color:var(--fg-muted); margin-top:.1rem}
.note{
  margin-top:1.75rem; padding:1.1rem 1.25rem; background:var(--bg-raised);
  border-left:2px solid var(--accent); border-radius:0 2px 2px 0;
  font-size:.9rem; color:var(--fg-muted);
}
.note b{color:var(--fg)}
@media (max-width:860px){ .loc-grid{grid-template-columns:1fr} }

/* ---------- recensioni ---------- */
.rev-grid{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start}
.scores{display:flex; flex-direction:column; gap:.7rem; margin:0}
.score{display:grid; grid-template-columns:minmax(0,1fr) minmax(3rem,5.5rem) 2.2rem; align-items:center; gap:.65rem}
.score dt{font-size:.85rem; color:var(--fg-muted)}
.meter{height:3px; background:var(--rule-soft); border-radius:2px; position:relative}
.meter i{position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:2px; display:block}
.score dd{margin:0; font-size:.85rem; text-align:right; font-variant-numeric:tabular-nums}
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr)); gap:clamp(1.25rem,3vw,2rem)}
.quote{display:flex; flex-direction:column; gap:.85rem; padding-top:1.1rem; border-top:1px solid var(--cotto)}
.quote blockquote{margin:0; font-family:var(--serif); font-size:1.14rem; line-height:1.38; font-weight:400}
.quote figcaption{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint)}

/* ---------- info ---------- */
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); gap:0 clamp(1.5rem,3vw,2.5rem)}
.info div{padding-block:1.1rem; border-top:1px solid var(--rule)}
.info dt{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:.3rem}
.info dd{margin:0; font-size:.96rem}

/* ---------- host ---------- */
.host-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem); align-items:center}
.host-grid img{aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:2px; background:var(--bg-sunk)}
@media (max-width:760px){ .host-grid{grid-template-columns:1fr} }

/* ---------- final cta ---------- */
.final{background:var(--deep); color:var(--on-deep); text-align:center; padding-block:clamp(3.5rem,7vw,6rem)}
.final h2{color:var(--on-deep); max-width:18ch; margin-inline:auto}
.final p{color:var(--on-deep-muted); max-width:46ch; margin-inline:auto; margin-top:1rem}
.final .hero-cta{justify-content:center; margin-top:2rem}

/* ---------- footer ---------- */
.site-foot{padding-block:2.75rem; font-size:.83rem; color:var(--fg-muted)}
.foot-in{display:flex; flex-wrap:wrap; gap:1.25rem 2.5rem; align-items:flex-start; justify-content:space-between}
.foot-in a{color:var(--fg-muted)}
.foot-in a:hover{color:var(--accent)}
.foot-col{display:flex; flex-direction:column; gap:.3rem}
.foot-col b{font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--fg)}
.cin{font-variant-numeric:tabular-nums; letter-spacing:.03em; font-size:.78rem; color:var(--fg-faint)}

/* ============================================================
   Guida rapida (guida.html)
   ============================================================ */
.guide-hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem)}
.guide-hero h1{font-size:clamp(2.1rem,5vw,3.6rem)}
.guide-hero .lede{margin-top:1rem; max-width:52ch}
.back{display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); text-decoration:none; margin-bottom:1.5rem}
.back:hover{color:var(--accent)}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr)); gap:clamp(1.25rem,3vw,2rem); margin-top:clamp(2.5rem,5vw,4rem)}
.step{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,6.5rem); gap:1.25rem;
  align-items:start; padding-top:1.15rem; border-top:1px solid var(--rule);
}
.step-body{display:flex; flex-direction:column; gap:.7rem; min-width:0}
.step-n{
  display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem;
  border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums; flex:none;
}
.step-head{display:flex; align-items:center; gap:.7rem}
.step h3{font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:0}
.step ul,.step ol{margin:0; padding-left:1.05rem; display:flex; flex-direction:column; gap:.38rem}
.step li{font-size:.92rem; color:var(--fg-muted)}
.step li b{color:var(--fg); font-weight:600}
.step img{width:100%; border-radius:2px; background:var(--bg-sunk); border:1px solid var(--rule-soft)}
.tag{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.04em;
  padding:.08rem .4rem; border-radius:2px; color:#fff;
}
.tag--red{background:#B03A2E}
.tag--blue{background:#1B4F8A}
@media (max-width:560px){ .step{grid-template-columns:1fr; gap:1rem} .step img{max-width:15rem} }

.help{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem;
  background:var(--deep); color:var(--on-deep); padding:clamp(1.4rem,3vw,2rem); border-radius:2px;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.help p{color:var(--on-deep-muted); font-size:.92rem; max-width:42ch; margin-top:.4rem}
.help h2{color:var(--on-deep); font-size:clamp(1.4rem,2.4vw,1.9rem)}
.help .phone{font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); font-weight:600; color:var(--on-deep); text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums}
.help .phone:hover{color:#8FC6D8}


/* ---------- small screens: keep everything inside the viewport ---------- */
@media (max-width:760px){
  .rev-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .head-in{gap:.55rem; min-height:58px}
  .brand .arch{display:none}
  .brand-sub{display:none}
  .brand-name{white-space:normal; font-size:.92rem; line-height:1.08}
  .langs button{padding:.28rem .42rem}
  .site-head .btn--sm{padding:.5rem .7rem; font-size:.74rem}
}
/* sotto i 560px l'intestazione passa a due righe: il nome sopra, i comandi sotto */
@media (max-width:560px){
  .head-in{flex-wrap:wrap; row-gap:.55rem; padding-block:.7rem; align-items:center}
  .brand{flex:1 0 100%; margin-right:0}
  .brand-name{font-size:1rem; white-space:nowrap}
  .brand-sub{display:block}
  .head-in .langs{margin-left:0}
  .head-in .btn--wa{margin-left:auto}
}

/* ---------- dita, non puntatori: aree toccabili più generose ---------- */
@media (pointer:coarse){
  .langs{padding:3px}
  .langs button{padding:.5rem .62rem; font-size:.72rem}
  .site-foot .foot-col span{padding-block:.28rem}
  .foot-in a{display:inline-block; padding-block:.25rem}
  .back{padding-block:.4rem}
  .nearby b{padding-block:.1rem}
}

/* il collage del palazzo: su telefono niente colonna alta che lascia vuoti */
@media (max-width:560px){
  .band-pics{align-items:start}
  .band-pics img:first-child{grid-row:auto; grid-column:1 / -1; aspect-ratio:16/10}
  .band-pics img:nth-child(2), .band-pics img:nth-child(3){aspect-ratio:1/1}
}