/* =====================================================================
   Valore Casa Immobiliare — stile condiviso "opzione 1"
   MOBILE-FIRST. Base per smartphone, poi min-width per tablet/desktop.
   Estratto da fondazione-sant-orsola2.html per essere riusato su tutte
   le pagine del sito (chi-siamo.html, index.html, fondazione-sant-orsola2.html).
   ===================================================================== */

:root{
  --paper:      #fbf6f2;   /* carta calda */
  --paper-2:    #f4eae3;   /* carta piu' profonda (sezioni alternate) */
  --ink:        #221619;   /* quasi-nero caldo */
  --stone:      #6b5d59;   /* grigio caldo, testo secondario (AA anche su paper-2) */
  --porto:      #5e1a26;   /* bordeaux dei portici bolognesi */
  --porto-2:    #4a141d;   /* bordeaux piu' fondo */
  --coral:      #ff4a5f;   /* accento brand */
  --coral-600:  #c72a3f;   /* accento brand scuro (pulsanti, testo) — AA con bianco */
  --line:       #e7d9d0;   /* filo caldo */
  --line-dark:  rgba(255,255,255,.16);

  --wrap: 1120px;
  --gutter: clamp(18px, 5vw, 40px);
  --header-h: 62px;
  --bar-h: 64px;
  --radius: 16px;

  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px; }

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

/* eyebrow */
.kicker{
  display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral-600);
}
.kicker::before{ content:""; width:24px; height:2px; background:var(--coral); }
.kicker.on-dark{ color:#ffb9bf; }
.kicker.on-dark::before{ background:#ff8592; }

/* ================= Header ================= */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:transform .3s ease;
  /* NB: niente backdrop-filter/filter/transform qui: creerebbero un
     "containing block" per il menu mobile (position:fixed), che resterebbe
     intrappolato nell'altezza dell'header invece di riempire lo schermo. */
}
.site-header .wrap{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo img{ height:30px; width:auto; }
.main-nav ul{ display:flex; align-items:center; gap:28px; }
.main-nav a{ font-weight:600; font-size:.95rem; padding:6px 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.main-nav a:hover{ color:var(--coral-600); }
.main-nav a.active{ color:var(--coral-600); border-color:var(--coral); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-call{ display:none; width:42px; height:42px; border-radius:50%; background:var(--paper-2); color:var(--coral-600); align-items:center; justify-content:center; }
.icon-call svg{ width:19px; height:19px; }
.nav-toggle{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); transition:transform .25s, opacity .2s; display:block; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.header-cta{ font-weight:700; font-size:.9rem; color:#fff; background:var(--coral-600); padding:11px 20px; border-radius:999px; transition:background .18s, transform .12s; }
.header-cta:hover{ background:var(--porto); transform:translateY(-1px); }

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-weight:700; font-size:1rem; min-height:52px; padding:0 26px; border-radius:999px; cursor:pointer;
  border:2px solid transparent; transition:background .2s, color .2s, border-color .2s, transform .12s; text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn-coral{ background:var(--coral-600); color:#fff; }
.btn-coral:hover{ background:var(--porto); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-ghost-light:hover{ background:#fff; color:var(--porto); border-color:#fff; }
.btn-block{ width:100%; }

/* ================= HERO (compatto: titolo + video + 3 risultati a schermo) ================= */
.hero{ padding:clamp(18px,4vw,44px) 0 clamp(30px,5vw,56px); }
.hero-eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:14px;
}
.hero-eyebrow .meta{ color:var(--stone); font-size:.9rem; font-weight:500; }
.hero h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.7rem, 6.4vw, 3.3rem); line-height:1.04; letter-spacing:-.015em;
  text-wrap:balance; margin-bottom:clamp(18px,3vw,26px);
}

.hero-proof{ display:block; }

/* Video (prova) */
.video-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--porto-2); aspect-ratio:16/9; cursor:pointer;
  box-shadow:0 26px 54px -30px rgba(94,26,38,.55); isolation:isolate;
}
.video-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(46,12,18,.5)); z-index:1; pointer-events:none; }
.video-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.35);
  transition:transform .16s, background .16s;
}
.play::before{ content:""; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #fff; margin-left:5px; }
.video-card:hover .play{ transform:translate(-50%,-50%) scale(1.07); background:var(--coral-600); }
.play .ring{ position:absolute; inset:0; border-radius:50%; background:var(--coral); z-index:-1; opacity:.45; animation:ring 2.1s ease-out infinite; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.5;} 100%{ transform:scale(1.7); opacity:0; } }
.video-caption{
  position:absolute; z-index:2; left:16px; right:16px; bottom:14px; color:#fff;
  font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:9px; text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.video-caption .tag{ font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.2); padding:4px 9px; border-radius:6px; backdrop-filter:blur(4px); }

/* nota cookie YouTube — piccola e discreta, angolo in alto per non
   sovrapporsi alla didascalia in basso. Scompare da sola quando il
   video parte: mountPlayer() in main.js fa card.innerHTML="" e la
   rimuove insieme al resto, nessun JS dedicato necessario. TEST su
   via-casini.html (Cristina): se approvata, estendere alle altre
   video-card del sito. */
.yt-cookie-note{
  position:absolute; z-index:2; top:12px; right:12px; max-width:62%;
  font-size:.66rem; font-weight:600; line-height:1.3; text-align:right;
  color:rgba(255,255,255,.88); background:rgba(20,9,11,.55);
  backdrop-filter:blur(3px); padding:5px 10px; border-radius:999px;
  pointer-events:none;
}

/* 3 risultati — un'unica fascia con divisori sottili, come il resto del sito (niente carte colorate) */
.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:14px; align-items:stretch;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.hero-stat{
  position:relative; height:100%;
  padding:18px 7px 15px;
  text-align:center; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.hero-stat + .hero-stat{ border-left:1px solid var(--line); }
.hero-stat .n{ font-family:var(--f-body); font-weight:800; font-size:clamp(1.2rem,4.6vw,1.55rem); line-height:1.1; color:var(--coral-600); }
.hero-stat .l{ font-size:.76rem; line-height:1.28; color:var(--stone); font-weight:500; }
/* il "+" davanti al numero sposta il centro percepito: lo rendo piu'
   leggero cosi' l'occhio centra la cifra, non il simbolo */
.hero-stat .n .sign{ font-size:.75em; font-weight:600; opacity:.85; }

/* lede (sotto la prova) */
.hero-lede{
  margin-top:clamp(20px,3.5vw,30px); font-size:clamp(1rem,2.3vw,1.15rem); color:var(--stone); max-width:60ch;
}
.hero-lede strong{ color:var(--ink); font-weight:700; }
.hero-actions{ margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; }

/* ================= "I risultati": pannello scuro con il valore + accoglienza ========= */
.result{ background:linear-gradient(155deg, var(--porto) 0%, var(--porto-2) 100%); color:var(--paper); position:relative; overflow:hidden; }
.result::before{ content:"€"; position:absolute; right:-3vw; top:-7vw; font-family:var(--f-display); font-size:42vw; line-height:1; color:#fff; opacity:.035; pointer-events:none; }
.result .wrap{ padding-block:clamp(40px,7vw,80px); position:relative; z-index:1; }
.result h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.7rem,5vw,2.7rem); line-height:1.08; letter-spacing:-.01em; margin:14px 0 clamp(24px,4vw,36px); max-width:20ch; text-wrap:balance; }

