/* Deodato Kids — landing di attesa /kids (lib/web_kids.php). Tutto sotto .kd per non toccare la cornice del sito.
   Due varianti nella stessa pagina: lo script in testa mette data-kd="A" o "B" su <html> e qui se ne mostra una sola. */
main.kd{padding:0;min-height:0}
.kd *{box-sizing:border-box}
html[data-kd="B"] .kd-var-a,html:not([data-kd="B"]) .kd-var-b{display:none}
.kd-var-a{--kb:#e9eef5;--kf:#1d3a8a;--ka:#e23b3b;--khf:'Caveat',cursive}
.kd-var-b{--kb:#ffffff;--kf:#1c1c22;--ka:#7a3ff2;--khf:'Caveat',cursive}
.kd-hero{background:var(--kb);color:var(--kf);padding:56px 20px 76px;overflow:hidden}
.kd-in{max-width:1100px;margin:0 auto}
.kd-eye{font:600 13px/1 'Oswald',sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px;display:flex;align-items:center;gap:8px;color:inherit}
.kd-eye span{background:#D52462;color:#fff;border-radius:10px;font:700 10px/18px 'Lato',sans-serif;letter-spacing:1px;padding:0 7px}
.kd .kd-h{font-family:var(--khf);font-weight:600;font-size:clamp(36px,5.6vw,66px);line-height:1.04;margin:0 0 20px;color:inherit;text-wrap:balance;letter-spacing:0;text-transform:none}
.kd-s{font:400 19px/1.55 'Lato',sans-serif;max-width:34em;margin:0 0 28px;color:inherit}
/* modulo */
.kd-form{display:grid;gap:13px;max-width:470px;width:100%;margin:0;position:relative}
.kd-form label{display:grid;gap:6px;font:700 14px/1.3 'Lato',sans-serif;color:inherit}
.kd-opt{font-weight:400;opacity:.8}
.kd-form input[type=email],.kd-form input[type=tel]{width:100%;font:400 17px 'Lato',sans-serif;color:#1c1c22;background:#fff;border:2px solid rgba(28,28,34,.45);border-radius:8px;padding:13px 14px}
.kd-form input:focus-visible,.kd-form button:focus-visible{outline:3px solid var(--ka);outline-offset:2px}
.kd-form label.kd-ck{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14.5px;line-height:1.45}
.kd-form label.kd-ck[hidden]{display:none}
.kd-ck input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--ka)}
.kd-ck a{color:inherit;text-decoration:underline}
.kd-form button[type=submit]{font:600 18px/1.2 'Oswald',sans-serif;letter-spacing:.05em;text-transform:uppercase;background:var(--ka);color:#fff;border:0;border-radius:8px;padding:16px 18px;cursor:pointer}
.kd-form button[type=submit]:hover{filter:brightness(.93)}
.kd-form button[type=submit][disabled]{opacity:.6;cursor:default}
.kd-msg{margin:0;font:700 15px/1.4 'Lato',sans-serif;background:#fff;border-radius:8px;padding:10px 12px;color:#0b6b3a}
.kd-msg:empty{display:none}
.kd-msg.err{color:#b00020}
.kd-fine{margin:0;font:400 13px/1.4 'Lato',sans-serif;opacity:.8;color:inherit}
.kd-ft{margin:0;font:600 14px 'Oswald',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:inherit}
/* A — la lettera ai grandi */
.lt-carta{position:relative;max-width:780px;margin:0 auto;background:#fffdf5 repeating-linear-gradient(#fffdf5 0 43px,#b9d3f0 43px 44px);border-left:3px solid #f0a3a3;padding:44px 48px 48px 64px;box-shadow:0 18px 40px rgba(29,58,138,.16);transform:rotate(.5deg)}
.lt-sole{position:absolute;right:28px;top:22px;width:104px;height:104px}
.kd .lt-carta .kd-h{font-size:clamp(40px,6vw,62px);line-height:1.08;margin:6px 110px 14px 0}
.lt-riga{font:600 30px/44px 'Caveat',cursive;margin:0 0 6px;color:inherit;max-width:24em}
.lt-firma{display:flex;align-items:center;gap:10px;margin-top:12px}
.lt-risposta{margin-top:34px;background:#fff;border:2px solid #1d3a8a;border-radius:10px;padding:24px 26px 26px}
/* B — lo scarabocchio: frase, animazione, modulo */
.kd-col{display:grid;gap:36px;justify-items:center;text-align:center}
.kd-col>*{min-width:0;max-width:100%}
.kd-col .kd-eye{justify-content:center}
.kd .kd-col .kd-h{margin-bottom:18px}
.kd-col .kd-s{margin:0 auto}
.kd-col .kd-form{text-align:left}
.sc-svg{display:block;width:100%;height:auto;margin:0}
.sc-riga{stroke-dasharray:1;stroke-dashoffset:0;animation:sc-disegna 2.2s ease-out both}
.sc-sotto{stroke-dasharray:1;stroke-dashoffset:0;animation:sc-disegna .7s 2.1s ease-out both}
.sc-kids{animation:sc-appare .6s 1.6s ease-out both}
@keyframes sc-disegna{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sc-appare{from{opacity:0}to{opacity:1}}
@media (max-width:860px){
  .kd-hero{padding:38px 16px 54px}
  .lt-carta{padding:30px 22px 32px 34px}
  .lt-sole{width:70px;height:70px;right:14px;top:14px}
  .kd .lt-carta .kd-h{margin-right:70px}
  .lt-riga{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.sc-riga,.sc-sotto,.sc-kids{animation:none}}
