/*-----------------------------------------------------------------------------------*/
/* IMPORTACIÓN DE FUENTES 
/*-----------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); /* Importa la fuente Poppins con diferentes pesos */
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&display=swap"); /* Importa Bungee Spice y Crimson Text con estilos y pesos específicos */
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap"); /* Importa Bungee Spice, Crimson Text y Poiret One */
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Cardo:ital,wght@0,400;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap"); /* Importa Bungee Spice, Cardo, Crimson Text y Poiret One */

/*-----------------------------------------------------------------------------------*/
/* VARIABLES REUTILIZABLES 
/*-----------------------------------------------------------------------------------*/
:root {
  --blanco: #ffff;
  --cafeclaro: #dabd7b;
  --cafe-principal: #42302e;
  --primary-dark: #1a1a1a;
  --secondary-dark: #333333;
  --accent-gold: #c8a97e;
  --text-dark: #242424;
  --text-light: #ffffff;
  --bg-light: #f8f8f8;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --color-text: #292828;
  --color-bg: #ddd;
  --color-link: #000;
  --color-link-hover: #000;
  --page-padding: 1rem;
  --angle: -15deg;
  --trans-content: -30vh;
  --font-titles: "Poiret One", serif;
  --font-subtitles: "Sweet Sans Pro";
  --font-paragraphs: "Cardo", serif;
}

@font-face {
  /* Define una fuente personalizada */
  font-family: "Sweet Sans Pro"; /* Nombre de la fuente */
  src: local("Sweet Sans Pro Medium"), local("Sweet-Sans-Pro-Medium"),
    url("View/Layout/fonts/SweetSansPro-Medium.woff2") format("woff2"),
    /* Fuentes locales y URL para diferentes formatos */
      url("View/Layout/fonts/SweetSansPro-Medium.woff") format("woff"),
    url("View/Layout/fonts/SweetSansPro-Medium.ttf") format("truetype"); /* Fuentes en otros formatos */
  font-weight: 500; /* Peso de la fuente */
  font-style: normal; /* Estilo de la fuente */
}

/*-----------------------------------------------------------------------------------*/
/* RESETEO DE ESTILOS GLOBALES
/*-----------------------------------------------------------------------------------*/
* {
  /* Selecciona todos los elementos */
  margin: 0; /* Elimina el margen por defecto */
  padding: 0; /* Elimina el padding por defecto */
  box-sizing: border-box; /* Incluye padding y border en el ancho y alto total */
  font-family: var(
    --font-titles
  ); /* Establece la fuente Poppins como fuente por defecto */
}

body {
  /* Estilos para el cuerpo del documento */
  overflow-x: hidden; /* Elimina el desbordamiento horizontal */
}

/*-----------------------------------------------------------------------------------*/
/* NAVBAR
/*-----------------------------------------------------------------------------------*/
nav {
  /* Estilos para la barra de navegación */
  height: 9vh; /* Altura de la barra de navegación */
  display: flex; /* Utiliza flexbox para el diseño */
  justify-content: space-between; /* Espacio entre los elementos */
  align-items: center; /* Alinea los elementos verticalmente al centro */
  padding: 0.5rem 2rem; /* Espaciado interno */
  background-color: var(
    --cafe-principal
  ); /* Color de fondo usando la variable definida */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
  z-index: 1000; /* Controla el apilamiento de elementos */
  position: relative; /* Posicionamiento relativo para elementos hijos */
}

/* div blanco donde se encuentra el logo */
.nav_div {
  /* Estilos para el contenedor del logo */
  height: 11vh; /* Altura del contenedor */
  width: 20%; /* Ancho del contenedor */
  background-color: rgb(255, 255, 255); /* Color de fondo blanco */
  clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    100% 100%,
    0% 100%
  ); /* Forma personalizada del contenedor */
  z-index: 20; /* Controla el apilamiento de elementos */
  position: absolute; /* Posicionamiento absoluto */
  left: 0; /* Alinea a la izquierda */
}

