diff --git a/Interfaz/estilos/Artistas.css b/Interfaz/estilos/Artistas.css
new file mode 100644
index 0000000..c4f08da
--- /dev/null
+++ b/Interfaz/estilos/Artistas.css
@@ -0,0 +1,101 @@
+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
diff --git a/Interfaz/estilos/Inicio.css b/Interfaz/estilos/Inicio.css
new file mode 100644
index 0000000..744e1b4
--- /dev/null
+++ b/Interfaz/estilos/Inicio.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f9f7f4;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.barra {
+  display:flex;
+  justify-content: space-between;
+  padding: 20px;
+  font-size: 18px;
+}
+
+.barra a {
+  text-decoration: none;
+  color: black;
+  margin: 0 15px;
+}
+.logout {
+  border: 2px solid black;
+  padding: 8px 15px;
+  border-radius: 20px;
+  cursor: pointer;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80vh;
+}
+.title {
+  font-family: "Lilita One", sans-serif;
+  text-align: center;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 118px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 40px;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.ventaBoletos, .reporteVenta {
+  background-color: #ffaa33;
+  padding: 20px;
+  width: 250px;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: 20px;
+  position: relative;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ventaBoletos span {
+  position: absolute;
+  right: 20px;
+  background: #444;
+  color: white;
+  padding: 10px 15px;
+  border-radius: 15px;
+}
+
+.reporteVenta span {
+  position: center;
+  right: 20px;
+  background: #444;
+  color: white;
+  padding: 10px 15px;
+  border-radius: 15px;
+}
+
diff --git a/Interfaz/estilos/ventaboletos.css b/Interfaz/estilos/ventaboletos.css
new file mode 100644
index 0000000..b6381d9
--- /dev/null
+++ b/Interfaz/estilos/ventaboletos.css
@@ -0,0 +1,79 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f8f7f3; 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; 
+  margin: 0; 
+}
+
+.dias {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+.dias button {
+  padding: 12px;
+  border: 1px solid #ccc;
+  background: white;
+  cursor: pointer;
+  color:rgb(61, 61, 61);
+}
+.dias button.selected {
+  background: rgb(51, 108, 212);
+  color: white;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 30px);
+  gap: 5px;
+  margin-bottom: 30px;
+}
+.asiento {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  cursor: pointer;
+  background-color: rgb(249, 207, 129);
+  color: rgb(61, 61, 61);
+  font-size: 12px;
+}
+.asiento.vendido {
+  background-color: red;
+  cursor: not-allowed;
+}
+.boton-vender {
+  padding: 10px 20px;
+  background: rgb(119, 182, 119);
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius:  18%;
+}
+
+.asiento, .asiento:focus, .asiento:active {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.inicio-container {
+  position: absolute;
+  top: 10px; 
+  left: 100px; 
+}
+
+.inicio-btn {
+  font-size: 16px;
+  padding: 8px 12px;
+}
+
+.conjunto{
+  justify-content: center;
+  align-items: center;
+}
+
+