/*
==================================================
|   Estilos para la página: Contacto              |
==================================================
*/

.contact-section { 
    padding: 4rem 0; 
}

.contact-form-wrapper h2, .office-info h2 { 
    text-align: left; 
    font-size: 2.2rem; 
}

.contact-form { 
    margin-top: 2rem; 
}

.contact-form .form-group { 
    margin-bottom: 1.5rem; 
}

.contact-form .form-group-inline { 
    display: flex; 
    gap: 1.5rem; 
    margin-bottom: 1.5rem; 
}

.contact-form .form-group-inline input { 
    flex: 1; 
}

.contact-form input, .contact-form textarea { 
    width: 100%; 
    padding: 12px 18px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius); 
    font-size: 1rem; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}

.contact-form input:focus, .contact-form textarea:focus { 
    outline: none; 
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 0.2rem rgba(46, 107, 59, 0.25); 
}

.office-info { 
    padding-left: 2rem; 
}

.contact-list { 
    list-style: none; 
    padding: 0; 
    margin-top: 1.5rem; 
}

.contact-list li { 
    display: flex; 
    align-items: flex-start; 
    font-size: 1.05rem; 
    margin-bottom: 1.2rem; 
}

.contact-list li i { 
    font-size: 1.4rem; 
    color: var(--primary-color); 
    margin-right: 1.2rem; 
    width: 25px; 
    text-align: center; 
    line-height: 1.4; 
}

.map-container { 
    width: 100%; 
    height: 450px; 
    border-radius: var(--border-radius); 
    overflow: hidden; 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-light); 
}

.map-container iframe { 
    width: 100%; 
    height: 100%; 
    border: 0; 
}

.office-info .business-hours-title { 
    margin-top: 3rem; 
}

/* --- Responsive para "Contacto" --- */
@media (max-width: 768px) {
    .office-info { 
        padding-left: 0; 
        margin-top: 3rem; 
        text-align: center; 
    }
    .contact-list, .business-hours { 
        max-width: 350px; 
        margin: 0 auto; 
        text-align: left; 
    }
    .contact-form .form-group-inline { 
        flex-direction: column; 
        gap: 0; 
    }
    .contact-form .form-group-inline input { 
        margin-bottom: 1.5rem; 
    }
    .contact-form-wrapper h2, .office-info h2, .contact-form-wrapper p {
        text-align: center;
    }
}

.cta-contacto {
  margin-top: 2rem; /* separación extra */
  font-size: 1.6rem; /* más grande que el h3 normal */
  font-weight: 700;
  text-align: left; /* puedes usar center si prefieres */
}

.cta-contacto a {
  color: #1c6b48; /* verde del logo */
  text-decoration: none;
  transition: color 0.3s ease;
}

.cta-contacto a:hover {
  color: #145a37; /* verde más oscuro al pasar el mouse */
}