.ledger{ max-width:560px; }
.ledger-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line-dark); }
.ledger-row .lab{ font-size:.98rem; color:#e7c6c9; }
.ledger-row .val{ font-weight:700; font-size:clamp(1.2rem,4.4vw,1.5rem); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ledger-row.muted .val{ color:#caa9ac; text-decoration:line-through; text-decoration-thickness:1px; }
.ledger-row.sold .lab{ color:#fff; font-weight:600; }
.ledger-row.sold .val{ color:#ff9ba5; }

/* differenza: etichetta su riga propria, numero piu' contenuto e mai spezzato */
.ledger-diff{ padding-top:20px; }
.ledger-diff .lab{ display:block; font-size:.95rem; color:#e7c6c9; margin-bottom:4px; }
.ledger-diff .val{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,7vw,2.7rem); line-height:1; color:var(--coral); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* diventa accoglienza */
.becomes{ margin-top:clamp(24px,4vw,36px); padding-top:clamp(24px,4vw,36px); border-top:1px dashed var(--line-dark); }
.becomes-arrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-display); font-style:italic; font-size:1.05rem; color:#e7c6c9; margin-bottom:12px; }
.becomes-arrow svg{ width:20px; height:20px; }
.becomes-out{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.4rem,4.4vw,2rem); line-height:1.18; text-wrap:balance; max-width:26ch; }
.becomes-out b{ color:#ff9ba5; font-weight:600; font-style:italic; }
.becomes-note{ margin-top:12px; color:#e7c6c9; font-size:.96rem; max-width:52ch; }

/* reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ================= Sezioni generiche ================= */
.section{ padding:clamp(44px,7vw,88px) 0; }
.section.alt{ background:var(--paper-2); }
.section-head{ max-width:720px; margin-bottom:clamp(24px,4vw,38px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,5vw,2.8rem); line-height:1.06; letter-spacing:-.01em; margin-top:12px; text-wrap:balance; }
.section-head p{ color:var(--stone); font-size:1.05rem; margin-top:12px; }

/* la storia (editoriale) */
.story-body{ max-width:62ch; font-size:clamp(1.02rem,2.3vw,1.15rem); }
.story-body p{ margin-bottom:1em; }
.story-body p:last-child{ margin-bottom:0; }
.story-body .lead::first-letter{ font-family:var(--f-display); font-weight:700; float:left; font-size:3.3em; line-height:.72; padding:6px 12px 0 0; color:var(--coral-600); }

/* citazione principale + Stefano */
.voice{ display:grid; gap:clamp(22px,4vw,42px); align-items:center; }
.voice-figure img{ width:100%; border-radius:var(--radius); object-fit:cover; aspect-ratio:4/5; box-shadow:0 28px 56px -34px rgba(94,26,38,.5); }
.voice-figure figcaption{ margin-top:12px; font-size:.9rem; color:var(--stone); font-weight:600; }
.pullquote{ font-family:var(--f-display); font-weight:400; font-style:italic; font-size:clamp(1.5rem,4.4vw,2.3rem); line-height:1.22; letter-spacing:-.005em; text-wrap:balance; }
.pullquote .mark{ color:var(--coral); font-style:normal; }
.pullquote-by{ margin-top:18px; font-family:var(--f-body); font-style:normal; font-weight:700; font-size:.98rem; }
.pullquote-by span{ display:block; color:var(--stone); font-weight:500; font-size:.9rem; }
.quotes{ display:grid; gap:14px; margin-top:clamp(24px,4vw,36px); }
.quote{ background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--coral); border-radius:14px; padding:20px 22px; font-family:var(--f-display); font-style:italic; font-size:1.08rem; line-height:1.4; }
.section.alt .quote{ background:#fff; }

/* ================= Storia con visual affiancato (usata su chi-siamo) =================
   Mobile: colonna unica, il visual (logo su sfondo bordeaux) apre la sezione.
   Desktop: testo e visual affiancati, meta' pagina ciascuno. */
.story-flex{ display:flex; flex-direction:column; gap:24px; }
.story-copy{ display:flex; flex-direction:column; gap:20px; }
.story-visual{
  background:linear-gradient(145deg, var(--porto) 0%, var(--porto-2) 100%);
  border-radius:var(--radius); padding:clamp(28px,6vw,48px);
  display:flex; align-items:center; justify-content:center; order:-1;
  box-shadow:0 26px 54px -30px rgba(94,26,38,.55);
}
.story-visual img{ width:100%; max-width:180px; }

@media (min-width:900px){
  .story-flex{ flex-direction:row; align-items:center; gap:56px; }
  .story-copy{ flex:1; }
  .story-visual{ order:0; flex:1; }
  .story-visual img{ max-width:240px; }
}

/* ================= Valori / card link (usate su chi-siamo e index) ================= */
.value-grid{ display:grid; gap:14px; }
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:12px;
  transition:transform .16s, box-shadow .16s;
}
.section:not(.alt) .value-card{ background:var(--paper-2); }
a.value-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(94,26,38,.35); }
.value-icon{
  width:48px; height:48px; border-radius:12px; background:rgba(255,74,95,.12); color:var(--coral-600);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.value-icon svg{ width:24px; height:24px; }
.value-card h3{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; }
.value-card p{ color:var(--stone); font-size:.95rem; line-height:1.5; }

/* I nostri numeri — sezione "drenched" rossa, con icone, 2x2 su mobile.
   Rosso brand piu' acceso del bordeaux dei "risultati": quella e' la
   vendita solenne per la fondazione, questo e' il palmares, diretto. */
.metrics{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(150% 130% at 88% -12%, rgba(0,0,0,.28), transparent 58%),
    linear-gradient(135deg, #bb2038 0%, var(--porto) 100%);
}
.metrics .wrap{ padding-block:clamp(46px,8vw,88px); position:relative; z-index:1; }
.metrics .section-head{ margin-bottom:clamp(26px,4vw,42px); }
.metrics .section-head h2{ color:#fff; }
.metrics .kicker{ color:#ffcdd2; }
.metrics .kicker::before{ background:#ff8592; }

.method-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 16px; }
.method-stat{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.method-icon{
  width:78px; height:78px; margin-bottom:2px; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.method-icon svg{ width:40px; height:40px; }
.method-stat .n{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.35rem,5.2vw,1.7rem); line-height:1.05; color:#fff; white-space:nowrap; }
.method-stat .d{ color:#fff; font-size:.95rem; line-height:1.4; max-width:26ch; }

@media (min-width:760px){
  .method-grid{ grid-template-columns:repeat(4,1fr); gap:36px 20px; }
  .method-icon{ width:90px; height:90px; }
  .method-icon svg{ width:46px; height:46px; }
  .method-stat .n{ font-size:1.9rem; }
  .method-stat .d-break{ display:block; }
}

/* servizi inclusi */
.included{ margin-top:clamp(22px,3.5vw,34px); }
.included-list{ display:grid; gap:2px; grid-template-columns:1fr; }
.incl{ display:flex; align-items:center; gap:13px; padding:13px 2px; font-weight:600; font-size:1rem; border-bottom:1px solid var(--line); }
.incl:last-child{ border-bottom:0; }
.incl .ck{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; }
.incl .ck svg{ width:12px; height:12px; }

/* guida */
.guide{ background:linear-gradient(150deg, #fff 0%, var(--paper-2) 100%); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,5vw,42px); display:grid; gap:20px; align-items:center; }
.guide h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.45rem,4vw,2rem); line-height:1.12; text-wrap:balance; }
.guide p{ color:var(--stone); margin-top:10px; }
.guide-badge{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-600); }

/* altre voci */
.voices{ padding:clamp(38px,6vw,70px) 0 clamp(22px,4vw,38px); overflow:hidden; }
.voices .wrap{ margin-bottom:20px; }
.voices h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem,4.4vw,2.3rem); line-height:1.08; margin-top:10px; text-wrap:balance; }
.marquee{ display:block; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.m-track{ display:flex; gap:14px; width:max-content; padding:6px 0; animation:scroll 40s linear infinite; }
.m-track.rev{ animation-direction:reverse; margin-top:14px; }
.marquee:hover .m-track, .marquee:focus-within .m-track{ animation-play-state:paused; }
.m-track img{ flex:0 0 auto; width:128px; height:168px; object-fit:cover; border-radius:12px; box-shadow:0 12px 26px -12px rgba(94,26,38,.45); }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* CTA finale */
.closing{ background:linear-gradient(160deg, var(--ink) 0%, #14090b 100%); color:var(--paper); }
.closing .wrap{ padding-block:clamp(48px,8vw,92px); text-align:center; }
.closing h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.85rem,5.2vw,3rem); line-height:1.1; letter-spacing:-.01em; max-width:24ch; margin:14px auto 14px; text-wrap:balance; }
.closing p{ color:#c9bdb8; max-width:46ch; margin:0 auto 28px; }
.closing-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* storie non finite */
.more-stories{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.more-stories h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.7rem,4.6vw,2.5rem); line-height:1.1; text-wrap:balance; }

.site-footer{ background:#14090b; color:#9c8f8b; padding:32px 0 24px; }
.site-footer .wrap{ display:grid; gap:20px; }

/* email + telefono in evidenza: chip toccabili (>=48px), alto contrasto — sopra */
.foot-reach{ display:flex; flex-wrap:wrap; gap:12px; order:1; justify-content:center; }
.reach{
  display:inline-flex; align-items:center; gap:10px;
  /* l'indirizzo email e' una stringa senza spazi: sotto i ~360px non ci sta
     e allargava tutta la pagina di qualche pixel (scroll orizzontale) */
  min-width:0; overflow-wrap:anywhere;
  min-height:48px; padding:0 20px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.28); color:#fff;
  font-weight:700; font-size:1.02rem; line-height:1;
  transition:background .18s, border-color .18s, transform .12s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.reach svg{ width:20px; height:20px; flex:0 0 auto; color:var(--coral); transition:color .18s; }
.reach:hover{ background:var(--coral-600); border-color:var(--coral-600); transform:translateY(-1px); }
.reach:hover svg{ color:#fff; }

/* voci del menu: tra i contatti e la riga legale */
.foot-nav{
  order:2; display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 22px; font-size:.88rem; font-weight:600;
}
.foot-nav a{ color:#c9bdb8; text-decoration:none; padding:4px 0; }
.foot-nav a:hover{ color:#fff; }

/* riga social/recensioni (GBP, Facebook, LinkedIn, YouTube): serve ai crawler
   come sameAs visibile, ma da mobile allungherebbe troppo il footer -> nascosta
   sotto i 900px (resta comunque nell'HTML e nel JSON-LD). */
.foot-social{ display:none; }
@media (min-width:900px){ .foot-social{ display:flex; } }

/* riga legale: sotto email/telefono */
.foot-legal{
  order:3; font-size:.72rem; line-height:1.6; color:#9a8c82; text-align:center;
}
.foot-legal .sep{ color:rgba(255,255,255,.24); margin:0 4px; }
.foot-legal a{ display:inline-block; padding:3px 0; color:#9a8c82; text-decoration:underline; text-underline-offset:2px; }
.foot-legal a:hover{ color:#fff; }

/* barra azioni mobile — di nuovo in fondo alla pagina (tornata dalla
   versione "sotto l'header", su richiesta 2026-07-13), stesso identico
   comportamento di comparsa/scomparsa allo scroll di sempre. L'ordine dei
   due pulsanti e' invertito rispetto al markup HTML (che resta invariato)
   tramite `order`: quello coral (Valutazione o Scrivici a seconda della
   pagina) a sinistra, Chiama a destra — cosi' non serve toccare i 12 file
   HTML per lo scambio, un solo punto in CSS. */
.mobile-bottom-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:250; height:var(--bar-h);
  display:grid; grid-template-columns:1fr 1fr; background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(94,26,38,.08); transition:transform .28s ease;
}
.mobile-bottom-bar.is-hidden{ transform:translateY(100%); }
.mobile-bottom-bar a{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:.98rem; }
.mobile-bottom-bar a svg{ width:18px; height:18px; flex:0 0 auto; }
.mobile-bottom-bar .b-call{ color:var(--ink); order:2; }
.mobile-bottom-bar .b-write{ background:var(--coral-600); color:#fff; order:1; }

/* footer — di nuovo riservo in fondo lo spazio della barra fissa col
   fondo scuro del footer stesso, cosi' non resta la striscia chiara
   (la barra e' tornata in fondo alla pagina, vedi sopra). */
.site-footer{ padding-bottom:calc(24px + var(--bar-h)); }

/* pulsante WhatsApp flottante — mobile, sempre presente in basso a destra,
   indipendente dallo scroll. Di riposo (barra nascosta) sta proprio
   nell'angolo; quando la barra Chiama/Valutazione appare (classe
   .is-raised, aggiunta/tolta in sincrono in main.js) si solleva della
   stessa altezza della barra, cosi' non si sovrappongono mai. Transizione
   su bottom con la stessa durata (.28s) di quella della barra (transform),
   per restare visivamente in sincro. Verde WhatsApp riconoscibile (non il
   coral del brand): convenzione UX diffusa, l'utente deve riconoscerlo a
   colpo d'occhio come azione WhatsApp. */
.whatsapp-float{ display:none; }
@media (max-width:899px){
  .whatsapp-float{
    display:flex; align-items:center; justify-content:center;
    position:fixed; right:16px; bottom:16px; z-index:255;
    width:56px; height:56px; border-radius:50%;
    background:#25d366; color:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,.32);
    transition:transform .15s ease, bottom .28s ease;
  }
  .whatsapp-float.is-raised{ bottom:calc(var(--bar-h) + 16px); }
  .whatsapp-float:active{ transform:scale(.92); }
  .whatsapp-float svg{ width:30px; height:30px; }
}

/* footer desktop: email/telefono in alto centrati, riga legale sotto */
@media (min-width:900px){
  .site-footer{ padding:38px 0 30px; }
  .site-footer .wrap{ justify-items:center; text-align:center; }
  .foot-reach{ order:1; justify-content:center; }
  .foot-nav{ order:2; }
  .foot-legal{ order:3; }
}

/* ================= Dropdown "Testimonianze" nel menu principale =================
   Il link "Testimonianze" diventa un bottone che apre l'elenco delle singole
   testimonianze. Desktop: pannello flottante. Mobile: accordion (regole nel
   blocco @media max-width:899px). Toggle/chiusura gestiti in js/main.js. */
.main-nav .nav-drop-toggle{
  font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  font-weight:600; font-size:.95rem; padding:6px 0; border-bottom:2px solid transparent;
  display:inline-flex; align-items:center; gap:6px; transition:color .18s, border-color .18s;
}
.main-nav .nav-drop-toggle:hover{ color:var(--coral-600); }
.main-nav .nav-drop-toggle.active{ color:var(--coral-600); border-color:var(--coral); }
.nav-drop-toggle .chev{ width:14px; height:14px; flex:0 0 auto; transition:transform .2s; }
.nav-drop.is-open .nav-drop-toggle .chev{ transform:rotate(180deg); }

.nav-drop-panel{ display:flex; flex-direction:column; }
/* testo staccato dai bordi, su una sola riga "Nome · Zona"; play staccato a destra */
.nav-drop-panel .ndp-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 20px; min-height:48px; border-bottom:none; }
.nav-drop-panel .ndp-row:hover{ background:var(--paper-2); }
/* click col mouse: niente contorno coral (sembra una riga rossa su una fascia larga
   e bassa come questa); tastiera: outline visibile ma incassato, non sborda. */
.nav-drop-panel .ndp-row:focus{ outline:none; background:var(--paper-2); }
.nav-drop-panel .ndp-row:focus-visible{ outline:2px solid var(--coral); outline-offset:-2px; border-radius:8px; }
.ndp-txt{ display:flex; flex-direction:row; align-items:baseline; white-space:nowrap; min-width:0; }
.ndp-row .nm{ font-weight:700; font-size:.92rem; color:var(--ink); line-height:1.3; }
.ndp-row .zn{ font-size:.85rem; color:var(--stone); }
.ndp-row .zn::before{ content:"·"; margin:0 6px; color:var(--stone); }
.ndp-play{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; }
.ndp-play svg{ width:11px; height:11px; margin-left:1px; }
/* Righe della tendina "Guide": stesso impianto delle testimonianze, ma senza il
   pallino coral del play (li' significa "parte un video"). Solo una freccia
   discreta, che si accende al passaggio del mouse. */
.ndp-go{ flex:0 0 auto; width:16px; height:16px; color:var(--stone); opacity:.45; transition:opacity .16s ease, transform .16s ease; }
.ndp-go svg{ width:100%; height:100%; }
.ndp-row.is-guide:hover .ndp-go{ opacity:1; color:var(--coral-600); transform:translateX(2px); }
.ndp-row.is-guide.active .nm{ color:var(--coral-600); }

@media (min-width:900px){
  .nav-drop{ position:relative; }
  .nav-drop-panel{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,-6px);
    width:max-content; min-width:250px; max-width:360px; background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:0 24px 50px -20px rgba(94,26,38,.35); overflow:auto;
    /* tetto anti-taglio (2026-08-04): da 15 voci in su il pannello scorre
       invece di rendere irraggiungibili le ultime righe (il vecchio limite
       misurato era 14 voci su un 1366x768). overflow:auto al posto di hidden:
       la barra compare solo quando serve, gli angoli restano ritagliati. */
    max-height:calc(100vh - 90px);
    opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:210;
  }
  .nav-drop.is-open .nav-drop-panel{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
  .nav-drop-panel .ndp-row{ border-bottom:1px solid var(--line); }
  .nav-drop-panel .ndp-row:last-child{ border-bottom:0; }
}

/* ================= Menu mobile ================= */
@media (max-width:899px){
  .nav-toggle{ display:flex; }
  .icon-call{ display:flex; }
  .header-cta{ display:none; }
  /* su mobile l'header si nasconde scorrendo verso il basso per fare spazio */
  .site-header.is-hidden{ transform:translateY(-100%); }
  .main-nav{
    position:fixed; inset:var(--header-h) 0 0 0; background:var(--paper);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s, transform .2s; overflow-y:auto; z-index:190;
  }
  .main-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:12px var(--gutter) 30px; }
  .main-nav a{ min-height:56px; display:flex; align-items:center; font-size:1.15rem; border-bottom:1px solid var(--line); }
  .main-nav a.active{ border-color:var(--line); }

  /* dropdown "Testimonianze" su mobile = accordion nel menu a schermo intero */
  .main-nav .nav-drop-toggle{ width:100%; min-height:56px; font-size:1.15rem; padding:0; border-bottom:1px solid var(--line); justify-content:space-between; }
  .nav-drop-panel{ max-height:0; overflow:hidden; background:var(--paper-2); border-radius:10px; transition:max-height .3s ease; }
  /* il tetto serve solo all'animazione: deve stare SOPRA l'altezza vera del
     pannello piu' lungo, altrimenti taglia le ultime voci. Con 13 guide il
     contenuto misura 676px, e a 660 l'ultima riga spariva. 1400 copre una
     ventina di voci: se un giorno la tendina cresce ancora, si rialza qui. */
  .nav-drop.is-open .nav-drop-panel{ max-height:1400px; margin:8px 0 10px; }
  .nav-drop-panel .ndp-row{ padding:13px 18px; border-bottom:1px solid var(--line); min-height:52px; }
  .nav-drop-panel .ndp-row:last-child{ border-bottom:0; }
  .ndp-play{ background:transparent; color:var(--coral-600); }

  /* video a tutta larghezza: esce dal gutter del .wrap fino ai bordi schermo,
     angoli arrotondati mantenuti */
  .video-card{
    margin-left:calc(-1 * var(--gutter));
    margin-right:calc(-1 * var(--gutter));
  }
}

/* ================= Tablet ================= */
@media (min-width:640px){
  .included-list{ grid-template-columns:1fr 1fr; column-gap:34px; }
  .incl:nth-last-child(2){ border-bottom:0; }
  .guide{ grid-template-columns:1.4fr auto; }
  .quotes{ grid-template-columns:1fr 1fr; }
  .hero-stat{ padding:16px 14px; }
  .hero-stat .l{ font-size:.82rem; }
  .value-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ================= Desktop ================= */
@media (min-width:900px){
  :root{ --header-h:76px; }
  body{ padding-bottom:0; }
  .mobile-bottom-bar{ display:none; }

  /* hero: titolo in alto, poi video + risultati affiancati, poi lede */
  .hero-proof{ display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:stretch; }
  .hero-stats{ grid-template-columns:1fr; margin-top:0; align-content:stretch; }
  .hero-stat{ flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; text-align:left; padding:16px 20px; min-height:82px; }
  .hero-stat + .hero-stat{ border-left:0; border-top:1px solid var(--line); }
  .hero-stat .n{ font-size:1.7rem; flex:0 0 auto; min-width:112px; }
  .hero-stat .l{ font-size:.9rem; }

  .result .wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
  .result-intro{ position:sticky; top:100px; }
  .result h2{ margin-bottom:0; }

  .voice{ grid-template-columns:.8fr 1.2fr; }
  .story-two{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .closing h2{ font-size:clamp(2.3rem,4vw,3.2rem); }
}

@media (min-width:1000px){
  .quotes{ grid-template-columns:repeat(2,1fr); }
}

/* motion ridotto */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .m-track{ animation:none; }
  .play .ring{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover, .header-cta:hover, .reach:hover, a.value-card:hover{ transform:none; }
  .site-header, .mobile-bottom-bar{ transition:none; }
}

/* =====================================================================
   HOME (index.html) + IL METODO (il-metodo.html) — componenti pagina.
   Sezioni-firma proprie, distinte dalla pagina Fondazione.
   ===================================================================== */

/* =====================================================================
   HERO FOTOGRAFICO — Marcello nel salone, overlay scuro, titolo grande,
   sottotitolo con barra corallo, pulsante rosso.
   ===================================================================== */
.hero-photo{
  position:relative; color:#fff; isolation:isolate; overflow:hidden;
  min-height:clamp(600px, 94vh, 820px);
  display:flex; align-items:flex-start;
}
/* Sfondo hero: due scatti REALI della stessa stanza, stessa inquadratura —
   uno a luci spente (.hero-bg, layer di base, sempre visibile da subito)
   e uno a luci accese (.hero-bg-on, sfuma sopra dopo un'attesa). Su due
   layer separati apposta, cosi' si anima la transizione senza un filtro
   simulato: e' letteralmente "si accendono le luci di casa". */
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-image:url("../assets/img/hero-bg-off.jpg");
  background-size:cover; background-position:35% center; background-repeat:no-repeat;
}
.hero-bg-on{
  position:absolute; inset:0; z-index:-1;
  background-image:url("../assets/img/hero-bg.jpg");
  background-size:cover; background-position:35% center; background-repeat:no-repeat;
  opacity:0; /* di riposo: prima dell'accensione si vede solo .hero-bg (spenta), mai un buco vuoto */
}
@media (prefers-reduced-motion:no-preference){
  .hero-bg-on{ animation:hero-lights-on 1.8s ease-in-out 1.5s forwards; }
}
@media (prefers-reduced-motion:reduce){
  .hero-bg-on{ opacity:1; } /* niente attesa per chi ha richiesto motion ridotto: si vede subito la casa illuminata */
}
@keyframes hero-lights-on{ to{ opacity:1; } }

/* overlay: scuro in alto (per il titolo), leggero in mezzo, scuro in fondo
   cosi' la sagoma nitida di Marcello stacca sullo sfondo sfumato */
.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(20,9,11,.80) 0%, rgba(20,9,11,.42) 40%, rgba(20,9,11,.30) 66%, rgba(20,9,11,.62) 100%);
}
/* sagoma ritagliata di Marcello: in primo piano, "finisce sotto" al bordo */
.hero-figure{
  position:absolute; z-index:1; left:auto; right:clamp(-24px,-7vw,-4px); transform:none;
  top:clamp(348px, 90vw, 384px);   /* ancorata in alto: la testa resta SEMPRE sotto il testo */
  bottom:auto; height:min(50vh, 440px); width:auto; pointer-events:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.42));
}
.hero-photo .wrap{ position:relative; z-index:2; padding-top:clamp(24px,6vw,60px); padding-bottom:40px; width:100%; }
.hero-photo .kicker{ color:#ffb9bf; }
.hero-photo .kicker::before{ background:#ff8592; }
.hero-photo h1{
  font-family:var(--f-body); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.3rem, 9vw, 4.2rem); line-height:1.02; margin:14px 0 0;
  max-width:15ch; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-sub{
  margin-top:clamp(18px,3vw,26px); padding-left:16px; position:relative;
  font-size:clamp(1.05rem,2.6vw,1.35rem); line-height:1.35; max-width:26ch; color:#f3e9e6;
}
.hero-sub::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:4px; border-radius:4px; background:var(--coral); }
.hero-sub b{ color:#fff; font-weight:800; }
.hero-photo .hero-actions{ margin-top:clamp(22px,3.5vw,30px); display:flex; flex-wrap:wrap; gap:12px; }
.hero-photo .btn-coral{ box-shadow:0 18px 40px -18px rgba(0,0,0,.6); }
.hero-photo-micro{ margin-top:16px; font-size:.9rem; color:#e7c6c9; font-weight:600; display:flex; align-items:center; gap:8px; }
.hero-photo-micro svg{ width:16px; height:16px; color:var(--coral); }

/* ---------- Hero: ingresso in sequenza al caricamento ----------
   Un solo momento "firma" per pagina: titolo, sottotitolo e CTA arrivano
   in cascata leggera, la sagoma di Marcello segue con un lieve "passo in
   scena". Si anima SOLO transform, mai opacity: il contenuto resta sempre
   leggibile anche nel caso peggiore in cui l'animazione non parta o resti
   bloccata (tab in background, dispositivo lento) — nel peggiore dei casi
   c'e' un piccolo scarto di posizione statico, mai testo sparito. */
@media (prefers-reduced-motion:no-preference){
  .hero-photo h1, .hero-photo .hero-sub, .hero-photo .hero-actions{
    animation:da-up .85s cubic-bezier(.16,1,.3,1) both;
  }
  .hero-photo .hero-sub{ animation-delay:.16s; }
  .hero-photo .hero-actions{ animation-delay:.32s; }
  .hero-figure{ animation:da-figure-in 1.05s cubic-bezier(.16,1,.3,1) .22s both; }
}
@keyframes da-up{ from{ transform:translateY(46px); } to{ transform:translateY(0); } }
@keyframes da-figure-in{ from{ transform:translateY(90px) scale(.88); } to{ transform:translateY(0) scale(1); } }

/* Da mobile: piu' margine sopra al titolo, sagoma un po' piu' piccola,
   inquadratura dello sfondo spostata piu' a destra (divano + cucina). */
@media (max-width:819.98px){
  .hero-photo .wrap{ padding-top:clamp(64px, 18vw, 100px); }
  .hero-figure{ top:clamp(392px, 100vw, 436px); height:min(44vh, 390px); }
  .hero-bg, .hero-bg-on{ background-position:58% center; }
}

@media (min-width:820px){
  .hero-photo{ align-items:center; min-height:clamp(540px, 84vh, 760px); }
  .hero-bg, .hero-bg-on{ background-position:center; }
  .hero-photo::before{ background:linear-gradient(90deg, rgba(20,9,11,.86) 0%, rgba(20,9,11,.6) 38%, rgba(20,9,11,.25) 60%, rgba(20,9,11,.35) 100%); }
  .hero-photo .wrap{ padding-block:60px; }
  .hero-photo h1{ max-width:16ch; }
  /* Marcello a destra, testo a sinistra — di nuovo ancorata in basso, piu' piccola */
  .hero-figure{ top:auto; bottom:0; right:clamp(8px,3vw,64px); height:min(63%, 520px); }
}
@media (min-width:1180px){
  .hero-figure{ right:calc((100vw - var(--wrap))/2 - 20px); }
}

/* nota sotto la griglia .metrics (bg scuro drenched) */
.metrics-note{ margin-top:clamp(20px,3.5vw,28px); font-size:.86rem; color:#f0c3c8; text-align:center; }
.metrics-note a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
@media (min-width:760px){
  /* piu' respiro dalle 4 card sopra */
  .metrics-note{ margin-top:48px; }
}

/* link testuale di fine sezione */
.sec-cta{ display:inline-flex; align-items:center; gap:.45em; margin-top:20px; font-weight:700; color:var(--coral-600); }
.sec-cta:hover{ text-decoration:underline; text-underline-offset:3px; }

/* =====================================================================
   5 PUNTI "COME VALORIZZEREMO LA TUA CASA" — sintesi grafica in home
   (la versione completa a 17 attività vive su il-metodo.html).
   Stepper numerato con rail di collegamento e icona per punto.
   ===================================================================== */
.plan5{ position:relative; display:grid; gap:0; margin-top:clamp(22px,4vw,32px); max-width:760px; }
.p5{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:18px; padding:18px 0; }
.p5:not(:last-child)::after{ content:""; position:absolute; left:21px; top:52px; bottom:-6px; width:2px; background:linear-gradient(var(--coral), rgba(255,74,95,.15)); }
.p5-n{
  position:relative; z-index:1; width:44px; height:44px; border-radius:50%;
  background:linear-gradient(140deg, var(--coral-600), #a31b30); color:#fff;
  font-family:var(--f-display); font-weight:700; font-size:1.35rem; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -8px rgba(199,42,63,.7);
}
.p5-txt h3{ display:flex; align-items:center; gap:9px; font-size:1.08rem; font-weight:800; line-height:1.25; }
.p5-txt h3 .ic{ flex:0 0 auto; width:20px; height:20px; color:var(--coral-600); }
.p5-txt p{ color:var(--stone); font-size:.94rem; margin-top:7px; line-height:1.5; }

/* =====================================================================
   IL PIANO A 5 FASI x 17 ATTIVITA' (il-metodo.html)
   ===================================================================== */
.fasi{ display:grid; gap:16px; margin-top:clamp(20px,3.5vw,30px); counter-reset:att; }
.fase{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:grid; box-shadow:0 18px 40px -30px rgba(94,26,38,.4); }
.fase-head{ background:linear-gradient(135deg, var(--coral-600) 0%, #a31b30 100%); color:#fff; padding:14px 18px; display:flex; align-items:center; gap:14px; }
.fase-head .fn{ font-family:var(--f-display); font-weight:700; font-size:1.9rem; line-height:1; opacity:.95; }
.fase-head h2{ font-size:.95rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; }
.fase-head .fi{ margin-left:auto; flex:0 0 auto; width:34px; height:34px; opacity:.9; }
.fase-head .fi svg{ width:100%; height:100%; }
.fase-body{ padding:4px 18px 12px; }
.fase-lede{ padding:12px 0 2px; color:var(--stone); font-size:.94rem; font-style:italic; font-family:var(--f-display); }
.att{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; padding:13px 0; border-bottom:1px dashed var(--line); align-items:start; }
.att:last-child{ border-bottom:0; }
.att-n{ counter-increment:att; grid-row:1 / span 2; width:26px; height:26px; border-radius:50%; background:var(--coral-600); color:#fff; font-weight:800; font-size:.8rem; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.att-n::before{ content:counter(att); }
.att h3{ grid-column:2; font-size:.98rem; font-weight:700; line-height:1.3; }
.att p{ grid-column:2; color:var(--stone); font-size:.9rem; line-height:1.45; }

/* =====================================================================
   AUTOSCROLL — righe che scorrono da sole con swipe manuale (JS).
   Usato per: risultati (2 righe) e altre testimonianze (2 righe).
   ===================================================================== */
.autoscroll{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:4px 0; scroll-snap-type:none; }
.autoscroll::-webkit-scrollbar{ display:none; }
.autoscroll.faded{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.autoscroll > *{ flex:0 0 auto; }
/* trascinabile col mouse su desktop (drag-to-scroll gestito in JS) */
.autoscroll img{ -webkit-user-drag:none; user-select:none; }
.autoscroll.is-dragging{ cursor:grabbing; user-select:none; }
@media (hover:hover) and (pointer:fine){ .autoscroll{ cursor:grab; } }

/* =====================================================================
   RISULTATI — schede fotografiche (PDF "Risultati vendite"),
   in due righe scorrevoli. Realizzo % verde e in carattere diverso.
   ===================================================================== */
.results{ margin-top:clamp(20px,3.5vw,30px); display:grid; gap:14px; }
.rcard{
  width:270px; background:#fff; border:1px solid var(--line); border-top:5px solid var(--coral);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 20px 44px -28px rgba(94,26,38,.45);
}
/* da desktop schede piu' grandi: con poche foto la rotazione ha piu' spazio */
@media (min-width:900px){ .rcard{ width:340px; } }
/* la foto NON e' cliccabile: solo il pulsante play lo e' (vedi .rcard-play) */
.rcard-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.rcard-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; pointer-events:none; }
.rcard-photo.noimg{ display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg, var(--porto) 0%, var(--porto-2) 100%); color:#ff9ba5; }
.rcard-photo.noimg svg{ width:56px; height:56px; }
/* play discreto (piu' piccolo del rosso, grigio semitrasparente) -> pagina testimonianza.
   E' l'unico elemento cliccabile della foto: tap target 44px, ben oltre il minimo. */
.rcard-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:rgba(34,22,25,.42); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  box-shadow:0 4px 14px rgba(0,0,0,.28); transition:background .18s, transform .16s;
}
.rcard-play svg{ width:18px; height:18px; margin-left:2px; pointer-events:none; }
.rcard-play:hover{ background:rgba(34,22,25,.68); transform:translate(-50%,-50%) scale(1.1); }
/* invito discreto al tap: anello che pulsa, puramente decorativo (::after —
   la sua assenza non toglie nulla al pulsante reale, se l'animazione non
   parte resta semplicemente invisibile, opacity:0 di riposo) */
.rcard-play::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid rgba(255,255,255,.65); opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .rcard-play::after{ animation:da-pulse 2.2s cubic-bezier(.16,1,.3,1) infinite; }
}
@keyframes da-pulse{
  0%{ transform:scale(.85); opacity:.6; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ opacity:0; }
}
/* feedback al tap: mobile non ha :hover */
.rcard-play:active{ transform:translate(-50%,-50%) scale(.82); }
.btn:active{ transform:scale(.92); }

/* ============================================================
   Interazioni desktop (mouse/hover reali, pointer:fine). Gated cosi' un
   touchscreen anche largo (tablet, convertibili) non riceve stati ":hover"
   bloccati che poi non si possono "annullare" col dito. ============ */
@media (hover:hover) and (pointer:fine){
  .rcard{ transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); }
  .rcard:hover{ transform:translateY(-10px); box-shadow:0 34px 60px -26px rgba(94,26,38,.55); }
  .rcard-photo img{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
  .rcard:hover .rcard-photo img{ transform:scale(1.09); }

  .video-card img{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
  .video-card:hover img{ transform:scale(1.06); }

  .method-icon{
    transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .35s ease, color .35s ease;
  }
  .method-stat:hover .method-icon{
    transform:scale(1.12) rotate(-8deg);
    background:#fff; color:#bb2038; /* invertito: pallino pieno bianco, figura rossa */
  }

  /* sottolineatura del menu che scorre in scena al passaggio del mouse,
     si aggiunge al semplice cambio colore gia' presente */
  .main-nav a{ position:relative; }
  .main-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--coral); transform:scaleX(0); transform-origin:left;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .main-nav a:hover::after{ transform:scaleX(1); }
  .main-nav a.active::after{ display:none; } /* l'active usa gia' il suo bordo statico */
}

/* guizzo delle icone "I nostri numeri" anche su mobile: su desktop si
   ripete ad ogni hover (regola sopra), su mobile arriva una volta sola
   come parte della rivelazione allo scroll (vedi main.js). Niente
   overshoot/rimbalzo: solo una rotazione che si assesta. */
@keyframes da-icon-pop{
  from{ transform:scale(.55) rotate(-18deg); }
  to{ transform:scale(1) rotate(0deg); }
}

.rcard-body{ padding:15px 17px 17px; display:flex; flex-direction:column; gap:9px; flex:1; }
.r-who{ font-weight:800; font-size:1rem; line-height:1.25; }
.r-who span{ display:block; color:var(--stone); font-weight:500; font-size:.84rem; margin-top:2px; }
.r-ledger{ border-block:1px dashed var(--line); padding:2px 0; }
.r-ledger .row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 0; font-variant-numeric:tabular-nums; }
.r-ledger .lab{ font-size:.8rem; color:var(--stone); }
.r-ledger .val{ font-weight:700; white-space:nowrap; }
.r-ledger .ask .val{ color:var(--stone); font-weight:500; text-decoration:line-through; text-decoration-thickness:1px; }
.r-ledger .sold .val{ color:var(--coral-600); font-weight:800; font-size:1.08rem; }
.r-days{ font-weight:800; font-size:1rem; letter-spacing:.01em; }
/* realizzo: verde, carattere di sistema tabellare (diverso dal display) */
.r-realizzo{ margin-top:auto; font-size:.86rem; font-weight:700; color:var(--stone); display:flex; align-items:baseline; gap:6px; }
.r-realizzo b{ font-family:var(--f-body); font-weight:800; font-size:1.55rem; color:#0b7a3b; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* =====================================================================
   OPEN HOUSE — sequenza della giornata + cambio di mentalità + prova
   ===================================================================== */
.sec-body{ max-width:62ch; font-size:1.02rem; }
.sec-body p{ margin-bottom:1em; }
.sec-body p:last-child{ margin-bottom:0; }
.sec-body strong{ color:var(--ink); font-weight:700; }
.sec-close{ margin-top:clamp(18px,3vw,26px); max-width:62ch; color:var(--stone); }
.sec-close b{ color:var(--coral-600); }
/* link inline nelle note di chiusura su fondo CHIARO (non usare .metrics-note,
   che e' colorata per la fascia scura .metrics: sarebbe illeggibile qui) */
.sec-close a{ color:var(--coral-600); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* nota di chiusura ad ALTO contrasto (fondo chiaro): stesso ruolo di .sec-close
   ma con il colore del testo corrente, per le note che devono farsi leggere */
.note-strong{ margin-top:clamp(18px,3vw,26px); max-width:62ch; color:var(--ink); font-size:1.02rem; }
.note-strong a{ color:var(--coral-600); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* prova economica messa in evidenza (callout) */
.money-proof{
  margin-top:clamp(20px,3.5vw,28px);
  background:linear-gradient(150deg,#fff,var(--paper));
  border:1px solid rgba(199,42,63,.28); border-radius:16px;
  padding:clamp(18px,3.5vw,24px) clamp(20px,4vw,28px);
  font-size:1.05rem; line-height:1.5; color:var(--ink);
  box-shadow:0 22px 46px -30px rgba(94,26,38,.45);
}
.money-proof b{ color:var(--coral-600); font-size:1.18em; }

/* i 3 momenti — timeline verticale su mobile, orizzontale su desktop */
.oh-flow{ list-style:none; margin:clamp(28px,5vw,44px) 0 0; padding:0; display:grid; gap:24px; }
.oh-step{ position:relative; display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:start; }
.oh-step:not(:last-child)::before{ content:""; position:absolute; left:22px; top:52px; bottom:-24px; width:2px; background:linear-gradient(var(--coral), rgba(94,26,38,.16)); z-index:0; }
.oh-node{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.35rem; color:#fff; background:var(--porto); box-shadow:0 4px 12px rgba(94,26,38,.28); position:relative; z-index:1; transition:transform .2s ease, box-shadow .2s ease; }
.oh-ic{ display:inline-flex; color:var(--coral-600); margin-bottom:7px; }
.oh-ic svg{ width:26px; height:26px; }
.oh-step-body h3{ font-family:var(--f-display); font-weight:700; font-size:1.22rem; line-height:1.15; margin:0 0 5px; }
.oh-step-body p{ color:var(--stone); max-width:54ch; }

/* il cambio di mentalità — cuore del meccanismo */
.oh-flip{ margin:clamp(34px,5vw,52px) 0 0; }
.oh-flip figcaption{ text-align:center; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-bottom:16px; }
.oh-flip-row{ display:grid; gap:12px; align-items:stretch; }
.oh-mind{ border-radius:16px; padding:20px 22px; }
.oh-mind .lab{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.oh-mind .say{ display:block; font-family:var(--f-display); font-size:clamp(1.2rem,4.6vw,1.55rem); line-height:1.22; }
.oh-mind.before{ background:#fff; border:1px solid var(--line); }
.oh-mind.before .lab{ color:var(--stone); }
.oh-mind.before .say{ color:var(--stone); font-style:italic; }
.oh-mind.after{ background:var(--ink); }
.oh-mind.after .lab{ color:var(--coral); }
.oh-mind.after .say{ color:#fff; font-weight:600; }
.oh-arrow{ display:grid; place-items:center; color:var(--coral-600); }
.oh-arrow svg{ width:26px; height:26px; transform:rotate(90deg); }

/* la prova — caso reale, incarico -> venduto */
.oh-proof{ margin:clamp(30px,5vw,48px) 0 0; padding:clamp(20px,4vw,30px); border-radius:18px; border:1px solid var(--line); background:linear-gradient(150deg,#fff,var(--paper)); display:grid; gap:16px; }
.oh-proof-k{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--coral-600); font-weight:700; }
.oh-proof-nums{ display:flex; align-items:center; gap:clamp(14px,4vw,28px); flex-wrap:wrap; }
.pn{ display:grid; gap:3px; }
.pn-l{ font-size:.82rem; color:var(--stone); }
.pn-v{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.7rem,7vw,2.4rem); line-height:1; font-variant-numeric:tabular-nums; }
.pn.sold .pn-v{ color:var(--coral-600); }
.pn-arrow svg{ width:26px; height:26px; color:var(--stone); display:block; }
.oh-proof-txt{ color:var(--ink); font-size:1.05rem; max-width:56ch; }
.oh-proof-txt b{ color:var(--coral-600); }

/* precisazione onesta */
.oh-honest{ margin:clamp(22px,4vw,30px) 0 0; max-width:64ch; display:flex; gap:12px; align-items:flex-start; color:var(--stone); font-size:.98rem; line-height:1.55; }
.oh-honest svg{ width:22px; height:22px; color:var(--porto); flex:0 0 auto; margin-top:2px; }
.oh-honest b{ color:var(--ink); }

@media (hover:hover){ .oh-step:hover .oh-node{ transform:scale(1.06); box-shadow:0 7px 20px rgba(94,26,38,.36); } }

@media (min-width:720px){
  .oh-flip-row{ grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; }
  .oh-arrow svg{ transform:none; }
}
@media (min-width:820px){
  .oh-flow{ grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,44px); }
  .oh-step{ grid-template-columns:1fr; gap:0; }
  .oh-step:not(:last-child)::before{ left:auto; top:23px; right:calc(-1 * clamp(14px,2vw,22px)); bottom:auto; width:clamp(28px,4vw,44px); height:2px; background:linear-gradient(90deg, var(--coral), rgba(94,26,38,.16)); }
  .oh-node{ margin-bottom:16px; }
}
@media (prefers-reduced-motion:reduce){
  .oh-node{ transition:none; }
}

/* =====================================================================
   TRA NOI E LE ALTRE AGENZIE — due pannelli (grigio vs bordeaux)
   ===================================================================== */
.vs{ display:grid; gap:16px; margin-top:clamp(20px,3.5vw,30px); }
.vs-panel{ border-radius:var(--radius); padding:clamp(20px,4.5vw,32px); }
.vs-tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:14px; }
.vs-panel h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.3rem,3.6vw,1.6rem); line-height:1.12; margin-bottom:8px; text-wrap:balance; }
.vs-lede{ font-size:.95rem; margin-bottom:16px; }
.vs-list{ display:grid; gap:11px; }
.vs-list li{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; font-weight:600; line-height:1.45; }
.vs-list .mk{ width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; margin-top:2px; }
.vs-list .mk svg{ width:11px; height:11px; }
.vs-panel.them{ background:var(--paper-2); border:1px solid var(--line); color:var(--stone); }
.vs-panel.them h3{ color:var(--ink); }
.vs-panel.them .vs-tag{ background:#e5d8cf; color:var(--stone); }
.vs-panel.them .mk{ background:#fff; color:var(--porto); }
.vs-panel.us{ background:linear-gradient(150deg, var(--porto) 0%, var(--porto-2) 100%); color:#fff; box-shadow:0 30px 60px -30px rgba(94,26,38,.65); }
.vs-panel.us .vs-tag{ background:rgba(255,255,255,.18); color:#fff; }
.vs-panel.us .vs-lede{ color:#e7c6c9; }
.vs-panel.us .mk{ background:#fff; color:var(--coral-600); }
.vs-stat{ margin-top:20px; padding-top:18px; border-top:1px dashed rgba(255,255,255,.35); }
.vs-stat .n{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(1.7rem,5.5vw,2.3rem); line-height:1.05; color:#ff9ba5; }
.vs-stat .d{ display:block; font-size:.94rem; color:#e7c6c9; margin-top:4px; max-width:34ch; }

/* =====================================================================
   4,9/5 RECENSIONI GOOGLE — fascia scura con numerale gigante
   ===================================================================== */
.rating{ background:linear-gradient(150deg, var(--porto) 0%, var(--porto-2) 100%); color:#fff; }
.rating .wrap{ padding-block:clamp(46px,7vw,84px); }
.rating-band{ text-align:center; }
.rating-band .stars{ color:var(--coral); font-size:clamp(1.35rem,4.5vw,1.9rem); letter-spacing:.28em; text-indent:.28em; display:block; }
.rating-num{ font-family:var(--f-display); font-weight:700; font-size:clamp(4rem,16vw,6.5rem); line-height:1; margin-top:8px; }
.rating-num small{ font-size:.4em; font-weight:700; color:#e7c6c9; }
.rating-band .lab{ color:#e7c6c9; font-weight:600; margin-top:8px; font-size:1.02rem; }
.rating-band .btn{ margin-top:22px; }

/* =====================================================================
   COSA COMPRENDE IL PIANO — confronto.
   Mobile: card compatta, Valore Casa in evidenza sopra, le altre agenzie
   sotto in piccolo e barrato. Desktop: due colonne con intestazione fissa.
   ===================================================================== */
.compare{ display:grid; gap:10px; margin-top:clamp(18px,3vw,26px); }
.cmp-head{ display:none; }
.cmp-row{ display:flex; flex-direction:column; gap:5px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
/* su mobile le attivita' che facciamo NOI sono in rosso, in evidenza */
.cmp-new{ order:1; display:flex; gap:9px; align-items:flex-start; font-weight:700; color:var(--coral-600); font-size:.96rem; line-height:1.35; }
/* le altre agenzie: una voce per riga, niente a capo, col tag "Altre agenzie" e barratura tenue */
.cmp-old{ order:2; display:flex; gap:7px; align-items:center; flex-wrap:nowrap; font-size:.8rem; color:var(--stone); line-height:1.3; }
.cmp-old .txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:line-through; text-decoration-color:rgba(154,138,130,.5); text-decoration-thickness:1px; }
.cmp-tag{ flex:0 0 auto; font-size:.56rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#a2938b; white-space:nowrap; }
.cmp-new .cmp-tag{ display:none; }
.compare .mk{ width:19px; height:19px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.cmp-old .mk{ background:#e0d0c7; color:#fff; }
.cmp-new .mk{ background:var(--coral); color:#fff; }
.compare .mk svg{ width:10px; height:10px; }

/* =====================================================================
   4 ERRORI
   ===================================================================== */
.risks{ display:grid; gap:14px; margin-top:clamp(18px,3vw,26px); }
.risk{ background:#fff; border:1px solid var(--line); border-left:4px solid #f2b400; border-radius:14px; padding:18px; }
.risk h3{ font-size:1rem; font-weight:800; display:flex; align-items:center; gap:11px; }
.risk h3 svg{ width:28px; height:28px; flex:0 0 auto; filter:drop-shadow(0 2px 5px rgba(242,180,0,.4)); }
.risk p{ color:var(--stone); font-size:.92rem; margin-top:8px; }
.risks-close{ margin-top:clamp(18px,3vw,22px); font-family:var(--f-display); font-style:italic; font-size:1.2rem; }

/* =====================================================================
   BANNER DOPPIA GARANZIA — fascia corallo->bordeaux, 2 card + "+"
   ===================================================================== */
.guarantee{ position:relative; overflow:hidden; color:#fff; background: radial-gradient(140% 130% at 88% -12%, rgba(0,0,0,.22), transparent 58%), linear-gradient(135deg, var(--coral-600) 0%, var(--porto) 100%); }
.guarantee .wrap{ padding-block:clamp(44px,7vw,80px); text-align:center; }
.guarantee .kicker.on-dark{ justify-content:center; }
.guarantee h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.75rem,5vw,2.6rem); line-height:1.08; margin:12px 0 clamp(24px,4vw,34px); text-wrap:balance; }
.g-row{ display:grid; gap:14px; align-items:stretch; justify-items:center; }
.g-item{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); padding:24px 22px; max-width:420px; width:100%; }
.g-ic{ width:52px; height:52px; margin:0 auto 12px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.g-ic svg{ width:28px; height:28px; }
.g-item h3{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; line-height:1.15; }
.g-item p{ color:#f3dcdf; font-size:.96rem; margin-top:10px; }
.g-plus{ font-family:var(--f-display); font-weight:700; font-size:2.2rem; line-height:1; opacity:.85; }

/* =====================================================================
   TESTIMONIANZE VIDEO + citazioni
   ===================================================================== */
.videos{ display:grid; gap:18px; margin-top:clamp(20px,3.5vw,30px); }
.video-item{ display:flex; flex-direction:column; gap:12px; }
.video-quote{ font-family:var(--f-display); font-style:italic; font-size:1rem; line-height:1.4; color:var(--ink); }
.video-quote span{ display:block; font-family:var(--f-body); font-style:normal; font-weight:700; font-size:.86rem; color:var(--stone); margin-top:6px; }

/* card-link alla storia della Fondazione */
.video-more{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:16/9; display:flex; align-items:flex-end; background:var(--porto-2); isolation:isolate; box-shadow:0 26px 54px -30px rgba(94,26,38,.55); }
.video-more img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; transition:transform .25s ease; }
.video-more::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 25%, rgba(46,12,18,.78)); z-index:1; }
.video-more:hover img{ transform:scale(1.04); }
.vm-body{ position:relative; z-index:2; color:#fff; padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.vm-kicker{ font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#ffb9bf; }
.vm-title{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; line-height:1.18; text-wrap:balance; }
.vm-link{ font-weight:700; font-size:.9rem; text-decoration:underline; text-underline-offset:3px; margin-top:2px; }

/* =====================================================================
   ALTRE TESTIMONIANZE — due righe di volti che scorrono (autoscroll)
   ===================================================================== */
.voices{ padding:clamp(38px,6vw,70px) 0 clamp(22px,4vw,38px); overflow:hidden; }
.voices .wrap{ margin-bottom:16px; }
.voices h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem,4.4vw,2.3rem); line-height:1.08; margin-top:10px; text-wrap:balance; }
.faces{ display:grid; gap:12px; }
.faces .autoscroll{ padding:0; }
.faces .autoscroll img{ width:124px; height:162px; object-fit:cover; object-position:50% 20%; border-radius:12px; box-shadow:0 12px 26px -12px rgba(94,26,38,.45); }

/* =====================================================================
   CHI SONO — testo + monogramma "M" grande in rosso
   ===================================================================== */
.punch{ display:grid; gap:10px; margin:clamp(18px,3.2vw,26px) 0; }
.punch li{ font-size:clamp(1.15rem,3.2vw,1.45rem); line-height:1.3; }
.punch .q{ color:var(--stone); font-weight:500; }
.punch .a{ color:var(--coral-600); font-weight:800; }
/* "M" di Marcello = capolettera rosso sul primo paragrafo (.story-body .lead) */
.chi .story-body .lead::first-letter{ font-size:4.2em; padding:8px 14px 0 0; }

/* =====================================================================
   FORM VALUTAZIONE
   ===================================================================== */
.val-card{ background:var(--paper); color:var(--ink); border-radius:var(--radius); padding:clamp(22px,4.5vw,34px); max-width:560px; margin:clamp(24px,4vw,34px) auto 0; text-align:left; box-shadow:0 34px 70px -34px rgba(0,0,0,.6); }
.val-card label{ display:block; font-weight:700; font-size:.9rem; margin:15px 0 6px; }
.val-card label:first-of-type{ margin-top:0; }
.val-card input{ width:100%; min-height:50px; padding:0 14px; font:inherit; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.val-card input::placeholder{ color:#8a7b73; }
.val-card input:focus{ border-color:var(--coral); outline:none; box-shadow:0 0 0 3px rgba(255,74,95,.15); }
.val-card .btn{ margin-top:20px; }
.val-privacy{ margin-top:12px; font-size:.78rem; color:var(--stone); line-height:1.5; }
.val-alt{ text-align:center; margin-top:16px; font-size:.95rem; color:#c9bdb8; }
.val-alt a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
@media (min-width:640px){
  /* .closing p{max-width:46ch} ha specificita' piu' alta di .val-alt da solo:
     serve .closing .val-alt per vincere davvero ed evitare che il testo
     resti compresso/nowrap in una scatola stretta (appariva "non centrato"). */
  .closing .val-alt{ max-width:none; white-space:nowrap; }
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{ display:grid; gap:10px; margin-top:clamp(18px,3vw,26px); max-width:820px; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 18px; font-weight:700; font-size:.99rem; min-height:52px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq .chev{ flex:0 0 auto; width:22px; height:22px; color:var(--coral-600); transition:transform .2s; }
.faq details[open] .chev{ transform:rotate(180deg); }
.faq .ans{ padding:0 18px 17px; color:var(--stone); font-size:.95rem; }
.faq .ans b{ color:var(--ink); }

/* =====================================================================
   MEDIA QUERIES
   ===================================================================== */
@media (min-width:640px){
  .risks{ grid-template-columns:1fr 1fr; }
  .fase-body{ padding:6px 22px 14px; }
  .videos{ grid-template-columns:repeat(3,1fr); align-items:start; }
}

@media (min-width:820px){
  /* confronto: due colonne con intestazione fissa */
  .cmp-head{ display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; border-radius:14px 14px 0 0; border:1px solid var(--line); border-bottom:0; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .cmp-head .h-old{ padding:12px 16px; background:var(--paper-2); color:#7c6a63; }
  .cmp-head .h-new{ padding:12px 16px; background:var(--coral-600); color:#fff; }
  .compare{ gap:0; }
  .cmp-row{ display:grid; grid-template-columns:1fr 1fr; gap:0; flex-direction:row; border-radius:0; border:1px solid var(--line); border-bottom:0; padding:0; }
  .compare .cmp-row:last-child{ border-bottom:1px solid var(--line); border-radius:0 0 14px 14px; }
  .cmp-old, .cmp-new{ padding:12px 16px; font-size:.94rem; align-items:center; }
  /* colonne allineate all'intestazione: altre agenzie a sinistra, Valore Casa a destra */
  .cmp-old{ order:1; background:var(--paper-2); border-right:1px solid var(--line); }
  /* da desktop niente barratura: si legge meglio nella colonna dedicata */
  .cmp-old .txt{ text-decoration:none; white-space:normal; overflow:visible; }
  .cmp-tag{ display:none !important; } /* su desktop la colonna e' gia' etichettata dall'header */
  .cmp-new{ order:2; color:var(--ink); }
  .g-row{ grid-template-columns:1fr auto 1fr; align-items:center; }
}

@media (min-width:900px){
  /* fase (il-metodo): fascia a sinistra, attivita' su 3 colonne */
  .fase{ grid-template-columns:230px 1fr; }
  .fase-head{ flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; padding:24px 22px; }
  .fase-head .fn{ font-size:2.6rem; }
  .fase-head .fi{ margin-left:0; width:40px; height:40px; }
  .fase-body{ padding:8px 26px 16px; }
  .att{ grid-template-columns:auto 220px 1fr; column-gap:18px; }
  .att-n{ grid-row:auto; }
  .att h3{ grid-column:2; grid-row:1; }
  .att p{ grid-column:3; grid-row:1; }

  .vs{ grid-template-columns:1fr 1.08fr; align-items:stretch; }
}

/* =====================================================================
   PRIMA / DOPO — la trasformazione dell'immobile (home staging).
   Componente riusabile su tutte le testimonianze con foto prima/dopo.
   Coppie affiancate prima->dopo. Mobile: 1 coppia per riga (le due foto
   restano affiancate cosi' il confronto e' immediato). Desktop: 2 coppie.
   ===================================================================== */
.ba-grid{ display:grid; gap:clamp(16px,3vw,26px); margin-top:clamp(22px,4vw,34px); }
.ba-pair{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; box-shadow:0 20px 44px -30px rgba(94,26,38,.4);
}
.section:not(.alt) .ba-pair{ background:var(--paper-2); }
.ba-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ba-cell{
  position:relative; border-radius:12px; overflow:hidden;
  aspect-ratio:3/2; background:var(--paper-2);
}
.ba-cell img{ width:100%; height:100%; object-fit:cover; }
.ba-cell .lab{
  position:absolute; left:8px; top:8px; z-index:2;
  font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; color:#fff; line-height:1;
}
.ba-cell.is-before .lab{ background:rgba(34,22,25,.74); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ba-cell.is-after .lab{ background:var(--coral-600); }
.ba-cap{ margin:11px 4px 3px; font-size:.9rem; font-weight:600; color:var(--stone); display:flex; align-items:center; gap:9px; }
.ba-cap .rn{ color:var(--ink); font-weight:700; }
.ba-cap .dot{ width:5px; height:5px; border-radius:50%; background:var(--coral); flex:0 0 auto; }
.ba-note{ margin-top:clamp(16px,3vw,22px); max-width:60ch; color:var(--stone); font-size:.98rem; line-height:1.6; }
.ba-note b{ color:var(--coral-600); }

@media (min-width:820px){
  .ba-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .ba-pair{ padding:12px; }
}

/* ROI della valorizzazione: spesa -> ritorno con moltiplicatore.
   Chiude la sezione prima/dopo quantificando il rientro dell'investimento. */
.ba-roi{
  margin-top:clamp(20px,3.5vw,30px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(18px,3.5vw,26px); box-shadow:0 20px 44px -30px rgba(94,26,38,.4);
}
.section:not(.alt) .ba-roi{ background:var(--paper-2); }
.ba-roi-nums{ display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(14px,3vw,22px); }
.roi-item{ display:flex; flex-direction:column; gap:4px; }
.roi-l{ font-size:.8rem; color:var(--stone); max-width:18ch; line-height:1.25; }
.roi-v{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.5rem,6vw,2.1rem); line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.roi-item.is-gain .roi-v{ color:var(--coral-600); }
.roi-arrow{ display:grid; place-items:center; color:var(--stone); }
.roi-arrow svg{ width:24px; height:24px; }
.roi-mult{
  margin-left:auto; display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px;
  background:linear-gradient(150deg, var(--porto) 0%, var(--porto-2) 100%); color:#fff;
}
.roi-mult b{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,8vw,2.7rem); line-height:1; color:#ff9ba5; }
.roi-mult span{ font-size:.82rem; color:#e7c6c9; max-width:10ch; line-height:1.2; }
.ba-roi-txt{
  margin-top:16px; padding-top:15px; border-top:1px dashed var(--line);
  font-family:var(--f-display); font-style:italic; font-size:1.06rem; line-height:1.4; color:var(--ink);
}
.ba-roi-txt span{ display:block; margin-top:6px; font-family:var(--f-body); font-style:normal; font-weight:700; font-size:.88rem; color:var(--stone); }

@media (max-width:560px){
  .ba-roi-nums{ flex-direction:column; align-items:stretch; gap:12px; }
  .roi-item{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:14px; }
  .roi-l{ max-width:none; text-align:right; }
  .roi-arrow{ transform:rotate(90deg); }
  .roi-mult{ margin-left:0; width:100%; justify-content:center; margin-top:2px; }
}

/* ================= Galleria foto immobile (pagine caso-studio) =================
   Foto "normali" della casa (non prima/dopo): su mobile griglia a 2 righe che
   scorre in orizzontale a colonne; da tablet in su torna striscia a riga singola,
   piu' grande. Riusa il motore [data-autoscroll] di main.js (drag col mouse +
   auto-scroll in "bounce"). Usata su via-tinti.html (villa). */
.gallery{
  display:flex; flex-direction:column; gap:10px; margin-top:clamp(22px,4vw,34px);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:8px; scrollbar-width:none; cursor:grab;
}
.gallery::-webkit-scrollbar{ display:none; }
.gallery.is-dragging{ cursor:grabbing; }
.gal-row{ display:flex; gap:10px; width:max-content; }
.gal-row-2{ margin-left:34vw; }  /* seconda riga sfalsata: non parte allineata alla prima */
.gallery figure{ margin:0; flex:0 0 auto; width:64vw; }
.gallery img{
  width:100%; height:150px; object-fit:cover;
  border-radius:12px; display:block; box-shadow:0 10px 22px -16px rgba(94,26,38,.5);
}
.gallery figcaption{
  margin-top:6px; font-size:.78rem; font-weight:600; color:var(--stone);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:640px){
  /* le due righe si "sciolgono": le 6 figure tornano una riga unica piu' grande */
  .gallery{ flex-direction:row; gap:12px; }
  .gal-row{ display:contents; }
  .gal-row-2{ margin-left:0; }
  .gallery figure{ width:min(84vw,520px); }
  .gallery img{ height:clamp(220px,52vw,360px); border-radius:14px; box-shadow:0 22px 44px -30px rgba(94,26,38,.5); }
  .gallery figcaption{ margin-top:10px; font-size:.9rem; white-space:normal; overflow:visible; text-overflow:clip; }
}
@media (min-width:900px){
  .gallery figure{ width:520px; }
}

/* ================= Annunci competitor (confronto di mercato) =================
   Screenshot di annunci simili ancora in vendita, come prova del prezzo. */
.cmp-listings{ display:grid; gap:16px; margin-top:clamp(22px,4vw,30px); }
.cmp-listings figure{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:0 18px 40px -30px rgba(94,26,38,.4);
}
.cmp-listings img{ width:100%; display:block; }
.cmp-listings figcaption{ padding:12px 15px; font-size:.92rem; color:var(--stone); font-weight:600; }
.cmp-listings figcaption b{ color:var(--coral-600); }
@media (min-width:700px){ .cmp-listings{ grid-template-columns:1fr 1fr; } }

/* ================= Popup giveaway "10 segreti" =================
   <dialog> nativo: showModal()/close() gestiscono da soli focus-trap,
   tasto Esc e ::backdrop. Innescato dai pulsanti [data-guide-trigger],
   markup statico duplicato per pagina (necessario perche' Netlify Forms
   rileva i form solo nell'HTML statico, non se iniettato via JS). */
.guide-modal{
  /* margin:auto esplicito: il reset globale (*{margin:0}) sovrascriverebbe
     altrimenti il centraggio nativo di <dialog> (che si basa su margin:auto
     insieme a inset:0 dato dallo user-agent stylesheet per dialog:modal). */
  margin:auto; padding:0; border:0; border-radius:18px; overflow:hidden; max-width:min(92vw,760px);
  width:100%; box-shadow:0 40px 80px -30px rgba(34,22,25,.45);
}
.guide-modal::backdrop{ background:rgba(34,22,25,.55); backdrop-filter:blur(2px); }
.guide-modal-inner{ display:flex; flex-direction:column; position:relative; max-height:85vh; overflow-y:auto; }
.guide-modal-close{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9); border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:1.4rem; line-height:1; transition:background .15s;
}
.guide-modal-close:hover{ background:#fff; }
.guide-modal-photo{ height:clamp(140px,32vw,220px); }
.guide-modal-photo img{ width:100%; height:100%; object-fit:cover; object-position:20% 65%; display:block; }
/* variante per la sagoma ritagliata (PNG trasparente) di Marcello: "contain" invece di
   "cover" cosi' non viene mai tagliata, sfondo carta al posto del bianco pieno dietro
   alle zone trasparenti. */
.guide-modal-photo.is-portrait{ background:var(--paper-2); }
.guide-modal-photo.is-portrait img{ object-fit:contain; object-position:center bottom; }
.guide-modal-body{ padding:clamp(22px,4vw,32px); }
.guide-modal-body h2{
  font-family:var(--f-display); font-weight:700; color:var(--coral-600);
  font-size:clamp(1.35rem,4vw,1.7rem); line-height:1.14; letter-spacing:-.01em; text-wrap:balance;
}
.guide-modal-body .gm-sub{ margin-top:8px; color:var(--stone); font-size:1rem; }
.guide-modal-fields{ display:flex; flex-direction:column; gap:14px; margin:22px 0 16px; }
.guide-modal-fields label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.guide-modal-fields input{
  width:100%; min-height:50px; padding:0 16px; border-radius:12px; border:1.5px solid var(--line);
  font:inherit; font-size:1rem; background:var(--paper);
}
.guide-modal-fields input:focus-visible{ outline:2px solid var(--coral); outline-offset:1px; border-color:var(--coral); }
.guide-modal-note{ margin-top:12px; font-size:.82rem; color:var(--stone); }
@media (min-width:640px){
  .guide-modal-inner{ flex-direction:row; }
  .guide-modal-photo{ width:38%; height:auto; flex:0 0 auto; }
  .guide-modal-body{ flex:1; align-self:center; }
  .guide-modal-fields{ flex-direction:row; }
}
@media (prefers-reduced-motion:no-preference){
  .guide-modal{ animation:gm-in .22s ease-out; }
  .guide-modal::backdrop{ animation:gm-fade .22s ease-out; }
}
@keyframes gm-in{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes gm-fade{ from{ opacity:0; } to{ opacity:1; } }

/* ================= Guida "10 segreti per vendere al massimo" =================
   Pagina lead-magnet (non nel menu). Sezioni numerate + mosaico home staging
   a dimensioni diverse + comparativo esclusiva/collaborazione. */
.secret .wrap{ max-width:940px; }
.secret-kicker{ display:inline-flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.secret-kicker .num{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.1rem,7vw,3.2rem); line-height:.8; color:var(--coral); }
.secret-kicker .lab{ font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }
.secret h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.45rem,4.4vw,2.15rem); line-height:1.1; letter-spacing:-.01em; text-wrap:balance; margin-bottom:clamp(14px,2.4vw,20px); }
.secret-body{ max-width:68ch; font-size:clamp(1rem,2.2vw,1.08rem); }
.secret-body p{ margin-bottom:1em; }
.secret-body p:last-child{ margin-bottom:0; }
.secret-body b{ color:var(--ink); font-weight:700; }
.secret-body em{ font-style:normal; color:var(--coral-600); font-weight:600; }
.secret-list{ margin:0 0 1em; padding:0; list-style:none; display:grid; gap:12px; }
.secret-list li{ position:relative; padding-left:26px; }
.secret-list li::before{ content:""; position:absolute; left:0; top:.6em; width:15px; height:2px; background:var(--coral); }
.secret-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-weight:700; color:var(--coral-600);
  border-bottom:2px solid transparent; transition:border-color .18s;
}
.secret-cta:hover{ border-color:var(--coral); }
.secret-cta svg{ width:16px; height:16px; }
.secret-fig{ margin:clamp(20px,3vw,28px) 0 0; }
.secret-fig img{ width:100%; border-radius:14px; display:block; box-shadow:0 24px 48px -32px rgba(94,26,38,.45); }
.secret-fig figcaption{ margin-top:10px; font-size:.88rem; color:var(--stone); }

/* ===== Hero guida "10 segreti": copertina di una guida, non un hero fotografico generico =====
   Overlay bordeaux (var(--porto)/var(--porto-2), il colore dei portici bolognesi gia' usato
   nel brand) al posto di uno scrim nero piatto, e un vero indice numerato (colonne CSS, come
   la pagina di un libro) al posto di pillole/bottoni — coerente con .secret-kicker .num
   gia' usato in ogni segreto della pagina. */
.guide-hero{
  position:relative; isolation:isolate; color:#fff; overflow:hidden;
  background:#1c0e12 url("../assets/img/guide-hero.jpg") center/cover no-repeat;
  padding:clamp(50px,10vw,108px) 0 clamp(44px,7vw,84px);
}
.guide-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 55% at 12% -8%, rgba(255,74,95,.22), transparent 60%),
    linear-gradient(155deg, rgba(74,20,29,.94) 0%, rgba(46,16,22,.9) 48%, rgba(20,10,12,.96) 100%);
}
.gh-grid{ display:grid; gap:clamp(34px,6vw,54px); align-items:center; }
.gh-eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#ffb9bf; margin-bottom:16px;
}
.gh-title{
  font-family:var(--f-display); font-weight:700; line-height:1.06; letter-spacing:-.01em;
  font-size:clamp(2.2rem,6.6vw,4.1rem); max-width:16ch; text-wrap:balance;
}
.gh-title em{ display:block; font-style:italic; font-weight:500; color:#f4d3d7; }
.gh-lede{ margin-top:18px; max-width:48ch; color:#e7d8d6; font-size:clamp(1rem,2.4vw,1.14rem); line-height:1.55; }
.gh-lede strong{ color:#fff; font-weight:700; }

/* indice: pagina-sommario, non griglia di pulsanti */
.gh-toc{ border-top:1px solid rgba(255,255,255,.18); padding-top:6px; }
.gh-toc ol{ list-style:none; margin:0; padding:0; }
.gh-toc li{ break-inside:avoid; }
.gh-toc a{
  display:flex; align-items:baseline; gap:16px; text-decoration:none; color:#fff;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.gh-toc li:last-child a{ border-bottom:0; }
.gh-n{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; line-height:1; color:var(--coral); min-width:1.7em; flex:0 0 auto; }
.gh-t{ font-weight:600; font-size:.95rem; flex:1; }
.gh-arw{ width:15px; height:15px; flex:0 0 auto; opacity:0; transform:translateX(-4px); color:#ff8592; transition:opacity .16s, transform .16s; }
.gh-toc a:hover .gh-arw, .gh-toc a:focus-visible .gh-arw{ opacity:1; transform:translateX(0); }
.gh-toc a:hover .gh-t, .gh-toc a:focus-visible .gh-t{ color:#ffd9dc; }
.gh-toc a:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:3px; }
@media (min-width:640px){ .gh-toc ol{ columns:2; column-gap:36px; } }
@media (min-width:900px){
  .gh-grid{ grid-template-columns:1.15fr 1fr; }
  .gh-toc{ border-top:0; padding-top:0; padding-left:clamp(24px,3vw,40px); border-left:1px solid rgba(255,255,255,.18); }
}

/* ingresso della pagina: titolo e indice arrivano con un lieve movimento verso l'alto.
   Solo transform, MAI opacity: il contenuto resta sempre pienamente visibile (opacity:1
   di base) anche se l'animazione non parte o resta bloccata a meta' (tab in background,
   renderer headless) — nel caso peggiore si vede un offset statico di 14px, mai un
   testo invisibile. Vedi nota "reveal animations must enhance an already-visible default". */
@media (prefers-reduced-motion:no-preference){
  .gh-eyebrow, .gh-title, .gh-lede, .gh-toc li{ animation:gh-up .6s cubic-bezier(.16,1,.3,1) both; }
  .gh-title{ animation-delay:.08s; }
  .gh-lede{ animation-delay:.16s; }
  .gh-toc li:nth-child(1){ animation-delay:.22s; } .gh-toc li:nth-child(2){ animation-delay:.27s; }
  .gh-toc li:nth-child(3){ animation-delay:.32s; } .gh-toc li:nth-child(4){ animation-delay:.37s; }
  .gh-toc li:nth-child(5){ animation-delay:.42s; } .gh-toc li:nth-child(6){ animation-delay:.47s; }
  .gh-toc li:nth-child(7){ animation-delay:.52s; } .gh-toc li:nth-child(8){ animation-delay:.57s; }
  .gh-toc li:nth-child(9){ animation-delay:.62s; } .gh-toc li:nth-child(10){ animation-delay:.67s; }
}
@keyframes gh-up{ from{ transform:translateY(14px); } to{ transform:translateY(0); } }

/* video singolo dentro un segreto */
.secret-video{ max-width:640px; margin:clamp(22px,4vw,32px) auto 0; }
.secret-video-quote{
  margin:16px auto 0; max-width:56ch; text-align:center;
  font-family:var(--f-display); font-style:italic; font-size:clamp(1.02rem,2.3vw,1.14rem);
  line-height:1.5; color:var(--porto);
}
.secret-video-quote span{
  display:block; margin-top:8px; font-family:var(--f-body); font-style:normal;
  font-size:.85rem; font-weight:600; color:var(--stone);
}

/* contenitore piu' largo del testo (galleria a tutta larghezza dentro un segreto) */
.secret .wrap.wrap-wide{ max-width:1180px; }

/* comparativo esclusiva / non esclusiva / collaborazione (segreto 4) */
.excl{ display:grid; gap:16px; margin-top:clamp(22px,3.5vw,30px); }
.excl-card{
  border:1.5px solid var(--line); border-radius:18px; padding:clamp(18px,3vw,24px);
  background:var(--paper-2); display:flex; flex-direction:column;
}
.excl-card.win{ border:2px solid var(--coral); background:#fff; box-shadow:0 26px 54px -34px rgba(94,26,38,.5); }
.excl-tag{
  display:inline-block; align-self:flex-start; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--coral);
  padding:5px 12px; border-radius:999px; margin-bottom:12px;
}
.excl-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.excl-head h3{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; }
.excl-card.win .excl-head h3{ color:var(--coral-600); }
.excl-verdict{ font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.excl-verdict.is-win{ color:#1f8a4c; background:rgba(31,138,76,.12); }
.excl-verdict.is-mid{ color:var(--stone); background:rgba(0,0,0,.055); }
.excl-verdict.is-bad{ color:#c23b47; background:rgba(194,59,71,.1); }
.excl-group{ padding-top:14px; }
.excl-group + .excl-group{ margin-top:14px; border-top:1px solid var(--line); }
.excl-glab{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; }
.excl-row{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; line-height:1.45; margin-bottom:10px; }
.excl-row:last-child{ margin-bottom:0; }
.excl-row .ic{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.excl-row .ic svg{ width:13px; height:13px; }
.excl-row .ic.ok{ color:#1f8a4c; background:rgba(31,138,76,.14); }
.excl-row .ic.no{ color:#c23b47; background:rgba(194,59,71,.12); }
@media (min-width:820px){ .excl{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }

/* ===== Riga consenso privacy nei form (GDPR) =====
   Un solo flag obbligatorio, MAI prespuntato (sentenza CGUE Planet49
   C-673/17: caselle preselezionate = consenso invalido). Il valore del
   checkbox viaggia con l'invio ("consenso-privacy: si'") insieme al campo
   nascosto "versione-informativa": ogni submission archiviata da Netlify
   diventa cosi' la prova di chi ha acconsentito, a cosa e quando. */
.consent-check{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; }
.consent-check input[type="checkbox"]{
  width:20px; height:20px; min-height:0; flex:0 0 auto; margin-top:1px;
  accent-color:var(--coral-600); cursor:pointer;
}
.consent-check label{
  display:inline; margin:0; font-weight:400; font-size:.82rem; line-height:1.5;
  color:var(--stone); cursor:pointer; text-align:left;
}
.consent-check a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.consent-check a:hover{ color:var(--coral-600); }

/* =====================================================================
   PAGINE GUIDA (contenuti SEO/GEO) — prima applicazione:
   documenti-vendere-casa-emilia-romagna.html
   Componenti pensati per essere riusati dalle prossime pagine guida
   (eredita', separazione, mutuo, ecc.). Mobile-first come il resto.
   ===================================================================== */

/* Risposta sintetica in apertura: e' il blocco che i motori generativi
   (ChatGPT/Gemini) estraggono piu' facilmente, quindi va per primo. */
.tldr{
  background:linear-gradient(150deg,#fff,var(--paper-2));
  border:1px solid var(--line); border-left:4px solid var(--coral);
  border-radius:14px; padding:clamp(18px,4vw,28px);
  margin-top:clamp(18px,3vw,24px);
}
.tldr>p{ font-size:1.02rem; }
.tldr>p+p{ margin-top:12px; color:var(--stone); }
.tldr ul{ display:grid; gap:9px; margin-top:16px; }
.tldr li{ position:relative; padding-left:22px; font-size:.98rem; line-height:1.5; }
.tldr li::before{
  content:""; position:absolute; left:3px; top:.6em;
  width:7px; height:7px; border-radius:50%; background:var(--coral);
}
.tldr li b{ font-weight:700; }

/* Schede documento: titolo + etichetta (obbligatorio/consigliato/se serve),
   descrizione e due micro-campi "chi lo procura" / "quando serve". */
/* Trascrizione del video (pagine caso-studio).
   NASCOSTA DA MOBILE per scelta: su telefono un blocco da 300-800 parole sotto
   la hero allontanerebbe troppo il resto della pagina. Il testo pero' RESTA
   nell'HTML in ogni caso: serve ai crawler AI, che non guardano i video e non
   leggono i sottotitoli di YouTube. Stesso pattern di .foot-social. */
.transcript{ display:none; }
@media (min-width:900px){
  .transcript{
    display:block; margin-top:clamp(24px,3.5vw,34px);
    border-top:1px solid var(--line); padding-top:12px;
  }
}
/* Il pulsante e' volutamente SOMMESSO: la trascrizione e' materiale di
   servizio (soprattutto per i crawler AI), non un invito all'azione.
   Niente coral, niente grassetto forte, niente riquadro. */
.transcript summary{
  cursor:pointer; list-style:none; padding:2px 0;
  font-size:.78rem; font-weight:600; letter-spacing:.01em;
  color:var(--stone); opacity:.75;
  display:inline-flex; align-items:center; gap:7px;
  transition:opacity .18s ease, color .18s ease;
}
.transcript summary::-webkit-details-marker{ display:none; }
.transcript summary::before{
  content:""; width:6px; height:6px; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .18s ease;
}
.transcript[open] summary::before{ transform:rotate(45deg); }
.transcript summary:hover{ opacity:1; color:var(--coral-600); }
.transcript summary:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:3px; }
.transcript-body{ padding:4px 0 4px 16px; max-width:70ch; border-left:2px solid var(--line); margin-top:12px; }
.transcript-body p{ font-size:.92rem; line-height:1.72; color:var(--stone); margin-top:13px; }
.transcript-note{ font-size:.76rem !important; font-style:italic; opacity:.7; margin-top:0 !important; }
.transcript-by{ font-weight:700; color:var(--ink) !important; font-size:.85rem !important; }

/* Tabella riepilogativa (pagina documenti). Le tabelle sono un formato che i
   motori generativi estraggono bene: il contenuto e' lo stesso delle card sotto,
   condensato. Su mobile scorre in orizzontale DENTRO il suo contenitore, cosi'
   la pagina non prende mai scroll laterale. */
.table-wrap{
  margin-top:clamp(20px,3.5vw,30px);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:14px;
  /* Ombra ai bordi che compare SOLO quando c'e' ancora tabella da scorrere,
     e sparisce arrivati in fondo. Serve perche' sul telefono si vedeva la
     prima colonna e nient'altro, senza alcun segnale che si potesse
     trascinare. Tecnica di soli sfondi: i due strati "local" scorrono col
     contenuto e coprono l'ombra quando il bordo e' raggiunto, i due "scroll"
     restano fermi e fanno l'ombra. Niente JS. */
  background:
    linear-gradient(to right, #fff 32%, rgba(255,255,255,0)) left center / 42px 100% no-repeat local,
    linear-gradient(to left,  #fff 32%, rgba(255,255,255,0)) right center / 42px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(94,26,38,.20), rgba(94,26,38,0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(94,26,38,.20), rgba(94,26,38,0)) right center / 16px 100% no-repeat scroll,
    #fff;
}
/* Riga di istruzioni sopra la tabella: l'ombra e' un indizio, questa e' la
   spiegazione. Da desktop, dove le tabelle ci stanno, sparisce. */
.table-hint{
  display:flex; align-items:center; gap:7px;
  margin:14px 2px -6px; font-size:.82rem; font-weight:600; color:var(--stone);
}
.table-hint svg{ width:15px; height:15px; flex:0 0 auto; color:var(--coral-600); }
@media (min-width:900px){ .table-hint{ display:none; } }
.table-wrap:focus-visible{ outline:2px solid var(--coral); outline-offset:-2px; }
.dt{ border-collapse:collapse; width:100%; min-width:680px; font-size:.93rem; }
.dt caption{
  caption-side:top; text-align:left; padding:14px 16px 0;
  font-size:.82rem; color:var(--stone); font-style:italic;
}
.dt th, .dt td{ padding:11px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.dt thead th{
  font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--stone); background:var(--paper-2); border-bottom:1px solid var(--line);
  position:sticky; top:0;
}
.dt tbody th{ font-weight:700; color:var(--ink); }
.dt td{ color:var(--stone); }
.dt tbody tr:last-child th, .dt tbody tr:last-child td{ border-bottom:0; }

.docs{ display:grid; gap:14px; margin-top:clamp(20px,3.5vw,30px); }
.doc{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:clamp(17px,3.5vw,22px); }
/* Etichetta sempre SOPRA il titolo (come i kicker del sito): affiancarla
   faceva andare a capo 9 schede su 10 e restare in linea la decima, cioe'
   il caso peggiore — disallineamento che sembra un errore, non una scelta. */
.doc-h{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.doc-h h3{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; line-height:1.15; }
.doc-tag{
  flex:0 0 auto; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; order:-1;
}
.doc-tag.is-must{ background:rgba(199,42,63,.1); color:var(--coral-600); }
.doc-tag.is-plus{ background:rgba(31,138,76,.13); color:#1a6e3d; }
.doc-tag.is-if{ background:var(--paper-2); color:var(--stone); }
.doc>p{ color:var(--stone); font-size:.97rem; margin-top:11px; }
.doc>p b{ color:var(--ink); }
.doc-meta{ margin-top:14px; padding-top:13px; border-top:1px solid var(--line); display:grid; gap:7px; }
.doc-meta>div{ display:flex; gap:8px; font-size:.89rem; line-height:1.45; }
.doc-meta dt{ flex:0 0 auto; font-weight:700; }
.doc-meta dd{ color:var(--stone); }

/* Approfondimento a fondo chiaro (RTI, MUR R1, certificazioni impianti) */
.notebox{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:clamp(20px,4vw,30px); margin-top:clamp(18px,3vw,26px);
}
.notebox h3{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.2rem,3.6vw,1.5rem); line-height:1.2; }
.notebox p{ color:var(--stone); margin-top:13px; }
.notebox p b{ color:var(--ink); }
.notebox .doc-tag{ margin-bottom:12px; display:inline-block; }

/* Sequenza temporale "quando attivare cosa" */
.tl{ margin-top:clamp(18px,3vw,26px); max-width:820px; }
.tl-row{ display:grid; gap:4px; padding:15px 0; border-bottom:1px solid var(--line); }
.tl-row:last-child{ border-bottom:0; }
.tl-when{ font-weight:800; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; color:var(--coral-600); }
.tl-row p{ color:var(--stone); font-size:.97rem; }
.tl-row p b{ color:var(--ink); }

@media (min-width:820px){
  .docs{ grid-template-columns:1fr 1fr; align-items:start; }
  .tl-row{ grid-template-columns:170px 1fr; gap:18px; align-items:baseline; }
}

/* =====================================================================
   FASCIA CTA "Parlane con noi" (pagine guida)
   Stessa identita' visiva della fascia "I nostri numeri" della home
   (.metrics): fondo bordo' pieno, testo bianco. La .guide interna resta
   il componente di sempre, qui svuotata di sfondo/bordo perche' e' la
   sezione a portare il colore.
   ===================================================================== */
.talk-cta{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(150% 130% at 88% -12%, rgba(0,0,0,.28), transparent 58%),
    linear-gradient(135deg, #bb2038 0%, var(--porto) 100%);
}
.talk-cta .wrap{ position:relative; z-index:1; }
.talk-cta .guide{ background:none; border:0; padding:0; }
.talk-cta .guide h2{ color:#fff; }
.talk-cta .guide p{ color:#f3dade; }
.talk-cta .guide-badge{ color:#ffcdd2; }
/* il coral del brand e' quasi lo stesso rosso del fondo bordo': qui il
   pulsante va bianco, altrimenti sparisce dentro la fascia */
.talk-cta .btn-coral{ background:#fff; color:var(--porto); }
.talk-cta .btn-coral:hover{ background:var(--paper-2); color:var(--porto); }

/* popup: piu' respiro fra la riga del consenso e il pulsante di invio */
.guide-modal-body .consent-check + .btn{ margin-top:18px; }

/* La sagoma di Marcello su mobile restava piccola e lontana. Con
   object-fit:contain la foto e' sempre limitata dall'altezza, quindi
   alzare il riquadro la ingrandisce senza tagliarle la testa (uno
   scale() sull'immagine invece la croppava in alto). Solo mobile: da
   640px in su il riquadro e' una colonna con height:auto. */
@media (max-width:639px){
  .guide-modal-photo.is-portrait{ height:clamp(200px,50vw,250px); }
}

/* =====================================================================
   SIMULATORE affitto/vendita (simulatore-affitto-o-vendita.html)
   Le due alternative come due schede affiancate e leggibili a colpo
   d'occhio, con la vincente evidenziata.
   ===================================================================== */
.sim-cards{ display:grid; gap:12px; align-items:stretch; }
.sim-card{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:16px 18px; display:grid; gap:4px; align-content:start;
}
.sim-card.win{ background:#fff; border-color:#fff; color:var(--ink); box-shadow:0 14px 30px -18px rgba(0,0,0,.5); }
.sim-card-k{ font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#ffcdd2; }
.sim-card.win .sim-card-k{ color:var(--coral-600); }
.sim-card-n{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.7rem,6vw,2.2rem); line-height:1.05; }
.sim-card-n small{ font-size:.44em; font-weight:700; letter-spacing:.02em; }
/* il rendimento annuo e' il numero da confrontare: piu' risalto del resto */
.sim-card-rate{ font-size:1rem; color:#f3dade; margin-top:2px; }
.sim-card-rate b{ font-size:1.35em; font-weight:800; color:#ffd9de; }
.sim-card.win .sim-card-rate{ color:var(--stone); }
.sim-card.win .sim-card-rate b{ color:var(--coral-600); }
.sim-detail{ list-style:none; display:grid; gap:5px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.16); font-size:.85rem; }
.sim-card.win .sim-detail{ border-top-color:var(--line); }
.sim-detail li{ display:flex; justify-content:space-between; gap:12px; color:#e8d6d9; }
.sim-card.win .sim-detail li{ color:var(--stone); }
.sim-detail li b{ white-space:nowrap; color:#fff; }
.sim-card.win .sim-detail li b{ color:var(--ink); }
.sim-vs{
  justify-self:center; font-size:.75rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#ffcdd2; padding:2px 0;
}
@media (min-width:520px){
  .sim-cards{ grid-template-columns:1fr auto 1fr; gap:14px; }
  .sim-vs{ align-self:center; }
}

/* =====================================================================
   CASO REALE + VIDEOTESTIMONIANZA AFFIANCATI (.proof-pair)
   Il riquadro dei numeri a sinistra, la faccia di chi l'ha vissuta a
   destra: si leggono come un blocco solo. Nato su open-house-bologna.

   Due numeri scelti misurando, non a occhio:
   - colonna video al 44%: e' la larghezza a cui il video, tenendo il suo
     16:9, viene alto quanto il riquadro dei numeri (differenza di pochi
     pixel sui casi reali). La prima versione forzava invece height:100%
     sul video, e siccome con aspect-ratio la larghezza si ricalcola
     dall'altezza, il video sbordava di oltre 100px fuori dalla colonna.
   - affiancamento solo da 1100px: sotto, il testo del caso guadagna una
     riga, il riquadro cresce di 100px e il video resterebbe sospeso a
     meta'. Meglio impilarli, col caso sopra e il video sotto.
   Il margine alto sta sul contenitore, cosi' la .oh-proof interna non ne
   aggiunge un secondo.
   ===================================================================== */
.proof-pair{ display:grid; gap:14px; margin:clamp(30px,5vw,48px) 0 0; }
.proof-pair > .oh-proof{ margin-top:0; }
@media (min-width:1100px){
  .proof-pair{ grid-template-columns:1fr 44%; align-items:center; }
}

/* =====================================================================
   ALBERO DECISIONALE (.flow)
   Una domanda in cima, i rami sotto, ognuno col suo esito colorato.
   Mobile-first: sul telefono i rami sono una catena verticale, ogni
   scheda col suo raccordo; da 760px si affiancano e il raccordo diventa
   una traversa orizzontale che unisce i centri delle colonne.
   I colori degli esiti sono gli stessi dei verdetti .excl-verdict, per
   non introdurre una seconda palette.
   ===================================================================== */
.flow{
  position:relative; background:var(--paper-2); border:1px solid var(--line);
  border-radius:18px; padding:clamp(18px,3.5vw,26px);
}
.flow + .flow{ margin-top:clamp(18px,3vw,26px); }
.flow-k{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--coral-600); margin-bottom:6px;
}
.flow-q{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:15px 18px; text-align:center;
}
.flow-q p{
  font-family:var(--f-display); font-weight:700; line-height:1.25;
  font-size:clamp(1.05rem,2.6vw,1.28rem);
}
.flow-branches{ position:relative; display:grid; gap:26px; margin-top:26px; }
/* raccordo verticale sopra ogni ramo */
.flow-b::before{
  content:""; position:absolute; top:-26px; left:50%; width:2px; height:26px;
  background:var(--line); transform:translateX(-1px);
}
.flow-b{
  position:relative; background:#fff; border:1px solid var(--line);
  border-top:4px solid var(--stone); border-radius:14px; padding:16px 18px;
}
.flow-b.is-ok{ border-top-color:#1f8a4c; }
.flow-b.is-warn{ border-top-color:#f2b400; }
.flow-b.is-bad{ border-top-color:#c23b47; }
.flow-path{
  display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px;
  background:rgba(0,0,0,.055); color:var(--stone); margin-bottom:9px;
}
.flow-b.is-ok .flow-path{ color:#1f8a4c; background:rgba(31,138,76,.12); }
.flow-b.is-warn .flow-path{ color:#8a6a00; background:rgba(242,180,0,.16); }
.flow-b.is-bad .flow-path{ color:#c23b47; background:rgba(194,59,71,.1); }
.flow-b h3{ font-family:var(--f-display); font-weight:700; font-size:1.12rem; line-height:1.2; }
.flow-b p{ color:var(--stone); font-size:.95rem; line-height:1.5; margin-top:7px; }
.flow-b p b{ color:var(--ink); }
.flow-note{ margin-top:16px; font-size:.9rem; color:var(--stone); line-height:1.55; }
@media (min-width:760px){
  .flow-branches{ grid-template-columns:1fr 1fr; gap:18px; margin-top:40px; }
  .flow-branches.is-3{ grid-template-columns:repeat(3,1fr); }
  /* Traversa che unisce i centri delle colonne, piu' la discesa dalla domanda.
     L'offset non e' un 25% secco: col gap di 18px il centro della prima
     colonna cade a W/4 meno un quarto del gap, quindi senza correzione la
     traversa finirebbe 4,5px oltre la discesa verticale del ramo. */
  .flow-branches::before{
    content:""; position:absolute; top:-20px;
    left:calc(25% - 4.5px); right:calc(25% - 4.5px);
    height:2px; background:var(--line);
  }
  .flow-branches.is-3::before{ left:calc(16.666% - 6px); right:calc(16.666% - 6px); }
  .flow-branches::after{
    content:""; position:absolute; top:-40px; left:50%; width:2px; height:20px;
    background:var(--line); transform:translateX(-1px);
  }
  .flow-b::before{ top:-20px; height:20px; }
}

/* =====================================================================
   INDICE DI PAGINA (.page-toc)
   Riga di pillole-ancora subito sotto la hero, su fondo chiaro. Serve a
   chi legge (arriva al pezzo che gli interessa) e ai motori, che vedono
   i temi della pagina nelle prime righe. Su telefono va a capo da sola.
   ===================================================================== */
.page-toc{
  margin-top:clamp(20px,3.5vw,28px); padding-top:clamp(16px,2.5vw,20px);
  border-top:1px solid var(--line);
}
.page-toc-k{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stone); margin-bottom:10px;
}
.page-toc ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.page-toc a{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:.9rem; font-weight:700; text-decoration:none; line-height:1.2;
}
.page-toc a:hover{ border-color:var(--coral); color:var(--coral-600); }
.page-toc a:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }