❮ ❯ .carrusel-trata-container { max-width: 800px; /* Ajusta este valor al ancho de tus otros banners */ margin: 20px auto; position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .carrusel-slide { display: none; text-align: center; } .carrusel-slide.slide-activa { display: block; } .carrusel-slide img { width: 100%; height: auto; display: block; } /* Botones de navegación */ .btn-carrusel { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: #ffffff; font-size: 24px; font-weight: bold; border: none; padding: 12px 16px; cursor: pointer; border-radius: 4px; transition: background-color 0.3s ease; user-select: none; } .btn-carrusel:hover { background-color: rgba(0, 0, 0, 0.8); } .btn-prev { left: 10px; } .btn-next { right: 10px; } /* Puntos indicativos */ .carrusel-puntos { text-align: center; position: absolute; bottom: 15px; width: 100%; } .punto { cursor: pointer; height: 12px; width: 12px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; display: inline-block; transition: background-color 0.3s ease; } .punto.activo, .punto:hover { background-color: #900C3F; /* Color institucional adaptado al diseño */ }
