/* base.css */

/* General styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa; /* Color de fondo pastel claro */
    color: #333;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #333;
}

/* Navbar styles */
.navbar {
    background-color: #b2dfdb; /* Verde pastel */
}

.navbar-brand {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: #333;
}

.nav-link {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: #333;
}

.nav-link.active {
    font-weight: 500;
    color: #004d40; /* Verde oscuro para el texto activo */
}

/* Estilos para íconos en dispositivos grandes */
.navbar-nav.ms-auto .nav-item {
    margin-left: 1rem; /* Espacio entre íconos en dispositivos grandes */
}

.navbar-nav.ms-auto .nav-link {
    font-size: 1.2rem; /* Tamaño de los íconos */
}

/* Estilos para íconos en dispositivos móviles */
.d-lg-none .nav-link {
    font-size: 1.5rem; /* Tamaño de los íconos en dispositivos móviles */
}

.d-lg-none {
    padding: 1.5rem; /* Ajuste del espacio alrededor de los íconos en dispositivos móviles */
    display: flex;
    justify-content: center;
    gap: 2rem; /* Espacio mayor entre íconos en dispositivos móviles */
}

/* Estilo para el botón flotante de WhatsApp */
.whatsapp-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; /* Color verde de WhatsApp */
    border-radius: 50%; /* Hace el botón redondo */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra del botón */
    width: 60px; /* Ancho del botón */
    height: 60px; /* Alto del botón */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    transition: box-shadow 0.3s ease; /* Transición suave al hacer hover */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.whatsapp-chat a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* Color del ícono */
    font-size: 2.2rem; /* Tamaño del ícono */
    text-decoration: none; /* Sin subrayado */
}

.whatsapp-chat a:hover {
    color: #f0f0f0; /* Color más claro al hacer hover */
}

/* Efecto hover en el botón */
.whatsapp-chat:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada en hover */
}

/* Estilo para íconos sociales */
.social-icons a {
    font-size: 1.5rem; /* Tamaño de los íconos sociales */
    color: #333;
}

.facebook { color: #1877f2; }
.tiktok { color: #000; }
.instagram { color: #c13584; }
.pinterest { color: #e60023; }
.twitter { color: #1da1f2; }

/* Estilos para íconos de carrito y login */
.cart-icon,
.login-icon {
    font-size: 1.2rem; /* Tamaño reducido para íconos de carrito y login */
}

/* Footer styles */
.footer {
    background-color: #f8bbd0; /* Rosa pastel */
    color: #333;
}

.footer a {
    color: #333;
}

.footer a:hover {
    text-decoration: underline;
}