/* Definir la variable de color */
:root {
  --color-principal: #00745A;  /* Azul */
  --color-secundario: #93B1DC; /* Verde */
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Utilizar las variables en los elementos */
body {
  background-color: whitesmoke;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

h1 {
  color: var(--color-secundario);
}

/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Barra de navegación */
.navbar {
  background-color: rgba(0, 0, 0, 0); /* Fondo transparente */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
}
.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.8); /* Fondo sólido al hacer scroll */
}


.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.navbar li {
  display: inline;
}

.navbar a {
  color: white;
  /*padding: 14px 20px;*/
  padding: 1rem 1.25rem;
  text-decoration: none;
  display: inline-block;
}

.navbar a:hover {
  color: #575757;
}
/* Estilo para el fondo de la landing page */
.landing-page {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('images/sto.jpg');
  background-size: cover;
  background-position: center center;
  height: 100dvh;
  width: 100%;
  display: flex;
  justify-content: center; /* Centra los elementos a la izquierda */
  align-items: center;
  text-align: center;
  padding-left: 2rem; /* Ajusta la distancia desde el borde izquierdo */
  
}

.landing-page h1 {
  color: white;
  font-family: "MuseoModerno", sans-serif;
  font-size: 3rem;
  margin-bottom: 1.25rem;
}



/* Estilos del contenido */
.container {
  width: 80%;
  margin: 0 auto;
  padding: 1.25rem;
  font-family: "MuseoModerno", sans-serif;
}

#turismo .content {
  flex-direction: row-reverse; /* El primer contenedor tiene el texto a la izquierda y la imagen a la derecha */
}

#gastronomia .content {
  flex-direction: row; /* El segundo contenedor tiene el texto a la derecha y la imagen a la izquierda */
}
#provincias .content {
  flex-direction: row-reverse; /* El segundo contenedor tiene el texto a la derecha y la imagen a la izquierda */
}
.content {
  display: flex;
  justify-content: space-between; /* Alinea el texto a la izquierda y la imagen a la derecha */
  align-items: flex-start;
  width: 100%;
}


.text-section {
  width: 50%; /* Esto permite que el texto ocupe un 60% del contenedor */
}

ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

img {
  width: 100%;
  max-width: 31.25rem;
  border-radius: 1.25rem;
}


.content img{
  width: 50%;
  height: 50vh;
}

h1 {
  text-align: center;
  color: #333;
}

button {
  width: 100%;
  background-color: var(--color-principal);
  color: white;
  border: none;
  border-radius: 1.25rem;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background-color: var(--color-secundario);
}
.footer {
  margin-top: 3.125rem;
  background-color: var(--color-principal); /* Fondo oscuro */
  color: white; /* Texto blanco */
  justify-content: center;
  align-items: center;
  text-align: center; /* Centrado del texto */
 width: 100%;
  padding: 1.25rem; /* Espaciado alrededor */
  font-size: 0.8rem; /* Tamaño de fuente pequeño */
}
.footer a{
  text-decoration: none;
  color: rgb(255, 255, 32);

}
.footer a svg {

  color:  currentColor; /* Color del ícono */
}
.footer a:hover {
  color: var(--color-secundario);
}
.footer p {
  margin-top: 1rem; /* Elimina los márgenes predeterminados */
}
.footer .row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem; /* Espacio entre los elementos */
}

@media (max-width: 850px) {
  .navbar ul {
    
   font-size: 1.5rem;
  }

  #turismo .content {
    flex-direction: column-reverse; /* El primer contenedor tiene el texto a la izquierda y la imagen a la derecha */
  }
  
  #gastronomia .content {
    flex-direction: column-reverse; /* El segundo contenedor tiene el texto a la derecha y la imagen a la izquierda */
  }
  #provincias .content {
    flex-direction: column-reverse; /* El segundo contenedor tiene el texto a la derecha y la imagen a la izquierda */
  }
  .content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.text-section{
  width: 100%;
}
  .text-section,
  .content img {
    width: 100%;
    height: auto;
  }
.landing-page{
  width: 100%;
}
  .landing-page h1 {
    font-size: 2.8em;
    padding: 0 0.625rem;
  }

  button {
    width: 100%;
    padding: 1rem 1rem;
    margin-bottom: 2rem;
    font-size: 1.2rem;
  }

  .container {
    width: 100%;
    padding: 0.625rem;
  }
  .footer{
    width: 100%;
  }
}
/* Media Query para dispositivos muy pequeños (por ejemplo, teléfonos antiguos) */
@media screen and (max-width: 480px) {
  .landing-page{
    height: 100vh;
  }
  .landing-page h1 {
    font-size: 1.2rem; /* Aseguramos que el título sea más pequeño en pantallas más pequeñas */
  }

  .navbar a {
    padding: 0.25rem 0.5rem; /* Ajustar el padding de los enlaces en el navbar */
    font-size: 1.25rem;
  }


  .footer {
    font-size: 0.75rem; /* Ajuste aún más pequeño en dispositivos pequeños */
  }
}