/* ===== Proposta B: logo a due tratti, simboli, mosaico ===== */
:root{ --bv:#183F3F; --bav:#F0ECE0; --bpi:#DED6CD; --bto:#A39889; --brv:#8C724F; --bmo:#4D4339; --bnk:#1B1D1C; }
.spb{position:relative;display:block;width:100%}
.spb.full{aspect-ratio:746/552} .spb.mark{aspect-ratio:345/140} .spb.words{aspect-ratio:746/392}
.spb i{position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.sym{display:block;width:100%;height:auto;overflow:visible}

/* ---------- comparsa B ---------- */
.b-hero{position:relative;min-height:100svh;background:var(--bv);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:96px var(--pad) 96px var(--left)}
.b-hero .kick{position:absolute;left:var(--left);top:clamp(40px,7vh,72px);color:var(--bpi);margin:0}
.b-hero .n{position:absolute;right:var(--pad);top:clamp(40px,7vh,72px);font-weight:500;font-size:clamp(20px,2.3vw,36px);letter-spacing:-.035em;color:var(--bav);opacity:.55}
.b-hero .logo{position:relative;width:min(46vw,640px);z-index:2}
.b-hero .float{position:absolute;z-index:1;animation:bob 9s ease-in-out infinite}
.b-hero .float:nth-of-type(2n){animation-duration:11s;animation-delay:-3s}
.b-hero .float:nth-of-type(3n){animation-duration:13s;animation-delay:-6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
.b-hero .scroll{position:absolute;left:var(--left);bottom:clamp(24px,5vh,48px);color:#ffffffb3;z-index:2}
.bw-s{clip-path:inset(0 100% 0 0)} .bw-p{clip-path:inset(0 0 0 100%)} .bw-w{opacity:0;transform:translateY(18px)}
.b-hero .float{opacity:0;transition:opacity 1.2s ease}
.b-hero.play .float{opacity:1}
.b-hero.play .bw-s{animation:wipeX 1s cubic-bezier(.65,0,.25,1) .2s forwards}
.b-hero.play .bw-p{animation:wipeL 1s cubic-bezier(.65,0,.25,1) .6s forwards}
.b-hero.play .bw-w{animation:rise .9s cubic-bezier(.2,.7,.2,1) 1.3s forwards}
.b-hero.play .bw-w.t{animation-delay:1.55s}
@keyframes wipeL{to{clip-path:inset(0 0 0 0)}}

/* ---------- come nasce B: dal dente alle due linee ---------- */
.story-b{position:relative;height:500svh;background:var(--bav)}
.story-b .stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:0 var(--pad) 0 var(--left);overflow:hidden}
.story-b .stage{position:relative;width:min(100%,600px);aspect-ratio:345/260;justify-self:center}
.story-b .box{position:absolute;left:0;right:0;top:23.08%;height:53.85%;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
.story-b[data-step="4"] .box{transform:translateY(-42.9%) scale(.462)}
.story-b .box .spb{position:absolute;inset:0}
.story-b .spb i{transition:transform 1.2s cubic-bezier(.65,0,.25,1),opacity .6s ease}
.story-b .tooth-sym{position:absolute;left:32.75%;top:45.4%;width:44%;transform:translate(-50%,-50%);transition:transform 1.1s cubic-bezier(.65,0,.25,1),opacity .8s ease}
.story-b .ann{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.story-b .ann *{vector-effect:non-scaling-stroke}
.story-b .ann g{opacity:0;transition:opacity .3s ease}
.story-b .ann .ln{fill:none;stroke:var(--bnk);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1)}
.story-b .ann .dot{fill:#F26A1B}
.story-b .ann text{font-family:"neue-haas-unica",Unica,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.03em;fill:var(--bnk)}
/* passi */
.story-b .spb .S,.story-b .spb .P{opacity:0}
.story-b[data-step="1"] .spb .S,.story-b[data-step="1"] .spb .P,
.story-b[data-step="2"] .spb .S,.story-b[data-step="2"] .spb .P,
.story-b[data-step="3"] .spb .S,.story-b[data-step="3"] .spb .P,
.story-b[data-step="4"] .spb .S,.story-b[data-step="4"] .spb .P{opacity:1}
.story-b[data-step="2"] .spb .P{opacity:.18} .story-b[data-step="3"] .spb .S{opacity:.18}
.story-b:not([data-step="4"]) .spb .P{transform:translate(-32.46%,-6.43%)}
.story-b[data-step="1"] .tooth-sym,.story-b[data-step="2"] .tooth-sym,.story-b[data-step="3"] .tooth-sym,.story-b[data-step="4"] .tooth-sym{opacity:0;transform:translate(-50%,-50%) scale(1.75,.9)}
.story-b[data-step="2"] .k-s,.story-b[data-step="3"] .k-p{opacity:1}
.story-b[data-step="2"] .k-s .ln,.story-b[data-step="3"] .k-p .ln{stroke-dashoffset:0}
.story-b .words-b{position:absolute;left:0;top:28.5%;width:100%;opacity:0;transform:translateY(16px);transition:opacity .7s ease .5s,transform .7s ease .5s}
.story-b[data-step="4"] .words-b{opacity:1;transform:none}
.story-b .txt{position:relative;min-height:15em}
.story-b .count{font-weight:500;font-size:clamp(20px,2.3vw,36px);letter-spacing:-.035em;color:var(--bnk);opacity:.55;margin-bottom:clamp(12px,1.4vw,20px)}
.story-b .count b{color:#F26A1B;font-weight:500}
.story-b .st{position:absolute;left:0;right:0;top:3.2em;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.story-b .st.on{opacity:1;transform:none}
.story-b .st h3{font-weight:700;font-size:clamp(40px,5vw,84px);line-height:.95;letter-spacing:-.045em;color:var(--bv);margin-left:-.03em}
.story-b .st p{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(18px,1.6vw,24px);line-height:1.22;letter-spacing:-.02em;color:#3b4b4b;max-width:26ch}
.story-b .bar{position:absolute;left:var(--left);right:var(--pad);bottom:clamp(24px,5vh,48px);height:2px;background:#183f3f26}
.story-b .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#F26A1B}

/* ---------- mosaico ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:clamp(10px,1vw,16px);margin-top:clamp(40px,5vw,72px);
  grid-template-areas:"logo logo picto foto" "dente pal aa foto" "onda post post sorr"}
.bento > div{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.bento .t-logo{grid-area:logo;aspect-ratio:2.04/1;background:var(--bav)} .bento .t-logo .spb{width:46%}
.bento .t-picto{grid-area:picto;background:var(--bv)} .bento .t-picto .spb{width:70%}
.bento .t-foto{grid-area:foto;aspect-ratio:auto;background:#222 url(img/facciata-tel.jpg) center/cover}
.bento .t-foto::before{content:"";position:absolute;inset:0;background:rgba(15,30,30,.45)}
.bento .t-foto .spb{position:relative;width:78%}
.bento .t-dente{grid-area:dente;background:var(--bmo)} .bento .t-dente .sym{width:52%}
.bento .t-pal{grid-area:pal;display:grid;grid-template-columns:repeat(6,1fr)} .bento .t-pal i{display:block;height:100%}
.bento .t-aa{grid-area:aa;background:var(--bpi);flex-direction:column;color:var(--bv);padding:0 10%;text-align:center}
.bento .t-aa b{font-family:"neue-haas-unica",Unica,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(56px,7.4vw,124px);letter-spacing:-.06em;line-height:.9}
.bento .t-aa span{font-size:clamp(12px,1vw,15px);letter-spacing:-.01em;margin-top:8px;opacity:.75}
.bento .t-onda{grid-area:onda;background:var(--bto)} .bento .t-onda .sym{width:62%}
.bento .t-post{grid-area:post;aspect-ratio:2.04/1;background:var(--bv);justify-content:flex-start;gap:6%;padding:0 8%}
.bento .t-post .sym{width:22%;flex:none}
/* il nome è il lettering del logo B (immagine), non testo scritto */
.bento .t-post .pw{display:block;width:46%;flex:none}
.bento .t-post p{font-family:"neue-haas-unica",Unica,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,58px);line-height:.95;letter-spacing:-.05em;color:var(--bav)}
.bento .t-sorr{grid-area:sorr;background:var(--brv)} .bento .t-sorr .sym{width:56%}

/* ---------- simboli ---------- */
.syms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,32px);margin-top:clamp(40px,5vw,72px);background:var(--bv);border-radius:6px;padding:clamp(40px,6vw,96px) clamp(20px,4vw,64px)}
.syms figure{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,28px)}
.syms .sym{width:min(100%,180px)}
.syms figcaption{font-weight:500;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.02em;color:var(--bav)}
.syms figure{opacity:0;transform:translateY(20px) scale(.92);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.syms.in figure{opacity:1;transform:none}
.syms.in figure:nth-child(2){transition-delay:.1s} .syms.in figure:nth-child(3){transition-delay:.2s} .syms.in figure:nth-child(4){transition-delay:.3s} .syms.in figure:nth-child(5){transition-delay:.4s}
.syms figure .sym{animation:bob 10s ease-in-out infinite}
.syms figure:nth-child(2n) .sym{animation-delay:-4s}

/* ---------- palette e carattere B ---------- */
.palb{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1vw,16px);margin-top:clamp(40px,5vw,72px)}
.typo{margin-top:clamp(16px,1.6vw,24px);background:var(--bav);border-radius:6px;padding:clamp(32px,5vw,80px);color:var(--bnk);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.typo .big{font-family:"neue-haas-unica",Unica,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(64px,10vw,180px);line-height:.85;letter-spacing:-.06em}
.typo .abc{font-family:"neue-haas-unica",Unica,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2vw,32px);line-height:1.15;letter-spacing:-.04em}
.typo .abc small{display:block;margin-top:14px;font-weight:400;font-size:clamp(12px,1vw,15px);letter-spacing:.3em;text-transform:uppercase}
.typo .big .spb{width:100%;max-width:620px}
.typo .lab{grid-column:1/-1;font-size:15px;opacity:.6}

/* ---------- confronto ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,24px);margin-top:clamp(40px,5vw,72px)}
.versus a{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-decoration:none}
.versus a .lab{position:absolute;left:20px;top:16px;font-weight:700;font-size:clamp(20px,2vw,30px);letter-spacing:-.03em}
.versus a .go{position:absolute;left:20px;bottom:16px;font-size:15px;opacity:.75}
.versus .va{background:var(--spg);color:var(--spb)} .versus .va > .sp{width:62%}
.versus .vb{background:var(--bav);color:var(--bv)} .versus .vb > .spb{width:44%}

@media (max-width:760px){
  .b-hero .logo{width:80vw}
  .story-b .stick{grid-template-columns:1fr;align-content:center;gap:24px;padding:0 24px 0 var(--left)}
  .story-b .stage{width:min(86vw,380px)}
  .story-b .txt{min-height:10em}
  .story-b .st h3{font-size:clamp(34px,10vw,48px)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"logo logo" "picto foto" "dente foto" "pal aa" "onda sorr" "post post"}
  /* 3 + 2 con la seconda riga centrata */
  .syms{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:32px} .syms figure{grid-column:span 2} .syms figure:nth-child(4){grid-column:2 / span 2}
  .palb{grid-template-columns:repeat(3,minmax(0,1fr))}
  .typo{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .bw-s,.bw-p,.bw-w,.b-hero .float,.syms figure{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important} }
/* simboli: stessa cornice quadrata per tutti, così le didascalie sono allineate */
.syms .symbox{width:min(100%,180px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.syms .symbox .sym{width:100%}

/* adesivo tondo nel mockup dei biglietti: pietra al posto del pesca */
.mf-dot{background:var(--bpi)}

/* kit Adobe Fonts anche per le etichette S e P della Proposta A (regola di sp.css) */
.story .ann text{font-family:"neue-haas-unica",Unica,'Helvetica Neue',Helvetica,Arial,sans-serif}