/* =====================================================================
   Il Filosofo — il contenuto del mazzo.

   La cornice (barra, schede, frecce) è in css/mazzo.css, comune alle tre
   interviste. Qui le schede del Filosofo. Il pop resta nelle figure: campiture
   piene del colore della tua figura, il retino, gli adesivi col bordo di carta.
   Il contorno è quello Quisquilia (giro del 12/10/2026): Geist, pillole, fili
   sottili, ombre morbide, corallo solo per l'azione e per il tuo punto.
   ===================================================================== */


/* le schede piene: titoli e testo nel colore che regge sulla campitura della figura */
.scheda.piena{--titolo:var(--su)}
.scheda.piena .pillola{background:var(--su);color:var(--vivo)}
.scheda.piena .pillola.chiara{background:#fff;color:var(--jet)}
.scheda.piena .pulsante.scuro{background:var(--su);color:var(--vivo)}
.scheda.piena[data-tema="nietzsche"] .pulsante.lime{background:var(--jet);color:#fff}

/* ============================================================ copertina */
.copertina{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:minmax(0,1fr) auto;
  column-gap:clamp(24px,4vw,60px);row-gap:22px}
.cop-testo{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:0}
.cop-intro{font-family:var(--display);font-weight:500;font-size:clamp(20px,min(2vw,3.8vh),30px);letter-spacing:-.015em;margin:6px 0 2px}
.copertina h1{font-size:clamp(58px,min(8.2vw,14.5vh),148px);line-height:.86;letter-spacing:-.05em;margin:0 0 22px}
.copertina .apertura{font-size:clamp(16px,min(1.45vw,2.7vh),20px);line-height:1.5;max-width:44ch}
.copertina .apertura em{font-style:normal;font-weight:600}
.cop-figura{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;margin:0}
.cop-figura svg{width:min(100%,46vh);height:auto;overflow:visible}
.cop-figura figcaption{font-family:var(--testo);font-size:13px;text-align:center;max-width:34ch;opacity:.72;line-height:1.7}
.cop-piede{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-top:20px;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.meta{font-family:var(--testo);font-size:13px;line-height:2;opacity:.75}

/* ========================================================= la posizione */
.posizione{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.assi{display:grid;gap:clamp(18px,3vh,30px)}
.asse-titolo{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,20px);margin-bottom:10px}
.asse-pista{position:relative;height:16px;border-radius:999px;background:linear-gradient(90deg,var(--wash),#fff 50%,var(--wash));
  border:1px solid var(--linea);margin:0 0 8px}
.asse-pista::after{content:'';position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;background:var(--ink-17)}
.asse-segno{position:absolute;top:50%;width:24px;height:24px;border-radius:50%;background:var(--fucsia);border:4px solid #fff;
  transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--linea),0 6px 14px -6px rgba(14,46,62,.45);z-index:1}
.asse-capi{display:flex;justify-content:space-between;font-family:var(--testo);font-size:13px;color:var(--ink-64)}
.asse-capi .qui{color:var(--ink);font-weight:500}
.asse-lettura{font-size:15px;color:var(--ink-84);margin-top:8px;max-width:52ch}
.asse-lettura b{font-family:var(--display);font-weight:600}
.posizione-mappa{display:flex;justify-content:center;min-height:0}
.posizione-mappa svg{width:min(100%,58vh);height:auto}
.nota{font-size:13.5px;color:var(--ink-64);max-width:56ch;padding-top:14px;border-top:1px solid var(--ink-08)}

/* ========================================================== il perché */
.duetti{list-style:none;display:grid;gap:clamp(12px,2vh,18px);counter-reset:d}
.duetto{display:grid;grid-template-columns:minmax(0,1.05fr) 44px minmax(0,1fr);gap:clamp(12px,2vw,24px);align-items:center;
  padding:clamp(14px,2.2vh,20px) clamp(16px,2vw,24px);border-radius:22px;background:var(--wash);counter-increment:d}
.duetto-tua{font-family:var(--display);font-weight:600;font-size:clamp(17px,min(1.65vw,3vh),23px);line-height:1.3;letter-spacing:-.015em}
.duetto-segno{width:44px;height:44px;border-radius:50%;background:var(--vivo);color:var(--su);display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;border:1px solid var(--linea)}
.duetto-segno::before{content:counter(d,decimal-leading-zero)}
.duetto-sua{font-size:15px;line-height:1.5;color:var(--ink-84)}

/* ======================================================= la figura */
.ritratto{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,60px);align-items:center;height:100%}
.ritratto-sx{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ritratto-sx svg{width:min(100%,34vh);height:auto;overflow:visible;margin:-10px 0 4px -14px}
.ritratto h2{font-size:clamp(40px,min(5vw,9vh),82px);line-height:.9;letter-spacing:-.045em;margin:0}
.anni{font-family:var(--testo);font-size:13px;opacity:.75}
.cinque{display:grid;gap:0;border-top:2px solid color-mix(in srgb,currentColor 30%,transparent)}
.cinque div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:baseline;padding:clamp(9px,1.6vh,14px) 0;
  border-bottom:1.5px solid color-mix(in srgb,currentColor 16%,transparent)}
.cinque dt{font-family:var(--testo);font-size:13px;opacity:.72}
.cinque dd{font-size:clamp(15px,min(1.3vw,2.4vh),17px);line-height:1.45}

/* ======================================================= con l'AI */
.conai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.citazione-grande{font-family:var(--display);font-weight:600;font-size:clamp(24px,min(2.6vw,4.8vh),40px);line-height:1.18;letter-spacing:-.03em;
  color:var(--imperial);padding-left:22px;border-left:3px solid var(--vivo)}
[data-tema="aristotele"] .citazione-grande{border-left-color:var(--sky)}
.compagni{list-style:none;display:grid;gap:12px;margin-top:10px}
.compagno{padding:14px 18px;border:1px solid var(--linea);border-radius:18px;background:var(--carta);box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22)}
.compagno b{font-family:var(--display);font-weight:600;font-size:17px;display:block;margin-bottom:3px}
.compagno p{font-size:14.5px;color:var(--ink-84);line-height:1.5}
.motto-banda{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:clamp(20px,4vh,40px);
  background:var(--vivo);color:var(--su);border-radius:24px;padding:clamp(12px,2vh,18px) clamp(18px,2.4vw,28px)}
.motto-banda svg{width:clamp(56px,9vh,84px);height:auto;overflow:visible}
.motto-banda p{font-family:var(--display);font-weight:600;font-size:clamp(20px,min(2.2vw,4vh),32px);line-height:1.12;letter-spacing:-.025em}
.motto-banda .etichetta{color:inherit;opacity:.72;margin-bottom:6px;font-weight:500;letter-spacing:0}

/* ======================================================= i vicini */
.vicini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.vicino{border:1px solid var(--linea);border-radius:26px;overflow:hidden;background:var(--carta);box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22);display:flex;flex-direction:column}
.vicino-testa{background:var(--vivo);color:var(--su);display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  padding:clamp(12px,2vh,18px) 20px}
.vicino-testa svg{width:clamp(64px,10vh,96px);height:auto;overflow:visible}
.vicino-testa h3{color:inherit;font-size:clamp(22px,min(2.2vw,4vh),32px);line-height:1;letter-spacing:-.035em}
.vicino-testa .anni{font-size:13px;display:block;margin-top:6px;opacity:.9}
.vicino-corpo{padding:clamp(14px,2.2vh,20px) 20px;display:grid;gap:10px}
.vicino-motto{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,20px);line-height:1.3}
.vicino-corpo p{font-size:15px;color:var(--ink-84);line-height:1.5}

