/* ==========================================================================
   Contato v14 — estilos exclusivos da seção #contato
   Escopo: todos os seletores prefixados com #contato para não vazar
   para outras seções nem depender de utilitários Tailwind não compilados.
   Paleta v14 (mesma do rodapé, substitui o roxo antigo #1a093f/bg-dll-blue
   e o coral #ff3a2d): azul-marinho #101827/#131C2E, azul institucional
   #2C3853 para títulos e vinho #7E0101 para acentos, botão e foco.
   ========================================================================== */

#contato {
    --ct14-navy: #101827;
    --ct14-navy-deep: #131C2E;
    --ct14-institutional: #2C3853;
    --ct14-wine: #7E0101;
}

#contato .ct14-panel {
    background-color: var(--ct14-navy);
}

#contato .ct14-badge {
    background-color: rgba(126, 1, 1, 0.28);
    border-color: rgba(126, 1, 1, 0.45);
    color: #fff;
}

#contato .ct14-primary-icon {
    background-color: var(--ct14-wine);
}

#contato .ct14-form-title {
    color: var(--ct14-institutional);
}

#contato .ct14-link-wine {
    color: var(--ct14-wine);
}

#contato .ct14-link-wine:hover {
    color: var(--ct14-navy-deep);
}

#contato .ct14-submit-btn {
    background-color: var(--ct14-wine);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

#contato .ct14-submit-btn:hover {
    background-color: var(--ct14-navy-deep);
    box-shadow: 0 10px 20px rgba(16, 24, 39, 0.25);
}

#contato .ct14-modal-overlay {
    background-color: rgba(16, 24, 39, 0.8);
}

#contato .ct14-modal-title {
    color: var(--ct14-institutional);
}

#contato .ct14-contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    color: inherit;
}

#contato .ct14-contact--primary {
    padding: 0.85rem 1rem;
    margin: -0.85rem -1rem 0.25rem;
    border-radius: 1rem;
    transition: background-color 0.3s ease;
}

#contato .ct14-contact--primary:hover,
#contato .ct14-contact--primary:focus-visible {
    background-color: rgba(255, 255, 255, 0.06);
}

#contato .ct14-contacts-secondary {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-top: 1.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Foco visível sólido, sem glow/shake — acessibilidade em primeiro lugar */
#contato .form-input:focus {
    outline: 2px solid var(--ct14-wine);
    outline-offset: 2px;
    border-color: var(--ct14-wine);
    box-shadow: none;
}

#contato .ct14-field-invalid {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

#contato .ct14-error-text {
    display: block;
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0.4rem;
}

#contato #contactSubmitBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Garante respiro consistente em telas muito estreitas (320px) */
@media (max-width: 380px) {
    #contato .ct14-contact--primary span {
        font-size: 1.05rem;
    }
}

/* Usuários com preferência por menos movimento não perdem nenhum feedback,
   apenas as transições de cor/realce deixam de animar. */
@media (prefers-reduced-motion: reduce) {
    #contato .ct14-contact,
    #contato .ct14-contact--primary,
    #contato .form-input,
    #contato #contactSubmitBtn {
        transition: none !important;
    }
}