/* Traguitos · landing — paleta del logo: violeta #8736ff, limón #ffd84d, crema #fff6ce */
:root{--bg:#0b0714;--bg2:#120b22;--card:rgba(255,255,255,.045);--card2:rgba(255,255,255,.08);--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);
  --ink:#f6f3ff;--mute:#a79fc2;--v:#8736ff;--v2:#5f2fe0;--vsoft:#b78cff;--l:#ffd84d;--l2:#f4c936;--cream:#fff6ce;--ok:#2be39a;
  --ease:cubic-bezier(.23,1,.32,1);--display:'Space Grotesk','Inter',system-ui,sans-serif;--font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mx:70%;--my:15%}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}
em{font-style:normal;background:linear-gradient(95deg,var(--vsoft),var(--l));-webkit-background-clip:text;background-clip:text;color:transparent}
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(circle 620px at var(--mx) var(--my),rgba(135,54,255,.30),transparent 62%),
  radial-gradient(circle 560px at calc(var(--mx) - 35%) calc(var(--my) + 45%),rgba(95,47,224,.22),transparent 62%),
  radial-gradient(circle 420px at calc(var(--mx) + 10%) calc(var(--my) + 60%),rgba(255,216,77,.09),transparent 62%),var(--bg)}
.wrap{width:min(1120px,100% - 2.4rem);margin-inline:auto}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.62rem 1.15rem;border-radius:999px;border:1px solid var(--line2);font:600 .95rem var(--font);color:var(--ink);background:transparent;cursor:pointer;transition:transform .16s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.ghost:hover{background:var(--card2);border-color:rgba(255,255,255,.3)}
.btn.primary{background:linear-gradient(95deg,var(--v),var(--v2));border-color:transparent;color:#fff;box-shadow:0 10px 30px -10px rgba(135,54,255,.75)}
.btn.primary:hover{background:linear-gradient(95deg,#9a55ff,#6f44ee);box-shadow:0 14px 38px -10px rgba(135,54,255,.9)}
.btn.lg{padding:.85rem 1.6rem;font-size:1.02rem}
.btn.lemon{background:var(--l);color:#2a1a00;border-color:transparent}
:focus-visible{outline:2px solid var(--l);outline-offset:3px}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.7rem max(1.2rem,calc((100% - 1120px)/2));background:rgba(11,7,20,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease),background .25s var(--ease)}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(11,7,20,.82)}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-size:.92rem;color:var(--mute)}
.nav-links a{transition:color .2s var(--ease)}.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:.5rem}
@media (max-width:760px){.nav-links{display:none}.nav-cta{margin-left:auto}.nav-logo img{height:28px}}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;padding:clamp(2rem,6vw,4.5rem) 0 3rem}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem .85rem;border:1px solid var(--line2);border-radius:999px;background:var(--card);font-size:.8rem;color:var(--cream);letter-spacing:.02em}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--l);box-shadow:0 0 12px var(--l)}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);font-weight:700;margin:1.1rem 0 1.1rem}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--mute);max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 1rem}.cta-row.center{justify-content:center}
.fine{font-size:.82rem;color:var(--mute)}

