.container-media {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 9999;
}

/* BOTONES BASE */
.btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    transition: all 0.4s ease;
    transform: scale(1);
}

/* COLORES */
.whatsapp { background: #25D366; }
.facebook { background: #1877F2; }
.instagram { background: #E1306C; }
.tiktok { background: #000000; }
.youtube { background: #FF0000; }
.nextdoor { background: #2DBE60; }
.maps { background: #4285F4; }
.toggle { background: #2c3e50; cursor: pointer; }

/* ESTADO CERRADO (OCULTO) */
.container-media:not(.open) .item {
    opacity: 0;
    transform: translateY(20px) scale(0.5);
    pointer-events: none;
}

/* ESTADO ABIERTO */
.container-media.open .item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ANIMACIÓN EN CASCADA */
.container-media.open .item:nth-child(1) { transition-delay: 0.05s; }
.container-media.open .item:nth-child(2) { transition-delay: 0.10s; }
.container-media.open .item:nth-child(3) { transition-delay: 0.15s; }
.container-media.open .item:nth-child(4) { transition-delay: 0.20s; }
.container-media.open .item:nth-child(5) { transition-delay: 0.25s; }
.container-media.open .item:nth-child(6) { transition-delay: 0.30s; }
.container-media.open .item:nth-child(7) { transition-delay: 0.35s; }

/* HOVER EFECTO */
.btn:hover {
    transform: scale(1.15);
}

/* BOTÓN TOGGLE SIEMPRE VISIBLE */
.toggle {
    position: relative;
    z-index: 10;
}