/* Definición de Fuentes Tipográficas */

/* Libre Baskerville */
@font-face {
    font-family: 'Libre Baskerville';
    src: url('/fonts/LibreBaskerville-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('/fonts/LibreBaskerville-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('/fonts/LibreBaskerville-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Raleway */
@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900; /* Rango de pesos para la fuente variable */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900; /* Rango de pesos para la fuente variable */
    font-style: italic;
    font-display: swap;
}

/* Definición de Variables Globales de Estilo */
:root {
    /* Paleta de Colores */
    --color-primario: rgb(28, 34, 58);
    --color-secundario: rgb(210, 197, 179);
    --color-acento1: rgb(70, 72, 85);
    --color-acento2: rgb(101, 127, 200);
    --color-fondo-claro: #f8f8f8;

    /* Fuentes Tipográficas */
    --font-primaria: 'Libre Baskerville', serif;
    --font-secundaria: 'Raleway', sans-serif;

    /* Estilos base */
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* Estilos Globales */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secundaria);
    background-color: white;
    color: var(--color-primario);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primaria);
    margin-top: 0;
    line-height: 1.2;
}

a {
    color: var(--color-acento2);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primario);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section {
    padding: 4rem 0;
}

/* Utilidades */
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-primario);
}

.text-secondary {
    color: var(--color-secundario);
}

.bg-primary {
    background-color: var(--color-primario);
    color: white;
}

.bg-secondary {
    background-color: var(--color-secundario);
    color: var(--color-primario);
}

/* Media Queries para Responsive Design */
@media (max-width: 768px) {
    .section {
        padding: 2rem 0;
    }
}