/* Modal de demo — componente autónomo.
   Lo enlazan las 26 páginas, también las legales, que llevan su propio sistema
   y no cargan site.css. Por eso no depende de nada de site.css: todo cuelga de
   .demo-modal y los tokens que no existen fuera de site.css llevan valor de
   respaldo. El markup lo inyecta site.js; sin JS los CTA siguen su href a
   /#demo. */

.demo-modal { border: 0; padding: 0; margin: auto; background: transparent; max-width: min(460px, calc(100vw - 2rem)); width: 100%; }
.demo-modal::backdrop {
  background: oklch(0.16 0.032 195 / 0.55);
  backdrop-filter: blur(3px);
  transition: opacity 0.4s ease, display 0.4s allow-discrete, overlay 0.4s allow-discrete;
  opacity: 1;
}
.demo-modal {
  transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              display 0.5s allow-discrete, overlay 0.5s allow-discrete;
  opacity: 1; translate: 0 0;
}
.demo-modal:not([open]) { opacity: 0; translate: 0 28px; }
@starting-style {
  .demo-modal[open] { opacity: 0; translate: 0 28px; }
  .demo-modal[open]::backdrop { opacity: 0; }
}
.modal-caja {
  background: var(--paper); border-radius: 20px; position: relative;
  padding: 1.9rem 2.25rem 2rem;
  box-shadow: 0 30px 80px -20px oklch(0.16 0.032 195 / 0.4);
}
/* Los perfiles de hoja que dibuja la hebra: la home los tiene en el bosque del
   hero, las demás páginas no, así que el modal viaja con los suyos. */
.modal-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.demo-modal .kelp-stroke {
  fill: none;
  stroke: var(--kelp-line, var(--kelp));
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal-hebra { display: block; width: 100%; height: auto; margin-bottom: 1.1rem; }
.modal-hebra path { stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-width: 0.9; }
.demo-modal.go .modal-hebra path { transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s; stroke-dashoffset: 0; }
.modal-x {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 34px; height: 34px;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--muted);
}
.modal-x:hover { background: var(--surface); color: var(--ink); }
.demo-modal h3 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; }
.modal-sub { margin-top: 0.5rem; font-size: 0.9688rem; line-height: 1.55; color: var(--muted); }
.campo { margin-top: 1.05rem; }
.campo label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; }
.campo input, .campo select {
  width: 100%; padding: 0.68rem 0.85rem; font: inherit; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper);
}
/* El botón: mismas declaraciones que .btn en site.css, aquí porque las páginas
   legales no tienen .btn. Si cambia el botón del sitio, cambia también aquí. */
.demo-modal .btn {
  display: inline-block; width: 100%; margin-top: 1.4rem; text-align: center;
  font-family: inherit; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; color: var(--ink-deep); background: var(--highlight, #1AB389);
  border: none; border-radius: 6px; padding: 0.95rem 1.9rem; cursor: pointer;
  transition: background-color 160ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.demo-modal .btn:hover {
  background: var(--highlight-deep, #179C77);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px #1AB38999;
}
.demo-modal .btn:active { transform: translateY(0); box-shadow: 0 3px 10px -6px #1AB38980; }
.modal-nota { margin-top: 0.9rem; font-size: 0.8125rem; color: var(--muted); text-align: center; }
.campo-check { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.9rem; }
.campo-check input[type="checkbox"] { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; flex-shrink: 0; accent-color: var(--kelp); }
.campo-check label { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.campo-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form-error { display: none; margin-top: 0.9rem; font-size: 0.8125rem; color: oklch(0.5 0.17 25); text-align: center; }
.form-error.show { display: block; }