.hero-art{position:relative;display:grid;place-items:center;min-height:540px}
.hero-logo{position:absolute;width:72%;right:-6%;top:2%;opacity:.09;transform:rotate(8deg);pointer-events:none}
.phone{position:relative;width:min(300px,78vw);border-radius:38px;padding:1.1rem 1rem 1.2rem;background:linear-gradient(180deg,#1a1030,#120b22);border:1px solid var(--line2);box-shadow:0 40px 80px -30px rgba(135,54,255,.55),inset 0 0 0 6px #0b0714;animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.phone-top{display:flex;justify-content:space-between;align-items:center;margin:.3rem .5rem .9rem;font:700 .95rem var(--display);color:var(--cream)}
.chip-mesa{font:600 .72rem var(--font);padding:.2rem .6rem;border-radius:99px;background:rgba(255,216,77,.14);color:var(--l)}
.ticket{margin:0 .35rem;padding:1rem;border-radius:20px;background:linear-gradient(160deg,rgba(135,54,255,.35),rgba(95,47,224,.12));border:1px solid rgba(183,140,255,.35)}
.t-head{display:flex;justify-content:space-between;align-items:center}.t-head b{font:700 1rem var(--display)}
.badge{font:700 .7rem var(--font);padding:.2rem .6rem;border-radius:99px}.badge.ok{background:var(--l);color:#2a1a00}
.t-msg{margin:.5rem 0 .8rem;font-size:1.05rem;color:var(--cream)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;font-size:.68rem;color:var(--mute)}
.steps li{display:grid;gap:.35rem;justify-items:start}.steps i{display:block;width:100%;height:5px;border-radius:9px;background:rgba(255,255,255,.14)}
.steps li.done i{background:var(--vsoft)}.steps li.on i{background:var(--l);box-shadow:0 0 12px var(--l)}.steps li.on{color:var(--l);font-weight:600}
.t-items{margin-top:.8rem;font-size:.78rem;color:var(--mute)}
.mini-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem .35rem 0}
.drink{display:grid;gap:.15rem;justify-items:center;padding:.7rem .3rem;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center}
.drink b{font-size:.74rem;font-weight:600}.drink small{font-size:.68rem;color:var(--l)}
.glass{width:30px;height:34px;background:var(--gc,var(--v));clip-path:polygon(0 0,100% 0,56% 62%,56% 88%,76% 100%,24% 100%,44% 88%,44% 62%);opacity:.95}
.g1{--gc:#7be3a0}.g2{--gc:#ff6a5c}.g3{--gc:#ffc04a;clip-path:polygon(8% 0,92% 0,82% 100%,18% 100%)}
.float{position:absolute;display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border-radius:16px;font-size:.8rem;font-weight:600;background:rgba(18,11,34,.88);border:1px solid var(--line2);backdrop-filter:blur(8px);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);animation:bob 6s ease-in-out infinite}
.float small{display:block;color:var(--mute);font-weight:400;font-size:.7rem}
.float .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(43,227,154,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(43,227,154,0)}100%{box-shadow:0 0 0 0 rgba(43,227,154,0)}}
.f1{left:-4%;top:12%;animation-delay:-1s}.f2{right:-6%;top:44%;animation-delay:-3s}.f3{left:-2%;bottom:10%;animation-delay:-2s;flex-direction:column;align-items:flex-start;gap:0}
@media (max-width:900px){.hero{grid-template-columns:1fr;text-align:left}.hero-art{min-height:500px;margin-top:1rem}.f1{left:0}.f2{right:0}.f3{left:0}.hero-logo{right:-10%}}

/* ---- secciones ---- */
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.sec-head{max-width:40rem;margin-bottom:2.2rem}
.kicker{display:inline-block;margin-bottom:.7rem;font:600 .78rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--l)}
h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700}
.sec-head p{margin-top:.8rem;color:var(--mute)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:980px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid3,.grid4{grid-template-columns:1fr}}
.card{position:relative;padding:1.5rem;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(183,140,255,.5);background:var(--card2)}
.card h3{font-size:1.15rem;margin:.9rem 0 .4rem}.card p{color:var(--mute);font-size:.94rem}
.num{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;font:700 1.1rem var(--display);background:var(--l);color:#2a1a00}
.feat svg{width:30px;height:30px;fill:none;stroke:var(--vsoft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin-top:1rem;font-size:1.05rem}
.soon{margin-top:1.4rem;color:var(--mute);font-size:.92rem}.soon span{display:inline-block;margin-right:.5rem;padding:.12rem .6rem;border-radius:99px;background:rgba(255,216,77,.14);color:var(--l);font-weight:600;font-size:.75rem}

/* ---- marca ---- */
.marca{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.ticks{list-style:none;display:grid;gap:.7rem;margin:1.2rem 0 1.8rem;color:var(--mute)}
.ticks li{position:relative;padding-left:1.9rem}
.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1a00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat}
.marca-art{padding:1.2rem;border-radius:26px;background:linear-gradient(160deg,rgba(135,54,255,.22),rgba(255,255,255,.03));border:1px solid var(--line2)}
.url-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border-radius:14px;background:rgba(0,0,0,.35);font-size:.88rem;color:var(--mute)}
.url-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}.url-bar span{margin-left:.5rem}.url-bar b{color:var(--l)}
.brandcards{display:grid;gap:.7rem;margin-top:1rem}
.bc{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.1rem;border-radius:18px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c)}
.bc b{font:600 1rem var(--display)}.bc span{font-size:.78rem;color:var(--mute)}
@media (max-width:860px){.marca{grid-template-columns:1fr}}

/* ---- ingresar ---- */
.login-box{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding:clamp(1.4rem,4vw,2.6rem);border-radius:28px;background:linear-gradient(135deg,rgba(135,54,255,.28),rgba(95,47,224,.1));border:1px solid rgba(183,140,255,.35)}
.login-box p{color:var(--mute);margin-top:.7rem}
#goForm{display:grid;gap:.7rem}#goForm label{font-size:.85rem;color:var(--mute)}
.go-row{display:flex;align-items:center;border:1px solid var(--line2);border-radius:14px;background:rgba(0,0,0,.3);padding:0 .9rem;transition:border-color .2s var(--ease)}
.go-row:focus-within{border-color:var(--l)}.go-row span{color:var(--mute);font-size:.95rem;white-space:nowrap}
.go-row input{flex:1;min-width:0;padding:.85rem .3rem;border:0;background:none;color:var(--ink);font:500 1rem var(--font);outline:none}
.err{min-height:1.2em;color:#ff8a98;font-size:.88rem}
.client-note{margin-top:1rem;text-align:center;color:var(--mute);font-size:.92rem}
@media (max-width:820px){.login-box{grid-template-columns:1fr}}

/* ---- cta final / footer ---- */
.cta-card{text-align:center;padding:clamp(2rem,5vw,3.5rem) 1.4rem;border-radius:32px;background:radial-gradient(circle at 50% 0%,rgba(255,216,77,.16),transparent 60%),linear-gradient(160deg,rgba(135,54,255,.35),rgba(95,47,224,.12));border:1px solid rgba(183,140,255,.4)}
.cta-card p{max-width:34rem;margin:.8rem auto 0;color:var(--mute)}
.foot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding:2rem 0 3rem;border-top:1px solid var(--line);color:var(--mute);font-size:.85rem}
.foot img{height:28px;width:auto}

