/* efecto de pasar el ratón sobre cuadro */

.voice-box-celeste:hover,
.voice-box-orange:hover,
.voice-box-amarillo:hover,
.voice-box-lila:hover,
.voice-box-naranja-cableado:hover,
.voice-box-verde-cableado:hover,
.voice-box-azul-cableado:hover,
.voice-box-amarillo-cableado:hover,
.voice-box-celeste-row1:hover,
.voice-box-orange-row1:hover,
.voice-box-amarillo-row1:hover,
.voice-box-lila-row1:hover,
.voice-box-celeste-row2:hover,
.voice-box-orange-row2:hover,
.voice-box-amarillo-row2:hover,
.voice-box-lila-row2:hover,
.voice-box-celeste-row3:hover,
.voice-box-orange-row3:hover,
.voice-box-amarillo-row3:hover,
.voice-box-lila-row3:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.voice-box-celeste {
  background-color: rgba(248, 249, 250, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 4px solid #00BFFF;                                       /* #004e89 azul para el borde */
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-orange {
  background-color: rgba(255, 69, 0, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 4px solid #FF4500;
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-amarillo {
  background-color: rgba(255, 255, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 4px solid #E6D700;
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-lila {
  background-color: rgba(147, 112, 219, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 4px solid #E369C4;
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-naranja-cableado {
  #background-color: rgba(248, 249, 250, 0.1);
  #box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(255, 69, 0, 1);                                       
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-verde-cableado {
  #background-color: rgba(248, 249, 250, 0.1);
  #box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(100, 200, 100, 1);                                      
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-azul-cableado {
  #background-color: rgba(248, 249, 250, 0.1);
  #box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(0, 78, 200, 1);                                   
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-amarillo-cableado {
  #background-color: rgba(248, 249, 250, 0.1);
  #box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(230, 215, 0, 1);                                      
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* box row1 */

.voice-box-celeste-row1 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(255, 69, 0, 1);                                  
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-orange-row1 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(255, 69, 0, 1);
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-amarillo-row1 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(255, 69, 0, 1);
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-lila-row1 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(255, 69, 0, 1);
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* box row2 */

.voice-box-celeste-row2 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(0, 78, 200, 1);                                      
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-orange-row2 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(0, 78, 200, 1);  
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-amarillo-row2 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(0, 78, 200, 1);  
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-lila-row2 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(0, 78, 200, 1);  
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* box row3 */

.voice-box-celeste-row3 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(100, 200, 100, 1);                                      
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-orange-row3 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(100, 200, 100, 1);
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-amarillo-row3 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(100, 200, 100, 1);
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.voice-box-lila-row3 {
  background-color: rgba(248, 249, 250, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(100, 200, 100, 1);
  padding: 15px 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/*texto intermitente*/
.blink-text {
  font-weight: 600;
  font-size: 17px;
  animation: parpadeo 1s infinite;
}

@keyframes parpadeo {
  0%   { color: #FF0000; }  /* Rojo */
  50%  { color: #CDA434; }  /* Amarillo */ #ffff00
  100% { color: #FF0000; }  /* Rojo */
}

/*capa blanca intermedia para evitar combinacion de colores*/
.inter-layer {
  background-color: #ffffff; /* capa blanca */
  width: 62%;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 24px;
}