:root{
  --ink:#050507; --moss:#3B453D; --moss-hi:#4a574c; --sage:#9fb3a5; --mist:#B0B0B0;
  --line:rgba(255,255,255,.08); --line-hi:rgba(255,255,255,.18);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:96px}
body{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(5,5,7,.45),rgba(5,5,7,.9)),url('../imagenes/banner.png');
  background-attachment:fixed; background-size:cover; background-position:center;
  color:#e2e8f0; font-family:'Geist',sans-serif; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (max-width:768px){ body{background-attachment:scroll} }
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Geist',sans-serif;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--moss);color:#fff}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:8px}

/* ---------- Fondo animado  ---------- */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;animation:bgin 1.4s var(--ease-out) both}
@keyframes bgin{from{opacity:0}to{opacity:1}}
#bg .depth{position:absolute;inset:0;will-change:transform;
  transform:translate3d(calc(var(--px,0) * var(--k,10) * 1px),calc(var(--py,0) * var(--k,10) * 1px - var(--sy,0) * var(--k,10) * .012px),0)}
.orb{position:absolute;border-radius:50%;will-change:transform;animation-timing-function:cubic-bezier(.45,.05,.55,.95);animation-iteration-count:infinite;animation-direction:alternate}
.o1{left:-22vmax;top:-26vmax;width:78vmax;height:62vmax;background:radial-gradient(closest-side,rgba(59,69,61,.8),rgba(59,69,61,0));animation-name:d1;animation-duration:47s}
.o2{right:-26vmax;top:4vmax;width:62vmax;height:72vmax;background:radial-gradient(closest-side,rgba(159,179,165,.2),rgba(159,179,165,0));animation-name:d2;animation-duration:61s}
.o3{left:2vmax;bottom:-38vmax;width:84vmax;height:62vmax;background:radial-gradient(closest-side,rgba(30,54,45,.85),rgba(30,54,45,0));animation-name:d3;animation-duration:73s}
.o4{right:8vmax;bottom:-22vmax;width:46vmax;height:46vmax;background:radial-gradient(closest-side,rgba(176,176,176,.1),rgba(176,176,176,0));animation-name:d4;animation-duration:89s}
.o5{left:34vw;top:18vh;width:30vmax;height:24vmax;background:radial-gradient(closest-side,rgba(159,179,165,.14),rgba(159,179,165,0));animation-name:d5;animation-duration:37s}
@keyframes d1{0%{transform:translate3d(0,0,0) rotate(0) scale(1,1)}50%{transform:translate3d(9vmax,6vmax,0) rotate(14deg) scale(1.12,.9)}100%{transform:translate3d(-4vmax,13vmax,0) rotate(-8deg) scale(.94,1.1)}}
@keyframes d2{0%{transform:translate3d(0,0,0) rotate(0) scale(1,1)}50%{transform:translate3d(-12vmax,8vmax,0) rotate(-18deg) scale(.9,1.15)}100%{transform:translate3d(-3vmax,-6vmax,0) rotate(10deg) scale(1.1,.95)}}
@keyframes d3{0%{transform:translate3d(0,0,0) rotate(0) scale(1,1)}50%{transform:translate3d(14vmax,-8vmax,0) rotate(9deg) scale(1.15,.92)}100%{transform:translate3d(6vmax,-14vmax,0) rotate(-12deg) scale(.92,1.08)}}
@keyframes d4{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-16vmax,-10vmax,0) scale(1.25,.85) rotate(25deg)}}
@keyframes d5{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10vw,8vh,0) scale(1.2,.9)}100%{transform:translate3d(-8vw,14vh,0) scale(.85,1.15)}}
.beam{position:absolute;left:50%;top:-30vh;width:170vmax;height:130vmax;margin-left:-85vmax;transform-origin:50% 0;
  background:conic-gradient(from 180deg at 50% 0%,transparent 41%,rgba(159,179,165,.15) 50%,transparent 59%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);mask-image:linear-gradient(to bottom,#000,transparent 75%);
  will-change:transform,opacity;animation:beam 19s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.beam.b2{background:conic-gradient(from 180deg at 50% 0%,transparent 45%,rgba(176,176,176,.1) 50%,transparent 55%);animation-duration:27s;animation-name:beam2}
@keyframes beam{from{transform:rotate(-7deg);opacity:.5}to{transform:rotate(7deg);opacity:1}}
@keyframes beam2{from{transform:rotate(9deg);opacity:1}to{transform:rotate(-9deg);opacity:.4}}
#fx{position:absolute;inset:0;width:100%;height:100%}
.grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(5,5,7,.78) 100%)}
.fade-x{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
@media (max-width:768px){
  .o4,.o5,.beam.b2{display:none}
  .card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,15,14,.84)}
}
@media (prefers-reduced-motion:reduce){.orb,.beam{animation:none!important}#bg{animation:none}}

/* ---------- Fondo del hero ---------- */
.bg-grid-pattern{
  background-image:radial-gradient(ellipse at 50% 0%,rgba(59,69,61,.4) 0%,transparent 65%),
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:100% 100%,44px 44px,44px 44px;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent);
}

