/* Metodo */

/* Attacchi editoriali: colonne vicine, allineate in alto e con misura comune. */
body[data-pagina="metodo"] :is(.capo, .cofano-capo, .analisi-capo) {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
body[data-pagina="metodo"] :is(.capo, .cofano-capo, .analisi-capo) > p {
  max-width: 100%;
  font-size: clamp(1.05rem, 1rem + .2vw, 1.2rem);
  line-height: 1.55;
  letter-spacing: normal;
  text-wrap: pretty;
  text-align: justify;
  text-align-last: start;
  hyphens: none;
}
@media (max-width: 900px) {
  body[data-pagina="metodo"] :is(.capo, .cofano-capo, .analisi-capo) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  body[data-pagina="metodo"] :is(.capo, .cofano-capo, .analisi-capo) > p {
    text-align: start;
    hyphens: none;
  }
}

/* la regola, in apertura */
.regola-domanda { padding: clamp(22px, 2.4vw, 34px); display: grid; gap: 14px; align-self: end; }
.rd-riga { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--linea); }
.rd-riga:first-child { border-top: 0; padding-top: 0; }
.rd-chi { font: 400 var(--t-dato)/1 var(--mono); color: var(--nebbia); }
.rd-riga p { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; }
.rd-no p { color: var(--nebbia); text-decoration: line-through; text-decoration-color: rgba(86, 112, 127, .55); text-decoration-thickness: 2px; }
.rd-si .rd-chi { color: var(--sky); }
.rd-si p { color: var(--mint); }
.regola-domanda figcaption { font-size: var(--t-piccolo); line-height: 1.5; color: var(--sky-chiaro); padding-top: 14px; border-top: 1px solid var(--linea); }