/* ---- aparición al scrollear ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* ---- registro ---- */
.reg-wrap{min-height:calc(100vh - 70px);display:grid;place-items:start center;padding:1.5rem 1rem 3rem}
.reg-card{width:min(680px,100%);padding:clamp(1.4rem,4vw,2.4rem);border-radius:28px;background:linear-gradient(160deg,rgba(135,54,255,.22),rgba(255,255,255,.03));border:1px solid var(--line2)}
.reg-title{font-size:clamp(1.7rem,4vw,2.3rem);margin:.2rem 0 .4rem}.reg-sub{color:var(--mute);margin-bottom:1.2rem}
#regForm{display:grid;gap:.9rem}#regForm label{display:grid;gap:.35rem;font-size:.85rem;color:var(--mute)}
.reg-page input{width:100%;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.3);color:var(--ink);font:500 1rem var(--font);outline:none;transition:border-color .2s var(--ease)}
.reg-page input:focus{border-color:var(--l)}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}.reg-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.slug-row{display:flex;align-items:center;gap:.3rem;border:1px solid var(--line2);border-radius:12px;background:rgba(0,0,0,.3);padding:0 .7rem;color:var(--mute)}
.slug-row:focus-within{border-color:var(--l)}.slug-row input{border:0;background:none;padding:.75rem .2rem}.slug-row i{font-style:normal;white-space:nowrap;font-size:.9rem}
.reg-pins{border:1px solid var(--line);border-radius:16px;padding:.9rem}.reg-pins legend{padding:0 .4rem;font-size:.85rem;color:var(--cream)}.reg-pins small{display:block;margin-top:.6rem;color:var(--mute)}
@media (max-width:640px){.reg-grid,.reg-grid3{grid-template-columns:1fr}}

.ulink{color:var(--l);text-decoration:underline;text-underline-offset:3px}
.reg-grid>*{min-width:0}.slug-row{flex-wrap:wrap}.slug-row i{max-width:100%;overflow-wrap:anywhere;white-space:normal}.slug-row input{min-width:0;flex:1 1 140px}

/* Acceso simple, con la identidad de Traguitos. */
[hidden]{display:none!important}
.auth-page{min-height:100vh}.auth-back{font-size:.85rem;color:var(--mute)}.auth-back:hover{color:var(--ink)}
.auth-wrap{min-height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1rem 3rem}
.auth-card{width:min(460px,100%);padding:clamp(1.5rem,5vw,2.5rem);border:1px solid rgba(183,140,255,.24);border-radius:26px;background:linear-gradient(150deg,rgba(135,54,255,.14),rgba(18,11,34,.98) 65%);box-shadow:0 24px 80px rgba(0,0,0,.25)}
.auth-card h1{font:700 clamp(1.65rem,5vw,2rem)/1.2 var(--display);letter-spacing:-.04em;margin:.7rem 0}.auth-sub{font-size:.93rem;color:var(--mute);margin-bottom:1.7rem}
#accountForm{display:grid;gap:1.05rem}#accountForm label{display:grid;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--cream)}
.auth-page input{padding:.9rem 1rem;min-height:50px;border-color:rgba(183,140,255,.24);background:rgba(0,0,0,.2)}.auth-page input:focus{box-shadow:0 0 0 3px rgba(135,54,255,.18);border-color:var(--vsoft)}
.password-wrap{position:relative}.password-wrap input{padding-right:4.7rem}.password-wrap button{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--vsoft);font:600 .8rem var(--font);padding:.5rem;cursor:pointer;min-height:44px}
.auth-hint{font-size:.76rem;color:var(--mute);margin-top:-.5rem}.auth-submit{width:100%;border-radius:12px;min-height:52px;justify-content:space-between!important;padding-inline:1.1rem!important}.auth-submit:disabled{opacity:.6;cursor:wait}
.auth-card .err:empty,.auth-status:empty{display:none}.auth-status{font-size:.82rem;color:var(--mute)}.auth-switch{border-top:1px solid var(--line);padding-top:1.3rem;margin-top:1.6rem;font-size:.86rem;text-align:center;color:var(--mute)}.auth-switch a{color:var(--l);font-weight:600}.auth-foot{font-size:.78rem;color:var(--mute);margin-top:1.6rem}
.auth-page :focus-visible{outline:2px solid var(--l);outline-offset:4px}