/* ---------- Tarjetas con spotlight ---------- */
.card{
  position:relative; overflow:hidden; border-radius:22px;
  background:rgba(13,15,14,.62); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.5),0 12px 32px -12px rgba(0,0,0,.6);
  transition:border-color .2s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(159,179,165,.13),transparent 70%);
  transition:opacity .3s var(--ease-out);
}
.card>*{position:relative}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--line-hi);transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5),0 22px 44px -16px rgba(0,0,0,.7)}
  .card:hover::before{opacity:1}
}
.chip{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:var(--sage);
  background:linear-gradient(180deg,rgba(59,69,61,.55),rgba(59,69,61,.2));
  border:1px solid rgba(159,179,165,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .25s var(--ease-out),border-color .2s;
}
@media (hover:hover){.card:hover .chip{transform:scale(1.06) rotate(-4deg);border-color:rgba(159,179,165,.45)}}
.card h3{color:#fff;font-weight:700}
.card p{color:#9aa0a6}
.card b{color:#e5e7eb;font-weight:500}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;
  padding:0 1.35rem;border-radius:999px;font-size:.875rem;font-weight:500;color:#fff;white-space:nowrap;
  transition:transform .16s var(--ease-out),background-color .18s var(--ease-out),border-color .18s,box-shadow .2s var(--ease-out);
  user-select:none;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:var(--moss);border:1px solid rgba(159,179,165,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px -6px rgba(59,69,61,.8);
}
.btn-ghost{background:rgba(20,21,28,.7);border:1px dashed rgba(255,255,255,.25)}
.btn i{transition:transform .25s var(--ease-out)}
@media (hover:hover){
  .btn-primary:hover{background:var(--moss-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 26px -8px rgba(74,87,76,.9)}
  .btn-ghost:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
  .btn:hover i{transform:rotate(-8deg) scale(1.08)}
}

/* ---------- Navegación ---------- */
.nav{transition:background-color .25s var(--ease-out),border-color .25s,box-shadow .25s,padding .25s var(--ease-out)}
.nav.scrolled{background:rgba(8,9,10,.88);border-color:var(--line-hi);box-shadow:0 12px 40px -12px rgba(0,0,0,.8)}
.nav-link{position:relative;padding:.35rem 0;transition:color .15s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
@media (hover:hover){.nav-link:hover::after{transform:scaleX(1)}}
.menu-panel{
  transform-origin:top right;opacity:0;transform:scale(.96) translateY(-6px);pointer-events:none;visibility:hidden;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s .18s;
}
.menu-panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}

/* ---------- Entrada del hero (una sola secuencia) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hi{animation:rise .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}

/* ---------- Reveal al hacer scroll (solo con JS) ---------- */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:calc(var(--i,0) * 50ms)}
.js .rv.in{opacity:1;transform:none}

/* ---------- Marquee ---------- */
@keyframes marquee-loop{from{transform:translateX(0)}to{transform:translateX(calc(var(--marquee-shift,50%) * -1))}}
.marquee-track{display:flex;width:max-content;animation:marquee-loop var(--marquee-duration,25s) linear infinite;will-change:transform}
.marquee-track:hover{animation-play-state:paused}
.srv{transition:border-color .2s,background-color .2s}
@media (hover:hover){.srv:hover{border-color:var(--line-hi);background:rgba(255,255,255,.06)}}

/* ---------- Reproductor ---------- */
.cover{opacity:0;transform:scale(.97);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.cover.in{opacity:1;transform:none}
.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.1);cursor:pointer;position:relative;touch-action:none;transition:height .15s var(--ease-out)}
.bar::before{content:"";position:absolute;inset:-10px 0}
.bar:hover,.bar.drag{height:10px}
.bar-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--sage),#fff);transform:scaleX(0);transform-origin:left;will-change:transform}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.eq i{width:2px;background:currentColor;border-radius:1px;height:3px;transform-origin:bottom}
.playing .eq i{animation:eq .9s ease-in-out infinite}
.playing .eq i:nth-child(2){animation-delay:-.3s}.playing .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
.pp{transition:transform .16s var(--ease-out),background-color .15s,box-shadow .2s}
.pp:active{transform:scale(.94)}
@media (hover:hover){.pp:hover{transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,255,255,.08)}.pp:active{transform:scale(.94)}}
.ctl{transition:color .15s,transform .16s var(--ease-out)}
.ctl:active{transform:scale(.9)}
.pl{transition:border-color .2s,background-color .2s,transform .16s var(--ease-out)}
.pl:active{transform:scale(.98)}
@media (hover:hover){.pl:hover{border-color:var(--line-hi);background:rgba(255,255,255,.04)}}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:rgba(255,255,255,.12)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s var(--ease-out)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}

