:root {

    --color-primary-dark: #03258C; 
    --color-primary-medium: #034C8C; 
    --color-accent-gold: #F2B705; 
    --color-accent-orange: #F28705; 
    --color-accent-Oralight: #f2870561;
    --color-error-red: #D93D04; 

    --color-white: #FFFFFF;
    --color-light-gray: #F8F8F8;
    --color-dark-gray: #333333;
    --color-light-gray: #898989;
    --color-light-plus-gray: #f4f4f4;
    --color-black: #000000;

    --font-family-base: 'Arial', sans-serif;
    
    --font-size-base: 1rem; 
    --font-size-h1: 3rem; 
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.5rem; 
    --font-size-p: 1.125rem; 


    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 25px;
    --border-radius-pill: 9999px; 

    --border-thin: 1px solid var(--color-light-gray);
    --border-medium: 2px solid var(--color-primary-medium);
    
    --box-shadow-small: 0 8px 16px rgba(0, 0, 0, 0.3);
    --box-shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.15);


    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
}


.loader-oval {
    --b: 18px; /* Grosor de la línea */
    --c: var(--color-accent-orange); /* Color de la línea (tomado de tu paleta) */
    --n: 12; /* Número de segmentos/líneas */
    --r: 20deg; /* Ángulo de repetición */
    
    width: 68px; /* Tamaño total del preloader */
    aspect-ratio: 1;
    border-radius: 50%;
    
    /* Degradado cónico que define el color principal */
    background: conic-gradient(from 90deg at 50% 50%, var(--c) 0% 100%);
    padding: 1px; /* Espacio para el borde exterior si se desea */
    
    /* --- MÁSCARA PARA CREAR LAS LÍNEAS OVALADAS --- */
    -webkit-mask:
        /* 1. Máscara que crea los segmentos giratorios */
        repeating-conic-gradient(
            #0000 0deg,
            #000 1deg 18deg, /* Ancho del segmento (ligeramente ajustado) */
            #0000 19deg 30deg /* Espacio entre segmentos */
        ),
        /* 2. Máscara circular interior para crear el hueco */
        radial-gradient(
            farthest-side,
            #0000 calc(100% - var(--b) - 1px),
            #000 calc(100% - var(--b))
        );
    
    /* Composición de las máscaras (similar a Photoshop) */
    -webkit-mask-composite: destination-in;
    mask-composite: intersect; /* Uso moderno */
    
    /* Animación de rotación */
    animation: spin 3s infinite linear;
}

@keyframes spin {
    to {
        transform: rotate(1turn); /* Gira 360 grados */
    }
}

.paddingYX {
    padding-top: 40px;
    padding-bottom: 40px;
}