@import url('menu.css');
@import url('social.css');
@import url('nav.css');
@import url('productos.css');
@import url('carrusel.css');
@import url('final.css');
@import url('QS.css');
@import url('articulos.css');
@import url('producto.css');
body {
    padding: 0px;
    margin: 0px;
    text-align: center;
	font-family: "League Spartan", sans-serif;
	background-image: url('FONDOP.jpg'); /* Reemplaza 'tu-imagen.jpg' con la ruta de tu imagen */
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex: 1;
	
}


/* Loader (Pantalla de carga) */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent; /* Fondo semitransparente */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(10px); /* Desenfoque del fondo */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Logo de carga con levitación */
.loader-logo {
    width: 600px; /* Ajusta el tamaño del logo */
    animation: spin 2s linear infinite, levitate 3s ease-in-out infinite;
}


/* Animación de rotación */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animación de levitación */
@keyframes levitate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Efecto fade-in para el contenido */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s forwards;
    animation-delay: 0.5s;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Ocultar loader después de la carga */
.hide-loader {
    opacity: 0;
    pointer-events: none;
}

.scroll-to-top {
	width: 60px;
	height: 60px;
    position: fixed;
    bottom: 20px; /* Ajusta la posición desde el fondo */
    right: 20px; /* Ajusta la posición desde la derecha */
    background-color: #57cae5; /* Color de fondo del botón */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px 15px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cursor pointer al pasar el mouse */
    transition: background-color 0.3s ease; /* Transición para el color de fondo */
    display: none; /* Inicialmente oculto */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.scroll-to-top:hover {
    background-color: #45a3c3; /* Cambia el color al hacer hover */
}
/* Estilo para el ícono flotante de WhatsApp */
.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    cursor: pointer;
    display: inline-block; /* Asegura que el área clickeable sea solo el tamaño del ícono */
    padding: 0; /* Elimina cualquier espacio adicional alrededor */
    width: 10px;
}

/* Ajuste para el tamaño del ícono de WhatsApp */
.whatsapp-icon img {
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    display: block; /* Eliminar márgenes no deseados */
    border-radius: 50%; /* Asegura que sea circular */
}

/* Eliminar pseudo-elementos adicionales si no los necesitas */
.whatsapp-icon a {
    display: block; /* Asegura que todo el enlace sea del tamaño del ícono */
    position: relative;
    width: 60px; /* Ajuste al tamaño del ícono */
    height: 60px; /* Ajuste al tamaño del ícono */
    margin: 0;
    padding: 0;
}

/* Si usas ::after, ajusta el comportamiento para que no se expanda más allá del ícono */
.whatsapp-icon a::after {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0;
    bottom: 0; /* Asegura que el pseudo-elemento se quede dentro del contorno del enlace */
    background: transparent; /* Sin fondo para evitar expansión */
    width: 100%;
    height: 100%;
    pointer-events: none; /* Desactiva la interacción del pseudo-elemento */
}

/* Efecto al pasar el ratón sobre el ícono */
.whatsapp-icon:hover img {
    width: 70px;
    height: 70px;
}

/* Estilo para el mensaje flotante */
.floating-message {
    position: fixed;
    bottom: 100px;
    left: 20px; 
    background-color: rgba(0, 128, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    display: none; /* Se oculta inicialmente */
    z-index: 998;
    display: flex;
    align-items: center;
}

/* Flecha para cerrar el mensaje */
.close-icon {
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 600px) {
    .whatsapp-icon {
        bottom: 10px;
        right: 10px;
    }

    .whatsapp-icon img {
        width: 50px;
        height: 50px;
    }

    .floating-message {
        bottom: 80px;
        font-size: 12px;
    }
}

.principal{
	right: 3%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80%;
	padding: 0px;
	margin: 0px;
	position: relative;
	z-index: 15;
	margin-top: 40px;
	left:0px;
	
}
.principal1{
	right: 3%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80%;
	
	position: relative;
	z-index: 1;
	margin-bottom: 40px;
	left:0px;
    z-index: 20;
}
.center {
	width: 80%;
	margin: 0 auto;
}

.article {
	padding: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	background-color: #fff;
	border-radius: 8px;
	text-align: center;
}

img {
	max-width: 100%;
	border-radius: 8px;
}
/* Estilos de la sección */
.feature-section {
    text-align: center;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;

}

.feature-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.phone-link {
    font-size: 18px;
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    position: relative;  /* Posiciona el pseudo-elemento relativo al enlace */
}

.phone-link:hover {
    color: #2980b9;
}

.phone-link::after {
    content: '';            /* Agrega contenido vacío si es solo decorativo */
    position: absolute;     /* Posiciona `::after` dentro del enlace */
    top: 50%;               /* Centra verticalmente */
    right: -10px;           /* Ajusta a la derecha del enlace */
    width: 0;               /* Asegúrate de que no ocupe espacio */
    height: 0;              /* Asegúrate de que no ocupe espacio */
}


.contact-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

  
/* Estilos del contenedor de iconos */
.icon-container {
    display: flex;
    justify-content: space-around;
    gap: 5px;
}

.icon-box {
	padding: 10px;
	margin: 10px;
	width: 100px;
	height: 80px;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.icon-box img {
    width: 200px;
    height: 200px;
    transition: transform 0.3s ease;
}

.icon-box p {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}

/* Efecto de hover en los iconos */
.icon-box:hover {
    transform: translateY(-10px); /* Eleva el icono */
    background-color: rgba(52, 152, 219, 0.1); /* Fondo con color suave */
    border-radius: 10px;
}

.icon-box:hover img {
    transform: scale(1.2); /* Agranda el icono */
}
.info {
    z-index: 10000;
    margin: 8px;
	display: none; /* Oculta la información adicional por defecto */
    position: absolute; /* Posiciona la información sobre el contenedor */
    top: 100%; /* Muestra justo debajo del contenedor */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Corrige la alineación */
    background-color: rgba(255, 255, 255, 0.8); /* Color blanco con un poco de transparencia */
    color: black; /* Color del texto de la información */
    padding: 25px; /* Relleno interno */
    border: 3px solid rgba(255, 255, 255, 0.5); /* Borde semi-transparente */
    border-radius: 35px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    backdrop-filter: blur(10px); /* Desenfoque del fondo */
    z-index: 10; /* Asegura que la información esté por encima de otros elementos */
    width: 300px;  /* Ancho fijo para la ventana emergente */ /* Ancho de la ventana emergente */
}


   /* Estilos para el fondo de la ventana emergente */
   .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden; /* Oculto por defecto */
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    z-index: 1000;
}

/* Estilos para el contenido de la ventana emergente */
.popup-content {
    background-color: #ffffff;
    padding: 20px;
    width: 80%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
}

.popup-content h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 15px;
}

.popup-content p {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
}

/* Estilos del botón de cerrar */
.popup-close {
    background-color: #007bff77;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.popup-close:hover {
    background-color: #0056b3;
}

/* Mostrar la ventana emergente */
.popup-overlay.show {
    visibility: visible;
    opacity: 1;
}
/* Estilo para el enlace con apariencia de botón */
.button-link {
    display: inline-block;
    padding: 10px 20px;
    /* Color de fondo */
    color: #000000; /* Color del texto */
    border: none;
    border-radius: 10px; /* Bordes redondeados */
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 200px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.8); /* Borde semi-transparente */
    border-radius: 35px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Sombra para dar profundidad */
    backdrop-filter: blur(40px); /* Desenfoque del fondo */
}

.button-link:hover {
    background-color: #ffffff8c; /* Color de fondo al pasar el cursor */
}
.content3 p {
    text-align: center;
    font-size: 16px;
    color: #666;
}
.glass-effect5 {
	z-index: 1;
    /* Estilos generales para el efecto de cristal */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    text-align: left;          /* Centra horizontalmente */
  line-height: 15px; 
    height: 50%;
    padding: 0px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-effect01 {
	z-index: 1;
    /* Estilos generales para el efecto de cristal */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    margin-top: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 50%;
    padding: 20px;
	margin: 40px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-effect6 {
	z-index: -1;
    /* Estilos generales para el efecto de cristal */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    margin-top: 20px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	
    width: 25%;
    height: 10px;
    padding: 50px;
	margin: 10px;
	position: relative;
    background: #57cae5;
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
   
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-effect6:hover .info {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); /* Prefijo para Safari */
    display: block; /* Asegura que la información se muestre */
    visibility: visible; /* Asegura que la visibilidad se cambie en Safari */
    opacity: 1; /* Asegura que la opacidad sea 1 al mostrar */
}
.glass-effect6:nth-child(1) {
    z-index: 3; /* Ajusta el índice para cada elemento según el orden */
}

.glass-effect6:nth-child(2) {
    z-index: 2;
}

.glass-effect6:nth-child(3) {
    z-index: 1;
}



 .glass-effect5 p {
    text-align: center;
    font-size: 16px;
    color: #000000;
    line-height: 25px; 
}
.glass-effect8 {
	z-index: -1;
    /* Estilos generales para el efecto de cristal */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    margin-top: 20px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	
    width: 25%;
    height: 10px;
    padding: 50px;
	margin: 10px;
	position: relative;
    background: #57cae5;
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
   
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-effect8:hover .info {
    backdrop-filter: blur(30px);
	display: block; /* Muestra la información al pasar el mouse */
}


.glass-effect9 {
	z-index: -1;
    /* Estilos generales para el efecto de cristal */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    margin-top: 20px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	
    width: 25%;
    height: 10px;
    padding: 50px;
	margin: 10px;
	position: relative;
    background: #57cae5;
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
   
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-effect9:hover .info {
    backdrop-filter: blur(30px);
	display: block; /* Muestra la información al pasar el mouse */
}
.glass-effect7 {
	z-index: 10;
  opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    margin-top: 20px;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	left: 0%;
    width: 20%;
    height: 60%;
    padding: 30px;
	position: relative;
    background: rgba(3, 255, 255, 0.2);
    border-radius: 45px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-effect7:hover .info {
    backdrop-filter: blur(30px);
	display: block; /* Muestra la información al pasar el mouse */
}
.glass-effect8 {
	z-index: 10;
     /* Estilos generales para el efecto de cristal */
	 opacity: 1;
	 visibility: visible;
	 transition: opacity 0.5s ease, visibility 0s 0.5s;
	 margin-top: 30px;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 right: 10%;
	 width: 20%;
	 height: 80%;
	 padding: 30px;
	 position: relative;
	 background: rgba(3, 255, 255, 0.2);
	 border-radius: 45px;
	 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
	 backdrop-filter: blur(10px);
	 border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .glass-effect8:hover .info {
    backdrop-filter: blur(30px);
	display: block; /* Muestra la información al pasar el mouse */
}
@media (max-width: 768px) {
    .icon-box {
        width: 45%; /* Ajuste para pantallas medianas */
    }
}

/* Responsivo para móviles */
@media (max-width: 480px) {
    .icon-box {
        width: 90%; /* Ajuste para pantallas pequeñas */
    }
    
    .feature-section h2 {
        font-size: 20px; /* Redimensiona el encabezado */
    }
}
 
 @media screen and (max-width: 700px) {
   
 }
 ul.clientes-list {
	display: grid;

	gap: 1px;
	justify-items: center;
	
	flex-wrap: wrap;
	align-items: center;
  }

 
 
  
  ul.clientes-list li {
	list-style-type: none;
	
  }
  
  /* Posicionar los círculos en forma de corazón */
  ul.clientes-list li:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
  }
  
  ul.clientes-list li:nth-child(2) {
	grid-column: 2;
	grid-row: 2;
  }
  
  ul.clientes-list li:nth-child(3) {
	grid-column: 3;
	grid-row: 1;
  }
  
  ul.clientes-list li:nth-child(4) {
	grid-column: 4;
	grid-row: 2;
  }
  
  ul.clientes-list li:nth-child(5) {
	grid-column: 5;
	grid-row: 1;
  }
  
  ul.clientes-list li:nth-child(6) {
	grid-column: 6;
	grid-row: 2;
  }
  
  ul.clientes-list li:nth-child(7) {
	grid-column: 7;
	grid-row: 1;
  }
  ul.clientes-list li:nth-child(8) {
    grid-column: 3;
    grid-row: 3;

  }
  ul.clientes-list li:nth-child(9) {
    grid-column: 5;
    grid-row: 3;
    
  }
  ul.clientes-list li button {
	width: 150px;
	height: 150px;
	border-radius: 20%;
	border: 5px solid white;
	overflow: hidden; /* Esto evita que la imagen se salga del botón */
	position: relative;
	padding: 0;
	cursor: pointer;}
  
  ul.clientes-list li button img {
	width: 100%; /* Ocupar el 100% del ancho del contenedor */
    height: 100%; /* Ocupar el 100% de la altura del contenedor */
    object-fit: cover; /* Ajuste para cubrir completamente el contenedor sin distorsión */
    border-radius: 8px; /* Mantiene el borde redondeado */
    margin: 0;
}

  /* Colores alternos para cada círculo */
  ul.clientes-list li:nth-child(1) button { background: white; }
  ul.clientes-list li:nth-child(2) button { background: white; }
  ul.clientes-list li:nth-child(3) button { background: white; }
  ul.clientes-list li:nth-child(4) button { background: white; }
  ul.clientes-list li:nth-child(5) button { background: white; }
  ul.clientes-list li:nth-child(6) button { background: white; }
  ul.clientes-list li:nth-child(7) button { background: white; }
  ul.clientes-list li:nth-child(8) button { background: white; }
  ul.clientes-list li:nth-child(9) button { background: white; }
 /* Responsivo */
 
/* Responsivo para móviles (pantallas pequeñas) */








* {
	box-sizing: border-box;
}
.main-content {
    text-align: center;
    text-transform: uppercase;
    position: relative;
    height: 350px; /* Altura del contenedor */
    overflow: hidden; /* Oculta el contenido desbordado */
    background-color: rgba(255, 255, 255, 0.7);  /* Color de fondo del contenido */
    margin: 20px; /* Para separar del borde de la ventana */
    transition: opacity 1.5s ease-in-out; /* Transición suave más larga */
    border-radius: 15px;
   
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Sombra difusa alrededor */
        overflow: hidden;
        backdrop-filter: blur(10px);
        padding: 20px; /* Espaciado interno */
        
}

.main-content::before {
    content: ""; /* Necesario para crear un pseudo-elemento */
    position: absolute; /* Asegura que cubra todo el contenedor */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none; /* Permite interactuar con el contenido por encima */
    z-index: 1; /* Asegura que esté detrás del contenido */
}

.main-content > * {
    position: relative; /* Necesario para que el contenido esté por encima */
    z-index: 2; /* Asegura que el contenido sea visible por encima del fondo */
}
.glass-effect5 {
    /* Estilos generales para el efecto de cristal */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
    margin-top: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: auto;
    padding: 60px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hover,
.word,
h1 {
	cursor: pointer;
}

h1 {
    font-family: 'League Spartan', sans-serif;
    font-weight: 100; /* Black */
    font-size: 20px;
    color: #354284;
    text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
h2 {
    font-family: 'League Spartan', sans-serif;
    font-weight: 100; /* Black */
    font-size: 26px;
    color: #354284;
    text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
h8 {
	margin: 10px;
    font-family: 'League Spartan', sans-serif;
    font-weight: 100; /* Black */
    font-size: 60px;
    color: #354284;
    text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

h12 {
	font-size: 26px; /* Tamaño de fuente ajustado */
    font-weight: bold;
    color: #333; /* Color inicial del texto */
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease; }
h12:hover {
    color: #3498db; /* Cambia el color del texto al pasar el mouse */
}
h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* Línea cercana al texto */
    width: 100%;
    height: 1px; /* Línea más delgada */
    background-color: #3498db; /* Color de la línea */
    transform: scaleX(0); /* Empieza contraída */
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

h12:hover::after {
    transform: scaleX(1); /* Expande la línea */
    transform-origin: bottom left;
}
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
}

.navigation-buttons button {
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    color: #333;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background-color 0.3s ease;
}

.navigation-buttons button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}







.side-bar {
    background-color: transparent;
    padding: 1em;
	
    text-align: center;
    min-height: 200px;
	margin-left: 0px;
	margin-right: -380px;
	
}
.side-bar1 {
	
    background-color: rgba(0, 0, 0, 0.2); /* Fondo semi-transparente */
    backdrop-filter: blur(10px); /* Desenfoque que crea el efecto de vidrio */
    -webkit-backdrop-filter: blur(10px); /* Soporte para navegadores webkit */
    border-radius: 40px; /* Bordes redondeados */
    padding: 10px;
    width: 90%;
      height: 90%;
	  display: flex;
	  flex-direction: column;
	  align-items:center;
	  justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borde claro semi-transparente */
    color: white; /* Ajuste de color del texto */
}

.marcas {

	flex: 100px 0 100px; 
   
}
.side-bar1.marcas {

	
	margin-top: 20px;
	
	display: flex;
	flex-direction: column;
	
	justify-content: center;
  
   /* Colocamos las marcas debajo del carrusel */
  width: 280px;
  height: 400px; /* Ocupa todo el ancho */
  
  padding: 5px 0;
 
  background: rgba(255, 255, 255, 0.4); /* Fondo de cristal */
  backdrop-filter: blur(3px); /* Efecto de cristal */
  border-radius: 10px; /* Añadimos espaciado */
}

.container3 {
		
    width: 300px; /* Ancho de los contenedores */
    height: 100px; /* Altura de los contenedores */
    background-color: #57cae5; /* Color de fondo */
    color: rgb(0, 0, 0); /* Color del texto */
    margin: 0px; 
    margin-top: 20px;
    margin-left: 100px;/* Espacio entre contenedores */
    display: flex;
    flex-direction: column; /* Permitir el uso de flexbox para alinear contenido */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    position: relative; /* Necesario para el posicionamiento de .info */
    cursor: pointer;
    border-radius: 55px;
    padding: 30px;
}
.conocenos {
    text-align: center;
    padding: 0px 0;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 55px;
    width: 100%;
    margin-bottom: 430px;
	text-align: center;
    padding: 20px;
    max-width: 1000px;
    
	justify-content: center;
}
.conocenos1 {
    text-align: center;
    padding: 80px 0;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 55px;
    width: 100%;
 margin-top: 100px;
	text-align: center;
    padding: 20px;
    max-width: 1000px;
    
	justify-content: center;
}

.conocenos-content {
  margin-top: 0px;
    max-width: 900px;
    margin: 45px;
	margin-top: 10px;
}

.titulo-iz {
	
	position: absolute; /* Posiciona el texto de manera absoluta */
    top: 150px; /* Ajusta la posición desde la parte superior */
    left: 150px; /* Ajusta la posición desde la izquierda */
    background-color: transparent; /* Fondo blanco con algo de transparencia */
    padding: 5px; /* Espacio alrededor del texto */
    border-radius: 5px; /* Esquinas redondeadas */
}
.titulo-dr {
	position: absolute; /* Posiciona el texto de manera absoluta */
    top: 150px; /* Ajusta la posición desde la parte superior */
    right: 150px; /* Ajusta la posición desde la izquierda */
    background-color: transparent; /* Fondo blanco con algo de transparencia */
    padding: 5px; /* Espacio alrededor del texto */
    border-radius: 5px; /* Esquinas redondeadas */
}
.marca-images {
    
    flex-wrap: wrap; /* Acomoda las imágenes en varias líneas si es necesario */
    justify-content: space-around;
    align-items: center;
    gap: 50px; /* Espacio entre las imágenes */
    width: 300px;
	display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    grid-template-rows: repeat(3, auto); /* Tres filas */
   /* Espacio entre las imágenes */
    max-width: 1900px; /* Ajusta este valor según el ancho deseado del contenedor */
    /* Centrar el contenedor */
}
.marca-title {
    font-size: 34px;
    font-weight: bold;
    margin-bottom: 15px; /* Espacio entre el título y las imágenes */
    color: #000000;
}
.marca-images img {
	flex: 0 0 calc(70% - 70px);
	width: 120px; /* Tamaño base ajustado */
    height: auto;

    width: 190px; /* Tamaño base de las imágenes */
    height: auto;
    transition: transform 0.3s ease-in-out;
    animation: levitate 3s ease-in-out infinite;
}
 /* Botón de hamburguesa */
 .hamburger {
    display: none; /* Ocultar el botón por defecto */
    cursor: pointer;
    position: fixed; /* Mantiene el botón en la parte superior derecha */
    top: 20px;
    right: 20px;
    z-index: 2000; /* Asegura que el botón esté encima del menú */
}

.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
    background-color: #000;
    display: block;
    width: 30px;
    height: 4px;
    margin: 5px 0;
    transition: transform 0.4s ease;
}

.hamburger.is-active .hamburger__inner {
    transform: rotate(45deg);
}

.hamburger.is-active .hamburger__inner::before {
    transform: rotate(-90deg) translate(-8px, -8px);
}

.hamburger.is-active .hamburger__inner::after {
    opacity: 0;
} /* Botón de hamburguesa */
.hamburger {
    display: none; /* Ocultar el botón por defecto */
    cursor: pointer;
    position: fixed; /* Mantiene el botón en la parte superior derecha */
    top: 20px;
    right: 20px;
    z-index: 2000; /* Asegura que el botón esté encima del menú */
}

.hamburger__inner,
.hamburger__inner::before,
.hamburger__inner::after {
    background-color: #005f73;
    display: block;
    width: 30px;
    height: 4px;
    margin: 5px 0;
    transition: transform 0.4s ease;
}

.hamburger.is-active .hamburger__inner {
    transform: rotate(45deg);
}

.hamburger.is-active .hamburger__inner::before {
    transform: rotate(-90deg) translate(-8px, -8px);
}

.hamburger.is-active .hamburger__inner::after {
    opacity: 0;
}
/* Animación de levitación */
@keyframes levitate {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Efecto de "subir" ligeramente */
    }
}

/* Ajustes responsivos para las imágenes */
@media (max-width: 768px) {
    .marca-images img {
        width: 60px; /* Ajusta el tamaño de las imágenes en pantallas más pequeñas */
    }
	
}

@media (max-width: 480px) {
    .marca-images img {
        width: 50px; /* Ajusta el tamaño aún más en pantallas pequeñas */
    }
}

@media (width < 320px)
{
.body{

	height: 100%;
	width: 100%;
}
.main-content1 {
	display: flex;
	flex-direction: column; /* Colocamos los elementos de arriba a abajo */
	 /* Alineamos al principio */

	
  }
}
@media (width  < 780px)
{
.body{

	height: 100%;
	width: 100%;
}

  .menu {
	width: 100%;
	background: rgba(255, 255, 255, .25); /* Fondo transparente para móviles */
	backdrop-filter: blur(5px); /* Aplicar desenfoque de fondo para móviles */
	border: 1.5px solid rgba(209, 213, 219, 0.3); /* Borde sutil para móviles */
	border-radius: 1rem; /* Bordes redondeados para móviles */
}

/* Ajustes para el menú en dispositivos móviles */
ul {
	flex-direction: column; /* Hace el menú vertical */
	justify-content: center; /* Centra verticalmente */
	align-items: center; /* Centra horizontalmente */
	display: none; /* Oculta el menú */
}

/* Mostrar el menú cuando tenga la clase "open" */
ul.open {
	display: flex; /* Muestra el menú */
}

.hamburger {
	display: block; /* Muestra el botón en pantallas pequeñas */
}
  
}

@media (width < 480px) {
	
	.contact-section {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 55vh;
		background: url('Diseño\ sin\ título\ \(1\).png')no-repeat center/cover;
		padding: 100px;
		width: 100%;
	}
	

    .main-content1 {
        display: flex;
        flex-direction: column; /* Colocamos los elementos de arriba a abajo */
        /* Alineamos al principio */
		width: 100%;
        
      }
      
    
      /* Carrusel (ya está como fondo, no necesitamos tocarlo) */
      .carousel-container {
		width: 100%;
          margin-top: 90px;
		  margin-bottom: 5px;
        order: 1; /* Aseguramos que el carrusel esté en el primer lugar */
      }
    
      /* Barra lateral de marcas */
 
    
      .carousel1 {
          display: flex;
          overflow: hidden;
          justify-content: space-around;
          align-items: center;
          width: 100%; /* Asegura que las imágenes se ajusten al 100% */
        }
      
        .carousel-item1 {
          margin: 0 10px;
        }
      
        .carousel-item1 img {
          max-width: 100%;
          height: auto;
          object-fit: contain;
        }
      
        .navigation-dots1 {
          display: none;
        }
    
      /* Secciones de información debajo de marcas */
	  .container3 {
        width: 45%; /* Usar un ancho relativo para adaptarse a pantallas pequeñas */
        height: 40px; /* Ajustar la altura automáticamente */
        padding: 60px; /* Agregar padding para mejorar la apariencia */
    }
    
      .container3 h2 {
        font-size: .9rem;
      }
    
      .info {
        margin-top: 0px;
        z-index: 100;
      }
    
      /* Estilo para el botón de cerrar */
      .close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #333;
      }
	  .conocenos {
		text-align: center;
		padding: 0px 0;
		background-color: rgba(85, 83, 83, 0.2);
		backdrop-filter: blur(10px);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		border-radius: 55px;
		width: 100%;
		margin: 0px;
		text-align: center;
		padding: 20px;
		max-width: 800px;
		margin: 0 auto;
		justify-content: center;
	}
	
	.conocenos-content {
		max-width: 180px;
		margin:10px;
	}
	h1 {
		margin-top: 0;
		position: relative;
		color: #354284;
		font: 600 45px Montserrat;
		text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	}
	
	.p{

		color: #000000;
	}
	.contact-section2 {
		display: flex;
	   
		flex-direction: column; /* Asegúrate de que las secciones estén en columna */
		justify-content: center;
		align-items: center;
		
	 margin: 0px;
			
			width: 100%; /* Ajusta el padding según lo necesites */
	}
	
	.menu {
		width: 100%;
        background: rgba(255, 255, 255, .25); /* Fondo transparente para móviles */
        backdrop-filter: blur(5px); /* Aplicar desenfoque de fondo para móviles */
        border: 1.5px solid rgba(209, 213, 219, 0.3); /* Borde sutil para móviles */
        border-radius: 1rem; /* Bordes redondeados para móviles */
    }

    /* Ajustes para el menú en dispositivos móviles */
    ul {
        flex-direction: column; /* Hace el menú vertical */
        justify-content: center; /* Centra verticalmente */
        align-items: center; /* Centra horizontalmente */
        display: none; /* Oculta el menú */
    }

    /* Mostrar el menú cuando tenga la clase "open" */
    ul.open {
        display: flex; /* Muestra el menú */
    }

    .hamburger {
        display: block; /* Muestra el botón en pantallas pequeñas */
    }
	

    .glass-effect5
    {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
        margin-top: 10px;
        margin:10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 30px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    
    }
	.glass-effect01
    {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
        margin-top: 80px;
        margin:10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 85%;
        height: 100%;
        padding: 30px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    
    }

	.principal{
		right: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
		
		position: relative;
		z-index: 15;
		margin-top: 0px;
		left:0px;
		
	}
	.principal1{
		right: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
        margin-top: 32px;
		position: relative;
		z-index: 1;
	
		
		
	}

	.glass-effect6 {
		z-index: 1000000;
		/* Estilos generales para el efecto de cristal */
		opacity: 1;
		visibility: visible;
		transition: opacity 0.5s ease, visibility 0s 0.5s;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		width:  180px;
		height: 100px;
	 
		margin: 10px;
		position: relative;
		background: #57cae5;
		border-radius: 45px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
	   
		border: 1px solid rgba(255, 255, 255, 0.2);
	}
	.glass-effect6:hover .info {
		backdrop-filter: blur(30px);
		display: block; /* Muestra la información al pasar el mouse */
	}
    .glass-effect6:nth-child(1) {
        z-index: 3; /* Ajusta el índice para cada elemento según el orden */
    }
    
    .glass-effect6:nth-child(2) {
        z-index: 2;
    }
    
    .glass-effect6:nth-child(3) {
        z-index: 1;
    }
    .glass-effect7 {
		z-index: 1000000;
		/* Estilos generales para el efecto de cristal */
		opacity: 1;
		visibility: visible;
		transition: opacity 0.5s ease, visibility 0s 0.5s;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		width:  180px;
		height: 100px;
	 
		margin: 10px;
		position: relative;
		background: #57cae5;
		border-radius: 45px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
	   
		border: 1px solid rgba(255, 255, 255, 0.2);
	}
	.glass-effect7:hover .info {
		backdrop-filter: blur(30px);
		display: block; /* Muestra la información al pasar el mouse */
	}
    .glass-effect8 {
		z-index: 1000000;
		/* Estilos generales para el efecto de cristal */
		opacity: 1;
		visibility: visible;
		transition: opacity 0.5s ease, visibility 0s 0.5s;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		width:  180px;
		height: 100px;
	 
		margin: 10px;
		position: relative;
		background: #57cae5;
		border-radius: 45px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
	   
		border: 1px solid rgba(255, 255, 255, 0.2);
	}
	.glass-effect8:hover .info {
		backdrop-filter: blur(30px);
		display: block; /* Muestra la información al pasar el mouse */
	}

    
	.marcas {

		flex: 0 0 450px; 
	   
	}

	
	.carousel-item1 {
        right: 25px;
		position: absolute;
		width: 160px;
		height: 160px;
        margin: 1px;
        padding: 10px;
		opacity: 0; /* Oculta todas las imágenes por defecto */
		transition: opacity 1s ease; /* Transición de opacidad suave entre imágenes */
		z-index: 0; /* Coloca las imágenes en un plano detrás */
	}
	.carousel-item1.active {
        margin: 1px;
       left: 0px;
	   opacity: 1;
	   position: relative;
	  
   }
   
	
}
@media (width > 780px) {

	h1 {
		font-family: 'League Spartan', sans-serif;
		font-weight: 100; /* Black */
		font-size: 20px;
		color: #354284;
		text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	}
} 
@media (width < 780px) {

	h1 {
		font-family: 'League Spartan', sans-serif;
		font-weight: 100; /* Black */
		font-size: 20px;
		color: #354284;
		text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	}
	h2 {
		font-family: 'League Spartan', sans-serif;
		font-weight: 100; /* Black */
		font-size: 16px;
		color: #354284;
		text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	}
	h8 {
      
	
		font-family: 'League Spartan', sans-serif;
		font-weight: 100; /* Black */
		font-size: 60px;
		color: #354284;
		text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	}
    .section {
        margin-top: 55px;
        padding: 30px;
        text-align: center;
    } 
    


    .sections {
        display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: -4em;
    margin-left: auto; /* Centra horizontalmente */
    margin-right: auto;
        padding: 15px; /* Reducir más el padding en pantallas muy pequeñas */
        width: 95%; /* Ancho casi completo en pantallas muy pequeñas */
    }

    
    .glass-effect3 {
        margin-top: -4em;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el contenido horizontalmente */
        justify-content: center; /* Centra el contenido verticalmente */
        margin-left: 100px;
        margin-right: 100px;
        margin: 30px ; /* Espacio superior e inferior */
        padding: 40px;
        width: 80%; /* Ajusta el ancho como desees */
        max-width: 500px; /* Máximo ancho del contenedor */
        background: rgba(255, 255, 255, 0.1);
        border-radius: 55px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(30px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .productos1 {
        
        
        grid-template-columns: repeat(1, 1fr); /* Muestra 4 productos en pantallas grandes */
    }

    .glass-effect5
    {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
        margin-top: 10px;
        margin:10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 30px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    
    }
    .productos1 {
        
       
        grid-template-columns: repeat(1, 1fr); /* Muestra 2 productos en pantallas pequeñas */
    }

    .producto-card1{
        width: 155px;
        height: auto;
      
    }
    h18 {
        margin-top: 0;
        position: relative;
        color: #000000;
        font: 900 40px Montserrat;
        text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    .glass-effect4 {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
        margin-top: 10px;
        margin:10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 30px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    
    }
    .no-product-message {
        opacity: 0;
        visibility: visible;
        transition: opacity 0.5s ease, visibility 0s 0.5s;
        margin-top: 0px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px;
        width: 100%;
        height: 120px;
        padding: 30px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    h19 {
        margin-top: 0;
        position: relative;
        color: #000000;
        font: 900 22px Montserrat;
        text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    .search-boxs
    {
        width: 100px;
        transition: all 0.3s ease;
        
        position: absolute;
        top: 50%;
        left: 30%;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease;
        border-radius: 90px;
    }
    .search-boxs:hover {
        width: 150px; 
        left: 30%; /* Se expande cuando pasa el mouse */
      }
  
    .categories
    {
        position: relative;
      
        text-align: center;
        transition: all 0.3s ease;
        right: -75px;
        top: 30%;
        z-index: 3; 
        height: 90px;
    }
    h20 {
        margin-top: 0;
        position: relative;
        color: #000000;
        font: 900 22px Montserrat;
        text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
      
      
    .dropdowns
    {
        z-index: 3; 
        display: none;
        position: column;
        top: 90%;
        left: -10%;
        background-color: #000000;
        width: 100%;
        border-radius: 5px;
        visibility: hidden;
        opacity: 0;
        transition: opacity 3s ease, visibility 0s linear 3s; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .vertical
    {
        z-index: 3; 
            width: 90%;
            padding: 10px;
            background: rgba(66, 84, 107, 0.6);
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(30px);
            
            overflow: hidden;
            position: absolute; /* Permite ajustar la posición */
            top: 50px; /* Ajusta la posición vertical */
            left: -40px;
    }
    .outer-rectangle {
        width: 500px;
        height: 100px;
        
        position: relative;
        margin: 50px auto;
        transition: all 0.3s ease;
        
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 33px;
        margin: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        z-index: 3; 
      }
	  .side-bar1.marcas {

	
		margin-top: 480px;
		
		display: flex;
		flex-direction: column;
		
	  margin-right: 0px;
	   /* Colocamos las marcas debajo del carrusel */
	     width:80%;
	     /* Ocupa todo el ancho */
         height: 300px; 
	    
	 
	  background: rgba(255, 255, 255, 0.4); /* Fondo de cristal */
	  backdrop-filter: blur(3px); /* Efecto de cristal */
	  border-radius: 10px; /* Añadimos espaciado */
	}


    .whatsapp-button {
        position: fixed;
        bottom: 20px;
        left: 0px;
        background-color: #25D366; /* Color de fondo de WhatsApp */
        border-radius: 50%; /* Bordes redondeados */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        width: 60px; /* Ancho del botón */
        height: 60px; /* Altura del botón */
        display: flex; /* Para centrar el contenido */
        justify-content: center; /* Centrar horizontalmente */
        align-items: center; /* Centrar verticalmente */
        animation: jump 1s infinite; /* Animación de salto */
        z-index: 1000; /* Asegúrate de que esté en la parte superior */
    }
    
    /* Estilo de la imagen */
    .whatsapp-button img {
        width: 30px; /* Ancho del logo */
        height: 30px; /* Altura del logo */
    }
	 
	
}

/* Estilo para la sección de Clientes */
.clientes {
	margin-top: 0px;
    text-align: center;
    padding: 50px 0;
}

.clientes-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}



.clientes-grid img {
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 80%; /* Ajusta según el tamaño de tu layout */
    height: 90vh; 
}

.clientes-list img {
    width: 150px; /* Ajusta el tamaño según necesites */
    height: auto;
    object-fit: cover; /* Mantiene las proporciones de la imagen */
     /* Aplica un recorte circular a las imágenes */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.clientes-list img:hover {
    transform: scale(1); /* Aumenta el tamaño en hover */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); /* Aplica una sombra en hover */
}

.clientes-list li {
    display: inline-block;
    margin: 10px;
}

/* Estilo para la sección Conócenos */


.boton {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #008CBA;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.boton:hover {
    background-color: #005f73;
}


.close-btn {
    background: transparent; /* Sin fondo */
    border: none; /* Sin borde */
    color: black; /* Color del botón */
    font-size: 18px; /* Tamaño del texto */
    position: absolute; /* Posiciona el botón en la esquina superior derecha */
    top: 5px; /* Espacio desde la parte superior */
    right: 5px; /* Espacio desde la derecha */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
}
.contact-form {
    display: flex; /* Permitir flexbox para disposición */
    flex-direction: column; /* Disposición vertical */
    gap: 10px; /* Espacio entre los elementos del formulario */
}

.contact-form label {
    font-weight: bold; /* Resaltar las etiquetas */
}

.contact-form input {
    padding: 8px; /* Espacio interno de los campos de entrada */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px; /* Bordes redondeados */
}

.contact-form button {
    background-color: #007bff; /* Color del botón */
    color: white; /* Color del texto del botón */
    border: none; /* Sin borde */
    padding: 10px; /* Relleno interno */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
}

.contact-form button:hover {
    background-color: #0056b3; /* Color al pasar el mouse */
}



.container3:hover .info {
    backdrop-filter: blur(30px);
	display: block; /* Muestra la información al pasar el mouse */
}

.glass-effectc {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s 0.5s;
	margin-top: 10px;
	margin:40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 100%;
	padding: 40px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 15px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);

}

.container2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 20px;
	max-width: 1000px;
	width: 100%;
  }
  .info-box, .contact-form {
	backdrop-filter: blur(10px);
	background-color: rgba(234, 255, 252, 0.644);
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
	max-width: 300px;
	color: #000000;
  }
  .info-box {
	flex: 1;
  }
  .contact-form {
	max-width: 400px;
	flex: 2;
    z-index: 12;
  }
  .contact-form h2 {
	text-align: center;
	margin-bottom: 20px;
  }
  .form-field {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.1);
  }
  .form-field input, .form-field textarea {
	flex: 1;
	border: none;
	background: transparent;
	color: #000000;
	padding-left: 10px;
  }
  .form-field input::placeholder, .form-field textarea::placeholder {
	color: rgba(0, 0, 0, 0.9);
  }
  .submit-btn {
	width: 100%;
	padding: 10px;
	font-size: 1.7em;

	font-family: 'League Spartan', sans-serif;
	color: #000000;
	background-color: #00c853;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
  }
  .submit-btn:hover {
	background-color: #00a046;
  }
  /* Responsividad */
  @media (max-width: 768px) {
	.container2 {
		
	  flex-direction: column;
	  align-items: center;
	}
	.contact-section4 {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 55vh;
		padding: 0px;
	}
  }

 


@media (max-width: 768px) {
	.wrapper {
		width: 95%;  /* Ajustamos el ancho para celulares */
        height: 70%; /* Contenedor ocupa el 100% en pantallas pequeñas */
	}

	
	
}
@media  (width  <760px) {
	ul.clientes-list {
		grid-template-columns: 3fr; /* Una columna en pantallas pequeñas */
		display: grid;
		width: 100%;
			gap: 0px;
			justify-items: center;
			padding: 0px;
			margin: 0px 0;
			flex-wrap: wrap;
			align-items: center;
	}

	ul.clientes-list li button {
		width: 100px;
		height: 100px;
		padding: 0px;
	}
	
	ul.clientes-list li:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
		margin-left: 1px;
		margin-right: 1px;
	  }
	  
	  ul.clientes-list li:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
		margin-left: 1px;
		margin-right: 1px;
	  }
	  
	  ul.clientes-list li:nth-child(3) {
		grid-column: 2;
		grid-row: 1;
		margin-left: 1px;
		margin-right: 1px;
	  }
	  
	  ul.clientes-list li:nth-child(4) {
		grid-column: 2;
		grid-row: 2;
		margin-left: 1px;
		margin-right: 1px;
	  }
	  
	  ul.clientes-list li:nth-child(5) {
		grid-column: 3;
		grid-row: 1;
		margin-left: 1px;
		margin-right: 1px;
	  }
	  
	  ul.clientes-list li:nth-child(6) {
		grid-column: 3;
		grid-row: 2;
		margin-left: 1px;
		margin-right: 1px;
	  }
	  
	  ul.clientes-list li:nth-child(7) {
		grid-column: 2;
		grid-row: 3;
		margin-left: 1px;
		margin-right: 1px;
	  }
	
      ul.clientes-list li:nth-child(8) {
		grid-column: 1;
		grid-row: 3;
		margin-left: 1px;
		margin-right: 1px;
	  }
      ul.clientes-list li:nth-child(9) {
		grid-column: 3;
		grid-row: 3;
		margin-left: 1px;
		margin-right: 1px;
	  }
	
	

}
  
@media (min-width: 760px)  {


	
	

ul.clientes-list {
	display: grid;
width: 100%;
	gap: 0px;
	justify-items: center;
	padding: 0px;
	margin: 0px 0;
	flex-wrap: wrap;
	align-items: center;
	margin-right: -100px;
  }
  
  ul.clientes-list li {
	list-style-type: none;
	
  }
  
  /* Posicionar los círculos en forma de corazón */
 
  ul.clientes-list li:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
	margin-left: 1px;
	margin-right: 1px;
  }
  
  ul.clientes-list li:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
	margin-left: 1px;
	margin-right: 1px;
  }
  
  ul.clientes-list li:nth-child(3) {
	grid-column: 2;
	grid-row: 1;
	margin-left: 1px;
	margin-right: 1px;
  }
  
  ul.clientes-list li:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
	margin-left: 1px;
	margin-right: 1px;
  }
  
  ul.clientes-list li:nth-child(5) {
	grid-column: 3;
	grid-row: 1;
	margin-left: 1px;
	margin-right: 1px;
  }
  
  ul.clientes-list li:nth-child(6) {
	grid-column: 3;
	grid-row: 2;
	margin-left: 1px;
	margin-right: 1px;
  }
  
  ul.clientes-list li:nth-child(7) {
	grid-column: 2;
	grid-row: 3;
	margin-left: 1px;
	margin-right: 1px;
  }
  ul.clientes-list li:nth-child(8) {
	grid-column: 1;
	grid-row: 3;
	margin-left: 1px;
	margin-right: 1px;
  }
  ul.clientes-list li:nth-child(9) {
	grid-column: 3;
	grid-row: 3;
	margin-left: 1px;
	margin-right: 1px;
  }
  ul.clientes-list li button {
	width: 150px;
	height: 150px;
	border-radius: 20%;
	border: 5px solid white;
	overflow: hidden; /* Esto evita que la imagen se salga del botón */
	position: relative;
	padding: 0;
	cursor: pointer;}
  
  ul.clientes-list li button img {
	width: 100%; /* Ocupar el 100% del ancho del contenedor */
    height: 100%; /* Ocupar el 100% de la altura del contenedor */
    object-fit: cover; /* Ajuste para cubrir completamente el contenedor sin distorsión */
    border-radius: 8px; /* Mantiene el borde redondeado */
    margin: 0;
}

  /* Colores alternos para cada círculo */
  ul.clientes-list li:nth-child(1) button { background: white; }
  ul.clientes-list li:nth-child(2) button { background: white; }
  ul.clientes-list li:nth-child(3) button { background: white; }
  ul.clientes-list li:nth-child(4) button { background: white; }
  ul.clientes-list li:nth-child(5) button { background: white; }
  ul.clientes-list li:nth-child(6) button { background: white; }
  ul.clientes-list li:nth-child(7) button { background: white; }
  ul.clientes-list li:nth-child(8) button { background: white; }
  ul.clientes-list li:nth-child(9) button { background: white; }


  .clientes {
	margin-top: 0px;
    text-align: center;
    padding: 10px 0;
	margin-left: 60px;
}
}
@media (min-width: 900px)  {


	
	

	ul.clientes-list {
		display: grid;

		gap: -90px;
		right: 0%;
		padding: 0px;
		margin: 0px 0;
		flex-wrap: wrap;
		align-items: center;
		justify-items: center;
	  }
	  
	  ul.clientes-list li {
		width: 90%;
		
		margin: auto;
		padding: auto;
		
	  }
	  
	  /* Posicionar los círculos en forma de corazón */
	 
	  ul.clientes-list li:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
       
	  }
	  
	  ul.clientes-list li:nth-child(2) {
		grid-column: 2;
		grid-row: 2;
		
	  }
	  
	  ul.clientes-list li:nth-child(3) {
		grid-column: 3;
		grid-row: 1;
	  }
	  
	  ul.clientes-list li:nth-child(4) {
		grid-column: 4;
		grid-row: 2;
	  }
	  
	  ul.clientes-list li:nth-child(5) {
		grid-column: 5;
		grid-row: 1;
	  }
	  
	  ul.clientes-list li:nth-child(6) {
		grid-column: 6;
		grid-row: 2;
	  }
	  
	  ul.clientes-list li:nth-child(7) {
		grid-column: 7;
		grid-row: 1;
		margin-right: 100px;
	  }
      ul.clientes-list li:nth-child(8) {
		grid-column: 3;
		grid-row: 3;
	
	  }
      ul.clientes-list li:nth-child(9) {
		grid-column: 5;
		grid-row: 3;
		
	  }

	  ul.clientes-list li button {
		width: 110px;
		height: 120px;
		border-radius: 20%;
		border: 5px solid white;
		overflow: hidden; /* Esto evita que la imagen se salga del botón */
		position: relative;
		padding: 0;
		cursor: pointer;}
	  
	  ul.clientes-list li button img {
		width: 100%; /* Ocupar el 100% del ancho del contenedor */
		height: 90%; /* Ocupar el 100% de la altura del contenedor */
		object-fit: cover; /* Ajuste para cubrir completamente el contenedor sin distorsión */
		border-radius: 8px; /* Mantiene el borde redondeado */
		margin: 0;
	}
	
	  /* Colores alternos para cada círculo */
	  ul.clientes-list li:nth-child(1) button { background: white; }
	  ul.clientes-list li:nth-child(2) button { background: white; }
	  ul.clientes-list li:nth-child(3) button { background: white; }
	  ul.clientes-list li:nth-child(4) button { background: white; }
	  ul.clientes-list li:nth-child(5) button { background: white; }
	  ul.clientes-list li:nth-child(6) button { background: white; }
	  ul.clientes-list li:nth-child(7) button { background: white; }
      ul.clientes-list li:nth-child(8) button { background: white; }
      ul.clientes-list li:nth-child(9) button { background: white; }
	}
	.contact-section2 {
		display: flex;
	   
		flex-direction: column; /* Asegúrate de que las secciones estén en columna */
		justify-content: center;
		align-items: center;
		margin-left: 10px;
	 margin: 0px;
			padding: 10px;
			width: 100%; /* Ajusta el padding según lo necesites */
	}
@media (max-width: 480px) {
	
}
/* Estilo para la sección de Productos */
.productos-grid {
    display: flex;
    justify-content: space-around;
    padding: 50px 10;
}

.producto-item {
    text-align: center;
}

.producto-item img {
    max-width: 100px;
}

/* Estilo para la sección de Promociones */
.promociones {
    text-align: center;
    padding: 0px 10;
	
}

.promocion-item img {
    max-width: 200px;
    margin-bottom: 20px;
}

/* Responsivo */
@media (max-width: 768px) {
    .clientes-grid,
    .productos-grid {
        flex-direction: column;
    }
}

  /* Contenedor de la caja con perspectiva */
/* Caja 3D */
.box-container
{
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 550px;
	width: 100%;
	
}
.box {
    width: 400px; /* Aumentado el ancho de la caja */
    height: 250px; /* Mantener la altura igual */
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-28deg) rotateY(-30deg);
    transition: transform 0.6s ease;
    cursor: pointer;
    display: flex;
	flex-direction: column;
	justify-content: center;
	top: 1%;
	z-index: 100;

}

