/* ============================================================
   Egoki — Modal de lista de espera (waitlist)
   La app aún no está publicada: los botones de descarga abren
   este formulario para avisar del lanzamiento.
   Diseño accesible para cuidadores de 55–65: texto grande, alto
   contraste, colores de marca (navy #001535 / dorado #DFA902),
   usable con teclado y en móvil.
   ============================================================ */
:root{
  --wl-navy:#001535; --wl-navy-700:#12305f; --wl-gold:#DFA902; --wl-gold-deep:#8A6300;
  --wl-ink:#15203a; --wl-body:#33405c; --wl-line:#d7ddea; --wl-err:#c0392b; --wl-ok:#0f8a5f;
}
.wl-scrim{
  position:fixed; inset:0; z-index:10001; display:none;
  align-items:flex-start; justify-content:center; overflow-y:auto;
  background:rgba(0,8,24,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:24px 16px;
}
.wl-scrim.wl-open{ display:flex; }

.wl-dialog{
  position:relative; width:100%; max-width:560px; margin:auto;
  background:#fff; color:var(--wl-body); border-radius:22px;
  border:1px solid var(--wl-line);
  box-shadow:0 40px 90px -30px rgba(0,8,24,.6);
  padding:34px clamp(20px,4vw,40px);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.55;
  animation:wl-in .28s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes wl-in{ from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none} }

.wl-close{
  position:absolute; top:12px; right:12px; width:48px; height:48px;
  border:0; background:transparent; color:var(--wl-navy); cursor:pointer;
  border-radius:12px; font-size:1.9rem; line-height:1; display:grid; place-items:center;
}
.wl-close:hover{ background:#f0f2f7; }

.wl-head{ margin:0 44px 8px 0; }
.wl-badge{ display:inline-flex; align-items:center; gap:8px; background:#FBF3D6; color:var(--wl-gold-deep);
  font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; border-radius:999px; }
.wl-badge svg{ width:16px; height:16px; stroke:var(--wl-gold-deep); fill:none; stroke-width:2; }
.wl-title{ font-family:'Fraunces','Georgia',serif; color:var(--wl-navy); font-size:clamp(1.55rem,4.5vw,2rem);
  line-height:1.15; font-weight:600; margin:16px 0 8px; letter-spacing:-.01em; }
.wl-sub{ color:var(--wl-body); font-size:1.06rem; margin:0 0 6px; }

.wl-form{ margin-top:18px; }
.wl-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wl-field{ margin-top:16px; }
.wl-field.full{ grid-column:1 / -1; }
.wl-field label{ display:block; font-weight:600; color:var(--wl-navy); font-size:1rem; margin-bottom:7px; }
.wl-field label .req{ color:var(--wl-gold-deep); }
.wl-field input{
  width:100%; min-height:56px; padding:14px 16px; font-size:1.05rem; font-family:inherit;
  color:var(--wl-ink); background:#fff; border:2px solid var(--wl-line); border-radius:12px;
  transition:border-color .18s, box-shadow .18s;
}
.wl-field input::placeholder{ color:#9aa4ba; }
.wl-field input:focus{ outline:none; border-color:var(--wl-navy); box-shadow:0 0 0 4px rgba(0,21,53,.12); }
.wl-field input[aria-invalid="true"]{ border-color:var(--wl-err); box-shadow:0 0 0 4px rgba(192,57,43,.12); }
.wl-hint{ display:block; margin-top:6px; font-size:.9rem; color:#6a7794; }
.wl-error{ display:none; margin-top:6px; font-size:.92rem; color:var(--wl-err); font-weight:600; }
.wl-error.show{ display:block; }

.wl-checks{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.wl-check{ display:flex; gap:13px; align-items:flex-start; }
.wl-check input[type=checkbox]{
  flex:none; width:26px; height:26px; margin-top:1px; accent-color:var(--wl-navy); cursor:pointer;
}
.wl-check label{ font-size:1rem; color:var(--wl-body); line-height:1.5; cursor:pointer; }
.wl-check a{ color:var(--wl-gold-deep); font-weight:600; text-decoration:underline; }

.wl-actions{ margin-top:26px; }
.wl-submit{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:58px; border:0; border-radius:999px; cursor:pointer;
  background:var(--wl-gold); color:var(--wl-navy); font-weight:700; font-size:1.12rem; font-family:inherit;
  transition:transform .18s, box-shadow .18s, background .2s, opacity .2s;
  box-shadow:0 12px 28px -12px rgba(223,169,2,.7);
}
.wl-submit:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(223,169,2,.85); }
.wl-submit:disabled{ background:#e7e2d4; color:#9a9484; cursor:not-allowed; box-shadow:none; }
.wl-submit .wl-spin{ width:20px; height:20px; border:3px solid rgba(0,21,53,.3); border-top-color:var(--wl-navy);
  border-radius:50%; animation:wl-spin .8s linear infinite; display:none; }
.wl-submit.wl-loading .wl-spin{ display:inline-block; }
@keyframes wl-spin{ to{ transform:rotate(360deg); } }

.wl-status{ margin-top:16px; font-size:1rem; font-weight:600; text-align:center; }
.wl-status.err{ color:var(--wl-err); }

.wl-legal-note{ margin-top:16px; font-size:.86rem; color:#6a7794; text-align:center; }

/* Pantalla de éxito */
.wl-done{ text-align:center; padding:14px 4px 6px; }
.wl-done .wl-tick{ width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
  background:rgba(15,138,95,.12); display:grid; place-items:center; }
.wl-done .wl-tick svg{ width:38px; height:38px; stroke:var(--wl-ok); fill:none; stroke-width:2.4; }
.wl-done h3{ font-family:'Fraunces',serif; color:var(--wl-navy); font-size:1.5rem; margin:0 0 10px; font-weight:600; }
.wl-done p{ color:var(--wl-body); font-size:1.05rem; margin:0 0 22px; }

:focus-visible{ outline:3px solid var(--wl-gold); outline-offset:2px; }

@media (max-width:560px){
  .wl-row{ grid-template-columns:1fr; }
  .wl-dialog{ padding:28px 20px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce){
  .wl-dialog{ animation:none; } .wl-submit .wl-spin{ animation:none; }
}