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: 100vh;
  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;
}