/* ============================================================
   Zupp — sistema visual (tema claro, marca cian→azul→violeta)
   Tipografía: Hanken Grotesk (títulos y texto) · Mono del sistema · Logo: Baloo 2
   ============================================================ */

:root{
  --bg:#F4F7FB; --surface:#FFFFFF; --surface-2:#F8FAFE; --surface-3:#EEF3FB;
  --ink:#0A1330; --text:#3B4663; --muted:#5B6478; --muted-2:#7E879D;
  --line:#E7ECF5; --line-2:#D8DFEE;
  --nav-bg:rgba(244,247,251,.82);
  --brand:#1B6EF3; --brand-2:#5A2EE0; --cyan:#0DA3F2;
  --grad:linear-gradient(118deg,#0DA3F2 0%,#1B6EF3 46%,#5A2EE0 100%);
  --grad-text:linear-gradient(118deg,#0EA0F1 0%,#2061EF 50%,#5A2EE0 100%);
  --ok:#0E9F6E; --ok-bg:#E5F6EF; --danger:#E23D4B; --danger-bg:#FCE9EB; --warn:#B97700; --warn-bg:#FBF1DD;
  --gold:#B5870D; --grad-gold:linear-gradient(135deg,#F4C84F 0%,#E0A312 55%,#C6890A 100%);
  --navy:#070D22; --navy-2:#0C1430;
  --radius:18px; --radius-sm:12px; --radius-xs:8px;
  --shadow-sm:0 1px 2px rgba(13,30,70,.06);
  --shadow:0 2px 8px rgba(13,30,70,.05), 0 18px 38px -20px rgba(13,30,70,.18);
  --shadow-lg:0 36px 70px -28px rgba(13,30,70,.30);
  --display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --logo:'Baloo 2','Hanken Grotesk',system-ui,sans-serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:var(--sans);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.6;
  color:var(--text); background:var(--bg); position:relative;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(900px 600px at 100% -5%, rgba(13,163,242,.10), transparent 55%),
    radial-gradient(900px 640px at -5% 105%, rgba(90,46,224,.10), transparent 55%);
}
.net{position:absolute; width:460px; height:auto; opacity:.62}
.net-tr{top:-26px; right:-26px; animation:netFloatA 32s ease-in-out infinite alternate}
.net-bl{left:-26px; bottom:-26px; width:540px; opacity:.5; transform:scale(-1,-1); animation:netFloatB 38s ease-in-out infinite alternate}
@keyframes netFloatA{from{transform:translate(0,0)}to{transform:translate(-18px,15px)}}
@keyframes netFloatB{from{transform:scale(-1,-1) translate(0,0)}to{transform:scale(-1,-1) translate(-16px,13px)}}
@media (max-width:640px){.net-tr{width:300px}.net-bl{width:340px}}
@media (prefers-reduced-motion:reduce){.net{animation:none}}
header,main,footer{position:relative; z-index:1}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display); color:var(--ink); font-weight:700; letter-spacing:-.02em; line-height:1.12; margin:0 0 .5em}
p{margin:0 0 1rem}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.tiny{font-size:.76rem}
.center{text-align:center}
.tcenter{text-align:center}
.ok-text{color:var(--ok)}
.danger{color:var(--danger)}

