.carrusel {
  perspective: 1000px;
  margin: 40px auto 0 auto;
  width: 700px;
  height: 220px;
  cursor: grab; /* Manito de mover */
  margin: 200px 0 120px 0;
  user-select: none; /* Evita que se seleccione texto al arrastrar */
}

.carrusel:active {
  cursor: grabbing;
}
  .carrusel-inner {
    position: relative;
    width: 100%;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotar 40s infinite linear;
    will-change: transform;
    /* El transform será modificado por JS al arrastrar */
  }

  .carrusel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }
  .carrusel-item .slider-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    background: rgba(180, 180, 180, 0.35); /* Gris claro transparente */
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    border: none;
    margin: 0 10px;
    cursor: pointer;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.08em;
    font-weight: bold;
    transition: box-shadow 0.2s, transform 0.2s;
  }
  .carrusel-item .slider-btn img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
    background: transparent;
    border: 0.5px solid rgba(180,180,180,0.5); /* Borde gris transparente de 0.5px */
  }
  .carrusel-item .slider-btn span {
    color: #fff;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
  }
  .carrusel-item .slider-btn:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    transform: scale(1.04);
  }
  .carrusel-item:nth-child(1) { transform: rotateY(0deg) translateZ(350px);}
  .carrusel-item:nth-child(2) { transform: rotateY(90deg) translateZ(350px);}
  .carrusel-item:nth-child(3) { transform: rotateY(180deg) translateZ(350px);}
  .carrusel-item:nth-child(4) { transform: rotateY(270deg) translateZ(350px);}
  .carrusel-item:nth-child(5) { transform: rotateY(360deg) translateZ(350px);}
  @keyframes rotar {
    from { transform: rotateY(0deg);}
    to { transform: rotateY(360deg);}
  }
  @media (max-width: 800px) {
    .carrusel, .carrusel-inner { width: 98vw; }
    .carrusel-item .slider-btn { width: 120px; height: 120px; }
    .carrusel-item .slider-btn img { width: 60px; height: 60px; }
    .carrusel-item .slider-btn span { font-size: 11px; }
  }

  /* Agrega este bloque para los botones de sitios de interés */
  .interest-button span {
    color: #fff !important;
  }

  @keyframes titilar-rojo {
    0% {
      box-shadow: 0 0 0 0 #ff0000, 0 0 24px 8px #ff0000, 0 0 48px 16px #ff0000;
      filter: brightness(1.7) saturate(2.5);
    }
    50% {
      box-shadow: 0 0 0 18px #ff0000, 0 0 64px 32px #ff0000, 0 0 96px 48px #ff0000;
      filter: brightness(2.5) saturate(4);
    }
    100% {
      box-shadow: 0 0 0 0 #ff0000, 0 0 24px 8px #ff0000, 0 0 48px 16px #ff0000;
      filter: brightness(1.7) saturate(2.5);
    }
  }
  .btn-alerta-accidente {
    animation: titilar-rojo 0.7s infinite;
    position: relative;
    z-index: 1;
    border: 2px solid #fff !important;
    background: #ff0000 !important;
    filter: brightness(1.7) saturate(2.5);
    box-shadow: 0 0 32px 12px #ff0000, 0 0 64px 24px #ff0000;
  }