/* Stile comune alle quattro pagine del sito di Sara Bonetti.
   Prima ogni pagina si portava dietro la sua copia: 95 KB in linea, .container
   scritto quattro volte, e due componenti gia' divergenti fra una pagina e
   l'altra. Qui c'e' solo cio' che era scritto IDENTICO in almeno due pagine.
   Si carica prima dello <style> di pagina, quindi le regole locali vincono
   ancora: e' un riordino, non un cambio d'aspetto.  (1 set 2026) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      /* ⚠️ NON metterci `overflow-x: clip`: provato l'1 set 2026, il `clip` sul
         body si propaga al riquadro della finestra e la pagina smette di
         scorrere (scrollY resta 0, misurato). Qui `hidden` non fa danno: si
         propaga alla finestra e il body torna `visible`, quindi non e' lui a
         spegnere il `position: sticky` delle tendine. Il colpevole era `.area`. */
      overflow-x: hidden;
    }
::selection { background: var(--gold); color: #1a1414; }
.container { max-width: 1160px; margin: 0 auto; }
.eyebrow {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--gold);
      display: inline-block;
    }
nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.4rem 3rem;
      transition: background 0.4s, padding 0.4s, border-color 0.4s;
      border-bottom: 1px solid transparent;
    }
nav.scrolled {
      background: rgba(14,12,14,0.82);
      backdrop-filter: blur(14px);
      padding: 0.9rem 3rem;
      border-bottom: 1px solid var(--line);
    }
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; gap: 2.2rem; list-style: none; align-items: center; }
.nav-links a {
      text-decoration: none;
      font-size: 0.74rem;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(243,239,232,0.75);
      transition: color 0.2s;
    }
.nav-cta {
      border: 1px solid var(--gold);
      color: var(--gold) !important;
      padding: 0.5rem 1.2rem;
      border-radius: 2rem;
      transition: background 0.25s, color 0.25s !important;
    }
.nav-cta:hover { background: var(--gold); color: #1a1414 !important; }
.ba-wrap { max-width: 760px; margin: 3rem auto 0; }
.ba-slider {
      position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 4px;
      overflow: hidden; user-select: none; cursor: ew-resize;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5); border: 1px solid var(--line-soft);
    }
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { z-index: 1; }
.ba-before-wrap { position: absolute; inset: 0; z-index: 2; overflow: hidden; clip-path: inset(0 50% 0 0); }
.ba-slider.simulato .ba-before-wrap img { filter: grayscale(0.85) brightness(0.9) contrast(0.95); }
.ba-tag { position: absolute; bottom: 1rem; z-index: 4; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; background: rgba(14,12,14,0.7); padding: 0.35rem 0.8rem; border-radius: 2rem; color: var(--text); }
.ba-tag.left { left: 1rem; }
.ba-tag.right { right: 1rem; }
.ba-handle {
      position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5; width: 44px; transform: translateX(-50%);
      display: flex; align-items: center; justify-content: center; pointer-events: none;
    }
.ba-handle::before {
      content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
      margin-left: -1px; background: var(--gold);
    }
.ba-handle-circle {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--gold); color: #1a1414;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5); font-size: 0.9rem; font-weight: 700;
    }
.ba-secondo { text-align: center; color: var(--muted); font-size: 0.8rem;
      letter-spacing: 0.14em; text-transform: uppercase; margin: 3.2rem 0 1.2rem; }
.ba-note { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 1.4rem; font-style: italic; }
.ba-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ba-foto img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.reveal.in { opacity: 1; transform: none; }
.su-top { position: fixed; left: 1.1rem; bottom: 1.4rem; z-index: 60;
      width: 46px; height: 46px; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; cursor: pointer;
      background: rgba(14,14,14,.82); border: 1px solid var(--line);
      color: var(--gold); backdrop-filter: blur(6px);
      opacity: 0; visibility: hidden; transform: translateY(10px);
      transition: opacity .3s, transform .3s, visibility .3s; }