/* ---------- Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; justify-content:flex-start; gap:1rem;
  padding:.8rem clamp(1.1rem,4vw,2rem);
}
.nav-inner > .brand{margin-right:auto}
.brand{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{display:block; width:34px; height:34px; object-fit:contain}
.brand-word{font-family:var(--logo); font-weight:800; font-size:1.55rem; color:var(--ink); letter-spacing:-.01em; text-transform:lowercase; line-height:1}
.nav-links{display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap; font-size:.92rem}
.nav-links a{color:var(--muted); font-weight:500}
.nav-links a:hover{color:var(--ink); text-decoration:none}
.nav-links a.on{color:var(--ink); font-weight:600}
.nav-premium{color:var(--brand-2)!important}
.nav-premium.on{color:var(--brand-2)!important}
.who{color:var(--muted-2); font-size:.8rem; font-family:var(--mono)}
.who .tag,.tag{display:inline-block; font-family:var(--sans); font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--grad); padding:.12rem .45rem; border-radius:999px; vertical-align:middle}

/* ---------- Contenedor ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:clamp(1.5rem,4vw,2.8rem) clamp(1.1rem,4vw,2rem)}
.narrow{max-width:560px}
.center-screen{min-height:62vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}

/* ---------- Botones ---------- */
.btn,.btn-ghost,.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:.95rem; line-height:1;
  padding:.78rem 1.3rem; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap;
}
.btn{color:#fff; background:var(--grad); background-clip:border-box; border:0; box-shadow:0 6px 16px -7px rgba(27,110,243,.45)}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(27,110,243,.5); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--muted-2); text-decoration:none}
.btn-danger{background:var(--surface); color:var(--danger); border-color:#F0C2C7}
.btn-danger:hover{background:var(--danger-bg)}

/* ---------- Avisos flash ---------- */
.flash{padding:.8rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.92rem; border:1px solid transparent}
.flash-ok{background:var(--ok-bg); color:#0a7350; border-color:#BFE7D5}
.flash-err{background:var(--danger-bg); color:#b22a37; border-color:#F2C7CC}
.flash-warn{background:var(--warn-bg); color:#8a5a00; border-color:#EFD9AC}

/* ---------- Tarjetas ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.2rem,3vw,1.7rem); box-shadow:var(--shadow); margin-bottom:1.4rem}
.card h2,.card h3{margin-top:0}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:1.35fr .95fr; gap:clamp(1.4rem,4vw,3rem); align-items:start}
.hero-main{padding-top:.5rem}
.display{font-family:var(--display); font-weight:800; font-size:clamp(2.5rem,5.4vw,3.7rem); line-height:1.02; letter-spacing:-.035em; color:var(--ink); margin:0 0 1rem}
.accent{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.12rem; color:var(--muted); max-width:46ch; margin:0 0 1.6rem}

.shorten-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow)}
.shorten-card > .tiny{margin:1rem 0 0; line-height:1.55}
.shorten-row{display:flex; gap:.6rem}
.shorten-row .btn{padding:1rem 1.6rem; font-size:1.02rem}
.shorten-input{flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:.95rem 1.15rem; font-size:1.05rem; line-height:1.5; color:var(--ink); font-family:var(--sans); transition:border-color .15s, box-shadow .15s}
.shorten-input::placeholder{color:var(--muted-2)}
.shorten-input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(27,110,243,.12)}
.adv-note{margin:.85rem 0 0; color:var(--muted)}
.adv-note b{color:var(--ink); font-weight:600}

.ticks{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.7rem}
.ticks li{position:relative; padding-left:1.9rem; color:var(--text)}
.ticks li::before{content:""; position:absolute; left:0; top:.15em; width:1.25rem; height:1.25rem; border-radius:50%; background:var(--grad); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.25 1.4 1.45z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.25 1.4 1.45z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Resultado del acortado */
.result-card{margin-top:1rem; background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:1rem 1.1rem}
.result-label{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:.35rem}
.result-row{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.result-url{flex:1; min-width:0; font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--brand); word-break:break-all}
.big-copy{flex-shrink:0}
.copy{font-family:var(--mono); font-size:.74rem; font-weight:500; color:var(--muted); background:var(--surface); border:1px solid var(--line-2); border-radius:6px; padding:.18rem .5rem; cursor:pointer; transition:.15s}
.copy:hover{color:var(--ink); border-color:var(--muted-2)}

/* ---------- Autenticación ---------- */
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); position:sticky; top:5rem}
.auth-intro{color:var(--muted); font-size:.92rem; margin:.2rem 0 1.1rem}
.tabs{display:flex; gap:.3rem; border-bottom:1px solid var(--line); margin-bottom:1.2rem}
.tab{padding:.6rem .8rem; color:var(--muted); font-weight:600; font-size:.95rem; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none}
.tab:hover{color:var(--ink); text-decoration:none}
.tab.on{color:var(--brand); border-bottom-color:var(--brand)}

/* ---------- Formularios ---------- */
.field{display:grid; gap:.35rem; margin-bottom:1rem}
.field label{font-size:.85rem; color:var(--muted); font-weight:500}
.field input,.field select,.field textarea,.form input,.form select,.form textarea{
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.7rem .9rem; font-size:.97rem; color:var(--ink); font-family:var(--sans); width:100%; transition:border-color .15s, box-shadow .15s;
}
.form textarea{display:block; min-height:6.5rem; resize:vertical; line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus,.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(27,110,243,.12)}
.form .btn{width:100%; margin-top:.3rem}
.form label{display:block; margin-bottom:.9rem; font-size:.88rem; color:var(--muted); font-weight:500}
.form label input,.form label select,.form label textarea{margin-top:.4rem}
.form label.check{display:flex; align-items:flex-start; gap:.55rem; font-weight:400; line-height:1.45}
.form label.check input{width:auto; margin-top:.2rem; flex-shrink:0}
.form label.check > span{min-width:0}

.form-inline{display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap}
.form-inline .field{margin-bottom:0}
.grow{flex:1 1 220px}
.row-gap{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}
.inline{display:inline-flex; gap:.5rem; align-items:center}

.prefix{display:flex; align-items:stretch}
.prefix .prefix-input{display:flex; align-items:center; font-family:var(--mono); font-size:.82rem; color:var(--muted); background:var(--surface-3); border:1px solid var(--line-2); border-right:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm); padding:0 .6rem; white-space:nowrap}
.prefix input{flex:1; min-width:0; border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.lock-hint{display:inline-block; margin-top:.4rem; font-size:.8rem; color:var(--brand-2); font-weight:600}

/* ---------- Estadísticas resumen ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.4rem}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.15rem 1.3rem; box-shadow:var(--shadow-sm)}
.stat-num{display:block; font-family:var(--display); font-weight:800; font-size:2.1rem; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-num.free,.stat-num.plan-free{background:none; -webkit-text-fill-color:var(--muted); color:var(--muted); font-size:1.6rem}
.stat-num.plan-premium{background:none; -webkit-text-fill-color:var(--gold); color:var(--gold); text-align:left}
.stat-lbl{display:block; color:var(--muted); font-size:.85rem; margin-top:.45rem; font-weight:500}

/* ---------- Banner de upsell ---------- */
.upsell{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:linear-gradient(110deg, rgba(13,163,242,.08), rgba(90,46,224,.06));
  border:1px solid rgba(27,110,243,.22); border-radius:var(--radius); padding:1rem 1.3rem; margin-bottom:1.4rem; color:var(--text)}
.upsell b{color:var(--ink)}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm)}
table,.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding:.8rem .9rem; border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap}
td{padding:.85rem .9rem; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--text)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.num{font-family:var(--mono); text-align:right; color:var(--ink)}
.code{font-family:var(--mono); font-weight:700; color:var(--brand)}
.dest,.dest-line{color:var(--muted); font-size:.82rem; word-break:break-all; max-width:34ch}
.sub{color:var(--muted-2); font-size:.78rem; margin-top:.2rem}
.row-off{opacity:.55}
.actions{display:flex; gap:.35rem; flex-wrap:wrap}
.mini{font-size:.74rem; font-weight:600; color:var(--muted); background:var(--surface-2); border:1px solid var(--line-2); border-radius:6px; padding:.22rem .5rem; cursor:pointer; text-decoration:none; transition:.15s}
.mini:hover{color:var(--ink); border-color:var(--muted-2); text-decoration:none}
.mini.danger{color:var(--danger); border-color:#F0C2C7}
.mini.danger:hover{background:var(--danger-bg)}

.badge{display:inline-block; font-size:.72rem; font-weight:600; padding:.16rem .6rem; border-radius:999px; white-space:nowrap}
.badge-on{color:var(--ok); background:var(--ok-bg); border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.badge-off{color:var(--muted); background:var(--surface-3); border:1px solid var(--line-2)}
.badge-admin{color:#fff; background:var(--grad)}
.exp-soon{color:var(--warn); font-family:var(--mono); font-size:.82rem}
.exp-bad{color:var(--danger); font-family:var(--mono); font-size:.82rem}

/* ---------- Premium / planes ---------- */
.plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.5rem}
.plan{position:relative; border:1px solid var(--line-2); border-radius:var(--radius); padding:1.5rem 1.3rem; background:var(--surface); text-align:center; transition:transform .15s, box-shadow .2s}
.plan:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.plan-best{border:1.5px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; box-shadow:var(--shadow)}
.plan-tag,.tag.plan-tag{position:absolute; top:-.7rem; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-size:.68rem; font-weight:700; padding:.2rem .7rem; border-radius:999px; text-transform:none; letter-spacing:0}
.plan-name{font-family:var(--display); font-weight:700; font-size:1rem; color:var(--muted)}
.plan-price{font-family:var(--display); font-weight:800; font-size:2.1rem; color:var(--ink); margin:.3rem 0 1rem}
.per{font-size:.85rem; color:var(--muted); font-weight:500}
.plan .btn{width:100%; margin-bottom:.5rem}
.plan-stat{color:var(--muted); font-size:.85rem}
.plan-premium{text-align:center; color:var(--ok); font-weight:600}

.benefits{list-style:none; padding:0; margin:1.2rem auto; max-width:30rem; text-align:left; display:grid; gap:.7rem}
.benefits li{position:relative; padding-left:1.9rem; color:var(--ink)}
.benefits li::before{content:""; position:absolute; left:0; top:.1em; width:1.3rem; height:1.3rem; border-radius:50%; background:var(--grad); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.25 1.4 1.45z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.25 1.4 1.45z'/%3E%3C/svg%3E") center/contain no-repeat}
.dev-pay{margin-top:.4rem}
.dev-note{color:var(--muted-2); font-size:.8rem; margin-top:1rem}

/* ---------- Página de estadísticas (gráfico) ---------- */
.chart{display:flex; align-items:flex-end; gap:.5rem; height:200px; padding:1rem 0; border-bottom:1px solid var(--line); margin-bottom:.5rem}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.4rem; height:100%}
.bar-x{width:100%; max-width:36px; background:var(--grad); border-radius:6px 6px 0 0; min-height:3px; transition:height .3s}
.bar-n{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.kv{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.92rem}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-family:var(--mono); color:var(--ink)}

/* ---------- Cuenta / GDPR ---------- */
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.danger-zone{border:1px solid #F0C2C7; background:#FDF4F5; border-radius:var(--radius); padding:1.3rem; margin-top:1.4rem}
.danger-zone h3{color:var(--danger)}
.del-label{font-size:.85rem; color:var(--muted); margin-bottom:.35rem; display:block}
.del-field{margin-bottom:.9rem}
.del-input{width:100%; padding:.7rem .9rem; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:.97rem}
.del-input:focus{outline:none; border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg)}
.danger-zone .pw-wrap{max-width:380px}
.del-check{font-size:.9rem; color:var(--text); margin:0 0 1rem; max-width:60ch}
.del-check input{accent-color:var(--danger)}
.btn:disabled,.btn-danger:disabled,.btn-ghost:disabled,.btn-outline:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
.modal{background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--radius-sm); padding:1rem; margin-top:1rem}

/* ---------- Legal ---------- */
.legal{max-width:760px}
.legal h2{margin-top:1.8rem}
.legal-list{padding-left:1.2rem}
.legal-list li{margin:.4rem 0}
.legal-note{color:var(--muted); font-size:.88rem; border-left:3px solid var(--line-2); padding-left:1rem; margin:1.2rem 0}
.back{display:inline-block; margin-bottom:1rem; color:var(--muted); font-weight:500}
.kv b{color:var(--ink)}

/* ---------- Contenido SEO / FAQ ---------- */
.seo-content{margin-top:clamp(3.5rem,7vw,5.5rem); padding-top:clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--line)}
.seo-content h2{font-size:1.6rem; margin-top:2rem}
.seo-content h3{font-size:1.1rem; margin-top:1.4rem}
.seo-content p{color:var(--muted); max-width:70ch}
.cols2 .seo-block{margin-bottom:1rem}
.faq{display:grid; gap:.7rem; margin-top:1rem}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0; overflow:hidden; box-shadow:var(--shadow-sm)}
.faq-item summary{cursor:pointer; padding:1rem 1.2rem; font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-family:var(--mono); color:var(--brand); font-size:1.2rem; transition:transform .2s}
.faq-item[open] summary::after{content:"−"}
.faq-item .faq-body,.faq-item p{padding:0 1.2rem 1.1rem; margin:0; color:var(--muted); max-width:none}

/* ---------- Footer (banda marino) ---------- */
.foot{background:var(--navy); color:rgba(255,255,255,.66); margin-top:4rem; position:relative; z-index:1}
.foot::before{content:""; display:block; height:3px; background:var(--grad)}
.foot-grid{max-width:1080px; margin:0 auto; padding:3rem clamp(1.1rem,4vw,2rem) 1.5rem; display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:2rem}
.foot-brand .brand-word{color:#fff}
.foot-desc{color:rgba(255,255,255,.55); font-size:.9rem; line-height:1.7; margin:.9rem 0 0; max-width:44ch}
.foot-col h4{color:rgba(255,255,255,.42); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 1rem; font-family:var(--display)}
.foot-col a{display:block; color:rgba(255,255,255,.66); font-size:.9rem; padding:.32rem 0}
.foot-col a:hover{color:#fff}
.foot-bottom{max-width:1080px; margin:0 auto; padding:1.3rem clamp(1.1rem,4vw,2rem); border-top:1px solid rgba(255,255,255,.10); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.84rem; color:rgba(255,255,255,.5)}
.foot-bottom a{color:rgba(255,255,255,.6)}
.foot-bottom a:hover{color:#fff}
.made-in{display:inline-flex; align-items:center; gap:.45rem; color:rgba(255,255,255,.7); font-weight:500}
.cl-flag{border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.18); display:inline-block; vertical-align:middle}

/* ---------- Banner de cookies ---------- */
.cookie-banner{position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); width:min(640px,92vw); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:1rem 1.2rem; display:flex; align-items:center; gap:1rem; z-index:200}
.cookie-banner p{margin:0; font-size:.86rem; color:var(--muted)}
.cookie-banner .btn{flex-shrink:0; padding:.6rem 1.1rem}

/* ---------- 404 ---------- */
.big-404{font-family:var(--display); font-weight:800; font-size:clamp(4rem,16vw,8rem); line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .auth-card{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .nav-links{gap:.8rem; font-size:.86rem}
  .who{display:none}
  .plan-grid,.cols2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .shorten-row{flex-direction:column}
  .shorten-row .btn{width:100%}
}

/* ---- Panel admin: pestañas y formularios de ajustes ---- */
/* ---- Cabecera del panel ---- */
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.admin-head .admin-title{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--ink);margin:0;line-height:1.1}
.admin-head .admin-sub{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}

/* ---- Disposición con menú lateral ---- */
.admin-layout{display:grid; grid-template-columns:210px 1fr; gap:1.4rem; align-items:start}
.admin-main{min-width:0}
.admin-side{position:sticky; top:5rem; display:flex; flex-direction:column; gap:.25rem; padding:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.admin-side a{display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; border-radius:10px; font-weight:600; font-size:.92rem; color:var(--muted); text-decoration:none; transition:background .15s,color .15s}
.admin-side a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.admin-side a.on{background:var(--grad); color:#fff}
@media (max-width:760px){
  .admin-layout{grid-template-columns:1fr; gap:1rem}
  .admin-side{position:static; top:auto; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
  .admin-side a{flex:0 0 auto; white-space:nowrap}
}

/* ---- Formularios de ajustes ---- */
.settings-form{max-width:760px}
.set-field{margin-bottom:1.1rem}
.set-field>label{display:block;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.set-field input[type=text],.set-field input[type=number],.set-field textarea{width:100%}
.set-field textarea{resize:vertical;line-height:1.5}
.set-check{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink)}
.set-check input{width:auto}
.set-help{margin:.3rem 0 0}

/* ---- Espacios publicitarios ---- */
.ad-slot{margin:1.6rem auto;text-align:center;max-width:980px}
.ad-slot .ad-label{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#98a1b6;margin-bottom:.35rem}
.ad-slot ins,.ad-slot iframe{max-width:100%}
.ad-slot-footer{margin:2.2rem auto .4rem}
.ad-slot-dash{margin:.4rem auto 1.4rem}
.ad-img{display:inline-block;line-height:0}
.ad-img img{max-width:100%;height:auto;border-radius:12px;display:block}
.adz{border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin:0 0 1rem}
.adz-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.adz-title{margin:0;font-size:1.05rem}
.adz-clicks{font-size:.82rem;font-weight:600;color:var(--brand);background:rgba(27,110,243,.1);border-radius:999px;padding:.18rem .6rem;white-space:nowrap}
.adz-types{display:flex;gap:1.1rem;flex-wrap:wrap;margin:.2rem 0 .7rem}
.adz-radio{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;cursor:pointer}
.adz-panel{display:grid;gap:.4rem}
.adz-panel[hidden]{display:none}
.adz-preview{margin:.2rem 0}
.adz-preview img{max-width:280px;max-height:120px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:6px}

/* ---- Banner de consentimiento de publicidad ---- */
.consent-banner .consent-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---- Código QR ---- */
.qr-modal{border:none;border-radius:14px;padding:0;max-width:340px;box-shadow:0 20px 60px rgba(10,19,48,.25)}
.qr-modal::backdrop{background:rgba(10,19,48,.45)}
.qr-box{padding:1.5rem;text-align:center;position:relative;background:var(--surface);border-radius:14px}
.qr-close{position:absolute;top:.5rem;right:.7rem;border:none;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#5f6b85}
.qr-img img{width:220px;height:220px;image-rendering:pixelated}
.qr-url{font-size:.8rem;word-break:break-all;margin:.5rem 0 1rem;color:#5f6b85}

/* ---- Header CTA (visitante anónimo) ---- */
.nav-auth{background:none;border:none;cursor:pointer;color:var(--muted);font-weight:600;font-size:.92rem;font-family:var(--sans);padding:.4rem .3rem}
.nav-auth:hover{color:var(--ink)}
.nav-links .btn-shine{padding:.55rem 1.25rem;font-size:.92rem}

/* Botón "Registro" con efecto de brillo que llama la atención */
.btn-shine{position:relative;overflow:hidden;isolation:isolate;animation:shineGlow 2.8s ease-in-out infinite}
.btn-shine::after{content:"";position:absolute;top:0;left:-140%;width:65%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:shineSweep 2.8s ease-in-out infinite;pointer-events:none}
@keyframes shineSweep{0%{left:-140%}55%{left:140%}100%{left:140%}}
@keyframes shineGlow{0%,100%{box-shadow:0 6px 16px -7px rgba(27,110,243,.45)}50%{box-shadow:0 9px 22px -7px rgba(90,46,224,.55)}}
@media (prefers-reduced-motion:reduce){.btn-shine,.btn-shine::after{animation:none}}

/* ---- Hero centrado ---- */
.hero-center{display:block;text-align:center}
.hero-center .hero-main{max-width:660px;margin:0 auto;padding-top:clamp(1rem,5vw,3rem)}
.hero-center .display{font-size:clamp(2.7rem,6vw,4.1rem)}
.hero-center .lead{margin-inline:auto}
.hero-center .shorten-card{max-width:740px;margin:1.6rem auto 0;text-align:left}
.hero-center .result-card{max-width:600px;margin:1.4rem auto 0;text-align:left}
.hero-center .ticks{display:grid; grid-template-columns:repeat(2,auto); gap:.9rem 2.4rem; justify-content:center; margin:2rem auto 0; text-align:left; justify-items:start}
@media (max-width:560px){ .hero-center .ticks{grid-template-columns:1fr; justify-content:start; max-width:24rem} }

/* ---- Popup de acceso (login/registro) ---- */
.auth-modal{border:none;border-radius:18px;padding:0;width:min(420px,92vw);background:transparent;
  box-shadow:0 30px 80px -20px rgba(10,19,48,.45)}
.auth-modal::backdrop{background:rgba(10,19,48,.5);backdrop-filter:blur(3px)}
.auth-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.5rem 1.7rem;position:relative}
.auth-close{position:absolute;top:.5rem;right:.8rem;border:none;background:none;font-size:1.8rem;line-height:1;color:var(--muted);cursor:pointer}
.auth-close:hover{color:var(--ink)}
.auth-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink)}
.auth-brand img{display:block}
.auth-tabs{margin-bottom:1.1rem}
.auth-tabs .tab{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--sans)}
.auth-tabs .tab.on{border-bottom-color:var(--brand)}
.auth-intro{margin:.1rem 0 1rem}
.auth-foot{margin-top:.9rem;text-align:center}

/* ---- Intro SEO centrada ---- */
.seo-intro{max-width:660px;margin:0 auto 2.4rem;text-align:center}
.seo-intro p{margin-inline:auto}

/* ---- Panel: tarjetas de estadísticas ---- */
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.6rem}
.dstat{display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.2rem;box-shadow:var(--shadow-sm)}
.dstat-ico{flex-shrink:0;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line)}
.dstat-ico svg{width:23px;height:23px}
.dstat-img{width:30px;height:30px;display:block}
.dstat-body{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.dstat-num{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--ink);letter-spacing:-.02em}
.dstat-lbl{font-size:.85rem;color:var(--muted);margin-top:.25rem}
.dstat-cap{color:var(--muted-2)}
.dstat-num.plan-premium{color:var(--ok)}
.dstat-premium{border-color:color-mix(in srgb,var(--brand-2) 35%,var(--line));background:color-mix(in srgb,var(--brand-2) 6%,var(--surface))}
.dstat-premium .dstat-ico{background:var(--surface-2);border-color:color-mix(in srgb,var(--brand-2) 25%,var(--line))}

/* ---- Filtro de enlaces ---- */
.link-filter{width:100%;max-width:340px;margin-bottom:1.1rem;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.62rem .9rem;font-size:.95rem;color:var(--ink);font-family:var(--sans)}
.link-filter::placeholder{color:var(--muted-2)}
.link-filter:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(27,110,243,.12)}

