/* Superpowers 4 Consultants. Il filo dei passi e le icone vengono da bisogni.css, come nelle pagine per bisogno. */

/* trecento persone, dodici ascoltate a mano. Ogni persona è la sagoma di «user-round» di Lucide, piena. */
.trecento-box { padding: clamp(20px, 2.4vw, 34px); border-radius: 26px; display: grid; gap: 22px; align-self: end; }
.trecento { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: clamp(3px, .45vw, 6px) clamp(2px, .3vw, 4px); }
.trecento span { aspect-ratio: 1; background: var(--sky-vivo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='5'/%3E%3Cpath d='M3 22a9 9 0 0 1 18 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='5'/%3E%3Cpath d='M3 22a9 9 0 0 1 18 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color .7s var(--esce), transform .7s var(--esce), opacity .7s; transition-delay: calc(var(--r, 0) * 1ms); }
.trecento[data-vista="dodici"] span { background: rgba(14, 46, 62, .12); transform: scale(.82); }
.trecento[data-vista="dodici"] span.dodici { background: var(--imperial); transform: scale(1.12); }
.trecento span.dodici { background: var(--imperial); }
.trecento-box figcaption { display: grid; gap: 16px; }
.trecento-frase { font: 500 var(--t-lead)/1.5 var(--display); letter-spacing: -.01em; }
.interruttore { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; border: 1px solid var(--linea); background: var(--fondo-pannello); }
.interruttore button { padding: 10px 18px; border: 0; border-radius: 999px; background: none; color: var(--sky-chiaro); font: 500 var(--t-piccolo)/1 var(--display); cursor: pointer; transition: background-color .3s, color .3s; }
.interruttore button[aria-checked="true"] { background: var(--jet); color: #f9fffb; }

/* ore: il passo del motore porta la sua etichetta, in Instrument Sans */
.ora-chi { display: inline-block; margin-left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(142, 183, 206, .28); color: var(--imperial); font: 500 var(--t-micro)/1.2 var(--display); letter-spacing: 0; vertical-align: .25em; }
.ore-chiusa { margin-top: clamp(32px, 5vh, 56px); font: 500 var(--t-t3)/1.1 var(--voce); letter-spacing: -.02em; text-wrap: pretty; }
.ore-chiusa span { color: var(--imperial); }

/* liste con icona: cosa c'è dentro, dati e privacy, i tre modi */
.lista-icone { display: grid; border-bottom: 1px solid var(--linea); }
.lista-icone > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px 20px; padding: clamp(20px, 3.2vh, 32px) 0; border-top: 1px solid var(--linea); }
.lista-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eef4f7; color: var(--imperial); }
.lista-icona .icona { width: 22px; height: 22px; }
.lista-icone h3 { font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; margin: 10px 0 8px; }
.lista-icone p { color: var(--sky-chiaro); line-height: 1.6; }
.pila .rimando { display: inline-flex; }

/* modi: righe con icona, nome e sottotitolo a sinistra, cosa ricevi e cosa fai tu a destra */
.modi > li { align-items: start; }
.modo-capo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.modo-capo .lista-icona { grid-row: span 2; align-self: start; }
.modo-sotto { color: var(--sky-chiaro); font-size: var(--t-testo); }
.modi .modo-tu { margin-top: 12px; color: var(--mint); }

.voglia { align-items: end; }
.voglia-sotto { margin-top: 16px; color: var(--sky); }
.voglia figcaption .rimando { margin: 0 0 0 4px; display: inline; }

/* SplitText e text-wrap: balance non vanno d'accordo in WebKit: le prime righe escono di una parola sola */
body[data-pagina="superpowers-4-consultants"] :is(.aperta-titolo, .titolo-sezione, .titolo-medio, .passo-dopo-testo > span) { text-wrap: wrap; }

@media (max-width: 560px) { .trecento { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px 2px; } }