/* ---------- Perfiles ---------- */
.phone{
  --r:0deg;position:relative;overflow:hidden;border-radius:2.5rem;border:4px solid #1a1b23;background:#000;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05);
  transform:rotate(var(--r));transition:transform .4s var(--ease-out),border-color .25s,box-shadow .4s var(--ease-out);
}
.phone img.bgi{transition:transform .8s var(--ease-out)}
@media (hover:hover){
  .phone:hover{transform:translateY(-8px) rotate(0deg);border-color:rgba(255,255,255,.25);box-shadow:0 40px 70px -20px rgba(59,69,61,.5)}
  .phone:hover img.bgi{transform:scale(1.05)}
}
@media (min-width:768px){.r-l{--r:-3deg}.r-r{--r:3deg}}
.handle{transition:color .15s,background-color .15s,border-color .15s,transform .16s var(--ease-out)}
.handle:active{transform:scale(.96)}
.tag{transition:border-color .2s,background-color .2s,transform .2s var(--ease-out)}
@media (hover:hover){.tag:hover{border-color:var(--line-hi);background:rgba(255,255,255,.07);transform:translateY(-1px)}}
.flink{transition:color .15s}.flink:hover{color:#fff}
.to-top{transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),color .15s,border-color .15s}
.to-top.hide{opacity:0;transform:translateY(8px);pointer-events:none}

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