/* ---- Tabla de enlaces (rediseño) ---- */
.links-tbl{width:100%;border-collapse:separate;border-spacing:0}
.links-tbl thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);font-weight:700;text-align:left;padding:.3rem .8rem .7rem}
.links-tbl tbody td{padding:.8rem;border-top:1px solid var(--line);vertical-align:middle}
.links-tbl tbody tr{transition:background .12s}
.links-tbl tbody tr:hover{background:var(--surface-2)}
.links-tbl tr.row-off{opacity:.55}
.code-line{display:flex;align-items:center;gap:.45rem}
.code-chip{font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--brand);background:rgba(27,110,243,.09);padding:.28rem .55rem;border-radius:8px;text-decoration:none;white-space:nowrap}
.code-chip:hover{background:rgba(27,110,243,.17);text-decoration:none}
.cell-code .sub{font-size:.8rem;color:var(--muted);margin-top:.35rem}
.dest{max-width:320px}
.dest a{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);max-width:100%}
.dest a:hover{color:var(--brand);text-decoration:none}
.dest-ic{flex-shrink:0;color:var(--muted-2)}
.dest-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links-tbl .num{font-weight:700;color:var(--ink);text-align:left}
.ic{width:18px;height:18px;display:block;stroke:currentColor;fill:none}

