:root{ --bg:#0b0b0e; --silver:#cfd3da; --muted:#9aa3af; --ring:#2a2e3a; --accent:#4169e1; --ease:cubic-bezier(.2,.7,.2,1); }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(65,105,225,.12), transparent 60%),
        radial-gradient(900px 600px at -10% 10%, rgba(12,35,64,.35), transparent 60%),
        var(--bg);
      color:var(--silver);
      font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      overflow-x:hidden; scroll-behavior:smooth;
    }
    a{color:var(--silver);text-decoration:none}
    .container{width:min(1200px,92vw);margin-inline:auto}
    @media(max-width:768px){ .container{width:min(1200px,94vw)} }

    .muted{font-size:.9rem;color:var(--muted);}

    /* Marca de agua global */
    body::before{
      content:""; position:fixed; inset:0; z-index:-1;
      background:
        radial-gradient(1200px 700px at 50% -10%, rgba(65,105,225,.10), transparent 60%),
        url("assets/watermark-ba.png") center/cover no-repeat;
      opacity:.16; pointer-events:none;
      filter:saturate(1.05) contrast(1.05) blur(.2px);
    }

    /* Header + Hamburguesa centrada */
    header{
      position:sticky; top:0; z-index:90;
      background:rgba(11,11,14,.6); backdrop-filter:blur(8px);
      border-bottom:.5px solid var(--ring); padding:.3rem 0;
    }
    .nav{position:relative; display:flex; justify-content:center; align-items:center; min-height:44px}
    .menu-btn{
      position:absolute; left:50%; transform:translateX(-50%);
      display:inline-flex; align-items:center; justify-content:center;
      width:44px; height:44px; border-radius:10px; /* 44px = tamaño táctil mínimo recomendado */
      border:1px solid var(--ring); background:linear-gradient(180deg,#141726,#0f1220);
      cursor:pointer; transition:transform .15s var(--ease);
    }
    .menu-btn:active{transform:translateX(-50%) scale(.96)}
    .menu-icon::before{
      content:""; display:block; width:18px; height:2px; background:var(--silver);
      box-shadow:0 6px 0 var(--silver), 0 -6px 0 var(--silver);
    }
    .menu-panel{
      position:absolute; top:100%; left:50%; transform:translate(-50%,0);
      width:min(320px,92vw); background:#0e1220; border:1px solid var(--ring);
      border-radius:14px; overflow:hidden; opacity:0; pointer-events:none;
      transition:opacity .18s var(--ease), transform .18s var(--ease);
    }
    .menu-panel.open{opacity:1; pointer-events:auto; transform:translate(-50%,6px)}
    .menu-list{display:flex; flex-direction:column}
    .menu-list a{padding:.9rem 1rem; text-align:center}
    .menu-list a:hover{background:rgba(12,35,64,.35)}
    .menu-caption{text-align:center; padding:.6rem; font-size:.85rem; color:var(--muted); border-top:1px solid var(--ring)}

    /* ===== HERO (vídeo) ===== */
    .hero{ position:relative; isolation:isolate; min-height:clamp(380px,72vh,900px); border-bottom:.5px solid var(--ring); overflow:hidden; }
    .hero video{position:absolute; inset:0; width:100%; height:100%}
    .hero .main-video{object-fit:cover; z-index:2; background:transparent}
    .hero::after{
      content:""; position:absolute; inset:-30% -20%; pointer-events:none; z-index:1;
      background: conic-gradient(from 180deg at 50% 50%, rgba(65,105,225,.10), transparent 40%, rgba(65,105,225,.10));
      animation: sweep 6s linear infinite; mix-blend-mode: screen;
    }
    @keyframes sweep{to{transform:rotate(360deg)}}

    /* Redes en portada (debajo del logo, encima de la onda) */
    .social-bar{
      position:absolute; left:50%; bottom:84px; transform:translateX(-50%);
      display:flex; gap:14px; z-index:3;
    }
    .social-btn{
      position:relative; width:46px; height:46px; border-radius:999px; display:grid; place-items:center;
      border:1px solid var(--ring); background:rgba(10,12,18,.6); backdrop-filter:blur(6px);
      transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
      color:#e8ebf2; outline:none;
    }
    .social-btn:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.28); border-color:#2d3750}
    .social-btn svg{width:22px;height:22px;display:block;fill:currentColor}
    .social-btn.ig:hover{background:radial-gradient(120% 120% at 0% 100%,#feda75 0%,#fa7e1e 35%,#d62976 60%,#962fbf 80%,#4f5bd5 100%); color:#fff}
    .social-btn.sc:hover{background:#ff7700; color:#fff; border-color:#ff7700}
    .social-btn.yt:hover{background:#ff0000; color:#fff; border-color:#ff0000}
    @media (hover:none){ .social-btn{transform:none !important} }
    @media(max-width:768px){
      .social-bar{gap:12px; bottom:86px}
      .social-btn{width:44px; height:44px}
      .social-btn svg{width:20px; height:20px}
    }

    /* Móvil: SIN recortes del logo — vídeo en contain + fondo extrapolado */
    .bg-extrap{display:none}
    @media (max-width: 768px){
      .hero{ min-height:86svh; }
      .bg-extrap{
        display:block; position:absolute; inset:-2% -2%; z-index:0;
        background:url("assets/hero-poster.jpg") center/cover no-repeat;
        filter:blur(20px) saturate(1.1) brightness(.8);
        transform:scale(1.08);
      }
      .hero .main-video{
        object-fit:contain !important; width:100%; height:100%; background:transparent;
      }
    }
    @supports (height: 100svh){
      @media (max-width: 768px){ .hero{ min-height:92svh; } }
    }

    /* Ondas portada */
    .eq{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:8px; z-index:3}
    .eq span{width:7px; height:28px; border-radius:3px; background:rgba(207,211,218,.95); box-shadow:0 0 12px rgba(122,162,255,.65); animation:bounce 1.1s ease-in-out infinite}
    .eq span:nth-child(2){animation-delay:.1s} .eq span:nth-child(3){animation-delay:.2s} .eq span:nth-child(4){animation-delay:.3s} .eq span:nth-child(5){animation-delay:.4s}
    @keyframes bounce{0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1.05)}}

    /* Secciones base */
    section{padding:2rem 0; border-bottom:.5px solid var(--ring)}

    /* ===== MÚSICA con efecto + watermark girando ===== */
    #musica{position:relative; overflow:hidden}
    #musica::after{
      content:""; position:absolute; inset:-15% -10%; z-index:0; pointer-events:none;
      background:
        conic-gradient(from 90deg at 50% 50%, rgba(122,162,255,.14), transparent 25%, rgba(122,162,255,.14) 50%, transparent 75%, rgba(122,162,255,.14)),
        radial-gradient(1000px 260px at 50% 6%, rgba(122,162,255,.18), transparent 60%);
      mix-blend-mode:screen; animation:beams 8s linear infinite; opacity:.55;
    }
    @keyframes beams{to{transform:rotate(360deg)}}
    #musica .wm-spin{
      position:absolute; left:50%; top:6%;
      width:120vmin; height:120vmin;
      transform:translate(-50%,0) rotate(0deg);
      background:url("assets/watermark-ba.png") center/contain no-repeat;
      opacity:.16; mix-blend-mode:screen; pointer-events:none; z-index:0;
      filter:drop-shadow(0 0 18px rgba(122,162,255,.25));
      animation:wmspin 26s linear infinite;
    }
    @keyframes wmspin{ to{ transform:translate(-50%,0) rotate(360deg); } }
    #musica .container{position:relative; z-index:1}

    /* ===== Títulos ===== */
    #musica h2, #contrataciones h2, #eventos h2{
      font-family:'Bebas Neue','Inter',sans-serif;
      color:#fff;
      font-size:clamp(2rem,5vw,2.6rem);
      letter-spacing:.5px;
      text-transform:none;
      text-align:center;
      margin-bottom:1rem;
    }

    /* Player */
    .player{display:grid; gap:1rem; min-width:0}
    .deck{display:grid; gap:1rem; grid-template-columns:1fr; min-width:0}
    .card{background:linear-gradient(180deg,rgba(12,35,64,.22),rgba(12,35,64,.08)); border:1px solid var(--ring); border-radius:18px; padding:1rem; min-width:0}
    .now{display:flex; gap:1rem; align-items:center; margin-bottom:1rem; min-width:0}
    .art{flex:none; width:70px; height:70px; border-radius:12px; background:#10131f; display:grid; place-items:center; border:1px solid var(--ring); overflow:hidden}
    .now-info{min-width:0; flex:1} /* min-width:0 permite que el texto trunque dentro de un flex */
    .track-title{
      font-weight:600; margin-bottom:.35rem;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .art img{width:100%; height:100%; object-fit:cover}
    .controls{display:flex; gap:.6rem; margin-top:.5rem}
    .controls button{background:#0e1220; border:1px solid var(--ring); border-radius:999px; width:40px; height:40px; cursor:pointer}
    .range{appearance:none; width:100%; height:8px; border-radius:999px; background:#15192a; border:1px solid var(--ring)}
    .range::-webkit-slider-thumb{appearance:none; background:var(--accent); width:18px; height:18px; border-radius:50%}

    .covers{display:grid; gap:10px; grid-template-columns:repeat(2,1fr); min-width:0}
    @media(min-width:520px){.covers{grid-template-columns:repeat(3,1fr)}}
    @media(min-width:900px){.covers{grid-template-columns:repeat(5,1fr)}}
    .cover{position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid var(--ring); transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
    .cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
    .cover:after{content:"►"; position:absolute; left:10px; bottom:8px; background:rgba(0,0,0,.55); border:1px solid var(--ring); border-radius:999px; width:30px; height:30px; display:grid; place-items:center; font-weight:700}
    .cover:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.25)}
    .cover.active{outline:2px solid #233255}
    .cover .label{position:absolute; left:0; right:0; bottom:0; padding:.5rem .65rem; font-size:.9rem; line-height:1.1; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75)); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); opacity:0; transform:translateY(6px); transition:opacity .18s var(--ease), transform .18s var(--ease)}
    .cover:hover .label,.cover:focus-visible .label{opacity:1; transform:translateY(0)}
    @media(hover:none){.cover .label{opacity:1; transform:none}}

    /* === Like button === */
    .like-row{position:absolute; right:8px; top:8px; display:flex; align-items:center; gap:6px; z-index:2}
    .like-btn{
      appearance:none; border:1px solid var(--ring); background:rgba(10,12,18,.65);
      color:#ff6b81; width:34px; height:34px; border-radius:999px; cursor:pointer;
      display:grid; place-items:center; font-size:16px; line-height:1;
      transition:transform .15s var(--ease), box-shadow .15s var(--ease);
    }
    .like-btn:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.28)}
    .like-count{font-size:.85rem; color:#ffd9de; text-shadow:0 1px 2px rgba(0,0,0,.35)}
    .like-btn.liked{background:#1c1220; border-color:#5c3040}

    /* ===== CONTRATACIONES ===== */
    #contrataciones{position:relative; overflow:hidden; background:#0b0b0e}
    #contrataciones::before{
      content:""; position:absolute; inset:0; z-index:0;
      background:url("assets/booking-bg.jpg") center/cover no-repeat;
      filter:blur(2px) brightness(.70) saturate(1.06);
      transform:scale(1.02);
    }
    #contrataciones .top-shade{
      position:absolute; left:0; right:0; top:0; height:22vh; z-index:0;
      background:linear-gradient(180deg, rgba(6,10,20,.75), rgba(6,10,20,.35) 70%, transparent);
      pointer-events:none;
    }
    #contrataciones .container,
    #contrataciones p,
    #contrataciones form{position:relative; z-index:1}
    #contrataciones .stack{display:grid; gap:1rem; max-width:900px; margin-inline:auto}

    .card--glass{
      background:rgba(10,14,24,.22);
      border:1px solid rgba(60,70,95,.2);
      border-radius:16px;
      padding:1rem 1.2rem;
      backdrop-filter:blur(10px) saturate(120%);
      box-shadow:0 10px 30px rgba(0,0,0,.25);
    }

    .contract-text{
      font-family:'Inter','Outfit',system-ui,sans-serif;
      font-size:clamp(1.02rem,1.15vw,1.16rem);
      line-height:1.85;
      color:#edf2ff;
      letter-spacing:.2px;
      text-shadow:0 1px 2px rgba(0,0,0,.35);
    }

    form{display:grid; gap:.8rem}
    input,textarea{
      background:rgba(8,12,20,.22);
      border:1px solid transparent;
      border-radius:12px; padding:.85rem .9rem; color:#fff; width:100%;
      outline:none;
    }
    input::placeholder, textarea::placeholder{ color:#aab2c5 }
    input:focus, textarea:focus{
      border-color:rgba(122,162,255,.35); box-shadow:0 0 0 3px rgba(122,162,255,.15);
      background:rgba(8,12,20,.28);
    }
    .btn-primary{
      padding:.9rem 1.1rem;border-radius:12px;border:1px solid rgba(122,162,255,.35);
      background:linear-gradient(180deg,#2a4a92,#182d59);color:#fff;cursor:pointer
    }

    /* ===== EVENTOS ===== */
    #eventos{display:none}
    .event-list{
      display:grid;
      gap:1.5rem;
      max-width:960px;
      margin:0 auto;
    }
    .event-img{
      width:100%;
      display:block;
      border-radius:18px;
      border:1px solid var(--ring);
      box-shadow:0 16px 40px rgba(0,0,0,.45);
      background:#000;
      object-fit:contain;
    }

    /* Ocultas por menú al cargar */
    #contrataciones,#recursos{display:none}

    footer{padding:2rem 0; color:var(--muted); text-align:center}

    /* Honeypot anti-spam: oculto para humanos, visible para bots (no usar display:none, los bots lo detectan) */
    .hp-field{
      position:absolute; left:-9999px; top:-9999px;
      width:1px; height:1px; opacity:0; pointer-events:none;
    }

    /* Móviles muy pequeños (iPhone SE y similares, <380px) */
    @media(max-width:380px){
      .art{width:56px; height:56px}
      .now{gap:.7rem}
      .controls button{width:36px; height:36px}
      .social-bar{gap:9px}
      .social-btn{width:40px; height:40px}
      .like-btn{width:28px; height:28px; font-size:13px}
      .like-count{font-size:.75rem}
    }