.nav_div_shadow {
  /* Estilos para la sombra del contenedor del logo */
  height: 10vh; /* Altura de la sombra */
  width: 20.3%; /* Ancho de la sombra */
  background-color: rgba(0, 0, 0, 0.347); /* Color de fondo con opacidad */
  z-index: 19; /* Controla el apilamiento de elementos */
  position: absolute; /* Posicionamiento absoluto */
  left: 1px; /* Desplazamiento a la izquierda */
  top: 3px; /* Desplazamiento hacia abajo */
  filter: blur(20px); /* Aplica desenfoque a la sombra */
  transform: scale(1); /* Escala de la sombra */
}

.logo {
  /* Estilos para el logo */
  position: relative; /* Posicionamiento relativo */
  z-index: 30; /* Controla el apilamiento de elementos */
}

.logo img {
  /* Estilos para la imagen del logo */
  max-width: 25vh; /* Ancho máximo de la imagen */
  height: auto; /* Altura automática para mantener la proporción */
  padding-top: 9px; /* Espaciado superior */
  z-index: 40; /* Controla el apilamiento de elementos */
  display: block; /* Muestra como bloque */
  margin: 0 auto; /* Centra horizontalmente */
  padding-left: 5%; /* Espaciado a la izquierda */
}

/* media query para ajustar logo en pantallas medianas */
@media (min-width: 1025px) and (max-width: 1315px) {
  /* Media query para pantallas medianas */
  .logo img {
    /* Estilos para la imagen del logo */
    width: 25vh; /* Ancho de la imagen */
    max-width: 9rem; /* Ancho máximo en rem */
    margin-left: 0; /* Elimina el margen izquierdo */
  }
}
.nav-links {
  /* Estilos para los enlaces de navegación */
  display: flex; /* Utiliza flexbox para el diseño */
  list-style: none; /* Elimina los puntos de la lista */
  z-index: 45; /* Controla el apilamiento de elementos */
  padding-left: 6%; /* Espaciado a la izquierda */
}

.nav-links li {
  /* Estilos para los elementos de la lista de navegación */
  margin: 0 0.5rem; /* Margen horizontal */
}

.nav-links a {
  /* Estilos para los enlaces de navegación */
  text-decoration: none; /* Elimina el subrayado */
  color: var(--blanco); /* Color del texto usando la variable definida */
  font-family: var(--font-titles); /* Fuente para los enlaces */
  font-weight: 500; /* Peso de la fuente */
  font-size: 0.9rem; /* Tamaño de la fuente */
  text-transform: uppercase; /* Convierte el texto a mayúsculas */
  transition: color 0.3s ease, background-color 0.3s ease; /* Transición suave para cambios de color */
}

.nav-links a.active {
  /* Estilos para el enlace activo */
  color: #dabd7b; /* Color del enlace activo */
  font-weight: bold; /* Hace el texto más grueso */
  border-bottom: 2px solid #dabd7b; /* Línea inferior para el enlace activo */
}

.nav-links a:hover {
  /* Estilos para el enlace al pasar el mouse */
  color: #dabd7b; /* Cambia el color al pasar el mouse */
}

/*-----------------------------------------------------------------------------------*/
/* Boton de lenguaje
/*-----------------------------------------------------------------------------------*/
.desktop-only {
  /* Estilos para elementos visibles solo en escritorio */
  display: flex; /* Muestra como flexbox */
}

.language-switcher-mobile {
  /* Estilos para el conmutador de idioma en móviles */
  display: none; /* Oculta por defecto */
}

.language-switcher {
  /* Estilos para el contenedor del conmutador de idioma */
  display: flex; /* Utiliza flexbox para el diseño */
  align-items: center; /* Alinea los elementos verticalmente al centro */
  border: 1px solid #ddd; /* Borde del contenedor */
  border-radius: 4px; /* Bordes redondeados */
  overflow: hidden; /* Oculta el contenido que se desborda del contenedor */
}

.lang-btn {
  /* Estilos para los botones de idioma */
  display: flex; /* Utiliza flexbox para el diseño */
  align-items: center; /* Alinea los elementos verticalmente al centro */
  padding: 0.3rem 0.5rem; /* Espaciado interno */
  border: none; /* Sin borde */
  background: none; /* Sin fondo */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  transition: background-color 0.3s ease; /* Transición suave para el fondo */
  color: var(--blanco); /* Color del texto usando la variable definida */
  font-family: var(--font-titles); /* Fuente para los botones */
}

