/* ============================
   Paleta de Colores Oficial
============================ */
:root {
    --azul-marino: #2C3E50;
    --dorado-suave: #D4AF37;
    --dorado-hover: #C0A235;
    --blanco-puro: #FFFFFF;
    --gris-claro: #ECF0F1;
    --negro-profundo: #000000;
}

body {
    background-color: var(--gris-claro);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--azul-marino);
}

.container .bg-white {
    background-color: var(--blanco-puro) !important;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


h1 {
    color: var(--azul-marino);
}

.custom-focus:focus {
    border-color: var(--dorado-suave);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
    outline: none;
}

.btn-custom {
    background-color: var(--dorado-suave);
    color: var(--blanco-puro);
    border: none;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: var(--dorado-hover);
    color: var(--blanco-puro);
}

a.text-dark {
    color: var(--negro-profundo) !important;
}

a.text-dark:hover {
    text-decoration: underline;
}


.img-fluid {
    border-radius: 0.75rem;
    max-height: 400px;
    object-fit: cover;
}