:root {
    --blue-dark: #0b1f3a;
    --blue-main: #0e3c68;
    --blue-light: #1e6fa3;
    --gray-text: #4a4a4a;
    --gray-light: #f5f7fa;
    --white: #ffffff;
}

/* ---------- Base Layout ---------- */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    background: linear-gradient( 135deg, var(--blue-dark) 0%, var(--blue-main) 55%, var(--blue-light) 100% );
    color: var(--white);
    font-size: 3rem;
}


main {
    flex: 1;
}

/* ---------- Header ---------- */
.main-header {
    background: linear-gradient( 135deg, var(--blue-dark) 0%, var(--blue-main) 55%, var(--blue-light) 100% );
    color: var(--white);
    font-size: 1.5rem;
}

.logo {
    height: 80px;
}

/* ---------- Body Main ---------- */
.main-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 10px 30px rgba(11, 31, 51, 0.15);
}


/* Logo Central */
.main-logo {
    max-width: 600px;
    width: 100%;
}

/* ---------- Botones ---------- */
.btn-primary-custom {
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
    color: var(--white);
}

    .btn-primary-custom:hover {
        background-color: var(--blue-light);
        border-color: var(--blue-light);
        color: var(--white);
    }

/* ---------- Footer ---------- */
.footer {
    background: linear-gradient( 135deg, var(--blue-dark) 0%, var(--blue-main) 55%, var(--blue-light) 100% );
    color: var(--white);
    font-size: 1.5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .main-logo {
        max-width: 200px;
    }
}