@font-face {
    font-family: 'Flame-bold';
    src: url(/font/flame-bold.ttf);
}
@font-face {
    font-family: 'Flame-regular';
    src: url(/font/flame-regular.ttf);
}
body {
  background-color: #F9ECE4;
  /* background-image: url('/img/beachon2025/sand1.svg') !important; */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

}
.olas {
background-image: url('/img/beachon2025/mar-pleca.png');
min-height: 184px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
h1, h2, h3, h4, h5, button {
    font-family: 'Flame-bold' !important;
    color: #024C3E;
}
p, span {
    font-family:  'Flame-regular' !important;
    color: #024C3E;
}
/* btn-wrapper */
.boton-wrapper {
  position: relative;
  height: 100px;
  margin-top: 1vh; /* simula que el botón está más abajo en la página */
  background: transparent;
}

.boton-fijo {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 30px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 16px;
  border-radius: 8px;
  z-index: 999;
  transition: all 0.3s ease;
} @media (max-width:450px) {
  .boton-fijo {
    padding: 10px 20px !important;
    font-size: 16px !important;
  }
}

.boton-wrapper.stop .boton-fijo {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
}
/* end */
.header {
  min-height: 550px;
  flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header .contenido {
  position: relative;
   
}
.header .contenido .beach-on-logo {
  max-width: 850px;
}
.header .izquierda-logo {
  position: absolute;
  bottom: 40px;
  left: 10px;
}
.heaer .contenido__responsive {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.header .derecha-logo {
  position: absolute;
  bottom: 40px;
  right: 10px;
} @media (max-width:391px) {
  .header .derecha-logo, .header .izquierda-logo {
    bottom: 120px;
    right: 10px;
  }
}
.descripcion__contenido {
    h1 { 
        font-size: 5em;
    }
}
.tercera-edicion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tercera-edicion .imagenes {
  padding-top: 2em;
}

 .fechas {
    position: relative;
    width: 100%;
    overflow: hidden;
 }
.fechas .botella {
    position: absolute;
    left: -140px;
    top: 250px;
    z-index: 0;
}
.fechas .estrella {
    position: absolute;
    right: -140px;
    top: 240px;
    z-index: 2;
} @media (max-width: 42em) {
  .fechas .estrella {
    position: absolute;
    right: -240px;
    top: 800px !important;
    z-index: 2;
}
}
/*  
.fechas__contenido {   
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    z-index: 200;
} */


.fechas__contenido a {
    background-color: #F9ECE4 !important;
    color: #024C3E !important;
    border: 6px solid #024C3E !important;
    border-radius: 3em !important;
    font-size: 1.4em;
    padding: 10px 55px;

    font-family: 'Flame-bold' !important;
    z-index: 1;
}

.inscripcion {
  overflow: hidden;
}


/* Botones */
.calendario-container {
  min-height: 200px;
}
.image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;
}


.switch-container {
  position: absolute;
  top: -20px;
}
.switch {
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid #004736;
  z-index: 100;
}



.switch button {
  border: none;
  padding: 10px 30px;
  width:150px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5rem;
  font-family: 'Arial Rounded MT Bold', sans-serif;
  transition: all 0.3s ease;
}

.active {
  background-color: #004736;
  color: #FFEEDC;
}

.inactive {
  background-color: #FFEEDC;
  color: #004736;
}


.image-container img {
  display: none;
  max-width: 100%;
  margin-top: 30px;
 
}

.image-container img.active-img {
  display: block;
}

/* Endbotones */


.gallery-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.gallery {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.images-wrapper {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.slide {
  min-width: 100%;
  display: none;
  object-fit: cover;
}

.slide.active {
  display: block;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  color: #444;
  cursor: pointer;
  padding: 12px 20px;
  z-index: 1;
  border-radius: 100%;
}

.nav.prev {
  left: 8px;
}

.nav.next {
  right: 8px;
}

.dots {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background: #F9ECE4 !important;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #aaa;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
  cursor: pointer;
}

.dot.active {
  background-color: #444;
}


/* Responsive */
@media (max-width: 480px) {
  .gallery-container {
    border-radius: 8px;
  }

  .nav {
    font-size: 24px;
    padding: 6px 10px;
  }

  .dot {
    height: 8px;
    width: 8px;
  }
}


.patrocinadores {
  min-height: 200px;

}
.patrocinadores-m {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.footer {
    background-color: #024C3E;
    color: #F9ECE4 !important;
    overflow: hidden;
}
.footer .contacto {
  color: #F9ECE4;
}
.footer .brands {
  display: flex;

  gap: 10px;
}
.footer .enlaces {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.estrella-m, .botella-m {
  display: none;
}
/* Responsive */
@media (max-width: 480px) {
  .estrella, .botella {
    display: none;
  }

  .estrella-m, .botella-m {
    display: block;
  }
  .botella-m {
    position: absolute;
    width: 140px;
    left: 5px;
    bottom: 200px;
    z-index: 200;
  }

  .estrella-m {
    position: absolute;
    width: 100px;
    right: 10px;
    bottom: 200px;
  }
  
}