/* estilos css */
	body {
	  background-image: url('F1.png');		
	  font-family: 'Roboto', sans-serif;
	  margin: 0;
	  padding: 0;
	  background-color: #f9f9f9;
	  color: #333;
	}
		  

		.cabecera {
		  background-color: #004080;  /* Color blau */
		  color: white;
		  padding: 20px;
		  position: relative;
		}
		  
		.cabecera h1 {
		  font-size: 48px;
		  font-weight: bold;
		  margin-left: 10px;
		}

				.menu {
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				}

				.menu img {
				  height: 150px;
				}

				.menu ul {
				  list-style: none;
				  margin: 0;
				  padding: 0;
				  display: flex;
				  gap: 20px;
				}

				.menu ul li {
				  display: inline;
				}

				.menu ul li a {
				  text-decoration: none;
				  color: white;
				  font-weight: 500;
				  transition: color 0.3s;
				}

				.menu ul li a:hover {
				  color: #ffd700;
				}

    .hamburger {
      display: none;  /* Per defecte, amagat */
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
    }

    .hamburger div {
      width: 25px;
      height: 3px;
      background-color: white;
    }
	
    .hamburger {
	   display: flex;  /* Mostra el menú hamburguesa */
    }
	
    .nav-links {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 100%;
      right: 20px;
      background-color: #004080; /* Color blau */
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 10px;
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      padding: 10px;
      display: block;
      transition: background-color 0.3s;
    }

    .nav-links a:hover {
      background-color: #003366;
    }
	  
	/* Media query per a dispositius petits */
    @media (max-width: 768px) {
      .menu ul {
        display: none; 
      }



      .nav-links.active {
        display: flex;
      }
    }

				.contenido {
				  padding: 20px;
				}

						.sector {
						  margin-bottom: 40px;
						  padding: 20px;
						  background: white;
						  border-radius: 8px;
						  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
						}

						.sector img {
						  max-width: 100%;
						  height: auto;
						  border-radius: 8px;
						}

						.sector h1 {
						  font-size: 2rem;
						  color: #004080;
						}

						.sector h3 {
						  font-size: 1.5rem;
						  color: #333;
						}

						.sector p {
						  line-height: 1.6;
						  margin-top: 10px;
						}


#seccion1 {
  background-color: #F2994A; /* Color calabaza claro */
  text-align: center;
}
.imagen-principal {
  width: 50%; /* Ocupa todo el ancho de la sección */
  height: 25%; /* Mantiene la proporción de la imagen */
  margin: 0 auto; /* Centramos la imagen horizontalmente */
}

.texto {
  margin-top: 20px;
  color: #333; /* Color del texto sobre el fondo naranja */
}

.producto {
    display: flex;
    flex-direction: row-reverse; /* Invierte el orden de los elementos hijos */
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    border: 1px solid #ccc;
    padding: 20px;
}

.imagen-izquierda, .imagen-derecha, .imagen-centro{
    flex: 1;
    text-align: center;
}

.texto-izquierda, .imagen-derecha {
    flex: 1;
    text-align: center;
}

.texto-centro {
    flex: 2;
    text-align: center;
}

.imagen-izquierda img, .imagen-derecha img {
    max-width: 100%;
    height: auto;
}



.certificacion {
  background-color: #f0f0f0; /* Fondo claro para destacar la sección */
  padding: 20px;
  text-align: center;
}

										form {
										  display: flex;
										  flex-direction: column;
										  gap: 15px;
										}

										form label {
										  font-weight: bold;
										}

										form input, form textarea {
										  width: 100%;
										  padding: 10px;
										  border: 1px solid #ccc;
										  border-radius: 5px;
										  font-size: 1rem;
										}

										form input[type="submit"] {
										  background-color: #004080;
										  color: white;
										  border: none;
										  cursor: pointer;
										  transition: background-color 0.3s;
										}

										form input[type="submit"]:hover {
										  background-color: #003366;
										}
	
															.btn-descargar {
															  display: inline-block;
															  padding: 10px 20px;
															  background-color: #007bff;
															  color: #fff;
															  text-decoration: none;
															  border-radius: 5px;
															  font-weight: bold;
															}

															.btn-descargar:hover {
															  background-color: #0056b3;
															}	  


    footer {
      background-color: #004080;
      color: white;
      text-align: center;
      padding: 20px;
      margin-top: 40px;
    }