/* Contenedor del mapa */
.map-container {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
    margin-top:30px;
}

/* Iframe del mapa */
.map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


@media (min-width: 1200px) {
    .map-container {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .map-container {
        height: 250px;
    }
}



.flex-container-contacto{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top:30px;
  }

  .container-img-contacto{
    width: 35%;
    overflow: hidden;

  }

  .container-img-contacto img{
    width: 100%;
    height: auto;
    overflow: hidden;
    object-fit: cover;
  }

  .container-formulario{
    width: 45%;
  }

  .flex-input{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0px;


  }
  .input{
    width: 50%;
  }


  .input input, textarea{
    width: 100%;
    border-radius: 5px;
    outline: none;
    border: none;
    border: 1px solid #DFDDDD;
    padding: 10px 12px ;
     margin-top: 5px;
  }
  .input-textarea textarea{
     width: 100%;         /* o la medida que quieras */
  height: 100px;       /* tamaño fijo vertical */
  resize: none;        /* evita que el usuario deforme el tamaño */
  overflow-y: auto;    /* aparece scroll cuando se llena */
  padding: 10px;


  }
  textarea{
    width: 100%;
  }

  .enviar-form button{
    width: 100%;
    text-transform: capitalize;
    font-size: 16px;
  }

  .container-formulario{
    color: var(--AzulFuerte);

  }

  .container-formulario h2{
    font-size: 30px;
    font-family: var( --font-poppins);
    padding-bottom:0px;
  }
  .parrafo-contacto{
    color: var( --Color-text);
    font-family: var(--font-poppins);
    padding: 20px 0px;
    padding-top:10px;
  }

  label span{
    color: #F0080F;
  }

  .input label, .input-textarea label{
    color: var(--text-form);
    font-family: var(--font-poppins);
    font-weight: 500;
  }

  .text-checkbox{
    color: #8B8484;
  }
  .flex-checkbox{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0px;
  }



  .flex-container-tipo-contacto{
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  .contact{
    width: 30%;
    background-color: var( --bg-white-Suave);
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    flex-direction: column;
    padding: 40px 15px;
    gap: 30px;
    position: relative;

    transition: all ease .3s;
    transition: box-shadow .3s ease, transform .3s ease;
  }

  .contact:hover{
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(-4px);

  }

  .contact::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: var(--AzulClaro);

}

  .contact h3{
    font-size: 18px;
    font-family: var(--font-poppins);
    color: #4C4B4B;
    text-align: center;
    line-height: 1.2;
  }

  .contenedor-icon{
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--AzulClaro);
    font-size: 20px;
  }

  .contenedor-icon i{
    font-size: 30px;
    color: var(--ColorWhite);
  }

  .flex-contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .flex-contact a{
    font-size: 18px;
    color: #4C4B4B;
    font-family: var(--font-poppins);
    line-height: 1;
    text-align: center;
  }
  @media (max-width:1100px ) {
    .container-img-contacto{
    width: 45%;
    overflow: hidden;

  }
  }

  @media (max-width:900px ) {
   .flex-container-contacto{
    flex-direction: column-reverse;
    gap: 40px;
   }

   .container-img-contacto{
    width: 60%;
   }

   .container-formulario{
    width: 100%;
   }
  }
  @media (max-width:700px ) {
   .flex-container-tipo-contacto{
    flex-wrap: wrap;
    justify-content: center;
   }
   .contact{
    width: 80%;
   }
  }

  @media (max-width: 600px) {
   .container-img-contacto{
    width: 100%;
   }
   .flex-input{
    flex-direction: column;
   }
   .input{
    width: 100%;
   }
   .contact{
    width: 100%;
   }
  }