/* contatto.css — la scena finale "Restiamo in contatto".
   Palette e linguaggio sono quelli del resto del sito: carta chiara, inchiostro,
   piste da circuito stampato. Il riferimento dell'utente era su fondo scuro; qui
   se ne riprende la COMPOSIZIONE (globo al centro, mani dai lati, due finestre
   flottanti) e non i colori — vedi contatto.js per la coreografia. */

/* La sezione e' alta piu' schermate: il suo scroll e' la linea del tempo della
   scena. Il figlio agganciato resta fermo mentre lei scorre sotto.
   z-index:2 come .runway e main — il palco fisso della pellicola sta a 1 e a
   questo punto e' gia' spento, ma senza contesto proprio potrebbe ancora
   dipingerci sopra. */
/* Sfondo TRASPARENTE, non `var(--paper)`: il palco della pellicola dietro ha un
   suo gradiente (paper-2 in alto, paper in basso), quindi un riempimento pieno
   disegnava una riga netta orizzontale che saliva sullo schermo durante il
   passaggio. Lasciandola trasparente si vede la carta del body, e il palco si
   limita a dissolversi sopra: nessun bordo possibile. */
.contatto{ position:relative; z-index:2; height:320vh; background:transparent; }
/* FISSO, non agganciato (sticky). Con sticky la scena aveva un "ingresso" lungo
   una schermata intera in cui il contenuto era sotto la piega e quindi invisibile:
   sommato alla coda vuota della pellicola faceva 1,3 schermate di bianco prima che
   il globo si vedesse. Da livello fisso la scena vive sempre al centro dello
   schermo e puo' accendersi nell'istante in cui la sezione entra — la stessa
   soluzione gia' usata da .stage-fixed per la pellicola.
   pointer-events:none perche' il modulo NON sta qui dentro (vive nel footer): qui
   non c'e' niente da cliccare, e un livello fisso a tutto schermo che intercetta i
   clic sarebbe una trappola. */
.contatto-pin{
  position:fixed; inset:0; overflow:hidden; z-index:3;
  pointer-events:none; visibility:hidden;
}

.contatto canvas.globo{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

/* ---- le mani: entrano dai lati e si protendono verso il globo ----
   Sono immagini a tratto con l'alfa gia' cotta (pipeline/prep_contatto.py):
   niente mix-blend-mode, che su queste dimensioni costa e non serve. */
.contatto .mano{
  position:absolute; pointer-events:none; opacity:0;
  width:clamp(240px, 30vw, 460px); height:auto;
  will-change:transform,opacity;
}
/* `left`/`right` restano DENTRO il bordo (0), lo sporgere è affidato a `translate`
   in vw — numericamente equivalente al vecchio `right:-4%` (il contenitore è a
   piena larghezza), ma paint-only: non allarga il box di layout dell'elemento.
   Con `right:-4%` come proprietà di POSIZIONE, il box vero si estendeva di
   decine/centinaia di px oltre il viewport — su mobile in orizzontale Chrome
   reagiva allargando l'"innerWidth" logico della pagina (misurato: da 844 a 892)
   per accomodarlo, e QUALUNQUE ELEMENTO `position:fixed; right:Npx` sul resto
   della pagina — i puntini di rotta compresi — finiva spostato fuori dallo
   schermo reale. Bug scoperto ingrandendo i puntini per la richiesta del
   2026-08-24, ma la causa era già qui da prima. */
.contatto .mano-sx{ left:0;  top:58%; translate:-4vw 0; }
.contatto .mano-dx{ right:0; top:22%; translate:4vw 0; }

/* ---- il titolo ---- */
.contatto-testo{
  position:absolute; left:0; right:0; top:clamp(56px, 9vh, 104px);
  padding:0 var(--gutter); text-align:center;
  opacity:0; will-change:transform,opacity;
}
.contatto-testo h2{
  margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.0;
  font-size:clamp(32px, 5.4vw, 70px); text-wrap:balance;
}
.contatto-testo h2 em{ font-style:normal; position:relative; white-space:nowrap; }
.contatto-testo h2 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.08em;
  background:linear-gradient(90deg,var(--teal),var(--amber)); border-radius:2px;
}
.contatto-testo .lede{ margin:14px auto 0; max-width:52ch; }

/* ---- le due finestre ---- */
.contatto .scheda{
  background:color-mix(in srgb, var(--paper-2) 92%, transparent);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 22px 50px -22px rgba(18,22,38,.34);
  backdrop-filter:blur(3px);
}
/* Alta e a sinistra: piu' in basso finiva esattamente sul dito della mano di
   sinistra, e due elementi che si toccano in punta leggono come una collisione,
   non come profondita'. Un po' di sovrapposizione col globo invece va bene, ed e'
   quello che fa il riferimento. */
