body{

    margin:0;
    background:#050505;
    color:white;
    font-family:'Cinzel',serif;

}

/* NAVBAR */
.top-nav {
  width: 100%;
   background:url('imgcum/fondonav.png');
  padding: 14px 40px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* HAMBURGUESA */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #38c6f1;
}


.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.logo-icon {
  width: 60px;
  height: 60px;
  background: #43a0ec;
  color: var(--aqua);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.logo-text {
  font-size: 18px;
  color: #60b6ef;
}

/* LINKS */
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #4f8bf1;
  font-weight: 500;
  font-size: 16px;
}

.nav-links a:hover {
  opacity: 0.9;
}

/* BUTTON */
.nav-button {
  background: var(--black);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(42, 203, 206, 0.25);
}


.hero{

    min-height:100vh;

    background:url('imgcum/fondomiku.png');

    background-size:cover;
    background-position:center;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}

.heroContent{

    position:relative;

    z-index:2;

}

.hero h1{

    font-size:5rem;

    color:#d4af37;

    margin:0;

}

.royalBtn{

    background:
    linear-gradient(
        135deg,
        #d8b4fe,
        #a855f7,
        #7c3aed
    );

    color:white;

    border:none;

    padding:18px 40px;

    border-radius:50px;

    font-size:1.2rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 8px 25px
    rgba(124,58,237,.35);

     position:relative;

    overflow:hidden;

}

.royalBtn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 12px 35px
    rgba(124,58,237,.45);

}

.royalBtn:active{

    transform:
    translateY(0);

}

.royalBtn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

    transition:.6s;

}

.royalBtn:hover::before{

    left:100%;

}

/* =========================================
modal venta
========================================= */
.ticketModal{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    rgba(0,0,0,.75);

    z-index:9999;

    justify-content:center;

    align-items:center;

}

.ticketContent{

    width:90%;

    max-width:700px;

    max-height:90vh;

    overflow-y:auto;

    padding:40px;

    border-radius:30px;

    background:
    linear-gradient(
        180deg,
        #fff7ff,
        #f5e9ff
    );

    border:3px solid #d8b4fe;

}

.ticketHeader{

    text-align:center;

    margin-bottom:25px;

}

.ticketTitle{

    font-family:'Cinzel',serif;

    font-size:2.2rem;

    color:#7c3aed;

    margin-bottom:10px;

}

.ticketSubtitle{

    color:#6b4b91;

    font-size:1rem;

}

.ticketBankInfo{

    background:rgb(159, 174, 247);

    border:2px dashed #d8b4fe;

    border-radius:20px;

    padding:20px;

    text-align:center;

    margin-bottom:20px;

    color: #050505;
    font-size: 2rem;

}

.ticketBankInfo h3{

    color:#7c3aed;

    margin-bottom:10px;

}

.ticketBankInfo p{

    font-size:1.2rem;

    font-weight:700;

}

.ticketEventInfo{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:25px;

    color:#6b4b91;

    font-weight:500;

}

.ticketGride{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}

.ticketField label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#5b3c88;

}

.ticketInput{

    width:100%;

    padding:15px 5px;

    border:none;

    border-radius:25px;

    background:white;

    box-shadow:
    0 4px 15px rgba(139,92,246,.12);

    font-size:1rem;

}

.ticketFile{

    width:100%;

    background:rgb(87, 100, 248);

    border-radius:20px;

    padding:15px;

    box-shadow:
    0 4px 15px rgba(139,92,246,.12);

}

.ticketSubmit{

    width:100%;

    margin-top:25px;

    border:none;

    border-radius:50px;

    padding:18px;

    cursor:pointer;

    font-size:1.1rem;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        #d8b4fe,
        #a855f7,
        #7c3aed
    );

    box-shadow:
    0 8px 25px rgba(124,58,237,.35);

    transition:.3s;

}

.ticketSubmit:hover{

    transform:translateY(-3px);

    box-shadow:
    0 12px 35px rgba(124,58,237,.45);

}

.ticketClose{

    position:absolute;

    top:20px;

    right:25px;

    font-size:2rem;

    font-weight:700;

    cursor:pointer;

    color:#7c3aed;

    transition:.3s;

}

