@font-face {
    font-family: 'Unispace';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Unispace-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Teen';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Teen-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Teen';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Teen-Bold.woff2') format('woff2');
    font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vibrocentric';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Vibrocentric-Bold.woff2') format('woff2');
    font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vibrocentric';
    src: url('https://cdn.ohqcc.com/CDN/fonts/Vibrocentric-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal; font-display: swap;
}

:root {
    /* Tipografía */
    --f-vibro: 'Vibrocentric', sans-serif;
    --f-teen: 'Teen', sans-serif;
    --f-uni: 'Unispace', monospace;
    
    /* Tamaños Base Escritorio (Escala Modular) */
    --text-h1: 3rem;
    --text-h2: 2rem;
    --text-h3: 1.5rem;
    --text-h4: 1.25rem;
    --text-body: 1rem;
    --text-btn: 0.875rem;

    /* Paleta de Colores Extraída del Banner (SSOT) */
    --c-bg: #FDFBF7; /* Crema suave fondo */
    --c-wood-dark: #5C3A21; /* Madera oscura textos */
    --c-wood-light: #C08A53; /* Madera clara bordes */
    --c-accent-red: #D25E55; /* Corazón e hilos */
    --c-accent-green: #7D9C45; /* Hojas */
    --c-white: #FFFFFF;
}

/* Responsive Font Scaling */
@media (max-width: 1023px) {
    :root { --text-h1: 2.5rem; --text-h2: 1.75rem; --text-h3: 1.375rem; --text-h4: 1.125rem; --text-body: 0.9375rem; --text-btn: 0.875rem; }
}
@media (max-width: 767px) {
    :root { --text-h1: 2.25rem; --text-h2: 1.5rem; --text-h3: 1.25rem; --text-h4: 1rem; --text-body: 0.9375rem; --text-btn: 0.8125rem; }
}

body {
    background-color: var(--c-bg);
    color: var(--c-wood-dark);
    font-family: var(--f-teen);
    font-weight: normal;
    line-height: 1.6;
}

h1, h2 { font-family: var(--f-vibro); font-weight: bold; }
h3 { font-family: var(--f-vibro); font-weight: normal; line-height: 1.3; }
h4 { font-family: var(--f-teen); font-weight: bold; line-height: 1.4; }
h1 { font-size: var(--text-h1); line-height: 1.1; }
h2 { font-size: var(--text-h2); line-height: 1.2; }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }