/*SLIDE BAR*/

/* Estilo para el scroll */
::-webkit-scrollbar {
   width: 2px; /* Ancho del scroll */
}
 
/* Track */
::-webkit-scrollbar-track {
   background: #ffffff; /* Color del fondo del scroll */
}
 
/* Handle */
::-webkit-scrollbar-thumb {
   background: #000000; /* Color del scroll */
   border-radius: 10px; /* Bordes redondeados */
}
 
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #888; /* Cambia el color del scroll al pasar el cursor */
}

/*INTRO*/
/* Estilos generales */
*::after, ::before {
   margin: 0;
   padding: 0;
   box-sizing: inherit; /* Hereda el modelo de caja */
}

/* Contenedor de introducción */
.intro {
   position: fixed; /* Posición fija */
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh; /* Altura de la ventana */
   display: flex;
   align-items: center; /* Alinea verticalmente */
   justify-content: center; /* Alinea horizontalmente */
   flex-direction: column; /* Dirección de los elementos flexibles */
   z-index: 999; /* Índice z para superponer */
   background:#000000; /* Color de fondo */
   transition: 1s; /* Transición de 1 segundo */
   box-shadow: 0 0 130px rgba(0, 0, 0, 0.5); /* Sombra */

}

/* Imagen dentro de la introducción */
.intro img {
   top: 150px; /* Posición superior */
   position: absolute; /* Posición absoluta */
}

/* Párrafo dentro de la introducción */
.intro p {
   color: grey; /* Color del texto */
   font-size: 1.6rem; /* Tamaño de fuente */
   margin-top: 10px; /* Margen superior */
}

/* Estilos de logotipo */
.logo2 {
   font-size: 2.5rem; /* Tamaño de fuente */
   color: white; /* Color del texto */
}

/* Partes del logotipo */
.logo2-parts {
   display: inline-block; /* Mostrar como bloque en línea */
   transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Transiciones */
   position: relative; /* Posición relativa */
   bottom: 0; /* Posición inicial inferior */
}

/* Partes activas del logotipo */
.logo2.active .logo2-parts {
   bottom: -100px; /* Altura del tobogán */
   opacity: 0; /* Opacidad */
}

/* Contenido */
.content {
   width: 100%; /* Ancho completo */
   padding: 50px; /* Relleno */
   font-size: 2rem; /* Tamaño de fuente */
}

/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    scroll-behavior: smooth;
}

 /* Establece la fuente principal para el cuerpo del documento */
body {
   font-family: "Poppins", sans-serif;
}

/* Establece el ancho máximo y centra las imágenes */
img {
   max-width: fit-content;
   margin: 0 auto;
}

/* Estilos para la cabecera */
.header {
  display: flex; /* Muestra los elementos de la cabecera como una fila flexible */
  align-items: center; /* Alinea los elementos verticalmente al centro */
  min-height: 20vh; /* Altura mínima del 80% del viewport */
  max-height: 150vh;
  background-color: #F5F5F5; /* Color de fondo de la cabecera */
  padding: 48px 0; /* Relleno superior e inferior de 70px */
  box-shadow: 0 0 50px rgba(0,0,0,0.5); /* Sombra */
}

.logo-container {
   position:fixed;
   top: -10px;
   left: -10px;
   z-index: 999; /* Asegura que el logo esté sobre cualquier otro contenido */
   background-size:auto;
   padding: 10px;
   border-radius: 1px;
   
}

.logo-container img {
   width: 83px; /* Ajusta el tamaño del logo según tu preferencia */
}

/* Estilos para el menú de navegación */
.menu {
   position: absolute; /* Posiciona el menú de navegación de manera absoluta */
   top: 0; /* Establece la posición superior en 0 */
   left: 0; /* Establece la posición izquierda en 0 */
   right: 0; /* Establece la posición derecha en 0 */
   display: flex; /* Muestra los elementos del menú como una fila flexible */
   align-items: center; /* Alinea los elementos verticalmente al centro */
   justify-content: space-between; /* Distribuye el espacio entre los elementos */
}

