/* -------------------------------------------------------------------------- */
/* Custom Styles and Responsiveness (CSS)                   */
/* -------------------------------------------------------------------------- */

/* Configuración de fuentes y variables de color */
/* Nota: Las clases principales como 'bg-white', 'text-gray-800', etc., se definen en el CDN de Tailwind */

/* -- Fuentes -- */
/* La importación de Google Fonts debe estar en index.html o aquí si no se usa Tailwind config */
/* Ya que usamos Tailwind, la fuente Poppins ya está definida en el <script> de index.html */

/* -- Colores de Marca (Para uso en CSS puro) -- */
:root {
    --brand-default: #059669; /* Emerald 600 */
    --brand-dark: #064e3b;   /* Emerald 900 */
}

/* -------------------------------------------------------------------------- */
/* Estilos Personalizados                            */
/* -------------------------------------------------------------------------- */

/* Desplazamiento suave (Smooth Scrolling) */
html {
    scroll-behavior: smooth;
}

/* Animación para el modal Lightbox */
#lightbox {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#lightbox.is-open {
    opacity: 1;
}

#lightbox-img {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}
#lightbox.is-open #lightbox-img {
    transform: scale(1);
}

/* -------------------------------------------------------------------------- */
/* Responsiveness                               */
/* -------------------------------------------------------------------------- */

/* Estilos que podrían necesitar ajuste manual o media queries */

/* Ajuste para móviles (pequeños) - Menos de 640px */
@media (max-width: 639px) {
    /* Ajuste de tipografía en hero para pantallas muy pequeñas */
    .hero-title-main {
        font-size: 2.25rem; /* 36px */
    }
    .hero-subtitle-main {
        font-size: 1rem; /* 16px */
    }
    
    /* Ajuste de padding en secciones */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Ajuste para tabletas y escritorios pequeños (sm a md) - 640px a 767px */
@media (min-width: 640px) and (max-width: 767px) {
    /* Ajuste de Hero para mejor visibilidad */
    .hero-title-main {
        font-size: 3rem; /* 48px */
    }
    
    /* Grid de servicios en 2 columnas */
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ajuste para escritorios (lg) - 1024px y más. */
@media (min-width: 1024px) {
    /* Grid de servicios en 4 columnas */
    .service-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Footer en 3 columnas */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}