/* ========================================  
   TRIBU IMPULSA - Custom Styles  
   ======================================== */  
  
/* ----------------------------------------  
   BASE / RESET  
---------------------------------------- */  
:root {  
    scroll-behavior: smooth;  
}  
  
*,  
*::before,  
*::after {  
    box-sizing: border-box;  
}  
  
body {  
    font-family: 'Inter', sans-serif;  
    background-color: white;  
    color: #181B34;  
    margin: 0;  
    padding: 0;  
}  
  
/* ----------------------------------------  
   ACCESSIBILITY: Skip Link  
---------------------------------------- */  
.skip-link {  
    position: absolute;  
    top: -100px;  
    left: 0;  
    background: #6161FF;  
    color: white;  
    padding: 1rem;  
    z-index: 9999;  
    transition: top 0.3s ease;  
    text-decoration: none;  
    font-weight: bold;  
}  
  
.skip-link:focus {  
    top: 0;  
}  
  
/* ----------------------------------------  
   ICONS: Material Symbols  
---------------------------------------- */  
.material-symbols-outlined {  
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;  
    display: inline-block;  
    vertical-align: middle;  
}  
  
/* ----------------------------------------  
   TOPBAR / NAV  
---------------------------------------- */  
.topbar.glass-nav {  
    background: rgba(255, 255, 255, 0.85);  
    backdrop-filter: blur(12px);  
    -webkit-backdrop-filter: blur(12px);  
}  
  
/* ----------------------------------------  
   UTILITIES: Shadows  
---------------------------------------- */  
.premium-shadow {  
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);  
}  
  
/* ----------------------------------------  
   VIDEO: Aspect Ratio Fallback  
---------------------------------------- */  
.aspect-video-custom {  
    position: relative;  
    padding-bottom: 56.25%; /* 16:9 */  
    height: 0;  
}  
  
.aspect-video-custom > * {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
}  
  
/* ----------------------------------------  
   BUTTONS (BEM)  
---------------------------------------- */  
.btn {  
    cursor: pointer;  
    border: none;  
    font-family: inherit;  
}  
  
/* Los estilos específicos de los botones están definidos con Tailwind inline */  
  
/* ----------------------------------------  
   CARDS (BEM)  
---------------------------------------- */  
/* Los estilos de las cards están definidos con Tailwind inline */  
  
/* ----------------------------------------  
   SECTIONS (BEM)  
---------------------------------------- */  
/* Los estilos de las secciones están definidos con Tailwind inline */  
  
/* ----------------------------------------  
   FOOTER (BEM)  
---------------------------------------- */  
/* Los estilos del footer están definidos con Tailwind inline */  
  
/* ----------------------------------------  
   ANIMATIONS  
---------------------------------------- */  
@keyframes fade-in {  
    from {  
        opacity: 0;  
        transform: translateY(10px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  
  
.animate-fade-in {  
    animation: fade-in 0.6s ease-out;  
}