/* Confartigianato Agrigento — la pagina «Contatti» (scelta dall'utente il 4 novembre 2026, direzione C: «biglietto da visita e pannello blu»).
   Modello: materiale/modello-pagina/contatti.html, stessi numeri. Pattern della categoria «Contatti»:
   1. «Contatti: biglietto da visita» (àncora «sede»): Telefono, Cellulare ed E-mail GRANDISSIMI e cliccabili; sotto, Indirizzo, Orari
      e PEC, «Indicazioni stradali» e la Sicilia che si disegna, con il punto e la scritta AGRIGENTO (decisione dell'utente del 4 novembre
      2026, ore 18:24: la foto dell'accoglienza NON va qui). Niente mappa incorporata.
   2. «Contatti: modulo» (àncora «contattaci», a cui porta «Scrivici» nella pagina Contatti): il pannello blu con il blocco «Modulo di contatto» del plugin
      cag-contatti. Dal 4 novembre 2026, ore 19:19 e 19:25 (scelte dell'utente: «foglio sul blu», «la busta», «la lettera nella busta»): il modulo sta
      su un foglio di carta intestata, a sinistra c'è la busta; dopo un invio riuscito il foglio si piega ed entra nella busta, che riceve il timbro.
      L'aspetto del modulo è qui, nel tema; il plugin ne fa funzionare l'invio.
   Si appoggia a sezioni.css (etichette, dati, «Indicazioni stradali», Sicilia, movimento): li carica insieme functions.php,
   e l'editor (add_editor_style). Come in sezioni.css, il movimento comincia con :where(.testo): nell'editor è tutto fermo.
   Differenze rispetto al modello, solo tecniche: ogni numero grande è un gruppo con etichetta e valore; il link sta sul valore e
   copre tutta la riga, come la riga-link del modello. Per questo il numero si sposta con i margini e non con transform/translate:
   un elemento spostato così diventerebbe il riferimento del link che copre la riga (::after), che coprirebbe solo il numero.
   Busta e foglio: gruppi del pattern; francobollo, timbro, marchio del foglio, classe «inviato» e aria-hidden li mette inc/contatti.php;
   le classi «parte», «attesa» e «arrivato» assets/js/contatti.js. L'intestazione è a griglia, con due paragrafi al posto di strong e small.
   Nel modello la classe «inviato» arriva dopo l'invio finto e la busta si raddrizza con una transizione; qui arriva già dal server, quando
   non c'è niente da cui transitare, quindi con «parte» la busta si raddrizza con un'animazione (ct-raddrizza), con gli stessi tempi. */

/* ---------- 1 · Biglietto da visita ---------- */
.ct-biglietto{padding:110px var(--bordo, 32px)}
.ct-numeri{display:grid}
.cs .ct-grande{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--filo);color:var(--blu)}
.cs .ct-grande:first-child{border-top:1px solid var(--filo)}
.cs .ct-et{font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio)}
.cs .ct-val{font-size:clamp(44px,7vw,104px);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--blu);transition:margin .5s var(--entra),color .3s ease;overflow-wrap:anywhere}
.cs .ct-mail .ct-val{font-size:clamp(32px,4.6vw,66px)}
.cs .ct-val a{color:inherit;text-decoration:none}
/* tutta la riga porta al numero o all'indirizzo, come nel modello */
.cs .ct-val a::after{content:'';position:absolute;inset:0}
.cs .ct-grande:hover .ct-val,.cs .ct-grande:focus-within .ct-val{margin-left:14px;margin-right:-14px;color:#02205d}
.cs .ct-val a:focus-visible{outline:0}
.cs .ct-val a:focus-visible::after{outline:2px solid var(--blu);outline-offset:4px}
.cs .ct-sotto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center;margin-top:64px}
.cs.ct .dati{margin-top:0}
.cs.ct .sede-link a{margin-top:28px}
.cs.ct .sede-mappa{width:100%;max-width:380px;padding:0;justify-self:end}

