/* Estilos del botón Menú */
.menu-btn {
  position: fixed;
  top: 10px; /* Mantiene el botón cerca de la parte superior */
  right: 10px; /* Mantiene el botón cerca de la derecha */
  display: flex;
  align-items: center;
  font-size: 1em; /* Tamaño más pequeño */
  color: #000; /* Cambia el color del texto y barras a negro */
  cursor: pointer;
  z-index: 1000;
}

.menu-text {
  margin-right: 5px; /* Menos espacio entre el texto y las barras */
  font-size: 1em; /* Tamaño más pequeño */
  font-weight: 500; /* Asegúrate de que el peso de la fuente sea más grueso (negrita) */
  letter-spacing: 0.05em; /* Aumenta el espaciado entre las letras */
  color: #000; /* Cambia el color del texto a negro */
}

.bars {
  font-size: 1.5em; /* Reducir el tamaño de las barras */
  color: #000; /* Cambia el color de las barras a negro */
}

/* Barra superior para el logo */
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px; /* Ajusta esta altura al tamaño exacto de tu logo */
  background-color: #ffffff; /* Color sólido del fondo del logo */
  padding: 0; /* Elimina los márgenes internos */
  z-index: 100; /* Asegúrate de que esté por encima de la imagen de fondo */
  text-align: center;
  transition: transform 0.5s ease-in-out; /* Transición para mover la barra hacia arriba */
  margin-top: 0;
}

.logo {
  max-width: 100px;
  height: 120%; /* Asegura que el logo ocupe el 100% de la altura de la barra */
  margin-top: 0;
  margin: 0; /* Elimina cualquier margen */
  padding: 0; /* Elimina cualquier padding */
}


/* Cuando el menú esté abierto, esconder la barra superior */
.header-hidden {
  transform: translateY(-100%); /* Mueve la barra completamente hacia arriba */
}

/* Estilos del menú lateral */
.sidemenu {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.2); /* Blanco tenue y semitransparente */
  backdrop-filter: blur(5px); /* Difuminar ligeramente el fondo */;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  z-index: 999; /* Asegura que el menú esté por encima del header */
}

.sidemenu a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 1.2em;
  color: #000; /* Cambiar color de las letras a negro */
  font-weight: 500; /* Asegúrate de que el peso de la fuente sea más grueso (negrita) */
  letter-spacing: 0.05em; /* Aumenta el espaciado entre las letras */
  display: block;
  transition: 0.3s;
}

.sidemenu a:hover {
  color: #555; /* Cambio a gris oscuro al hacer hover */
}



/* Resto de los estilos */

.hero {
  position: relative;
  height: 100vh;
  background-image: url('/static/fondo.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1; /* La imagen de fondo queda detrás de todo */
}

body {
  margin: 0;
  padding: 0;
  color: #f5f5f5;
  background-color: #f5f5f5;
  transition: opacity 0.5s ease-in-out;
}

header {
  text-align: center;
  padding: 20px 0;
}

.hero {
  position: relative;
  height: 100vh;
  background-size: cover;
  background-position: center;
  z-index: 1; /* Asegura que el contenido dentro esté por encima */
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/static/IMG_2030.jpeg'); /* Imagen de fondo */
  background-size: cover;
  background-position: center;
  filter: grayscale(5%) brightness(80%); /* Filtro aplicado solo a la imagen */
  z-index: -1; /* Asegura que esté detrás del contenido */
}

.overlay {
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  padding: 20px 40px;
  text-align: center;
  border-radius: 10px;
  z-index: 10;
}

.info-box {
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

.pagina {
  max-width: 60%;
  height: auto;
  margin-top: 20px;
  cursor: pointer;
}

/* Botón para abrir/cerrar el menú */
.menu-btn {
  position: fixed;
  top: 10px; /* Más cerca de la parte superior */
  right: 10px; /* Más cerca de la derecha */
  display: flex;
  align-items: center;
  font-size: 1em; /* Tamaño más pequeño */
  color: #fff;
  cursor: pointer;
  z-index: 1000;
}

.menu-text {
  margin-right: 5px; /* Menos espacio entre el texto y las barras */
  font-size: 1em; /* Tamaño más pequeño */
}

.bars {
  font-size: 1.5em; /* Reducir el tamaño de las barras */
}

/* Estilos del texto "VISITA NUESTRAS REDES" */
.social-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 100px; /* Ajusta según sea necesario para posicionar correctamente */
  width: 100%;
  text-align: center;
}

.social-text {
  margin-bottom: 15px; /* Espacio entre el texto y los íconos de redes sociales */
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #000; /* Color del texto */
}

/* Asegúrate de que los íconos de las redes sociales sigan igual */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}


