/* Contenedor principal*/
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}


.montserrat {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* Reset básico para todos los elementos */
* {
  margin: 0; /* Elimina márgenes predeterminados */
  padding: 0; /* Elimina rellenos predeterminados */
  box-sizing: ;
  border-box; /* Incluye bordes y rellenos en el ancho total */
}

/* Estilo general del cuerpo */
body {
  font-family: "Montserrat" , serif; /* Fuente predeterminada */
  line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
  background-color: #ededed; /*Color gris en el fondo*/
}

/* Encabezado */
header {
  background-color: inherit;/*Mismo color de fondo que el body*/
  padding: 1em; /* Espacio interno */
  text-align: center; /* Centra el texto horizontalmente */
}

nav {
      background-color: rgba(114, 172, 245, 0.3); /* Fondo azul claro */
      border: 1px solid #1c5193; /* Borde azul */
      padding: 1em; /* Espacio interno */
      border-radius: 10px;
    }

    /* Lista principal de navegación */
    nav ul {
      list-style: none; /* Elimina los puntos o números de la lista */
      display: flex; /* Coloca los elementos en fila */
      justify-content: space-evenly; /* Espacio uniforme entre los elementos */
      margin-top: 0;
    }

    /* Elementos individuales de la lista */
    nav li {
      position: relative; /* Necesario para posicionar submenús respecto al elemento padre */
    }

    /* Estilo para los enlaces del menú principal */
    nav a {
      text-decoration: none; /* Elimina el subrayado de los enlaces */
      color: #1c5193; /* Color de texto azul oscuro */
      padding: 10px 15px; /* Espaciado interno */
      display: block; /* Hace clicable toda el área */
    }

    nav a:hover {
      color: #0d335f; /* Oscurece el texto al pasar el ratón */
    }

    /* Submenú oculto inicialmente */
    nav li ul {
      display: none; /* Oculta los submenús por defecto */
      position: absolute; /* Posiciona el submenú relativo al padre */
      top: 100%; /* Coloca el submenú justo debajo del padre */
      left: 0; /* Alinea el submenú al borde izquierdo del padre */
      background-color: or: rgba(114, 172, 245, 0.3); /* Fondo azul claro */
      border: 1px solid #1c5193; /* Borde azul oscuro */
      border-radius: 5px;
      padding: 0; /* Espaciado interno eliminado para evitar el "margen" visual */
      opacity: 0; /* Inicialmente invisible */
      visibility: hidden; /* Oculto para el flujo visual */
      transform: translateY(-10px); /* Desplazado hacia arriba */
      transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease; /* Transición del fondo */
    }

    /* Mostrar submenú al pasar el ratón */
    nav li:hover > ul {
      display: block; /* Hace visible el submenú */
      opacity: 0.8; /* Visible con suavidad */
      visibility: visible; /* Aparece en el flujo visual */
      transform: translateY(0); /* Vuelve a su posición original */
      background-color: rgba(114, 172, 245); /* Fondo del submenú cambia completamente al color oscuro */
    }

    /* Estilo para enlaces dentro del submenú */
    nav li ul li a {
      color: white; /* Texto blanco inicialmente */
      padding: 10px 15px; /* Espaciado interno */
      display: block; /* Ocupa todo el ancho */
      transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave en color */
    }

    /* Hover en elementos del submenú */
    nav li ul li a:hover {
      background-color: #0d335f; /* Fondo azul más oscuro */
      color: white; /* Texto blanco */
    }
/* Contenedor principal para la sección y la barra lateral */
.contenido-principal {
  display: flex; /* Coloca los elementos hijos en una fila */
  margin: 1em; /* Espacio externo alrededor del contenedor */
  gap: 1em; /* Espacio uniforme entre los elementos */
}


/* Bloque principal de contenido */
section {
  flex: 2.5; /* Ocupa 2.5 partes del espacio disponible */
  background-color: #a9a9a9; /* Fondo blanco */
  border: 1px solid #444444; /* Borde gris oscuro */
  border-radius: 10px;
  padding: 1em; /* Espacio interno */
}

section p {
  color: #ffffff;
  font-size: 20px;
  text-align: justify;
}

.slider {
      width: 300px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .slider-inner {
      display: flex;
      height: 400px;
      width: 500px; /* Depende de la cantidad de imágenes */
      animation: slide 12s infinite;
    }

    .slider-inner img {
      width: 100%;
      flex-shrink: 0;
    }

    @keyframes slide {
      0% { transform: translateX(0%); }
      11% { transform: translateX(-50%); }
      22% { transform: translateX(-150%); }
      33% { transform: translateX(-250%); }
      44% { transform: translateX(-350%); }
      55% { transform: translateX(-450%); }
      66% { transform: translateX(-550%); }
      77% { transform: translateX(-650%); }
      88% { transform: translateX(-750%); }
      99% { transform: translateX(-850%); }
      99% { transform: translateX(0%); }
    }

    .fotos_aside{
      display: flex;
      flex-direction: column;
      margin-top: 15px;
      border-radius: 5px;
      height: 160px;
      width: 160px;
    }

.aside_videos {
  display: block;
}

.agus {
  border-radius: 5px;
  height: 200px;
  width: 200px;
}

#foto_trama {
  border-radius: 10px;
}

#foto {
  background-image: url(imagenes/lqsa1.jpeg);
  background-size: cover;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  transition: 0.6s ease;
}

