/* =========================================
   CONTACTO.CSS — Estilos exclusivos de Contacto
   ========================================= */

body {
    background: linear-gradient(135deg, var(--azul-principal) 0%, var(--acento-turquesa) 100%);
}

/* Transición entre pasos del formulario */
.paso-formulario {
    animation: entradaPaso 0.35s ease-out;
}

@keyframes entradaPaso {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Tarjetas de opción tipo radio mejoradas */
.paso-formulario label.border {
    transition: all var(--trans-rapida);
    border-radius: 12px !important;
    border-color: rgba(30, 41, 59, .1) !important;
}

.paso-formulario label.border:hover {
    border-color: var(--acento-turquesa) !important;
    background: var(--turquesa-suave);
}

.paso-formulario label.border:has(input:checked) {
    border-color: var(--acento-turquesa) !important;
    background: var(--turquesa-suave);
    box-shadow: 0 0 0 3px var(--turquesa-suave);
}