/* Il respiro del neon, condiviso con la home. */
@keyframes respiro{0%,100%{opacity:1}46%{opacity:.72}}

/* Pagine di sezione: stesso guscio della home, contenuto piu' stretto. */

.pagina{max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(60px,9vw,110px)}
.pagina-testa{
  padding:clamp(52px,9vw,110px) 0 clamp(34px,5vw,54px);
  border-bottom:1px solid var(--rule); margin-bottom:clamp(40px,6vw,72px);
}
.pagina-titolo{
  margin:0 0 14px; font-family:var(--m); font-weight:700;
  font-size:clamp(30px,6vw,58px); line-height:1.1; letter-spacing:-.03em;
  text-wrap:balance;
}
.pagina-sommario{
  margin:0; color:var(--soft); max-width:46ch;
  font-size:clamp(16px,1.9vw,21px); line-height:1.5; text-wrap:pretty;
}
.blocco{max-width:none; padding:0; margin:0 0 clamp(48px,7vw,88px)}
.blocco:last-child{margin-bottom:0}

.stampa.grande{padding:clamp(24px,3.4vw,34px); gap:14px}
.stampa.grande .titolo-art{font-size:clamp(19px,2.6vw,28px)}

.scheda-testo{max-width:62ch; display:flex; flex-direction:column; gap:14px}
.scheda-testo p{margin:0; color:var(--soft); text-wrap:pretty}

.due-strade{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.strada{
  padding:26px 24px; border-radius:14px;
  background:linear-gradient(180deg,var(--sur2),var(--sur));
  border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,
             0 18px 34px -22px rgba(0,0,0,.9);
}
.strada-eti{
  margin:0 0 10px; font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  text-shadow:0 0 12px rgba(10,214,182,.4);
}
.strada-testo{margin:0; color:var(--soft); font-size:15.5px; line-height:1.6; text-wrap:pretty}
.strada-testo strong{color:var(--txt); font-weight:600}

.invito{max-width:56ch; color:var(--soft)}
.invito a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(10,214,182,.4)}
.invito a:hover{color:var(--txt); border-color:var(--txt)}

.azione-riga{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0}
.bottone{
  font-family:var(--m); font-size:13px; font-weight:500; text-decoration:none;
  color:var(--ink); background:var(--teal); padding:13px 20px; border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px -14px rgba(10,214,182,.65);
  transition:transform .3s var(--curva);
}
.bottone.chiaro{
  background:transparent; color:var(--txt); border:1px solid var(--rule); box-shadow:none;
}
.bottone:hover{transform:translateY(-2px)}

/* ---------- portfolio ---------- */
.lavori{display:flex; flex-direction:column; gap:clamp(34px,5vw,64px)}
.lavoro{
  display:grid; gap:clamp(18px,2.6vw,32px); align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:820px){
  .lavoro{grid-template-columns:1.25fr 1fr}
  .lavoro:nth-child(even) .lavoro-media{order:2}
}
.lavoro-media{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/10;
  border:1px solid var(--rule); background:var(--sur);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,
             0 28px 54px -30px rgba(0,0,0,.95);
}
.lavoro-eti{
  margin:0 0 10px; font-family:var(--m); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--violet-lo);
}
.lavoro-titolo{
  margin:0 0 10px; font-family:var(--m); font-weight:700;
  font-size:clamp(19px,2.6vw,27px); line-height:1.22; letter-spacing:-.02em;
  text-wrap:balance;
}
.lavoro-riga{margin:0 0 12px; color:var(--soft); text-wrap:pretty}
.lavoro-tecnica{
  margin:0; font-family:var(--m); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--soft); opacity:.75;
}

/* prima e dopo: si trascina la leva, e la linea di taglio e' al neon */
.confronto{position:absolute; inset:0; --taglio:50%}
.confronto-dopo,.confronto-prima{position:absolute; inset:0; background-size:cover; background-position:center}
.confronto-dopo{background-image:linear-gradient(140deg,#171227,#0B1A1A)}
.confronto-prima{
  background-image:linear-gradient(140deg,#241a1a,#0E0E12);
  filter:grayscale(1) contrast(.9);
  clip-path:inset(0 calc(100% - var(--taglio)) 0 0);
}
.confronto-maniglia{
  position:absolute; top:0; bottom:0; left:var(--taglio); width:2px;
  background:linear-gradient(180deg,transparent,var(--teal) 14%,#fff 50%,var(--teal) 86%,transparent);
  box-shadow:0 0 16px rgba(10,214,182,.9); transform:translateX(-1px); pointer-events:none;
}
.confronto-leva{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.confronto-leva:focus-visible + .confronto-maniglia{box-shadow:0 0 24px rgba(10,214,182,1)}

/* il lettore parte solo al clic: prima non arriva niente da fuori */
.lettore{position:absolute; inset:0; display:grid; place-items:center}
.lettore-anteprima{
  position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 40%, rgba(107,22,207,.32), transparent 70%),
             linear-gradient(160deg,#161020,#0A0D12);
  background-size:cover; background-position:center;
}
.lettore-avvia{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:13px 20px 13px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(8,8,10,.62); backdrop-filter:blur(10px); color:var(--txt);
  font-family:var(--m); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:transform .3s var(--curva), border-color .3s var(--curva);
}
.lettore-avvia:hover{transform:scale(1.04); border-color:var(--teal)}
.lettore-triangolo{
  width:0; height:0; border-left:13px solid var(--teal);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  filter:drop-shadow(0 0 10px rgba(10,214,182,.8));
}
.lettore iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.lettore-nota{
  position:absolute; left:14px; right:14px; bottom:12px; margin:0;
  font-family:var(--m); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soft); text-align:center;
}

/* ---------- i dati di generazione ---------- */
.dati{border-radius:14px; padding:20px 22px}
.dati-eti{
  margin:0 0 14px; font-family:var(--m); font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal);
  text-shadow:0 0 12px rgba(10,214,182,.55);
}
.dati-righe{display:flex; flex-wrap:wrap; gap:12px 28px}
.dati-righe span{display:flex; flex-direction:column; gap:2px}
.dati-righe b{
  font-family:var(--m); font-weight:700; font-size:clamp(17px,2.2vw,22px);
  line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.dati-righe i{
  font-style:normal; font-family:var(--m); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
}

/* ---------- i tre passi ---------- */
.passi{
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  counter-reset:passo;
}
.passo{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:22px 20px; border-radius:14px;
}
.passo-n{
  font-family:var(--m); font-weight:700; font-size:12px; letter-spacing:.14em;
  color:var(--violet-lo); text-shadow:0 0 12px rgba(155,92,240,.5);
}
.passo b{font-family:var(--m); font-size:15px; font-weight:700; letter-spacing:-.01em}
.passo span:last-child{color:var(--soft); font-size:14.5px; line-height:1.55; text-wrap:pretty}

/* ---------- cosa trovi dentro ---------- */
.dentro{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.scheda{
  display:flex; flex-direction:column; gap:9px; padding:24px 22px; border-radius:14px;
}
.scheda-n{
  font-family:var(--m); font-weight:700; font-size:11px; letter-spacing:.2em;
  color:var(--teal); text-shadow:0 0 12px rgba(10,214,182,.55);
}
.scheda-t{
  margin:0; font-family:var(--m); font-weight:700;
  font-size:clamp(17px,2.2vw,21px); letter-spacing:-.015em; text-wrap:balance;
}
.scheda-r{margin:0; color:var(--soft); font-size:14.5px; line-height:1.6; text-wrap:pretty}

/* ---------- la sfida ---------- */
.sfida{
  margin:0 0 4px; max-width:24ch;
  font-family:var(--m); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(19px,3vw,32px); line-height:1.28;
  color:var(--teal);
  text-shadow:0 0 16px rgba(10,214,182,.5), 0 0 42px rgba(10,214,182,.22);
  animation:respiro 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .sfida{animation:none} }

/* ---------- le tre carte, rifatte ----------
   Il numero non e' piu' un'etichetta: e' una cifra grande e sbiadita
   dietro il testo, che si accende al passaggio. La riga di luce in
   cima si allunga da sinistra. */
.scheda{position:relative; overflow:hidden; padding:26px 22px 24px}
.scheda::after{
  content:attr(data-n); position:absolute; right:-6px; bottom:-22px;
  font-family:var(--m); font-weight:700; font-size:104px; line-height:1;
  color:rgba(255,255,255,.035); letter-spacing:-.05em; pointer-events:none;
  transition:color .45s var(--curva), transform .45s var(--curva);
}
.scheda .scheda-n{
  position:relative; z-index:1; font-size:10.5px; letter-spacing:.24em;
}
.scheda-t,.scheda-r{position:relative; z-index:1}
.scheda::before{
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--curva), opacity .4s var(--curva);
}
.rv.on .scheda::before{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .scheda:hover::after{
    color:rgba(10,214,182,.10); transform:translate(-4px,-4px) scale(1.04);
  }
  .scheda:hover{transform:translateY(-4px)}
}
.scheda{transition:transform .38s var(--curva)}

/* il titolo dell'articolo di stampa, senza il marchio ripetuto */
.stampa.grande{gap:12px}
.stampa.grande .testata{display:none}

/* Il cursore in fondo al titolo: lo stesso dell'apertura in home. */
.pagina-titolo .cursore{
  display:inline-block; width:.42em; height:.8em; margin-left:.14em;
  vertical-align:-.04em; background:var(--teal); border-radius:1px;
  box-shadow:0 0 12px rgba(10,214,182,.7);
  animation:batti 1.15s steps(1,end) infinite;
}
@keyframes batti{0%,49%{opacity:1}50%,100%{opacity:.08}}
@media (prefers-reduced-motion:reduce){ .pagina-titolo .cursore{animation:none} }