#foto:hover {
  cursor: pointer;
  background-image: url(imagenes/lqsa2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 400px;
  height: 400px;
  border-radius: 10px;
}

button:hover {
  cursor: pointer;
}

#delantera_pichichi {
  background-image: url(imagenes/delantera_pichichi.jpeg);
  height: 400px;
  width: 400px;
  border-radius: 10px;
  background-size: cover;
  background-position:center;

}

#boxeador_campeon {
  background-image: url(imagenes/boxeador_campeon.jpeg);
  height: 120px;
  width: 160px;
  border-radius: 10px;
  background-size: cover;
  background-position:center;

}

#casino {
  background-image: url(imagenes/casino.jpeg);
  height: 120px;
  width: 160px;
  border-radius: 10px;
  background-size: cover;
  background-position:center;

}

#tomas_1 {
  background-image: url(imagenes/tomas1.jpg);
  height: 200px;
  width: 350px;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 30px;
}


#tomas_2 {
  background-image: url(imagenes/tomas2.jpeg);
  height: 200px;
  width: 350px;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* Barra lateral */
aside {
  display: flex;
  flex-wrap: wrap; /* Permite que los hijos se distribuyan en varias filas */
  align-items: center; /* Alineación vertical de los botones */
  justify-content: center; /* Centra horizontalmente los botones */
  flex: 1;
  background-color: rgb(169, 169, 169);
  border: 1px solid #444444;
  border-radius: 10px;
  padding: 1em;
  text-align: center;
  gap: 0.1em; /* Espacio entre botones */

}

.aside_foto {
  flex-direction: column;
  justify-content: center;
}

.btn1, .btn2 {
  display: flex;
  flex: 0 1 calc(50% - 1em); /* Cada botón ocupa el 50% del ancho menos el gap */
  justify-content: center; /* Centra horizontalmente el contenido del botón */
  align-items: center; /* Centra verticalmente el contenido del botón */
  transition: all 0.3s ease; /* Animación para cambios suaves */
      position: relative; /* Necesario para superposición */
}

#amador_farmaceutica {
  background-image: url(imagenes/amador_farmaceutica.jpeg);
  height: 120px;
  width: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
}

#temporada_14 {
  background-image: url(imagenes/temporada_14.jpeg);
  height: 120px;
  width: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
}

#amador {
  background-image: url(imagenes/amador.jpeg);
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  height: 150px;
  width: 100px;
}

#enrique {
  background-image: url(imagenes/enrique.jpeg);
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  height: 150px;
  width: 100px;
}

#agustin {
  background-image: url(imagenes/agus2.jpeg);
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  height: 150px;
  width: 100px;
}

#antonio {
  background-image: url(imagenes/antonio.jpeg);
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  height: 150px;
  width: 100px;
}

.enviar {
  background-color: #000000;
}

.selected::after {
content: "";
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
z-index: 1;
}

.pers_fav {
  margin-top: 30px;
  margin-bottom: 20px;
}

 #temp {
   margin-top: 15px;
 }

input, textarea {
  margin-bottom: 25px;
  border: 1px solid #444444;/*Color gris en el borde*/
  border-radius: 5px;/*Redondea el borde*/
  }

.enviar {
  background-color: #ffffff;
  width: 60px;
  color: #656565;
  border-radius: 5px;/*Redondea el borde*/
  border: 1px solid #444444;/*Color gris en el borde*/
}
/* Pie de página */
footer {
  background-color: rgba(234, 159, 222, 0.3); /* Fondo rosa claro */
  border: 1px solid #ff67e7; /* Borde rosa */
  border-radius: 10px;
  text-align: center; /* Centra el texto */
  padding: 1em; /* Espacio interno */
  margin-top: 1em; /* Espacio externo en la parte superior */
}