/* contatti.css: la pagina dei contatti (PIANO-PAGINE §4.4). Si carica DOPO shell.css e film.css (di film.css usa solo i testi e le domande).
   Schermo largo: a sinistra le schede che scorrono, a destra la sede 3D che resta ferma e segue la pagina. Telefono: la sede in alto, le schede sotto.
   La barra della pagina e' scura dall'inizio (tutte le sezioni sono data-bar="dark"). */

/* il bottone del telefono nella barra non partecipa alla transizione tra pagine: qui il nome ns-tel lo prende la scheda dei contatti (contatti.js) */
.topbar .tel-btn { view-transition-name: none; }

.ct { position: relative; }
.ct-stage { position: relative; height: 46svh; min-height: 18rem; margin-top: var(--bar-h); background: var(--scene-bg); overflow: hidden; }
.ct-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--ease); }
.s3d-on .ct-stage canvas { opacity: 1; }
/* l'immagine ferma: con lo script la mette contatti.js solo quando serve (movimento ridotto, niente WebGL, 3D che tarda piu' di 5 s, contesto perso),
   senza script c'e' quella del <noscript>. Con il 3D acceso si toglie; mentre il 3D arriva non si vede mai, e senza dissolvenza (come in film.css):
   prima si vedeva per un attimo il giorno con APERTO, sfumava, il riquadro restava buio e poi arrivava la scena (n.58) */
.ct-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease); }
.s3d-on .ct-still { opacity: 0; }
.s3d:not(.s3d-on):not(.cs-slow) .ct-still { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .ct-still, .ct-stage canvas { transition: none; } }

.ct-main { position: relative; z-index: 1; }
.ct-sec { padding: clamp(2rem, 6vh, 4rem) var(--pad); }
.ct-hero { padding-top: 1.5rem; }
/* le schede: un poco di luce dall'alto, la linguetta ciano in cima (la stessa per tutte: si riconoscono come una cosa sola mentre scorrono) */
.ct-card { position: relative; width: min(100%, 38rem); padding: clamp(1.4rem, 2.6vw, 2.1rem); border-radius: 1.4rem; background: linear-gradient(180deg, rgb(31 35 42 / .96), rgb(20 23 28 / .95) 60%); border: 1px solid rgb(245 243 238 / .1); box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / .45); }
.ct-card::before { content: ''; position: absolute; top: -1px; left: clamp(1.4rem, 2.6vw, 2.1rem); width: 2.75rem; height: 4px; border-radius: 0 0 4px 4px; background: var(--cyan); }
.ct-card h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 720; letter-spacing: -.02em; text-wrap: balance; }
.ct-card > p:not(.kicker):not(.more-row) { font-size: var(--t-lead); line-height: 1.5; margin-top: var(--s-3); color: var(--fg-mute); text-wrap: pretty; }
.ic { width: 1.35rem; height: 1.35rem; flex: none; }

@media (min-width: 60rem) {
  .ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .ct-stage { order: 2; position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); margin-top: var(--bar-h); }
  .ct-main { order: 1; padding-top: var(--bar-h); }
  /* (piu' corte di prima, 82svh: tra una scheda e l'altra restava mezzo schermo vuoto) */
  .ct-sec { min-height: 68svh; display: grid; align-content: center; padding-left: max(var(--pad), 3vw); }
  .ct-hero { min-height: calc(100svh - var(--bar-h)); }
  .ct-data { min-height: 0; padding-bottom: 5rem; }
}

