body {
    font-family: 'Arial', sans-serif;
}
.hero {
    background: url('banner.jpg') no-repeat center center;
    background-size: cover;
    color: white;
    padding: 150px 0;
}
.img-fluid {
width: 100%;
border-radius: 10px;
transition: transform 0.3s ease-in-out;
}

.img-fluid:hover {
transform: scale(1.05);
}

.hero {
background: url('/assets/img/img5.png') no-repeat center center;
background-size: contain;
background-repeat: no-repeat;
background-color: #000; /* color de fondo para espacios vacíos */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
color: white;
}



.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* Capa oscura para contraste */
z-index: -1;
}


.image-container {
display: flex;
justify-content: center;
margin-top: 20px;
}

.hover-image {
width: 80%;
max-width: 600px;
border-radius: 10px;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hover-image:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Hero Carousel */
.hero-carousel {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-carousel .carousel-inner img {
  width: 100%;
  height: 120vh;
  object-fit: cover;
  image-rendering: auto;
}

/* Overlay centrado */
.carousel-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
}

/* Estilo general para secciones con carrusel */
.section-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  image-rendering: auto;
}

.section-carousel .carousel-caption {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 15px;
  color: white;
  text-align: center;
}

/* Aplicación por sección */
#cortes-clasicos,
#mascarillas,
#barba-afeitado {
  /* Marca como sección con carrusel */
  @extend .section-carousel;
}
/* Responsive ajustes */
@media (max-width: 1200px) {
  .hero-carousel {
    height: 90vh;
  }

  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item,
  .hero-carousel .carousel-inner img {
    height: 90vh;
  }
}

@media (max-width: 992px) {
  .hero-carousel {
    height: 80vh;
  }

  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item,
  .hero-carousel .carousel-inner img {
    height: 80vh;
  }

  .carousel-overlay {
    padding: 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .hero-carousel {
    height: 70vh;
  }

  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item,
  .hero-carousel .carousel-inner img {
    height: 70vh;
  }

  .carousel-overlay {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .hero-carousel {
    height: 60vh;
  }

  .hero-carousel .carousel-inner,
  .hero-carousel .carousel-item,
  .hero-carousel .carousel-inner img {
    height: 60vh;
  }

  .carousel-overlay {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
}

section h2::after {
content: '';
display: block;
width: 50px;
height: 3px;
background: #e21212;
margin: 10px auto;
}

/* Estilos para el spinner de carga */
#spinner-overlay {
  position: fixed;
  inset: 0;
  background: #fff; /* Fondo blanco */
  display: flex;
  flex-direction: column; /* Spinner + texto en columna */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #ddd;
  border-top: 6px solid #4d060e; /* Color principal */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

.spinner-text {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  animation: fadeText 1.5s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeText {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Estilos para enlaces de redes sociales */
.social-link {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-link:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#btnTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #070707; /* color principal */
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: none; /* oculto por defecto */
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

#btnTop:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.checkbox-resaltado {
  border: 2px solid #ff0000;
  animation: parpadeo 1s infinite;
}

@keyframes parpadeo {
  0% { box-shadow: 0 0 5px #ff0000; }
  50% { box-shadow: 0 0 15px #ff0000; }
  100% { box-shadow: 0 0 5px #ff0000; }
}

/* Clase personalizada para Luz de Luna */
.bg-luzdeluna-green {
    background-color: #386641 !important; /* Usamos el código hexadecimal que identificamos */
}

/* También puedes sobrescribir el color del texto para que sea legible */
.navbar-luzdeluna .nav-link,
.navbar-luzdeluna .navbar-brand {
    color: #F3E5DC !important; /* Usamos el Crema de Marfil para el texto */
}

.navbar-luzdeluna .nav-link:hover {
    color: #D4A373 !important; /* Usamos el Oro Rosado para el hover */
}