/* YOU — prototipo Home. Canvas assoluto 1920x4956, coordinate = Figma (node 128:3). */
:root{
  --teal:#008b95;
  --ink:#1d1d1b;
  --azzurro:#f1f8fa;   /* colore reale renderizzato (bbdde6 con opacità bassa sul bianco) */
  --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Poppins",sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
/* scale-to-fit: .fit riserva l'altezza scalata, .canvas viene scalato e centrato (--s via JS) */
.fit{position:relative;width:100%;overflow:hidden;height:calc(4956px * var(--s,1))}
.canvas{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(var(--s,1));transform-origin:top center;width:1920px;height:4956px;overflow:hidden;z-index:1}
.canvas>*{position:absolute}

/* BANDE COLORATE a tutta larghezza DIETRO il contenuto boxed (bleed full-viewport).
   Y/altezza = coordinata canvas × --s → restano allineate al canvas scalato a ogni larghezza. */
.bands{position:absolute;inset:0;width:100%;z-index:0;overflow:hidden;pointer-events:none}
.bands span{position:absolute;left:0;width:100%;display:block}
.bands .b-hero{top:calc(185px*var(--s,1));height:calc(675px*var(--s,1));background:var(--teal);overflow:hidden}
.bands .b-hero::before{content:"";position:absolute;inset:0;background:url("assets/texture-92_4228.png") center top/cover no-repeat;opacity:.4}
.bands .b1{top:calc(1516px*var(--s,1));height:calc(302px*var(--s,1));background:var(--azzurro)}
.bands .b2{top:calc(2614px*var(--s,1));height:calc(300px*var(--s,1));background:var(--azzurro)}
.bands .b3{top:calc(3526px*var(--s,1));height:calc(282px*var(--s,1));background:var(--azzurro)}
.bands .b4{top:calc(4296px*var(--s,1));height:calc(255px*var(--s,1));background:#bbdde6}

/* header .hd* + footer .ft* → chrome.css (condivisi) */

/* ===== HERO (testo + pannello; lo sfondo teal ora è full-width in .bands .b-hero) ===== */
.hero-heading{left:278px;top:274px;width:820px;color:#fff;font-family:"Poppins";font-weight:300;font-size:36px;line-height:1.4;letter-spacing:.3px}
.hero-heading b{font-family:"Madimi One";font-weight:400;letter-spacing:0}
.hero-para{left:278px;top:559px;width:660px;color:#fff}
.hero-para p{font-weight:300;font-size:26px;line-height:1.5}
.hero-para .lead{margin-top:26px}
.hero-para b{font-weight:600}
.hero-para .lead b{font-weight:700}
/* cuore di partenza (82:1426 @146,548, bianco su teal) */
.heart{left:146px;top:548px;width:35px;height:auto;z-index:2}
/* FILO continuo come SVG (path unico che curva) */
.wires{position:absolute;left:0;top:0;width:1920px;height:4956px;z-index:1;pointer-events:none}

/* pannello logo (Rectangle23 @1154,253 766x537 ; logo @1340,361 471x297) */
.hero-panel{left:1154px;top:253px;width:766px;height:537px;background:#fff;border-radius:30px;z-index:1}   /* card: 4 angoli arrotondati (galleggia nel teal full-width) */
.hero-panel img{position:absolute;left:148px;top:108px;width:471px;height:auto}

/* ===== TRE AZIONI + ESPLORA ===== */
.foto{border-radius:24px;z-index:1}
.foto-azioni{left:914px;top:933px;width:956px;height:678px}   /* G1: -8%, margine destro 50 invariato; +14px giù (feedback2) per coprire i fili a y=1590 */
/* figure trasparenti (chroma-key) posizionate SUI fili */
.sil{z-index:3}
.coppia{left:283px;top:1444px;width:87px;height:auto}
.climber{left:1348px;top:1690px;width:177px;height:auto}
/* feedback10: era top:1018 → fra il titolo ed ESPLORA (1711) restavano 583px di bianco. Portato al
   centro verticale della foto affiancata (.foto-azioni 933→1611, centro 1272; il titolo è alto 110px
   su due righe) → 1217. Sotto resta libero fino a .coppia (1444) e alla curva del filo (1479). */
.tit-azioni{left:212px;top:1217px;color:var(--teal);font-weight:300;font-size:44px;line-height:1.25;z-index:2}
.tit-azioni b{font-family:"Madimi One";font-weight:400}   /* "YOU" come il bottone Scopri YOU */

.blocco{color:var(--ink);z-index:2}
.esplora{left:209px;top:1711px;width:1098px}
.esplora .az-sub{margin-top:86px}   /* -14 compensa titolo 45px (era 100) */
.az-tit{font-family:"Poppins";font-weight:300;font-size:45px;line-height:1.1;color:var(--teal);margin-bottom:0}  /* Figma: titolo display 45px teal (override 17/18) */
.az-tit b{font-family:"Madimi One";font-weight:400}   /* keyword ESPLORA/PROGETTA/AGISCI in display, come tit-azioni */
.az-sub{font-weight:700;font-size:20px;margin-bottom:6px}
/* feedback3 F6: corpo 21→26/38 = come .hero-para sulla banda teal; liste 19→24/36 (stesso scarto di
   2px del disegno originale, era 21/19). **Le liste NON possono andare a 26**: l'elenco di PROGETTA
   passerebbe da 3431 a 3515 e arriverebbe a 11px dalla banda pallida .b3 (3526) — da 24 a 25 una
   riga va a capo e si perdono 41px di colpo, da 25 a 26 altri 43. A 24 restano 95px, come oggi.
   Le due foto sono state abbassate per ridare l'aria che i testi più grandi si mangiavano:
   .foto-couple 2328→2388 (+60) e .foto-woman 3451→3516 (+65 in totale). Sul filo cucito a
   .foto-couple: l'aggancio è la sua x (il tratto orizzontale y2504 termina sul bordo destro x592),
   quindi scenderla è sicuro finché copre y2504 — con top 2388 il margine è 116px. */
.blocco p{font-weight:300;font-size:26px;line-height:38px;max-width:1040px}
.blocco b{font-weight:600}
.az-p2{margin-top:34px}        /* stacco fra due paragrafi di corpo (Figma) */
.az-lead{margin-top:30px;font-weight:700}
.blocco ul{list-style:none;margin-top:8px}
.blocco li{position:relative;padding-left:22px;font-weight:300;font-size:24px;line-height:36px}
.blocco li::before{content:"•";position:absolute;left:4px;color:var(--ink)}
.blocco li b{font-weight:600}

/* ===== METÀ BASSA (PROGETTA / AGISCI / CITAZIONE / CTA) — bande in .bands ===== */
.foto-couple{left:50px;top:2388px;width:545px;height:802px;border-radius:24px}   /* G1: -8%, margine sinistro 50 invariato */
.foto-woman{left:1378px;top:3516px;width:492px;height:953px;border-radius:24px}   /* G1: -8%, margine destro 50 invariato */
.golfer{position:absolute;left:1093px;top:2297px;width:208px;height:auto;z-index:1}
.diver{left:380px;top:3230px;width:220px;height:auto;z-index:3}
.heart2{position:absolute;left:455px;top:3505px;width:50px;height:auto;z-index:3}
/* PROGETTA: testo allineato a destra */
.progetta{left:688px;top:2741px;width:965px;text-align:right}
.progetta ul{margin-top:8px;display:inline-block;text-align:left}   /* H3: elenco Costruirai a sinistra (bullet come Scoprirai), ma la ul resta a destra sotto il testo */
.progetta .az-sub{margin-top:186px}   /* -14 compensa titolo 45px (era 200) */
/* AGISCI */
.agisci{left:209px;top:3660px;width:1098px}   /* era 3585: allineato a y nodo Figma 82:717 */
.agisci .az-sub{margin-top:136px}   /* -14 compensa titolo 45px (era 150) */
/* CITAZIONE Carl Rogers */
.quote{position:absolute;left:213px;top:4350px;width:1500px;color:var(--teal);font-style:italic;font-weight:300;font-size:35px;line-height:1.35;z-index:2;border:0;padding:0;margin:0}  /* margin:0 batte blockquote{margin} di WP core */
/* CTA */
.cta{position:absolute;left:683px;top:4718px;width:480px;height:80px;background:#bcdfe6;border-radius:40px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:"Madimi One";color:var(--teal);font-size:26px;z-index:2}

/* ===== HOME MOBILE (<1024px) — colonna singola a flusso ===== */
.mobile-home{display:none}
@media(max-width:1023px){
  .fit{display:none}
  .mobile-home{display:block}
}
.mh-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.mh-hd img{width:118px;height:auto}
.mh-hd details{position:relative}
.mh-hd summary{list-style:none;cursor:pointer;font-size:26px;color:var(--teal);line-height:1;padding:4px 8px}
.mh-hd summary::-webkit-details-marker{display:none}
.mh-hd nav{position:absolute;right:0;top:40px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.14);border-radius:12px;padding:16px 22px;display:flex;flex-direction:column;gap:14px;min-width:190px;z-index:5}
.mh-hd nav a{color:var(--teal);text-decoration:none;font-weight:500;font-size:17px}

.mh-hero{background:var(--teal);color:#fff;padding:42px 26px 40px;position:relative;overflow:hidden}
.mh-hero::before{content:"";position:absolute;inset:0;background:url("assets/texture-92_4228.png") center/cover no-repeat;opacity:.18;pointer-events:none}
.mh-hero>*{position:relative}
.mh-hero h1{font-family:"Poppins";font-weight:300;font-size:26px;line-height:1.35;color:#fff}  /* esplicito: batte h1{color} di WP core (l'eredità perde) */
.mh-hero h1 b{font-family:"Madimi One";font-weight:400}
.mh-hero p{font-weight:300;font-size:16px;line-height:1.55;margin-top:20px;color:#fff}
.mh-hero .lead{font-weight:700;margin-top:16px}
.mh-hero .mh-logo{display:block;width:78%;max-width:290px;margin:30px auto 0;background:#fff;border-radius:20px;padding:24px}

.mh-intro{padding:38px 26px 0}
.mh-intro h2{color:var(--teal);font-weight:300;font-size:28px;line-height:1.25}
.mh-intro h2 b{font-family:"Madimi One";font-weight:400;color:var(--teal)}
.mh-intro img{display:block;width:min(100%,300px);height:auto;border-radius:16px;margin:22px auto 0}   /* M1 */

.mh-card{padding:34px 26px 0}
.mh-card img{display:block;width:min(100%,300px);height:auto;border-radius:16px;margin:0 auto 22px}   /* M1 */
.mh-card h3{font-family:"Poppins";font-weight:300;font-size:24px;color:var(--teal)}   /* coerente col desktop: titolo display teal */
.mh-card h3 b{font-family:"Madimi One";font-weight:400}   /* keyword in display */
.mh-card .sub{font-weight:700;font-size:16px;margin-top:12px}
.mh-card p{font-weight:300;font-size:16px;line-height:1.6;margin-top:10px}
.mh-card .lead{font-weight:700;margin-top:16px}
.mh-card ul{list-style:none;margin-top:8px}
.mh-card li{position:relative;padding-left:20px;font-weight:300;font-size:16px;line-height:1.6;margin-top:6px}
.mh-card li::before{content:"•";position:absolute;left:2px;color:var(--teal)}
.mh-card li b{font-weight:600}

.mh-quote{margin:42px 26px 0;color:var(--teal);font-style:italic;font-weight:300;font-size:20px;line-height:1.4;text-align:center;border:0;padding:0}
.mh-cta{display:block;margin:30px 26px 46px;padding:20px;background:#bcdfe6;border-radius:40px;text-align:center;text-decoration:none;font-family:"Madimi One";color:var(--teal);font-size:22px}