/* 
   SISTEMA DE ESTILOS - MABAT DIGITAL
   ----------------------------------
   Contiene estilos personalizados, animaciones y configuraciones
   que complementan a Tailwind CSS.
*/

/* Prevención de desbordamiento horizontal global */
body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 
   TARJETAS CRISTAL (Glassmorphism)
   Efecto de desenfoque y transparencia para un look premium.
*/
.tarjeta-cristal {
    background: rgba(51, 53, 53, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto hover solo en pantallas grandes (Desktop) */
@media (min-width: 1024px) {
    .tarjeta-cristal:hover {
        transform: translateY(-8px);
        border-color: rgba(255, 215, 0, 0.3);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }
}

/* 
   SISTEMA DE REVELADO (Scroll Reveal)
   Controla la aparición suave de los elementos al hacer scroll.
*/
.revelar {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.revelar.activo {
    opacity: 1;
    transform: translateY(0);
}

/* 
   CONFIGURACIÓN DE ICONOS
   Ajustes para Material Symbols de Google.
*/
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 
   AJUSTES DE NAVEGACIÓN
   Efectos de transparencia y blur para el menú fijo.
*/
#menu-navegacion {
    transition: all 0.5s ease;
}

#menu-navegacion.scrolled {
    background-color: rgba(0, 0, 0, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    height: 4rem; /* h-16 */
}