@charset "UTF-8";
/* CSS Document */
/********pestaña telefono**********/

  .tab {
	background: red;
	transition:2s linear 1s;
	position: absolute;
	margin-top: 0;
	margin-left:0;
	opacity:.5;
	
	padding:3px;
	font-size:.8em;
	margin:0 auto;

  }
 




  /********* ANIMACION RECUADRO *********/

.recuadro-animado{
    position: initial;
	/*top: 50%;
	left: 50%;*/
	transform: translate(0,0);
	cursor: pointer;
	width: auto;
	padding:3em 1em 2em;
	text-align: center;
	
	
}
.recuadro-animado::before{
    content:"";
    position: absolute;
    top:-2px;
    left: -2px;
    width: 0;
    height: 0;
    border: 2px solid transparent;
	background:transparent;
}
.recuadro-animado:hover::before{
    animation: animate-top .5s linear forwards;
    -webkit-animation: animate-top .5s linear forwards;
}
@keyframes animate-top
{
    0%
    {
    width: 0;
    height: 0;
    border-top-color:var(--colorPrincipal);
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    }
    50%{
    width: 100%;
    height: 0;
    border-top-color:var(--colorPrincipal);
    border-bottom-color: transparent;
    border-right-color::var(--colorPrincipal);
    border-left-color: transparent;
    }

    100%
    {
    width: 100%;  
    height: 100%;  
    border-top-color:var(--colorPrincipal);  
    border-bottom-color:transparent;   
    border-right-color:var(--colorPrincipal);  
    border-left-color: transparent;  
    }
}

.recuadro-animado::after
{
    content: "";
    position: absolute;
    top:-2px;
    left: -2px;
    width: 0;
    height: 0;
    border: 2px solid transparent;

}

.recuadro-animado:hover::after
{
    animation:animate-bottom .5s linear forwards;
    -webkit-animation:animate-bottom .5s linear forwards;
  
    animation-delay: 0.5s;
}
@keyframes animate-bottom
{
    0%
    {
    width: 0;
    height: 0;
    border-top-color:transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-left-color: var(--colorPrincipal);
    }
    50%{
    width: 0;
    height: 80%;
    border-top-color: transparent;
    border-bottom-color: var(--colorPrincipal);
    border-right-color: transparent;
    border-left-color: var(--colorPrincipal);
    }
    100%
    {
    width: 100%;  
    height: 100%;  
    border-top-color:transparent;  
    border-right-color:transparent;
    border-bottom-color:var(--colorPrincipal);   
    border-left-color:var(--colorPrincipal);  
    }
}

/*********fin ANIMACION RECUADRO *********/

/*********ANIMACION BORDE MENU *********/


.borde-animado{
    position: initial;
    /*top: 50%;
    left:50%;*/
    transform:translate(0,0);
    cursor: pointer;
    width:auto;
    padding:10px;
    text-align: center;
}
.borde-animado::before{
    content:"";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 0;
    height: 0;
    border: 2px solid transparent;
}
.borde-animado:hover::before{
    animation: anima-menu .3s linear forwards;
    -webkit-animation: anima-menu .3s linear forwards;
    
}
@keyframes anima-menu
{
    0%{
    width: 0;
    height: 0;
    border-top-color:var(--colorPrincipal);
    border-bottom-color:var(--colorPrincipal);
    border-right-color: transparent;
    border-left-color: transparent;
}
100%{
    width: 100%;  
    height: 0;  
    border-top-color:var(--colorPrincipal);  
    border-bottom-color:var(--colorPrincipal);   
    border-right-color: var(--colorPrincipal);  
    border-left-color: var(--colorPrincipal);  
}
}