/* =====================================================================
   DIDACUS CLUB · Estilos de las pantallas del cliente
   (misma marca que didacusnfc.com; --acento cambia con cada negocio)
   ===================================================================== */
:root{
  --ink:#0d0e11; --panel:#15171c; --panel-2:#1b1e25; --line:#2a2e37; --line-2:#3a3f4b;
  --fg:#f3f2ef; --muted:#9ea2ad; --ok:#43a862; --mal:#e5574e;
  --acento:#5b84f1; --sobre:#ffffff;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Helvetica Neue",Arial,system-ui,sans-serif;
  --r:18px; --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;background:var(--ink);color:var(--fg);
  font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{   /* resplandor con el color del negocio */
  content:"";position:fixed;inset:-20% -30% auto;height:70vh;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acento) 38%,transparent),transparent);
}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);line-height:1.1;margin:0;letter-spacing:-.02em}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:8px}

.pagina{width:min(480px,100% - 32px);margin-inline:auto;padding:22px 0 calc(110px + env(safe-area-inset-bottom))}
.pagina.sin-nav{padding-bottom:48px}
.muted{color:var(--muted)}
.chico{font-size:13.5px}

.marca{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:34px;text-decoration:none}
.marca b{color:var(--fg);font-weight:700}

/* ------------------------------ Botones ------------------------------ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:0 20px;
  border:1px solid transparent;border-radius:999px;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;
  background:var(--acento);color:var(--sobre);transition:transform .2s var(--ease),filter .2s;
}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn.suave{background:var(--panel-2);color:var(--fg);border-color:var(--line-2)}
.btn.wallet{background:#000;color:#fff;border-color:#a6a6a6;margin-top:14px}
.btn.chico-b{min-height:42px;font-size:14.5px;width:auto;padding:0 16px}

/* ----------------------------- Formulario ----------------------------- */
.campo{display:block;margin-top:14px}
.campo span{display:block;font-size:13.5px;color:var(--muted);margin:0 0 6px 4px}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:54px;padding:12px 16px;border-radius:14px;border:1px solid var(--line-2);
  background:var(--panel);font-size:16px;appearance:none;-webkit-appearance:none;
}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 30%,transparent)}
.dos{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.casilla{display:flex;gap:12px;align-items:flex-start;margin:18px 4px;font-size:14.5px;color:var(--muted);cursor:pointer}
.casilla input{width:22px;height:22px;flex:none;accent-color:var(--acento);margin-top:1px}
.error{color:#ff8f88;font-size:14.5px;margin:12px 4px 0;min-height:1.2em}

/* ------------------------- Encabezado negocio ------------------------- */
.hero{text-align:center;padding:14px 0 6px}
.hero .icono{
  width:84px;height:84px;margin:0 auto 14px;border-radius:26px;display:grid;place-items:center;font-size:42px;
  background:var(--acento);box-shadow:0 18px 50px -14px var(--acento);animation:flotar 4s ease-in-out infinite;
}
.hero h1{font-size:clamp(30px,9vw,40px);font-weight:800}
.hero .giro{color:var(--muted);margin-top:6px}
.promesa{
  margin:20px 0 6px;padding:16px 18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
  display:flex;gap:14px;align-items:center;text-align:left;
}
.promesa .num{font:800 34px/1 var(--f-display);color:var(--acento);filter:brightness(1.25)}
.promesa strong{display:block;font-size:16.5px}
@keyframes flotar{50%{transform:translateY(-6px) rotate(-3deg)}}

/* ------------------------------ Tarjeta ------------------------------ */
.saludo{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.saludo h1{font-size:24px;font-weight:700}
.saludo .muted{font-size:14px}
.pastilla{font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}

.tarjeta{
  position:relative;overflow:hidden;border-radius:26px;padding:22px 20px 20px;color:var(--sobre);
  background:
    radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--acento) 70%,#fff) 0%,transparent 55%),
    linear-gradient(150deg,var(--acento),color-mix(in srgb,var(--acento) 62%,#000));
  box-shadow:0 30px 70px -28px var(--acento),0 2px 0 rgba(255,255,255,.18) inset;
  animation:entrar .7s var(--ease) both;
}
.tarjeta::after{   /* brillo que cruza la tarjeta */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);animation:brillo 5.5s var(--ease) 1s infinite;
}
.tarjeta header{display:flex;align-items:center;gap:12px}
.tarjeta .logo{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:25px;background:color-mix(in srgb,var(--sobre) 16%,transparent)}
.tarjeta h2{font-size:21px;font-weight:800}
.tarjeta .sub{font-size:13px;opacity:.8}
.sellos{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:10px;margin:20px 0 16px}
.sello{
  aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(18px,6vw,26px);position:relative;
  border:2px dashed color-mix(in srgb,var(--sobre) 45%,transparent);
  color:color-mix(in srgb,var(--sobre) 55%,transparent);font-weight:700;font-family:var(--f-display);
}
.sello.puesto{border:0;background:var(--sobre);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.sello.puesto span{animation:none}
.sello.regalo{border-style:solid}
.sello.nuevo{animation:sellar .75s var(--ease) .35s both}
.sello.nuevo::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--sobre);
  animation:onda .9s ease-out .7s both;
}
.tarjeta footer{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tarjeta .cuenta{font:800 30px/1 var(--f-display)}
.tarjeta .cuenta small{font-size:15px;opacity:.75;font-weight:600}
.tarjeta .falta{font-size:13.5px;text-align:right;opacity:.92;max-width:62%}
@keyframes entrar{from{opacity:0;transform:translateY(24px) scale(.96) rotate(-1.5deg)}}
@keyframes brillo{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
@keyframes sellar{0%{transform:scale(2.6) rotate(-28deg);opacity:0}55%{transform:scale(.86) rotate(4deg);opacity:1}100%{transform:none}}
@keyframes onda{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}

/* --------------------------- Avisos y premios --------------------------- */
.bloque{margin-top:14px;padding:16px 18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.bloque h3{font-size:17px;margin-bottom:4px}
.premio{
  display:flex;gap:14px;align-items:center;border:1px solid color-mix(in srgb,var(--acento) 60%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--acento) 22%,var(--panel)),var(--panel));
  animation:latir 2.4s ease-in-out infinite;
}
.premio .emoji{font-size:34px}
.premio div{flex:1}
@keyframes latir{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--acento) 16%,transparent)}}

