* {
                                                      box-sizing: border-box;
                                                    }

    .carousel {
      position: relative;
      max-width: 100%;
      height: 500px;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
                                                    .slide img {
                                                      width: 100%;
                                                      height: 100%;
                                                      object-fit: cover;
                                                      opacity: 0.8; /* Solo opacidad de la imagen, sin color extra */
                                                    }

                                                    .slide.active {
                                                      opacity: 1;
                                                    }


                                                    .overlay-color {
                                                      position: absolute;
                                                      top: 0;
                                                      left: 0;
                                                      width: 100%;
                                                      height: 100%;
                                                      background-color: rgba(0, 0, 255, 0.9);
                                                      z-index: 1;
                                                    }                                                    
                                                    
                                                    .text-overlay {
                                                      position: absolute;
                                                      top: 0;
                                                      left: 0;
                                                      width: 100%;
                                                      height: 100%;
                                                      display: flex;
                                                      align-items: center;
                                                      justify-content: center;
                                                      color: white;
                                                      font-size: 3vw; /* Se adapta al ancho de la pantalla */
                                                      text-align: center;
                                                      padding: 20px;
                                                      text-shadow: 2px 2px 8px rgba(0, 0, 0, 2);
                                                    }