:root {
    --azul: #073b7a;
    --azul-oscuro: #062451;
    --celeste: #0ea5c6;
    --verde: #25D366;
    --verde-oscuro: #128C7E;
    --amarillo: #ffc107;
    --rojo: #ff4d4d;
    --fondo: #f4f7fb;
    --texto: #13213c;
    --muted: #5d6b83;
    --borde: #d8e1ef;
    --blanco: #fff;
    --sombra: 0 12px 34px rgba(7, 36, 81, .14);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: radial-gradient(circle at top left, rgba(14, 165, 198, .14), transparent 34rem),
                linear-gradient(180deg, #fff 0%, var(--fondo) 100%);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.55;
}

main .card {
    border: 1px solid rgba(216, 225, 239, .95);
    border-radius: 24px;
    background: var(--blanco);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.card-body {
    background: linear-gradient(135deg, #fff 0%, #f7fbff 100%);
    color: var(--texto);
}

.card-body h3 {
    color: var(--azul-oscuro);
    font-weight: 800;
}

footer {
    background: linear-gradient(135deg, var(--azul-oscuro), #031327);
    color: #fff;
}