/* ------------------------------ Secciones ------------------------------ */
section[data-vista]{animation:aparecer .35s var(--ease)}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}}
.titulo{font-size:26px;font-weight:800;margin:6px 0 14px}
.fila{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.fila:last-child{border-bottom:0}
.fila .der{text-align:right;color:var(--muted)}
.fila.hoy{color:var(--fg);font-weight:700}
.fila.hoy .der{color:var(--acento);filter:brightness(1.3)}
.cat{font:700 13px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 4px}
.acciones{display:grid;gap:10px;margin-top:14px}
.otras{display:grid;gap:10px;margin-top:10px}
.otra{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);text-decoration:none}
.otra .logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex:none}
.otra div{flex:1;min-width:0}
.otra strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --------------------------- Navegación inferior --------------------------- */
.nav{
  position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;
  display:flex;gap:4px;padding:6px;border-radius:999px;background:rgba(27,30,37,.86);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line-2);box-shadow:0 18px 40px -12px #000;
}
.nav button{
  border:0;background:none;cursor:pointer;padding:10px 15px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);
  transition:background .25s,color .25s;
}
.nav button[aria-current="true"]{background:var(--acento);color:var(--sobre)}

/* ------------------------------- Diálogo ------------------------------- */
dialog{
  width:min(420px,100% - 32px);border:1px solid var(--line-2);border-radius:26px;padding:26px 22px;background:var(--panel);color:var(--fg);text-align:center;
}
dialog::backdrop{background:rgba(5,6,8,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog h2{font-size:25px;margin:10px 0 8px}
dialog .grande{font-size:60px;line-height:1}
dialog .acciones{margin-top:20px}
.reloj{font:800 34px/1 var(--f-display);margin:14px 0 4px;font-variant-numeric:tabular-nums;color:var(--acento);filter:brightness(1.3)}
.palomita{width:92px;height:92px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:48px;background:var(--ok);color:#fff;animation:sellar .6s var(--ease) both}

#aviso{
  position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:60;max-width:calc(100% - 32px);
  transform:translate(-50%,-160%);transition:transform .45s var(--ease);
  padding:13px 18px;border-radius:16px;background:var(--fg);color:var(--ink);font-weight:600;font-size:15px;box-shadow:0 18px 40px -12px #000;text-align:center;
}
#aviso.visible{transform:translate(-50%,0)}
#aviso.mal{background:var(--mal);color:#fff}
#confeti{position:fixed;inset:0;z-index:50;pointer-events:none}

.cargando{display:grid;place-items:center;min-height:60dvh;color:var(--muted)}
.cargando::before{content:"";width:34px;height:34px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--acento);animation:girar .8s linear infinite;margin-bottom:12px}
@keyframes girar{to{transform:rotate(360deg)}}

/* ------------------------------ Directorio ------------------------------ */
.lista{display:grid;gap:12px;margin-top:22px}
.negocio{display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:transform .2s var(--ease),border-color .2s}
.negocio:active{transform:scale(.98)}
.negocio .logo{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:28px;flex:none}
.negocio div{flex:1;min-width:0}
.negocio strong{font:700 18px/1.2 var(--f-display);display:block}
.negocio .regalo{font-size:13.5px;color:var(--muted);margin-top:3px}
.legal{line-height:1.7;color:#d5d6da}
.legal h2{font-size:19px;margin:26px 0 6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}