/* ======================================================= il contrario */
.contrario{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,60px);align-items:center;height:100%}
.contrario-sx svg{width:min(100%,36vh);height:auto;overflow:visible}
.contrario h2{font-size:clamp(34px,min(4.4vw,8vh),70px);line-height:.94;letter-spacing:-.045em;margin:6px 0 16px}
.domanda-grande{font-family:var(--display);font-weight:600;font-size:clamp(22px,min(2.4vw,4.4vh),36px);line-height:1.15;letter-spacing:-.025em;
  background:var(--carta);color:var(--ink);border:1px solid var(--linea);border-radius:24px;padding:18px 22px;box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22);margin:14px 0 18px}

/* ======================================================= i temi */
.temi{list-style:none;display:grid;border-top:1px solid var(--linea)}
.tema{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr) auto;gap:clamp(14px,2.4vw,32px);align-items:center;
  padding:clamp(11px,1.9vh,17px) 0;border-bottom:1px solid var(--linea)}
.tema-nome{font-family:var(--display);font-weight:600;color:var(--imperial);font-size:clamp(16px,1.45vw,19px);line-height:1.2}
.tema-nome small{display:block;font-family:var(--testo);font-weight:400;font-size:13px;color:var(--ink-64);margin-top:4px;letter-spacing:0}
.tema-cit{font-family:var(--display);font-weight:500;font-size:clamp(15.5px,min(1.4vw,2.6vh),19px);line-height:1.35}
.tema-cit em{display:block;font-family:var(--testo);font-style:normal;font-size:14px;color:var(--ink-64);margin-top:6px;font-weight:400}
.frecce{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tema-figura{display:block;font-family:var(--testo);font-size:13.5px;line-height:1.4;color:var(--ink-84);margin-top:6px;padding-left:10px;border-left:2px solid var(--sky)}
.tema-figura b{font-family:var(--display);font-weight:600;color:var(--ink);margin-right:4px}
.duetto-ponte{font-size:13.5px;line-height:1.42;color:var(--ink-84);margin-top:6px;font-style:italic}
/* con il ponte il duetto ha tre righe in più: si stringe il resto */
.duetto:has(.duetto-ponte) .duetto-sua{font-size:14px;line-height:1.42}
.duetto:has(.duetto-ponte) .duetto-tua{font-size:clamp(16px,min(1.45vw,2.7vh),21px)}
.temi-due .tema-nome small{display:none}
.temi-due .tema-cit{font-size:clamp(14.5px,min(1.2vw,2.3vh),17px)}
.temi-due .tema-cit em{font-size:13px;margin-top:4px}
.temi-due .tema-figura{font-size:12.5px;margin-top:5px}
@media (max-height:900px) and (min-width:641px){
  .duetti{gap:10px}
  .duetto{padding:12px 18px}
  .duetto-segno{width:36px;height:36px}
  .temi-due .tema{padding:7px 0}
  .temi-due .tema-cit em{display:none}
  .metodo{gap:12px 24px}
  .passo{padding-top:9px}
  .passo p{font-size:14px;line-height:1.42}
  .metodo-piede{margin-top:12px}
}
/* sei temi non stanno in colonna: due colonne, e dentro ogni tema le parti una sotto l'altra */
.temi-due{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3vw,44px)}
.temi-due .tema{grid-template-columns:minmax(0,1fr);gap:6px;align-content:start}
.temi-due .frecce{justify-content:flex-start}
@media (min-width:1180px){.temi-due{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ======================================================= le sfumature */
.sfumature-ritratto{font-family:var(--display);font-weight:500;font-size:clamp(16px,min(1.5vw,2.8vh),20px);line-height:1.35;max-width:70ch;margin:-4px 0 clamp(14px,2.4vh,24px)}
.sfumature-ritratto cite{display:block;font-family:var(--testo);font-style:normal;font-size:13px;color:var(--ink-64);margin-top:6px}
.sfumature{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,2.4vh,24px) clamp(24px,4vw,56px)}
.sfumatura .asse-titolo{margin-bottom:6px}
.sfumatura .asse-lettura{font-size:14.5px}
.sfumatura-cit{font-family:var(--display);font-weight:500;font-size:13.5px;line-height:1.35;color:var(--ink-84);margin-top:5px;padding-left:12px;border-left:2px solid var(--pesca)}
.freccina{font-family:var(--testo);font-size:13px;font-weight:500;white-space:nowrap;color:var(--jet);
  border:0;box-shadow:inset 0 0 0 1px var(--linea-forte);border-radius:999px;padding:5px 11px;background:var(--carta)}
.freccina.forte{background:var(--jet);color:var(--mint);box-shadow:none}

/* ======================================================= le nove figure */
.nove{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);gap:clamp(20px,3vw,44px);align-items:center;height:calc(100% - 112px)}
.caselle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:stretch;min-height:0}
.casella{position:relative;border-radius:20px;border:1px solid var(--linea);background:var(--vivo);color:var(--su);
  padding:10px 12px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-height:0}