/* Caras de la caja */
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #d2a679; /* Color de cartón */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
.left {
    position: absolute;
    width: 60%;
    height: 100%;
    background-color: #d2a679; /* Color de cartón */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
.right {
    position: absolute;
    width: 60%;
    height: 100%;
    background-color: #d2a679; /* Color de cartón */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
.back {
    position: absolute;
    width: 99%;
    height: 100%;
    background-color: #d2a679; /* Color de cartón */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
.back, .left {
    background-color: #917152; /* Color de cartón */
}

.front { transform: translateZ(123px); }
.back { transform: rotateY(180deg) translateZ(125px); }
.left { transform: rotateY(-90deg) translateZ(117px); }
.right { transform: rotateY(90deg) translateZ(279px); }
.bottom { transform: rotateX(-90deg) translateZ(126px); background-color: #c2955b; }

/* Tapas superiores */
.top-left {
    position: absolute;
    width: 50%;
    height: 99%;
    background-color: #c2955b;
    top: -125px;
	transform-origin: 194px;
    transition: transform 1.9s ease;
}
.top-right {
    position: absolute;
    width: 50%;
    height: 99%;
    background-color: #c2955b;
    
	top: -125px;
	transform-origin: 194px;
  
    transition: transform 1.9s ease;
}
.top-left {
	
    left: -188px;
    transform: rotateX(90deg) rotateY(180deg) translateY(0px) translateX(0px) ;
}

.top-right {

    right:0px;
    transform: rotateX(90deg) rotateY(0deg) translateY(0%) translateX(0px);
}

/* Animación de apertura de las tapas */
.box.open .top-left { 
	top: -125px;
    left: -191px;
    transform: rotateX(90deg) rotateY(-60deg) translateY(0px) translateX(0px);
}

.box.open .top-right {
	
	right:0px;
    transform: rotateX(90deg) rotateY(220deg) translateY(0px) translateX(0px);
}


/* Animación de los íconos */
.icons-container {
    position: absolute;
    top: -100px; /* Ajuste para que los íconos estén sobre la caja */
    left: 90%;
    width: 100%; 
    height: 150px;
	
    margin: 30px;
    transform: translate(-50%, -100%) translateZ(110px); /* Ubicado sobre la caja */
    opacity: 0;
    transition: opacity 0.5s ease, transform 1.9s ease;
}


.icon2 {
	position: absolute;
    top: 30px; /* Ajuste para que los íconos estén sobre la caja */
	left: 90px;
	width: 90px; 
    height: 100px;
    margin: 30px;
    transform: translate(-50%, -100%) translateZ(110px); /* Ubicado sobre la caja */
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.7s ease;

}
.icon3 {
	position: absolute;
    top: 30px; /* Ajuste para que los íconos estén sobre la caja */
	left: 220px;
	width: 90px; 
    height: 100px;
    margin: 30px;
    transform: translate(-50%, -100%) translateZ(110px); /* Ubicado sobre la caja */
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.7s ease;

}





.icon6 {
	position: absolute;
    top: 60px; /* Ajuste para que los íconos estén sobre la caja */
    left: 0%;
	width: 100%; 
    height: 400px;
    margin: 30px;
	animation: float 3s ease-in-out infinite;

    transform: translate(-50%, -100%) translateZ(110px); /* Ubicado sobre la caja */
    opacity: 1;
 
}






.box.open .icons-container {
    opacity: 1;
    transform: translate(-105%, -160%) translateZ(0px); /* Ajuste para que floten más arriba */
}

@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Posición inicial */
      }
      50% {
        transform: translateY(-20px); /* Flotar hacia arriba */
      }
}
@media (max-width: 480px) {
	.box-container {
		height: 350px;
	}

	.box {
		width: 180px;
		height: 120px;
		top: 1%;
	}

	.front { transform: translateZ(55px); }
	.back { transform: rotateY(180deg) translateZ(57px); }
	.left { transform: rotateY(-90deg) translateZ(50px); }
	.right { transform: rotateY(90deg) translateZ(126px); }
	.bottom { transform: rotateX(-90deg) translateZ(58px); }
	
	
	.top-left {
		left: -81px;
		top: -60px;
		transform-origin: 85px;
	}
	.top-right {
		top: -60px;
		transform-origin: 85px;
	}
	/* Animación de apertura de las tapas */
	.box.open .top-left { 
		top: -60px;
		left: -81px;
		transform: rotateX(90deg) rotateY(-60deg) translateY(0px) translateX(0px);
	}
	
	.box.open .top-right {
		
		right:0px;
		transform: rotateX(90deg) rotateY(220deg) translateY(0px) translateX(0px);
	}
	
	.icons-container {
        top: 80px;
        left: 60%;
        width: 280px;
        height: 160px;
        margin: 5px;
        transform: translate(-50%, -100%) translateZ(50px);
    }

    

    .icon6 {
        top: -40px; /* Ajuste para que los íconos estén sobre la caja */
    left: 0%;
        width: 100%;
        height: 100px;
        margin: 15px;
        transform: translate(-50%, -100%) translateZ(50px);
    }

    .box.open .icons-container {
        opacity: 1;
        transform: translate(-50%, -100%) translateZ(50px);
    }
	footer {
        padding: 15px 0;
        font-size: 12px;
    }
	
}

footer {
	background-color: rgba(255, 255, 255, 0.308);
	color: #000000bb;
	text-align: center; 
 justify-content: center;
 align-items: center;/* Centra el texto horizontalmente */
	padding: 30px 0;
	font-size: 14px;
	width: 100%;
	height: 70px;
	position: absolute;
	bottom: 0;
	right: 0;
	backdrop-filter: blur(50px); 
}
/* Estilos generales para el logo */
.logos {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 0.5%;
    left: 49%;
    transform: translateX(-50%); /* Centra el logo horizontalmente */
    width: 50px; /* Ajusta el tamaño según lo necesites */
}

/* Modo responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .logos {
        display: block; /* Muestra el logo solo en pantallas pequeñas */
    }
}

@media (width>780) {
    .principal{
        right: 3%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80%;
        padding: 0px;
        margin: 0px;
        position: relative;
        z-index: 15;
        margin-top: 40px;
        left:0px;
        
    }
}