/* =========================================================
   SITI — landing · 2. reset, tipografía y botones
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .7s var(--ease-io),color .7s var(--ease-io);
}
body.is-loading,body.is-locked{overflow:hidden}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--orange);color:var(--on-orange)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

.skip{
  position:fixed;top:-100px;left:16px;z-index:999;padding:12px 18px;
  background:var(--orange);color:var(--on-orange);border-radius:10px;font-weight:700;
}
.skip:focus{top:16px}

/* lucide: los <i data-lucide> se vuelven <svg class="lucide"> */
.lucide{width:1.1em;height:1.1em;stroke-width:2;flex:none}

/* ---------- utilidades ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

.h2{
  font-family:var(--f-dis);
  font-size:clamp(2.1rem,5.2vw,4.4rem);
  font-weight:800;letter-spacing:-.04em;line-height:1;
}
.ink{color:var(--ink)}
.amber{color:var(--amber)}
.muted{color:var(--muted);font-size:clamp(1rem,1.15vw,1.12rem);max-width:46ch;line-height:1.65}

.label{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px;
}
.label b{font-weight:inherit}
.label > span{
  color:var(--ink);border:1px solid var(--line-2);border-radius:99px;
  padding:4px 10px;font-size:.66rem;
}

.link{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  font-family:var(--f-dis);font-weight:700;font-size:1rem;padding-bottom:6px;
  border-bottom:1px solid var(--line-2);width:fit-content;
  transition:gap .4s var(--ease),border-color .4s,color .4s;
}
.link .lucide{transition:transform .4s var(--ease)}
.link:hover{gap:16px;border-color:var(--ink);color:var(--ink)}
.link:hover .lucide{transform:translateX(3px)}

/* ---------- botones: relleno que sube desde abajo ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:17px 30px;border-radius:99px;
  font-family:var(--f-dis);font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  overflow:hidden;isolation:isolate;border:1px solid transparent;will-change:transform;
}
.btn__txt{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;transition:color .45s var(--ease)}
.btn__fill{
  position:absolute;inset:0;z-index:1;border-radius:inherit;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover .btn__fill{transform:translateY(0)}
.btn:active{transform:scale(.97)}

.btn--orange{background:var(--orange);color:var(--on-orange);box-shadow:0 14px 34px -12px rgba(var(--hot),.6)}
.btn--orange .btn__fill{background:var(--fg)}
.btn--orange:hover .btn__txt{color:var(--bg)}

.btn--ghost{border-color:var(--line-2);color:var(--fg)}
.btn--ghost .btn__fill{background:var(--fg)}
.btn--ghost:hover .btn__txt{color:var(--bg)}

.btn--light{background:#fff;color:#7A2E00}
.btn--light .btn__fill{background:#141414}
.btn--light:hover .btn__txt{color:#fff}

.btn--grad{background:linear-gradient(100deg,#8b5cf6,#d946ef);color:#fff;box-shadow:0 16px 36px -14px rgba(139,92,246,.6)}
.btn--grad .btn__fill{background:var(--fg)}
.btn--grad:hover .btn__txt{color:var(--bg)}

.btn--sm{padding:12px 20px;font-size:.88rem}
.btn--wide{width:100%;padding-block:19px}

/* etiquetas pequeñas */
.tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:99px;
  font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.tag--orange{background:var(--orange);color:var(--on-orange)}
.tag--glass{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tag--dark{background:rgba(26,11,0,.12);color:#3A2400}
.tag--live{background:rgba(34,197,94,.14);color:#22c55e;border:1px solid rgba(34,197,94,.3)}

.pulse{
  width:7px;height:7px;border-radius:99px;background:currentColor;display:inline-block;
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 7px transparent}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}