.header {
    height: 70px; /* Mantén el header delgado */
    position: relative;
    background-color: white;
    z-index: 10;
}
.videohass {
    max-width: 50%; /* Asegura que el video no exceda el ancho del contenedor */
    height: auto;    /* Mantiene la proporción del video */
}
.cuadropalta1 {
    display: flex;
    justify-content: end;
    cursor: pointer;
}
.cuadropalta2 {
    display: flex;
    justify-content: start;
    cursor: pointer;
}
.logo-circulo {
    margin-left: 50px;
    width: 100px;                     /* 🔹 tamaño del círculo */
    height: 100px;
    background-color: white;          /* fondo blanco */
    border-radius: 50%;               /* forma circular */
    background-image: url('../img/hassperu_logo.jpg'); /* tu logo */
    background-size: cover;           /* 🔹 estira la imagen para cubrir todo */
    background-position: center;      /* centra la imagen */
    background-repeat: no-repeat;     /* sin repetición */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* opcional: sombra */
}
.logo-circulo img {
    margin-left: 50px;
    width: 90%;                /* 🔹 el logo ocupa el 90% del círculo */
    height: 90%;
    object-fit: contain;       /* mantiene las proporciones */
}
.foto-portada {
    width: 100%;
    height: 100%;
    background-image: url('../img/portada.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo1 {
    width: 100%;
    height: 200px;
    background-image: url('../img/fotos_word/banda_cabecera_1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo2 {
    width: 100%;
    height: 200px;
    background-image: url('../img/fotos_word/banda_cabecera_2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo3 {
    width: 100%;
    height: 200px;
    background-image: url('../img/fotos_word/banda_cabecera_3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo4 {
    width: 100%;
    height: 200px;
    background-image: url('../img/fotos_word/banda_cabecera_4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo5 {
    width: 100%;
    height: 250px;
    background-image: url('../img/fotos_word/banda_cabecera_5.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_banda {
    width: 100%;
    height: 220px;
    background-image: url('../img/fotos_word/banda_productos.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_banda_menus {
    width: 100%;
    height: 200px;
    background-image: url('../img/fotos_word/banda_menus.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.botones-banda {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 13%;
    padding-bottom: 20px;
}
.fondo_banda_sedex {
    margin-top: 20px;
    width: 100%;
    height: 80px;
    background-image: url('../img/fotos_word/banda_sedex.png');
    background-size: cover;
    background-position: center;
}
.boton-circulo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.palta-izquierda {
    width: 70%;
    height: 180px;
    text-align: center;
    background-image: url('../img/fotos_word/palta_izquierda.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.palta-derecha {
    width: 70%;
    height: 180px;
    text-align: center;
    background-image: url('../img/fotos_word/palta_derecha.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo-madera {
    background-color: #F5F5DC;
    background-image: url('../img/fotos_word/madera.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_nosotros {
    width: 100%;
    height: 480px;
    background-image: url('../img/fotos_word/nosotros.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_certificaciones {
    width: 100%;
    height: 500px;
    background-image: url('../img/fotos_word/certificaciones.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_responsabilidad_1 {
    width: 100%;
    height: 200px;
    background-image: url('../img/fotos_word/responsabilidad_1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_responsabilidad_2 {
    width: 100%;
    height: 450px;
    background-image: url('../img/fotos_word/responsabilidad_2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_productos_superior {
    width: 100%;
    height: 80px;
    background-image: url('../img/fotos_word/banda_productos_superior.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoproducto1 {
    width: 100%;
    height: 350px;
    background-image: url('../img/fotos_word/banda_producto1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoproducto2 {
    width: 100%;
    height: 350px;
    background-image: url('../img/fotos_word/banda_producto2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoproducto3 {
    width: 100%;
    height: 350px;
    background-image: url('../img/fotos_word/banda_producto3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoproducto4 {
    width: 100%;
    height: 350px;
    background-image: url('../img/fotos_word/banda_producto4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoreceta1 {
    width: 100%;
    height: 420px;
    background-image: url('../img/fotos_word/receta1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoreceta2 {
    width: 100%;
    height: 700px;
    background-image: url('../img/fotos_word/receta2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoreceta3 {
    width: 100%;
    height: 420px;
    background-image: url('../img/fotos_word/receta3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoreceta_a1 {
    width: 100%;
    height: 420px;
    background-image: url('../img/fotos_word/receta_a1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondoreceta_a2 {
    width: 100%;
    height: 420px;
    background-image: url('../img/fotos_word/receta_a2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fondo_galeria {
    width: 100%;
    height: 420px;
    background-image: url('../img/fotos_word/galeria.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* --- Flechas de navegación --- */
.custom-nav {
    margin-left: 30px;
    margin-right: 30px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(120, 120, 120, 0.5); /* Gris transparente */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Color del ícono de flecha */
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 14px; /* Tamaño pequeño */
  color: #fff; /* Blanco */
}

/* Hover */
.custom-nav:hover {
  background: rgba(120, 120, 120, 0.8);
}

/* Posicionamiento centrado verticalmente */
.swiper-button-prev,
.swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}

/* Separación hacia los lados */
.swiper-button-prev {
  left: 10px;
}
.swiper-button-next {
  right: 10px;
}
/* === Footer siempre al final === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* altura completa de la ventana */
}

main {
  flex: 1; /* ocupa todo el espacio disponible */
}

footer.footer {
  margin-top: auto; /* empuja el footer al fondo */
}

@media (max-width: 768px) {
    .logo-circulo {
        margin-left: 20px;
        width: 80px;                     /* tamaño del círculo */
        height: 80px;
    }
    .logo-circulo img {
        margin-left: 0;
        width: 90%;                /* el logo ocupa el 90% del círculo */
        height: 90%;
    }
    .fondo1 {
        width: 100%;
        height: 130px;
    }
    .fondo2 {
        width: 100%;
        height: 130px;
    }
    .fondo3 {
        width: 100%;
        height: 130px;
    }
    .fondo4 {
        width: 100%;
        height: 130px;
    }
    .fondo5 {
        width: 100%;
        height: 130px;
    }
    .fondo_banda_menus {
        width: 100%;
        height: 100px;
    }
    .cuadropalta1{
        margin-right: 5%;
        height: auto;
        justify-content: center;
        align-items: center;
    }
    .cuadropalta2{
        margin-left: 25%;
        height: auto;
        justify-content: center;
        align-items: center;
    }
    .fondo_certificaciones {
        height: 400px;
    }
    .fondo_responsabilidad_1 {
        height: 150px;
    }
    .fondo_responsabilidad_2 {
        height: 300px;
    }
    .fondoproducto1 {
        height: 180px;
    }
    .fondoproducto2 {
        height: 180px;
    }
    .fondoproducto3 {
        height: 150px;
    }
    .fondoproducto4 {
        height: 150px;
    }
    .fondoreceta1 {
        height: 170px;
    }
    .fondoreceta2 {
        height: 170px;
    }
    .fondoreceta3 {
        height: 170px;
    }
    .fondoreceta_a1 {
        height: 170px;
    }
    .fondoreceta_a2 {
        height: 170px;
    }
    .videohass {
        width: 100%;
    }
}