/* Estilos para el logotipo */
.logo {
   font-size: 25px; /* Tamaño de la fuente */
   color: #111111; /* Color del texto */
   text-transform: uppercase; /* Transforma el texto a mayúsculas */
   font-weight: 000; /* Peso de la fuente */
}

/* Estilos para los elementos de la lista de navegación */
.menu .navbar ul li {
   position: relative; /* Posiciona los elementos relativos al contenedor padre */
   float: left; /* Coloca los elementos en línea */
}

/* Estilos para los enlaces de la lista de navegación */
.menu .navbar ul li a {
   font-size: 18px; /* Tamaño de la fuente */
   padding: 20px; /* Relleno de los enlaces */
   color: #111111; /* Color del texto */
   display: block; /* Muestra los enlaces como bloques */
}

/* Estilos para los enlaces animados */
ab {
   position: relative; /* Posiciona los elementos relativos */
   display: block; /* Muestra los elementos como bloques */
   text-transform: uppercase; /* Transforma el texto a mayúsculas */
   margin: 20px 0; /* Margen superior e inferior */
   padding: 10px 20px; /* Relleno de los elementos */
   text-decoration: none; /* Elimina la decoración del texto */
   color: #262626; /* Color del texto */
   font-size: 18px; /* Tamaño de la fuente */
   font-weight: 600; /* Peso de la fuente */
   transition: .5s; /* Transición de medio segundo */
   z-index: 1; /* Índice z para superponer */
}

/* Estilos para la línea superior e inferior del enlace */
ab:before {
   content: ''; /* Contenido generado */
   position: absolute; /* Posiciona el elemento de manera absoluta */
   top: 0; /* Establece la posición superior en 0 */
   left: 0; /* Establece la posición izquierda en 0 */
   width: 100%; /* Ancho del elemento */
   height: 100%; /* Altura del elemento */
   border-top: 2px solid #262626; /* Borde superior de 2px sólido */
   border-bottom: 2px solid #262626; /* Borde inferior de 2px sólido */
   transform: scaleY(2); /* Escala verticalmente */
   opacity: 0; /* Opacidad inicial */
   transition: .3s;
}

#menu {
   display: none; /* Oculta el elemento con ID 'menu' */
}

.menu-icono {
   width: 25px; /* Establece el ancho de '.menu-icono' en 25px */
}

.menu label {
   cursor: pointer; /* Cambia el cursor al pasar sobre el elemento a un puntero */
   display: none; /* Oculta el elemento <label> dentro del menú */
}

.submenu {
   position: relative; /* Establece la posición relativa para los elementos con clase 'submenu' */
}

table {
   width: 100%; /* Establece el ancho de las tablas al 100% del contenedor */
}

th, td {
   color: #ffffff; /* Establece el color del texto de las celdas de la tabla en blanco */
}

.borrar {
   background-color: #111111; /* Establece el color de fondo de '.borrar' en negro */
   border-radius: 50; /* Establece el radio de borde en 50 (falta la unidad, por ejemplo '50px') */
   padding: 5px 10px; /* Establece el relleno de 5px arriba y abajo y 10px a los lados */
   text-decoration: none; /* Elimina la decoración del texto */
   color: #ffffff; /* Establece el color del texto en blanco */
   font-weight: 800; /* Establece el grosor de la fuente en negrita */
   cursor: pointer; /* Cambia el cursor al pasar sobre el elemento a un puntero */
}

.header-content {
   position:relative;
   width: 100%;
   height: 90vh; /* O la altura que desees */
   overflow: hidden;
}

.header-img {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 0;
}

.header-img img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* Asegura que la imagen cubra todo el contenedor sin distorsionarse */
   /*opacity: 0.8; /* Ajusta la opacidad para hacer la imagen un poco transparente */
   display: block; /* Asegura que la imagen se trate como un bloque */
}

