body {
    font-family: 'Rubik', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    color: #808080;
}

/* Encabezado (Header) */
header {
    padding: 15px 30px; /* Reducir padding */
    background: linear-gradient(135deg, #ffffff, #e0e0e0); /* Ajustar gradiente */
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Reducir margen inferior */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #ccc; /* Ajustar color del borde */
    transition: background 0.3s ease; /* Transición de fondo */
}

.logo img {
    max-width: 120px; /* Reducir tamaño del logo */
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease; /* Elimina el box-shadow en el hover */
}

.logo img:hover {
    transform: scale(1.1); /* Efecto de zoom en hover */
}

nav {
    flex: 1;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 15px; /* Reducir el espacio entre elementos */
    padding: 0;
    margin: 0;
    flex-wrap: wrap; /* Permitir que los elementos se ajusten */
}

nav ul li a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em; /* Reducir el tamaño de la fuente */
    padding: 8px 12px; /* Ajustar el padding */
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

nav ul li a:hover {
    background-color: #038A4F; /* Usar el color Verde Esmeralda para el hover */
    color: #fff;
    transform: scale(1.1);
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .logo img {
        max-width: 80px; /* Ajustar tamaño del logo en móviles */
    }

    nav ul {
        flex-direction: column; /* Apilar elementos de navegación verticalmente */
        gap: 10px;
        text-align: center; /* Centrar el texto en el menú de navegación */
    }

    nav ul li a {
        font-size: 0.8em; /* Ajustar tamaño de fuente */
        padding: 6px 8px; /* Ajustar padding */
    }
}

@media (max-width: 480px) {
    header {
        padding: 8px; /* Ajustar padding */
    }

    .logo img {
        max-width: 60px; /* Ajustar tamaño del logo en móviles pequeños */
    }

    nav ul {
        gap: 5px; /* Reducir más el espacio entre elementos */
    }

    nav ul li a {
        font-size: 0.7em; /* Ajustar tamaño de fuente */
        padding: 4px 6px; /* Ajustar padding */
    }
}

/* Barra Social */
.social-bar {
    background: #9D4B96; /* Color Púrpura Medio Profundo */
    color: #fff;
    padding: 10px 20px; /* Reducir padding */
    display: flex;
    justify-content: space-between; /* Alinear logo a la izquierda y los íconos a la derecha */
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
}

/* Sección del logo en el lado izquierdo */
.social-logo {
    display: flex;
    align-items: center;
}

/* Tamaño de la imagen del logo */
.social-logo img {
    height: auto; /* Ajusta el tamaño del logo según sea necesario */
    width: auto;  /* Mantener proporciones */
}

/* Sección de los íconos sociales en el lado derecho */
.social-links {
    display: flex;
    align-items: center;
}

/* Estilo de los enlaces dentro de la barra social */
.social-bar a {
    color: #fff;
    margin: 0 20px; /* Aumentar espaciado entre los íconos sociales */
    text-decoration: none;
    font-size: 1.2em; /* Aumentar tamaño de fuente */
    transition: color 0.3s, transform 0.3s;
}

/* Efecto de hover para los enlaces */
.social-bar a:hover {
    color: #038A4F;
    transform: scale(1.1);
}

/* Efecto hover para la barra social */
.social-bar:hover {
    background: rgba(157, 75, 150, 0.9);
}


/* Contenedor Principal */
.contenedor {
    max-width: 1100px; /* Reducir el ancho máximo */
    margin: 0 auto;
    padding: 20px; /* Ajustar padding */
    background: #fff;
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Carrusel principal */
.carousel {
    height: 400px;
    position: relative;
    overflow: hidden; /* Esconde contenido que se sale del carrusel */
}

.carousel-inner {
    display: flex;
    transition: transform 1s ease-in-out; /* Transición suave para el desplazamiento */
    height: 100%;
}

.carousel-item {
    min-width: 100%; /* Cada imagen ocupa todo el ancho del carrusel */
    height: 100%; /* Mantener la altura del carrusel */
    flex-shrink: 0; /* Evita que los elementos cambien de tamaño */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen manteniendo su relación de aspecto */
    transition: transform 0.3s ease; /* Transición suave para el efecto hover */
}

.carousel-item img:hover {
    transform: translateY(-10px); /* Efecto sutil de levantarse */
}



/* Estilos para pantallas más pequeñas */
@media (max-width: 768px) {
    .carousel {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .carousel {
        height: 200px;
    }
}


/* Estilos para la sección 'Conócenos' */
.conocenos {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 15px; /* Ajustado */
    background-color: #f0f4f8;
    text-align: center;
}

.conocenos .contenido {
    max-width: 800px;
    margin-bottom: 40px;
}

.conocenos h2 {
    font-size: 2.2em; /* Tamaño reducido */
    margin-bottom: 15px;
    color: #333;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.conocenos p {
    font-size: 1em; /* Tamaño reducido */
    margin-bottom: 30px;
    color: #555;
    line-height: 1.6;
}

.btn {
    display: inline-block;
    padding: 12px 30px; /* Botón más pequeño */
    font-size: 1em; /* Tamaño de texto ajustado */
    background-color: #9D4B96;
    color: white;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #038A4F;
    transform: translateY(-3px);
}

.conocenos-imagenes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.imagen-izquierda, .imagen-derecha {
    flex: 1 1 30%; /* Ajusta el tamaño base para las imágenes */
    max-width: 20%; /* Reducción del tamaño máximo */
}

.imagen-izquierda img, .imagen-derecha img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Estilos responsivos */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 1.8em; /* Ajustado */
    }

    .conocenos, .productos-destacados {
        padding: 30px 10px; /* Padding ajustado */
    }
    
    .producto-item {
        min-width: 180px; /* Ajustado */
    }

    .imagen-izquierda, .imagen-derecha {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Sección Contacto */
.contacto {
    padding: 50px 15px;
    background-color: #f0f4f8;
    text-align: center;
}

.contacto h2 {
    font-size: 2em; /* Reducir tamaño del título */
    margin-bottom: 20px;
}

.contacto p {
    font-size: 1em; /* Reducir tamaño del texto */
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    padding: 12px 30px; /* Ajustar tamaño del botón */
    font-size: 1em; /* Ajustar tamaño de la fuente */
    background-color: #0062cc;
    color: white;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #004aad;
    transform: translateY(-3px);
}


/* Sección de productos destacados */
.productos-destacados {
    padding: 40px 20px; /* Aumentar padding */
    background-color: #f9f9f9; /* Ajustar color de fondo */
    text-align: center;
    position: relative;
}

.productos-carrusel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.productos-grid {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform; /* Mejora el rendimiento en algunos navegadores */
}

/* Estilos de cada ficha de producto */
.producto-item {
    flex: 0 0 auto;
    max-width: 220px; /* Aumentar tamaño máximo */
    margin: 0 15px; /* Ajustar margen */
    text-align: center;
}

.producto-ficha {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px; /* Aumentar el radio del borde */
    padding: 20px; /* Aumentar padding */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Ajustar sombra */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Estilo para la imagen */
.producto-item img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Aumentar el radio del borde */
    margin-bottom: 15px; /* Aumentar margen inferior */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ajustar sombra */
}

/* Efecto hover en la ficha */
.producto-ficha:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Ajustar sombra */
    transform: translateY(-10px); /* Aumentar efecto de elevación */
}

/* Estilos de los botones de navegación */
.carrusel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 12px; /* Aumentar padding */
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s, transform 0.3s;
    border-radius: 50%; /* Hacer los botones redondos */
}

.carrusel-button:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1); /* Añadir efecto de zoom */
}

