/* YOU — pagina "Cos'è YOU". Canvas assoluto 1920x2964, coordinate = Figma (frame 37:2, origine 18316,-101). */
:root{
  --teal:#008b95;
  --ink:#1d1d1b;
  --azzurro:#bbdde6;   /* SFONDO AZZURRO 37:730 = 187,221,230 */
  --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Poppins",sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
.fit{position:relative;width:100%;overflow:hidden;height:calc(2964px * var(--s,1))}
.canvas{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(var(--s,1));transform-origin:top center;width:1920px;height:2964px;overflow:hidden;z-index:1}
.canvas>*{position:absolute}

/* BANDE full-width DIETRO il canvas boxed (Y/altezza = coord canvas × --s). Vedi lessons.md. */
.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(935px*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 .b-azz{top:calc(2115px*var(--s,1));height:calc(655px*var(--s,1));background:var(--azzurro);overflow:hidden}
.bands .b-azz::before{content:"";position:absolute;inset:0;background:url("assets/texture-92_4228.png") center top/cover no-repeat;opacity:.35}

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

/* ===== HERO teal — sfondo ora in .bands full-width ===== */
.hero-title{left:160px;top:291px;width:896px;color:#fff;font-family:"Poppins";font-weight:300;font-size:48px;line-height:1.1}
.hero-title b{font-family:"Madimi One";font-weight:400}   /* "YOU" */
.hero-heart{left:160px;top:413px;width:35px;height:auto;z-index:2}
.hero-body{left:222px;top:419px;width:834px;color:#fff;font-family:"Poppins";font-weight:400;font-size:26px;line-height:38px}
/* Pannello-logo = quello della home, stesse identiche coordinate (richiesta 2026-07-15). Il testo
   della hero arriva a x=1055, il pannello parte da 1154: nessuna collisione. Sta dentro la banda
   teal (185-1120) come sulla home (185-860). */
/* G3: hero = foto (era il pannello-logo). Allineata alle altre hero a top:291 (G2). */
.hero-photo{left:1161px;top:291px;width:757px;height:542px;border-radius:35px;object-fit:cover;z-index:2}
.hero-body p{margin-bottom:36px}
.hero-body p:last-child{margin-bottom:0}
.hero-body b{font-weight:600}

/* FILO continuo (SVG unico) */
.wires{position:absolute;left:0;top:0;width:1920px;height:2964px;z-index:1;pointer-events:none}

/* ===== A CHI è rivolto ===== */
.tit-achi{left:217px;top:1234px;color:var(--teal);font-family:"Poppins";font-weight:300;font-size:60px;line-height:1;z-index:2}
.tit-achi b{font-family:"Madimi One";font-weight:400}   /* "A CHI" display */
.achi-list{left:204px;top:1327px;width:878px;list-style:none;color:var(--ink);z-index:2}
/* feedback3 F6: corpi su fondo NON teal portati a 26px/38px = come .hero-body sulla banda teal
   ("ingrandire come su blocchi verdi"). Misurato prima di toccare: l'elenco cresce 350→418, resta
   a 58px dal pulsante (1803); .gratuito 140→190 chiude a 1993 contro la fascia azzurra a 2115;
   .contact 317→364 chiude a 2611 dentro la fascia (2115+655=2770). Nessuna collisione → i fili SVG
   e le coordinate di bottone/sagome/cuore NON si toccano. Rimisurare se cambiano questi testi. */
.achi-list li{position:relative;padding-left:22px;font-weight:300;font-size:26px;line-height:38px;margin-bottom:0}
.achi-list li::before{content:"•";position:absolute;left:4px;color:var(--ink)}
.achi-list b{font-weight:600}
.gratuito{left:900px;top:1803px;width:880px;text-align:left;font-weight:600;font-size:26px;line-height:38px;color:var(--ink);z-index:2}   /* C2: a destra del pulsante PARTECIPA, oltre il filo (x=832) */

/* ===== PARTECIPA (bottone + testo) ===== */
.btn-part{left:241px;top:1803px;width:480px;height:80px;background:var(--azzurro);border-radius:40px;z-index:2;display:flex;align-items:center;justify-content:center;text-decoration:none}
.btn-part span{font-family:"Madimi One";font-weight:400;font-size:36px;color:var(--teal);letter-spacing:1px}
.sil{z-index:2}
.fig-walk{left:315px;top:1971px;width:52px;height:auto}
.fig-couple{left:489px;top:1959px;width:87px;height:auto}
.heart-end{left:815px;top:2097px;width:35px;height:auto;z-index:2}

/* ===== FASCIA AZZURRA (basso) — sfondo ora in .bands full-width ===== */
.contact{left:249px;top:2247px;width:1560px;z-index:2}
.contact h2{color:var(--teal);font-family:"Poppins";font-weight:300;font-size:60px;line-height:1.15;margin-bottom:44px}
.contact p{font-family:"Poppins";font-weight:400;font-size:26px;line-height:38px;color:var(--ink)}
.contact p.gap{margin-top:30px}
.contact b{font-weight:600}

/* ===== MOBILE (<1024px) — colonna singola a flusso ===== */
.mobile{display:none}
@media(max-width:1023px){
  .fit{display:none}
  .mobile{display:block}
}
.m-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.m-hd img{width:118px;height:auto}
.m-hd details{position:relative}
.m-hd summary{list-style:none;cursor:pointer;font-size:26px;color:var(--teal);line-height:1;padding:4px 8px}
.m-hd summary::-webkit-details-marker{display:none}
.m-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}
.m-hd nav a{color:var(--teal);text-decoration:none;font-weight:500;font-size:17px}
.m-hd nav a.active{font-weight:700}

.m-hero{background:var(--teal);color:#fff;padding:40px 26px;position:relative;overflow:hidden}
.m-hero::before{content:"";position:absolute;inset:0;background:url("assets/texture-92_4228.png") center/cover no-repeat;opacity:.15;pointer-events:none}
.m-hero>*{position:relative}
.m-hero h1{font-family:"Poppins";font-weight:300;font-size:34px;color:#fff}
.m-hero h1 b{font-family:"Madimi One";font-weight:400}
/* logo nella hero mobile = quello della home (.mh-hero .mh-logo di you.css) */
.m-hero img{display:block;width:min(100%,320px);height:auto;border-radius:18px;margin:30px auto 0}
.m-hero p{font-weight:400;font-size:17px;line-height:1.55;margin-top:20px;color:#fff}
.m-hero p b{font-weight:600}

.m-sec{padding:38px 26px 0}
.m-sec h2{color:var(--teal);font-family:"Poppins";font-weight:300;font-size:32px;margin-bottom:18px}
.m-sec h2 b{font-family:"Madimi One";font-weight:400}
.m-list{list-style:none}
.m-list li{position:relative;padding-left:20px;font-weight:300;font-size:16px;line-height:1.6;margin-top:10px}
.m-list li::before{content:"•";position:absolute;left:2px;color:var(--teal)}
.m-list b{font-weight:600}
.m-gratuito{font-weight:600;font-size:16px;line-height:1.6;margin-top:26px}

.m-btn{display:block;margin:34px auto 0;width:min(360px,80%);padding:18px;background:var(--azzurro);border-radius:40px;text-align:center;text-decoration:none;font-family:"Madimi One";color:var(--teal);font-size:26px}
.m-figs{display:flex;justify-content:center;align-items:flex-end;gap:34px;margin-top:30px}
.m-figs img{height:120px;width:auto}

.m-contact{background:var(--azzurro);margin-top:40px;padding:40px 26px}
.m-contact h2{color:var(--teal);font-family:"Poppins";font-weight:300;font-size:30px;line-height:1.2;margin-bottom:24px}
.m-contact p{font-weight:400;font-size:16px;line-height:1.6;color:var(--ink)}
.m-contact p.gap{margin-top:20px}
.m-contact b{font-weight:600}