/* ---------- 2 · Pannello blu con il modulo ---------- */
/* overflow-x:clip: foglio, busta e timbro, in attesa di arrivare e durante le animazioni, sono spostati e ruotati: non devono mai allargare la pagina. */
.ct-pannello{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;padding:110px var(--bordo, 32px) 130px;background:radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 55%),var(--blu);color:#fff;overflow-x:clip}
.ct-pannello.cs .etichetta{color:#fff}
.ct-pannello.cs .etichetta::after{background:rgba(255,255,255,.3)}
.cs .ct-social{font-size:18px;color:rgba(255,255,255,.75)}
.ct-pannello.cs .ct-social a{padding:2px 0;color:#fff}
/* il modulo (markup del plugin cag-contatti) */
.ct-pannello .modulo{display:grid;gap:26px}
.ct-pannello .coppia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.ct-pannello .campo{display:flex;flex-direction:column;gap:6px}
.ct-pannello .campo label{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}
.ct-pannello .obbl{letter-spacing:0;text-transform:none;font-weight:500}
.ct-pannello .campo input,.ct-pannello .campo textarea{width:100%;box-sizing:border-box;padding:8px 0 10px;border:0;border-bottom:1px solid rgba(30,61,143,.25);border-radius:0;background:transparent;font:500 21px/1.4 'Barlow Semi Condensed',system-ui,sans-serif;color:var(--inchiostro);transition:border-color .3s ease,box-shadow .3s ease}
/* il messaggio si scrive sulle righe del foglio */
.ct-pannello .campo textarea{resize:vertical;min-height:240px;padding:0;line-height:40px;background:repeating-linear-gradient(transparent 0 39px,rgba(30,61,143,.2) 39px 40px);background-attachment:local}
.ct-pannello .campo input:focus,.ct-pannello .campo textarea:focus{outline:none;border-bottom-color:var(--blu);box-shadow:0 1px 0 var(--blu)}
.ct-pannello .campo.errore input,.ct-pannello .campo.errore textarea{border-bottom-color:#b3261e;box-shadow:0 1px 0 #b3261e}
.ct-pannello .msg-errore{font-size:16px;color:#b3261e}
/* nell'errore «invio fallito» telefono ed e-mail sono link (plugin cag-contatti) */
.ct-pannello .msg-errore a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ct-pannello .msg-errore a:focus-visible{outline:2px solid #b3261e;outline-offset:3px}
.ct-pannello .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-pannello.cs .privacy{font-size:16px;color:var(--grigio)}
.ct-pannello.cs .ct-foglio .privacy a{color:var(--blu)}
.ct-pannello .invia button{display:inline-flex;align-items:center;min-height:54px;padding:0 32px;border:0;border-radius:999px;background:var(--blu);color:#fff;font:600 17px/1 'Barlow Semi Condensed',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s ease,transform .25s var(--entra),box-shadow .25s ease}
.ct-pannello .invia button:hover{background:#02205d;transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(2,32,93,.6)}
.ct-pannello .invia button:focus-visible{outline:3px solid var(--blu);outline-offset:4px}
.ct-pannello .invia button:disabled{opacity:.6;cursor:default;transform:none}
.ct-pannello .esito{padding:18px 20px;border-left:3px solid var(--blu);background:var(--carta);font-size:20px;line-height:1.45;color:var(--blu)}
.ct-pannello .esito:focus{outline:none}
/* il foglio di carta intestata: appena storto, si raddrizza quando si entra in un campo */
.ct-foglio{position:relative;align-self:start;padding:48px 56px 52px;background:#fff;color:var(--inchiostro);box-shadow:0 50px 90px -40px rgba(0,10,40,.6),0 2px 6px rgba(0,10,40,.18);transform:rotate(-1.2deg);transition:transform .7s var(--entra),box-shadow .7s var(--entra)}
.ct-foglio:focus-within{transform:none;box-shadow:0 60px 110px -40px rgba(0,10,40,.7),0 2px 6px rgba(0,10,40,.18)}
.cs .ct-intestazione{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-items:center;align-content:center;margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--filo)}
.ct-intestazione .marchio{grid-row:1 / span 2;width:46px;height:46px;color:#02205d}
.cs .ct-int-nome{grid-column:2;font-size:19px;font-weight:600;line-height:1.2;color:#02205d}
.cs .ct-int-via{grid-column:2;font-size:15px;color:var(--grigio)}
/* la busta con il francobollo e, dopo l'invio, il timbro postale (--storta: quanto è storta, anche per ct-raddrizza) */
.cs .ct-intro{position:relative;z-index:2;display:flex;flex-direction:column;gap:40px}
.cs .ct-intro .etichetta{margin:0}
.ct-busta{--storta:2.2deg;position:relative;aspect-ratio:11/7;background:#fff;color:var(--blu);box-shadow:0 30px 60px -30px rgba(0,10,40,.6),0 2px 5px rgba(0,10,40,.18);transform:rotate(var(--storta));transition:transform .7s var(--entra)}
.ct-francobollo{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:58px;height:70px;background:var(--blu);color:#fff;outline:2px dotted #fff;outline-offset:-5px}
.ct-francobollo .marchio{width:34px;height:34px}
.ct-annullo{position:absolute;top:8px;right:20px;width:132px;height:auto;color:var(--blu);opacity:0;transform:scale(1.6) rotate(-14deg);pointer-events:none}
.cs .ct-indirizzo{position:absolute;left:24%;right:20px;bottom:20px;display:grid;gap:4px}
.cs .ct-indirizzo p{padding-bottom:4px;border-bottom:1px solid var(--filo);font-size:15px;line-height:1.3}
.cs .ct-indirizzo p:first-child{font-weight:600}
.ct-pannello.inviato .ct-busta{transform:none}
.ct-pannello.inviato .ct-annullo{animation:annullo .5s cubic-bezier(.3,1.4,.5,1) 1.6s both}
@keyframes annullo{to{opacity:.85;transform:rotate(-8deg)}}
/* la lettera che entra nella busta (dopo l'invio): il foglio si piega in tre, vola verso la busta e ci sparisce dietro; la busta fa un
   sobbalzo e si raddrizza, arriva il timbro e al posto del foglio compare la conferma. Spostamento (--dx, --dy, --s) e classe «parte» da contatti.js. */
.ct-destra{position:relative;z-index:1;align-self:start}
.ct-foglio::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;background:linear-gradient(to bottom,transparent 31.5%,rgba(2,32,93,.14) 33.3%,transparent 35%,transparent 64.8%,rgba(2,32,93,.14) 66.6%,transparent 68.4%)}
.ct-pannello.parte .ct-foglio::after{opacity:1}
.ct-pannello.parte .ct-foglio{animation:in-busta 1.5s cubic-bezier(.6,0,.3,1) forwards;pointer-events:none}
@keyframes in-busta{
0%{transform:rotate(0);opacity:1}
30%{transform:scaleY(.34);opacity:1}
40%{transform:scaleY(.34);opacity:1}
86%{transform:translate(var(--dx),var(--dy)) scale(var(--s)) scaleY(.34) rotate(2.2deg);opacity:1}
100%{transform:translate(var(--dx),var(--dy)) scale(var(--s)) scaleY(.34) rotate(2.2deg);opacity:0}
}
.ct-pannello.parte .ct-busta{animation:sobbalzo .45s ease 1.35s,ct-raddrizza .7s var(--entra) 1.4s both}
@keyframes sobbalzo{40%{scale:1.04}}
@keyframes ct-raddrizza{from{transform:rotate(var(--storta))}to{transform:none}}
.ct-destra > .esito{position:absolute;top:24px;left:0;right:0;margin:0;padding:0 0 0 22px;border-left:3px solid #fff;background:none;font-size:clamp(24px,2.6vw,36px);font-weight:300;line-height:1.3;color:#fff;opacity:0;transform:translateY(16px);animation:esito-entra .7s var(--entra) 1.75s forwards}
@keyframes esito-entra{to{opacity:1;transform:none}}
/* l'arrivo sul tavolo (all'ingresso): prima la busta, poi il foglio cadono dall'alto e ruotano fino al loro posto; classi «attesa» e «arrivato» da contatti.js */
.ct-pannello.attesa .ct-busta,.ct-pannello.attesa .ct-foglio{transition:transform 1.1s cubic-bezier(.2,.9,.25,1.04),opacity .5s ease,box-shadow 1.1s ease}
.ct-pannello.attesa .ct-foglio{transition-delay:.18s}
.ct-pannello.attesa .ct-foglio:focus-within{transition-delay:0s}
.ct-pannello.attesa:not(.arrivato) .ct-busta{opacity:0;transform:translate(-30px,-70px) rotate(-9deg) scale(1.06);box-shadow:0 80px 120px -40px rgba(0,10,40,.5)}
.ct-pannello.attesa:not(.arrivato) .ct-foglio{opacity:0;transform:translate(50px,-90px) rotate(7deg) scale(1.04);box-shadow:0 90px 140px -40px rgba(0,10,40,.6)}
@media (prefers-reduced-motion:reduce){
.ct-foglio,.ct-busta{transition:none}
.ct-pannello.parte .ct-foglio,.ct-pannello.parte .ct-busta{animation:none}
.ct-pannello.inviato .ct-annullo{animation:none;opacity:.85;transform:rotate(-8deg)}
}

/* ---------- Effetti allo scorrimento, solo nel sito ---------- */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
:where(.testo) .ct-pannello .campo{animation:sale linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
/* i numeri grandi non entrano scivolando: sono la prima cosa che si cerca, devono esserci subito (giro sugli effetti del 5/11) */
}
}

/* ---------- Schermi medi ---------- */
@media (max-width:900px){
.cs .ct-sotto,.ct-pannello{grid-template-columns:minmax(0,1fr);gap:48px}
.cs.ct .sede-mappa{justify-self:start}
.ct-busta{--storta:1.2deg;max-width:380px}
.ct-foglio{transform:none}
}

/* ---------- Telefono ---------- */
@media (max-width:720px){
.ct-biglietto{padding:72px var(--bordo, 20px)}
.cs.ct .sede-link a{margin-top:27px}
.ct-pannello.cs .ct-social a{padding:12px 0}
.cs .ct-grande{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0}
.cs .ct-val{font-size:44px}
.cs .ct-mail .ct-val{font-size:28px}
.ct-pannello{padding:72px var(--bordo, 20px) 150px}
.ct-pannello .coppia{grid-template-columns:minmax(0,1fr)}
.ct-pannello .campo input,.ct-pannello .campo textarea{font-size:20px}
.ct-foglio{padding:30px 22px 34px}
}