:root {
    --color-primary: #08173A;
    --color-secondary: #DB0000;
    --color-accent: #FF0000;
    --color-light-gray: #f8fafc;
    --color-gray: #64748b;
    --color-dark-gray: #1e293b;
    --font-h1: 'Inter', sans-serif;
    --font-h2: 'Inter', sans-serif;
    --font-h3: 'Inter', sans-serif;
    --font-h4: 'Inter', sans-serif;
    --font-h5: 'Inter', sans-serif;
    --font-h6: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
}

body { font-family: var(--font-body); background-color: var(--color-light-gray); color: var(--color-dark-gray); }
h1 { font-family: var(--font-h1); }
h2 { font-family: var(--font-h2); }
h3 { font-family: var(--font-h3); }
h4 { font-family: var(--font-h4); }
h5 { font-family: var(--font-h5); }
h6 { font-family: var(--font-h6); }

/* Contenedor Personalizado */
.container {
    max-width: 85% !important;
}
@media (max-width: 1024px) {
    .container {
        max-width: 90% !important;
    }
}
@media (max-width: 768px) {
    .container {
        max-width: 95% !important;
    }
}

/* Corregir eventos del cursor en elementos hijos */
.pointer-events-none {
    pointer-events: none !important;
}

/* Optimizaciones GPU para imágenes y bordes redondeados en transiciones */
.gpu-clip-fix {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    isolation: isolate;
}
.gpu-image-fix {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}