/* Formulario de pedido de demo (home #contacto, /contacto/ y /en/). Usa los tokens de tokens.css. */
.demo{ background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:16px; padding:clamp(18px,3vw,28px); margin:28px auto 0; max-width:640px; text-align:left; box-shadow:var(--shadow); }
.demo *{ box-sizing:border-box; }
.demo-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
@media (max-width:640px){ .demo-grid{ grid-template-columns:minmax(0,1fr); } }
.demo-campo{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0; }
.demo-campo.full{ grid-column:1 / -1; }
.demo label{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.demo .req::after{ content:' *'; color:var(--accent); }
.demo .opc{ font-weight:500; color:var(--ink-faint); }
.demo input[type=text], .demo input[type=email], .demo input[type=tel], .demo textarea, .demo select{
  font-family:'Public Sans',system-ui,sans-serif; font-size:16px; padding:10px 12px; border-radius:9px; border:1px solid var(--ink-faint);
  background:var(--surface-2); color:var(--ink); width:100%; min-width:0;
}
.demo textarea{ min-height:96px; resize:vertical; }
.demo :is(input,textarea,select,button,a):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.demo [aria-invalid=true]{ border-color:var(--red); background:var(--red-soft); }
.demo-err{ font-size:12.5px; color:var(--red); }
.demo-err[hidden]{ display:none; }
.demo-resumen{ margin:0 0 16px; background:var(--red-soft); color:var(--red); border-radius:12px; padding:12px 16px; font-size:14.5px; }
.demo-resumen[hidden]{ display:none; }
.demo-resumen:focus{ outline:2px solid var(--red); outline-offset:2px; }
.demo-trampa{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.demo-envio{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.demo-envio button{ font-family:'Public Sans',system-ui,sans-serif; font-weight:700; font-size:14.5px; padding:13px 24px; border-radius:11px; border:none; cursor:pointer; background:var(--accent); color:var(--on-accent); }
.demo-envio button:disabled{ opacity:.7; cursor:progress; }
.demo-envio a{ color:var(--accent); font-size:14px; font-weight:600; }
.demo-ok{ text-align:left; }
.demo-ok[hidden]{ display:none; }
.demo-ok:focus{ outline:none; }
.demo.demo-ok h3{ font-family:'Fraunces',Georgia,serif; font-size:22px; margin:0 0 6px; color:var(--ink); }
.demo.demo-ok p{ margin:0; font-size:15px; color:var(--ink-soft); max-width:none; }

main .demo{ margin-left:0; }