.su-top.mostra { opacity: 1; visibility: visible; transform: none; }
.su-top:hover { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .su-top { transition: none; } }
.foot-dove{margin-top:.6rem;font-size:.82rem;line-height:1.55;opacity:.85}
.foot-dove b{font-weight:500;color:var(--gold-lt)}

/* ── LE TENDINE ── Sara, 1 set 2026: "ci sono 300 miliardi di foto tutte in
       fila, e non si capisce che sono divise in categorie". Ogni zona e' una
       tendina: chiusa si vede la struttura, aperta si vedono i lavori.
       Sono <details> nativi: si aprono senza JavaScript, funzionano col dito, e
       Google legge lo stesso quello che c'e' dentro. */
.zone{ display:grid; gap:0.7rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      margin:2.2rem 0 3rem; }
.zone a{
      display:block; text-decoration:none; text-align:center; padding:0.95rem 0.6rem;
      border:1px solid var(--line); border-radius:3px; background:var(--panel);
      transition:border-color .25s, background .25s, transform .25s;
    }
.zone a:hover, .zone a:focus-visible{ border-color:var(--gold); background:#221d22; transform:translateY(-2px); }
.zone a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.zone b{ display:block; font-family:'Cormorant Garamond',serif; font-weight:400;
      font-size:1.25rem; color:var(--text); line-height:1.2; }
.zone span{ display:block; margin-top:0.28rem; font-size:0.6rem; letter-spacing:0.2em;
      text-transform:uppercase; color:var(--gold); }
.area{ border:1px solid var(--line); border-radius:4px; background:var(--panel);
      margin-bottom:1rem; overflow:hidden; overflow:clip; }
.area[open]{ border-color:var(--gold); }
.area-cima{
      list-style:none; cursor:pointer; padding:1.3rem 3.2rem 1.3rem 1.4rem;
      position:relative; display:grid; gap:0.15rem; transition:background .25s;
    }
.area-cima::-webkit-details-marker{ display:none; }
.area-cima:hover{ background:#221d22; }
.area-cima:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.area-eti{ font-size:0.58rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }
.area-tit{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,4vw,2rem);
      line-height:1.1; color:var(--text); }
.area-sot{ font-size:0.84rem; color:var(--muted); }
.area-n{ font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-top:0.3rem; }
/* il piu' che diventa meno: dice se la tendina e' aperta o chiusa */
.area-cima::after, .tecnica-cima::after{
      content:""; position:absolute; right:1.4rem; top:50%; width:14px; height:14px;
      transform:translateY(-50%); transition:transform .3s;
      background:
        linear-gradient(var(--gold),var(--gold)) center/14px 1.5px no-repeat,
        linear-gradient(var(--gold),var(--gold)) center/1.5px 14px no-repeat;
    }
.area[open] > .area-cima::after, .tecnica[open] > .tecnica-cima::after{
      transform:translateY(-50%) rotate(135deg);
      background:linear-gradient(var(--gold),var(--gold)) center/14px 1.5px no-repeat;
    }
.area-dentro{ padding:0.4rem 1.4rem 2rem; border-top:1px solid var(--line-soft); }
.area-dentro .b-head{ margin-bottom:1.6rem; }
.tecnica{ border-top:1px solid var(--line-soft); }
.tecnica:first-of-type{ border-top:0; }
.tecnica-cima{
      list-style:none; cursor:pointer; padding:1.05rem 3rem 1.05rem 0;
      position:relative; display:flex; align-items:baseline; gap:0.8rem; flex-wrap:wrap;
    }
.tecnica-cima::-webkit-details-marker{ display:none; }
.tecnica-cima:hover .tecnica-tit{ color:var(--gold-lt); }
.tecnica-cima:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.tecnica-cima::after{ right:0.2rem; width:12px; height:12px;
      background:
        linear-gradient(var(--gold),var(--gold)) center/12px 1.5px no-repeat,
        linear-gradient(var(--gold),var(--gold)) center/1.5px 12px no-repeat; }
.tecnica[open] > .tecnica-cima::after{ background:linear-gradient(var(--gold),var(--gold)) center/12px 1.5px no-repeat; }
.tecnica-tit{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.25rem,3vw,1.7rem);
      color:var(--text); transition:color .2s; }
