/*
 * Archivo: styles.css
 * Contiene variables CSS y estilos específicos
 */

/* Definición de la paleta de colores personalizada para uso en Tailwind config */
:root {
    --color-primary: #003366; /* Azul Marino (Confianza, Base del Logo) */
    --color-secondary: #333333; /* Gris Oscuro */
    --color-accent: #FF8C00; /* Naranja Quemado (CTA/Acento) */
    --color-light-bg: #F9FAFB; /* Fondo Blanco/Gris muy claro */
}

/* Clases de utilidad para referenciar variables */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.text-accent { color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.bg-light-bg { background-color: var(--color-light-bg); }

/* Estilo para el botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efecto de transición para la galería de imágenes */
.gallery-item img {
    transition: transform 0.3s ease-in-out;
}
.gallery-item:hover img {
    transform: scale(1.05);
}

/* Reglas para el menú móvil */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%); /* Ocultar por defecto fuera de la pantalla */
}
#mobile-menu.open {
    transform: translateX(0); /* Mostrar cuando la clase 'open' está activa */
}