/* Botones de icono (acciones de fila) */
.action-row{display:flex;align-items:center;gap:.35rem;justify-content:flex-end}
.action-row form.inline{margin:0;display:inline-flex}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);cursor:pointer;padding:0;transition:color .12s,border-color .12s,background .12s;text-decoration:none}
.icon-btn:hover{color:var(--brand);border-color:var(--brand);background:rgba(27,110,243,.06);text-decoration:none}
.icon-btn.icon-danger:hover{color:var(--danger);border-color:#F0C2C7;background:var(--danger-bg)}
.copy-btn.copied{color:var(--ok);border-color:var(--ok)}

@media (max-width:760px){
  .dash-stats{grid-template-columns:1fr}
  .dest{max-width:150px}
  .links-tbl thead{display:none}
}

/* ---- Mi cuenta ---- */
.account-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.acc-id{display:flex;align-items:center;gap:1rem;min-width:0}
.acc-avatar{flex-shrink:0;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.6rem}
.acc-meta{min-width:0}
.acc-email{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ink);margin:0;word-break:break-all;line-height:1.1}
.acc-sub{margin:.3rem 0 0}
.acc-ok{color:var(--ok);font-weight:600}
.acc-warn{color:var(--warn);font-weight:600}
.plan-pill{flex-shrink:0;font-weight:700;font-size:.85rem;padding:.4rem .9rem;border-radius:999px;white-space:nowrap}
.plan-pill-free{background:var(--surface-2);color:var(--muted);border:1px solid var(--line-2)}
.plan-pill-premium{background:color-mix(in srgb,var(--brand-2) 12%,transparent);color:var(--brand-2);border:1px solid color-mix(in srgb,var(--brand-2) 35%,var(--line))}
.section-title{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--ink);margin:1.8rem 0 .9rem}
.dash-stats-4{grid-template-columns:repeat(4,1fr)}
.top-link{margin:.3rem 0 0}
.top-link .code-chip{font-size:.82rem;padding:.16rem .45rem}
.mem-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.mem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1.4rem}
.mem-item{display:flex;justify-content:space-between;gap:1rem;padding:.72rem .1rem;border-top:1px solid var(--line)}
.mem-k{color:var(--muted)}
.mem-v{color:var(--ink);font-weight:600;text-align:right}
.mem-upsell{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;padding:1rem 1.1rem;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--brand-2) 6%,var(--surface-2));border:1px solid color-mix(in srgb,var(--brand-2) 25%,var(--line))}
.mem-upsell .btn{flex-shrink:0}
@media (max-width:760px){
  .dash-stats-4{grid-template-columns:repeat(2,1fr)}
  .mem-grid{grid-template-columns:1fr}
}

/* ---- Estadísticas (stats.php) ---- */
.stats-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sh-main{min-width:0}
.code-chip-lg{font-size:1.1rem;padding:.38rem .75rem}
.stats-head .code-line{gap:.5rem}
.sh-title{font-weight:600;color:var(--ink);margin:.7rem 0 .1rem}
.dest-line{margin:.55rem 0 0;word-break:break-all}
.dest-line a{color:var(--muted)}
.dest-line a:hover{color:var(--brand);text-decoration:none}
.sh-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;flex-shrink:0}
.chart-card .h2{margin-bottom:1.1rem}
.chart-svg{width:100%;height:auto;aspect-ratio:720/240;display:block}
.ref-list{display:grid;gap:.95rem}
.ref-row{display:grid;gap:.4rem}
.ref-top{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem}
.ref-host{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-n{color:var(--muted);font-weight:700;flex-shrink:0}
.ref-track{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.ref-bar{height:100%;border-radius:999px;background:var(--grad)}
.recent-list{list-style:none;margin:0;padding:0;display:grid}
.recent-row{display:flex;align-items:center;gap:.7rem;padding:.62rem 0;border-top:1px solid var(--line)}
.recent-row:first-child{border-top:none}
.recent-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex-shrink:0}
.recent-host{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.recent-when{flex-shrink:0}

/* ---- Tooltips propios (data-tip) ---- */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:#fff; font-size:.72rem; font-weight:600;
  font-family:var(--sans); line-height:1.2; white-space:nowrap;
  padding:.34rem .55rem; border-radius:7px; letter-spacing:.01em;
  box-shadow:0 6px 18px -6px rgba(10,19,48,.45);
  opacity:0; pointer-events:none; z-index:70;
  transition:opacity .12s ease, transform .12s ease;
}
[data-tip]::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 4px);
  transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ink);
  opacity:0; pointer-events:none; z-index:70; transition:opacity .12s ease;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1; transform:translateX(-50%) translateY(0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1}
@media (prefers-reduced-motion:reduce){
  [data-tip]::after{transition:none}
}

