From e631a4ce7c253df6beffa5863ae6b27a7717f0eb Mon Sep 17 00:00:00 2001
From: "maria.ruiz" <zs22016128@estudiantes.uv.mx>
Date: Mon, 10 Mar 2025 07:59:41 +0000
Subject: [PATCH] Actualizar Interfaz/estilos/Artistas.css

---
 Interfaz/estilos/Artistas.css | 230 +++++++++++++++++++---------------
 1 file changed, 129 insertions(+), 101 deletions(-)

diff --git a/Interfaz/estilos/Artistas.css b/Interfaz/estilos/Artistas.css
index c4f08da..ac8821a 100644
--- a/Interfaz/estilos/Artistas.css
+++ b/Interfaz/estilos/Artistas.css
@@ -1,101 +1,129 @@
-body {
-  font-family: 'Trebuchet MS', sans-serif;
-  background-color: #2E2E2E;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-.background-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: -1; /* Para que quede de fondo */
-}
-
-.linea {
-  position: absolute;
-  width: 1000px; 
-}
-
-
-.linea2 {
-  position: absolute;
-  width: 1300px; 
-}
-
-.linea:nth-child(2) { top: 32%; left: -10%; }
-.linea2:nth-child(1) { top: 26%; right: 37%; }
-.linea:nth-child(4) { bottom: 36%; left: 50%; }
-.linea2:nth-child(3) { bottom: 15%; right: -21%; }
-
-.blur-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(12, 15, 20, 0.76); 
-  backdrop-filter: blur(10px); 
-  z-index: 0; 
-}
-
-.titulo {
-  position: relative; 
-  z-index: 1; 
-  color: aliceblue;
-  font-size: 20px; 
-  text-align: center;
-  margin-top: 60px; 
-}
-
-#pelicula {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 70vh;
-  gap: 40px;
-  margin-top: 20px;
-}
-
-.artista {
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  width: 450px;
-  height: 450px;
-  transition: transform 0.3s ease;
-}
-
-.artista:hover {
-  transform: scale(1.15);
-}
-
-.artista img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.artista:hover .overlay {
-  opacity: 1;
-}
\ No newline at end of file
+body {
+  font-family: 'Trebuchet MS', sans-serif;
+  background-color: #d9d9d9;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.background-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1; /* Para que quede de fondo */
+}
+
+.linea {
+  position: absolute;
+  width: 1000px; 
+}
+
+
+.linea2 {
+  position: absolute;
+  width: 1300px; 
+}
+
+.linea:nth-child(2) { top: 32%; left: -10%; }
+.linea2:nth-child(1) { top: 26%; right: 37%; }
+.linea:nth-child(4) { bottom: 36%; left: 50%; }
+.linea2:nth-child(3) { bottom: 15%; right: -21%; }
+
+.blur-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(140, 144, 150, 0.76); 
+  backdrop-filter: blur(10px); 
+  z-index: 0; 
+}
+
+.titulo {
+  position: relative; 
+  z-index: 1; 
+  color: rgb(64, 64, 64);
+  font-size: 20px; 
+  text-align: center;
+  margin-top: 60px; 
+}
+
+#pelicula {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 70vh;
+  gap: 40px;
+  margin-top: 20px;
+}
+
+.artista {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  width: 450px;
+  height: 450px;
+  transition: transform 0.3s ease;
+}
+
+.artista:hover {
+  transform: scale(1.15);
+}
+
+.artista img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.artista:hover .overlay {
+  opacity: 1;
+}
+
+.back-button {
+  position: absolute;
+  top: 60px; 
+  left: 40px; 
+  font-size: 24px; 
+  color: white; 
+  text-decoration: none; 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px; 
+  height: 50px;
+  border-radius: 50%; 
+  background: rgba(255, 255, 255, 0.1); /* Un leve fondo para mejor visibilidad */
+  transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3); /* Efecto hover más visible */
+  transform: scale(1.1); /* Aumenta ligeramente el tamaño */
+}
+
+.arrow {
+  font-size: 30px; /* Asegura que la flecha sea grande */
+  pointer-events: none; /* Permite que el clic en la flecha también active el botón */
+}
+