.tecnica-sot{ font-family:'Inter',sans-serif; font-size:0.58rem; letter-spacing:0.22em;
      text-transform:uppercase; color:var(--gold); border:1px solid var(--line-soft);
      padding:0.26rem 0.66rem; border-radius:2rem; }
.tecnica-n{ margin-left:auto; font-size:0.6rem; letter-spacing:0.18em;
      text-transform:uppercase; color:var(--muted); }
.tecnica-dentro{ padding-bottom:1.4rem; }
.tecnica-dentro .tec-tit{ display:none; }
/* ── ALBUM ── una foto sola in pagina; le altre ci sono ma non si vedono, e
       si sfogliano nel lightbox. Cosi' spariscono 44 foto di scorrimento senza
       perderne nessuna. */
.gal.album{ grid-template-columns:1fr; max-width:340px; gap:0; }
.gal.album figure.fuori{ display:none; }
.gal.album figure.copertina{ position:relative; }
.gal.album figure.copertina::after{
      content:"\203A"; position:absolute; right:0.7rem; bottom:0.55rem;
      width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
      background:rgba(14,12,14,0.78); color:var(--gold-lt); font-size:1.5rem;
      line-height:1; padding-bottom:3px; backdrop-filter:blur(4px);
      border:1px solid var(--line); transition:background .25s, transform .25s;
    }
