/* ItalForm — v2 · gallery-minimal, Lago-inspired
   bianco #FCFCFA · nero #16140F · legno #A97B4F · aria #F0EFE9 · segnale #F2600C */
:root{
  --bianco:#FCFCFA; --nero:#16140F; --legno:#A97B4F; --aria:#F0EFE9;
  --segnale:#F2600C; --grigio:#6E6A61; --riga:#E3E1D9; --max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--bianco);color:var(--nero);font-size:17px;line-height:1.6;font-variation-settings:'wdth' 100}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--segnale);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 5vw}

/* type voices */
.display{font-weight:500;font-variation-settings:'wdth' 125;letter-spacing:-.03em;line-height:.98;text-transform:lowercase}
h1.display{font-size:clamp(2.8rem,8vw,6.5rem)}
h2.display{font-size:clamp(2rem,5vw,3.8rem);margin-bottom:.5em}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grigio);font-weight:500;margin-bottom:22px}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:#3A372F;max-width:34em}
.small{font-size:.85rem;color:var(--grigio)}

/* nav */
header{position:sticky;top:0;z-index:60;background:rgba(252,252,250,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--riga)}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:18px 5vw}
.brand{font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.brand span{color:var(--legno)}
nav.links a{margin-left:30px;font-size:.92rem;color:#3A372F}
nav.links a:hover{color:var(--nero)}
nav.links a.cta{color:var(--bianco);background:var(--nero);padding:10px 20px;border-radius:2px}
nav.links a.cta:hover{background:var(--segnale)}
.navtoggle{display:none;background:none;border:1px solid var(--riga);padding:7px 11px;font-size:1.05rem;cursor:pointer;border-radius:2px}
@media(max-width:840px){
  nav.links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bianco);border-bottom:1px solid var(--riga);padding:8px 5vw 22px;flex-direction:column;align-items:flex-start}
  nav.links.open{display:flex}
  nav.links a{margin:12px 0 0}
  .navtoggle{display:block}
}

/* hero */
.hero{padding:11vh 0 9vh}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:center}
.hero .lead{margin:34px 0 40px}
.btn{display:inline-block;background:var(--nero);color:var(--bianco);padding:16px 32px;border-radius:2px;font-size:.95rem;font-weight:500;transition:background .2s}
.btn:hover{background:var(--segnale)}
.btn.ghost{background:transparent;color:var(--nero);border:1px solid var(--nero);margin-left:14px}
.btn.ghost:hover{border-color:var(--segnale);color:var(--segnale);background:transparent}
.float{box-shadow:0 30px 60px -30px rgba(22,20,15,.25)}
@media(max-width:840px){.hero-grid{grid-template-columns:1fr}.hero{padding:7vh 0 6vh}}

/* fact strip */
.strip{border-top:1px solid var(--riga);border-bottom:1px solid var(--riga);padding:22px 0}
.strip .wrap{display:flex;gap:2.5em;flex-wrap:wrap;justify-content:space-between;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}

