/*** ESTILOS BOTÓN GROW SKEW ***/
.ov-btn-grow-skew {
    background: none;
    color: var(--text-color);
    /* border: 2px solid #000000; */
    border: none;
    padding: 16px 20px;
    border-radius: 3px; /* redondear bordes */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
}
.ov-btn-grow-skew:hover {
color: var(--text-color);/* color de fuente hover */
}
.ov-btn-grow-skew::after {
content: "";
background: var(--secondary-text-color); /* color de fondo hover */
position: absolute;
z-index: -1;
padding: 16px 20px;
display: block;
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1);
transition: all 0.3s ease;
}
.ov-btn-grow-skew:hover::after {
transition: all 0.3s ease-out;
transform: skewX(-45deg) scale(1, 1);
}


/* Nueva animacion typinewriter*/
.typer-wrapper{
  width: fit-content;
  margin: auto;
  text-align: center;
}

.typewriter{
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    /* border-right: .15em solid white;  */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .05em; /* Adjust as needed */
    animation: typing 1.5s steps(40, end), blink-caret .75s step-end infinite;
}

.typewriter2 {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .05em;
  width: 0; /* Oculta todo el texto inicialmente */
  visibility: hidden; /* Totalmente invisible */
  animation: typing 1.5s steps(40, end) 1.6s forwards, blink-caret .75s step-end 2s infinite;
}

.typewriter3 {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .05em;
  width: 0; /* Oculta todo el texto inicialmente */
  visibility: hidden; /* Totalmente invisible */
  animation: typing 0.7s steps(40, end) 0.5s forwards, blink-caret .75s step-end 0s infinite;
}


/* The typing effect */
/* @keyframes typing {
  from { width: 0 }
  to { width: 100% }
} */

@keyframes typing {
  from { width: 0; visibility: visible; }
  to { width: 100%; visibility: visible; }
}


/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(255, 255, 255); }
}