/* home.css: variante della home (IT ed EN). Il grafico del segnale vive solo qui. */
/* Il fondo della apertura e' quello comune .eroe (eg.css); qui niente onde: c'e' gia' il grafico del segnale. */
.apertura .contenitore{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(40px,4.4vw,64px);padding-bottom:clamp(48px,5vw,72px)}
.apertura .occhiello{color:rgba(255,255,255,.7)}
.apertura h1{font-size:clamp(40px,4.7vw,66px);font-variation-settings:"wdth" 118;font-weight:800;letter-spacing:-.03em;max-width:13ch}
.apertura h1 .tm{font-size:.42em}
.apertura h1 .h1-seconda{display:block;margin-top:.45em;font-size:.44em;line-height:1.2;font-weight:600;font-variation-settings:"wdth" 104;letter-spacing:-.01em;max-width:24ch;color:rgba(255,255,255,.92)}
.apertura .sottotitolo{font-size:clamp(19px,2vw,24px);line-height:1.45;color:rgba(255,255,255,.82);max-width:34ch;margin:22px 0 30px}
.apertura .sottotitolo em{font-style:normal;color:var(--corallo)}
.azioni{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.segnale{width:100%;height:auto;display:block}
.segnale text{font-family:var(--display);font-variation-settings:"wdth" 100;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px;fill:rgba(255,255,255,.62)}
.segnale .rumore{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.6;stroke-linejoin:round}
.segnale .traccia{fill:none;stroke:var(--corallo);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.segnale .griglia{stroke:rgba(255,255,255,.1);stroke-width:1}
.segnale .soglia{stroke:rgba(249,97,103,.5);stroke-dasharray:3 4;stroke-width:1}
.segnale .punto{fill:var(--corallo)}
.segnale .alone{fill:none;stroke:var(--corallo);stroke-width:1.2;opacity:.5}
.segnale .etichetta-fine text{fill:var(--corallo)}
@media (prefers-reduced-motion:no-preference){
  .segnale .traccia{stroke-dasharray:1200;stroke-dashoffset:1200;animation:disegna 2.2s cubic-bezier(.4,0,.2,1) .35s forwards}
  .segnale .rumore{stroke-dasharray:1400;stroke-dashoffset:1400;animation:disegna 2.6s ease-out forwards}
  .segnale .punto,.segnale .alone,.segnale .etichetta-fine{opacity:0;animation:appari .6s ease 2.3s forwards}
  .segnale .alone{animation:pulsa 2.4s ease-in-out 2.4s infinite}
  @keyframes disegna{to{stroke-dashoffset:0}}
  @keyframes appari{to{opacity:1}}
  @keyframes pulsa{0%{opacity:0;r:9}40%{opacity:.6}100%{opacity:0;r:26}}
}
.profilo .contenitore{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center}
.profilo h2{font-size:clamp(36px,5vw,64px);color:var(--notte);font-variation-settings:"wdth" 118;letter-spacing:-.03em}
.profilo p{font-size:clamp(18px,1.6vw,21px);line-height:1.55;margin:22px 0 0}
.profilo p+p{color:var(--secondario)}
/* Il ritratto resta fermo mentre il testo scorre, e si ferma sotto la testata lasciando
   all'angolo corallo la stessa distanza che lo separa dalla foto: l'angolo non si taglia mai. */
/* La foto resta ferma solo finche' il testo accanto e' piu' alto di lei: per questo e' larga quanto
   quella della pagina About, e il testo le scorre accanto (14/09/2026). */
.ritratto{position:sticky;top:var(--ferma-ritratto);align-self:start;justify-self:center;width:100%;max-width:300px}
.ritratto figure{margin:0}
.ritratto img{width:100%;border-radius:4px;box-shadow:0 30px 60px -20px rgba(20,27,69,.4)}
.ritratto figcaption{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--secondario);margin-top:14px}
.ritratto::before{content:"";position:absolute;left:-18px;top:-18px;width:120px;height:120px;border-top:3px solid var(--corallo);border-left:3px solid var(--corallo);pointer-events:none}
.insights .testa{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.insights h2{font-size:clamp(30px,3.6vw,46px);color:var(--notte);max-width:22ch}
.insights .sotto{font-size:clamp(18px,1.8vw,21px);color:var(--secondario);margin:12px 0 0;max-width:52ch}
.insights .testa a.tutti{font-family:var(--display);font-weight:600;font-size:15px;color:var(--notte);text-decoration:none;border-bottom:2px solid var(--corallo);padding-bottom:2px}
.articoli{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none}
.articolo{background:var(--bianco);border:1px solid var(--bordo);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.articolo figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--fondo)}
.articolo figure img{width:100%;height:100%;object-fit:cover}
.articolo .corpo{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.articolo time{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondario);font-weight:600}
.articolo h3{font-size:21px;line-height:1.2;margin:10px 0 18px;color:var(--notte);font-variation-settings:"wdth" 106;letter-spacing:-.01em;flex:1}
.articolo h3 a{text-decoration:none}
.articolo h3 a::before{content:"";position:absolute;inset:0}
.articolo .leggi{font-family:var(--display);font-weight:600;font-size:14px;color:var(--notte);text-decoration:none}
.condividi{margin-top:36px;display:flex;align-items:center;gap:14px;color:var(--secondario);font-size:15px}
.condividi a{width:36px;height:36px;border:1px solid var(--bordo);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--notte);background:var(--bianco)}
.condividi a:hover{border-color:var(--notte)}
.condividi svg{width:16px;height:16px}
@media (max-width:1080px){
  .apertura .contenitore{grid-template-columns:1fr}
  .apertura .segnale-blocco{max-width:640px}
}
@media (max-width:960px){
  .profilo .contenitore{grid-template-columns:1fr}
  .ritratto{position:relative;top:auto}
  .articoli{grid-template-columns:1fr;max-width:560px}
  .ritratto{max-width:520px}
  .ritratto::before{left:0;top:0;width:80px;height:80px}
}
@media (max-width:640px){
  .apertura h1{font-size:clamp(36px,11vw,48px)}
}