/* product blocks */
.blocco{padding:12vh 0}
.blocco.aria{background:var(--aria)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.duo.flip>div:first-child{order:2}
.duo .eyebrow{margin-bottom:14px}
.duo p{margin:22px 0 30px;max-width:30em;color:#3A372F}
.link{font-weight:500;border-bottom:2px solid var(--segnale);padding-bottom:2px}
.link:hover{color:var(--segnale)}
@media(max-width:840px){.duo{grid-template-columns:1fr}.duo.flip>div:first-child{order:0}.blocco{padding:8vh 0}}

/* numbers */
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:5vw;padding:10vh 0}
.numeri .n{font-variation-settings:'wdth' 125;font-weight:500;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.02em}
.numeri .n em{font-style:normal;color:var(--segnale)}
.numeri p{color:var(--grigio);font-size:.92rem;margin-top:8px;max-width:20em}
@media(max-width:840px){.numeri{grid-template-columns:1fr;gap:34px;padding:7vh 0}}

/* method */
.metodo{counter-reset:m}
.passo{border-top:1px solid var(--riga);padding:34px 0;display:grid;grid-template-columns:90px 1fr 1.4fr;gap:3vw;align-items:baseline}
.passo::before{counter-increment:m;content:"0" counter(m);font-variation-settings:'wdth' 125;font-size:1.6rem;color:var(--legno);font-weight:500}
.passo h3{font-size:1.2rem;font-weight:600}
.passo p{color:#3A372F}
@media(max-width:840px){.passo{grid-template-columns:60px 1fr}.passo p{grid-column:2}}

/* rising toggle — signature */
.toggle-scene{position:relative;max-width:880px;margin:0 auto}
.toggle-scene img{width:100%;transition:opacity .45s ease}
.toggle-scene img.giu{position:absolute;inset:0;opacity:0}
.toggle-scene.down img.giu{opacity:1}
.toggle-scene.down img.su{opacity:0}
.remote{display:flex;justify-content:center;gap:0;margin-top:26px}
.remote button{font-family:inherit;font-size:.88rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:14px 28px;border:1px solid var(--nero);background:var(--bianco);cursor:pointer;transition:all .2s}
.remote button:first-child{border-radius:2px 0 0 2px;border-right:none}
.remote button:last-child{border-radius:0 2px 2px 0}
.remote button[aria-pressed="true"]{background:var(--nero);color:var(--bianco)}
.remote button:hover{color:var(--segnale)}
.remote button[aria-pressed="true"]:hover{color:var(--bianco);background:var(--segnale)}
.scene-caption{text-align:center;margin-top:14px;font-size:.9rem;color:var(--grigio)}

/* specs */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--riga);border:1px solid var(--riga)}
.specs div{background:var(--bianco);padding:26px 24px}
.specs .k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grigio);margin-bottom:10px}
.specs .v{font-size:1.15rem;font-weight:600}
.specs .v small{display:block;font-weight:400;color:var(--grigio);font-size:.82rem;margin-top:4px}