.lang-btn:hover {
  /* Estilos para el botón al pasar el mouse */
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Cambia el fondo al pasar el mouse */
}

.lang-btn.active {
  /* Estilos para el botón activo */
  background-color: #dabd7b; /* Color de fondo del botón activo */
  color: white; /* Color del texto del botón activo */
}

.flag {
  /* Estilos para la bandera en el botón de idioma */
  width: 16px; /* Ancho de la bandera */
  height: 12px; /* Altura de la bandera */
  margin-right: 4px; /* Margen a la derecha */
}

/*-----------------------------------------------------------------------------------*/
/* MENÚ HAMBURGUESA Y SUPERPOSICIÓN 
/*-----------------------------------------------------------------------------------*/
.hamburger {
  /* Estilos para el botón del menú hamburguesa */
  display: none; /* Oculta por defecto */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  font-size: 1.5rem; /* Tamaño de la fuente */
  color: var(--blanco); /* Color del texto usando la variable definida */
  z-index: 45; /* Controla el apilamiento de elementos */
}

.close-menu {
  /* Estilos para el botón de cerrar el menú */
  display: none; /* Oculta por defecto */
  position: absolute; /* Posicionamiento absoluto */
  top: 1rem; /* Desplazamiento hacia abajo */
  right: 1rem; /* Desplazamiento a la derecha */
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  font-size: 1.5rem; /* Tamaño de la fuente */
  color: var(
    --cafe-principal
  ); /* Color del texto usando la variable definida */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  z-index: 60; /* Controla el apilamiento de elementos */
}

.overlay {
  /* Estilos para la superposición del menú */
  display: none; /* Oculta por defecto */
  position: fixed; /* Posicionamiento fijo */
  top: 0; /* Alinea al top */
  left: 0; /* Alinea a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  background-color: rgba(0, 0, 0, 0.5); /* Color de fondo con opacidad */
  z-index: 50; /* Controla el apilamiento de elementos */
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Media query para pantallas medianas */
  .nav-links {
    /* Estilos para los enlaces de navegación */
    width: 50% !important; /* Ancho del contenedor de enlaces */
  }
  .nav-links a {
    /* Estilos para los enlaces de navegación */
    font-size: 20px; /* Tamaño de la fuente */
  }
  .close-menu {
    /* Estilos para el botón de cerrar el menú */
    font-size: 3rem !important; /* Tamaño de la fuente */
  }
  .hamburger {
    /* Estilos para el botón del menú hamburguesa */
    font-size: 3rem; /* Tamaño de la fuente */
  }
  .lang-btn {
    /* Estilos para los botones de idioma */
    width: 80px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
  }
  .lang-btn img, /* Estilos para la imagen en el botón de idioma */
  span {
    /* Estilos para el span en el botón de idioma */
    width: 25px; /* Ancho de la imagen o span */
    height: 25px; /* Altura de la imagen o span */
  }
}

