/* 
 * contact.css
 * Estilos para la sección de contacto
 */

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

 .contact-section {
   padding: 5rem 0;
   background-color: var(--color-background);
   display: flex;
   justify-content: center;
   font-family: 'Montserrat', sans-serif;
 }
 
 .contact-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
   max-width: 1100px;
   width: 100%;
 }
 
 .contact-info {
   padding: 2rem;
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   flex: 1;
 }
 
 .contact-title {
   font-size: 2rem;
   margin-bottom: 1.5rem;
   color: var(--color-primary);
   font-weight: 700;
   text-transform: uppercase;
 }
 
 .contact-address, .contact-hours {
   margin-bottom: 1.5rem;
   line-height: 1.8;
   font-size: 18px;
 }
 
 .contact-button {
   display: inline-block;
   background-color: var(--color-primary);
   color: white;
   padding: 15px 20px;
   border-radius: 5px;
   text-decoration: none;
   font-weight: bold;
   font-size: 18px;
   transition: background-color 0.3s;
   margin-top: 15px;
 }
 
 .contact-button:hover {
   background-color: var(--color-primary-dark);
 }
 
 .contact-map {
   height: 700px;
   border-radius: 10px;
   overflow: hidden;
   flex: 1;
 }
 

/* Estilos responsivos para la sección de contacto */
@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
  
  .contact-map {
    height: 400px;
  }
  
  .contact-title {
    font-size: 1.8rem;
  }
}