/* ============================================================
   custom.css - Estilos personalizados adicionales
   Child Theme Divi 5
   ============================================================ */

/* ----------------------------------------------------------
   Variables CSS globales
   ---------------------------------------------------------- */
:root {
    --color-primario:    #2b3a55;
    --color-secundario:  #e84545;
    --color-acento:      #f5a623;
    --color-texto:       #333333;
    --color-fondo:       #ffffff;
    --fuente-principal:  'Open Sans', sans-serif;
    --fuente-titulos:    'Montserrat', sans-serif;
    --max-width:         1200px;
}

/* ----------------------------------------------------------
   Estilos base globales
   ---------------------------------------------------------- */
body {
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    background-color: var(--color-fondo);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    color: var(--color-primario);
}

a {
    color: var(--color-secundario);
    transition: color 0.3s ease;
}

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

/* ----------------------------------------------------------
   Header personalizado
   ---------------------------------------------------------- */
#main-header {
    background-color: var(--color-fondo);
}

/* ----------------------------------------------------------
   Footer personalizado
   ---------------------------------------------------------- */
#main-footer {
    background-color: var(--color-primario);
    color: #ffffff;
}

/* ----------------------------------------------------------
   Responsive - Mobile First
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}