/* ==================== FUENTES ==================== */
@font-face {
  font-family: 'Titulos';
  src: url('font/titulos.woff2') format('woff2');
}
@font-face {
  font-family: 'Textos';
  src: url('font/textos.woff2') format('woff2');
}

/* ==================== RESET ==================== */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Textos', sans-serif;
  background-color: #fff;
  color: #000;
  text-align: center;
}

/* ==================== HEADER ==================== */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#000;
  padding:10px 20px;
  position:relative;
  z-index:1000;
}
header .logo { height:60px; margin-left:10px; }
.header-left { display:flex; align-items:center; }
.header-right { display:flex; align-items:center; }
.search-icon { width:30px; height:30px; cursor:pointer; margin-left:10px; }
.search-input { display:none; padding:5px 10px; margin-left:5px; border-radius:5px; border:1px solid #ccc; }

/* ==================== MENÚ HAMBURGUESA ==================== */
.hamburger {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:30px;
  height:22px;
  cursor:pointer;
}
.hamburger span {
  display:block;
  height:4px;
  background:#fff;
  border-radius:2px;
  transition:all 0.3s;
}
.hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

#side-menu {
  position:fixed;
  top:0; left:-300px;
  width:300px; height:100%;
  background:#000; color:#fff;
  padding:20px;
  transition:0.3s;
  z-index:999;
}
#side-menu.active { left:0; }
#side-menu .menu-close {
  font-size:30px;
  cursor:pointer;
  margin-bottom:20px;
}
#side-menu .social-icons { display:flex; gap:10px; margin-bottom:20px; }
#side-menu .social-icons img { width:30px; }
#side-menu .menu-items { list-style:none; padding:0; }
#side-menu .menu-items li { margin-bottom:15px; }
#side-menu .menu-items li a { color:#fff; text-decoration:none; font-family:'Titulos',sans-serif; }

/* ==================== CARRUSEL ==================== */
.mini-carousel { width:80%; margin:20px auto; position:relative; }
.carousel-content { position:relative; height:300px; display:flex; justify-content:center; align-items:center; }
.resultado { display:none; flex-direction:column; align-items:center; transition: opacity 0.5s; }
.resultado.active { display:flex; opacity:1; }
.resultado img { max-width:100%; height:auto; }
.carousel-buttons { display:flex; justify-content:space-between; margin-bottom:10px; }
.carousel-buttons button { background:#000; color:#fff; border:none; padding:10px 20px; cursor:pointer; }

/* ==================== GENEROS ==================== */
.generos { width:90%; margin:40px auto; display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.genero { width:150px; text-align:center; text-decoration:none; color:#000; font-family:'Textos',sans-serif; }
.genero img { width:150px; height:150px; display:block; margin-bottom:5px; }

/* ==================== CONTRATACIONES ==================== */
.contrataciones { margin:40px auto; width:80%; text-align:center; }
.contrataciones .precio { font-size:24px; margin-bottom:15px; }
.contrataciones form input, .contrataciones form textarea { display:block; width:100%; margin-bottom:10px; padding:8px; font-family:'Textos',sans-serif; }
.contrataciones form button { padding:10px 20px; font-family:'Titulos',sans-serif; cursor:pointer; background:#000; color:#fff; border:none; }

/* ==================== EVENTOS ==================== */
.eventos { margin:40px auto; width:80%; }
.evento { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.evento img { width:150px; height:150px; object-fit:cover; }
.evento-info { text-align:left; }

/* ==================== BOTÓN DIGITAL ==================== */
.digital-btn { margin:30px auto; text-align:center; }
.digital-btn img { max-width:100%; height:auto; display:inline-block; }

/* ==================== FOOTER HORIZONTAL ==================== */
footer {
  background: #000;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  font-family: 'Textos', sans-serif;
}

footer .footer-logo {
  height:60px;
  display:block;
}

footer .footer-content {
  flex:1;
  min-width:300px;
}

footer .footer-content p {
  line-height:1.4;
  margin-bottom:10px;
}

footer .social-icons {
  display:flex;
  gap:10px;
  margin-bottom:10px;
}

footer .social-icons img {
  width:30px;
  height:auto;
}

footer .footer-menu {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:10px;
  list-style:none;
  padding:0;
}

footer .footer-menu li a {
  color:#fff;
  text-decoration:none;
  font-family:'Titulos',sans-serif;
}

footer .copyright {
  width:100%;
  text-align:center;
  margin-top:10px;
}