/* Traffic light semaforo styles */
.traffic-container{display:flex;gap:60px;align-items:center;justify-content:center;margin-top:60px;flex-wrap:wrap}
.traffic-box{width:160px;height:420px;border-radius:24px;background:#1a1c22;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;box-shadow:0 20px 50px rgba(0,0,0,.8), inset 0 -10px 25px rgba(0,0,0,.5)}
.light{width:100px;height:100px;border-radius:50%;border:none;cursor:pointer;transition:all .3s ease;position:relative;filter:brightness(.4)}
.light:hover{filter:brightness(.6)}
.red-light{background:radial-gradient(circle at 35% 30%,#ff6b6b,#cc0000)}
.yellow-light{background:radial-gradient(circle at 35% 30%,#ffd166,#d4a017)}
.green-light{background:radial-gradient(circle at 35% 30%,#7efc9b,#1fa64b)}
.light.active{filter:brightness(1);box-shadow:0 0 30px currentColor, inset 0 -8px 20px rgba(0,0,0,.6)}
.traffic-info{display:flex;flex-direction:column;align-items:center;gap:20px}
.traffic-label{font-weight:900;color:#f8fafc;font-size:28px;text-align:center;min-height:40px}
.traffic-state{font-size:24px;font-weight:700;padding:12px 20px;border-radius:12px;background:rgba(255,255,255,.05);color:#e6eef8;min-width:200px;text-align:center;border-left:4px solid transparent}

@media (max-width:768px){
  .traffic-container{gap:40px;margin-top:40px}
  .traffic-box{width:140px;height:380px;padding:20px}
  .light{width:80px;height:80px}
  .traffic-label{font-size:24px}
  .traffic-state{font-size:20px;min-width:160px}
}

@media (max-width:420px){
  .traffic-container{flex-direction:column;gap:30px}
  .traffic-box{width:130px;height:360px;padding:16px}
  .light{width:70px;height:70px}
  .traffic-label{font-size:20px}
  .traffic-state{font-size:18px;min-width:140px}
}