/* Font Loading Optimization CSS */

/* Fallback fonts system para mejorar CLS y evitar FOUT */
:root {
    --font-primary: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-fallback: Georgia, 'Times New Roman', serif;
}

/* Initial state - use fallback fonts */
html {
    font-family: var(--font-fallback);
}

/* When fonts are loaded, switch to primary */
html.fonts-loaded {
    font-family: var(--font-primary);
}

/* Prevent FOUT/FOIT with font-display: swap */
@font-face {
    font-family: 'Merriweather-Fallback';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Georgia'), local('Times New Roman');
}

@font-face {
    font-family: 'Merriweather-Fallback';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Georgia Bold'), local('Times New Roman Bold');
}

/* Base typography with fallback */
body {
    font-family: var(--font-fallback);
    font-display: swap;
    transition: font-family 0.1s ease-in-out;
}

/* Apply primary font when loaded */
.fonts-loaded body {
    font-family: var(--font-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-fallback);
    font-weight: 700;
    font-display: swap;
    transition: font-family 0.1s ease-in-out;
}

.fonts-loaded h1,
.fonts-loaded h2,
.fonts-loaded h3,
.fonts-loaded h4,
.fonts-loaded h5,
.fonts-loaded h6 {
    font-family: var(--font-primary);
}

/* Paragraphs and text */
p, span, div, article {
    font-family: var(--font-fallback);
    font-weight: 400;
    font-display: swap;
    transition: font-family 0.1s ease-in-out;
}

.fonts-loaded p,
.fonts-loaded span,
.fonts-loaded div,
.fonts-loaded article {
    font-family: var(--font-primary);
}

/* Critical text above-the-fold - start with fallback */
.critical-text {
    font-family: var(--font-fallback);
    opacity: 1;
    transition: font-family 0.1s ease-in-out;
}

.critical-text.fonts-loaded {
    font-family: var(--font-primary);
}

/* Loading states */
.font-loading * {
    font-family: var(--font-fallback) !important;
}

.fonts-timeout * {
    font-family: var(--font-fallback) !important;
}

/* Optimize for better perceived performance */
.fonts-loaded {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}