@charset "utf-8";
/* CSS Document */

:root{
  --pink:#ff0099;
  --black:#000000;
  --white:#ffffff;
  --ink:#111214;
  --muted:#777;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--ink);
  background:#fff;
  line-height:1.55;
}

.container{width:min(1100px, 92%); margin:0 auto}

/* === Estilo de enlaces blancos === */
a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #ff0099; /* cambia a rosa al pasar el mouse */
  text-decoration: underline;
}


.topbar{
  background: linear-gradient(90deg, var(--black), var(--pink));
  color:#fff; font-size:.9rem;
}
.topbar .container{display:flex; gap:24px; padding:.5rem 0; flex-wrap:wrap; justify-content:center}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.logo{height:100px; width:auto}
.logo.small{height:40px}

.nav{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.nav a{color:#111; text-decoration:none; font-weight:600; padding:.4rem .6rem; border-radius:8px}
.nav a:hover{background:#f5f5f7}
.btn-outline{
  border:2px solid var(--pink);
  color:var(--pink); background:transparent;
  padding:.45rem .9rem; border-radius:999px; cursor:pointer; font-weight:700;
}
.btn-outline:hover{background:rgba(255,0,153,.08)}

.hero{
  position:relative; min-height:64vh;
  background: url("img/PHOTO-2025-11-10-12-34-40_6.jpg") center/cover no-repeat fixed;
  display:grid; place-items:center; margin-bottom:10px;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
}
.hero-content{position:relative; text-align:center; color:#fff; padding:3rem 0}
.hero h1{font-size: clamp(32px, 5vw, 56px); margin:.2em 0}
.tag{color:var(--pink)}
.hero p.meta{opacity:.9; font-weight:600}

.section{padding:56px 0}
.section h2{font-size: clamp(28px, 3.6vw, 40px); margin:0 0 18px}
.section h3{margin:18px 0 8px}
.section p{margin:0 0 12px}

.cards-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{
  padding:16px; border-radius:var(--radius);
  background:#fff; box-shadow: var(--shadow);
  border:1px solid #eee;
}
.card h3{color:var(--pink); margin-top:4px}

.gradient-band{
  height:16px; background: linear-gradient(90deg, var(--black), var(--pink));
}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.cols-2{
  columns:2; column-gap:24px;
}
.bullet{padding-left:18px}
.bullet li{margin:6px 0}

.note{
  background:#fff0f8; border:1px dashed var(--pink); border-radius:12px; padding:12px; margin-top:12px
}

/* Costos + CTA */
.price-grid{align-items:stretch}
.price-card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:18px 20px;
  box-shadow: var(--shadow);
}
.price-card h3{color:var(--pink)}
.price-card ul{list-style:none; padding:0; margin:0}
.price-card li{padding:8px 0; border-bottom:1px dashed #eee}
.price-card li:last-child{border-bottom:none}

.cta{margin-top:26px; text-align:center}
.btn-primary{
  display:inline-block; background:linear-gradient(90deg,var(--black),var(--pink));
  color:#fff; text-decoration:none; padding:14px 24px; border-radius:999px; font-weight:800; letter-spacing:.3px; box-shadow: var(--shadow)
}
.btn-primary:hover{filter:brightness(1.05)}
.cta-sub{color:#444; margin-top:8px}

/* Tablas de puntuación */
table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow: var(--shadow)}
th, td{padding:10px 12px; border-bottom:1px solid #f0f0f0}
th{background:#fafafa; text-align:left}
tr.total td{background:#fff5fb; font-weight:800}
.medals td:nth-child(2){font-weight:700; color:var(--pink)}

/* Música / boletos */
.ticket{
  background:linear-gradient(135deg, #fff, #ffe6f5);
  border:1px solid #ffd6f0; border-radius:16px; padding:16px
}

/* Galería */
.gallery{
  display:grid; gap:10px;
  grid-template-columns: repeat(2, 1fr);
}
.gallery img{
  width:100%; height:260px; object-fit:cover; border-radius:12px; box-shadow: var(--shadow)
}
@media (min-width: 900px){
  .gallery{grid-template-columns: repeat(4, 1fr)}
}

/* Footer */
.footer{
  margin-top:40px; color:#fff;
  background: linear-gradient(90deg, var(--black), var(--pink));
}
.footer-grid{
  display:grid; grid-template-columns:2.2fr; gap:14px; align-items:center; padding:22px 0
}
.footer a{color:#fff; text-decoration:none}
.footer .links{display:flex; flex-direction:column; gap:8px}

/* Modal reglamento */
.no-scroll{overflow:hidden}
.modal{position:fixed; inset:0; display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.modal-content{
  position:relative; z-index:2; width:min(900px, 92%); margin:6vh auto; background:#fff; border-radius:18px; overflow:hidden; box-shadow: var(--shadow)
}
.modal-header{
  display:flex; align-items:center; gap:14px; padding:12px 18px;
  background: linear-gradient(90deg, var(--black), var(--pink)); color:#fff
}
.modal-logo{height:44px; width:auto}
.modal-body{padding:18px; max-height:70vh; overflow:auto}
.modal-body h4{margin:16px 0 6px; color:var(--pink)}
.modal-close{
  position:absolute; right:10px; top:10px; background:#fff; color:#000; border:none;
  width:36px; height:36px; border-radius:999px; font-size:18px; cursor:pointer; box-shadow: var(--shadow)
}

/* Utilidades y responsivo */
@media (max-width: 900px){
  .cards-4{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav{gap:8px}
}

/* Banners full width */
.banner-full img{
  width:100%;
  height:60vh;
  object-fit:cover;
  display:block;
}

/* Sección split */
.section-split{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  min-height:60vh;
}
.section-split .split-text,
.section-split .split-image{flex:1 1 50%; min-width:300px}
.section-split .split-text{padding:40px; background:#fff}
.section-split .split-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.section-split.reverse{flex-direction:row-reverse}
.section-split h2{color:var(--pink)}

/* === HAMBURGER MENU === */
.hamburger {
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:28px;
  height:22px;
  background:none;
  border:none;
  cursor:pointer;
}
.hamburger span {
  display:block;
  height:3px;
  background:#ff0099;
  border-radius:2px;
  transition:.3s;
}
.hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
@media(max-width:900px){
  .hamburger{display:flex;}
  .nav{
    position:absolute; top:70px; left:0; right:0;
    background:#fff; flex-direction:column; align-items:center;
    padding:20px 0; display:none;
    box-shadow:0 4px 20px rgba(0,0,0,.1);
    animation:slideDown .4s ease forwards;
  }
  .nav.active{display:flex;}
  @keyframes slideDown{
    from{opacity:0; transform:translateY(-20px);}
    to{opacity:1; transform:translateY(0);}
  }
}

/* === ANIMACIONES FADE-UP === */
.fade-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease, transform .9s ease;
}
.fade-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* === Botón de cierre del menú (✕) === */
.close-menu {
  display:none;
  background:none;
  border:none;
  font-size:2rem;
  color:#ff0099;
  position:absolute;
  top:10px;
  right:20px;
  cursor:pointer;
}
@media (max-width:900px){
  .close-menu{display:block;}
}