/* Estilos generales y decorativos */
.text-primary:hover {
    text-decoration: underline !important; /* Muestra un subrayado al pasar el ratón */
}

/* Para móvil: el carrusel siempre con mismo alto */
@media (max-width: 768px) {
  #carouselExampleSlidesOnly .carousel-item {
    height: 50vh; /* Ajusta a lo que quieras (60vh, 80vh, etc.) */
  }

  #carouselExampleSlidesOnly .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center; /* centra la foto */
  }
}


.smaller-image {
    height: 400px; /* Establece la altura máxima deseada para todas las imágenes */
    object-fit: cover; /* Asegura que la imagen se ajuste al contenedor sin perder proporciones */
    width: 100%; /* Opcional, dependiendo de si quieres que la imagen ocupe todo el ancho disponible */
}

.custom-background {
    position: relative;
    overflow: hidden;
}

.custom-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/Mallorcan_Ceramics.jpg');
    background-size: cover; /* Cubrirá todo el contenedor */
    background-attachment: fixed;
    background-position: center; /* Centra la imagen en el contenedor */
    z-index: -1; /* Asegura que el fondo está detrás del contenido */
}

/* Estilos para el contenedor de información general */
.info-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Desactiva los eventos del ratón para todos los hijos excepto .image-container */
.info-container > *:not(.image-container) {
    pointer-events: none;
}

/* Estilos para el contenedor de imágenes */
.image-container {
    position: relative;
    width: 100%; /* Asegura que cubre el ancho necesario */
    pointer-events: auto; /* Asegura que los eventos del ratón son capturados aquí */
}

/* Configuración del overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Suaviza la transición */
}

/* Activa el overlay al hacer hover sobre image-container */
.image-container:hover .overlay {
    opacity: 1;
    visibility: visible;
}

/* Estilos para el botón dentro del overlay */
.ver-mas {
    transition: opacity 0.3s ease; /* Suaviza la transición del botón */
}

.ver-mas:hover {
    opacity: 1; /* Aumenta la opacidad al hacer hover */
}

.new-badge {
    position: absolute;
    top: 0px;  
    left: -5px; 
    background-color: red;
    color: white;
    padding: 10px;
    font-size: 1em;
    font-weight: bold;
    z-index: 10;
    border-radius: 50%;
    width: 60px;
    height: 60px; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}