/* Media query para dispositivos pequeños */
@media (max-width: 1024px) {
  /* Media query para pantallas pequeñas */
  .desktop-only {
    /* Estilos para elementos visibles solo en escritorio */
    display: none; /* Oculta en pantallas pequeñas */
  }

  .language-switcher-mobile {
    /* Estilos para el conmutador de idioma en móviles */
    display: flex; /* Muestra como flexbox */
    justify-content: center; /* Centra horizontalmente */
    margin-top: 20px; /* Margen superior */
  }

  .language-switcher-mobile .language-switcher {
    /* Estilos para el contenedor del conmutador de idioma en móviles */
    justify-content: center; /* Centra horizontalmente */
    width: auto; /* Ancho automático */
    max-width: 200px; /* Ancho máximo */
    margin: 0 auto; /* Centra horizontalmente */
  }

  .language-switcher-mobile .lang-btn {
    /* Estilos para los botones de idioma en móviles */
    flex: 1; /* Ocupa el mismo espacio */
    justify-content: center; /* Centra horizontalmente */
  }

  .lang-btn {
    /* Estilos para los botones de idioma */
    color: black; /* Color del texto */
  }

  .hamburger {
    /* Estilos para el botón del menú hamburguesa */
    display: block; /* Muestra el botón */
  }

  .nav-links {
    /* Estilos para los enlaces de navegación */
    position: fixed; /* Posicionamiento fijo */
    top: 0; /* Alinea al top */
    right: -100%; /* Oculta a la derecha */
    height: 100vh; /* Altura completa de la ventana */
    width: 70%; /* Ancho del contenedor de enlaces */
    flex-direction: column; /* Coloca los elementos en columna */
    background-color: white; /* Color de fondo blanco */
    padding: 4rem 2rem 2rem; /* Espaciado interno */
    transition: right 0.3s ease; /* Transición suave para el desplazamiento */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    overflow-y: auto; /* Permite desplazamiento si el contenido es muy largo */
  }

  .nav_div {
    /* Estilos para el contenedor del logo */
    height: 100%; /* Altura completa */
    width: 23vh; /* Ancho del contenedor */
    background-color: rgb(255, 255, 255); /* Color de fondo blanco */
    clip-path: polygon(
      0 0,
      calc(100% - 30px) 0,
      100% 100%,
      0% 100%
    ); /* Forma personalizada del contenedor */
    z-index: 20; /* Controla el apilamiento de elementos */
    position: absolute; /* Posicionamiento absoluto */
    left: 0; /* Alinea a la izquierda */
  }

  .nav_div_shadow {
    /* Estilos para la sombra del contenedor del logo */
    height: 9.1vh; /* Ajusta a la altura de .nav_div */
    width: 28vh; /* Ancho de la sombra */
    background-color: rgba(0, 0, 0, 0.3); /* Sombra transparente */
    z-index: 19; /* Controla el apilamiento de elementos */
    position: absolute; /* Posicionamiento absoluto */
    left: 1px; /* Desplazamiento a la izquierda */
    top: 3px; /* Desplazamiento hacia abajo */
    filter: blur(20px); /* Aplica desenfoque a la sombra */
    transform: scale(1); /* Escala de la sombra */
  }

  .nav-malva {
    /* Estilos para el contenedor de navegación */
    padding-left: 10px; /* Espaciado a la izquierda */
  }

  .logo img {
    /* Estilos para la imagen del logo */
    max-width: 17.9vh; /* Ancho máximo de la imagen */
  }

  .nav-links.active {
    /* Estilos para los enlaces de navegación activos */
    right: 0; /* Muestra el menú */
  }

  .nav-links li {
    /* Estilos para los elementos de la lista de navegación */
    margin: 1rem 0; /* Margen vertical */
  }

  .nav-links a {
    /* Estilos para los enlaces de navegación */
    color: var(
      --cafe-principal
    ); /* Color del texto usando la variable definida */
  }

  .close-menu {
    /* Estilos para el botón de cerrar el menú */
    display: block; /* Muestra el botón */
  }

  .overlay.active {
    /* Estilos para la superposición activa */
    display: block; /* Muestra la superposición */
  }
}

@media (max-width: 370px) {
  /* Media query para pantallas muy pequeñas */
  .nav_div {
    /* Estilos para el contenedor del logo */
    width: 20vh; /* Ancho del contenedor */
  }
  .logo img {
    /* Estilos para la imagen del logo */
    width: 13vh; /* Ancho de la imagen */
  }
  .nav_div_shadow {
    /* Estilos para la sombra del contenedor del logo */
    width: 20vh; /* Ancho de la sombra */
  }
}

/* Agregamos una media query específica para 1440px */
@media (min-width: 1400px) and (max-width: 1500px) {
  /* Media query para pantallas grandes */
  .logo img {
    /* Estilos para la imagen del logo */
    padding-right: 0; /* Elimina el espaciado a la derecha */
  }

  .nav_div {
    /* Estilos para el contenedor del logo */
    width: 22%; /* Ancho del contenedor */
  }

  .nav_div_shadow {
    /* Estilos para la sombra del contenedor del logo */
    width: 22.3%; /* Ancho de la sombra */
  }
}