.casella svg{width:clamp(48px,8.4vh,78px);height:auto;overflow:visible}
.casella b{font-family:var(--display);font-weight:600;font-size:clamp(15px,min(1.35vw,2.5vh),19px);line-height:1.05;display:block;letter-spacing:-.02em}
.casella span{display:block;font-size:clamp(12px,min(1vw,1.9vh),13.5px);line-height:1.35;margin-top:4px;opacity:.9}
.casella.tua{transform:rotate(-2deg) scale(1.04);box-shadow:0 0 0 4px #fff,0 30px 50px -24px rgba(14,46,62,.45);z-index:1}
.casella.tua::after{content:'tu';position:absolute;top:-12px;right:-8px;font-family:var(--testo);font-size:13px;font-weight:600;
  background:var(--fucsia);color:#fff;border:2px solid #fff;border-radius:999px;padding:2px 11px;transform:rotate(7deg);
  box-shadow:0 6px 14px -6px rgba(244,54,76,.6)}
.nove-testo p{font-size:15px;color:var(--ink-84);margin-bottom:12px}

/* ======================================================= il metodo */
.metodo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,28px)}
.passo{border-top:1px solid var(--linea-forte);padding-top:14px}
.passo h3{font-size:clamp(17px,1.5vw,20px);margin-bottom:6px;letter-spacing:-.02em}
.passo p{font-size:15px;color:var(--ink-84);line-height:1.52}
/* sotto i passi, sulla loro griglia: la nota sul quadro e il riquadro dell'informativa che
   accompagna ogni report (il testo è quello legale, con il Lei) */
