/*
 * cont-nuevo.css — Mejoras del formulario de contacto
 * Ubicación: public_html/assets/css/cont-nuevo.css
 * Se carga DESPUÉS de cont.css
 */

:root {
    --cnv-blue:        #185FA5;
    --cnv-blue-light:  #E6F1FB;
    --cnv-blue-mid:    #378ADD;
    --cnv-green:       #1D9E75;
    --cnv-gray-50:     #F8F8F6;
    --cnv-gray-200:    #D3D1C7;
    --cnv-gray-400:    #888780;
    --cnv-gray-700:    #444441;
    --cnv-gray-900:    #1C1C1A;
    --cnv-radius-sm:   8px;
    --cnv-radius-pill: 100px;
}

/* ══════════════════════════════════════════════════════════
   CORRECCIÓN COLUMNA DERECHA
   cont.css pone .contact-image { position:relative; min-height:420px }
   y la img { position:absolute; height:100% }
   Eso hace que la imagen ocupe todo y las tarjetas desaparezcan.
   Lo reemplazamos completamente.
   ══════════════════════════════════════════════════════════ */

.contact-form-container {
    align-items: stretch !important;
}

.contact-image {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: auto !important;
    min-height: unset !important;
    position: static !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.contact-image img {
    position: static !important;
    width: 100% !important;
    height: 800px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    display: block !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    transition: transform .4s !important;
}
.contact-image:hover img { transform: scale(1.02) !important; }

.cnv-info-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    flex: 1 !important;
}

.cnv-info-item {
    background: #ffffff !important;
    border: 1px solid var(--cnv-gray-200) !important;
    border-radius: 9px !important;
    padding: 11px 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}

.cnv-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--cnv-green) !important;
    flex-shrink: 0 !important;
}

.cnv-info-item p {
    font-size: 11px !important;
    color: var(--cnv-gray-400) !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
}

.cnv-info-item span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--cnv-gray-900) !important;
    display: block !important;
    line-height: 1.3 !important;
}

/* ══════════════════════════════════════════════════════════
   CHIPS
   ══════════════════════════════════════════════════════════ */
.cnv-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-bottom: 16px !important;
}

.cnv-chip {
    padding: 7px 15px !important;
    border-radius: var(--cnv-radius-pill) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    border: 1px solid var(--cnv-gray-200) !important;
    background: #ffffff !important;
    color: var(--cnv-gray-700) !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    line-height: 1 !important;
    display: inline-block !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    transform: none !important;
    text-decoration: none !important;
}
.cnv-chip:hover {
    border-color: var(--cnv-blue-mid) !important;
    color: var(--cnv-blue) !important;
    background: #ffffff !important;
    transform: none !important;
}
.cnv-chip.active {
    background: var(--cnv-blue-light) !important;
    border-color: var(--cnv-blue-mid) !important;
    color: var(--cnv-blue) !important;
    font-weight: 500 !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════
   CAMPOS — anula margin-bottom que agrega cont.css
   ══════════════════════════════════════════════════════════ */
.cnv-card input[type="text"],
.cnv-card input[type="email"],
.cnv-card input[type="tel"],
.cnv-card select,
.cnv-card textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--cnv-gray-900) !important;
    background: var(--cnv-gray-50) !important;
    border: 1px solid var(--cnv-gray-200) !important;
    border-radius: var(--cnv-radius-sm) !important;
    outline: none !important;
    font-family: inherit !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.cnv-card input:focus,
.cnv-card select:focus,
.cnv-card textarea:focus {
    border-color: var(--cnv-blue-mid) !important;
    box-shadow: 0 0 0 3px rgba(55,138,221,0.12) !important;
    background: #fff !important;
}
.cnv-card select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23888780' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-color: var(--cnv-gray-50) !important;
    padding-right: 36px !important;
    cursor: pointer !important;
}
.cnv-card textarea {
    resize: none !important;
    height: 90px !important;
    line-height: 1.6 !important;
    min-height: unset !important;
}

.cnv-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.cnv-field { margin-bottom: 14px !important; }

.cnv-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--cnv-gray-400) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 7px !important;
}

/* ══════════════════════════════════════════════════════════
   UPLOAD
   ══════════════════════════════════════════════════════════ */
.cnv-upload {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1.5px dashed var(--cnv-gray-200) !important;
    border-radius: var(--cnv-radius-sm) !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    background: var(--cnv-gray-50) !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
    transition: all 0.15s !important;
}
.cnv-upload:hover {
    border-color: var(--cnv-blue-mid) !important;
    background: var(--cnv-blue-light) !important;
}
.cnv-upload-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid var(--cnv-gray-200) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.cnv-upload-text p  { font-size: 13px !important; color: var(--cnv-gray-700) !important; margin: 0 0 2px 0 !important; }
.cnv-upload-text span { font-size: 11px !important; color: var(--cnv-gray-400) !important; }

/* ══════════════════════════════════════════════════════════
   BOTÓN SUBMIT — anula el pill/inline-flex de cont.css
   ══════════════════════════════════════════════════════════ */
.cnv-btn-submit {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: var(--cnv-radius-sm) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    background: var(--cnv-blue) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: block !important;
    text-align: center !important;
    transition: background 0.15s, transform 0.1s !important;
    gap: 0 !important;
    letter-spacing: 0.01em !important;
}
.cnv-btn-submit:hover  { background: #0C447C !important; transform: translateY(-1px) !important; }
.cnv-btn-submit:active { transform: scale(0.99) !important; }

.cnv-note {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    color: var(--cnv-gray-400) !important;
    margin-top: 10px !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .contact-image img  { height: 220px !important; }
    .cnv-info-cards     { display: none !important; }
    .cnv-grid-2         { grid-template-columns: 1fr !important; }
}