/*------- ESTILOS PARA EL BUSCADOR -------*/

.buscadorModal{
    width:100%;height:auto;z-index:1000;
    transition:all ease .5s;
    position:absolute;top:0;
    position:fixed;display:none;
    background-color:rgba(54, 54, 54, 0.335);
}

.overlayCloseBuscador{
	margin-top:1px;background-color: rgba(0,0,0,.6);width:100%;height:85vh;overflow-x: auto;
}

.abrirBuscador{
    animation-name: slideSearch; animation-duration:0.25s;display:flex;margin-top:0px;
}

@keyframes slideSearch{
	from{
		margin-top:-200px;opacity:0;
	}
	to{
		margin-top:0px;opacity:1;
	}
}


.containerBuscador{
    width:100%;
    background-color:var(--white);
    height:auto;max-height:210px;/*margin:auto;*/
}
.iconCloseBuscador{
    width:50px;height:50px;
    /*
    margin-top:-150px;margin-bottom:50px;
    */
    border-radius:50%;position:relative;
    display:flex;justify-content:center;background-color:var(--white);
    align-items:center;margin-left:94%;
    color:var(--white);transition:all ease .2s;cursor:pointer;

    /*borrar luego si es necesario*/
}
.iconCloseBuscador:hover{
    transform:rotate(360deg);
}
.iconCloseBuscador::after,.iconCloseBuscador::before{
    content:'';
    position:absolute;
    height:2px;width:50%;
    background-color:var(--black);
}
.iconCloseBuscador::after{transform:rotate(45deg);transition:all ease .3s;}
.iconCloseBuscador::before{transform:rotate(-45deg);transition:all ease .3s;}

.iconCloseBuscador:hover.iconCloseBuscador::after{transform:rotate(-45deg);}
.iconCloseBuscador:hover.iconCloseBuscador::before{transform:rotate(45deg);}

.containerBuscador form{
    margin:auto;max-width:1200px;width:90%;
    background-color:var(--white);
}

.containerBuscador form p{
    color:var(--white);
    font-size:20px;margin-bottom:5px;
}
.containerBuscador .FlexBuscadorModal{
    display:flex;margin-top:20px;margin-bottom:40px;
    justify-content: center;
    background-color: var(--white);
    height:auto;
}
.containerBuscador .FlexBuscadorModal input{
    padding:15px;outline:none;border:none;
	color:var(--black);
    width:100%;max-width:1100px;font-size:18px;
    border-bottom:2px solid  var(--silverDark);
	transition:all ease .3s;
}


.clearValInput{
    width:55px;cursor:pointer;border-bottom:2px solid var(--silverDark);
	display:flex;background-color:transparent;
	justify-content:center;align-items:center;
}

.clearValInput .icon{
font-size:15px;opacity:0;transition:all ease .3s;
}




.containerBuscador .FlexBuscadorModal button{
    padding:5px;outline:none;border:none;cursor:pointer;
    width:60px;color:var(--black);transition:all ease .3s;
	background-color:transparent;border-bottom:2px solid var(--silverDark);
	transition:all ease .3s;
}

.containerBuscador .FlexBuscadorModal input::placeholder{font-size:14px;color:var(--silver);}
.containerBuscador .FlexBuscadorModal button:hover{
    position:relative;color:var(--principal);
}



.containerBuscador .FlexBuscadorModal:hover button{
	border-bottom:2px solid  var(--silverDark);
}

.containerBuscador .FlexBuscadorModal button i{font-size:20px;}

.containerBuscador .FlexBuscadorModal:hover input{
	border-bottom:2px solid  var(--silverDark);
}

.containerBuscador .FlexBuscadorModal:hover .clearValInput{
	border-bottom:2px solid  var(--silverDark);
}

.containerBuscador .FlexBuscadorModal:hover .clearValInput .icon{
	opacity:1;
}


.ocultResponss{font-size:14px;font-weight:700;}

.flexResultadosBusqueda{
    background-color:var(--white);
}



/* ESTILOS RESULTADOS DE LA BUSQUEDA */

.containerResults{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    background-color:rgb(231, 231, 231);
    height:70vh;
    gap:20px;
    overflow-y: scroll;
}

.btn-downloadFile{
	padding: 12px 35px;
    font-size: 18px;
    font-weight:700;
	background-color: var(--principal);
    color: var(--black);
    border-radius:10px;
}

.resultFila{
    width:100%;
    max-width:1200px;
    height:200px;
    display:flex;
    justify-content:center;
    gap:40px;
    align-items:center;
    flex-wrap:wrap;
    padding:10px;
	margin-bottom: 20px;
    
}
.resultFila .controlImg{
    width:240px;
    height:220px;
    object-fit:cover;
    overflow:hidden;
    transition:all ease .3s;
}
.resultFila .controlImg img{
    width:100%;
    height:100%;
    transition:all ease .3s;
}

.resultFila:hover img{
    transform:scale(1.03);
}
.infoResultService{
    width:70%;
    height:auto;
}
.infoResultService .titleResultServ{
    font-size:40px;
    width:100%;
    margin-bottom:30px;
}
.totalResults{
    width:100%;text-align:center;
    font-size:20px;padding:10px;
    padding-left:55px;
}



@media(max-width:1000px){
    .resultFila .controlImg{width:150px;height:120px;}
    .infoResultService .titleResultServ{font-size:25px;}
    .infoResultService{width:50%;}
}

@media(max-width:400px){
    .resultFila .controlImg{width:110px;height:80px;}
    .infoResultService .titleResultServ{font-size:20px;}
    .infoResultService{width:50%;}
    .resultFila{gap:20px;}
    .btn-downloadFile{padding: 15px 20px !important;
        font-size:14px !important;}
}



      
@media(max-width:1000px){
    .flexResultadosBusqueda .infoResultadoBusqueda{width:500px;}
}
@media(max-width:700px){
    .iconCloseBuscador{margin-left:90%;}
}

@media(max-width:400px){
    .iconCloseBuscador{margin-left:85%;}
    .overlayCloseBuscador{height: 70vh;margin-top: -10px;}
    .containerBuscador{max-height:180px;}
}