.header-txt {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2; /* Coloca el texto sobre la imagen */
   text-align: center;
   color: white; /* Color del texto */
   z-index: 0;
}

.header-txt h1 {
   font-size: 90px; /* Tamaño de fuente grande */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
   line-height: 1; /* Establece la altura de línea en 1 */
   font-family: 'Oswald', sans-serif; /* Fuente del texto */
   margin-bottom: 15px; /* Margen inferior */
}

.header-txt p {
   font-size: 20px; /* Tamaño de fuente */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
   margin-bottom: 20px; /* Margen inferior */
}



.btn-1 {
   display: flex; /* Establece el botón como un flexbox */
   padding: 11px 25px; /* Relleno del botón */
   background-color: #111111; /* Color de fondo */
   color: #ffffff; /* Color del texto */
   border-radius: 5px; /* Radio de borde */
}

.ofert {
   padding: 20px 0; /* Relleno del contenedor de ofertas */
   display: flex; /* Establece el contenedor como un flexbox */
   justify-content: center; /* Centra horizontalmente el contenido */
}

.ofert-1 {
   text-align: center; /* Centra el contenido horizontalmente */
   display: flex; /* Establece el contenedor como un flexbox */
   align-items: center; /* Centra verticalmente el contenido */
   background-color: grey; /* Color de fondo */
   padding: 20px; /* Relleno del contenedor */
   margin: 0 25px; /* Margen horizontal */
   transition: transform 0.3s; /* Agrega una transición suave al transformar el contenedor */
   border-radius: 1rem; /* Radio de borde */
}

.ofert-1:hover {
   transform: scale(1.2); /* Aumenta el tamaño del contenedor en un 5% al pasar el cursor sobre él */
}

.ofert-img {
   flex-basis: 20%; /* Establece el tamaño inicial de la imagen al 20% del contenedor */
   margin-right: 15px; /* Margen derecho */
}

.ofert-img img {
    width: 50px; /* Ancho de la imagen */
}

.ofert-txt {
   flex-basis: 50%; /* Establece el tamaño inicial del texto al 50% del contenedor */
   text-align: center; /* Centra el texto horizontalmente */
}

.ofert-txt h3 {
    color: #111111; /* Color del texto */
    font-family: 'Oswald', sans-serif; /* Fuente del texto */
    font-size: 25px; /* Tamaño de fuente */
    text-transform: uppercase; /* Convierte el texto a mayúsculas */
    margin-bottom: 15px; /* Margen inferior */
}

.btn-2 {
   display: inline-block; /* Establece el botón como un elemento en línea con bloque de respaldo */
   padding: 7px 10px; /* Relleno del botón */
   background-color: #111111; /* Color de fondo */
   color: #ffffff; /* Color del texto */
   border-radius: 5px; /* Radio de borde */
   font-size: 15px; /* Tamaño de fuente */
}

.products {
   padding: 50px 0; /* Añade relleno superior e inferior */
   text-align: center; /* Centra el contenido horizontalmente */
}

.products h2 {
   color: #111111; /* Color del texto */
   font-family: 'Oswald', sans-serif; /* Fuente del texto */
   font-size: 50px; /* Tamaño de fuente */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
   margin-bottom: 50px; /* Margen inferior */
}

.product-content {
   display: grid; /* Establece el contenedor como una cuadrícula */
   grid-template-columns: repeat(4, 1fr); /* Divide el contenedor en 4 columnas iguales */
   gap: 50px; /* Espacio entre las filas y columnas de la cuadrícula */
}

.product {
   text-align: center; /* Centra el contenido horizontalmente */
   width: 100%; /* Ancho del contenedor */
   padding: 30px; /* Relleno del contenedor */
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Sombra */
}

.product img {
   width: 250px; /* Ancho de la imagen */
   height: 335px; /* Altura de la imagen */
   margin-bottom: 20px; /* Margen inferior */
   /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(133, 139, 201));*/
   border: 2px solid #ddd; /* Añadir borde a la imagen */
}