/* gallery pairs */
.coppie{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
/* una sola immagine: si centra e non resta appesa a sinistra */
.coppie:has(> .coppia:only-child){grid-template-columns:1fr;max-width:880px;margin:0 auto}
.coppia img{margin-bottom:12px}
.coppia figcaption{font-size:.85rem;color:var(--grigio)}
@media(max-width:840px){.coppie{grid-template-columns:1fr}}

/* faq */
.faq details{border-top:1px solid var(--riga);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--riga)}
.faq summary{font-weight:600;cursor:pointer;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";color:var(--segnale);font-weight:500;font-size:1.3rem}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;color:#3A372F;max-width:56em}

/* checklists */
ul.nota{list-style:none}
ul.nota li{padding:10px 0 10px 26px;position:relative;color:#3A372F;border-top:1px solid var(--riga)}
ul.nota li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:2px;background:var(--segnale)}

/* cta band */
.band{background:var(--nero);color:var(--bianco);padding:12vh 0;text-align:left}
.band .display{color:var(--bianco)}
.band .lead{color:#CFCBC2;margin:26px 0 38px}
.band .btn{background:var(--bianco);color:var(--nero)}
.band .btn:hover{background:var(--segnale);color:var(--bianco)}

/* footer */
footer{padding:60px 0 46px;border-top:1px solid var(--riga);font-size:.9rem;color:var(--grigio)}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer a:hover{color:var(--nero)}

/* ══════════════════════════════════════════════════════════
   v3 — le due porte (hero) + lastre prodotto
   ══════════════════════════════════════════════════════════ */

/* hero a due porte */
.porte{display:flex;height:calc(100svh - 71px);min-height:560px;max-height:900px;background:var(--nero)}
.porta{position:relative;flex:1 1 50%;overflow:hidden;transition:flex-grow .7s cubic-bezier(.16,.84,.44,1);isolation:isolate}
.porta + .porta{border-left:1px solid rgba(252,252,250,.18)}
.scena{position:absolute;inset:0}
.scena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease,transform 1.2s cubic-bezier(.16,.84,.44,1)}
.scena img.giu{opacity:0}
.porta.down .scena img.giu{opacity:1}
.porta.down .scena img.su{opacity:0}
.porta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,20,15,.44) 0%,rgba(22,20,15,.06) 24%,rgba(22,20,15,.30) 44%,rgba(22,20,15,.66) 62%,rgba(22,20,15,.95) 100%)}
.porta-txt{position:absolute;inset:auto 0 0 0;z-index:2;padding:0 clamp(24px,3.4vw,54px) clamp(30px,4vh,52px);color:var(--bianco)}
.porta-quota{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bianco);font-weight:600;margin-bottom:14px}
.porta-nome{font-variation-settings:'wdth' 125;font-weight:500;text-transform:lowercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(2.6rem,6.2vw,5.6rem);color:var(--bianco)}
.porta-claim{font-size:clamp(1rem,1.25vw,1.22rem);color:rgba(252,252,250,.9);margin:14px 0 26px;max-width:22em}
.porta-azioni{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.porta-cta{display:inline-block;background:var(--bianco);color:var(--nero);padding:14px 28px;border-radius:2px;font-size:.93rem;font-weight:600;transition:background .2s,color .2s}
.porta-cta:hover{background:var(--segnale);color:var(--bianco)}
.switch{font-family:inherit;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bianco);background:transparent;border:1px solid rgba(252,252,250,.55);padding:12px 20px;border-radius:2px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.switch:hover{border-color:var(--bianco);background:rgba(252,252,250,.12)}
.switch::before{content:"▼";margin-right:9px;font-size:.7em;display:inline-block;transition:transform .5s}
.porta.down .switch::before{transform:rotate(180deg)}
@media(hover:hover) and (min-width:841px){
  .porte:hover .porta{flex-grow:.86}
  .porta:hover{flex-grow:1.28}
  .porta:hover .scena img{transform:scale(1.035)}
  /* l'hover fa da anteprima; appena si usa il pulsante il comando passa a chi legge */
  .porta:not(.manual):hover .scena img.giu{opacity:1}
  .porta:not(.manual):hover .scena img.su{opacity:0}
}
@media(max-width:840px){
  .porte{flex-direction:column;height:auto;max-height:none}
  .porta{flex:1 1 auto;min-height:64svh}
  .porta + .porta{border-left:none;border-top:1px solid rgba(252,252,250,.18)}
}

/* riga di orientamento sotto le porte */
.scelta{border-bottom:1px solid var(--riga);padding:26px 0}
.scelta .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2em 2.5em;align-items:start}
.scelta p{font-size:.94rem;color:#3A372F;max-width:34em}
.scelta strong{font-weight:600}
.scelta em{font-style:normal;color:var(--segnale);font-weight:600}

/* lastre prodotto a tutto campo */
.lastra{display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch;background:var(--bianco)}
.lastra.aria{background:var(--aria)}
.lastra.flip>.lastra-img{order:2}
.lastra-img{position:relative;min-height:clamp(400px,68svh,760px)}
.lastra-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lastra-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(46px,7vw,104px) clamp(26px,5vw,86px)}
.lastra-txt p{color:#3A372F;margin:20px 0 0;max-width:32em}
.lastra-txt .link{margin-top:32px;align-self:flex-start}
.lastra-dati{display:flex;gap:2.4em;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--riga)}
.lastra-dati div{min-width:110px}
.lastra-dati b{display:block;font-variation-settings:'wdth' 125;font-weight:500;font-size:1.5rem;letter-spacing:-.02em}
.lastra-dati span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio)}
@media(max-width:840px){
  .lastra{grid-template-columns:1fr}
  .lastra.flip>.lastra-img{order:0}
  .lastra-img{min-height:56svh}
}

/* accessibilità */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════
   modulo di contatto
   ══════════════════════════════════════════════════════════ */
