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

html, body {
  overflow-x: hidden;
}

body {
  scroll-behavior: smooth;
}

/* === NAVBAR === */
.imagenNavegador { width: 100px; }
.cabeza { background-color: #535864; }
.comprarTickets { color: rgb(52,155,72); }

/* === CAROUSEL === */
.imagenCarousel { filter: brightness(50%); }

.carousel-caption {
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  padding: 0 10px !important;
  text-align: center !important;
}

.textoCarosel { text-align: right; margin: 0; }
.margenBotones { margin-right: 10px; }
.textoCaroselMargen { margin-bottom: 100px; }

.carousel { overflow: hidden; }
.carousel-inner { display: flex; transition: transform 0.5s ease; }

/* === BREAKPOINTS === */
@media (max-width: 725px) {
  .textoCarosel { font-size: 10px; }
  .textoCaroselMargen { margin: 0; }
}

@media (max-width: 450px) {
  .textoCarosel { font-size: 6px; }
}

/* === TITULOS === */
.tituloPrincipal { font-size: medium; }
.tituloSecundario { font-size: 40px; }

/* === SECCION PLAYA === */
.imagenPlaya {
  width: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.imagenPlaya img {
  max-width: 100%;
  display: block;
}

.imagenPlayaPrincipal { width: 70%; }

@media (max-width: 600px) {
  .imagenPlaya { flex-direction: column; }
  .imagenPlayaPrincipal { width: 100%; }
}

.fondoPlaya { background-color: #333; }

.textoPlaya { margin-left: 10px; font-size: small; }

/* === FOOTER === */
.pie {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: rgb(29,73,98);
  height: auto;
  align-items: center;
  margin-top: 30px;
  padding: 10px 0 !important;
}

.pie li { list-style: none; }
.pieDecoracion { text-decoration: none; color: white; }

@media (max-width: 870px) {
  .pie { flex-direction: column; gap: 8px; }
}

/* === 320px === */
@media (max-width: 320px) {
  .textoCarosel { font-size: 8px; text-align: center; }
  .textoCaroselMargen { margin-bottom: 10px; }
  .margenBotones { margin-right: 5px; }
  .imagenPlayaPrincipal { width: 100%; }
  .textoPlaya { font-size: 12px; margin-left: 5px; }

  h1, h2 { font-size: 20px; text-align: center; }
  .tituloSecundario { font-size: 28px; }

  .navbar-brand img { width: 70px; }
  .navbar-brand { font-size: 14px; }

  .pie { gap: 6px; }
}

/* Evitar superposición del texto del carrusel con los indicadores */
.carousel-caption {
  bottom: 80px !important; /* Subimos el texto */
}

/* En móviles bajamos los indicadores y subimos más el texto */
@media (max-width: 576px) {
  .carousel-caption {
    bottom: 110px !important;
  }

  .carousel-indicators {
    bottom: 10px !important; /* los bajamos */
  }
}
.carousel-indicators {
  bottom: 40px !important; /* Subimos los indicadores */
}