/* ---------- Responsive extra ---------- */
html{overflow-x:hidden}img{max-width:100%}
@media (max-width:640px){#player .vol{display:none}}
.to-top{bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
/* ---------- Páginas interiores (mismo sistema) ---------- */
.wrap{max-width:72rem;margin:0 auto;padding:0 1rem;width:100%}
.page-head{padding:9rem 0 2.5rem;text-align:center}
.page-head h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:800;line-height:1.05;color:#fff;margin:0}
.page-head p{color:#9ca3af;max-width:40rem;margin:1rem auto 0}
.muted{color:#9aa0a6}
.badge{display:inline-flex;align-items:center;padding:.2rem .65rem;border-radius:999px;font-size:11px;border:1px solid var(--line-hi);color:var(--mist)}
.badge.warn{color:#e5c98a;border-color:rgba(229,201,138,.35);background:rgba(229,201,138,.07)}
.doc{max-width:46rem;margin:0 auto 2rem;padding:2rem}
.doc.card:hover{transform:none}
.doc h2{font-size:1.25rem;margin:2rem 0 .6rem;color:#fff}.doc p{color:#b4b9bf;line-height:1.7;font-size:.95rem}
.doc .note{margin:1.25rem 0;padding:1rem 1.25rem;border-radius:14px;border:1px dashed rgba(229,201,138,.4);background:rgba(229,201,138,.05);color:#e5c98a;font-size:.85rem}
.field{width:100%;min-height:44px;padding:0 1.1rem;border-radius:999px;background:rgba(20,21,28,.7);border:1px solid var(--line-hi);color:#fff;font:inherit}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.5rem}
.chip-f{min-height:36px;padding:0 1rem;border-radius:999px;border:1px solid var(--line-hi);background:none;color:#cbd0d6;font:inherit;font-size:.8rem;cursor:pointer;transition:background-color .18s,border-color .18s,transform .16s var(--ease-out)}
.chip-f:active{transform:scale(.97)}.chip-f[aria-pressed=true]{background:var(--moss);border-color:rgba(159,179,165,.4);color:#fff}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.cmd{padding:1.25rem;min-width:0;display:flex;flex-direction:column}.cmd h3{overflow-wrap:anywhere}.cmd code{display:block;margin:.6rem 0;padding:.6rem .8rem;border-radius:10px;background:rgba(0,0,0,.45);font-size:.8rem;color:var(--sage);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-height:7.5rem;overflow-y:auto}.cmd .acts{margin-top:auto;padding-top:.75rem}.cmd details{margin:.4rem 0}.cmd summary{cursor:pointer;font-size:.8rem;color:var(--sage);padding:.25rem 0;list-style:none}.cmd summary::-webkit-details-marker{display:none}.cmd summary::after{content:' ▾'}.cmd details[open] summary::after{content:' ▴'}.cmd .prm{font-size:.75rem;margin:.35rem 0;overflow-wrap:anywhere}
.empty{text-align:center;padding:3rem 1rem;color:#9aa0a6}
.dot{width:10px;height:10px;border-radius:50%;background:#6b7280;display:inline-block}.dot.up{background:#7fc79a}.dot.down{background:#e07a7a}
.btn.sm{min-height:36px;padding:0 1rem;font-size:.75rem}

/* ---------- Letras ---------- */
.lyr{position:relative;height:17rem;margin-bottom:1.5rem;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0b0c0e;isolation:isolate}
.lyr.is-empty{display:none}
.lyr-bg{position:absolute;inset:-25%;z-index:-2;background-size:cover;background-position:center;filter:blur(38px) saturate(1.35) brightness(.75);transform:scale(1.15)}
.lyr::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(5,5,7,.55),rgba(5,5,7,.15) 45%,rgba(5,5,7,.6))}
.lyr-list{height:100%;overflow-y:auto;padding:6.5rem 1.5rem;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.lyr-list::-webkit-scrollbar{display:none}
.lyr-line{margin:0 0 1rem;font:700 1.2rem/1.3 'Bricolage Grotesque','Geist',sans-serif;color:rgba(255,255,255,.4);filter:blur(1.2px);cursor:pointer;transform-origin:left center;transition:color .35s var(--ease-out),filter .35s var(--ease-out),transform .35s var(--ease-out)}
.lyr-line.far{filter:blur(2.6px)}.lyr-line.past{color:rgba(255,255,255,.3)}
.lyr-line.tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.28);filter:none;cursor:default;margin-bottom:.5rem}
.lyr-line.on{color:#fff;filter:none;transform:scale(1.04)}
@media(hover:hover){.lyr-line:hover{color:rgba(255,255,255,.75);filter:none}}
@media(max-width:640px){.lyr{height:14rem}.lyr-line{font-size:1.05rem}.lyr-list{padding:5rem 1.1rem}}

.avwrap{position:relative;width:4rem;height:4rem;flex-shrink:0}
.avwrap .deco{position:absolute;left:-10%;top:-10%;width:120%;height:120%;max-width:none;pointer-events:none;user-select:none}