.contatto .scheda-stat{
  position:absolute; left:clamp(16px, 7vw, 122px); top:31%;
  padding:22px 26px; opacity:0; will-change:transform,opacity;
  /* flex in colonna invece di margini fra righe: coi margini negativi che
     servono a togliere l'imbottitura dal flusso (sotto) due <a> vicini
     avrebbero fatto collassare i margini in modo poco prevedibile —
     "gap" su un contenitore flex non collassa mai, il risultato e' esatto. */
  display:flex; flex-direction:column; gap:11px;
  /* BUG REALE (trovato dall'utente, non da un test automatico — i controlli
     precedenti guardavano solo tag/href, non se il clic arrivasse davvero):
     .contatto-pin qui sopra ha pointer-events:none apposta (e' un livello
     fisso a tutto schermo, "non c'e' niente da cliccare" quando e' stato
     scritto) e la proprieta' si EREDITA: telefono/WhatsApp sono <a> veri con
     l'href giusto ma restavano comunque non cliccabili, ereditando "none"
     dal genitore. Va riaccesa qui, dove la scheda e' davvero interattiva. */
  pointer-events:auto;
}
/* Prima ospitava un'unica grande statistica ("95%"); ora sono i recapiti
   diretti — telefono, WhatsApp e la fascia oraria di ricontatto — quindi la
   scheda e' passata da un numero+didascalia a un piccolo elenco di righe
   cliccabili con icona. Le righe sono <a> a piena larghezza (non piu'
   larghe solo quanto il loro contenuto) con un po' di imbottitura propria:
   l'area cliccabile/toccabile e' tutta la riga, non solo icona+testo — piu'
   comoda sia col mouse che col dito (richiesto dall'utente). Il margine
   negativo pareggia la sua stessa imbottitura (non quella di un vicino:
   niente collasso da gestire) cosi' il padding aggiunge area di tocco senza
   spingere in giu' il resto della scheda. */
.contatto .scheda-stat .sc-riga{
  display:flex; align-items:center; gap:13px; text-decoration:none;
  width:100%; padding:7px 0; margin:-7px 0;
  color:var(--ink); font-weight:700; font-size:clamp(17px, 1.9vw, 21px);
  letter-spacing:-.01em;
}
.contatto .scheda-stat .sc-riga svg{
  width:25px; height:25px; flex:none; color:var(--teal);
}
/* il logo WhatsApp e' un cerchio a colore vero (disegnato nell'SVG stesso,
   non piu' un'icona a tratto col colore del tema): niente "color", e piu'
   grande di quella del telefono perche' deve leggersi come logo, non come
   pittogramma — e il numero di cellulare non si vede piu' qui apposta,
   solo il logo + un testo, cosi' e' chiaro che li' si scrive, non si chiama. */
.contatto .scheda-stat .sc-wa svg{ width:34px; height:34px; color:inherit; }
.contatto .scheda-stat .sc-riga:hover{ color:var(--teal); }
.contatto .scheda-stat .sc-orario{
  display:block; margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-2); line-height:1.45; max-width:22ch;
}
.contatto .scheda-stat .sc-orario b{ color:var(--ink); font-weight:700; }

/* ---- il modulo ----
   Vive nel footer (vedi #modulo-posto) ed e' li' che resta se il JS non parte:
   il form e' HTML puro che invia a Netlify, quindi funziona comunque.
   `.in-volo` e' lo stato transitorio in cui contatto.js lo stacca e lo porta
   sopra la scena; left/top/width li scrive il JS. */
.modulo{ margin:0; }
.modulo.in-volo{
  position:fixed; z-index:8; margin:0;
  will-change:left,top,width,opacity;
}
.modulo h3{
  margin:0 0 4px; font-size:15px; font-weight:700; letter-spacing:-.01em;
}
.modulo .modulo-nota{ margin:0 0 14px; font-size:11.5px; color:var(--ink-3); }
.modulo label{
  display:block; margin-bottom:10px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3);
}
.modulo input, .modulo textarea{
  display:block; width:100%; margin-top:5px; box-sizing:border-box;
  font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; transition:border-color .18s, box-shadow .18s;
}
.modulo textarea{ resize:vertical; min-height:72px; line-height:1.5; }
.modulo input:focus, .modulo textarea:focus{
  outline:none; border-color:var(--teal);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
}
.modulo .btn{ width:100%; margin-top:4px; justify-content:center; text-align:center; }
/* Trappola per i robot: Netlify scarta l'invio se questo campo e' compilato.
   Va nascosto senza display:none, che alcuni compilatori automatici saltano. */
.modulo .esca{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* nel footer: il posto che il modulo va a occupare */
.modulo-posto{ width:100%; }
.modulo-posto .modulo{
  padding:20px 22px;
  background:color-mix(in srgb, var(--paper-2) 92%, transparent);
  border:1px solid var(--line); border-radius:14px;
}
.modulo.in-volo{ padding:20px 22px; }

/* ---- schermi stretti ---- */
@media (max-width:900px){
  .contatto{ height:360vh; }
  .contatto .mano{ width:clamp(180px, 46vw, 300px); }
  .contatto .mano-sx{ left:0;  top:62%; translate:-14vw 0; }
  .contatto .mano-dx{ right:0; top:26%; translate:14vw 0; }
  .contatto .scheda-stat{ left:14px; top:25%; padding:16px 18px; gap:9px; }
  .contatto .scheda-stat .sc-riga{ font-size:16px; gap:10px; padding:6px 0; margin:-6px 0; }
  .contatto .scheda-stat .sc-riga svg{ width:22px; height:22px; }
  .contatto .scheda-stat .sc-wa svg{ width:29px; height:29px; }
  .contatto .scheda-stat .sc-orario{ font-size:11.5px; max-width:18ch; }
  /* Sotto la barra in alto, non dietro: a 59px il sopratitolo finiva coperto
     dall'intestazione, che e' alta una sessantina di pixel. */
  .contatto-testo{ top:84px; }
  .contatto-testo .lede{ font-size:13px; }
  /* Il modulo in volo si stringe: a schermo pieno di larghezza sembrerebbe gia'
     atterrato invece che in arrivo. */
  .modulo.in-volo{ padding:16px 18px; }
  .modulo textarea{ min-height:58px; }
}

html.movimento-ridotto .contatto{ height:150vh; }