.ticketClose:hover{

    transform:scale(1.2);

}

.anniversary{

    font-size:2rem;

    color:white;

}

.hero h2{

    color:#f8d76d;

    font-size:3rem;

}

.hero h3{

    font-size:2rem;

    border:2px solid #d4af37;

    display:inline-block;

    padding:15px 40px;

}

.btnPrimary{

    display:inline-block;

    margin-top:30px;

    padding:15px 35px;

    background:#d4af37;

    color:black;

    text-decoration:none;

    border-radius:8px;

    font-weight:bold;

}

.eventInfo{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    padding:60px;

}

.infoCard{

    border:1px solid #d4af37;

    padding:20px;

    text-align:center;

}

.about{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:50px;

    padding:80px;

}

.aboutText{

    max-width:600px;

}

.aboutText h2{

    color:#d4af37;

}

.aboutImage img{

    max-width:350px;

}

.activities{

    text-align:center;

    padding:80px 40px;

}

.activityGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:40px;

}

.activityGrid div{

    border:1px solid #d4af37;

    padding:25px;

}

.mask{

    height: 200px;
    width: auto;
}


.tickets{

    padding:100px 40px;

    text-align:center;

}

.ticketGrid{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:40px;

}

.ticket{

    width:320px;

    border:1px solid #d4af37;

    padding:40px;

}

.ticket.vip{

    background:
    linear-gradient(
    135deg,
    #20102d,
    #090909
    );

}

.price{

    font-size:3rem;

    color:#d4af37;

    margin:25px 0;

}

.ticket button{

    background:#d4af37;

    border:none;

    padding:15px 30px;

    cursor:pointer;

    font-weight:bold;

}

/* FOOTER */
.footer {
  padding: 40px;
  text-align: center;
  background: #050510;
  opacity: 0.85;
}


@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-text {
    text-align: center;
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: var(--aqua);
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-button {
    display: none;
  }

  .mask{

    height: 100px;
    width: auto;
}

  .ticket{

    width:220px;

    border:1px solid #d4af37;

    padding:40px;

}
}

@media (max-width: 700px) {
  .nav-links {
    display: none;
  }

  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-text {
    text-align: center;
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: var(--aqua);
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-button {
    display: none;
  }

  .hero h1{

    font-size:3rem;

    color:#d4af37;

    margin:0;

}

.royalBtn{

    background:
    linear-gradient(
        135deg,
        #d8b4fe,
        #a855f7,
        #7c3aed
    );

    color:white;

    border:none;

    padding:18px 40px;

    border-radius:50px;

    font-size:1.2rem;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 8px 25px
    rgba(124,58,237,.35);

     position:relative;

    overflow:hidden;

}

.royalBtn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 12px 35px
    rgba(124,58,237,.45);

}

.royalBtn:active{

    transform:
    translateY(0);

}

.royalBtn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

    transition:.6s;

}

.royalBtn:hover::before{

    left:100%;

}

.anniversary{

    font-size:1rem;

    color:white;

}

.hero h2{

    color:#f8d76d;

    font-size:2rem;

}

.hero h3{

    font-size:1rem;

    border:2px solid #d4af37;

    display:inline-block;

    padding:10px 20px;

  }


  .mask{

    height: 80px;
    width: auto;
  }

  .ticket{

    width:180px;

    border:1px solid #d4af37;

    padding:10px;

   }

.about{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:20px;

}

.aboutText{

    max-width:400px;

}

.miku_masquerade{

    width:180px;

    height: auto;

}

}

@media(max-width:768px){

    .ticketGrid{

        grid-template-columns:2fr;

    }

    

    .ticketContent{

        width:95%;

        padding:25px;

    }

    .ticketTitle{

        font-size:1.8rem;

    }



}

.copyBtn{

    margin-top:15px;

    border:none;

    padding:12px 25px;

    border-radius:30px;

    cursor:pointer;

    font-weight:600;

    color:white;

    background:
    linear-gradient(
        135deg,
        #d8b4fe,
        #a855f7
    );

}