/* la regia si compone */
.compone { padding: clamp(60px, 10vh, 120px) 0; }
.compone-pin { min-height: 100svh; display: flex; align-items: center; padding: 96px 0 40px; }
.compone-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
.compone-lead { margin: 18px 0 28px; color: var(--sky-chiaro); font-size: var(--t-testo); }
.compone-passi > li { padding: 16px 0; }
.compone-passi h3 { font-size: var(--t-lead); }
.compone-passi p { font-size: var(--t-testo); }
.compone-tela { display: grid; gap: 12px; }
.tela-testa { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; color: var(--nebbia); }
.strato { padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px); border-radius: 20px; }
.strato-nome { font: 400 var(--t-dato)/1 var(--mono); color: var(--sky); margin-bottom: 10px; }
.strato-grande { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; margin-bottom: 14px; }
.strato-medio { font-weight: 500; font-size: var(--t-testo); }
.strato-chi { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.strato-chi img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--sky); }
.strato-chi .strato-nome { margin-bottom: 6px; }
.strato .gettoni li { font-size: var(--t-piccolo); padding: 6px 12px; }
.ascolto { display: grid; gap: 6px; }
.ascolto-riga { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; gap: 14px; align-items: center; font-size: var(--t-piccolo); color: var(--sky-chiaro); }
.ascolto-riga .mono { color: var(--nebbia); text-align: right; }
.ascolto-onda { display: flex; align-items: center; gap: 3px; height: 22px; }
.ascolto-onda i { flex: 1; height: 100%; border-radius: 2px; background: var(--sky); opacity: .7; transform: scaleY(.3); }
.ascolto-riga:nth-child(2) .ascolto-onda i { background: var(--sky-chiaro); }
.mini-aree { display: grid; gap: 10px; }
.mini-aree li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 14px; align-items: center; font-size: var(--t-piccolo); color: var(--sky-chiaro); }
.mini-aree i { height: 8px; border-radius: 8px; background: rgba(214, 229, 238, .1); overflow: hidden; }
.mini-aree b { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 8px; background: linear-gradient(90deg, #4f73b0, var(--sky)); }

/* intervistatori */
.volti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.volto h3 { margin: 22px 0 10px; font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.volto h3 span { font: 400 var(--t-dato)/1 var(--mono); color: var(--sky); border: 1px solid var(--linea-forte); border-radius: 999px; padding: 6px 10px; }
.volto p { color: var(--sky-chiaro); line-height: 1.6; }
.volto:hover .volto-foto img { transform: scale(1.04); }
.su-misura { margin-top: clamp(40px, 6vh, 64px); padding-top: 24px; border-top: 1px solid var(--linea); font-size: var(--t-lead); line-height: 1.5; color: var(--sky-chiaro); }
.su-misura strong { color: var(--mint); }

/* soffitto */
.barra { display: flex; gap: 6px; height: 28px; margin-bottom: clamp(32px, 5vh, 56px); }
.barra-parte { flex: var(--n) 1 0; border-radius: 999px; }
.barra-parte--fonte { background: var(--imperial); }
.barra-parte--quadro { background: repeating-linear-gradient(-38deg, rgba(142, 183, 206, .9) 0 6px, rgba(142, 183, 206, .3) 6px 12px); }
.barra-parte--norma { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linea-forte); }
.cifra { font: 400 var(--t-t2)/.9 var(--voce); letter-spacing: -.01em; font-variation-settings: "opsz" 40, "SOFT" 100, "WONK" 0; font-variant-numeric: tabular-nums; color: var(--imperial); margin-bottom: 18px; }
.cifra span { font: 400 var(--t-dato)/1 var(--mono); letter-spacing: 0; color: var(--nebbia); margin-left: 6px; }
.punto--quadro .cifra { color: var(--sky); }
.punto--norma .cifra { color: var(--mint); }

/* confronto */
.scorre { overflow-x: auto; padding: clamp(8px, 1.2vw, 16px) clamp(12px, 2vw, 28px); margin-bottom: clamp(40px, 6vh, 64px); }
.confronto { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--t-testo); }
.confronto th, .confronto td { text-align: left; vertical-align: top; padding: 18px 16px; border-top: 1px solid var(--linea); }
.confronto thead th, .confronto thead td { border-top: 0; font-weight: 600; font-size: var(--t-testo); }
.confronto tbody th { font-weight: 500; color: var(--nebbia); width: 16%; }
.confronto td { color: var(--sky-chiaro); }
.confronto .noi { color: var(--mint); background: rgba(142, 183, 206, .2); }
.confronto thead .noi { color: var(--imperial); }
.confronto thead .noi { border-radius: 14px 14px 0 0; }
.confronto tbody tr:last-child .noi { border-radius: 0 0 14px 14px; }

@media (max-width: 1080px) {
  .compone-griglia { grid-template-columns: 1fr; }
  .compone-pin { min-height: 0; padding: 0; }
  .volti { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .volti { grid-template-columns: 1fr; }
  .rd-riga { grid-template-columns: 1fr; gap: 6px; }
  .strato-chi { grid-template-columns: 48px minmax(0, 1fr); }
  .strato-chi .gettoni { grid-column: 1 / -1; }
  .ascolto-riga { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .ascolto-riga .mono { display: none; }
  .mini-aree li { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* passi che si compongono (solo desktop con moto) */
.compone.in-moto .compone-passo { opacity: .55; transition: opacity .5s var(--esce); }
.compone.in-moto .compone-passo.attivo { opacity: 1; }
.compone.in-moto .compone-passo > div { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .6s var(--esce); }
.compone.in-moto .compone-passo.attivo > div { grid-template-rows: auto 1fr; }
.compone.in-moto .compone-passo p { overflow: hidden; min-height: 0; }
.compone.in-moto .compone-passo h3 { margin-bottom: 0; }
.compone.in-moto .compone-passo.attivo p { padding-top: 8px; }
.punto .cifra { font: 400 var(--t-t2)/.9 var(--voce); letter-spacing: -.01em; font-variation-settings: "opsz" 40, "SOFT" 100, "WONK" 0; }

/* regia: i quattro principi accanto a Carlo che ascolta e rilancia (giro 5) */
.regia-griglia { align-items: center; row-gap: clamp(40px, 6vh, 64px); }

/* giro 6 (12/10): accenti caldi */
.mini-aree b { background: linear-gradient(90deg, #4f73b0, var(--sky) 60%, var(--pesca)); }
.ascolto-riga:nth-child(2) .ascolto-onda i, .ascolto-riga:nth-child(4) .ascolto-onda i { background: var(--pesca); }
.strato-lettura { background: radial-gradient(100% 120% at 100% 0%, rgba(247, 205, 182, .16), transparent 60%), linear-gradient(160deg, #1b2c6c, #0b2433 72%); }

/* ===================================================================== adattivo (21/10)
   «La regia si compone» è fissata dai 1081px in su: tutto deve stare in un'altezza di schermo.
   Su schermi alti valgono le misure di prima (i min() le usano come tetto), su quelli bassi
   spaziature, onde e titoli seguono l'altezza. Sotto i 760px di altezza il blocco non si fissa (interne.js). */
@media (min-width: 1081px) {
  /* il fissaggio parte quando la sezione tocca il bordo alto: con il padding sopra il blocco restava 60-120px più in basso e usciva dallo schermo */
  .compone { padding-top: 0; }
  .compone-pin { padding: calc(var(--testa-h) + min(20px, 2vh)) 0 min(40px, 3vh); }
  .compone .titolo-medio { font-size: min(var(--t-t2), 6.6vh); letter-spacing: -.02em; font-family: var(--voce); font-weight: 500; }
  .compone-lead { margin: min(18px, 1.8vh) 0 min(28px, 2.6vh); }
  .compone-passi > li { padding: min(16px, 1.6vh) 0; }
  .compone-tela { gap: min(12px, 1.3vh); }
  .tela-testa { font-size: min(var(--t-dato), 1.6vh); }
  .strato { padding: min(clamp(16px, 1.6vw, 22px), 2vh) clamp(18px, 1.8vw, 26px); }
  .strato-nome { margin-bottom: min(10px, 1vh); }
  .strato-grande { font-size: min(var(--t-t4), 2.5vh); margin-bottom: min(14px, 1.3vh); letter-spacing: -.015em; }
  .strato .gettoni li { padding: min(6px, .6vh) 12px; }
  .strato-chi { grid-template-columns: min(56px, 6vh) minmax(0, 1fr) auto; }
  .strato-chi img { width: min(56px, 6vh); height: min(56px, 6vh); }
  .ascolto { gap: min(6px, .5vh); }
  .ascolto-riga { line-height: 1.3; }
  .ascolto-onda { height: min(22px, 2.3vh); }
  .mini-aree { gap: min(10px, 1vh); }
  .mini-aree li { line-height: 1.3; }
}