/* ==========================================================================
   Estilos Globales - Ludivator
   ========================================================================== */

body {
    font-family: 'Poppins', sans-serif;
}

/* Patrón para secciones oscuras del Hero y Tarjetas */
.bg-grid-pattern-dark {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    mask-image: radial-gradient(circle at center, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}

/* Patrón para secciones claras */
.bg-grid-pattern-light {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

/* Utilidades personalizadas para animaciones hover */
.hover-scale { 
    transition: transform 0.3s ease; 
}

.group:hover .hover-scale { 
    transform: scale(1.05); 
}

/* ==========================================================================
   NUEVO: Componentes Interactivos (Top Bar, Acordeones y Scroll)
   ========================================================================== */

/* Ocultar barra de scroll en el Top Menu móvil (Estilo Telecentro) */
.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.hide-scrollbar { 
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Transiciones suaves para el acordeón */
.accordion-content {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out;
    opacity: 0;
}
.accordion-content.open {
    opacity: 1;
}
.animation-delay-2000 {
    animation-delay: 2s;
}

/* Utilidad para animaciones al hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Utilidades de Texto (Blog)
   ========================================================================== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Efectos Portal
   ========================================================================== */
.icon-hover-effect { 
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.group:hover .icon-hover-effect { 
    transform: scale(1.1); 
}