.gal.album figure.copertina:hover::after{ background:var(--gold); color:#1a1414; transform:scale(1.08); }
.album-nota{ margin:0.6rem 0 0; font-size:0.76rem; color:var(--muted); line-height:1.5; }
.album-nota b{ color:var(--gold-lt); font-weight:500; }
@media (max-width:520px){
      .area-cima{ padding:1.1rem 2.8rem 1.1rem 1.05rem; }
      .area-dentro{ padding:0.4rem 1.05rem 1.6rem; }
      .gal.album{ max-width:100%; }
    }
/* Dentro una tendina l'animazione d'ingresso non serve e fa danno: quando la
       tendina e' chiusa l'osservatore non scatta mai, e all'apertura il testo
       resta sbiadito. La tendina stessa e' gia' la comparsa progressiva. */
.area-dentro .reveal, .tecnica-dentro .reveal{ opacity:1; transform:none; }
/* Il segno: piu' quando e' chiusa, meno quando e' aperta. Niente rotazioni,
       che a 135 gradi lasciavano una sbarra storta. */
.area[open] > .area-cima::after, .tecnica[open] > .tecnica-cima::after{
      transform:translateY(-50%);
    }
/* L'intestazione della tecnica, sul telefono, si scomponeva su tre righe con
       il segno in mezzo: qui va in colonna e il conto delle foto sotto. */
@media (max-width:560px){
      .tecnica-cima{ display:grid; gap:0.3rem; padding-right:2.6rem; }
      .tecnica-sot{ justify-self:start; }
      .tecnica-n{ margin-left:0; }
    }

/* ── Secondo giro (1 set 2026): regole che stavano in due o tre pagine.
   Spostate qui solo dopo aver verificato, con un motore di selettori, che
   nelle pagine dove non c'erano non esiste nessun elemento che le prenda. */

.tecnica { margin-bottom: .9rem; }
.tecnica span { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem;
    color: var(--gold); letter-spacing: .04em; margin-bottom: .15rem; }
.tecnica-nota { font-size: .82rem; color: var(--muted); font-style: italic; opacity: .85; }
.promessa { max-width: 760px; margin: 2.6rem auto 0; padding: 1.6rem 1.9rem;
    border-left: 2px solid var(--gold); background: rgba(201,169,97,.05);
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; line-height: 1.35;
    color: var(--text); font-style: italic; }
.promessa small { display: block; margin-top: .6rem; font-family: Inter, sans-serif;
    font-style: normal; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.testata {
      padding: 11rem 2rem 4rem;
      text-align: center;
      border-bottom: 1px solid var(--line-soft);
    }
.testata p {
      color: var(--muted); font-weight: 300; max-width: 620px;
      margin: 1.4rem auto 0; font-size: 1.02rem;
    }
.torna {
      display: inline-block; margin-top: 2rem; color: var(--gold);
      text-decoration: none; font-size: 0.74rem; letter-spacing: 0.2em;
      text-transform: uppercase; border-bottom: 1px solid transparent;
      transition: border-color 0.25s;
    }
.torna:hover { border-bottom-color: var(--gold); }
.torna-fondo { display: block; margin-top: 2.4rem; }
.blocco + .blocco { border-top: 1px solid var(--line-soft); }
.blocco:nth-of-type(even) { background: var(--bg-2); }
.b-head { max-width: 660px; margin-bottom: 3rem; }
.b-head h2 { margin: 0.9rem 0 1.1rem; }
.b-head p { color: var(--muted); font-weight: 300; }
.dermo-blocco { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4.5rem; align-items: center; }
.dermo-foto img {
      width: 100%; border-radius: 3px; display: block;
      box-shadow: 0 30px 80px rgba(0,0,0,0.5); filter: saturate(0.92);
    }
.dermo-testo h2 { margin: 0.9rem 0 1.4rem; }
.dermo-testo p { color: var(--muted); font-weight: 300; margin-bottom: 1.1rem; }
.dermo-testo strong { color: var(--text); font-weight: 500; }
.dermo-nota {
      border-left: 2px solid var(--line); padding-left: 1.1rem;
      font-style: italic; font-size: 0.92rem; margin-top: 1.8rem !important;
    }
.gal-eti {
      font-size: 0.7rem; font-weight: 500; letter-spacing: 0.32em;
      text-transform: uppercase; color: var(--gold);
      margin: 2.6rem 0 1.1rem;
    }
.gal-eti:first-of-type { margin-top: 0; }
.gal {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 0.9rem; grid-auto-flow: dense;
    }
.gal figure.orizz { grid-column: span 2; }
.gal figure.orizz img { aspect-ratio: 1.54; }
.gal figure {
      margin: 0; overflow: hidden;
      border-radius: 3px; cursor: zoom-in; position: relative; background: #171417;
    }
.gal img {
      width: 100%; height: 100%; display: block;
      aspect-ratio: 3 / 4; object-fit: cover;
      filter: saturate(0.85) brightness(0.94);
      transition: transform 0.6s cubic-bezier(.2,.7,.3,1), filter 0.4s;
    }
.gal figure:hover img { transform: scale(1.045); filter: saturate(1.05) brightness(1); }
.vd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.vd-item {
      position: relative; border-radius: 3px; overflow: hidden;
      aspect-ratio: 9 / 16; background: #171417;
    }
.vd-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-play {
      position: absolute; inset: 0; border: 0; cursor: pointer;
      background: linear-gradient(to top, rgba(10,8,8,0.55), rgba(10,8,8,0.05));
      display: grid; place-items: center; transition: opacity 0.35s;
    }
.vd-play i {
      width: 58px; height: 58px; border-radius: 50%; background: var(--gold);
      display: grid; place-items: center; box-shadow: 0 8px 28px rgba(0,0,0,0.5);
      transition: transform 0.3s;
    }
.vd-play i::before {
      content: ''; border-left: 15px solid #1a1414;
      border-top: 9px solid transparent; border-bottom: 9px solid transparent;
      margin-left: 4px;
    }
.vd-item:hover .vd-play i { transform: scale(1.09); }
.vd-item.va .vd-play { opacity: 0; pointer-events: none; }

/* Il tasto dell'audio: piccolo, in basso a destra, sopra al video.
   Compare solo quando il video ha davvero una traccia audio (ce lo mette il
   JS con la classe .ha-audio): un altoparlante che non suona e' peggio di
   nessun altoparlante. */
.vd-audio {
      position: absolute; right: .55rem; bottom: .55rem; z-index: 3;
      width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
      background: rgba(10,8,8,.62); color: var(--gold);
      display: none; place-items: center; backdrop-filter: blur(3px);
      transition: background .25s, color .25s;
    }
.vd-item.ha-audio .vd-audio { display: grid; }
.vd-audio:hover { background: var(--gold); color: #14100f; }
.vd-audio svg { width: 19px; height: 19px; fill: currentColor; }
.vd-audio .barrato { display: block; }
.vd-audio .onde { display: none; }
.vd-item.suona .vd-audio { background: var(--gold); color: #14100f; }
.vd-item.suona .vd-audio .barrato { display: none; }
.vd-item.suona .vd-audio .onde { display: block; }
.vd-cap {
      margin-top: 0.7rem; font-size: 0.78rem; color: var(--muted);
      letter-spacing: 0.06em; text-align: center;
    }
.vd-nota { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 2rem; font-style: italic; }
.chiusura { text-align: center; background: var(--panel); }
.chiusura h2 { margin-bottom: 1.2rem; }
.chiusura p { color: var(--muted); font-weight: 300; max-width: 540px; margin: 0 auto 2.2rem; }
.lb {
      position: fixed; inset: 0; z-index: 200; display: none;
      background: rgba(8,6,8,0.96); place-items: center; padding: 2.5rem;
    }
.lb.aperto { display: grid; }
.lb img { max-width: 100%; max-height: 88vh; border-radius: 3px; display: block; }
.lb-x, .lb-prec, .lb-succ {
      position: absolute; background: none; border: 0; color: var(--text);
      cursor: pointer; font-size: 2.4rem; line-height: 1; padding: 0.6rem 1rem;
      opacity: 0.65; transition: opacity 0.2s;
      font-family: 'Cormorant Garamond', serif;
    }
.lb-x:hover, .lb-prec:hover, .lb-succ:hover { opacity: 1; color: var(--gold); }
.lb-x { top: 1rem; right: 1.4rem; font-size: 2.8rem; }
.lb-prec { left: 0.6rem; top: 50%; transform: translateY(-50%); }
.lb-succ { right: 0.6rem; top: 50%; transform: translateY(-50%); }
.lb-did {
      position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center;
      color: var(--muted); font-size: 0.82rem; padding: 0 3rem;
    }
.ap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 900px; margin: 0 auto; }
.ap-card {
    display: block; padding: 2rem 1.9rem; text-decoration: none; color: inherit;
    background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px;
    transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
  }
.ap-card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.ap-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.ap-card p { font-size: 0.9rem; color: var(--muted); font-weight: 300; }
.ap-freccia { display: inline-block; margin-top: 1.1rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 700px) { .ap-grid { grid-template-columns: 1fr; } }
.voci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
.voce { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1.9rem; }
.voce h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; margin-bottom: 0.6rem; }
.voce p { font-size: 0.9rem; color: var(--muted); font-weight: 300; }
.tappe { counter-reset: tappa; max-width: 760px; margin: 2.4rem auto 0; }
.tappa { position: relative; padding: 0 0 1.9rem 4.2rem; border-left: 1px solid var(--line); }
.tappa:last-child { border-left-color: transparent; padding-bottom: 0; }
.tappa::before {
    counter-increment: tappa; content: "0" counter(tappa);
    position: absolute; left: -1.35rem; top: -0.2rem;
    width: 2.7rem; height: 2.7rem; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--line); color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; letter-spacing: 0.06em;
  }
.tappa h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; margin-bottom: 0.35rem; }
.tappa p { font-size: 0.92rem; color: var(--muted); font-weight: 300; }
@media (max-width: 820px) { .voci-grid { grid-template-columns: 1fr; } }

