/* ===== Scene del coordinato (Proposta A / B) =====
   Ogni scena misura tutto in unità del suo contenitore (cqw = 1% della larghezza della scena),
   così resta identica su PC e telefono, solo più piccola. */
.prop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.tag-prov{font-size:14px;letter-spacing:-.01em;color:#121212;background:#F26A1B;padding:6px 12px;border-radius:99px;white-space:nowrap}
.scenes{display:grid;gap:clamp(16px,1.6vw,24px);margin-top:clamp(40px,5vw,72px)}
.scene-wrap figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:clamp(16px,1.3vw,20px);line-height:1.22;letter-spacing:-.01em;color:var(--mid)}
.scene-wrap figcaption b{font-weight:700;color:#fff;letter-spacing:-.02em}
.scene{position:relative;container-type:inline-size;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 32% 22%,#E9E4DC 0%,#D6CFC5 60%,#CBC3B8 100%)}
.scene *{box-sizing:border-box}
.paper{position:absolute;background:var(--paper);border-radius:.25cqw;
  box-shadow:0 .1cqw .2cqw rgba(0,0,0,.10),0 1.4cqw 2.6cqw -.8cqw rgba(40,30,20,.38)}
.ph{display:block;height:.42cqw;border-radius:.2cqw;background:rgba(0,0,0,.13)}
.ph.l{background:rgba(255,255,255,.35)}
.lg{display:block}
.lg svg,.lg img{display:block;width:100%;height:auto}

/* --- 1 · Biglietti da visita (si girano al tocco) --- */
.bc{position:absolute;width:34cqw;aspect-ratio:85/55;perspective:120cqw;cursor:pointer}
.bc .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bc.flip .in{transform:rotateY(180deg)}
.bc .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:.45cqw;
  box-shadow:0 .1cqw .2cqw rgba(0,0,0,.12),0 1.6cqw 3cqw -1cqw rgba(40,30,20,.45)}
.bc .back{transform:rotateY(180deg)}
.bc .f1{background:var(--primary);display:flex;align-items:center;justify-content:center}
.bc .f1 .lg{width:30%}
.bc .f2{background:var(--paper);padding:2.6cqw 2.8cqw;display:flex;flex-direction:column;justify-content:space-between}
.bc .f2 .lg{width:52%}
.bc .f2 .who b{display:block;font-weight:700;font-size:1.7cqw;letter-spacing:-.04em;color:var(--ink)}
.bc .f2 .who span{display:block;font-size:1.05cqw;letter-spacing:-.01em;color:var(--ink);opacity:.7;margin-top:.2cqw}
.bc .f2 .rows{display:grid;gap:.6cqw;margin-top:1.4cqw}
.bc .f2 .rows .ph{width:60%} .bc .f2 .rows .ph:nth-child(2){width:46%} .bc .f2 .rows .ph:nth-child(3){width:52%}
.hint{position:absolute;right:2cqw;bottom:1.8cqw;font-size:1.2cqw;letter-spacing:-.01em;color:rgba(0,0,0,.55)}

/* --- 2 · Carta intestata e busta --- */
.a4{width:30cqw;aspect-ratio:210/297;padding:3cqw 2.8cqw 2.4cqw;display:flex;flex-direction:column}
.a4 .lg{width:44%}
.a4 .date{width:24%;margin:4.2cqw 0 0 auto}
.a4 .body{display:grid;gap:.9cqw;margin-top:3.4cqw}
.a4 .body .ph:nth-child(4n){width:72%} .a4 .body .ph:nth-child(7){width:40%}
.a4 .pfoot{align-self:stretch;text-align:left;margin-top:auto;border-top:.1cqw solid rgba(0,0,0,.15);padding-top:1cqw;font-size:.85cqw;letter-spacing:-.01em;color:rgba(0,0,0,.55)}
.dl{width:44cqw;aspect-ratio:220/110;padding:2.2cqw 2.4cqw}
.dl .lg{width:32%}
.dl .addr{position:absolute;left:52%;top:52%;width:36%;display:grid;gap:.8cqw}
.dl .addr .ph:nth-child(2){width:80%} .dl .addr .ph:nth-child(3){width:60%}

/* --- 3 · Cartellina, ricettario, promemoria --- */
.folder{width:31cqw;aspect-ratio:220/310;background:var(--primary);display:flex;align-items:center;justify-content:center}
.folder::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:rgba(0,0,0,.08);border-top:.1cqw solid rgba(255,255,255,.12)}
.folder .lg{width:46%}
.a5{width:22cqw;aspect-ratio:148/210;padding:2.2cqw 2cqw;display:flex;flex-direction:column}
.a5 .lg{width:58%}
.a5 .hr{height:.1cqw;background:var(--primary);opacity:.5;margin:1.6cqw 0 2cqw}
.a5 .body{display:grid;gap:1.25cqw}
.a5 .body .ph{background:rgba(0,0,0,.09)}
.a5 .pfoot{margin-top:auto;display:grid;gap:.5cqw}
.a5 .pfoot .ph{width:50%}
.card{width:24cqw;aspect-ratio:85/55;padding:1.8cqw 2cqw;display:flex;flex-direction:column;justify-content:space-between;border-radius:.4cqw}
.card .t{font-weight:700;font-size:1.25cqw;letter-spacing:-.03em;color:var(--ink)}
.card .f{display:grid;grid-template-columns:auto 1fr;gap:.7cqw 1cqw;align-items:end;font-size:.95cqw;color:var(--ink);opacity:.75}
.card .f i{display:block;border-bottom:.1cqw solid rgba(0,0,0,.35);height:1cqw}
.card .lg{width:34%}