/* ---- Iconos: Material Symbols teñidos con el degradado de marca ---- */
.msym{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle;background:var(--grad);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ic-link{-webkit-mask-image:url(../icons/link.svg);mask-image:url(../icons/link.svg)}
.ic-click{-webkit-mask-image:url(../icons/click.svg);mask-image:url(../icons/click.svg)}
.ic-star{-webkit-mask-image:url(../icons/star.svg);mask-image:url(../icons/star.svg)}
.ic-check{-webkit-mask-image:url(../icons/check.svg);mask-image:url(../icons/check.svg)}
.ic-trend{-webkit-mask-image:url(../icons/trend.svg);mask-image:url(../icons/trend.svg)}
.ic-cal7{-webkit-mask-image:url(../icons/cal7.svg);mask-image:url(../icons/cal7.svg)}
.ic-cal30{-webkit-mask-image:url(../icons/cal30.svg);mask-image:url(../icons/cal30.svg)}
.ic-copy{-webkit-mask-image:url(../icons/copy.svg);mask-image:url(../icons/copy.svg)}
.ic-qr{-webkit-mask-image:url(../icons/qr.svg);mask-image:url(../icons/qr.svg)}
.ic-edit{-webkit-mask-image:url(../icons/edit.svg);mask-image:url(../icons/edit.svg)}
.ic-pause{-webkit-mask-image:url(../icons/pause.svg);mask-image:url(../icons/pause.svg)}
.ic-play{-webkit-mask-image:url(../icons/play.svg);mask-image:url(../icons/play.svg)}
.ic-trash{-webkit-mask-image:url(../icons/trash.svg);mask-image:url(../icons/trash.svg)}
.ic-chart{-webkit-mask-image:url(../icons/chart.svg);mask-image:url(../icons/chart.svg)}
.ic-globe{-webkit-mask-image:url(../icons/globe.svg);mask-image:url(../icons/globe.svg)}
.dstat-ico .msym{width:28px;height:28px}
.icon-btn .msym{width:20px;height:20px}
.dest-ic.msym{width:16px;height:16px}
.icon-btn.icon-danger:hover .msym{background:var(--danger)}
.ic-moon{-webkit-mask-image:url(../icons/moon.svg);mask-image:url(../icons/moon.svg)}
.ic-sun{-webkit-mask-image:url(../icons/sun.svg);mask-image:url(../icons/sun.svg)}
.ic-share{-webkit-mask-image:url(../icons/share.svg);mask-image:url(../icons/share.svg)}
.ic-eye{-webkit-mask-image:url(../icons/eye.svg);mask-image:url(../icons/eye.svg)}
.ic-eye-off{-webkit-mask-image:url(../icons/eye_off.svg);mask-image:url(../icons/eye_off.svg)}
.ic-inbox{-webkit-mask-image:url(../icons/inbox.svg);mask-image:url(../icons/inbox.svg)}

/* ============================================================
   Mejoras UI: tema oscuro, controles, toasts, carga, móvil, a11y
   ============================================================ */

/* ---- Tema oscuro ---- */
html[data-theme="dark"]{
  --bg:#0A1020; --surface:#121A2E; --surface-2:#0E1626; --surface-3:#1B2540;
  --ink:#ECF1FB; --text:#C3CDE0; --muted:#8B96AE; --muted-2:#5F6B86;
  --line:#22304C; --line-2:#2C3B59;
  --nav-bg:rgba(10,16,32,.82);
  --ok-bg:#0F2C24; --danger-bg:#3A1620; --warn-bg:#352712;
  --gold:#F1C453;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 8px rgba(0,0,0,.35), 0 18px 40px -22px rgba(0,0,0,.7);
  --shadow-lg:0 36px 70px -28px rgba(0,0,0,.8);
}
html[data-theme="dark"] .grain{
  background:
    radial-gradient(900px 600px at 100% -5%, rgba(13,163,242,.16), transparent 55%),
    radial-gradient(900px 640px at -5% 105%, rgba(90,46,224,.18), transparent 55%);
}
html[data-theme="dark"] .net{opacity:.82}
html[data-theme="dark"] .brand-mark{filter:none}

/* ---- Controles del header: tema + hamburguesa ---- */
.nav-tools{display:flex; align-items:center; gap:.5rem}
.theme-toggle{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line); cursor:pointer; padding:0; color:inherit}
.theme-toggle:hover{border-color:var(--line-2)}
.theme-toggle .msym{width:20px; height:20px}
.theme-toggle .th-sun{display:none}
html[data-theme="dark"] .theme-toggle .th-moon{display:none}
html[data-theme="dark"] .theme-toggle .th-sun{display:block}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:4px; width:40px; height:38px;
  border-radius:10px; background:var(--surface-2); border:1px solid var(--line); cursor:pointer; padding:0 10px}
.nav-toggle span{display:block; height:2px; border-radius:2px; background:var(--ink); transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- Skip link ---- */
.skip-link{position:absolute; left:50%; top:-60px; transform:translateX(-50%); z-index:200;
  background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:0 0 10px 10px; font-weight:600; font-size:.9rem;
  transition:top .15s}
.skip-link:focus{top:0; text-decoration:none}

/* ---- Foco accesible ---- */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.btn:focus-visible,.icon-btn:focus-visible,.theme-toggle:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ---- Toasts ---- */
.toasts{position:fixed; top:14px; right:14px; z-index:300; display:flex; flex-direction:column; gap:.6rem;
  max-width:min(360px,calc(100vw - 28px)); pointer-events:none}
.toast{pointer-events:auto; display:flex; align-items:flex-start; gap:.6rem;
  background:var(--surface); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:12px; padding:.8rem .95rem; box-shadow:var(--shadow); font-size:.92rem; line-height:1.4;
  transform:translateX(120%); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s}
.toast.show{transform:translateX(0); opacity:1}
.toast.hide{transform:translateX(120%); opacity:0}
.toast-ok{border-left-color:var(--ok)} .toast-err{border-left-color:var(--danger)}
.toast-warn{border-left-color:var(--warn)} .toast-info{border-left-color:var(--brand)}
.toast b{color:var(--ink); font-weight:700}
@media (prefers-reduced-motion:reduce){ .toast{transition:opacity .2s} .toast.show{transform:none} .toast.hide{transform:none} }

/* ---- Estado de carga en botones ---- */
.btn.is-loading{position:relative; color:transparent !important; pointer-events:none}
.btn.is-loading::after{content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite}
.btn-ghost.is-loading::after,.btn-outline.is-loading::after{border-color:rgba(27,110,243,.35); border-top-color:var(--brand)}
.icon-btn.is-loading{pointer-events:none; opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .btn.is-loading::after{animation:none} }

/* ---- Mostrar/ocultar contraseña ---- */
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:2.8rem !important; width:100%}
.pw-eye{position:absolute; top:0; right:0; height:100%; width:2.6rem; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; padding:0}
.pw-eye .msym{width:20px; height:20px; background:var(--muted)}
.pw-eye:hover .msym{background:var(--brand)}

/* ---- Estado vacío ---- */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:2.6rem 1rem}
.empty-ico{width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line)}
.empty-ico .msym{width:34px; height:34px}
.empty h3{margin:0; font-size:1.15rem}
.empty p{margin:0; color:var(--muted); max-width:42ch}