.product h3 {
   font-size: 20px; /* Tamaño de fuente */
   color: #111111; /* Color del texto */
   font-family: 'Oswald', sans-serif; /* Fuente del texto */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
   margin-bottom: 15px; /* Margen inferior */
}

.product p, .precio {
   font-size: 16px; /* Tamaño de fuente */
   color: #111111; /* Color del texto */
   margin-bottom: 15px; /* Margen inferior */
}

.precio {
   font-weight: 800; /* Grosor de la fuente */
}

.icons {
   padding: 50px 0 100px 0; /* Añade relleno al contenedor */
   display: flex; /* Establece el contenedor como un flexbox */
   justify-content: space-between; /* Distribuye el espacio entre los elementos */
}

.icon-1 {
   flex-basis: calc(33.3% - 30px); /* Establece el ancho del elemento con margen */
   display: flex; /* Establece el elemento como un flexbox */
   align-items: center; /* Centra verticalmente el contenido */
   justify-content: space-between; /* Distribuye el espacio entre los elementos */
   padding: 25px; /* Relleno del elemento */
   background-color: #F5F5F5; /* Color de fondo */
}

.icon-txt h3 {
   font-size: 20px; /* Tamaño de fuente */
   color: #111111; /* Color del texto */
   font-family: 'Oswald', sans-serif; /* Fuente del texto */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
}

.icon-txt p {
   font-size: 16px; /* Tamaño de fuente */
   color: #111111; /* Color del texto */
}

.blog {
   display: flex; /* Establece el contenedor como un flexbox */
   justify-content: space-between; /* Distribuye el espacio entre los elementos */
   padding-bottom: 100px; /* Añade relleno inferior al contenedor */
}

.blog-1 {
   flex-basis: calc(33.3% - 30px); /* Establece el ancho del elemento con margen */
}

.blog-1 img {
   margin-bottom: 20px; /* Margen inferior de la imagen */
}

.blog-1 h3 {
   font-size: 20px; /* Tamaño de fuente */
   color: #111111; /* Color del texto */
   font-family: 'Oswald', sans-serif; /* Fuente del texto */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
   margin-bottom: 15px; /* Margen inferior */
}

.blog-1 p {
   font-size: 16px; /* Tamaño de fuente */
   color: #111111; /* Color del texto */
}

/* Clase expandida para el producto */
.product.expanded {
   transform: scale(1.4); /* Aumentar el tamaño */
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); /* Aumentar la sombra */
   z-index: 10; /* Asegurar que el producto esté en la parte superior */
   background-color: white;
   transition: 0.3s;
}

 /* Clase expandida para el producto */
 .product.expanded .button {
   display: block; /* Mostrar el botón cuando el producto está expandido */
}

/* Estilos para el botón */
.button {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 2em; /* Tamaño reducido */
   height: 2em; /* Tamaño reducido */
   border: none;
   background: rgba(180, 83, 107, 0.11);
   border-radius: 5px;
   transition: background 0.5s;
   display: none; /* Inicialmente oculto */
 }
 
 .X, .Y {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1em; /* Tamaño reducido */
   height: 1px; /* Tamaño reducido */
   background-color: #fff;
 }
 
 .X {
   transform: translateX(-50%) rotate(45deg);
 }
 
 .Y {
   transform: translateX(-50%) rotate(-45deg);
 }
 
 .close {
   position: absolute;
   display: flex;
   padding: 0.4rem 0.75rem; /* Tamaño reducido */
   align-items: center;
   justify-content: center;
   transform: translateX(-50%);
   top: -70%;
   left: 50%;
   width: 1.5em; /* Tamaño reducido */
   height: 0.85em; /* Tamaño reducido */
   font-size: 8px; /* Tamaño reducido */
   background-color: rgb(19, 22, 24);
   color: rgb(187, 229, 236);
   border: none;
   border-radius: 3px;
   pointer-events: none;
   opacity: 0;
 }
 
 .button:hover {
   background-color: rgb(211, 21, 21);
 }
 
 .button:active {
   background-color: rgb(130, 0, 0);
 }
 
 .button:hover > .close {
   animation: close 0.2s forwards 0.25s;
 }

 @keyframes close {
   100% {
     opacity: 1;
   }
 }


