/* waitlist-widget.css — styles for the ONE role-first waitlist wizard
   (assets/waitlist-widget.js), shared by index / profesionales / negocios.
   Extracted verbatim from index.html 2026-07-20 so all pages render the same
   signup. Relies on each page's palette vars (--gold, --cream, --disp, --body…). */
.wl-panel{text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:30px 28px}
.wl-h{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--cream);margin:0 0 4px;text-align:center}
.wl-p{font-size:14.5px;color:rgba(251,244,233,.6);text-align:center;margin:0 auto 22px;max-width:440px}
.wl-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.wl-roles{grid-template-columns:1fr}}
.wl-role{appearance:none;cursor:pointer;text-align:center;padding:22px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);color:var(--cream);transition:transform .16s,border-color .16s,background .16s}
.wl-role:hover{transform:translateY(-3px);border-color:var(--gold);background:rgba(233,180,87,.08)}
.wl-role .ic{font-size:30px;line-height:1;display:block;margin-bottom:12px}
.wl-role b{display:block;font-size:16px;margin-bottom:4px}
.wl-role span{font-size:12.5px;color:rgba(251,244,233,.55)}
.wl-field{margin-bottom:14px}
.wl-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(251,244,233,.55);margin:0 0 6px}
.wl-in{width:100%;padding:14px 16px;border-radius:13px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--cream);font:500 16px var(--body)}
.wl-in::placeholder{color:rgba(251,244,233,.4)}
.wl-in:focus{outline:none;border-color:var(--gold)}
select.wl-in option{color:#20180F}
select.wl-in optgroup{color:#20180F}
.wl-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.wl-tab{flex:1 1 auto;cursor:pointer;padding:11px 10px;border-radius:11px;font-weight:600;font-size:14px;text-align:center;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);color:rgba(251,244,233,.72)}
.wl-tab[aria-pressed="true"]{border-color:var(--gold);color:var(--cream);background:rgba(233,180,87,.12)}
.wl-chips{display:flex;flex-wrap:wrap;gap:8px}
.wl-chip{cursor:pointer;padding:9px 14px;border-radius:999px;font-size:13.5px;font-weight:600;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.16);color:rgba(251,244,233,.8)}
.wl-chip[aria-pressed="true"]{border-color:var(--gold);color:#20180F;background:var(--gold)}
.wl-chan-tabs{display:flex;gap:8px;margin-bottom:14px}
.wl-chan{flex:1;padding:11px;border-radius:12px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:rgba(251,244,233,.72);font:600 14px var(--body);cursor:pointer}
.wl-chan.on{border-color:var(--gold);background:var(--gold);color:#20180F}
.wl-offer{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:14px 16px;border-radius:14px;background:rgba(233,180,87,.1);border:1px solid rgba(233,180,87,.34)}
.wl-offer .big{font-family:var(--disp);font-weight:800;color:var(--gold-l);font-size:18px;white-space:nowrap}
.wl-offer .txt{font-size:13.5px;color:rgba(251,244,233,.78)}
.wl-actions{display:flex;gap:10px;align-items:center;margin-top:20px}
.wl-back{background:none;border:0;color:rgba(251,244,233,.6);cursor:pointer;font:600 14px var(--body);padding:8px 4px}
.wl-back:hover{color:var(--gold)}
.wl-actions .btn{flex:1}
.wl-err{color:var(--gold-l);font-size:13.5px;margin-top:10px;min-height:18px}
.wl-hint{font-size:12px;color:rgba(251,244,233,.4);margin-top:8px}
.wl-dots{display:flex;gap:7px;justify-content:center;align-items:center;margin-bottom:20px}
.wl-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.wl-dot.on{background:var(--gold)}
.wl-stepn{font-size:12px;color:rgba(255,255,255,.55);margin-left:8px;letter-spacing:.03em}
.wl-done{text-align:center;padding:8px 4px}
.wl-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--gold);color:#20180F;font-weight:800;font-size:14px;letter-spacing:.02em;margin-bottom:18px}
.wl-done h3{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--cream);margin:0 0 10px}
.wl-done p{color:rgba(251,244,233,.7);font-size:15px;max-width:420px;margin:0 auto 8px}
/* Widget container width on the role pages (index's foot-cta already centers it) */
#wl-mount{max-width:560px;margin:26px auto 0;text-align:left}