header h1 {
  font-size: 1.4em; /* Título más pequeño */
  color: #000;
  margin: 0;
}

/* Fondo blanco para la página */
body {
  margin: 0;
  padding: 0;
  font-weight: 400; /* Ajusta aquí el peso */
  color: #000; /* Cambiar a negro para que sea visible sobre el fondo blanco */
  background-color: #fff; /* Fondo blanco */
  transition: opacity 0.5s ease-in-out;
}

/* Sección de vinos */
.vinos-section {
  display: flex;
  justify-content: space-around;
  margin: 150px auto; /* Ajuste para dejar espacio para la barra superior */
  flex-wrap: wrap;
  padding: 20px;
}

/* Estilo de cada cepa */
.cepa {
  width: 25%;
  margin-bottom: 40px;
  text-align: center;
}

.cepa h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
  color: #000;
}

.cepa-img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cepa-img:hover {
  transform: scale(1.05); /* Efecto hover para aumentar la imagen */
}

/* Adaptación a pantallas pequeñas */
@media (max-width: 768px) {
  .cepa {
    width: 100%;
    margin-bottom: 40px;
  }
}

/* Botón para abrir/cerrar el menú */
.menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 1em;
  color: #fff;
  cursor: pointer;
  z-index: 1000;
}
.texto-overlay {
  text-align: center;
  font-weight: 700;
  color: #e0d9d9;
  position: absolute;
  top: 35%;
  left: 75%;
  transform: translate(-50%, -50%);
  padding: 20px 40px;
  z-index: 1;
}

.menu-text {
  margin-right: 5px;
  font-size: 1em;
}

.bars {
  font-size: 1.5em;
}

/* Estilos del texto */
h1, h2, .texto-grande {
  font-weight: 700; /* Asegúrate de que el peso de la fuente sea más grueso (negrita) */
  letter-spacing: 0.05em; /* Aumenta el espaciado entre las letras */
  text-transform: uppercase; /* Asegúrate de que todo el texto esté en mayúsculas si es necesario */
  color: #f5f5f5; /* O el color que prefieras */
}


/* Adaptación para pantallas pequeñas */
@media (max-width: 768px) {
  .history-content {
    max-width: 90%;
  }

  .texto-historia {
    font-size: 1.2em;
    width: 90%; /* Ajusta el ancho del texto en móviles */
  }
    /* Texto superpuesto sobre imagen renan */
  .extra-text-overlay {
    text-align: right;
    font-weight: 700;
    color: #f5f5f5;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    z-index: 1;
  }

  .extra-text-overlay .linea-1 {
    display: block;  /* Cada línea se mostrará como un bloque */
    font-size: 1.7em;
    text-align: right; /* Desplazamiento hacia la derecha */
  }

  .extra-text-overlay .linea-2 {
    display: inline-block;  /* Cada línea se mostrará como un bloque */
    font-size: 0.5em;
    margin-top: 10px;
    text-align: right; /* Desplazamiento hacia la derecha */
  }


  .extra-text-overlay2 {
    text-align: left;
    font-weight: 700;
    color: #f5f5f5;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    z-index: 1;
  }

  .extra-text-overlay2 .linea-1 {
    display: block;  /* Cada línea se mostrará como un bloque */
    font-size: 1.7em;
    text-align: left; /* Desplazamiento hacia la derecha */
  }

  .extra-text-overlay2 .linea-2 {
    display: inline-block;  /* Cada línea se mostrará como un bloque */
    font-size: 0.5em;
    margin-top: 10px;
    text-align: left; /* Desplazamiento hacia la derecha */
  }

}

/* Estilo para la nueva imagen de fondo */
.extra-background {
  position: relative;
  height: 100vh; /* Ocupa la altura de la pantalla completa */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
}

.extra-image {
  display: block;
  width: 100%; /* Asegura que ocupe todo el ancho */
  height: auto; /* Mantiene la proporción de la imagen */
  filter: grayscale(5%) brightness(80%); /* Filtro aplicado solo a la imagen */
}

/* Estilo para la nueva imagen de fondo */
.extra-background2 {
  position: relative;
  height: 100vh; /* Ocupa la altura de la pantalla completa */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
}

.extra-image2 {
  display: block;
  width: 100%; /* Asegura que ocupe todo el ancho */
  height: auto; /* Mantiene la proporción de la imagen */
  filter: grayscale(5%) brightness(80%); /* Filtro aplicado solo a la imagen */
}