/* --- 4 · Ingresso: vetrofania e targa sulla foto vera --- */
.scene.photo{background:#222}
.scene.photo img.bgp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.warp{position:absolute;left:0;top:0;transform-origin:0 0}
.vetro{mix-blend-mode:screen;opacity:.92}
.vetro .lg{width:100%}
.targa{background:var(--primary);display:flex;align-items:center;justify-content:center;
  box-shadow:.25cqw .45cqw .5cqw rgba(0,0,0,.35)}
.targa .lg{width:70%}
.note{position:absolute;left:2cqw;bottom:1.8cqw;font-size:1.15cqw;letter-spacing:-.01em;color:#fff;background:rgba(18,18,18,.6);padding:.5cqw .9cqw;border-radius:99px}

/* --- 5 · Digitale: profilo Instagram e firma email --- */
.phone{position:absolute;width:22cqw;aspect-ratio:9/19;background:#111;border-radius:3cqw;padding:.9cqw;
  box-shadow:0 1.6cqw 3cqw -1cqw rgba(0,0,0,.5)}
.phone .scr{position:absolute;inset:.9cqw;border-radius:2.2cqw;background:#fff;overflow:hidden;padding:3.6cqw 1.4cqw 1cqw}
.ig-top{display:flex;align-items:center;gap:1.4cqw}
.ig-av{width:5.6cqw;aspect-ratio:1;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.ig-av .lg{width:56%}
.ig-st{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.8cqw}
.ig-st .ph{height:.7cqw}
.ig-name{margin-top:1.2cqw;font-weight:700;font-size:1.05cqw;letter-spacing:-.02em;color:#111}
.ig-bio{display:grid;gap:.45cqw;margin-top:.6cqw}
.ig-bio .ph{height:.42cqw} .ig-bio .ph:nth-child(2){width:70%}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.25cqw;margin-top:1.6cqw}
/* solo le caselle (figli diretti): la regola non deve toccare i livelli interni del logo, che si stiravano */
.ig-grid > i{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.ig-grid > i .lg{width:38%}
.ig-grid > i .sym-t{display:block;width:40%}
.sig{width:46cqw;padding:2.6cqw 3cqw;display:grid;grid-template-columns:auto 1fr;gap:2.4cqw;align-items:center;border-radius:.5cqw}
.sig .lg{width:9cqw}
.sig .who b{display:block;font-weight:700;font-size:1.7cqw;letter-spacing:-.04em;color:var(--ink)}
.sig .who span{display:block;font-size:1.1cqw;color:var(--ink);opacity:.7;margin-top:.3cqw}
.sig .rows{display:grid;gap:.6cqw;margin-top:1.2cqw} .sig .rows .ph{width:70%} .sig .rows .ph:nth-child(2){width:55%}
.sig-top{position:absolute;font-size:1.15cqw;letter-spacing:-.01em;color:rgba(0,0,0,.55)}

@media (max-width:760px){
  .scene-wrap figcaption{flex-direction:column;gap:4px}
}