/* NTS NEXT — pagina Contatti. Si appoggia a sito.css: qui solo quello che è di questa pagina.
   Il modulo resta quello di sito.css (stessi nomi, stessi id): qui cambia solo cosa gli sta intorno. */

/* ── 1. Testata: recapiti a sinistra, modulo a destra ───── */
.contatti-testa{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.testa-contatti h1{font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem)}
.recapiti-grandi{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.recapiti-grandi li{display:flex}
.scheda.recapito{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-content:start;
  padding:14px 16px 13px;color:var(--testo);text-decoration:none;background:rgba(10,35,41,.72)}
.scheda.recapito svg{grid-row:span 3;width:42px;height:42px;margin:0;padding:8px;box-sizing:border-box;border-radius:12px;background:var(--accento-tenue)}
.recapito .tipo{font-size:.78rem;font-weight:500;color:var(--testo-2)}
.recapito .valore{font-size:clamp(.98rem,.9rem + .25vw,1.08rem);font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere;transition:color .25s}
.recapito .nota{margin-top:1px;font-size:.8rem;color:var(--testo-2)}

/* Colori dei disegni a linee (gli stessi di Siti web) */
.illu{overflow:visible}
.illu .tenue{fill:rgba(157,179,184,.34)}
.illu .tinta{fill:var(--accento)}
.illu .fondo{fill:#0C2A30}
.illu .tratto{stroke:#C4D6DA;stroke-width:1.5}
.illu .tratto.acc{stroke:var(--accento)}
.illu .cavo{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5}
.illu .pacchetto{fill:none;stroke:var(--accento);stroke-width:7;stroke-linecap:round;stroke-dasharray:.01 99.99;opacity:0}
.illu text{font-family:var(--font)}
.illu .nome{font-size:13px;font-weight:500;fill:var(--testo-2);text-anchor:middle}
.illu g,.illu rect,.illu circle,.illu path{transform-box:fill-box}
/* chi ha un transform scritto nel disegno lo tiene riferito al disegno intero */
.illu [transform]{transform-box:view-box}
@keyframes corre{0%{stroke-dashoffset:0;opacity:1}30%{stroke-dashoffset:-100;opacity:1}31%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes pulsa{0%,100%{opacity:.2}35%{opacity:1}}

/* I quattro canali che portano a noi, e l'orologio degli orari */
.scheda.canali-figura{margin:22px 0 0;padding:14px 18px 12px;
  background:radial-gradient(60% 90% at 100% 100%,rgba(0,151,178,.12),transparent 65%),var(--pannello)}
.scheda.canali-figura svg{width:100%;height:auto;margin:0}
.canali .icona-c{fill:none;stroke:var(--accento);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.canali .canale{font-size:14px;font-weight:600;fill:var(--testo)}
.canali .mozzo-nome{font-size:15px;font-weight:700;fill:var(--testo);text-anchor:middle}
.canali .mozzo-sotto{font-size:12px;fill:var(--testo-2);text-anchor:middle}
.canali .fascia{fill:none;stroke:rgba(0,196,224,.3);stroke-width:6;stroke-linecap:round}
.canali .lancetta{fill:none;stroke:var(--accento);stroke-width:2.6;stroke-linecap:round;transform-box:view-box;transform-origin:532px 84px}
.canali .perno{fill:var(--accento)}
.canali-figura.in-vista .pacchetto{animation:corre 4.8s linear infinite}
.canali-figura.in-vista .v2{animation-delay:1.2s}
.canali-figura.in-vista .v3{animation-delay:2.4s}
.canali-figura.in-vista .v4{animation-delay:3.6s}
.canali-figura.in-vista .mozzo{animation:mozzo 1.2s ease-out .24s infinite}
@keyframes mozzo{0%{fill:#0F3E48}45%,100%{fill:#0C2A30}}
@keyframes lancetta{0%,8%{transform:rotate(-90deg)}78%,100%{transform:rotate(180deg)}}
.scheda.recapito:hover{border-color:rgba(0,196,224,.45)}
.scheda.recapito:hover .valore{color:var(--accento)}
.js .scheda.recapito.appare.visto:hover{transform:translateY(-3px)}
.contatti-modulo{min-width:0}
.testa-contatti .modulo{box-shadow:0 30px 80px -40px rgba(0,0,0,.6);border-color:rgba(0,196,224,.25);
  background:radial-gradient(90% 60% at 100% 0%,rgba(0,151,178,.16),transparent 60%),var(--pannello)}
.testa-contatti .modulo h2{font-size:1.7rem}
.testa-contatti .campo{margin-top:16px}
.testa-contatti .campo textarea{min-height:120px}

/* ── 2. Cosa succede dopo + dove siamo ──────────────────── */
.dopo-dove{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.dopo h2,.dove h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.1rem)}
.intro{margin-top:14px;color:var(--testo-2);font-size:1.05rem;max-width:48ch}
.sentiero{list-style:none;margin:34px 0 0;padding:0;position:relative;display:grid;gap:14px}
/* il filo che unisce le tre tappe, e che si riempie quando la sezione entra in vista */
.sentiero::before,.sentiero::after{content:"";position:absolute;left:27px;top:28px;bottom:40px;width:2px;border-radius:2px;background:var(--bordo-forte)}
.sentiero::after{background:var(--accento);transform-origin:top;transition:transform 1.6s var(--esce) .4s}
.js .sentiero::after{transform:scaleY(0)}
.js .sentiero.visto::after{transform:none}
.sentiero li{position:relative;display:grid;grid-template-columns:56px 1fr;column-gap:20px;padding:4px 0}
.tappa{grid-row:span 2;position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--fondo);border:1px solid var(--bordo-forte);transition:background .5s,border-color .5s,box-shadow .5s}
.tappa svg{width:26px;height:26px;fill:none;stroke:var(--testo);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.sentiero.visto .tappa{border-color:var(--accento);box-shadow:0 0 0 6px var(--accento-tenue)}
.sentiero.visto .tappa svg{stroke:var(--accento)}
.sentiero.visto li:nth-child(1) .tappa,.sentiero.visto li:nth-child(1) .tappa svg{transition-delay:.4s}
.sentiero.visto li:nth-child(2) .tappa,.sentiero.visto li:nth-child(2) .tappa svg{transition-delay:1s}
.sentiero.visto li:nth-child(3) .tappa,.sentiero.visto li:nth-child(3) .tappa svg{transition-delay:1.6s}
.sentiero h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:650;padding-top:6px}
.sentiero p{margin-top:4px;color:var(--testo-2);font-size:.98rem;max-width:44ch}
/* accanto a ogni tappa, un piccolo disegno di quello che succede */
.sentiero li{grid-template-columns:56px minmax(0,1fr) 150px;align-items:center}
.sentiero .tappa{grid-column:1;grid-row:1 / span 2;align-self:start}
.sentiero h3,.sentiero p{grid-column:2}
.sentiero h3{align-self:end}
.sentiero p{align-self:start}
.mini{grid-column:3;grid-row:1 / span 2;display:block;padding:6px 8px;border-radius:14px;border:1px solid var(--bordo);
  background:rgba(10,35,41,.6);transition:border-color .5s}
.sentiero.visto .mini{border-color:rgba(0,196,224,.22)}
.mini svg{width:100%;height:auto}
.m-legge .evidenzia{fill:var(--accento-tenue);stroke:rgba(0,196,224,.55);stroke-width:1}
.m-chiama .cornetta{stroke-width:1.1}
.m-chiama .onda-c{fill:none;stroke:var(--accento);stroke-width:2.2;stroke-linecap:round}
.m-chiama .o-sep{font-size:15px;font-weight:600;fill:var(--testo-2);text-anchor:middle}
.m-incontro .cerchia{fill:none;stroke:var(--accento);stroke-width:2.2;stroke-linecap:round}
#dove.in-vista .m-legge .evidenzia{animation:legge 6s var(--esce) infinite}
#dove.in-vista .m-chiama .onda-c{animation:pulsa 2.2s ease-in-out infinite}
#dove.in-vista .m-chiama .o2{animation-delay:.3s}
#dove.in-vista .m-chiama .busta{animation:busta 2.2s var(--esce) 1.1s infinite}
#dove.in-vista .m-incontro .cerchia{stroke-dasharray:1;animation:cerchia 5s var(--esce) infinite both}
@keyframes legge{0%,14%{transform:none;opacity:1}20%,34%{transform:translateY(13px)}40%,54%{transform:translateY(26px)}60%,74%{transform:translateY(39px)}80%,90%{transform:translateY(52px);opacity:1}96%{opacity:0;transform:translateY(52px)}100%{opacity:0;transform:none}}
@keyframes busta{0%,100%{transform:none}35%{transform:translateY(-5px)}}
@keyframes cerchia{0%,12%{stroke-dashoffset:1;opacity:0}13%{stroke-dashoffset:.97;opacity:1}40%,85%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}

.scheda.dove{padding:clamp(20px,2.4vw,30px)}
.dove h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.dove .mappa{width:100%;height:auto;margin:16px 0 0}
.mappa .terra{fill:#08262C}
.mappa .isolato{fill:#0D3037;stroke:rgba(255,255,255,.06);stroke-width:1}
.mappa .strada{fill:none;stroke:rgba(196,214,218,.28);stroke-width:7;stroke-linecap:round}
.mappa .strada.principale{stroke:rgba(196,214,218,.4);stroke-width:11}
.mappa .percorso{fill:none;stroke:var(--accento);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:3 9}
.mappa .ombra{fill:rgba(0,0,0,.45)}
.mappa .onda{fill:none;stroke:var(--accento);stroke-width:2;opacity:0}
.mappa .testa-spillo{fill:var(--accento);stroke:var(--fondo);stroke-width:1.5}
.mappa .foro{fill:var(--fondo)}
.mappa .cartiglio{fill:var(--fondo);stroke:rgba(0,196,224,.5);stroke-width:1.2}
.mappa .cartiglio-testo{font-family:var(--font);font-size:13px;font-weight:700;fill:var(--testo)}
.mappa .cartiglio-sotto{font-family:var(--font);font-size:11.5px;fill:var(--testo-2)}
.mappa g,.mappa circle,.mappa path,.mappa ellipse{transform-box:fill-box}
/* il segnaposto cade sulla sede, poi pulsa (solo mentre la sezione si vede) */
@keyframes cade{0%{transform:translateY(-60px);opacity:0}60%{transform:translateY(4px);opacity:1}80%{transform:translateY(-3px)}100%{transform:none;opacity:1}}
@keyframes onda{0%{transform:scale(.6);opacity:.9}100%{transform:scale(4);opacity:0}}
@keyframes passi{to{stroke-dashoffset:-48}}
.js .dove .spillo{opacity:0}
.js .dove.visto .spillo{animation:cade .9s var(--esce) .5s both}
.mappa .onda{transform-origin:center}
.js .dove.visto .onda{animation:onda 2.6s ease-out 1.4s infinite}
.js .dove.visto .onda.o2{animation-delay:2.7s}
.mappa .percorso{animation:passi 2s linear infinite}
/* e un punto fa la strada fino alla sede */
.mappa .auto{fill:none;stroke:var(--accento);stroke-width:9;stroke-linecap:round;stroke-dasharray:.01 99.99;opacity:0}
#dove.in-vista .mappa .auto{animation:arriva 5s linear 1.4s infinite}
@keyframes arriva{0%{stroke-dashoffset:0;opacity:1}55%{stroke-dashoffset:-100;opacity:1}58%,100%{stroke-dashoffset:-100;opacity:0}}
.mappa .bussola circle{fill:var(--fondo);stroke:rgba(255,255,255,.22);stroke-width:1.2}
.mappa .bussola .nord{fill:var(--accento)}
.mappa .bussola .sud{fill:rgba(196,214,218,.4)}
.mappa .bussola text{font-family:var(--font);font-size:11px;font-weight:700;fill:var(--testo-2);text-anchor:middle}
.mappa .scala-fondo{fill:var(--fondo);stroke:rgba(255,255,255,.14);stroke-width:1}
.mappa .scala{font-family:var(--font);font-size:11px;font-weight:500;fill:var(--testo-2);text-anchor:middle}
.js #dove:not(.in-vista) .mappa *{animation-play-state:paused}
.indirizzo{margin-top:12px;font-size:.95rem;color:var(--testo-2)}
.indirizzo a{white-space:nowrap}
.orari-titolo{margin-top:18px;font-size:1rem;font-weight:650}
.settimana{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.settimana li{display:grid;grid-template-rows:auto 56px auto;gap:6px;text-align:center}
.settimana .giorno{font-size:.8rem;font-weight:600}
.settimana .barra{position:relative;border-radius:8px;border:1px dashed rgba(255,255,255,.16);overflow:hidden}
.settimana .aperto .barra{border:1px solid rgba(0,196,224,.4);background:var(--accento-tenue)}
/* la fascia 9-18 dentro la giornata (dalle 7 alle 21) */
.settimana .aperto .barra::after{content:"";position:absolute;left:3px;right:3px;top:14%;bottom:21%;border-radius:5px;background:var(--accento);
  transform-origin:bottom;transition:transform .8s var(--esce)}
.js .dove .settimana .aperto .barra::after{transform:scaleY(0)}
.js .dove.visto .settimana .aperto .barra::after{transform:none}
.js .dove.visto .settimana li:nth-child(2) .barra::after{transition-delay:.1s}
.js .dove.visto .settimana li:nth-child(3) .barra::after{transition-delay:.2s}
.js .dove.visto .settimana li:nth-child(4) .barra::after{transition-delay:.3s}
.js .dove.visto .settimana li:nth-child(5) .barra::after{transition-delay:.4s}
.settimana .ore{font-size:.72rem;color:var(--testo-2);line-height:1.3}
.settimana .aperto .ore{color:var(--testo)}

/* ── Adattamento ───────────────────────────────────────── */
@media (max-width:1024px){
  .contatti-testa,.dopo-dove{grid-template-columns:1fr}
  .contatti-modulo{max-width:640px}
}
@media (max-width:600px){
  .recapiti-grandi{grid-template-columns:1fr}
  .sentiero li{grid-template-columns:56px minmax(0,1fr);column-gap:16px}
  .mini{grid-column:2;grid-row:auto;max-width:180px;margin-top:10px}
  .illu .nome{font-size:16px}
  .canali .canale{font-size:16px}
  .settimana{gap:4px}
  .settimana .ore{font-size:.66rem}
  .indirizzo a{white-space:normal}
}

/* ── Riduci movimento: tutto fermo e completo ───────────── */
@media (prefers-reduced-motion:reduce){
  .mappa *,.illu *{animation:none!important}
  .js .dove .spillo{opacity:1}
  .mappa .onda,.mappa .auto,.illu .pacchetto{display:none}
  .js .sentiero::after{transform:none}
  .js .dove .settimana .aperto .barra::after{transform:none}
  .js .scheda.recapito.appare.visto:hover{transform:none}
}


/* ── 2026-10-15: senza «Dove siamo» (niente sede né orari nei contatti, Simone). I tre passi
   occupano tutta la larghezza, in fila, ognuno con il suo disegno grande ── */
@media (min-width:1025px){
  .dopo-dove{grid-template-columns:1fr}
  .dopo .appare:first-child{display:flex;align-items:end;justify-content:space-between;gap:40px}
  .dopo .intro{margin:0}
  .sentiero{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
  .sentiero::before,.sentiero::after{left:28px;right:28px;top:28px;bottom:auto;width:auto;height:2px}
  .sentiero::after{transform-origin:left}
  .js .sentiero::after{transform:scaleX(0)}
  .js .sentiero.visto::after{transform:none}
  .sentiero li{display:flex;flex-direction:column;align-items:flex-start;padding:0}
  .sentiero .tappa{margin-bottom:18px}
  .sentiero h3,.sentiero p{align-self:flex-start;max-width:none}
  .mini{order:5;width:100%;margin-top:22px;padding:14px 18px}
}