/* Barra inferior transparente, similar a la sidebar */
.footer-bar {
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05); /* Mucho más transparente */
  color: #8c8b87; /* Color de texto negro */
  text-align: center; /* Centra el texto */
  padding: 10px 0;
  font-size: 0.5em; /* Tamaño de letra */
  backdrop-filter: blur(5px); /* Difuminado */
  z-index: 1000;
  box-shadow: none; /* Sin sombra para que sea más tenue */
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Borde tenue */
}

.footer-bar p {
  margin: 0;
  font-weight: 500;
}


.texto-overlay .linea-1 {
  display: block;  /* Cada línea se mostrará como un bloque */
  font-size: 1.5em;
  text-align: right;  /* Tamaño de la primera línea */
}

.texto-overlay .linea-2 {
  display: block;  /* Cada línea se mostrará como un bloque */
  font-size: 1em; /* Tamaño de la segunda línea */
  margin-top: 10px; /* Espaciado entre líneas */
  text-align: right; /* Desplazamiento hacia la derecha */
}

/* Caja blanca general */
.white-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;  /* Reduce el padding para pantallas grandes */
  background-color: #ffffff;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  max-width: 90%; /* Ajusta el ancho máximo para pantallas grandes */
}

/* Específicamente para pantallas grandes */
@media (min-width: 769px) {
  .white-box {
    max-width: 800px; /* Limita el ancho en pantallas grandes */
    padding: 20px 40px; /* Ajusta el padding para pantallas grandes */
    margin: 50px auto; /* Añade margen superior e inferior */
  }

  .box-title {
    font-size: 1.8em; /* Ajusta el tamaño del texto en pantallas grandes */
  }

  .botella-img {
    max-width: 10000px; /* Reduce el tamaño de la imagen de la botella en pantallas grandes */
    height: auto;
  }
  .texto-overlay {
    text-align: center;
    font-weight: 700;
    color: #e0d9d9;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    z-index: 1;
  }
  .texto-overlay .linea-1 {
    display: inline-block;  /* Cada línea se mostrará como un bloque */
    font-size: 1.8em;
    text-align: right;  /* Tamaño de la primera línea */
  }
  
  .texto-overlay .linea-2 {
    display: block;  /* Cada línea se mostrará como un bloque */
    font-size: 1em; /* Tamaño de la segunda línea */
    margin-top: 10px; /* Espaciado entre líneas */
    text-align: right; /* Desplazamiento hacia la derecha */
  }
  /* Texto superpuesto sobre imagen renan */
  .extra-text-overlay {
    text-align: right;
    font-weight: 700;
    color: #f5f5f5;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    z-index: 1;
  }

  .extra-text-overlay .linea-1 {
    display: inline-block;  /* Cada línea se mostrará como un bloque */
    font-size: 2.8em;
    text-align: right; /* Desplazamiento hacia la derecha */
  }

  .extra-text-overlay .linea-2 {
    display: block;  /* Cada línea se mostrará como un bloque */
    font-size: 0.8em;
    margin-top: 10px;
    text-align: right; /* Desplazamiento hacia la derecha */
  }

  .extra-text-overlay2 {
    text-align: left;
    font-weight: 700;
    color: #f5f5f5;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    z-index: 1;
  }

  .extra-text-overlay2 .linea-1 {
    display: inline-block;  /* Cada línea se mostrará como un bloque */
    font-size: 2.8em;
    text-align: left; /* Desplazamiento hacia la derecha */
  }

  .extra-text-overlay2 .linea-2 {
    display: block;  /* Cada línea se mostrará como un bloque */
    font-size: 0.8em;
    margin-top: 10px;
    text-align: left; /* Desplazamiento hacia la derecha */
  }

}

.box-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.box-title {
  font-size: 2em;
  color: #333;
}

.botella-img {
  max-width: 150px;
  height: auto;
  margin-left: 20px;
}

/* Transition when scrolled into view */
.appear {
  opacity: 1;
  transform: translateY(0);
}



/* Add transition for the extra-image */
.extra-image {
  display: block;
  width: 100%; /* Asegura que ocupe todo el ancho */
  height: auto; /* Mantiene la proporción de la imagen */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}


/* When element is in view */
.appear {
  opacity: 1;
  transform: translateY(0);
}


.box-link {
  text-decoration: none; /* Elimina el subrayado */
  color: inherit; /* Mantiene el color del texto tal cual */
  cursor: pointer; /* Cambia el cursor a pointer cuando pasas el mouse */
}

.box-link:hover {
  color: inherit; /* Asegura que el color no cambie al hacer hover */
}

.extra-image2 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.appear {
  opacity: 1;
  transform: translateY(0);
}