:root {
      --jarxiel-banner-url: url("../img/banner-hero.webp");
      --jarxiel-profile-url: url("../img/perfil-1000.webp");
      --bg: #040507;
      --panel: rgba(255,255,255,.065);
      --panel-strong: rgba(255,255,255,.105);
      --text: #ffffff;
      --muted: rgba(255,255,255,.68);
      --faint: rgba(255,255,255,.12);
      --cyan: #00f5ff;
      --blue: #1c6cff;
      --green: #31ff9d;
      --violet: #a855f7;
      --gold: #ffb23f;
      --orange: #ff6b35;
      --max: 1180px;
      --radius: 26px;
      --shadow: 0 24px 80px rgba(0,0,0,.46);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 15% 8%, rgba(0,245,255,.14), transparent 34rem),
        radial-gradient(circle at 82% 10%, rgba(168,85,247,.15), transparent 32rem),
        radial-gradient(circle at 50% 72%, rgba(49,255,157,.07), transparent 30rem),
        var(--bg);
      color: var(--text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .22;
      background-image:
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.16) 42.25% 42.55%, transparent 42.8% 100%),
        linear-gradient(65deg, transparent 0 54%, rgba(0,245,255,.12) 54.2% 54.45%, transparent 54.7% 100%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 900px 700px, 760px 620px, 46px 46px, 46px 46px;
      mask-image: radial-gradient(circle at center, black, transparent 80%);
      z-index: -1;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }

    .container { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; }
    .section { padding: 108px 0; position: relative; }
    .section.compact { padding-top: 84px; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--cyan);
      text-transform: uppercase;
      letter-spacing: .22em;
      font-size: .76rem;
      font-weight: 800;
    }
    .eyebrow::before {
      content: "";
      width: 34px;
      height: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--violet));
      box-shadow: 0 0 16px var(--cyan);
    }
    h1, h2, h3 { margin: 0; line-height: .95; text-transform: uppercase; }
    h1, h2 { font-family: Anton, Impact, sans-serif; font-weight: 400; letter-spacing: .025em; }
    h1 { font-size: clamp(5rem, 17vw, 14.5rem); text-shadow: 0 0 36px rgba(0,245,255,.23); }
    h2 { font-size: clamp(3rem, 8vw, 7rem); margin-top: 14px; }
    h3 { font-size: 1.05rem; letter-spacing: .08em; }
    p { color: var(--muted); line-height: 1.8; margin: 0; }

    .gradient-line {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), rgba(255,255,255,.75), transparent);
      box-shadow: 0 0 20px rgba(0,245,255,.44);
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(0,245,255,.18);
      background: rgba(4,5,7,.7);
      backdrop-filter: blur(18px);
    }
    .nav {
      width: min(1320px, calc(100% - 28px));
      margin: 0 auto;
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 950;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(0,245,255,.55);
      border-radius: 13px;
      background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(0,245,255,.06));
      box-shadow: 0 0 26px rgba(0,245,255,.22), inset 0 0 18px rgba(255,255,255,.08);
      font-family: Anton, sans-serif;
      font-size: 1.35rem;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .nav-links a {
      padding: 12px 10px;
      border-radius: 999px;
      color: rgba(255,255,255,.72);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      transition: .24s ease;
    }
    .nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(0,245,255,.22); }
    .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--faint); border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; }
    .menu-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: #fff; transition: .2s; }

    .hero {
      min-height: 100svh;
      display: grid;
      align-items: center;
      padding: 124px 0 54px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      background:
        linear-gradient(90deg, rgba(4,5,7,.92), rgba(4,5,7,.62) 45%, rgba(4,5,7,.9)),
        radial-gradient(circle at 72% 45%, rgba(0,245,255,.22), transparent 30rem),
        var(--jarxiel-banner-url) center/cover no-repeat;
      transform: scale(1.03);
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: linear-gradient(180deg, transparent 62%, var(--bg));
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 42px;
      align-items: end;
    }
    .hero-copy { animation: rise .8s ease both; }
    .hero-subtitle {
      margin-top: 14px;
      font-size: clamp(1.35rem, 3vw, 2.35rem);
      color: #fff;
      font-weight: 900;
      letter-spacing: -.035em;
    }
    .hero-text { max-width: 690px; margin-top: 18px; font-size: 1.04rem; }
    .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 50px;
      padding: 0 20px;
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      color: #fff;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .055em;
      font-size: .82rem;
      box-shadow: inset 0 0 0 1px rgba(0,245,255,.08);
      transition: transform .24s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease;
      cursor: pointer;
    }
    .btn:hover { transform: translateY(-3px); border-color: rgba(0,245,255,.8); background: rgba(0,245,255,.1); box-shadow: 0 0 24px rgba(0,245,255,.24), inset 0 0 18px rgba(0,245,255,.1); }
    .btn.primary { background: linear-gradient(90deg, rgba(0,245,255,.95), rgba(168,85,247,.85)); color: #020305; border-color: transparent; }
    .btn.gold:hover { border-color: var(--gold); box-shadow: 0 0 26px rgba(255,178,63,.22); }

    .artist-card {
      min-height: 470px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 34px;
      background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      animation: float 5.6s ease-in-out infinite;
    }
    .artist-card::before {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 26px;
      border: 1px solid rgba(0,245,255,.24);
      box-shadow: inset 0 0 40px rgba(0,245,255,.07);
    }
    .cutout {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 55% 28%, rgba(255,255,255,.12), transparent 14rem),
        linear-gradient(180deg, transparent 18%, rgba(0,245,255,.08) 64%, rgba(168,85,247,.12));
    }
    .cutout img {
      position: absolute;
      right: -52px;
      bottom: -8px;
      width: min(122%, 560px);
      height: auto;
      max-width: none;
      filter: drop-shadow(0 28px 44px rgba(0,0,0,.6)) drop-shadow(0 0 28px rgba(0,245,255,.22));
      z-index: 2;
    }
    .cutout::after {
      content: "JARXIEL";
      position: absolute;
      left: 50%; bottom: 42px;
      transform: translateX(-50%);
      font-family: Anton, sans-serif;
      font-size: 4rem;
      letter-spacing: .08em;
      opacity: .16;
      text-shadow: 0 0 32px var(--cyan);
      z-index: 1;
    }
    .deck {
      position: absolute;
      left: 45%; top: 55%;
      width: 236px; height: 156px;
      transform: translate(-50%, -35%);
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(0,0,0,.48);
      box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 0 26px rgba(255,255,255,.08);
    }
    .deck::before, .deck::after {
      content: "";
      position: absolute;
      top: 44px;
      width: 76px; height: 76px;
      border-radius: 50%;
      border: 9px solid rgba(255,255,255,.2);
      box-shadow: 0 0 22px rgba(0,245,255,.18);
    }
    .deck::before { left: 32px; }
    .deck::after { right: 32px; }
    .meters { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); display: flex; gap: 5px; align-items: end; height: 36px; }
    .meters i { width: 6px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: meter 1s ease-in-out infinite alternate; }
    .meters i:nth-child(2) { height: 30px; background: var(--green); animation-delay: .12s; }
    .meters i:nth-child(3) { height: 18px; background: var(--violet); animation-delay: .25s; }
    .meters i:nth-child(4) { height: 34px; background: var(--gold); animation-delay: .4s; }
    .meters i:nth-child(5) { height: 24px; background: var(--cyan); animation-delay: .54s; }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 42px;
    }
    .section-head p { max-width: 550px; }

    .bio-grid {
      display: grid;
      grid-template-columns: .95fr 1.25fr;
      gap: 28px;
      align-items: stretch;
    }
    .photo-box, .card, .video-card, .mix-card, .music-card, .product-card, .contact-card {
      border: 1px solid rgba(255,255,255,.13);
      background: linear-gradient(160deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
      border-radius: var(--radius);
      box-shadow: 0 18px 60px rgba(0,0,0,.25);
    }
    .photo-box {
      min-height: 540px;
      overflow: hidden;
      position: relative;
      padding: 26px;
    }
    .photo-placeholder {
      height: 100%; min-height: 488px;
      border-radius: 22px;
      border: 1px solid rgba(0,245,255,.28);
      background:
        linear-gradient(180deg, transparent, rgba(0,0,0,.74)),
        var(--jarxiel-profile-url) center/cover no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 28px;
      position: relative;
      overflow: hidden;
    }
    .photo-placeholder strong { font-family: Anton, sans-serif; font-size: 3.7rem; line-height: .9; letter-spacing: .04em; z-index: 1; text-shadow: 0 10px 34px #000; }
    .photo-placeholder span { color: var(--cyan); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; z-index: 1; text-shadow: 0 8px 24px #000; }

    .bio-content { display: flex; flex-direction: column; gap: 18px; }
    .bio-story { padding: 34px; }
    .bio-story p { font-size: 1.08rem; color: rgba(255,255,255,.78); }
    .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
    .stat-card { padding: 24px; position: relative; overflow: hidden; }
    .stat-card::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 120px; height: 120px; border-radius: 999px; background: rgba(0,245,255,.1); filter: blur(14px); }
    .stat-card b { display: block; font-size: 2rem; margin-bottom: 8px; color: #fff; }

    .category-block + .category-block { margin-top: 46px; }
    .category-title { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
    .category-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
    .cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
    .video-card { overflow: hidden; }
    .thumb {
      aspect-ratio: 16 / 10;
      background:
        linear-gradient(135deg, rgba(0,245,255,.2), rgba(168,85,247,.16)),
        linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25% 50%, rgba(255,255,255,.07) 50% 75%, transparent 75%);
      background-size: auto, 26px 26px;
      display: grid;
      place-items: center;
      position: relative;
    }
    .play { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 0 24px rgba(0,245,255,.18); }
    .play::before { content: ""; border-left: 16px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
    .video-body, .mix-card, .music-card, .product-card { padding: 22px; }
    .video-body p, .mix-card p, .music-card p, .product-card p { margin: 10px 0 18px; }

    .mix-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
    .mix-card { position: relative; overflow: hidden; }
    .wave { display: flex; gap: 4px; height: 54px; align-items: center; margin: 18px 0 10px; }
    .wave i { flex: 1; min-width: 3px; border-radius: 999px; height: calc(12px + var(--h) * 1px); background: linear-gradient(180deg, var(--cyan), var(--violet)); opacity: .85; }
    .meta-row { display: flex; justify-content: space-between; color: var(--muted); font-size: .82rem; font-weight: 800; text-transform: uppercase; }

    .music-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
    .cover { aspect-ratio: 1; border-radius: 20px; margin-bottom: 18px; display: grid; place-items: center; background: radial-gradient(circle at 28% 24%, rgba(0,245,255,.45), transparent 10rem), linear-gradient(140deg, rgba(255,255,255,.13), rgba(0,0,0,.2)); border: 1px solid rgba(255,255,255,.1); font-family: Anton, sans-serif; font-size: 3rem; letter-spacing: .08em; }
    .link-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
    .pill { border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.78); padding: 8px 10px; border-radius: 999px; font-size: .75rem; font-weight: 850; text-transform: uppercase; }
    .pill:hover { color: #fff; border-color: var(--cyan); }

    .gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 135px; gap: 14px; }
    .gallery-item {
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.12);
      overflow: hidden;
      position: relative;
      background: linear-gradient(135deg, rgba(0,245,255,.18), rgba(168,85,247,.18)), rgba(255,255,255,.05);
      min-height: 120px;
    }
    .gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
    .gallery-item:nth-child(2) { grid-column: span 2; }
    .gallery-item:nth-child(3) { grid-column: span 1; grid-row: span 2; }
    .gallery-item:nth-child(4) { grid-column: span 2; }
    .gallery-item:nth-child(5) { grid-column: span 2; }
    .gallery-item:nth-child(6) { grid-column: span 2; }
    .gallery-art { width: 100%; height: 100%; background: radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,.28), transparent 10rem), linear-gradient(var(--a), rgba(0,245,255,.18), rgba(255,255,255,.04), rgba(168,85,247,.16)); transform: scale(1.01); transition: .5s ease; }
    .gallery-art.photo-profile { background: linear-gradient(180deg, transparent, rgba(0,0,0,.62)), var(--jarxiel-profile-url) center/cover no-repeat; }
    .gallery-art.photo-cutout { background: radial-gradient(circle at 50% 28%, rgba(0,245,255,.28), transparent 11rem), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.42)); display: grid; place-items: end center; }
    .gallery-art.photo-cutout img { max-height: 100%; width: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
    .gallery-item:hover .gallery-art { transform: scale(1.08); filter: saturate(1.25); }
    .gallery-item span { position: absolute; left: 18px; bottom: 16px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 8px 20px #000; }

    .shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
    .product-image { aspect-ratio: 1; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(0,245,255,.08)); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; margin-bottom: 18px; color: rgba(255,255,255,.35); font-family: Anton, sans-serif; font-size: 2rem; }
    .price { color: var(--cyan); font-weight: 950; font-size: 1.25rem; margin: 8px 0 18px; }

    .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
    .contact-card { padding: 30px; }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    .field.full { grid-column: 1 / -1; }
    label { display: block; margin-bottom: 8px; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); }
    input, select, textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 16px;
      background: rgba(0,0,0,.26);
      color: #fff;
      padding: 15px 16px;
      outline: none;
    }
    textarea { min-height: 145px; resize: vertical; }
    input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,245,255,.1); }
    .social-list { display: grid; gap: 12px; margin-top: 20px; }
    .social-list a { display: flex; justify-content: space-between; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.83); font-weight: 900; }
    .social-list a:hover { border-color: rgba(0,245,255,.55); color: #fff; transform: translateX(3px); }

    footer { padding: 52px 0 34px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.35); }
    .footer-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 26px; align-items: start; }
    .footer-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px 18px; }
    .footer-links a { color: rgba(255,255,255,.65); font-weight: 800; font-size: .82rem; text-transform: uppercase; }
    .footer-links a:hover { color: var(--cyan); }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
    @keyframes meter { from { height: 10px; } to { height: 36px; } }

    @media (max-width: 1080px) {
      .nav-links { position: fixed; top: 74px; left: 14px; right: 14px; display: none; flex-direction: column; align-items: stretch; padding: 16px; border: 1px solid rgba(0,245,255,.2); border-radius: 22px; background: rgba(4,5,7,.94); backdrop-filter: blur(18px); }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 14px 16px; }
      .menu-toggle { display: block; }
      .hero-grid, .bio-grid, .contact-grid { grid-template-columns: 1fr; }
      .artist-card { min-height: 360px; max-width: 520px; width: 100%; }
      .cards-grid, .music-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .mix-grid, .shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-links { justify-content: start; }
    }

    @media (max-width: 720px) {
      .section { padding: 78px 0; }
      .hero { padding-top: 112px; }
      h1 { font-size: clamp(4.5rem, 23vw, 7rem); }
      h2 { font-size: clamp(2.75rem, 15vw, 4.5rem); }
      .section-head { display: block; }
      .section-head p { margin-top: 18px; }
      .cta-row, .form-grid { display: grid; grid-template-columns: 1fr; }
      .btn { width: 100%; }
      .stat-grid, .cards-grid, .music-grid, .mix-grid, .shop-grid { grid-template-columns: 1fr; }
      .photo-box, .bio-story, .contact-card { padding: 20px; }
      .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
      .gallery-item, .gallery-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
      .gallery-item:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
    }
  
body.admin-bar .site-header { top: 32px; }
.gallery-art.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.gallery-art.photo-cutout.has-image { background-size: contain; background-position: center bottom; }
.product-image.has-image { background-size: cover; background-position: center; color: transparent; }
.thumb.has-image { background-size: cover; background-position: center; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }