body {
  background-color: #790205;
  margin: 0; /* Elimina el margen predeterminado del body */
}

/* Estilo para el header */
.header {
  background-color: #790205;
  padding: 10px;
  display: flex;
  align-items: center;
}

.contenedor_header {
  display: flex;
  width: 100%;
  height: 100%;
}

.contenedor_logo {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  justify-content: center;
  align-items: center;
}

.imagen_logo {
  width: 80%;
  max-width: 100%;
  height: auto;
  display: block;
}

.contenido-header {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.titulo_nuestros_cafes {
  margin-top: 0;
  margin-right: 0;
  text-align: center;
  color: #F5F4C7;
  border: 5px #EEC419;
  font-size: x-large;
}

.bloque-columas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.columna {
  width: 20%;
  padding: 10px;
  background-color: #F5F4C7;
  border: 5px solid #EEC419;
  text-align: center;
  align-items: center;
}

.contenedor_imagen_header {
  width: 100%;
  height: 100%;
  margin: 0;
}

.imagen_header {
  width: auto;
  height: 250px;
  max-width: 100%;
  object-fit: cover;
  margin: 0px;

}

.titulos_cafes {
  color: #790205;
  margin: 0;
}
  
/* Estilo para vista responsive */
@media (max-width: 1024px) {
  .contenido-header {
    display: none; /* Oculta el contenido en vista responsive */
  }

  .contenedor_logo {
    width: 100%; /* Anula el 30% de ancho y ocupa el 100% en móviles */
  }

  .imagen_logo {
    margin: 0 auto; /* Centra horizontalmente la imagen del logo */
    display: block;
  }
}






/* Estilo para el contenedor principal */
.container {
  width: 100%;
  display: flex; /* Usa Flexbox para organizar los elementos en fila */
  position: relative;
}

/* Estilo para el sidebar */
.side {
  width: 25%; /* El sidebar ocupa el 25% del ancho */
  background-color: #790205; /* Color de fondo del sidebar */
  position: sticky; /* Fija el sidebar en la pantalla */
  top: 0; /* Fija el sidebar en la parte superior de la pantalla */
  height: 100vh; /* Toma el 100% de la altura de la ventana */
  overflow-y: auto; /* Agrega desplazamiento vertical si el contenido es más largo que la pantalla */
  float: left;
  scrollbar-width: thin;
  scrollbar-color: #790205 #F5F4C7
}

/* Estilo para el menú en el sidebar */
.menu {
  padding: 20px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilo para los elementos de la lista del menú */
.menu-links {
  list-style: none;
  padding: 0;
}

.menu-item {
  margin-bottom: 10px; /* Espacio entre elementos de la lista */
}

/* Estilo para los enlaces del menú */
.menu-item a {
  text-decoration: none;
  color: #790205; /* Cambia el color de texto enlaces para mejorar la legibilidad */
  font-size: 1.5em;
  background-image: url(./imagenes/general/boton_interno.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  font-weight: bold;
}

/* Estilo para el enlace actual */
.menu-item.current-menu-item a {
  font-weight: bold; /* Hace que el texto esté en negrita */
  text-decoration: underline; /* Agrega un subrayado al texto */
}



/* Personaliza la barra de desplazamiento */
.side::-webkit-scrollbar {
  width: 10px; /* Ancho de la barra de desplazamiento */
}

.side::-webkit-scrollbar-thumb {
  background-color: #790205; /* Color del 'pulgarcito' de la barra de desplazamiento */
  border-radius: 5px; /* Bordes redondeados del 'pulgarcito' */
}

.side::-webkit-scrollbar-track {
  background-color: #F5F4C7; /* Color de fondo de la barra de desplazamiento */
}

/* Estilo para vista responsive */
@media (max-width: 1024px) {
  .container {
    flex-direction: column; /* Cambia a apilamiento en columna en pantallas más estrechas */
  }

  .side {
    width: 100vw; /* El sidebar ocupa todo el ancho en pantallas más estrechas */
    margin: 0;
    height: fit-content;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .menu-item a {
    background: none; /* Quita el fondo de los enlaces en móviles */
    padding: 0; /* Espaciado vertical en lugar del anterior */
    min-height: auto; /* Quita la altura mínima para que el enlace se ajuste al contenido */
    color: #790205; /* Cambia el color del texto en móviles */
    font-size: 2em; /* Tamaño de fuente en móviles */
  }

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

  .menu-links {
    display: flex; /* Agrega esto para centrar elementos de la lista */
    flex-direction: column; /* Apila los elementos verticalmente */
    margin: 10px;
    width: 60%;
    height: auto;
    padding: 30px;
    padding-top: 60px;
    padding-bottom: 60px;
    background: url(./imagenes/general/boton_vertical.png) center center; /* Establece el fondo en el contenedor del menú en móviles */
    background-size: contain;
    background-repeat: no-repeat;
  }
}







/* Estilo para el contenido principal */
.main_inicio {
  flex: 1;
  padding: 0px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

main figure {
  max-width: 100%;
  max-height: auto;
  overflow: hidden;
  position: relative;
}

.imagen_portada {
  max-width: 100%;
  height: auto;
  display: block;
}

.imagen_portada.mobile {
  display: none; /* Oculta la imagen móvil por defecto */
}

.boton-contacto-inicio {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2em;
  margin: 0;
  width: auto;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -20%);
}

.boton-fondo-inicio {
  background-image: url(./imagenes/general/boton_interno.png);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center center;
  width: 200px;
  height: 115px;
  display: inline-block;
  z-index: 0;
}

.boton-texto-inicio {
  color: #790205;
  position: absolute;
  top: 40px;
  left: 20px;
  z-index: 1;
}

@media (max-width: 1024px) {
  main figure {
    width: 100%;
    margin: 0;
  }
  
  .imagen_portada.pc {
    display: none; /* Oculta la imagen de PC en dispositivos móviles */
  }
  .imagen_portada.mobile {
    display: block; /* Muestra la imagen móvil en dispositivos móviles */
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  
  .boton-contacto-inicio {
    font-size: 1em;
  }

  .boton-fondo-inicio {
    background-size: 100px;
    width: 100px;
    height: 57.5px;
  }

  .boton-texto-inicio {
    top: 20px;
    left: 10px;
  }
}







/* Estilo para el footer */
.footer {
  width: 100%;
  background-color: #790205;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #F5F4C7; /* Cambio de color de texto en el footer */
}

.footer-title {
  width: 50%;
  text-align: center;
  text-decoration: none;
}

.imagen-footer {
  width: 70%;
}

.footer-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* Permite que las columnas se ajusten en pantallas pequeñas */
  justify-content: center; /* Centra las columnas horizontalmente */
}

.footer-column {
  width: 100%;
  color: #F5F4C7; /* Cambio de color para elementos dentro de las columnas */
  display: flex;
  flex-direction: column; /* Elementos apilados verticalmente */
  align-items: center;
  justify-content:center;
  text-align: center;
  margin: 0;
}

/* Estilo para las columnas en el footer */
.social-links-footer {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0; /* Eliminar márgenes para un espaciado uniforme en móviles */
  padding: 0; /* Eliminar el relleno para un espaciado uniforme en móviles */
  align-items: center; /* Centra los elementos horizontalmente */
}

.contacto-footer {
  list-style: none;
  width: 350px;
  display: flex;
  flex-direction: column;
  margin: 0; /* Eliminar márgenes para un espaciado uniforme en móviles */
  padding: 0; /* Eliminar el relleno para un espaciado uniforme en móviles */
}

/* Estilo para cada elemento <a> dentro de contacto-footer */
.info-contacto-footer {
  display: flex; /* Elementos alineados horizontalmente */
  align-items: center; /* Centra los elementos verticalmente en cada <a> */
  margin: 10px 0; 
  text-decoration: none;
}

/* Estilo para las imágenes dentro de info-contacto-footer */
.iconos-contacto-footer {
  width: 34px;
  height: 34px;
  margin-left: 0px; /* Espacio entre la imagen y el texto */
}

/* Estilo para el texto (p) dentro de info-contacto-footer */
.info-contacto-footer p {
  color: #F4F4C7;
  font-size: 1.5em;
  margin: 0;
  margin-left: 5px;
  text-decoration: none; /* Quita el subrayado del texto en móviles */
}

.info-redes-footer {
  margin: 10px; /* Eliminar márgenes para un espaciado uniforme en móviles */
}

.author {
  color: #F5F4C7; /* Cambio de color para el autor */
  margin: 20px 0; /* Espaciado uniforme en móviles */
  text-align: center;
  margin-bottom: 10px;
  padding: 10px
}

/* Reglas de medios para pantallas más pequeñas (dispositivos móviles) */
@media (max-width: 1024px) {
  .footer-column {
    width: 100%; /* Ocupa el ancho completo en pantallas pequeñas */
    margin: 0; /* Eliminar márgenes en pantallas pequeñas */
    text-align: center;
  }

  .info-contacto-footer {
    margin: 10px 0;
  }

  .social-links-footer {
    display: flex;
    flex-direction: row; /* Cambia la dirección a horizontal */
    align-items: center;
  }

  .info-redes-footer {
    margin: 0 30px; /* Espacio entre elementos horizontales */
  }

  .footer-title {
    width: 100%;
    text-align: center;
  }
  
  .imagen-footer {
    width: 90%;
  }

}





/* Estilos generales para el main en pantallas de PC */
.main_general {
  background-image: url(./imagenes/general/portada_cafe_puerto_bonito.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-clip: content-box;
  margin: 0;
  width: 75%; /* Ancho en PC */
  height: auto; /* Altura en PC */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Reglas de medios para pantallas más pequeñas (móviles) */
@media (max-width: 1024px) {
  .main_general {
    width: 100vw; /* Ancho en móviles */
  }
}




/* Estilos para el slide */

.swiper-container-1 {
  width: 70%;
  height: 500px; /* Altura fija para el slider */
  display: flex;
  justify-content: center; /* Centra horizontalmente el swiper-wrapper */
  align-items: center; /* Centra verticalmente el swiper-wrapper */
  overflow: hidden;
  position: relative;
  padding: 10px;
  background-color: #F5F4C7;
  border: 5px solid #EEC419;
}

.swiper-container-2 {
  width: 70%;
  height: 500px; /* Altura fija para el slider */
  display: flex;
  justify-content: center; /* Centra horizontalmente el swiper-wrapper */
  align-items: center; /* Centra verticalmente el swiper-wrapper */
  overflow: hidden;
  position: relative;
  padding: 10px;
  background-color: #F5F4C7;
  border: 5px solid #EEC419;
}

.swiper-container-3 {
  width: 70%;
  height: 500px; /* Altura fija para el slider */
  display: flex;
  justify-content: center; /* Centra horizontalmente el swiper-wrapper */
  align-items: center; /* Centra verticalmente el swiper-wrapper */
  overflow: hidden;
  position: relative;
  padding: 10px;
  background-color: #F5F4C7;
  border: 5px solid #EEC419;
  margin-bottom: 30px;
}

.swiper-wrapper {
  width: 100%;
  height: 100%; /* Ajusta la altura al 100% para adaptarse al contenedor */
  position: relative;
  align-items: center;
  display: flex; /* Mostrar como flex para centrar contenido horizontalmente */
}


.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  overflow: hidden;
  position: relative;
}

.swiper-container .swiper-wrapper .swiper-slide {
  display: flex; /* O el valor de display que desees */
}

.img-slide  {
  max-width: 100%; /* Ajusta el ancho máximo al 100% del contenedor */
  max-height: 100%; /* Ajusta la altura máxima al 100% del contenedor */
  width: auto;
  height: auto;
  object-fit: cover; /* Ajusta la imagen para cubrir todo el espacio disponible */
}

.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  z-index: 1;
  transform: translateX(-50%);
}

.swiper-pagination-1 {  
  bottom: 20px;
  left: 50%;
}

.swiper-pagination-2 {  
  bottom: 20px;
  left: 50%;
}

.swiper-button-prev,
.swiper-button-next {
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.swiper-button-prev {
  left: 30px;
}

.swiper-button-next {
  right: 20px;
}

/* Reglas de medios para pantallas más pequeñas (dispositivos móviles) */
@media (max-width: 1024px) {
  .swiper-container-1,
  .swiper-container-2 {
    width: 90%; /* Ocupa el 90% del ancho en dispositivos móviles */
  }
}







.boton-contacto {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2em;
  margin: 30px;
  width: auto;
  position: relative;
  z-index: 1; /* Establece un valor de z-index mayor para el texto */
}

.boton-fondo {
  background-image: url(./imagenes/general/boton_interno.png);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center center;
  width: 200px;
  height: 110px;
  display: inline-block; /* Cambia a inline-block para que ambos ocupen el mismo espacio en X e Y */
  z-index: 0; /* Establece un valor de z-index menor para el fondo */
}

.boton-texto {
  color: #790205;
  position: absolute; /* Coloca el texto en posición absoluta para que esté en la misma ubicación X e Y que el fondo */
  top: 30px;
  left: 20px;
}

@media (max-width: 1024px) {
  .boton-contacto {
    font-size: 1.5em; /* Tamaño de fuente más pequeño */
    margin: 15px; /* Ajusta el margen para evitar que los botones se superpongan en dispositivos móviles */
  }

  .boton-fondo {
    background-size: 150px; /* Tamaño de fondo más pequeño */
    width: 150px;
    height: 82.5px; /* Ajusta la altura proporcionalmente */
  }

  .boton-texto {
    top: 25px;
    left: 15px;
  }
}





/* Estilos para los títulos y textos */
.h2, h3, h4 {
  text-align: center;
  margin: 30px;
  color: #790205;
}



.titulos_cafes {
  color: #790205;
  font-size: 1.2em;
}

.explicación{
  text-align: center;
  font-family: 'Georgia', serif;
  color: #790205;
  font-weight: bold;
  margin: 30px;
  text-shadow: 3px 3px 6px #f5f4c7;
  font-size: 2em; /* Duplica el tamaño de fuente actual */
}






.imagen-cafes-header {
  width: 60%; /* Ajusta la imagen al ancho del contenedor */
  height: auto; /* Mantiene la relación de aspecto de la imagen */
  align-self: center;
  justify-self: center;
}

.bloque-columas-cafes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px;
  align-items: center;
}

.columna-cafes {
  width: 35%;
  padding: 20px;
  margin: 30px;
  background-color: #F5F4C7;
  border: 5px solid #EEC419;
  text-align: center;
  align-items: center;

}

.columna-cafes h4 {
  font-size: 1.6em;
}

.contenedor-imagen-cafe {
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.imagen-cafes {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}


/* Estilo para vista responsive */
@media (max-width: 1024px) {
  .bloque-columas-cafes {
    width: 90%;
    margin: 0 auto;
  }

  .contenedor-imagen-cafe {
    height: 500px;
    width: 100%;
  }

  .columna-cafes {
    width: 90%;
  }
}





/* Estilos para seccion contacto */
.bloque-columnas-contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
}

/* Estilos para sección contacto */
.columna-contacto {
  margin-top: 50px;
  margin-bottom: 50px;
  background-color: #F5F4C7;
  border: 5px solid #EEC419;
  width: 70%; /* Ocupa el 80% del ancho del bloque de columnas */
  text-align: center;
  padding: 0; /* Añade espacio interior para separar contenido */
  box-sizing: border-box; /* Incluye el espacio del relleno en el ancho total */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente el contenido */
  align-items: center; /* Centra horizontalmente el contenido */
}

.contact-form {
  width: 80%; /* Ocupa el 100% del ancho de su contenedor */
  text-align: center;
  padding: 20px; /* Añade espacio alrededor del formulario */
  border-radius: 10px;
}

.columna-contacto input,
.columna-contacto textarea {
  width: 100%; /* Ocupa el 100% del ancho del formulario */
  padding: 10px;
  border: 2px solid #EEC419;
  border-radius: 5px;
  margin-bottom: 10px;
}

.columna-contacto label {
  color: #790205;
  display: block;
  text-align: left;
}

.campo-boton-formulario {
  margin: 10px 0;
  text-align: center; /* Centra el botón en el contenedor */
  display: flex;
  align-items: center;
  justify-content: center;
}

.boton-formulario {
  width: 50%;
  position: relative;
  text-decoration: none;

  height: 120px;
  border: none; /* Elimina el borde del botón */
  background: none; /* Elimina el fondo del botón */
}

.boton-fondo-form {
  background-image: url(./imagenes/general/boton_interno.png);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%; /* Ocupa el 100% del ancho del contenedor */
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  position: absolute; /* Posición absoluta con respecto al botón */
  top: 0;
  left: 0;
  height: 100px;
  z-index: 0; /* Asegura que esté en el mismo contexto de apilamiento que el texto */
}

.boton-texto-form {
  color: #790205; /* Cambia el color del texto */
  position: absolute;
  top: 40px;
  left: 114px;
  z-index: 1; /* Asegura que esté en un contexto de apilamiento superior */
  font-size: 2em; /* Doble del tamaño original */
}

.contact-form,
.contacto-info,
.link-contacto {
  text-align: center;
  margin: 10px 0;
  text-decoration: none;
}

/* Estilo para .contacto-info */
.contacto-info {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Estilo para .links-contacto */
.links-contacto {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.links-redes {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Estilo para .link-contacto y .link-redes */
.link-contacto {
  display: flex;
  align-items: center;
  margin-left: 30px;
  width: 280px;
  max-width: 100%;
}

.link-redes {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* Estilo para .iconos-contacto */
.iconos-contacto {
  width: 34px; /* Tamaño fijo para las imágenes */
  height: 34px;
  margin-right: 10px; /* Espacio entre la imagen y el texto */
}

.link-contacto p {
  text-decoration: none;
  color: #790205;
  font-size: 1.5em;
}

.titulo-redes {
  font-size: 1.3em;
  color: #790205;
  text-decoration: none;
}

 /* Estilos para seccion contacto en dispositivos móviles */
@media (max-width: 1024px) {
  .bloque-columnas-contacto {
    width: 100%;
  }

  .columna-contacto {
    width: 90%;
    overflow: hidden;
  }

  .contact-form {
    width: 80%;
  }

  .columna-contacto input,
  .columna-contacto textarea {
    width: 100%;
    padding: 10px;
    max-width: 100%;
  }

  .boton_formulario {
    width: 100%;
  }

  .links-contacto {
    width: 100%;
  }

  .link-contacto {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .iconos-contacto {
    width: 24px;
    height: 24px;
    margin-right: 5px;
  }

  .contacto-info {
    width: 90%;
    max-width: 100%;
  }

  .campo-boton-formulario {
    margin: 10px 0;
    height: 100px;
  }

  .boton-formulario {
    width: 70%; /* Reduzco el ancho del botón en dispositivos móviles */
    height: 100px; /* Ajusto la altura automáticamente */
  }

  .boton-fondo-form {
    height: 80px; /* Ajusto la altura automáticamente */
  }

  .boton-texto-form {
    top: 50%; /* Alineo el texto en el centro vertical */
    left: 52%;
    transform: translate(-50%, -50%); /* Centro el texto horizontal y verticalmente */
    font-size: 1.5em; /* Reduzco el tamaño del texto */
  }
}











.fileteado_superior {
  width: 100%;
  margin: 0;
  padding: 0;
}

.imagen-fileteado-superior {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  transform: rotate(180deg);
}


.fileteado_inferior {
  width: 100%;
  margin: 0;
  padding: 0; /* Asegura que no haya relleno interior (padding) */
  position: relative;
  bottom: 0;
}

.imagen-fileteado-inferior {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block; /* Elimina cualquier espacio reservado para texto debajo de la imagen */
  position: bottom;
}