/* ===== Font self-hostati (GDPR: nessun hotlink a Google) ===== */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url('fonts/fraunces-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:300 600; font-display:swap;
  src:url('fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
}

:root{
  --paper:#FBF8F2; --paper-2:#F1ECE0; --ink:#1B1E1A; --ink-soft:#42473F;
  --stone:#6A6A5E; --line:#E2DDCF; --accent:#2F5D4E; --accent-d:#204238;
  --gold:#C69A3E; --card:#FFFFFF;
  --serif:"Fraunces",Georgia,serif; --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem);}
.eyebrow{font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem;}
.eyebrow-d{color:var(--accent-d);}
.eyebrow-light{color:#A9C7BA;}
.eyebrow-tight{margin-bottom:.4rem;}
h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; color:var(--ink);}
em{font-style:italic; color:var(--accent);}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ===== Header ===== */
header.site{position:sticky; top:0; z-index:20; background:rgba(251,248,242,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.site .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:.9rem; padding-bottom:.9rem;}
.brand{font-family:var(--serif); font-size:1.3rem; letter-spacing:-.02em;}
.brand b{font-weight:600;} .brand .dot{color:var(--accent);}
.wa{font-size:.85rem; font-weight:600; text-decoration:none; color:var(--ink); border:1px solid var(--line); padding:.5rem .9rem; border-radius:999px; display:inline-flex; gap:.4rem; align-items:center; transition:border-color .2s, background .2s;}
.wa:hover{border-color:var(--ink); background:#fff;}
.wa svg{width:15px; height:15px;}

/* ===== Hero ===== */
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3rem,7vw,5rem);}
h1{font-size:clamp(2.4rem,5.6vw,4.3rem); line-height:1.02; margin:0 0 1.3rem;}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--ink-soft); margin:0 0 1.9rem; max-width:34ch;}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center;}
.btn{font-family:var(--sans); font-size:1rem; font-weight:600; cursor:pointer; border-radius:999px; padding:.85rem 1.5rem; text-decoration:none; display:inline-flex; gap:.5rem; align-items:center; justify-content:center; border:1px solid transparent; transition:transform .15s, background .2s, border-color .2s;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-d); transform:translateY(-1px);}
.btn-primary:disabled{opacity:.7; cursor:default; transform:none;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.fineprint{margin:1.1rem 0 0; font-size:.82rem; color:var(--stone);}
.fineprint b{color:var(--ink); font-weight:600;}

/* ===== Recensione -> risposta (firma) ===== */
.rr{background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 0 rgba(27,30,26,.03), 0 24px 60px -34px rgba(27,30,26,.45); overflow:hidden;}
.rr-top{padding:1.4rem 1.5rem 1.3rem;}
.rr-meta{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem;}
.src{font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--stone); text-transform:uppercase;}
.src b{color:#003b95;}
.rating{display:inline-flex; gap:2px;}
.rating svg{width:16px; height:16px;}
.star-lit{fill:var(--gold);} .star-dim{fill:none; stroke:var(--gold); stroke-width:8; opacity:.4;}
.review-txt{font-family:var(--serif); font-size:1.12rem; line-height:1.42; margin:0 0 .7rem; color:var(--ink);}
.review-by{font-size:.82rem; color:var(--stone); margin:0;}
.illus{font-size:.72em; text-transform:uppercase; letter-spacing:.07em; color:var(--stone); border:1px solid var(--line); border-radius:4px; padding:.05em .4em; margin-left:.15em;}
.rr-divider{display:flex; align-items:center; gap:.7rem; padding:.55rem 1.5rem; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.rr-divider span:first-child{font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-d);}
.rr-divider .ln{flex:1; height:1px; background:var(--line);}
.rr-reply{padding:1.4rem 1.5rem 1.4rem;}
.rr-reply p{margin:0; color:var(--ink-soft); font-size:.98rem; line-height:1.62;}
.reveal{opacity:0; transform:translateY(14px); animation:up .7s .2s forwards cubic-bezier(.2,.7,.2,1);}
@keyframes up{to{opacity:1; transform:none;}}

/* ===== Fascia reputazione (firma animata) ===== */
.reputation{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.reputation .wrap{padding-top:clamp(3.2rem,6vw,5rem); padding-bottom:clamp(3.2rem,6vw,5rem); text-align:center;}
.reputation h2{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08; margin:.2rem auto 1.6rem; max-width:18ch;}
.stars{display:flex; justify-content:center; gap:clamp(.4rem,2.5vw,1.6rem); margin:0 auto 1.6rem;}
.star{position:relative; width:clamp(46px,8.5vw,92px); aspect-ratio:1;}
.star svg{position:absolute; inset:0; width:100%; height:100%;}
.star .o path{fill:none; stroke:var(--gold); stroke-width:5; opacity:.3;}
.star .f{clip-path:inset(100% 0 0 0); transition:clip-path 1s cubic-bezier(.2,.7,.2,1);}
.star .f path{fill:var(--gold);}
.reputation.in .star:nth-child(1) .f{clip-path:inset(0 0 0 0); transition-delay:0s;}
.reputation.in .star:nth-child(2) .f{clip-path:inset(0 0 0 0); transition-delay:.12s;}
.reputation.in .star:nth-child(3) .f{clip-path:inset(0 0 0 0); transition-delay:.24s;}
.reputation.in .star:nth-child(4) .f{clip-path:inset(0 0 0 0); transition-delay:.36s;}
.reputation.in .star:nth-child(5) .f{clip-path:inset(0 0 0 0); transition-delay:.48s;}
.reputation p{max-width:52ch; margin:0 auto; color:var(--ink-soft); font-size:1.05rem;}

/* ===== Blocchi generici ===== */
section.blk .wrap{padding-top:clamp(3.2rem,6vw,5rem); padding-bottom:clamp(3.2rem,6vw,5rem);}
.blk-alt{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec-head{margin:0 0 2.2rem; max-width:40ch;}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1; margin:.4rem 0 0;}

/* ===== Demo ===== */
.demo-panel{background:var(--ink); color:var(--paper); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;}
.demo-l{padding:clamp(1.6rem,3vw,2.4rem);}
.demo-l h2{color:var(--paper); font-size:clamp(1.6rem,2.6vw,2.1rem); margin:.3rem 0 1rem;}
.demo-l>p{color:#C6C7BF; font-size:.95rem; margin:0 0 1.4rem;}
.field{margin:0 0 .9rem;}
.field label{display:block; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#AEB0A5; margin:0 0 .35rem;}
.field textarea,.field input,.field select{width:100%; font:inherit; font-size:.92rem; color:var(--ink); background:var(--paper); border:1px solid #2a2c27; border-radius:10px; padding:.7rem .8rem;}
.field textarea{min-height:96px; resize:vertical;}
.field-row{display:grid; grid-template-columns:2fr 1fr; gap:.7rem;}
#demo-form .btn{width:100%; margin-top:.5rem;}
.demo-r{padding:clamp(1.6rem,3vw,2.4rem); background:#22251f; display:flex; flex-direction:column;}
.demo-r .tag{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#AEB0A5; margin:0 0 .8rem;}
.demo-out{background:var(--paper); color:var(--ink); border-radius:12px; padding:1.1rem 1.2rem; font-size:.95rem; line-height:1.6; flex:1; white-space:pre-wrap;}
.demo-placeholder{color:var(--stone); font-style:italic;}
.demo-note{font-size:.78rem; color:#8f9188; margin:.9rem 0 0;}

/* ===== Come funziona ===== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem;}
.step{border-top:2px solid var(--ink); padding:1.1rem 0 0;}
.step .n{font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--accent);}
.step h3{font-size:1.15rem; margin:.7rem 0 .5rem;}
.step p{margin:0; color:var(--ink-soft); font-size:.95rem;}

/* ===== Prezzi ===== */
.prices{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem;}
.price{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.7rem;}
.price.feat{border:1.5px solid var(--accent); position:relative;}
.price .flag{position:absolute; top:-.7rem; left:1.7rem; background:var(--accent); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .7rem; border-radius:999px;}
.price h3{font-size:1.2rem; margin:0 0 .3rem;}
.price .amt{font-family:var(--serif); font-size:2.4rem; line-height:1; margin:.2rem 0 .1rem;}
.price .amt small{font-family:var(--sans); font-size:.9rem; color:var(--stone); font-weight:500;}
.price p{color:var(--ink-soft); font-size:.95rem; margin:.8rem 0 0;}

/* ===== Chi c'e' dietro ===== */
.about{display:grid; grid-template-columns:auto 1fr; gap:1.8rem; align-items:center;}
.avatar{width:112px; height:112px; border-radius:50%; object-fit:cover; object-position:50% 22%; flex-shrink:0; border:3px solid #fff; box-shadow:0 10px 30px -14px rgba(27,30,26,.5);}
.about-h{font-size:clamp(1.6rem,2.6vw,2.1rem); margin:0;}
.about p{margin:.4rem 0 0; color:var(--ink-soft); max-width:60ch;}

/* ===== Lead ===== */
.lead-blk{background:var(--paper-2); border-radius:22px; padding:clamp(1.8rem,3vw,2.6rem); max-width:640px; margin:0 auto;}
.lead-h{font-size:clamp(1.6rem,2.6vw,2.1rem); margin:.3rem 0 1.3rem;}
.lead-blk .field label{color:var(--stone);}
.lead-blk .field input{color:var(--ink); background:#fff; border:1px solid var(--line);}
.lead-blk .btn{width:100%; margin-top:.6rem;}
#lead-website{position:absolute; left:-9999px; width:1px; height:0; opacity:0;}
#lead-esito{margin:1rem 0 0; font-size:.92rem; color:var(--accent-d); font-weight:600;}

footer{border-top:1px solid var(--line); margin-top:2rem;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding-top:1.6rem; padding-bottom:1.6rem; font-size:.82rem; color:var(--stone);}
footer a{color:var(--stone);}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:2.2rem;}
  .demo-panel{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr; gap:1.6rem;}
  .prices{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .about p{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1; transform:none;}
  .star .f{transition:none; clip-path:inset(0 0 0 0);}
  html{scroll-behavior:auto;}
}

/* ================================================================
   trattaconme — componenti Clara sopra il design system RispostaPronta
   ================================================================ */
[hidden]{display:none !important;}

.badge-clara{display:inline-flex; gap:.45rem; align-items:center; font-size:.85rem; font-weight:600;
  text-decoration:none; color:var(--ink); border:1px solid var(--line); padding:.5rem .9rem; border-radius:999px;
  cursor:pointer; transition:border-color .2s, background .2s;}
.badge-clara:hover{border-color:var(--ink); background:#fff;}
.badge-clara .live{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,93,78,.5);}70%{box-shadow:0 0 0 7px rgba(47,93,78,0);}100%{box-shadow:0 0 0 0 rgba(47,93,78,0);}}

/* ===== Sezione "Ti presento Clara" (pannello scuro, come la demo del sito) ===== */
.clara-panel{background:var(--ink); color:var(--paper); border-radius:22px; overflow:hidden;
  display:grid; grid-template-columns:.9fr 1.1fr; align-items:stretch;}
.clara-media{position:relative; background:#22251f; padding:clamp(1.4rem,3vw,2.2rem);
  display:flex; flex-direction:column; justify-content:center; gap:.7rem;}
.clara-media .video-box{position:relative;}
.clara-media video, .clara-media .video-box>img{width:100%; display:block; border-radius:14px; cursor:pointer;}
.clara-media .live-tag, .clara-cam .live-tag{position:absolute; left:.8rem; top:.8rem; z-index:2; display:inline-flex; gap:.4rem; align-items:center;
  background:rgba(27,30,26,.72); backdrop-filter:blur(4px); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.35rem .7rem; border-radius:999px;}
.clara-media .live-tag i, .clara-cam .live-tag i{width:7px; height:7px; border-radius:50%; background:#e0662e; display:inline-block; animation:pulse 2s infinite;}
.btn-audio-hook{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2; white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,.45); animation:pulsa-audio 2.2s ease-in-out infinite;}
@keyframes pulsa-audio{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.05);}}
.video-hint{text-align:center; font-size:.78rem; color:#8f9188; margin:0;}
.clara-copy{padding:clamp(1.8rem,3.5vw,3rem); display:flex; flex-direction:column; justify-content:center;}
.clara-copy .eyebrow{color:#A9C7BA;}
.clara-copy h2{color:var(--paper); font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.1; margin:.2rem 0 1rem;}
.clara-copy h2 em{color:var(--gold);}
.clara-copy p{color:#C6C7BF; font-size:1.02rem; margin:0 0 1rem; max-width:44ch;}
.clara-copy .quote{font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--paper);
  border-left:2px solid var(--gold); padding-left:1rem; margin:0 0 1.6rem;}
.clara-cta{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;}
.btn-voce{background:var(--gold); color:var(--ink);}
.btn-voce:hover{background:#d9ac52;}
.btn-scrivi{background:transparent; color:var(--paper); border-color:#4a4d45;}
.btn-scrivi:hover{background:#2c2f28;}
.clara-copy .mini{font-size:.78rem; color:#8f9188; margin:.9rem 0 0;}

/* ===== Nota trattativa sotto i prezzi ===== */
.tratta-nota{margin:1.6rem auto 0; max-width:560px; text-align:center; font-size:.95rem; color:var(--ink-soft);}
.tratta-nota a{color:var(--accent-d); font-weight:600;}

/* ===== Widget fluttuante ===== */
.clara-fab{position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:40;
  display:inline-flex; gap:.55rem; align-items:center; background:var(--accent); color:#fff;
  border:0; border-radius:999px; padding:.85rem 1.3rem; font:600 .95rem var(--sans); text-decoration:none; cursor:pointer;
  box-shadow:0 14px 34px -12px rgba(27,30,26,.6);}
.clara-fab:hover{background:var(--accent-d);}
.clara-fab .live{width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 2s infinite;}

@media (max-width:900px){
  .clara-panel{grid-template-columns:1fr;}
  .clara-media{min-height:auto;}
}

/* ================================================================
   Overlay voce + chat — riuso funzionale (tratta.js), palette calda
   ================================================================ */
.overlay{position:fixed; inset:0; background:rgba(27,30,26,.94); display:flex; align-items:center; justify-content:center; z-index:50;}
.overlay-box{width:min(560px,92vw); background:#22251f; border:1px solid #3a3d36; border-radius:20px;
  padding:28px; display:flex; flex-direction:column; gap:16px; color:var(--paper);
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto;}
.onda{display:flex; gap:6px; justify-content:center; height:44px; align-items:center;}
.onda span{width:6px; height:12px; border-radius:3px; background:var(--gold); animation:onda 1s ease-in-out infinite;}
.onda span:nth-child(2){animation-delay:.15s;} .onda span:nth-child(3){animation-delay:.3s;}
.onda span:nth-child(4){animation-delay:.45s;} .onda span:nth-child(5){animation-delay:.6s;}
@keyframes onda{0%,100%{height:10px;}50%{height:38px;}}
.onda.muta span{animation:none; height:8px; background:#4a4d45;}
.sub{min-height:1.4em; font-size:1.02rem; margin:0;}
.sub-clara{color:var(--paper);} .sub-tu{color:#A9C7BA; font-style:italic;}
.card-link{background:#fff; border:1px solid var(--accent); border-radius:14px; padding:16px;
  text-align:center; display:grid; gap:10px; color:var(--ink);}
.card-etichetta{font-weight:700;}
.card-link .card-url{margin:0;}
.overlay-piede{display:flex; justify-content:space-between; align-items:center;}
.timer{color:#8f9188; font-variant-numeric:tabular-nums;}

.chat{position:fixed; inset:0; background:rgba(27,30,26,.6); display:flex; align-items:flex-end; justify-content:center; z-index:50;}
.chat-box{width:min(560px,100vw); height:min(680px,92vh); background:var(--paper); border:1px solid var(--line);
  border-radius:20px 20px 0 0; display:flex; flex-direction:column; overflow:hidden;}
.chat-testata{display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
  border-bottom:1px solid var(--line); font-weight:600; font-family:var(--serif); font-size:1.05rem;}
.chat-testata button{background:none; border:0; color:var(--stone); font-size:1.4rem; line-height:1; cursor:pointer;}
.chat-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:85%; padding:10px 14px; border-radius:14px; font-size:.98rem; line-height:1.5;}
.msg-clara{background:var(--card); border:1px solid var(--line); align-self:flex-start;}
.msg-tu{background:var(--accent); color:#fff; align-self:flex-end;}
#chat-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);}
#chat-input{flex:1; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; color:var(--ink); font:inherit;}
#chat-card-link{margin:0 12px 12px;}

/* --- Webcam Clara: loop idle/parla, crossfade pilotato da .sta-parlando (tratta.js) --- */
.clara-cam{position:relative; width:min(240px,56vw); aspect-ratio:4/5; margin:0 auto;
  border-radius:16px; overflow:hidden;
  background:url('img/clara-ritratto.jpg') center top/cover no-repeat #22251f;}
.clara-cam video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.clara-cam .cam-parla{opacity:0; transition:opacity .2s ease;}
.clara-cam.sta-parlando .cam-parla{opacity:1;}
.clara-cam-mini{width:40px; height:40px; aspect-ratio:auto; border-radius:50%; flex:none; margin:0;}
.chat-chi{display:flex; align-items:center; gap:10px;}
.chat-scrive{font-family:var(--sans); font-style:italic; font-weight:400; font-size:.82rem; color:var(--stone);}
@media (prefers-reduced-motion:reduce){.clara-cam .cam-parla{transition:none;}}
@media (max-height:700px){.overlay-box .clara-cam{width:min(160px,40vw);}}

@media (max-width:900px){
  .clara-cta{flex-direction:column; align-items:stretch;}
  .clara-cta .btn{width:100%;}
}