/* Il form «Contattaci» del sito (v127, js/contatti.js). Usa i colori della pagina che lo ospita
   (--iron-2, --chalk, --yellow…): funziona col tema scuro e con quello chiaro della landing.
   Effetti: l'etichetta sale quando scrivi, il bordo si illumina, il pulsante mostra i puntini
   mentre invia, alla fine la spunta si disegna. Spenti da prefers-reduced-motion. */
.cf,.cf-ok{max-width:640px;margin:34px auto 0;text-align:left}
.cf-due{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.cf-due{grid-template-columns:1fr;gap:0}}
.cf-campo{margin-bottom:12px}
.cf-in{position:relative;display:block}
.cf-in input,.cf-in select,.cf-in textarea{
  display:block;width:100%;margin:0;border-radius:12px;border:1px solid var(--line-2);
  background:var(--iron-2);color:var(--chalk);font-family:var(--body);font-size:16px;line-height:1.4;
  padding:24px 14px 9px;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.cf-in textarea{resize:vertical;min-height:140px}
.cf-in select{padding-right:42px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--chalk-dim) 50%),linear-gradient(135deg,var(--chalk-dim) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.cf-in input:hover,.cf-in select:hover,.cf-in textarea:hover{border-color:var(--chalk-faint)}
.cf-in input:focus,.cf-in select:focus,.cf-in textarea:focus{
  border-color:var(--yellow);box-shadow:0 0 0 4px color-mix(in srgb,var(--yellow) 18%,transparent)}
/* l'etichetta: dentro il campo finché è vuoto, sale in piccolo quando scrivi (o per la tendina) */
.cf-eti{position:absolute;left:15px;top:16px;font-family:var(--body);font-size:16px;color:var(--chalk-dim);
  pointer-events:none;transform-origin:left top;transition:transform .18s ease,color .18s ease}
.cf-in input:focus + .cf-eti,.cf-in input:not(:placeholder-shown) + .cf-eti,
.cf-in textarea:focus + .cf-eti,.cf-in textarea:not(:placeholder-shown) + .cf-eti,
.cf-select .cf-eti{transform:translateY(-9px) scale(.74)}
.cf-in input:focus + .cf-eti,.cf-in textarea:focus + .cf-eti,.cf-in select:focus + .cf-eti{color:var(--yellow)}
.cf-conta{text-align:right;font-family:var(--mono);font-size:11px;color:var(--chalk-faint);margin-top:4px}
.cf-conta.quasi{color:var(--yellow)}
/* errori: il campo si colora e dice cosa non va */
.cf-err{font-size:13px;color:var(--red);min-height:0;margin-top:5px}
.cf-err:empty{display:none}
.cf-campo.sbagliato input,.cf-campo.sbagliato select,.cf-campo.sbagliato textarea{border-color:var(--red)}
.cf-campo.sbagliato .cf-eti{color:var(--red)}
.cf-campo.sbagliato .cf-in{animation:cfScuoti .35s ease}
/* trappola per i robot: fuori dallo schermo */
.cf-trappola{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf p.cf-nota{font-size:13px;color:var(--chalk-dim);margin:4px 0 14px;max-width:none;text-align:left}
.cf p.cf-nota a{color:var(--yellow)}
/* il pulsante */
.cf-invia{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:54px;border:0;border-radius:12px;cursor:pointer;background:var(--yellow);color:#17181C;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--yellow) 70%,transparent);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
.cf-invia:hover{transform:translateY(-2px);filter:brightness(1.05)}
.cf-invia:active{transform:scale(.98)}
.cf-invia:focus-visible{outline:2px solid var(--chalk);outline-offset:3px}
.cf-invia-ar{transition:transform .2s ease}
.cf-invia:hover .cf-invia-ar{transform:translateX(4px)}
.cf-punti{display:none;gap:5px}
.cf-punti i{width:7px;height:7px;border-radius:50%;background:#17181C;animation:cfPunto 1s infinite ease-in-out}
.cf-punti i:nth-child(2){animation-delay:.15s}
.cf-punti i:nth-child(3){animation-delay:.3s}
.cf.invio .cf-invia{cursor:wait;filter:saturate(.8)}
.cf.invio .cf-invia-t,.cf.invio .cf-invia-ar{display:none}
.cf.invio .cf-punti{display:inline-flex}
.cf p.cf-esito{font-size:14px;margin:12px 0 0;max-width:none;color:var(--chalk-dim);text-align:center}
.cf p.cf-esito:empty{display:none}
.cf p.cf-esito.male{color:var(--red)}
/* la conferma */
.cf-ok{text-align:center;padding:30px 22px;border-radius:18px;border:1px solid var(--line);background:var(--iron-2);
  animation:cfSu .45s cubic-bezier(.2,.7,.3,1) both;outline:none}
.cf-ok-ico{width:64px;height:64px;margin:0 auto 10px}
.cf-ok-ico svg{width:64px;height:64px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cf-ok-ico circle{stroke:var(--green);fill:color-mix(in srgb,var(--green) 14%,transparent);stroke-dasharray:145;
  stroke-dashoffset:0;animation:cfCerchio .7s ease-out .1s both}
.cf-ok-ico path{stroke:var(--green);stroke-dasharray:40;stroke-dashoffset:0;animation:cfSpunta .4s ease-out .7s both}
.cf-ok h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:28px;margin:0}
div.cf-ok p{color:var(--chalk-dim);margin:8px auto 0;font-size:16px;max-width:none}
div.cf-ok p b{color:var(--chalk);overflow-wrap:anywhere}
.cf-altro{margin-top:18px;background:none;border:1px solid var(--line-2);color:var(--chalk);border-radius:10px;
  padding:11px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;cursor:pointer}
.cf-altro:hover{border-color:var(--yellow)}
@keyframes cfPunto{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:none;opacity:1}}
@keyframes cfScuoti{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes cfSu{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cfCerchio{from{stroke-dashoffset:145}to{stroke-dashoffset:0}}
@keyframes cfSpunta{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .cf *,.cf-ok,.cf-ok *{animation:none!important;transition:none!important}
}
/* sotto il form, le vie dirette (mail, WhatsApp) */
.cf-oppure{margin:34px auto 0!important;font-size:14px!important;color:var(--chalk-faint)!important}
.cf-oppure + .ways{margin-top:14px!important}
/* tema chiaro della landing: il giallo sul beige si legge poco → un ocra più scuro per i link */
:root[data-theme="light"] .cf p.cf-nota a,:root[data-theme="light"] .cf-conta.quasi{color:#8A5F00}