/*FOOTER*/

.footer {
   padding: 63px 150px; /* Añade relleno superior e inferior */
   background-color: #111111; /* Color de fondo */
}

.footer-content {
   display: flex; /* Establece el contenedor como un flexbox */
   justify-content: center; /* Centra los elementos horizontalmente */
   text-align: center; /* Centra el texto dentro del contenedor */
}

.link {
   flex: 1; /* Establece que el elemento ocupe todo el espacio disponible */
   margin: 0 1rem; /* Margen horizontal */
   min-width: 200px; /* Asegura un ancho mínimo para los elementos */
}

.link h3 {
   font-size: 18px; /* Tamaño de fuente */
   color: #ffffff; /* Color del texto */
   font-family: 'Oswald', sans-serif; /* Fuente del texto */
   text-transform: uppercase; /* Convierte el texto a mayúsculas */
   margin-bottom: 5px; /* Margen inferior */
   margin-left: 10px;
}

.link a {
   font-size: 18px; /* Tamaño de fuente */
   color: #dcdcdc; /* Color del texto */
   text-decoration: none; /* Sin subrayado */
}

.link img {
   display: block; /* Hace que la imagen sea un bloque */
   margin: -4rem auto; /* Margen superior e inferior y centrado */
   transition: transform 0.3s ease; /* Transición suave de 0.3 segundos */
   transform: scale(0.3); /* Escala la imagen al 30% de su tamaño original */
   margin-bottom: -6.4vh;
}

.link img:hover {
   transform: scale(0.4); /* Aumenta el tamaño de la imagen al 40% en el hover */
}


/* Estilos para el menú */
.menu-container {
   width: 100%; /* Ancho completo */
   text-align: center; /* Centra el contenido del menú horizontalmente */
   position: fixed; /* Fija la posición del menú */
   top: 0; /* Alinea el menú en la parte superior */
   left: 0; /* Alinea el menú en el extremo izquierdo */
   background-color: #000000; /* Color de fondo negro */
   z-index: 1; /* Asegura que esté sobre otros elementos */
}

.menu-edit {
   max-width: 900px; /* Anchura máxima del menú */
   margin: 0 auto; /* Centra el menú horizontalmente */
   font-size: 20px; /* Tamaño de fuente del menú */
}

.menu-horizontal {
   width: 100%; /* Ancho completo */
   list-style: none; /* Quita los puntos de lista */
   display: flex; /* Muestra los elementos en línea */
   justify-content: space-around; /* Distribuye uniformemente los elementos horizontales */
   padding: 0; /* Quita el relleno */
   margin: 0; /* Quita el margen */
}

.menu-horizontal > li > a {
   display: block; /* Muestra los enlaces como bloques */
   font-size: 2vh; /* Tamaño de fuente de los enlaces */
   padding: 15px 20px; /* Relleno de los enlaces */
   color: white; /* Color del texto */
   text-decoration: none; /* Quita el subrayado de los enlaces */
   transition: color 0.3s ease, font-size 0.3s ease; /* Añade una transición para el cambio de color y tamaño de letra */
}

.menu-horizontal > li:hover {
   background-color: rgb(255, 255, 255); /* Cambia el color de fondo al pasar el ratón */
}

.menu-horizontal > li:hover > a {
   color: black; /* Cambia el color del texto a negro al pasar el ratón sobre el enlace */
}