/* ---- Selector de rango (stats) ---- */
.range-tabs{display:inline-flex; gap:.25rem; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:.25rem}
.range-tabs a{padding:.32rem .8rem; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--muted); text-decoration:none}
.range-tabs a.on{background:var(--grad); color:#fff}

/* ---- Menú móvil + tabla en tarjetas ---- */
@media (max-width:760px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute; top:calc(100% + 1px); right:0; left:0;
    flex-direction:column; align-items:stretch; gap:.35rem;
    background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    padding:.7rem clamp(1.1rem,4vw,2rem) .9rem; display:none}
  .nav-links.open{display:flex}
  .nav-links a,.nav-links .nav-auth,.nav-links .btn{
    width:100%; text-align:left; font-size:1.1rem; font-weight:600;
    padding:.85rem .35rem; border-radius:10px; line-height:1.2}
  .nav-links a:active,.nav-links .nav-auth:active{background:color-mix(in srgb,var(--ink) 7%,transparent)}
  .nav-links .who{order:-1; padding:.3rem 0; border-bottom:1px solid var(--line); margin-bottom:.2rem}
  .nav-inner{position:relative; flex-wrap:wrap}

  /* Tabla de enlaces -> tarjetas apiladas */
  table.links-tbl thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  table.links-tbl, table.links-tbl tbody, table.links-tbl tr, table.links-tbl td{display:block; width:100%}
  table.links-tbl tr{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.7rem .9rem; margin-bottom:.8rem; box-shadow:var(--shadow-sm)}
  table.links-tbl td{border:0 !important; padding:.32rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem}
  table.links-tbl td::before{content:attr(data-label); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; flex:none}
  table.links-tbl td[data-label=""]::before{content:""}
  table.links-tbl .dest{max-width:none; text-align:right}
  table.links-tbl .action-row{justify-content:flex-end; width:100%}
  table.links-tbl td.cell-actions{justify-content:flex-end}
}

/* ---- QR modal: canvas, acciones, compartir ---- */
.qr-img canvas.qr-canvas{width:208px; height:208px; max-width:100%; image-rendering:pixelated; border-radius:10px; border:1px solid var(--line); background:#fff}
.qr-actions{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.4rem}
.btn-outline{background:var(--surface); color:var(--ink); border:1px solid var(--line-2); display:inline-flex; align-items:center; gap:.45rem}
.btn-outline:hover{border-color:var(--brand); color:var(--brand); text-decoration:none}
.btn-outline .msym{width:18px; height:18px}
.btn-outline:hover .msym{background:var(--brand)}
.result-share{display:inline-flex; align-items:center; gap:.35rem}
.result-share .msym{width:16px; height:16px}

/* El botón con brillo usa ::after; al cargar, ese pseudo pasa a ser el spinner */
.btn-shine.is-loading{animation:none}
.btn-shine.is-loading::after{
  left:0; right:0; top:0; bottom:0; margin:auto; width:18px; height:18px;
  background:none; border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite}
@media (prefers-reduced-motion:reduce){ .btn-shine.is-loading::after{animation:none} }

/* ---- Premium en dorado ---- */
.plan-premium{color:var(--gold)}
.dstat-num.plan-premium{color:var(--gold)}
.dstat-premium{border-color:color-mix(in srgb,var(--gold) 42%,var(--line)); background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.dstat-premium .dstat-ico{background:var(--surface-2); border-color:color-mix(in srgb,var(--gold) 34%,var(--line))}
.dstat-premium .dstat-ico .msym{background:var(--grad-gold)}
.plan-pill-premium{background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line))}

/* ---- Tarjeta "enlace más visto" (cuenta) ---- */
.top-card{display:flex; align-items:center; gap:.85rem}
.top-ico{flex-shrink:0; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line)}
.top-ico .msym{width:22px; height:22px}
.top-card .top-link{margin:0; color:var(--text)}

/* ---- Página guía: pasos ---- */
.guide-steps{margin:0; padding-left:1.4rem; display:grid; gap:.65rem; color:var(--text)}
.guide-steps li{padding-left:.2rem; line-height:1.55}
.ticks-block{margin-top:.4rem}

/* ---- Saltos de ancla por debajo del header fijo ---- */
:where([id]){scroll-margin-top:5rem}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ---- Tabla de usuarios (admin): compacta y legible ---- */
.nowrap{white-space:nowrap}
.badge-premium{color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent); border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line))}
.tbl-users{min-width:1040px}
.tbl-users td{padding:.7rem .9rem; vertical-align:middle}
.tbl-users tbody tr:nth-child(even){background:var(--surface-2)}
.tbl-users td.actions{min-width:250px}
.tbl-users .actions{gap:.3rem}
.tbl-users .sub{margin-top:.25rem}

/* ---- Mejor visibilidad de las tablas del panel ---- */
.admin-main .tbl tbody tr{transition:background .12s}
.admin-main .tbl tbody tr:hover{background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.tbl-users td:first-child{font-weight:600; color:var(--ink); word-break:break-word}
.tbl-users td.actions{min-width:260px}

/* ---- Ficha de usuario (panel admin) ---- */
.urow{cursor:pointer}
.urow:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.um-go{color:var(--brand); font-weight:600; white-space:nowrap; text-align:right; font-size:.85rem}
.btn-sm{padding:.5rem .9rem; font-size:.85rem}
dialog.umodal{border:1px solid var(--line); border-radius:var(--radius); padding:0; width:min(440px,92vw); max-height:90vh; overflow:auto; background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg)}
dialog.umodal::backdrop{background:rgba(10,19,48,.5)}
.um-inner{padding:1.3rem 1.4rem}
.um-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem}
.um-head h3{margin:0; font-size:1.15rem; word-break:break-word}
.um-chips{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.55rem}
.um-stats{color:var(--muted); font-size:.85rem; margin:.8rem 0 .2rem}
.um-section{padding:.85rem 0; border-top:1px solid var(--line)}
.um-section h4{margin:0 0 .55rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); font-weight:700}
.um-danger h4{color:var(--danger)}
.um-close{background:none; border:0; font-size:1.2rem; line-height:1; color:var(--muted); cursor:pointer; padding:.15rem .35rem; border-radius:8px}
.um-close:hover{color:var(--ink); background:var(--surface-2)}
.um-pw{display:flex; gap:.5rem; align-items:center}
.um-pw input{flex:1; min-width:0}

/* ---- Botón "Instalar app" (PWA) ---- */
.foot-bottom-actions{display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; width:100%}
.install-btn{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans); font-weight:600; font-size:.84rem; color:#fff; background:var(--grad); border:0; border-radius:999px; padding:.45rem .95rem; cursor:pointer; box-shadow:0 6px 16px -8px rgba(27,110,243,.5); transition:transform .15s, box-shadow .2s}
.install-btn::before{content:"⤓"; font-size:.95rem; line-height:1}
.install-btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(27,110,243,.55)}

