/* Importar fuentes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

/* Variables CSS personalizadas para Bootstrap 4.3.1 */
:root {
    --banco-azul: #003366;
    --banco-amarillo: #F3D600;
    --banco-celeste: #7BB5E3;
    --primary: #003366;
    --secondary: #F3D600;
    --info: #7BB5E3;
    --font-montserrat: 'Montserrat', sans-serif;
    --font-rotis: 'Rotis Sans Serif', Arial, sans-serif;
    --body-font-family: 'Rotis Sans Serif', Arial, sans-serif;
}

/* Sobrescribir colores de Bootstrap 4 */
.bg-primary {
    background-color: var(--banco-azul) !important;
}

.bg-secondary {
    background-color: var(--banco-amarillo) !important;
}

.bg-info {
    background-color: var(--banco-celeste) !important;
}

.text-primary {
    color: var(--banco-azul) !important;
}

.text-secondary {
    color: var(--banco-amarillo) !important;
}

.text-info {
    color: var(--banco-celeste) !important;
}

.btn-primary {
    background-color: var(--banco-azul);
    border-color: var(--banco-azul);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--banco-celeste);
    border-color: var(--banco-celeste);
}

.btn-secondary {
    background-color: var(--banco-amarillo);
    border-color: var(--banco-amarillo);
    color: var(--banco-azul);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #d9c200;
    border-color: #d9c200;
    color: var(--banco-azul);
}

/* Jerarquía tipográfica */
body {
    font-family: var(--font-rotis);
    font-weight: 400;
}

h1, h2, h3,
.h1, .h2, .h3 {
    font-family: var(--font-montserrat);
    font-weight: 700;
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--font-montserrat);
    font-weight: 500;
}

/* Clases de utilidad para fuentes */
.font-montserrat-bold {
    font-family: var(--font-montserrat);
    font-weight: 700;
}

.font-montserrat-medium {
    font-family: var(--font-montserrat);
    font-weight: 500;
}

.font-rotis {
    font-family: var(--font-rotis);
    font-weight: 400;
}

/* Header con gradiente */
.gradient-header {
    background: linear-gradient(135deg, #003366 0%, #004080 50%, #7BB5E3 100%);
    padding: 4rem 0;
}

/* Ajustes para Bootstrap 4 - Tamaños de texto y líneas */
.fs-6 {
    font-size: 1rem;
}

.lh-base {
    line-height: 1.5;
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

.delay-1 { animation-delay: 0.2s; opacity: 0; }
.delay-2 { animation-delay: 0.4s; opacity: 0; }
.delay-3 { animation-delay: 0.6s; opacity: 0; }

/* Efectos hover en tarjetas */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 51, 102, 0.15) !important;
}

/* Efectos en valores */
.value-card {
    transition: all 0.3s ease;
    border-left: 4px solid var(--banco-azul);
}

.value-card:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transform: scale(1.02);
    border-left-color: var(--banco-amarillo);
}

/* Iconos circulares */
.icon-circle {
    width: 48px;
    height: 48px;
    background-color: var(--banco-azul);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle-celeste {
    width: 40px;
    height: 40px;
    background-color: rgba(123, 181, 227, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Línea decorativa */
.decorator-line {
    width: 6rem;
    height: 4px;
    background-color: var(--banco-amarillo);
    margin: 0 auto 3rem;
    border-radius: 2px;
}