/* Formulario de lista prioritaria — email + WhatsApp con país automático.
   Depende de assets/tokens.css y de intl-tel-input (CDN). */

.wl-form{ display:flex; flex-direction:column; gap:1rem; }
.wl-row{ display:flex; flex-direction:column; gap:1rem; }
@media (min-width:560px){ .wl-row.is-split{ flex-direction:row; } .wl-row.is-split .wl-field{ flex:1; min-width:0; } }

.wl-field{ display:flex; flex-direction:column; gap:.4rem; }
.wl-field label{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.wl-field input,
.iti input[type="tel"],
.iti__tel-input{
  font-family:var(--font-body); font-size:1rem; line-height:1.3; padding:.8rem .95rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-alt); color:var(--ink); width:100%;
  transition:border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.wl-field input:focus,
.iti input[type="tel"]:focus,
.iti__tel-input:focus{ border-color:var(--gold); outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.wl-field input[aria-invalid="true"]{ border-color:#B4442F; box-shadow:0 0 0 3px rgba(180,68,47,.16); }
.wl-error{ font-size:.8rem; font-weight:600; color:#9B3B2E; margin:0; }
.wl-error:empty{ display:none; }
.wl-opcional{ font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); }
:root[data-theme="dark"] .wl-error{ color:#E9A08C; }

.wl-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Consentimiento: uno para el correo (obligatorio) y otro para WhatsApp,
   separados como pidió Marjorie el 10-09-2026. */
.wl-check{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .7rem; align-items:start; }
.wl-check input{ width:22px; height:22px; margin:.1rem 0 0; accent-color:var(--ce-verde-mineral); }
.wl-check label{ font-size:.84rem; line-height:1.5; color:var(--ink-soft); }
.wl-check .wl-error{ grid-column:2; }
.wl-note a{ color:var(--ink-soft); }
.wl-status{ font-size:.88rem; font-weight:600; color:#9B3B2E; text-align:center; margin:0; }
.wl-status:empty{ display:none; }
:root[data-theme="dark"] .wl-status{ color:#E9A08C; }

/* intl-tel-input */
.iti{ width:100%; display:block; }
.iti__country-list{
  background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-2); color:var(--ink);
}
.iti__country.iti__highlight{ background:color-mix(in srgb, var(--gold) 16%, var(--surface-raised)); }
.iti__dial-code{ color:var(--muted); }
.iti--separate-dial-code .iti__selected-flag{ background:color-mix(in srgb, var(--ink) 5%, transparent); border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.iti--separate-dial-code .iti__selected-dial-code{ color:var(--ink); font-family:var(--font-body); }

.wl-submit{
  width:100%; font-family:var(--font-body); font-weight:700; font-size:1rem; letter-spacing:.01em;
  padding:.95rem 1.4rem; border:none; border-radius:999px; cursor:pointer;
  background:var(--cta-bg); color:var(--cta-ink);
  transition:transform 150ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 200ms var(--ease-out);
  box-shadow:0 14px 28px -16px color-mix(in srgb, var(--cta-bg) 70%, transparent);
}
@media (hover:hover) and (pointer:fine){ .wl-submit:hover{ transform:translateY(-2px); } }
.wl-submit:active{ transform:scale(.97); }
.wl-submit[disabled]{ opacity:.6; cursor:progress; transform:none; }

.wl-note{ font-size:.76rem; color:var(--muted); text-align:center; margin:0; }

.wl-success{ display:block; text-align:center; padding:.5rem 0; }
.wl-success[hidden], .wl-form[hidden]{ display:none; }
.wl-success svg{ width:46px; height:46px; color:var(--gold-ink); margin-bottom:.9rem; }
:root[data-theme="dark"] .wl-success svg{ color:var(--gold); }
.wl-success h3{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; margin:0 0 .5rem; color:var(--ink); }
.wl-success p{ color:var(--ink-soft); font-size:.94rem; margin:0 0 1.25rem; }
.wl-success .wl-next{
  display:inline-flex; align-items:center; gap:.55rem;
  background:color-mix(in srgb, var(--gold) 20%, var(--surface)); color:var(--gold-ink);
  font-weight:700; font-size:.9rem; padding:.8rem 1.3rem; border-radius:999px; text-decoration:none;
  transition:transform 150ms var(--ease-out);
}
:root[data-theme="dark"] .wl-success .wl-next{ color:var(--gold); }
@media (hover:hover){ .wl-success .wl-next:hover{ transform:translateY(-2px); } }
.wl-form.is-hidden{ display:none; }
@media (prefers-reduced-motion:reduce){ .wl-submit,.wl-success .wl-next{ transition:opacity 150ms linear; } }