/* H1 */
@media (max-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: 3rem;
  }
}

/* info section */
.info-section {
  background: rgba(0, 0, 0, 0.7); /* Fondo negro con opacidad */
  background-image: url(img/corriendo.jpg);
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir completamente el área */
  background-position: top; /* Centra la imagen de fondo desde arriba*/
  background-attachment: fixed; /* La imagen de fondo se mantendrá fija al hacer scroll */
  position: relative;
  text-align: center;
}

.info-section2 {
  background: rgba(0, 0, 0, 0.7); /* Fondo negro con opacidad */
  background-image: url(img/online.jpg);
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir completamente el área */
  background-position: top; /* Centra la imagen de fondo desde arriba*/
  background-attachment: fixed; /* La imagen de fondo se mantendrá fija al hacer scroll */
  position: relative;
  text-align: center;
}

#agregarCarrito_arriba {
  display: flex;
  justify-content: center;
}


/* title */
.titulo-con-boton {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* alinea a la derecha igual que el h1 */
 
}
.titulo-con-boton button{
  margin-right: 10%;
  margin-bottom: 10%;
}

.title {
  color: #f4f9f2;
  float: right;
  text-align: right;
  margin: 20% 10% 5% 10%;
  position: relative;
  z-index: 2;
  border: 0.5px solid #32b70d;
  padding: 3% 3% 1% 1%;
  align-items: center;
}
@media (max-width: 1200px) {
  .title {
    margin-top: 25%;
  }
}
@media (max-width: 820px) {
  .title {
    margin-top: 40%;
  }
}
@media (max-width: 480px) {
  .title {
    margin-top: 70%;
  }
}



/* banner */
.banner-container {
  background: rgba(0, 0, 0, 0.85);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.banner-item {
  color: #f4f9f2;
  font-family: "Inter";
  font-size: 1.4rem;
  margin: 0% 10% 8% 10%;
}
.banner-container h2 {
  margin: 8% 10% 4% 10%;
}


/* content */
.container {
  background: rgba(0, 0, 0, 0.85);
  text-align: center;
}
.container i {
  font-size: 8rem; 
  margin-top: 8%; 
  color: #32b70d; 
}
.container p {
  color: #f4f9f2;
  font-family: "Inter";
  font-size: 1.1rem;
  margin: 0% 10% 8% 10%;
  padding-bottom: 8%;
}
.container h2 {
  margin: 4% 10% 4% 10%;
  color: #f4f9f2;
}
.container ul {
  color: #f4f9f2;
  font-family: "Inter";
  font-size: 1.1rem;
   margin: 0% 10% 0% 10%;
  padding-bottom: 8%;
  text-align: center;
}
.container li {
  padding-bottom: 4%;
  text-align: left;
}
.margin0 {
  margin: 10% 0% 10% 0%;
}


/* H2 */
h2 {
  font-family: "Bebas Neue";
  font-weight: 400;
  font-size: 3rem;
}
@media (max-width: 1200px) {
  h2 {
    font-size: 3rem;
  }
}
@media (max-width: 768px) {
  h2 {
    font-size: 2rem;
  }
}
@media (max-width: 480px) {
  h2 {
    font-size: 2rem;
  }
}

/* Section: ¿Estás listo para empezar?  */
.container2 {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
  text-align: center;
  /* background-image: url("img/corriendo2.jpg"); 
  background-size: cover;
  background-position: 35% center;
  background-repeat: no-repeat;*/
}
.container2 p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 2rem;
  margin-right: 1rem;
  text-align: right;
  margin: 0rem 1rem 1rem 1rem;
  
}

.title2 {
  color:#f4f9f2;
  float: right;
  text-align: right;
  margin: 0% 10% 1% 10%;
}

.title2 h2{
  margin-bottom: 5%;
}

@media (max-width: 768px) {
  .title2, container2 p{
    margin: 15% 10% 0% 10%;
  }
}
@media (max-width: 480px) {
  .title2, container2 p {
    margin: 20% 5% 0% 5%;
  }
}
.btn {
  width: 150px;
  display: flex;
  align-self: center;
  justify-content: center;
  padding: 10px;
  margin-left: auto;
  margin-bottom: 1%;
}

.back-link-PyA {
    font-family: 'Inter', sans-serif;
    color: #32B70D;
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 3%;
}

#dicePrecio {
  color: #32B70D;
}