@import url('https://fonts.googleapis.com/css2?family=Frijole&family=Krona+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Nag+Mundari:wght@400..700&display=swap');

/* Globales */
*::after,
*::before,
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px;
    background-color: #00031e;
    position: relative;
    
}

.Header_menu {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
}

.Header_menu_link {
    border: 2px solid #00046f;
    border-radius: 16px;
    color: white; /* Color del texto de los enlaces */
    text-decoration: none;
    padding: 10px 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    font-size: 20px; /* Ajusta el tamaño de la fuente */
    justify-content: center;
    display: flex;
}

.logovinilo {
   
    top: 20px;
    left: 60px; /* Ajusta la posición para que se ajuste a tu diseño */
    width: 90px; /* Ajusta el tamaño */
    height: auto;

}
/* Centering the navigation links */
/* Centering the navigation links */
.Header_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-grow: 1;
}

.Header_menu_link {
    margin: 0 10px; /* Ajusta el espacio entre los enlaces */
    display: flex;
    font-size: 21.5px; /* Ajusta el tamaño de la fuente */

}

.Header_menu_link:first-child {
    margin-left: 0;
}

.Header_menu_link:last-child {
    margin-right: 0;
}

.container-icon {
    position: relative;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.menu{
    display: flex;
position: absolute;
top: 20px;
left: 0;
right: 0;
z-index: 1000;
}
.navbar{
display: flex;
}
.menu-1{
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
}

.logo-1 {
width: 0;
}
.logo-2{
width: 150px;
}
.socials{
display: flex;
justify-content: center;
align-items: center;
}
.social{
margin: 1px 10px;
height: 35px;
width: 35px;
border: 2px solid #00046f;
border-radius: 20%;
justify-content: center;
align-items: center;

}
.social:hover{
background-color: #4346b0;

}
.social img{
margin: 7px 0 0 6px;
}
.menu .navbar ul li{
position: relative;
float: left;
}
.menu .navbar ul li a{
font-size: 18px;
padding: 10px;
color: aliceblue;
display: block;
}

.menu.navbar ul li a:hover{
color: #00046f;

}

#menu{
display: none;
max-width: 1200px;
}
.menu-icono{
width: 25px;
}

.menu label{
cursor: pointer;
display: none;
}

.header-content{
margin-top: 1800px;
padding-bottom: 2px;
}

.main-content {
    flex: 1; /* Ocupa el espacio disponible entre el header y el footer */
}

body {
    background-image: url(./IMAGENES/fondo.png); /* Corregido */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Para que la imagen permanezca fija */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    font-family: 'Lato', sans-serif;
}

.horario{
    padding: 100px 0px;
    background-color: #00031e; 
}
.horario-info h2{
    font-size: 15px;
    color: aliceblue;
    font-weight: 100px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display:flex
}
.horario-txt{
    display: flex;
    justify-content: space-between;
}
.txt{
    color: aliceblue;
}
.txt h4{
    font-size: 18px;
    color: #A7A7A7;
    margin-bottom: 30px;
}
.txt p{
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}



/* Centering the navigation links */
.Header_menu {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.Header_menu_link {
    margin: 0 4px; /* Ajusta el espacio entre los enlaces */
}

.Header_menu_link:first-child {
    margin-left: 0;
}

.Header_menu_link:last-child {
    margin-right: 0;
}

.container-icon {
    position: relative;
}

.count-products {
    position: absolute;
    top: 55%;
    right: 0;
    background-color: #000;
    color: #fff;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

#contador-productos {
    font-size: 12px;
}

.icon-cart {
    width: 40px;
    height: 40px;
    stroke: #000;
}

.icon-cart:hover {
    cursor: pointer;
}

/* Presentación */
.presentación {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    padding: 20px;
    width: 100%;
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor */
}

.presentación__enlaces {
    display: flex;
    flex-direction: row; /* Cambia de columna a fila */
    gap: 16px;
    flex-wrap: wrap; /* Asegura que los enlaces se ajusten en una fila */
    width: 100%; /* Asegura que ocupe el ancho completo del contenedor */
    justify-content: center; /* Centra los enlaces horizontalmente */
}

.presentación__enlaces_subtitulos {
    font-size: 24px;
    font-weight: 400;
    width: 100%;
    text-align: center;
}

.presentación__enlaces__link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    padding: 5px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid #000000;
}