.modulo{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;margin-top:44px;max-width:760px}
.campo{display:flex;flex-direction:column;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grigio);font-weight:600;margin-bottom:9px}
.campo label .opz{letter-spacing:0;text-transform:none;font-weight:400;color:var(--grigio);font-size:.8rem}
.campo input,.campo select,.campo textarea{width:100%;max-width:100%;font-family:inherit;font-size:1rem;color:var(--nero);background:var(--bianco);border:1px solid var(--riga);border-radius:2px;padding:14px 16px;transition:border-color .2s}
.campo textarea{min-height:132px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--nero)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--segnale);outline-offset:2px}
.campo .aiuto{font-size:.84rem;color:var(--grigio);margin-top:7px}
.consenso{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:#3A372F}
.consenso input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--nero)}
.consenso a{border-bottom:1px solid var(--segnale)}
.invio{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.invio button{font-family:inherit;display:inline-block;background:var(--nero);color:var(--bianco);padding:16px 34px;border:none;border-radius:2px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s}
.invio button:hover{background:var(--segnale)}
.invio .aiuto{font-size:.86rem;color:var(--grigio)}
.esca{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.recapiti{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--riga);border:1px solid var(--riga);margin-top:40px}
.recapiti div{background:var(--bianco);padding:26px 24px}
.recapiti .k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grigio);margin-bottom:10px}
.recapiti .v{font-size:1.02rem;font-weight:600;line-height:1.45}
.recapiti .v small{display:block;font-weight:400;color:var(--grigio);font-size:.84rem;margin-top:5px}
@media(max-width:840px){.modulo{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════
   il test del metro — calcolatore altezza
   ══════════════════════════════════════════════════════════ */
.prova{max-width:760px;margin:44px auto 0;border:1px solid var(--riga);background:var(--bianco)}
.prova-testa{padding:30px 32px 0}
.prova-passo{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--segnale);font-weight:600;margin-bottom:12px}
.prova-dom{font-variation-settings:'wdth' 115;font-weight:500;font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.02em;line-height:1.12}
.prova-corpo{padding:22px 32px 30px}
.prova-riga{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.prova-campo{display:flex;flex-direction:column;min-width:0}
.prova-campo label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio);font-weight:600;margin-bottom:8px}
.prova-campo input{font-family:inherit;font-size:1.6rem;font-variation-settings:'wdth' 115;font-weight:500;width:110px;max-width:100%;padding:10px 14px;border:1px solid var(--riga);border-radius:2px;background:var(--bianco);color:var(--nero)}
.prova-campo input:focus{outline:none;border-color:var(--nero)}
.prova-campo input:focus-visible{outline:2px solid var(--segnale);outline-offset:2px}
.prova-unita{font-size:.95rem;color:var(--grigio);padding-bottom:16px}
.prova-esito{margin-top:26px;padding-top:24px;border-top:1px solid var(--riga)}
.prova-cifra{font-variation-settings:'wdth' 125;font-weight:500;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1}
.prova-cifra em{font-style:normal;color:var(--segnale)}
.prova-spieg{color:#3A372F;margin-top:14px;max-width:44em}
.prova-verdetto{display:inline-block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:7px 14px;border-radius:2px;margin-top:18px}
.prova-verdetto.si{background:var(--nero);color:var(--bianco)}
.prova-verdetto.forse{background:var(--segnale);color:var(--bianco)}
.prova-verdetto.no{background:var(--aria);color:#3A372F;border:1px solid var(--riga)}
.prova-nota{font-size:.86rem;color:var(--grigio);margin-top:16px}
@media(max-width:560px){.prova-testa{padding:24px 20px 0}.prova-corpo{padding:18px 20px 24px}}
.prova-extra{font-size:.95rem;color:#3A372F;margin-top:10px;font-weight:500}

/* ══════════════════════════════════════════════════════════
   Rising — schema altezze, video, galleria alto/basso
   ══════════════════════════════════════════════════════════ */
.schemi{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.schema-fig{border:1px solid var(--riga);background:var(--bianco);padding:14px 10px 6px}
.schema-fig svg{display:block;width:100%;height:auto}
.schema-nota{font-size:.86rem;color:var(--grigio);margin-top:18px;text-align:center}
@media(max-width:840px){.schemi{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}

.video-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.video,.video-griglia iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:var(--nero);cursor:pointer;overflow:hidden}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s}
.video:hover img{transform:scale(1.03);opacity:.85}
.video-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(252,252,250,.92)}
.video-play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--nero)}
.video:hover .video-play{background:var(--segnale)}
@media(max-width:840px){.video-griglia{grid-template-columns:1fr}}

.galleria{display:flex;flex-direction:column;gap:56px}
.gal-coppia{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gal-evidenza{margin-top:56px}
.gal-coppia figure{position:relative;margin:0}
.gal-coppia img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal-tag{position:absolute;left:12px;top:12px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;background:var(--bianco);color:var(--nero);padding:5px 10px;border-radius:2px}
.gal-cap{grid-column:1/-1;font-size:.9rem;color:var(--grigio);margin-top:2px}
@media(max-width:560px){.gal-coppia{grid-template-columns:1fr}}