/* ── Modal Overlay ── */
#modalAsesor {
    position:   fixed;
    inset:      0;
    z-index:    9999;
    background: rgba(0, 0, 0, 0.8);
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    16px;
}

/* ── Caja del modal ── */
.modal-contacto-box {
    background:    #fff;
    border-radius: 16px;
    width:         100%;
    max-width:     440px;
    padding:       28px 24px 24px;
    position:      relative;
    max-height:    90vh;
    overflow-y:    auto;
}

/* ── Botón cerrar ── */
.modal-contacto-close {
    position:      absolute;
    top:           14px;
    right:         14px;
    width:         32px;
    height:        32px;
    border-radius: 50%;
    border:        1.5px solid #5c6368;
    background:    #5c6368;
    cursor:        pointer;
    font-size:     15px;
    color:         white;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.modal-contacto-close:hover {
    background: #5c6368;
}

/* ── Título ── */
.modal-contacto-titulo {
    font-size:     16px;
    font-weight:   600;
    color:         #222;
    margin-bottom: 20px;
    padding-right: 36px;
    line-height:   1.4;
}

.modal-contacto-titulo span {
    color: #636363;
}

/* ── Grupos de campos ── */
.form-group-modal {
    margin-bottom: 12px;
}

.form-group-modal input,
.form-group-modal textarea,
.form-group-modal select {
    width:         100%;
    padding:       12px 14px;
    border:        1px solid #ddd;
    border-radius: 8px;
    font-size:     14px;
    color:         #333;
    outline:       none;
    font-family:   inherit;
    background:    #fff;
    transition:    border-color 0.2s;
}

.form-group-modal input:focus,
.form-group-modal textarea:focus,
.form-group-modal select:focus {
    border-color: #1e662e;
}

.form-group-modal input::placeholder,
.form-group-modal textarea::placeholder {
    color: #aaa;
}

.form-group-modal textarea {
    resize:      none;
    height:      90px;
    line-height: 1.5;
}

/* ── Fila tipo documento ── */
.modal-doc-row {
    display: flex;
    gap:     8px;
}

.modal-doc-row select {
    width:      90px !important;
    flex-shrink: 0;
    padding:    12px 8px !important;
    cursor:     pointer;
}

.modal-doc-row input {
    flex: 1;
}

/* ── Errores ── */
.field-error {
    font-size:  12px;
    color:      #e53e3e;
    margin-top: 4px;
    display:    none;
}

.field-error.show {
    display: block;
}

/* ── Footer texto ── */
.modal-contacto-footer {
    font-size:  11px;
    color:      #888;
    text-align: center;
    margin-top: 12px;
    line-height: 1.5;
}

.modal-contacto-footer a {
    color:           #1e662e;
    text-decoration: none;
}

/* ---- BTN ACCESOS WHT + MAIL ---*/
.btn-wsp-modal,
.btn-mail-modal {
    width:           100%;
    padding:         14px;
    border:          none;
    border-radius:   50px;
    font-size:       15px;
    font-weight:     700;
    cursor:          pointer;
    display:         flex;
    align-items:     center;      /* ← centra verticalmente */
    justify-content: center;      /* ← centra horizontalmente */
    gap:             6px;         /* ← espacio entre icono y texto */
    line-height:     1;           /* ← evita que el line-height desplace el texto */
    transition:      background 0.2s;
}

.btn-wsp-modal  { 
    background: #a58a56; 
    color: #fff; 
}
.btn-mail-modal { 
    background: #636363; 
    color: #fff; 
}

.btn-wsp-modal:hover  { 
    background: #a58a56; 
    color: white;
}
.btn-wsp-modal:active{
    background: #a58a56;
}
.btn-mail-modal:hover { 
    background: #636363;
    color: white; 
}
.btn-mail-modal:active{
    background: #636363;
}


/* ── Responsive ── */
@media (max-width: 600px) {
    .modal-contacto-box {
        padding: 20px 16px;
    }
}