.presentación__enlaces__link img {
    width: 30px;
    height: auto;
    margin-right: 20px;
}

.presentacion__contenido {
    font-size: 18px;
    font-weight: 400;
    padding: 20px;
    margin: 20px;
    border-radius: 16px;
    text-align: justify;
    margin-bottom: 40px; /* Espacio debajo del contenido principal */
    max-width: 100%; /* Asegura que el contenido no exceda el ancho del contenedor */
    width: 100%; /* Asegura que ocupe el ancho completo del contenedor */
}

.presentacion__contenido__titulo {
    color: #000000e3;
    -webkit-text-stroke: 1px #F8F8F8;
    text-shadow: 0px 1px 4px;
    font-size: 60px;
    font-weight: 70;
    font-family: "Frijole", system-ui;
    text-align: center;

}

.presentacion__contenido__subtitulo {
    font-size: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.resalte {
    font-weight: bold;
}

.presentación__contenido_texto {
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
    text-align: justify;
    margin-bottom: 20px;
}

.presentación__contenido_texto h2,
.presentación__contenido_texto h3 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 20px;
}

.presentación__contenido_texto ul,
.presentación__contenido_texto li {
    display: block;
    font-size: 18px;
    font-weight: 400;
    margin-top: 10px;
}

/* Estilos para la sección "¿Por qué elegirnos?" */
.presentacion__contenido2 {
    background-image: image(IMAGENES/FONDO); /* Corregido */
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center; /* Centra la imagen en el área */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    padding: 4px 20px; /* Ajusta el padding para dar más espacio a los items */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    margin-bottom: 20px; /* Espacio debajo de la sección */
}

.presentacion__contenido_texto2 {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben en una fila */
    gap: 30px; /* Espacio entre los elementos */
    justify-content: center; /* Centra los elementos horizontalmente */
    overflow-x: hidden; /* Oculta el desplazamiento horizontal */
}

.presentacion__contenido_item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido dentro de cada item */
    text-align: center; /* Centra el texto dentro de cada item */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex: 1 1 300px; /* Ancho mínimo, se adapta a pantallas más grandes */
    max-width: 4500px; /* Ancho máximo para asegurar el tamaño uniforme */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    margin: 0 15px; /* Espacio horizontal entre los items */
}

.presentacion__contenido_item img {
    width: 400px;
    height: auto;
    margin-bottom: 15px;
}

.presentacion__contenido_item h3 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.presentacion__contenido_item p {
    font-size: 18px;
    color: #666;
    background-color: #fff; /* Fondo blanco */
    padding: 10px; /* Espacio interno para que el texto no esté pegado al borde */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Sombra ligera para el texto */
}

/*Carrusel body*/
.carruselbody {
    display: flex;
    justify-content: center; /* Asegura que el carrusel esté centrado horizontalmente */
    align-items: center; /* Centra el carrusel verticalmente si es necesario */
    margin: 5px 0;
}

/*carrousel estilos*/
.carousel {
    position: relative;
    width: 100%;
    max-width: 1080px; /* Aumenta el ancho según sea necesario */
    overflow: hidden; /* Oculta las imágenes que están fuera del contenedor */
    border-radius: 15px; /* Borde redondeado */
}

.carousel-images {
    display: flex;
    transition: transform 0.8s ease-in-out;
}

.carousel-images img {
    width: 100%; /* La imagen ocupa el 100% del ancho del contenedor */
    height: auto;
    border-radius: 15px; /* Borde redondeado en las imágenes */
}

.carousel-prev, .carousel-next {
    position: absolute;
    top: 10%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%; /* Botones redondeados */
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 8px;
}

/* Footer */
.footer {

    background-color: #00031e;
    width: 100%; /* Ajusta el ancho al 100% del viewport */
    display: flex;
    bottom: 0;

    flex-direction: column;
    align-items: center;
    padding: 10px;
    color: white;
    margin-top: auto; /* Asegura que el footer esté al final del contenedor principal */
}

.footer .presentación__enlaces {
    display: flex;
    gap: 10px;
}

.footer .presentación__enlaces__link {
    margin: 0 10px;
}

.footer .presentación__enlaces img {
    width: 20px;
    height: auto;
}