/* ── LA TESTA CHE RESTA IN VISTA ────────────────────────────────────────────
   Chiesto da Marco l'1 set 2026: scorrendo le foto di una sezione, il tasto per
   chiuderla e' rimasto indietro in cima alla pagina, e per richiudere bisogna
   risalire tutto. Adesso la testa della tendina aperta si ferma sotto la barra
   del nome e ci resta.

   Si appiccica SOLO la tendina piu' interna aperta: `:has(details[open])` toglie
   dal gioco quella che ne contiene un'altra gia' aperta. Con tutte appiccicate,
   su un telefono, resterebbero 450 px di foto su 812.
   L'altezza della barra del nome la misura `tendine.js` e la mette in
   `--barra`: dipende da quanto si e' scorso, quindi non si puo' scrivere qui. */
/* Quando si "va" a una tendina — da un link, o tornandoci dopo averla chiusa —
   lo scorrimento deve fermarsi SOTTO la barra del nome, non sotto di essa.
   `scroll-margin-top` lo dice al browser una volta sola: cosi' non c'e' nessun
   conto da rifare a mano nel codice, ed e' giusto anche per i link in entrata. */
details.area, details.tecnica, .area-cima, .tecnica-cima{
      scroll-margin-top:calc(var(--barra, 80px) + 12px);
    }
