/* ============================================================
   THE WALK - sonido.css
   Botón de sonido universal
   ============================================================ */

/* ---------- BOTÓN PRINCIPAL ---------- */
#sonido,
.sonido-btn {
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  
  width: 120px;
  height: 120px;
  
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  color: rgba(255, 255, 255, 0.25);
  font-size: 48px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1;
  
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  outline: none;
  -webkit-tap-highlight-color: transparent;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- HOVER ---------- */
#sonido:hover,
.sonido-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---------- ACTIVO ---------- */
#sonido.active,
.sonido-btn.active {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(105, 170, 93, 0.35);
  background: rgba(105, 170, 93, 0.10);
  box-shadow: 0 0 40px rgba(105, 170, 93, 0.05);
}

/* ---------- SILENCIO ---------- */
#sonido.silence,
.sonido-btn.silence {
  color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
}

/* ---------- RESPIRACIÓN ---------- */
#sonido.breath,
.sonido-btn.breath {
  animation: sonidoBreathe 8s ease-in-out infinite;
}

@keyframes sonidoBreathe {
  0% { 
    opacity: 0.5; 
    transform: translate(-50%, -50%) scale(1); 
  }
  25% { 
    opacity: 0.9; 
    transform: translate(-50%, -50%) scale(1.04); 
  }
  50% { 
    opacity: 0.5; 
    transform: translate(-50%, -50%) scale(1); 
  }
  75% { 
    opacity: 0.9; 
    transform: translate(-50%, -50%) scale(1.04); 
  }
  100% { 
    opacity: 0.5; 
    transform: translate(-50%, -50%) scale(1); 
  }
}

/* ---------- TAMAÑOS ---------- */
#sonido.large,
.sonido-btn.large {
  width: 140px;
  height: 140px;
  font-size: 56px;
}

#sonido.small,
.sonido-btn.small {
  width: 80px;
  height: 80px;
  font-size: 32px;
}

#sonido.xsmall,
.sonido-btn.xsmall {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

/* ---------- DESPLAZAMIENTO ---------- */
.sonido-offset-y-10  { transform: translate(-50%, calc(-50% + 10px)); }
.sonido-offset-y-20  { transform: translate(-50%, calc(-50% + 20px)); }
.sonido-offset-y-30  { transform: translate(-50%, calc(-50% + 30px)); }
.sonido-offset-y--10 { transform: translate(-50%, calc(-50% - 10px)); }
.sonido-offset-y--20 { transform: translate(-50%, calc(-50% - 20px)); }
.sonido-offset-y--30 { transform: translate(-50%, calc(-50% - 30px)); }

.sonido-offset-x-10  { transform: translate(calc(-50% + 10px), -50%); }
.sonido-offset-x-20  { transform: translate(calc(-50% + 20px), -50%); }
.sonido-offset-x--10 { transform: translate(calc(-50% - 10px), -50%); }
.sonido-offset-x--20 { transform: translate(calc(-50% - 20px), -50%); }

.sonido-offset-xy-10-20 { transform: translate(calc(-50% + 10px), calc(-50% + 20px)); }
.sonido-offset-xy--10-20 { transform: translate(calc(-50% - 10px), calc(-50% + 20px)); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  #sonido,
  .sonido-btn {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
  
  #sonido.large,
  .sonido-btn.large {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  #sonido,
  .sonido-btn {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  #sonido.large,
  .sonido-btn.large {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
  
  #sonido.small,
  .sonido-btn.small {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sonido.breath,
  .sonido-btn.breath {
    animation: none;
  }
  
  #sonido:hover,
  .sonido-btn:hover {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* TEMPORAL - SOLO PARA VERIFICACIÓN */
#volver, .volver-btn,
#reset-btn, .reset-btn,
#sound-mode, .mode-btn,
.nav-dot,
.zona-card,
.zona-btn {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    pointer-events: auto !important;
    transition: none !important;
}

/* Mantener el botón de sonido igual (no se toca) */
#sonido {
    opacity: 1 !important;
    /* ya es visible por defecto */
}