.metodo-piede{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);margin-top:22px;align-items:start}
.uso-limitato{padding:12px 16px;border:0;border-radius:16px;background:var(--carta-fredda)}
.uso-limitato b{display:block;font-family:var(--testo);font-weight:600;font-size:13px;margin-bottom:4px;color:var(--jet)}
.uso-limitato p{font-size:12.5px;line-height:1.5;color:var(--nota)}

/* ======================================================= la chiusura */
.chiusura{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,60px);align-items:center;height:100%}
.chiusura h2{color:var(--mint);font-size:clamp(34px,min(4.4vw,8vh),68px);line-height:.96;letter-spacing:-.045em}
.sintesi{font-family:var(--display);font-weight:500;font-size:clamp(16px,min(1.45vw,2.7vh),20px);line-height:1.45;color:rgba(249,255,251,.9);
  padding-left:18px;border-left:3px solid var(--pesca);margin:4px 0 22px;max-width:56ch}
.sintesi cite{display:block;font-family:var(--testo);font-style:normal;font-size:13px;color:var(--pesca);margin-top:10px}
.chiusura .anteprima{justify-self:center;width:min(100%,32vh);transform:rotate(3deg)}
.anteprima{border-radius:20px;overflow:hidden;border:0;box-shadow:0 0 0 1px rgba(249,255,251,.16),0 40px 70px -30px rgba(0,0,0,.6);cursor:pointer;background:var(--ink)}
.anteprima svg{width:100%;height:auto}
.chiusura .pulsante:disabled{opacity:.55;cursor:progress}
.firma{font-family:var(--testo);font-size:13px;color:rgba(249,255,251,.6);margin-top:18px}