/* ---------- la testa ---------- */
.ct-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: var(--s-2); }
.ct-topline .kicker { margin: 0; }
/* lo stato di adesso: aperto (verde, il punto che pulsa), pausa (ambra), chiuso (rosso spento) */
.ct-status { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem .3rem .6rem; border-radius: 999px; font-size: .875rem; font-weight: 650; color: var(--fg); background: rgb(245 243 238 / .06); border: 1px solid rgb(245 243 238 / .12); }
.ct-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--fg-mute); flex: none; }
.ct-status[data-status="open"] { background: rgb(47 182 124 / .12); border-color: rgb(47 182 124 / .45); }
.ct-status[data-status="open"] .ct-dot { background: #2fb67c; box-shadow: 0 0 0 0 rgb(47 182 124 / .6); animation: ct-ping 2s var(--ease) infinite; }
.ct-status[data-status="lunch"] { background: rgb(224 163 58 / .12); border-color: rgb(224 163 58 / .45); }
.ct-status[data-status="lunch"] .ct-dot { background: #e0a33a; }
.ct-status[data-status="closed"] { background: rgb(229 72 77 / .1); border-color: rgb(229 72 77 / .38); }
.ct-status[data-status="closed"] .ct-dot { background: #e5484d; }
@keyframes ct-ping { 70%, 100% { box-shadow: 0 0 0 .5rem rgb(47 182 124 / 0); } }
@media (prefers-reduced-motion: reduce) { .ct-status .ct-dot { animation: none !important; } }
/* chi risponde: le due facce, una sopra l'altra */
.ct-who { display: flex; align-items: center; gap: .85rem; margin-top: var(--s-4); }
.ct-who p { font-size: var(--t-lead); line-height: 1.35; color: var(--fg); }
.ct-who b { font-weight: 700; }
.ct-faces { display: inline-flex; flex: none; }
.ct-faces img { width: 3.1rem; height: 3.1rem; border-radius: 50%; object-fit: cover; border: 2px solid rgb(20 23 28); box-shadow: 0 0 0 1px rgb(245 243 238 / .18); background: #2a2f36; }
.ct-faces img + img { margin-left: -.8rem; }
.ct-faces.sm img { width: 2.1rem; height: 2.1rem; }
.ct-faces.sm img + img { margin-left: -.55rem; }
/* il numero grande nel carattere del testo (non Pixelify) */
.ct-phone { display: inline-block; margin-top: var(--s-3); font: 760 clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem)/1.05 var(--font); letter-spacing: -.02em; color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums; border-bottom: 3px solid var(--cyan); padding-bottom: .1rem; transition: color .15s; }
.ct-phone:hover, .ct-phone:focus-visible { color: var(--cyan); }
.ct-hours { font-size: var(--t-base) !important; }
/* gli altri modi: tre righe, tutta la riga e' il link; la mail con "Copia" */
.ct-ways { list-style: none; margin-top: var(--s-4); display: grid; gap: .5rem; }
.ct-way { position: relative; display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; border-radius: .9rem; border: 1px solid rgb(245 243 238 / .12); background: rgb(245 243 238 / .03); transition: border-color .15s, background .15s; }
.ct-way:hover, .ct-way:focus-within { border-color: rgb(0 255 229 / .55); background: rgb(0 255 229 / .06); }
.ct-way > .ic { color: var(--cyan); width: 1.5rem; height: 1.5rem; }
.ct-way a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; color: var(--fg); text-decoration: none; }
.ct-way a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ct-way a:focus-visible { outline: none; }
.ct-way:has(a:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ct-way b { font-weight: 700; overflow-wrap: anywhere; }
.ct-way span { font-size: .875rem; color: var(--fg-mute); }
/* "Copiate" c'e' solo con lo script: senza, il bottone non farebbe niente (n.97; la regola in fondo al modulo, con @media (scripting: none)) */
.ct-copy { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; font: inherit; cursor: pointer; }
.ct-way .ct-copy { flex: none; padding: .4rem .8rem; border-radius: 999px; border: 1px solid rgb(245 243 238 / .25); background: transparent; color: var(--fg); font-size: .8125rem; font-weight: 700; }
.ct-way .ct-copy:hover { border-color: var(--cyan); color: var(--cyan); }
.ct-copy.done { border-color: #2fb67c !important; color: #2fb67c !important; }

/* ---------- il modulo ---------- */
.ct-lead-who { display: flex; align-items: center; gap: .75rem; }
/* i tipi di richiesta solo con lo script: senza, il modulo manda "un progetto" e i bottoni non farebbero niente (n.97; la regola qui sotto) */
.intent-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: var(--s-4); }
/* senza script via "Copiate" e i tipi di richiesta, con la media query, che vale gia' al primo disegno (§8.4): con la classe .sj, messa da contatti.js,
   comparivano dopo il primo disegno e arrivando su #compose dal telefono spostavano il modulo di 353 px (CLS 0,35) */
@media (scripting: none) { .ct-copy, .intent-row { display: none; } }
.intent { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .65rem; align-items: center; text-align: left; min-height: 3.9rem; padding: .7rem .85rem; border-radius: .8rem; border: 1px solid rgb(245 243 238 / .16); background: rgb(245 243 238 / .03); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.intent .ic { grid-row: 1 / 3; color: var(--fg-mute); transition: color .15s; }
.intent b { font-weight: 700; font-size: var(--t-sm); }
.intent span { font-size: .8125rem; color: var(--fg-mute); }
.intent:hover { border-color: rgb(245 243 238 / .35); }
.intent.on { border-color: var(--cyan); background: color-mix(in oklab, var(--cyan) 12%, transparent); }
.intent.on .ic { color: var(--cyan); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin-top: var(--s-4); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-sm); font-weight: 650; }
.req { color: var(--cyan); }
.field input, .field textarea { width: 100%; padding: .75rem .85rem; border-radius: .7rem; border: 1px solid rgb(245 243 238 / .2); background: rgb(10 12 15 / .6); color: var(--fg); font: inherit; font-size: var(--t-base); transition: border-color .15s, background .15s; }
.field input:hover, .field textarea:hover { border-color: rgb(245 243 238 / .32); }
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; background: rgb(10 12 15 / .85); }
/* il segnaposto del messaggio e' l'unico posto con l'istruzione per ogni tipo di richiesta: il grigio chiaro del testo secondario, non quello del
   browser (4,13:1, n.73) */
.field input::placeholder, .field textarea::placeholder { color: var(--fg-mute); opacity: 1; }
/* gli errori (n.59): il campo con il bordo rosso piu' spesso e il messaggio scritto sotto, con il segno davanti (non solo il colore) */
.field [aria-invalid="true"] { border-color: #ff6b6f; box-shadow: inset 0 0 0 1px #ff6b6f; }
.field-err { display: flex; gap: .45rem; align-items: flex-start; font-size: var(--t-sm); line-height: 1.4; font-weight: 600; color: #ff9ea1; }
.field-err::before { content: '!'; content: '!' / ''; flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: 50%; background: #e5484d; color: #fff; font-size: .75rem; font-weight: 800; line-height: 1; }
.field-err[hidden] { display: none; }
.consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: var(--s-4); font-size: var(--t-sm); color: var(--fg-mute); border-radius: .6rem; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--cyan); flex: none; }
/* (l'anello anche quando il fuoco ce lo porta lo script, dopo un clic su "Inviate": prima la casella prendeva il fuoco senza nessun segno) */
.consent input:focus-visible, .consent input[aria-invalid="true"]:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.consent a { color: var(--fg); text-underline-offset: .2em; }
/* il consenso che manca: la riga incorniciata di rosso, il testo piu' chiaro, e il messaggio subito sotto */
.consent.is-err { padding: .55rem .7rem; margin-left: -.7rem; margin-right: -.7rem; background: rgb(229 72 77 / .1); box-shadow: inset 0 0 0 2px #ff6b6f; color: var(--fg); }
.consent-err { margin-top: .5rem; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: var(--s-4); }
.form-foot .btn { min-width: 9rem; }
.form-foot .btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
.legal { font-size: var(--t-sm); color: var(--fg-mute); }
.form-error { margin-top: var(--s-3); padding: .7rem .9rem; border-radius: .6rem; background: rgb(229 72 77 / .14); border: 1px solid rgb(229 72 77 / .5); font-size: var(--t-sm); }
.success { display: none; margin-top: var(--s-4); }
.ct-form.done form, .ct-form.done .intent-row { display: none; }
.ct-form.done .success { display: block; }
.success-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #2fb67c; color: #fff; margin-bottom: var(--s-3); }
.success-ic .ic { width: 1.75rem; height: 1.75rem; stroke-width: 2.6; }
.success h3 { font-size: var(--t-step); font-weight: 700; color: var(--fg); }
/* (il titolo prende il fuoco dallo script dopo l'invio, n.67: non e' un comando, quindi niente anello) */
.success h3:focus { outline: none; }
.success p { margin-top: var(--s-2); color: var(--fg-mute); }
.success a { color: var(--fg); }
@media (max-width: 30rem) { .fields, .intent-row { grid-template-columns: 1fr; } }

/* ---------- la sede ---------- */
.ct-addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: var(--s-4); }
.ct-addr-i { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-lead); line-height: 1.5; }
.ct-addr-i .ic { color: var(--cyan); margin-top: .2rem; }
.ct-addr-i address { font-style: normal; }
.ct-addr-i b { font-weight: 700; }
.ct-card > p.ct-note { font-size: var(--t-base); margin-top: var(--s-4); padding: .7rem .9rem; border-left: 3px solid var(--cyan); background: rgb(245 243 238 / .04); border-radius: 0 .6rem .6rem 0; color: var(--fg); }
.ct-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s-4); }
/* (i bottoni fantasma qui sono <button>: senza sfondo e colore il browser li faceva grigio chiaro, poco leggibili) */
.ct-card .btn-ghost { background: transparent; color: var(--fg); font-family: inherit; cursor: pointer; }
@media (max-width: 30rem) { .ct-addr { grid-template-columns: 1fr; } }
/* sul telefono la scena resta in alto: nella scheda della sede c'e' la vista dall'alto, ferma */
.ct-map { display: block; width: 100%; height: auto; margin-top: var(--s-4); border-radius: 1rem; }
@media (min-width: 60rem) { .ct-map { display: none; } }

