/* Hocico Phone — Lista de espera (pre-lanzamiento). Se carga siempre; solo se ve
   cuando VITE_WAITLIST_MODE=true intercepta los checkouts. Mobile-first, marca. */

.wl-wrap{
  min-height:100dvh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(42,159,132,.12), transparent 60%),
    var(--hp-paper, #FAF6EE);
  display:flex; flex-direction:column; align-items:center;
  padding:0 18px calc(40px + env(safe-area-inset-bottom));
  color:var(--hp-ink, #14241F);
}

.wl-bar{
  width:100%; max-width:520px;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top)) 2px 10px;
}
.wl-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--hp-graphite, #3A4A44);
  background:none; border:none; cursor:pointer; padding:6px 4px;
}
.wl-back:hover{ color:var(--hp-green, #2A9F84); }
.wl-brand{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:15px; }

.wl-card{
  width:100%; max-width:460px; margin-top:22px;
  background:var(--hp-white, #fff);
  border:1px solid var(--hp-mist, #E6ECEA);
  border-radius:var(--r-xl, 28px);
  box-shadow:0 18px 50px rgba(20,36,31,.10);
  padding:30px 26px 26px;
}

.wl-badge{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hp-green-700, #166B57); background:var(--hp-green-50, #ECF7F2);
  padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.wl-h1{ font-family:var(--font-display); font-size:28px; line-height:1.1; font-weight:800; letter-spacing:-.02em; margin:0 0 10px; }
.wl-lede{ font-size:15px; line-height:1.55; color:var(--hp-graphite, #3A4A44); margin:0 0 20px; }

.wl-interes{
  display:flex; flex-direction:column; gap:2px;
  background:var(--hp-fog, #F2F5F4); border-radius:var(--r-md, 14px);
  padding:12px 14px; margin-bottom:20px;
}
.wl-interes-lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--hp-slate, #6B7D77); }
.wl-interes-val{ font-size:15px; font-weight:800; color:var(--hp-ink, #14241F); }

.wl-field{ margin-bottom:14px; }
.wl-field label{ display:block; font-size:13px; font-weight:700; color:var(--hp-graphite, #3A4A44); margin-bottom:6px; }
.wl-req{ color:var(--hp-coral, #F2715A); margin-left:2px; }
.wl-opt{ color:var(--hp-slate, #6B7D77); font-weight:600; }
.wl-input{
  width:100%; padding:13px 15px; border-radius:var(--r-md, 14px);
  border:1.5px solid var(--hp-mist, #E6ECEA); background:var(--hp-white, #fff);
  font-size:16px; color:var(--hp-ink, #14241F); outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.wl-input:focus{ border-color:var(--hp-green, #2A9F84); box-shadow:0 0 0 4px rgba(42,159,132,.16); }
.wl-input.err{ border-color:var(--hp-danger, #E0573F); box-shadow:0 0 0 3px rgba(224,87,63,.12); }

.wl-hint{ font-size:13px; color:var(--hp-graphite, #3A4A44); margin:2px 0 10px; }
.wl-err{ font-size:13.5px; color:var(--hp-danger, #E0573F); margin:6px 0 10px; line-height:1.45; }
.wl-err a{ color:inherit; text-decoration:underline; font-weight:700; }

.wl-btn{
  width:100%; margin-top:8px; padding:15px 20px;
  border:none; border-radius:999px; cursor:pointer;
  background:var(--hp-green, #2A9F84); color:#fff;
  font-family:inherit; font-size:16px; font-weight:800;
  box-shadow:0 10px 24px rgba(42,159,132,.30);
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease;
}
.wl-btn:hover:not(:disabled){ background:var(--hp-green-600, #1F8A6F); transform:translateY(-1px); }
.wl-btn:disabled{ opacity:.7; cursor:default; }
.wl-legal{ font-size:12px; color:var(--hp-slate, #6B7D77); text-align:center; margin:14px 0 0; line-height:1.5; }

/* Éxito */
.wl-done{ text-align:center; }
.wl-seal{
  width:74px; height:74px; margin:4px auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--hp-green-50, #ECF7F2);
}

@media (max-width:420px){
  .wl-card{ padding:26px 20px 22px; }
  .wl-h1{ font-size:24px; }
}