.area[open]:not(:has(details[open])) > .area-cima,
.tecnica[open] > .tecnica-cima{
      position:sticky; top:var(--barra, 80px); z-index:30;
      background:var(--panel);
    }
/* La testa della tecnica sta dentro `.area-dentro`, che ha i suoi margini
   laterali: senza questo, da appiccicata le foto si vedrebbero passare nei due
   spazi ai lati. I numeri sono gli stessi di `.area-dentro`, non a occhio:
   1,4rem normalmente, 1,05rem sotto i 520 px. */
.tecnica[open] > .tecnica-cima{
      margin-left:-1.4rem; padding-left:1.4rem;
      margin-right:-1.4rem; padding-right:3.2rem;
    }
@media (max-width:520px){
      .tecnica[open] > .tecnica-cima{
        margin-left:-1.05rem; padding-left:1.05rem;
        margin-right:-1.05rem; padding-right:2.85rem;
      }
    }

/* da appiccicata si stringe: una riga sola, e dice cosa fa */
summary.incollata{
      background:rgba(26,22,26,0.96);
      -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
      box-shadow:0 12px 26px rgba(0,0,0,0.5);
      padding-top:0.72rem; padding-bottom:0.72rem;
      display:flex; align-items:center; gap:0.7rem;
    }
summary.incollata .area-eti, summary.incollata .area-sot, summary.incollata .area-n,
summary.incollata .tecnica-sot, summary.incollata .tecnica-n{ display:none; }
summary.incollata .area-tit, summary.incollata .tecnica-tit{
      font-size:1.3rem; line-height:1.15; margin:0;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
/* la parola accanto al meno: cosi' non e' un simbolo da interpretare */
summary.incollata::before{
      content:"chiudi"; position:absolute; top:50%; transform:translateY(-50%);
      font-size:0.56rem; letter-spacing:0.22em; text-transform:uppercase;
      color:var(--gold); pointer-events:none;
    }
.area-cima.incollata::before{ right:2.9rem; }
.tecnica-cima.incollata::before{ right:1.7rem; }

@media (max-width: 400px){
      summary.incollata .area-tit, summary.incollata .tecnica-tit{ font-size:1.12rem; }
      summary.incollata::before{ content:""; }      /* schermo stretto: solo il meno */
    }
@media (prefers-reduced-motion: no-preference){
      summary.incollata{ transition:padding .18s, background .18s; }
    }

/* ── LA SPIEGAZIONE E' IL TASTO ──────────────────────────────────────────────
   Sara, 3 set 2026: «vorrei che toccando su questi riquadri con le spiegazioni
   si aprissero le varie parti specifiche con foto». Prima la pagina diceva due
   volte le stesse cose: quattro riquadri "I LAVORI" per aprire le foto e, in
   fondo, le schede che spiegavano a parole. Ora sono la stessa cosa, quindi il
   testo della scheda vive dentro il <summary>. */
.area.scheda > .area-cima{ padding-bottom:1.5rem; }
.area.scheda > .area-cima p{
      grid-column:1/-1; margin:0.7rem 0 0; max-width:64ch;
      color:var(--muted); font-weight:300; font-size:0.95rem; line-height:1.66;
    }
.area.scheda > .area-cima p strong{ color:var(--text); font-weight:500; }
/* da appiccicata la scheda si stringe come le altre: via anche la spiegazione,
   se no la barra sarebbe alta mezza schermata */
summary.incollata p{ display:none; }

/* La spiegazione di ogni tecnica, dentro la sua testa. `.tecnica-cima` e' una
   riga flex (titolo · pillola · meno): il paragrafo va a capo da solo occupando
   tutta la larghezza. */
.tecnica-spieg{
      flex:1 0 100%; margin:0.5rem 0 0; max-width:62ch;
      color:var(--muted); font-weight:300; font-size:0.92rem; line-height:1.62;
    }
.tecnica-spieg strong{ color:var(--text); font-weight:500; }
@media (max-width:560px){ .tecnica-spieg{ font-size:0.88rem; } }

/* ── TRE FOTO IN FILA ── «Le foto sono da sostituire con queste 3 qui sotto da
   mettere sulla stessa fila e che si possano aprire toccandole» (Sara, 3 set
   2026). Le ha preparate lei gia' in 3:4, quindi qui non si taglia niente.
   La fila e' piu' larga della coppia: tre celle a 760px sarebbero francobolli. */
.ba-tris{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
#risultati .ba-wrap{ max-width:1000px; }
@media (max-width:640px){
      .ba-tris{ gap:0.5rem; }
      #risultati .ba-note{ margin-top:1rem; }
    }

/* Il testo di Sara e' lungo: centrato riga per riga si legge male. Il titolo
   resta al centro, i paragrafi vanno a bandiera. */
#risultati .sec-head, #microblading .sec-head{ max-width:760px; }
#risultati .sec-head p, #microblading .sec-head p{
      text-align:left; margin-top:1.05rem; line-height:1.75;
    }
#microblading .sec-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
.micro-chiusa{ margin-top:1.8rem !important; font-style:italic; }
.micro-chiusa strong{ color:var(--gold-lt); font-weight:500; font-style:normal; }

/* Nella fila da tre la cella su telefono e' larga 105 px, e la pillola
   sovrapposta non ci sta: rimpicciolendola per farcela stare finiva a **8 px
   misurati**, cioe' illeggibile — trovato dalla verifica incrociata (DeepSeek,
   3 set 2026). Quindi qui la didascalia esce da sopra la foto e va SOTTO, dove
   puo' restare di una misura che si legge senza coprire il lavoro. */
.ba-tris .ba-foto{ overflow:visible; box-shadow:none; border:0; }
.ba-tris .ba-foto img{
      border-radius:4px; border:1px solid var(--line-soft);
      box-shadow:0 14px 40px rgba(0,0,0,0.42);
    }
.ba-tris .ba-foto figcaption{
      position:static; background:none; padding:0.55rem 0 0; border-radius:0;
      text-align:center; color:var(--gold);
      font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase;
      max-width:100%;
    }