/* ===== Títulos de sección llamativos (index / landing) ===== */
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 .6rem}
.eyebrow::before{content:""; width:1.7rem; height:.2rem; border-radius:999px; background:var(--grad); flex:none}
.eyebrow.center{display:flex; justify-content:center}
.eyebrow.center::before{display:none}
.section-title{font-family:var(--display); font-weight:800; font-size:clamp(1.95rem,4.4vw,2.9rem); line-height:1.04; letter-spacing:-.03em; color:var(--ink); margin:0 0 .45rem}
.section-title .accent{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Sufijo "tree" de la marca en la sección Zupptree */
.brand-tree{background:linear-gradient(120deg,#0DA3F2,#22d3ee 60%,#34d399); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-beta{align-self:flex-start; margin-left:-.32rem; margin-top:.05rem; font-family:var(--logo); font-weight:800; font-size:.52rem; line-height:1; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:linear-gradient(120deg,#0DA3F2,#5A2EE0); padding:2px 5px; border-radius:999px}

/* Canje de código promocional (cuenta) */
.mem-redeem{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(127,127,127,.2); }
.redeem-lbl{ display:block; font-weight:600; margin-bottom:8px; }
.redeem-row{ display:flex; gap:8px; }
.redeem-row input{ flex:1; min-width:0; padding:11px 13px; border-radius:10px; border:1px solid rgba(127,127,127,.35); font:inherit; }
@media (max-width:520px){ .redeem-row{ flex-direction:column; } }

/* Formulario de códigos promo (admin) */
.promo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:12px; margin:.6rem 0 1rem; }
.promo-grid label{ display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:.9rem; }
.promo-grid input, .promo-grid select{ padding:10px 12px; border-radius:10px; border:1px solid rgba(127,127,127,.35); font:inherit; }

/* Programa de referidos (cuenta) */
.mem-refer{ margin-top:14px; padding:16px; border:1px solid rgba(127,127,127,.2); border-radius:14px; background:rgba(127,127,127,.04); }
.refer-title{ font-weight:700; font-size:1.02rem; margin-bottom:2px; }
.refer-desc{ margin:.2rem 0 .8rem; }
.refer-row{ display:flex; gap:8px; margin-bottom:12px; }
.refer-row input{ flex:1; min-width:0; padding:11px 13px; border-radius:10px; border:1px solid rgba(127,127,127,.35); font:inherit; background:var(--surface,#fff); color:inherit; }
.refer-bar{ height:8px; border-radius:999px; background:rgba(127,127,127,.2); overflow:hidden; }
.refer-bar span{ display:block; height:100%; background:linear-gradient(90deg,#0DA3F2,#5A2EE0); border-radius:999px; transition:width .4s; }
.refer-count{ margin-top:6px; }
@media (max-width:520px){ .refer-row{ flex-direction:column; } }

/* Selector "¿Qué quieres hacer hoy?" (dashboard) */
.dash-choose{ max-width:860px; margin:32px auto; text-align:center; }
.choose-title{ font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 6px; }
.choose-sub{ color:var(--muted); margin:0 0 26px; }
.choose-cards{ display:flex; flex-wrap:wrap; gap:18px; }
.choose-card{ flex:1 1 0; min-width:240px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:8px;
  padding:26px; border-radius:20px; border:1px solid var(--line-2,rgba(127,127,127,.25));
  background:var(--surface,#fff); cursor:pointer; font:inherit; color:inherit;
  box-shadow:var(--shadow-sm); transition:transform .16s, box-shadow .16s, border-color .16s; }
.choose-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(27,110,243,.18); border-color:#1B6EF3; }
.choose-card-tree:hover{ border-color:#5A2EE0; box-shadow:0 14px 34px rgba(90,46,224,.2); }
.choose-ic{ font-size:2.4rem; line-height:1; }
.choose-h{ font-size:1.25rem; font-weight:800; }
.choose-d{ color:var(--muted); font-size:.95rem; line-height:1.5; }
.choose-go{ margin-top:auto; font-weight:700; color:#1B6EF3; padding-top:8px; }
.choose-card-tree .choose-go{ color:#5A2EE0; }
.choose-remember{ flex-basis:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; color:var(--muted); cursor:pointer; }
.choose-remember input{ width:18px; height:18px; }
@media (max-width:640px){ .choose-card{ flex-basis:100%; } }

/* Ícono de marca en el menú */
.nav-ico{ vertical-align:middle; border-radius:5px; margin-right:3px; }

/* Compartir referido */
.refer-share{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.refer-sh{ flex:1; min-width:90px; text-align:center; padding:9px 10px; border-radius:10px; font-weight:700; font-size:.85rem; text-decoration:none; color:#fff; }
.refer-sh:hover{ opacity:.92; text-decoration:none; }
.refer-wa{ background:#25D366; } .refer-tg{ background:#229ED9; } .refer-x{ background:#111; }

/* Onboarding (bienvenida primera vez) */
.onb{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(13,163,242,.10),rgba(90,46,224,.10)); border:1px solid var(--line-2);
  border-radius:16px; padding:16px 18px; margin-bottom:18px; }
.onb-body{ flex:1; min-width:240px; } .onb-body b{ font-size:1.05rem; } .onb-body p{ margin:.3rem 0 0; color:var(--text); }
.onb-x{ flex:none; }

/* Herramientas de la tabla de promos (admin) */
.promo-tools{ display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.promo-search{ flex:1; min-width:200px; padding:10px 13px; border-radius:10px; border:1px solid var(--line-2); font:inherit; }

/* Badge de confianza (pie) */
.trust-badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600; color:var(--muted);
  background:var(--surface-2,rgba(127,127,127,.08)); border:1px solid var(--line-2); border-radius:999px; padding:.25rem .7rem; }

/* Página de estado */
.status-banner{ font-weight:800; font-size:1.1rem; padding:14px 18px; border-radius:14px; margin:.5rem 0 1.2rem; }
.status-banner.is-ok{ background:rgba(22,163,74,.12); color:#15803d; }
.status-banner.is-bad{ background:rgba(220,38,38,.12); color:#b91c1c; }
.status-list{ list-style:none; padding:0; margin:0; }
.status-list li{ display:flex; justify-content:space-between; align-items:center; padding:13px 2px; border-bottom:1px solid var(--line); }
.status-pill{ font-size:.8rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; }
.status-pill.is-ok{ background:rgba(22,163,74,.14); color:#15803d; }
.status-pill.is-bad{ background:rgba(220,38,38,.14); color:#b91c1c; }

/* Icono de marca dentro de la tarjeta del selector */
.choose-ic img{ display:block; width:40px; height:40px; border-radius:9px; }

/* ── Rediseño del hero (marca) + sección acortador ── */
html{ scroll-behavior:smooth; }
.hero-badge{ margin-bottom:.9rem; }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:.2rem; }
.hero-cta .btn, .hero-cta .btn-ghost{ padding:.85rem 1.5rem; font-size:1.02rem; }
@media(max-width:560px){ .hero-cta{ flex-direction:column; } .hero-cta .btn, .hero-cta .btn-ghost{ width:100%; text-align:center; } }
.shortener{ max-width:740px; margin:clamp(2.4rem,6vw,3.6rem) auto 0; padding:0 16px; scroll-margin-top:80px; }
.shortener-title{ text-align:center; margin-bottom:1.2rem; }