/*definimos areas*/

.main-ficha {
    grid-area: main-ficha;
}

/**/

@supports (display: grid) {

    .grid-container {   	 
         display: grid;

		    /*  Define the size and number of columns in our grid. 
		        The fr unit works similar to flex:
		        fr columns will share the free space in the row in proportion to their value.
		        We will have 2 columns - the first will be 3x the size of the second.  */
		    grid-template-columns: 3fr;

		    /*  Assign the grid areas we did earlier to specific places on the grid. 
		        First row is all header.
		        Second row is shared between main-ficha and sidebar.
		        Last row is all footer.  */
		    grid-template-areas: 
		       
		        "main-ficha main-ficha main-ficha";

		    /*  The gutters between each grid cell will be 60 pixels. */
		    grid-gap: .5rem;
    }

}



@media (max-width: 991px) {
    .grid-container {
    	max-width: none;
        /*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas:             "main-ficha";
 
    }
}

 /**/


 /**/


@supports (display: grid) {

    .main-ficha {

      width: auto;
	  display: grid; 
	    

		
		 grid-template-areas: 
	    	
		    "tit-header tit-header tit-header tit-header sidebar"
		    "entradilla entradilla entradilla media-apoyo sidebar"
		    "descarga-enlaces descarga-enlaces descarga-enlaces descarga-enlaces sidebar"
		    "caracteristicas caracteristicas caracteristicas caracteristicas vacio"
		    "redsocial redsocial redsocial redsocial vacio"
		    "botonanclaform botonanclaform botonanclaform botonanclaform botonanclaform"
		    ; 
		grid-template-columns: auto auto auto 300px;
		/*grid-template-columns: repeat(6, 1fr);*/
		/*grid-auto-rows: repeat(20, 1fr);*/

	    /*grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end];
	    grid-template-columns: repeat(6, 1fr);*/

		/*grid-gap:1rem 1rem;*/
		column-gap: 1em;
		row-gap: 1em;

	}

	@media (max-width: 991px) {
    .main-ficha {
    	max-width: none;
        /*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas: 
            
		    "tit-header"
		    "entradilla"
		    "descarga-enlaces"
		    "sidebar"
		    "media-apoyo"
		    "caracteristicas"
		    "redsocial"
		    "vacio"
		    "botonanclaform"
		    ;
		
		column-gap: 0;
		row-gap: 0;
    }
}

}



/*.main-ficha div{ border:1px solid #000; }*/

.titular-cabecera { grid-area:tit-header;} 
.texto-entradilla { grid-area:entradilla} 
.iespeciales { grid-area:descarga-enlaces;} 
.imedia { grid-area:media-apoyo;} 
.icaracteristicas { grid-area:caracteristicas;} 
.interes-form { grid-area:sidebar;} 
.iredes{grid-area:redsocial;}
.ivacio {grid-area:vacio;}
.iboton {grid-area:botonanclaform;}


/**/
/*.imedia {width: 300px;}*/
.interes-form {max-height: 940px;}




/**/

/*definimos areas*/

.zintereses {
    grid-area: intereses;
}
.zpreguntas {
    grid-area: preguntas;
}



    .main-interes {   	 
         display: grid;
		   
		    grid-template-columns: auto auto;


		    grid-template-areas: 
		       
		        "intereses  preguntas";

		    /*  The gutters between each grid cell will be 60 pixels. */
		    grid-gap: .5rem;
    }





@media (max-width: 991px) {
    .main-interes {
    	max-width: none;
        /*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas: 

            "intereses"
            "preguntas";
 
    }
}

 /**/

@media screen and (min-width:992px) {
#form-scroll.fixed {   position: sticky;  z-index: 999999999999999;   top:150px;}
}


#anclaform {
    padding-top: 220px;
    margin-top: -220px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}