/* Reset general */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Roboto', sans-serif;

  background-color: #121212;

  color: #fff;

  line-height: 1.5; /* Aumenté el espaciado entre líneas */

  padding: 0 2rem; /* Aumenté el margen horizontal */

}



a {

  text-decoration: none;

  color: #ff4081; /* Color más visible pero no tan brillante, que se adapta bien al tema oscuro */

}



a:hover {

  text-decoration: underline;

}



button {

  cursor: pointer;

  border: none;

  outline: none;

}



/* Header */

header {

  background-color: #c70039;

  padding: 2rem;

  text-align: center;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);

  color: white;

  margin-bottom: 2rem; /* Agregué un margen inferior */

}



header h1 {

  font-size: 2.5rem;

  margin-bottom: 15px; /* Más espacio entre el título y la descripción */

}



header p {

  font-size: 1.1rem;

  margin-top: 10px;

  padding-left: 5%;

  padding-right: 5%;

}



/* Main content */

main {

  padding: 2rem 2rem; /* Aumenté el padding horizontal para más margen en pantallas grandes */

}



h2, h3 {

  color: #fff;

  margin-bottom: 1.5rem; /* Aumenté el espacio inferior */

}



h2 {

  margin-top: 1.8rem;

  font-size: 1.5rem;

}



h3 {

  font-size: 1.1rem;

  margin-top: 1.8rem;

  margin-bottom: 1rem;

}



section {

  margin-bottom: 3rem; /* Aumenté el margen inferior de las secciones */

}



.container {

  background-color: #2c2c2c;

  padding: 2rem;

  border-radius: 8px;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

  margin: 2rem auto;

  max-width: 1100px;

}



.container2 {

  background-color: #7f807f;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

}



.container a {

  color: #ff4081; /* Color suave y más visible */

  font-weight: bold;

}



.container a:hover {

  text-decoration: underline;

}



button {

  background-color: #c70039;

  color: #fff;

  padding: 0.75rem 2rem;

  font-size: 1rem;

  border-radius: 5px;

  transition: background-color 0.3s ease;

}



button:hover {

  background-color: #a60032;

}



/* Buttons container */

#composicion-bloques {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.5rem;

  margin-top: 1.5rem;

}



#composicion-bloques ul {

  padding: 0;

  list-style: none; /* Elimina los puntos de la lista */

}



#composicion-bloques li {

  background-color: #232323;

  padding: 1.5rem 2rem;

  border-radius: 8px;

  width: calc(50% - 1.5rem); /* Aumenté el espacio entre los elementos */

  text-align: center;

  font-size: 1.2rem;

}



#composicion-bloques li:hover {

  background-color: #333;

}



@media screen and (max-width: 768px) {

  body {

    padding: 0 1rem; /* Márgenes laterales más pequeños en pantallas pequeñas */

  }



  header h1 {

    font-size: 2rem;

  }



  section {

    margin-bottom: 2rem; /* Aumenté el margen en pantallas pequeñas */

  }



  .container {

    padding: 1.5rem;

  }



  #composicion-bloques li {

    width: 100%; /* Los elementos de la lista ocupan todo el ancho en pantallas pequeñas */

  }



  button {

    width: 100%;

    padding: 1rem;

    font-size: 1.1rem;

  }



  h2 {

    font-size: 1.8rem;

  }



  h3 {

    font-size: 1.4rem;

  }

}



footer {

  text-align: center;

  padding: 2rem;

  background-color: #101010;

  color: #ccc;

}



footer .container3 {

  display: flex;

  flex-direction: column;

  align-items: center;

}



footer img {

  width: 180px;

  margin: 20px 0;

}



footer p {

  font-size: 1rem;

}