/******************
***
*** Botones de descarga
***
******************/

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:var(--wp--preset--spacing--xxs);
}
 
.tabla-data .is-style-button span { display:none }
.tabla-data .is-style-button {
	--shadow:  unset;
	border:    unset;
	flex:      unset;
}

@media only screen and (max-width:820px) {
 	
 	.tabla-data .is-style-button {
	 --shadow:  unset;
		border:    1px solid var(--iconBack);
		flex:      unset;
	}

	.tabla-data .is-style-button span  { display: block; }
	.is-download-button { flex:1; }

}



.is-style-button {
  --iconSize:  36px;
  --iconBack:  var(--wp--preset--color--grey);
  --border:    var(--wp--preset--color--grey);
  --iconColor: var(--wp--preset--color--contrast);
  --shadow: var(--shadow-3);
  --translate: translateY(0px);
  --gap: var(--wp--preset--spacing--xxs);
  padding: var(--wp--preset--spacing--xs);
  
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  border:1px solid var(--border);
  gap: var(--gap);
  border-radius: 8px;
}


.is-style-button:hover {
  --border:var(--wp--preset--color--contrast);
  box-shadow: var(--shadow);
} 

.icon-dark:hover {
  --iconBack:   var(--wp--preset--color--contrast);
  --iconColor:  var(--wp--preset--color--light);
  --border:var(--wp--preset--color--contrast);
} 

.all-dark:hover {
  --iconBack:   var(--wp--preset--color--light);
  --iconColor:  var(--wp--preset--color--contrast);
  --border:     var(--wp--preset--color--contrast);
  background:   var(--wp--preset--color--contrast);
}
 
.all-dark:hover p { color:white; }

.is-style-column {
  --gap:0;
  flex-direction: column;
  align-items: start;
}

.is-style-column .button-icon {
  margin-bottom: var(--wp--preset--spacing--xs);
}

.is-style-button p {
  font-size: var(--wp--preset--font-size--s);
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
}

.is-style-button span {
  font-weight: 600;
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--header);
  color:var(--wp--preset--color--darkgrey);
}


.is-video {
  --iconBack: var(--wp--preset--color--light);
  --border:   var(--wp--preset--color--light);
  --color:    var(--wp--preset--color--light);
/*  --border:    transparent;*/
  padding: var(--wp--preset--spacing--xxs);
} 

.is-video:hover {
  --border: var(--wp--preset--color--light);
  background: white;
  box-shadow: var(--shadow);
} 

.is-video span       { color: var(--color); }
.is-video:hover span { --color: var(--wp--preset--color--contrast); }


.button-icon {
    border-radius: 50%;
    height:    var(--iconSize);
    min-width: var(--iconSize);
    display: grid;
    place-content: center; 
    background: var(--iconBack);
    color:var(--iconColor);
    overflow: clip;
}


.fixedbutton {
  --iconBack:   white;
  position: fixed;
  inset:auto 20px 20px auto;
  background-color: var(--wp--preset--color--contrast);
  color:white;
  border:none;
  padding: var(--wp--preset--spacing--xxs);

  opacity: 0;
  transform: translateY(90px);
  pointer-events: none;
  transition: all 0.3s ease;

  z-index: 20;

}

.fixedbutton.show {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: auto;
 
}

@media only screen and (max-width:768px) {
 
.fixedbutton span { display:none }

}
 

/* MOVE ICON */

.button-move svg {
  grid-column: 1/-1;
  grid-row: 1/-1;
  transition: all 500ms ease;
  transform: var(--translate);
}

.button-move svg:last-child  { 
  --translate: translateY(var(--iconSize));
}

.is-style-button:hover .button-move svg:first-child { 
   --translate:translateY(calc(var(--iconSize) * -1));
}
.is-style-button:hover .button-move svg:last-child  { 
  --translate:translateY(0px);
} 

/* MAIL ICON MOVE */
.mailmove,
.phonemove,
.arrowmove,
.virtualmove,
.videomove,
.virtualno,
.videono {transition:all 500ms ease; transform-origin: center; }

.mailmove                          { transform: translateX(-4px); }

.is-style-button:hover .mailmove     { transform: translateX(2px); }
.is-style-button:hover .phonemove    { transform: translateY(-2px) rotate(6deg); }
.is-style-button:hover .arrowmove    { transform: translateY(4px); }

.is-style-button .videomove    { transform: translate(-3px) translateY(-3px); }
.is-style-button .videono      { transform: translateX(3px) translateY(3px); opacity:0; }
.is-style-button:hover .videomove    { transform: translate(0px); }
.is-style-button:hover .videono      { transform: translate(0px); opacity:1; }

.is-style-button:hover .virtualmove  {     
    scale: 1.5;
    transform-origin: center;
}

.is-style-button:hover .virtualno  {
    scale:   .35;
    opacity: 0;
}