/* ---------- le domande ---------- */
.ct-faq h2 { margin-bottom: var(--s-4); }
.ct-faq details { border-top: 1px solid rgb(245 243 238 / .12); }
.ct-faq details:last-of-type { border-bottom: 1px solid rgb(245 243 238 / .12); }
.ct-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 650; font-size: var(--t-base); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color .15s; }
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary:hover { color: var(--cyan); }
.ct-faq summary::after { content: '+'; content: '+' / ''; display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid rgb(0 255 229 / .5); color: var(--cyan); font-weight: 700; line-height: 1; transition: transform .25s var(--ease), background .15s; }
.ct-faq details[open] summary::after { transform: rotate(45deg); background: rgb(0 255 229 / .12); }
.ct-faq details p { padding: 0 2.75rem 1.1rem 0; color: var(--fg-mute); font-size: var(--t-base); line-height: 1.55; }
/* (dove il browser lo sa fare, la risposta si apre scorrendo invece che di colpo) */
@supports selector(::details-content) {
  .ct-faq details { interpolate-size: allow-keywords; }
  .ct-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
  .ct-faq details[open]::details-content { block-size: auto; }
}
.ct-card > p.ct-faq-foot { font-size: var(--t-base); margin-top: var(--s-4); }
.ct-faq-foot a { color: var(--fg); font-weight: 700; text-underline-offset: .25em; text-decoration-color: var(--cyan); white-space: nowrap; }

/* ---------- i dati societari ---------- */
.ct-data h2.kicker { font: 650 var(--t-sm)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); }
.ct-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; margin-top: var(--s-3); }
.ct-dl dt { font-size: .8125rem; color: var(--fg-mute); }
.ct-dl dd { font-size: var(--t-sm); font-weight: 600; margin-top: .1rem; }
@media (max-width: 30rem) { .ct-dl { grid-template-columns: 1fr; } }