/* =========================================
   CONTACT VIEW (LANDING FORM)
   ========================================= */
.contact-view {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;

    & .contact-card {
        background-color: var(--bg-white, #ffffff);
        border: 1px solid var(--border-light);
        border-radius: 12px;
        box-shadow: var(--shadow-md);
        width: 100%;
        max-width: 760px;
        padding: 2.5rem;

        /* --- NUEVO BLOQUE: TEXTO INDICATIVO --- */
        & .card-header {
            margin-bottom: 2rem;
            
            & h2 {
                color: var(--primary); /* Hereda el color principal de la logia */
                font-size: 1.75rem;
                font-weight: 700;
                margin-bottom: 0.5rem;
                letter-spacing: -0.02em;
            }

            & p {
                color: var(--text-muted);
                font-size: 0.95rem;
                line-height: 1.5;
            }
        }
        /* -------------------------------------- */
        
        & .contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;

            & .form-row {
                display: grid;
                grid-template-columns: 1fr;
                gap: 1.5rem;

                @media (min-width: 600px) {
                    grid-template-columns: 1fr 1fr;
                }
            }

            & .form-group {
                display: flex;
                flex-direction: column;
                gap: 0.6rem;

                & label {
                    font-size: 0.85rem;
                    font-weight: 600;
                    color: var(--text-main);
                    
                    & .required {
                        color: var(--text-main);
                    }
                }

                & input, 
                & textarea {
                    width: 100%;
                    padding: 0.85rem 1.2rem;
                    border: 1px solid var(--border-light);
                    border-radius: 12px;
                    background-color: #f8fafc;
                    color: var(--text-main);
                    font-family: inherit;
                    font-size: 0.95rem;
                    transition: border-color var(--trans, 0.2s), box-shadow var(--trans, 0.2s), background-color var(--trans, 0.2s);

                    &:focus {
                        outline: none;
                        background-color: var(--bg-white);
                        border-color: var(--primary);
                        box-shadow: 0 0 0 3px rgba(62, 57, 186, 0.1);
                    }

                    &::placeholder {
                        color: #94a3b8;
                    }
                }

                & textarea {
                    resize: vertical;
                    min-height: 140px;
                }
            }

            & .form-actions {
                margin-top: 1rem;
                display: flex;
                justify-content: flex-start;

                & .btn-primary {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    background-color: var(--primary);
                    color: #ffffff;
                    border: none;
                    padding: 0.85rem 1.8rem;
                    border-radius: 50px;
                    font-weight: 600;
                    font-size: 0.95rem;
                    cursor: pointer;
                    transition: filter 0.2s ease, transform 0.1s ease;

                    &:hover {
                        filter: brightness(1.1);
                    }

                    &:active {
                        transform: scale(0.98);
                    }
                }
            }
        }
    }
}