@font-face {
  font-family: "Baby Doll";
  src: url("../fonts/babydoll.woff2") format("woff2"),
    url("../fonts/babydoll.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*--------------------------------------------------------------
# FASES
--------------------------------------------------------------*/

.ticket-card {
  transition: transform 0.3s ease-in-out;
}

.ticket-card .card-header h4 {
  color: white !important;
}

.ticket-card:hover {
  transform: scale(1.05);
}

.current-stage {
  box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.3);
  animation: breathe 3s infinite ease-in-out;
}

.sold-stage {
  opacity: 0.6;
  cursor: not-allowed;
}
.sold-stage .card-header {
  background-color: #e22322 !important;
}

.disabled-stage {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes breathe {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

/*--------------------------------------------------------------
# EVENT LANDING
--------------------------------------------------------------*/
#landing h1,
#landing h2,
#landing h3,
#landing h4,
#landing h5 {
  font-family: "Baby Doll", sans-serif;
}

.font-primary {
  font-family: "Baby Doll", sans-serif;
}

p.general {
  font-size: 1rem;
}
@media (min-width: 992px) {
  p.general {
    font-size: 2rem;
  }
}

hr.divisor {
  border: none;
  height: 4px; /* Grosor de la línea */
  background-color: white; /* Color de la línea */
  width: 80%; /* Ajusta el ancho según necesites */
  margin: 15px auto; /* Centrado con espacio arriba y abajo */
  opacity: 1;
}

.btn-comprar {
  background: #e64d29;
  border-radius: 3rem;
  color: white;
  padding: .5rem 1rem;
  font-size: 1rem;
  margin-bottom: 2rem;
}
.btn-comprar:hover {
  background: black;
  border-radius: 3rem;
  color: white;
}

@media (min-width: 992px) {
  .btn-comprar {
    padding: 1rem 2rem;
    font-size: 2rem;
    letter-spacing: 0.3rem;
    margin-bottom: 2rem;
  }
}

/*--------------------------------------------------------------
# SPONSORS
--------------------------------------------------------------*/
#sponsor1 {
  background-color: #427a57;
  padding: 1rem;
}
#sponsor2 {
  background-color: #478560;
  padding: 1rem;
}

@media (min-width: 992px) {
  #sponsor1 {
    padding: 2rem 15rem;
  }
  #sponsor2 {
    padding: 2rem 15rem;
  }
}

/*--------------------------------------------------------------
# FASES
--------------------------------------------------------------*/

#fases {
  background-color: #f6da8c;
  text-align: center;
  padding-bottom: 2rem;
}

#fases h2 {
  font-size: 5rem;
  margin-bottom: 2rem;
  border-bottom: 4px solid white;
}

#fases .nombre {
  color: #e54d29;
}
#fases .nombre,
#fases .costo {
  font-size: 2.5rem;
  margin-bottom: 0;
}
#fases .cantidad {
  font-weight: bold;
}

#fases .fase {
  margin-bottom: 2.5rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fases .fase .dash {
  position: absolute;
  max-width: 750px;
}

@media (min-width: 992px) {
  #fases h2 {
    font-size: 10rem;
    margin-bottom: 5rem;
  }

  #fases .nombre {
    color: #e54d29;
  }
  #fases .nombre,
  #fases .costo {
    font-size: 4rem;
  }

  #fases .cantidad {
    font-size: 1.5rem;
  }
}

/*--------------------------------------------------------------
# CERVEZA
--------------------------------------------------------------*/

#beer {
  background-color: #f6da8c;
  text-align: center;
}

#beer .corcholata {
  max-width: 10rem;
}

#beer .paquete {
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
}
#beer .nombre {
  color: #e54d29;
}
#beer .nombre,
#beer .costo {
  font-size: 2.5rem;
  margin-bottom: 0;
}
#beer .cantidad {
  font-weight: bold;
}

#beer .fase {
  margin-bottom: 2.5rem;
}

.costBeerInEvent {
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.costBeerInEvent img {
  max-width: 1.5rem;
  margin: 0 1rem;
}

@media (min-width: 992px) {
  #beer .corcholata {
    max-width: 20rem;
  }

  #beer h2 {
    font-size: 10rem;
    margin-bottom: 5rem;
  }

  #beer .nombre {
    color: #e54d29;
  }
  #beer .nombre,
  #beer .costo {
    font-size: 4rem;
  }

  #beer .cantidad {
    font-size: 1.5rem;
  }

  .costBeerInEvent img {
    max-width: 1.5rem;
    margin: 0 1rem;
  }
  .costBeerInEvent p {
    font-size: 2rem;
  }

  #beer .disclamer {
    font-size: 2rem;
    font-weight: bold;
  }
}

/*--------------------------------------------------------------
# LUGARES DE PREVENTA
--------------------------------------------------------------*/

#lugares {
  background-color: #e64d29;
  padding: 3rem 0;
}

#lugares h2 {
  color: white;
  font-size: 2.5rem;
}

#lugares .pos {
  display: flex;
  gap: 2rem;
  justify-content: center;
}
#lugares .pos img {
  max-width: 100px;
  max-height: 50px;
}

@media (min-width: 992px) {
  #lugares h2 {
    font-size: 5rem;
  }

  #lugares .pos {
    gap: 5rem;
  }
  #lugares .pos img {
    max-width: 250px;
    max-height: 120px;
  }
}

/*--------------------------------------------------------------
# TRANSPORTE
--------------------------------------------------------------*/

#transporte {
  background-color: #5c9971;
  padding: 3rem 0;
}

#transporte h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 992px) {
  #transporte h2 {
    font-size: 5rem;
    margin-bottom: 2rem;
  }
}
#transporte img {
  max-width: 750px;
}
/*--------------------------------------------------------------
# ESTACIONAMIENTO
--------------------------------------------------------------*/

#estacionamiento {
  background-color: #df5639;
  padding: 3rem 0;
}

#estacionamiento h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 992px) {
  #estacionamiento h2 {
    font-size: 5rem;
    margin-bottom: 2rem;
  }
}
#estacionamiento img {
  max-width: auto;
}

/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/

#footerPic {
  background-color: #f6da8c;
  padding: 5rem 0;
}

#footerPic img {
  max-width: 200px;
}

@media (min-width: 992px) {
  #footerPic img {
    max-width: 400px;
  }
}