.menu-vertical {
   position: absolute; /* Posición absoluta */
   display: none; /* Oculta el menú vertical por defecto */
   list-style: none; /* Quita los puntos de lista */
   width: 200px; /* Ancho del menú vertical */
   background-color: rgba(0, 0, 0, .5); /* Color de fondo con transparencia */
   font-size: 2vh; /* Tamaño de fuente del menú vertical */
}

.menu-horizontal li:hover .menu-vertical {
   display: block; /* Muestra el menú vertical al pasar el ratón sobre el elemento padre */
}

.menu-vertical li:hover {
   background-color: black; /* Cambia el color de fondo al pasar el ratón */
}

.menu-vertical li a {
   display: block; /* Muestra los enlaces como bloques */
   color: white; /* Color del texto */
   padding: 15px 15px 15px 20px; /* Relleno de los enlaces */
   text-decoration: none; /* Quita el subrayado de los enlaces */
}

/* Estilos para los iconos sociales */
.social-icons {
   padding: 0; /* Quita el relleno */
   list-style: none; /* Quita los puntos de lista */
   margin: -0.5em; /* Ajuste negativo de margen */
   margin-top: 5px; /* Margen superior */
   margin-left: -1rem; /* Margen izquierdo */
}

.social-icons li {
   display: inline-block; /* Muestra los elementos en línea */
   margin: 0.15em; /* Margen entre los elementos */
   position: relative; /* Posición relativa */
   font-size: 1.2em; /* Tamaño de fuente */
}

.social-icons i {
   color: #fff; /* Color de los iconos */
   position: absolute; /* Posición absoluta */
   top: 12px; /* Posiciona los iconos en la parte superior */
   left: 13px; /* Posiciona los iconos en la parte izquierda */
   transition: all 265ms ease-in-out; /* Añade una transición */
}

.social-icons a {
   display: inline-block; /* Muestra los enlaces como bloques */
}

