
.flexDosInput{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.contedorFile{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contedorFile input{
    font-size: 18px;
}

.contedorFile input[type="file"] {
    cursor: pointer;
}

.FLexContenedorContrato{
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding-top: 30px;
}
.flexDosInputContrato{
    display: flex;
    gap: 10px;

}
.contrato{
    width: 49%;
}
.contacto .flexDosInput{
    width: 100%;
}
.InfoOpcion{
    color: var(--ColorBtn);
    font-family: Roboto;
    padding: 15px 0px;
}


    .ContenedorImgReclamos{
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 50px 0px;
    }

.ContainerTextForm{
        text-align: center;
        font-family: Roboto;
        padding: 30px 0px;
        line-height: 2;
    }
    .ContainerTextForm h1{
        font-family: Original Surfer;
        color: var(--ColorBtn);
    }
.ContenedorFlexFormulario{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    font-family: Roboto;
}

.flexCheckbox{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10PX;
}
.contedorInput{
    width: 100%;
    padding: 15px 0px;

}
.contedorInput label{
    color: #544E4C;
    font-size: 18px;
}

.contedorInput span{
    color: red;
}
.contedorInput select{
      width: 100%;
    padding: 15px 0px;
    margin-top: 10px;
    padding: 10px;
    border:  1px solid var( --BordeInput);
    outline: none;
}
.contedorInput input{
    width: 100%;
    padding: 13px;
    margin-top: 10px;
    margin-top: 10px;
    padding: 10px;
    border:  1px solid var( --BordeInput);
    outline: none;
}

.contedorInput textarea{
    width: 100%;
    margin-top: 10px;
    border:  1px solid var( --BordeInput);


  min-height: 100px;      /* Altura inicial */
  max-height: 200px;     /* Altura máxima permitida */
  padding: 10px;
  font-family: Roboto, sans-serif;
  font-size: 15px;

  border: 1px solid #ccc;


  overflow-y: auto;      /* Scroll aparece solo cuando es necesario */
  resize: none;
  outline: none;
}

.wasap{
    width: 48%;
}

.btnForm{
    padding-top: 30px;
}

.btnForm input{
    padding: 14px 60px;
    border: none;
    background-color: var(--ColorBtn);
    border: none;
    color: var(--ColorWhite);
    font-size: 16px;
    cursor: pointer;
    transition: all ease .3s;
}

.btnForm input:hover{
    background-color: var(--AzulFuerte);
}

.flexCheckbox p{
    color: #8B8484;
    text-decoration: underline;
    font-family: Roboto;
    font-size: 18px;
}


.adjun{
       color: #544E4C;
    font-size: 18px;
    font-family: Roboto;
}

.smals{
    color: #544E4C;
    font-size: 14px;
    font-family: Roboto;}


/*Ubicacion*/
.flexContenedorUbicacion{
    display: flex;
    justify-content: space-between;

    gap: 20px;
}

.ContenedorContacto{
    width: 48%;
}

.ContenedorContacto h2{
    padding: 14px 0px;
    color: var(--ColorBtn);
    font-size: 30px;
    border-bottom: 2px solid var(--ColorBtn);

}
.DireccionIcono{
    display: flex;
    align-items: center;

}
.ContenedorContacto p{
    padding: 24px 0px;
    color: #3A3A3A;
    font-family: Roboto;
    font-size: 20px;


}
.DireccionIcono  p i{
    color: #FF4A18;

}

.maps{
    width: 100%;
    height: auto;
     border: 2px solid #858383;

     padding: 5px;
}
.maps iframe{
    width: 100%;
    height: 100%;
    object-fit: contain;

}

.flexContacto{
    padding: 30px 0px;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.flexIconContacto{
    display: flex;
    align-items: center;
    gap: 10px;
}
.flexContacto i{
    color: var(--ColorBtn);
}

.flexContacto a{
    color: #403F3F;
    font-family: Roboto;
}

.contacto{
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: Roboto;
}

.contacto h3{
    color: var(--ColorBtn);
    font-size: 20px;
}


/*EMPEZAMOS EL OTRO FORMULARIO*/
.nombre{
    width: 50%;
}
.flexDosInputs{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 50%;

}
.flexDosInputs .contedorInput{
    width: 50%;
}

 .detalle{
    width: 100%;
    padding: 15px 0px;
}

@media (max-width: 900px) {
 .ContenedorFlexFormulario, .FLexContenedorContrato{
    flex-direction: column;
    gap: 20px;
 }
 .nombre{
    width: 100%;
 }
 .flexDosInputs{
    width: 100%;
 }
 .contrato{
    width: 100%;
 }
}
@media (max-width:800px ) {
 .flexContenedorUbicacion{
    flex-direction: column;
    gap: 30px;
 }
 .ContenedorContacto{
    width: 100%;
 }
}
@media (max-width:700px ) {
 .ContenedorFlexFormulario{
    flex-direction: column;
    gap: 10px;
 }
 .wasap{
    width: 100%;
}
.contedorInput{
    padding: 5px 0px;
}
}
@media (max-width: 600px) {
 .flexDosInputs{
    flex-direction: column;
    gap: 20px;
 }
 .flexDosInputs .contedorInput{
    width: 100%;
 }

 .flexDosInputContrato{
    flex-direction: column;
    gap: 20px;
 }
}