/* ---------------------------------------------------------- tablet */
@media (max-width:1020px){
  .copertina,.posizione,.ritratto,.conai,.contrario,.chiusura,.nove{grid-template-columns:minmax(0,1fr);height:auto}
  /* a colonna sola le righe vanno lasciate libere: la riga elastica della copertina
     si schiacciava a zero e l'adesivo finiva sopra il nome */
  .copertina{grid-template-rows:auto;align-content:start}
  .cop-testo,.cop-figura,.cop-piede{grid-column:1;grid-row:auto;min-height:auto}
  .cop-figura{flex-direction:row;justify-content:flex-start;gap:16px}
  .cop-figura svg{width:min(34%,170px)}
  .cop-figura figcaption{text-align:left}
  .vicini,.metodo,.metodo-piede{grid-template-columns:minmax(0,1fr)}
  .barra-titolo{display:none}
  .duetto{grid-template-columns:minmax(0,1fr)}
  .duetto-segno{display:none}
  .tema{grid-template-columns:minmax(0,1fr)}
  .frecce{justify-content:flex-start}
  .temi-due,.sfumature{grid-template-columns:minmax(0,1fr)}
}
/* --------------------------------------------------------- telefono */
@media (max-width:640px){
  :root{--barra:52px;--piede:64px;--larghezza:calc(100vw - 28px);--fuga:10px}
  body{font-size:16px}
  .barra{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .marchio-prodotto{display:none}
  .avanzamento{justify-self:center;gap:2px}
  /* il lockup è più largo della vecchia scritta: i segmenti si stringono, il logo non si taglia */
  .segmento{width:calc((100vw - 272px) / 12)}
  .marchio{min-width:auto}
  .copertina h1{font-size:clamp(48px,15vw,64px)}
  .cop-intro{font-size:19px}
  .pillola{font-size:13px;letter-spacing:0;padding:7px 14px;white-space:normal}
  .cop-piede{flex-direction:column;align-items:stretch}
  .cop-piede .azioni{flex-direction:column;align-items:stretch}
  .cop-piede .pulsante{justify-content:center}
  .ritratto-sx svg{width:150px}
  .contrario-sx svg{width:150px}
  .cinque div{grid-template-columns:minmax(0,1fr);gap:2px}
  .contatore{display:none}
  .barra-destra{gap:0}
  .mazzo{padding-top:12px;padding-bottom:14px}
  .scheda{padding:22px 18px 26px;opacity:.5;border-radius:24px}
  .aiuto-tasti{display:none}
  .freccia{padding:11px 16px}
  .freccia .f-testo{display:none}
  .caselle{gap:7px}
  .casella{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;padding:8px}
  .casella span{display:none}
  .velo-corpo{grid-template-columns:minmax(0,1fr)}
  .velo-anteprima{width:min(52vw,220px);justify-self:center}
}
/* ---------------------------------------------- schermi poco alti */
@media (max-height:900px) and (min-width:641px){
  .sfumature-ritratto{font-size:16px;margin-bottom:12px}
  .sfumatura .asse-lettura{font-size:14px;margin-top:5px}
  .temi-due .tema{padding:10px 0}
}
@media (max-height:820px) and (min-width:641px){
  :root{--barra:52px;--piede:60px}
  body{font-size:15.5px}
  .mazzo{padding-top:14px;padding-bottom:16px}
  .scheda{padding-top:clamp(20px,3.4vh,32px);padding-bottom:22px}
  .occhio{margin-bottom:10px}
  .duetto-sua,.vicino-corpo p,.passo p,.compagno p{font-size:14px}
  .pulsante{padding:11px 18px;font-size:15px}
}
@media (max-height:780px) and (min-width:641px){
  .citazione-grande{font-size:clamp(22px,4.2vh,32px)}
  .motto-banda{margin-top:16px;padding:10px 20px}
  .motto-banda svg{width:54px}
  .motto-banda p{font-size:clamp(18px,3.4vh,24px)}
  .tema{padding:8px 0}
  .tema-cit em{margin-top:3px}
  .sfumatura-cit{display:none}
  .sfumature-ritratto{font-size:15.5px;margin-bottom:10px}
  .asse-lettura{font-size:14px}
  .assi{gap:14px}
  .posizione .nota{margin-top:12px!important}
  .metodo{gap:14px 24px}
  .passo{padding-top:10px}
  .passo p{font-size:14px;line-height:1.45}
  .metodo-piede{margin-top:14px;gap:14px 24px}
  .uso-limitato{padding:10px 14px}
  .uso-limitato p{font-size:12px;line-height:1.42}
}
@media (max-height:730px) and (min-width:641px){
  .motto-banda svg{display:none}
  .motto-banda{grid-template-columns:minmax(0,1fr)}
  .conai .grande{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ------------------------------------------------------------ stampa */
@media print{
  html,body{height:auto;overflow:visible;display:block;background:#fff}
  .barra,.piede,.azioni,.velo{display:none!important}
  .mazzo{display:block;overflow:visible;padding:0}
  .scheda{opacity:1!important;transform:none!important;height:auto;overflow:visible;box-shadow:none;break-after:page;margin-bottom:12px;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* i nomi lunghi (Gottfried Wilhelm Leibniz) in copertina andavano su tre righe: si stringono */
.copertina h1.lungo{font-size:clamp(40px,min(5.4vw,9.5vh),96px)}
@media (max-width:640px){.copertina h1.lungo{font-size:clamp(36px,11vw,48px)}}

/* la riga «ti somiglia anche», in fondo alla scheda delle sfumature */
.sfumature-anche{margin-top:clamp(12px,2vh,20px);font-size:15px;line-height:1.45;color:var(--ink-84);padding:10px 14px;border-radius:14px;background:var(--wash)}
.sfumature-anche .etichetta{display:block;margin-bottom:2px}
.sfumature-anche b{font-family:var(--display);font-weight:600;color:var(--imperial)}

/* Schermi da portatile (fino a 900px di altezza): le schede «… e l'AI» con due compagni
   di strada e i testi verificati, e il metodo con il riquadro legale, stanno in uno schermo. */
@media (max-height:900px) and (min-width:641px){
  .citazione-grande{font-size:clamp(21px,min(2.3vw,4vh),34px)}
  .conai{gap:clamp(20px,3vw,44px)}
  .conai .grande{font-size:15.5px;line-height:1.5}
  .compagni{gap:8px}
  .compagno{padding:9px 14px;box-shadow:0 1px 2px rgba(14,46,62,.05),0 24px 48px -32px rgba(14,46,62,.22)}
  .compagno b{font-size:15.5px;margin-bottom:1px}
  .compagno p{font-size:13px;line-height:1.42}
  .motto-banda{margin-top:14px;padding:8px 18px}
  .motto-banda svg{width:52px}
  .motto-banda p{font-size:clamp(18px,3.2vh,24px)}
  .uso-limitato{padding:9px 14px}
  .uso-limitato p{font-size:12px;line-height:1.42}
  .metodo-piede{margin-top:10px}
}