.social-icons a::before {
   transform: scale(1); /* Escala de transformación */
   content: ''; /* Contenido vacío */
   width: 50px; /* Ancho */
   height: 50px; /* Alto */
   border-radius: 100%; /* Borde circular */
   display: block; /* Muestra el elemento como bloque */
   background: linear-gradient(45deg, #000000, #000000); /* Degradado lineal */
   transition: all 265ms ease-out; /* Añade una transición */
}

.social-icons a:hover::before {
   transform: scale(0); /* Escala de transformación */
   transition: all 265ms ease-in; /* Añade una transición */
}

.social-icons a:hover i {
   transform: scale(1.8); /* Escala de transformación */
   color: red; /* Color del texto */
   background: linear-gradient(45deg, #ffffff, #ffffff); /* Degradado lineal */
   background-clip: text; /* Clip de fondo */
   -webkit-background-clip: text; /* Clip de fondo para navegadores webkit */
   -webkit-text-fill-color: transparent; /* Color del texto transparente para navegadores webkit */
   transition: all 265ms ease-in; /* Añade una transición */
}

.social-icons .fa-instagram {
   color: #E1306C; /* Color para Instagram */
   font-size: 1.5em; /* Tamaño del icono de Instagram */
}
/* Estilos para la estructura de la página */
.contenedor {
   display:flex; /* Muestra los elementos en línea */
   justify-content:space-around; /* Centra horizontalmente */
   align-items: center; /* Centra verticalmente */
   margin-top: 50px; /* Margen superior */
}
 
.carta {
   display: flex; /* Muestra los elementos en línea */
   align-items: center; /* Centra verticalmente */
   margin: 0 20px; /* Margen entre las cartas */
   padding: 20px; /* Relleno de las cartas */
   border-radius: 10px; /* Borde redondeado */
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); /* Sombra */
   border-radius: 1rem; /* Borde redondeado */
   border: 1px solid #ccc; /* Borde de 1px */
   margin-bottom: 2rem; /* Margen inferior */
   min-height: 200px; /* Altura mínima para las cartas */
}
 
.carta img {
   height: 150px; /* Altura fija de la imagen */
   width: 100px; /* Ancho fijo para las imágenes */
   object-fit: cover; /* Hace que la imagen cubra el contenedor, recortando las partes sobrantes */
   object-position: center; /* Centra la imagen en el contenedor */
   border-radius: 8px; /* Borde redondeado */
}
 
.carta .contenido {
   margin-left: 20px; /* Margen izquierdo */
}
 
.carta h2 {
   margin: 0; /* Quita el margen */
}
 
.carta p {
   margin: 1px 0; /* Margen superior e inferior */
}

/* Media Query para pantallas pequeñas */
@media screen and (max-width: 768px) {
   .products {
       padding: 50px 10px;
   }

   .product-content {
       grid-template-columns: repeat(1, 1fr);
   }

   .intro {
       display: none; /* Ocultar la animación en dispositivos móviles */
   }

   .logo-container {
       display: none;
   }

   .contenedor {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 20px; /* Espacio entre las cartas */
   }

   .carta {
       width: 100%; /* Hacer que la carta ocupe todo el ancho disponible */
   }

   .header {
       min-height: 60vh; /* Ajustar la altura mínima del encabezado */
       background: url('images/tiendaGrande2.jpg') no-repeat;
       background-position: 73%; /* Ajustar la posición de la imagen */
       background-size: cover; /* Asegurar que la imagen cubra todo el contenedor */
       position: relative; /* Añadir posición relativa */
   }

   .header-content {
       position: absolute; /* Posicionar absolutamente el contenido del encabezado */
       display: flex;
       flex-direction: column;
       align-items: center;
       transform: translate(-50%, -50%); /* Centrar perfectamente */
       justify-content: center;
       height: 100%; /* Asegurar que el contenido ocupe toda la altura */
       padding: 50px 0; /* Añadir relleno al contenido del encabezado */
       text-align: center; /* Centrar el texto */
   }

   .header-txt h1 {
       font-size: 24px; /* Ajustar el tamaño de la fuente */
       color: #ffffff; /* Asegurar que el texto sea visible sobre la imagen */
   }

   .header-txt p {
       font-size: 16px; /* Ajustar el tamaño de la fuente */
       color: #ffffff; /* Asegurar que el texto sea visible sobre la imagen */
   }

   /* Mostrar la imagen del encabezado en dispositivos móviles */
   .header-img {
       display: block; /* Mostrar la imagen del encabezado */
       width: 100%; /* Ajustar el ancho al 100% */
   }

   .footer-content {
      display: flex; /* Establece el contenedor como un flexbox */
      flex-direction: column; /* Coloca los elementos en una columna */
      align-items: center; /* Centra los elementos horizontalmente */
      text-align: center; /* Centra el texto */
  }

  .link {
      margin-left: 0; /* Elimina el margen izquierdo */
      margin-bottom: 20px; /* Añade margen inferior para espaciar los elementos */
  }

  .social-icons {
      margin-left: 0; /* Elimina el margen izquierdo */
      margin-bottom: 20px; /* Añade margen inferior */
  }

  .link.instagram {
      margin-right: 0; /* Elimina el margen derecho para igualar la distancia */
  }


   .footer .link ul,
   .footer .link h3,
   .footer .link a {
       width: 100%; /* Asegurar que los elementos de la lista, los títulos y los enlaces ocupen todo el ancho */
       text-align: center; /* Centrar el texto */
   }
}



/* Estilos aplicados cuando el ancho de la ventana es igual o menor a 991px */
@media (max-width: 991px) {
   .menu {
       padding: 20px; /* Añade relleno al menú */
   }

   .menu label {
       display: inline; /* Muestra el label */
   }

   .menu .navbar {
       position: absolute; /* Establece la posición */
       top: 100%; /* Distancia desde la parte superior */
       left: 0; /* Alinea a la izquierda */
       right: 0; /* Alinea a la derecha */
       background-color: #181818; /* Color de fondo */
       display: none; /* Oculta el menú */
   }

   .menu .navbar ul li {
       width: 100%; /* Ancho del ítem del menú */
   }

   .menu .navbar ul li a {
       color: #ffffff; /* Color del texto del enlace */
   }

   #menu:checked ~ .navbar {
       display: initial; /* Muestra el menú al hacer clic en el checkbox */
   }

   .logo {
       display: none; /* Oculta el logo */
   }

   .header {
       min-height: 55vh; /* Ajustar la altura mínima del encabezado */
       background: url('images/tiendaGrande2.jpg') no-repeat;
       background-position: 73%; /* Ajustar la posición de la imagen */
       background-size: cover; /* Asegurar que la imagen cubra todo el contenedor */
       position: relative; /* Añadir posición relativa */
   }

   .header-content {
       position: relative; /* Posicionar relativamente el contenido del encabezado */
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       height: 100%; /* Asegurar que el contenido ocupe toda la altura */
       padding: 50px 0; /* Añadir relleno al contenido del encabezado */
       text-align: center; /* Centrar el texto */
   }

   .header-txt h1 {
       font-size: 24px; /* Ajustar el tamaño de la fuente */
       color: #ffffff; /* Asegurar que el texto sea visible sobre la imagen */
   }

   .header-txt p {
       font-size: 16px; /* Ajustar el tamaño de la fuente */
       color: #ffffff; /* Asegurar que el texto sea visible sobre la imagen */
   }

   .header-img {
       display: none; /* Ocultar la imagen del encabezado */
   }

   .ofert {
       padding: 30px 30px 0 30px; /* Relleno superior de 30px y ningún relleno en los otros lados */
       flex-direction: column; /* Configura la dirección de los elementos secundarios en columna */
   }

   .ofert-1 {
       margin-bottom: 30px; /* Añade un margen inferior de 30px a los elementos secundarios */
   }

   .products {
       padding: 0 30px 30px 30px; /* Relleno en la parte inferior de 30px y ninguno en los otros lados */
   }

   .products h2 {
       margin-bottom: 30px; /* Añade un margen inferior de 30px a los elementos h2 dentro de la sección de productos */
   }

   .product-content {
       grid-template-columns: repeat(1, 1fr); /* Define un diseño de cuadrícula con una sola columna */
       gap: 30px; /* Espacio entre columnas */
   }

   .productimg {
       width: 100%; /* Ancho de la imagen de producto */
       height: auto; /* Altura automática */
   }

   .icons {
       padding: 30px; /* Relleno para los iconos */
       flex-direction: column; /* Configura la dirección de los elementos secundarios en columna */
   }

   .icon-1 {
       margin-bottom: 30px; /* Añade un margen inferior de 30px a los elementos secundarios de los iconos */
   }

   .blog {
       padding: 0 30px 30px 30px; /* Relleno en la parte inferior de la sección de blogs */
       flex-direction: column; /* Configura la dirección de los elementos secundarios en columna */
   }

   .blog-1 {
       margin-bottom: 30px; /* Añade un margen inferior de 30px a los elementos secundarios de la sección de blogs */
   }

   .footer-content {
      display: flex; /* Establece el contenedor como un flexbox */
      flex-direction: column; /* Coloca los elementos en una columna */
      align-items: center; /* Centra los elementos horizontalmente */
      text-align: center; /* Centra el texto */
  }

  .link {
      margin-left: 0; /* Elimina el margen izquierdo */
      margin-bottom: 12px; /* Añade margen inferior para espaciar los elementos */
  }

  .social-icons {
      margin-left: 0; /* Elimina el margen izquierdo */
      margin-bottom: 0px; /* Añade margen inferior */
  }

  .link.instagram {
      margin-right: 10px; /* Elimina el margen derecho para igualar la distancia */
  }

   .footer .link ul,
   .footer .link h3,
   .footer .link a {
       width: 100%; /* Asegurar que los elementos de la lista, los títulos y los enlaces ocupen todo el ancho */
       text-align: center; /* Centrar el texto */
   }
}