body {
    background: #f4f8fb;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.container {
    margin-top: 60px;
}

form {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 32px 28px;
}

h2 {
    color: #0d6efd;
    font-weight: 600;
}

.form-label {
    font-weight: 500;
    color: #333;
}

.form-control:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.15);
}

.btn-primary {
    background: linear-gradient(90deg, #0d6efd 60%, #0a58ca 100%);
    border: none;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: linear-gradient(90deg, #0a58ca 60%, #0d6efd 100%);
}

.customTooltip * {
    color: #000000;
    font-size: 18px;
}

.customTooltip .introjs-tooltip-title {
    color: rgb(120, 120, 120);
}

#nombre, #email, #mensaje {
    transition: border-color 1.2s, box-shadow 1.2s;
}
#nombre.borde-naranja, #email.borde-naranja, #mensaje.borde-naranja {
    border-color: orange !important;
    box-shadow: 0 0 0 10px orange !important;
}
#nombre.borde-verde, #email.borde-verde, #mensaje.borde-verde {
    border-color: green !important;
    box-shadow: 0 0 0 10px green !important;
}