.carrusel-button.left {
    left: 15px; /* Ajustar posición */
}

.carrusel-button.right {
    right: 15px; /* Ajustar posición */
}

/* Aumentar el tamaño en pantallas pequeñas */
@media (max-width: 768px) {
    .producto-item {
        max-width: 180px; /* Ajustar tamaño máximo */
        margin: 0 10px; /* Ajustar margen */
    }
}

@media (max-width: 480px) {
    .producto-item {
        max-width: 140px; /* Ajustar tamaño máximo */
        margin: 0 5px; /* Ajustar margen */
    }
}

/* Estilo de los botones de navegación */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px; /* Aumentar tamaño del botón */
    height: 50px; /* Aumentar tamaño del botón */
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: 20px; /* Aumentar tamaño de la fuente */
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.next {
    right: 15px; /* Ajustar posición */
}

.prev {
    left: 15px; /* Ajustar posición */
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1); /* Añadir efecto de zoom */
}

/* Ajustes en los tamaños de los botones para dispositivos móviles */
@media (max-width: 480px) {
    .prev, .next {
        width: 40px; /* Ajustar tamaño del botón */
        height: 40px; /* Ajustar tamaño del botón */
        font-size: 16px; /* Ajustar tamaño de la fuente */
    }
}

/* Espaciado adicional para el pie de página */
footer.footer {
    margin-top: 40px; /* Espacio adicional entre el contenedor de contacto y el pie de página */
}