/* ==========================================================================
   MOI MILIAN — styles.css
   Estilos globales. La mayoría del diseño vive en estilos inline del HTML;
   aquí van tokens, estados :hover, responsive y fallbacks sin JavaScript.
   ========================================================================== */
:root{--bg:#0A0A0F;--surface:#15151D;--surface-2:#1F1F2A;--primary:#8B5CF6;--secondary:#22D3EE;--hot:#F43F5E;--text:#F5F5F7;--text-muted:#A1A1AA;--gradient:linear-gradient(135deg,#8B5CF6 0%,#22D3EE 100%)}
html{scroll-behavior:smooth;background:#0A0A0F}
body{margin:0;background:#0A0A0F;color:#F5F5F7;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
a{color:#F5F5F7;text-decoration:none}
a:hover{color:#22D3EE}
::selection{background:#8B5CF6;color:#0A0A0F}
:focus-visible{outline:2px solid #22D3EE;outline-offset:3px;border-radius:6px}
input::placeholder,textarea::placeholder{color:transparent}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:500;padding:12px 20px;border-radius:999px;background:#22D3EE;color:#0A0A0F;font-weight:700;transition:top .2s}
.skip-link:focus{top:16px;color:#0A0A0F}

@keyframes hotpulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.6)}70%{box-shadow:0 0 0 12px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes scrolldot{0%{transform:translateY(0);opacity:1}80%{transform:translateY(14px);opacity:0}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Utilidades de layout ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.kicker{margin:0 0 16px;font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#22D3EE}
.h2{margin:0;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(3rem,7vw,5.5rem);line-height:.92;letter-spacing:.02em}
.grad-text{background:linear-gradient(135deg,#8B5CF6,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.img-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Navbar ---------- */
[data-nav]{background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
[data-nav].is-solid{background:rgba(10,10,15,.8)}
[data-nav].is-scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:#1F1F2A}
.nav-desktop{display:none!important}
.nav-burger{display:flex!important}
@media (min-width:1024px){
  .nav-desktop{display:flex!important}
  .nav-burger{display:none!important}
  [data-menu]{display:none!important}
}
.burger-line{width:20px;height:2px;background:#F5F5F7;border-radius:2px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[data-burger][aria-expanded="true"] .burger-line:first-child{transform:translateY(4px) rotate(45deg)}
[data-burger][aria-expanded="true"] .burger-line:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- Hover (los estilos inline necesitan !important) ---------- */
.ulink:hover{background-size:100% 2px!important;color:#F5F5F7!important}
.ulink-foot:hover{background-size:100% 1px!important;color:#F5F5F7!important}
.ulink-out:hover{background-size:0% 1px!important}
.btn-glow:hover{box-shadow:0 0 40px rgba(139,92,246,.5)!important;color:#0A0A0F!important}
.btn-hot:hover{box-shadow:0 0 40px rgba(244,63,94,.5)!important}
.menu-link:hover{color:#22D3EE!important}
.brand-item:hover{filter:grayscale(0)!important;opacity:1!important}
.card-wa:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(37,211,102,.35);color:#0A0A0F!important}
.card-mail:hover{border-color:#8B5CF6!important;transform:translateY(-3px);color:#F5F5F7!important}

/* ---------- Trayectoria: una versión por breakpoint ---------- */
.tl-desktop{display:none}
@media (min-width:1024px){.tl-desktop{display:block}.tl-mobile{display:none}}

/* ---------- Galería ---------- */
.gal{column-count:1;column-gap:16px}
@media (min-width:480px){.gal{column-count:2}}
@media (min-width:1024px){.gal{column-count:3}}
.filter-btn{padding:10px 18px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;font-weight:500;transition:background .3s,color .3s,border-color .3s;border:1px solid #2A2A36;background:transparent;color:#F5F5F7}
.filter-btn[aria-pressed="true"]{background:linear-gradient(135deg,#8B5CF6,#22D3EE);color:#0A0A0F;border-color:transparent}

/* ---------- Música ---------- */
[data-mix]{border:1px solid #1F1F2A;transition:border-color .3s,box-shadow .3s}
[data-mix].is-playing{border-color:#8B5CF6;box-shadow:0 0 40px rgba(139,92,246,.3)}
.mix-embed iframe{display:block;width:100%;border:0;border-radius:10px}

/* ---------- Booking ---------- */
@media (min-width:1024px){.form-panel{grid-column:span 2}}
.f-input{width:100%;background:#0A0A0F;border:1px solid #2A2A36;border-radius:12px;padding:24px 16px 8px;color:#F5F5F7;font:inherit;font-size:15px;outline:none}
.f-input.is-invalid{border-color:#FB7185}
.f-label{position:absolute;left:17px;top:15px;font-size:15px;color:#A1A1AA;pointer-events:none;transform-origin:0 0;transition:transform .3s,color .3s}
.f-glow{position:absolute;left:0;right:0;top:0;height:56px;border-radius:12px;padding:1.5px;background:linear-gradient(135deg,#8B5CF6,#22D3EE);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none}
.f-err{display:block;margin-top:6px;color:#FB7185;font-size:12px}
.f-err:empty{display:none}
/* Fallback de etiquetas flotantes (si GSAP no carga, main.js las sobreescribe inline) */
.f-input:focus + .f-label,.f-input:not(:placeholder-shown) + .f-label,[data-float-always] .f-label{transform:translateY(-11px) scale(.78)}
.f-input:focus + .f-label{color:#22D3EE}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Lightbox ---------- */
[data-lb-img] img{display:block;width:100%;height:100%;object-fit:cover;border-radius:15px}

/* ---------- Hero: animación 3D de fibras a pantalla completa (hero-fiber.js) ---------- */
.hero-fiber{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease}
.hero-fiber.is-live{opacity:.8}
.hero-fiber canvas{display:block;width:100%!important;height:100%!important}
@media (max-width:767px){.hero-fiber.is-live{opacity:.5}}

/* ---------- Entrada sin pantalla de carga ---------- */
/* Mientras main.js prepara la animación de entrada, el contenido del hero y la barra
   de navegación esperan ocultos (app.js quita la clase; como máximo 3 s). */
.motion-wait [data-hero-content],.motion-wait [data-hero-photo],.motion-wait [data-nav],.motion-wait [data-scroll-ind],.motion-wait [data-player]{visibility:hidden}

/* ---------- Reproductor del hero (hero-music.js) ---------- */
/* --beat-a / --beat-b: colores actuales de la animación (hero-fiber.js los cambia con el ritmo) */
:root{--beat-a:#8B5CF6;--beat-b:#22D3EE}
.beat-a,.beat-b{transition:color .6s ease}
.beat-a{color:var(--beat-a)}
.beat-b{color:var(--beat-b)}
.hero-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2}
.player{position:relative;border-top:1px solid #1F1F2A;background:rgba(10,10,15,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.player-in{display:flex;align-items:center;gap:clamp(12px,2vw,24px);min-height:64px;padding-block:10px}
.player-play{flex:none;width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0A0A0F;background:linear-gradient(135deg,var(--beat-a),var(--beat-b));box-shadow:0 0 24px rgba(139,92,246,.35);transition:box-shadow .3s,transform .2s}
.player-play:hover{transform:scale(1.06)}
.player.is-playing .player-play{box-shadow:0 0 34px rgba(139,92,246,.6)}
.player.is-blocked .player-play{animation:hotpulse 1.6s infinite}
.player-meta{display:flex;flex-direction:column;min-width:0;flex:0 1 260px;line-height:1.25}
.player-status{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--beat-b);transition:color .6s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-title{font-size:14px;font-weight:500;color:#F5F5F7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.player-time{flex:none;font-family:'Space Mono',monospace;font-size:12px;color:#A1A1AA;min-width:42px;text-align:center}
.player-seek{--p:0%;flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;cursor:pointer;background:linear-gradient(90deg,var(--beat-a),var(--beat-b)) 0 0/var(--p) 100% no-repeat,#2A2A36}
.player-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#F5F5F7;border:none;box-shadow:0 0 10px rgba(34,211,238,.6)}
.player-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#F5F5F7;border:none}
.player-mute{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid #2A2A36;background:transparent;color:#F5F5F7;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .3s,color .3s}
.player-mute:hover{border-color:var(--beat-a)}
.player-mute[aria-pressed="true"]{color:#F43F5E;border-color:#F43F5E}
.music-eq{flex:none;display:flex;align-items:flex-end;gap:3px;height:20px}
.music-eq i{display:block;width:3px;height:100%;border-radius:2px;background:linear-gradient(to top,var(--beat-a),var(--beat-b));transform-origin:50% 100%;transform:scaleY(.3);animation:musiceq .9s ease-in-out infinite;animation-play-state:paused}
.music-eq i:nth-child(2){animation-delay:-.3s}.music-eq i:nth-child(3){animation-delay:-.6s}.music-eq i:nth-child(4){animation-delay:-.45s}.music-eq i:nth-child(5){animation-delay:-.15s}
.player.is-playing .music-eq i{animation-play-state:running}
@keyframes musiceq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
[data-scroll-ind]{display:none!important}   /* el reproductor ocupa su lugar */
@media (max-width:767px){
  .player-in{min-height:58px;gap:12px;padding-right:88px}   /* hueco para el botón flotante de WhatsApp */
  .player-bar{position:absolute;left:0;right:0;top:-2px}   /* barra de progreso fina en el borde superior */
  .player-bar .player-time{display:none}
  .player-seek{height:3px;border-radius:0}
  .player-meta{flex:1}
}