/*
 * Styles for Sky Law Custom Button
 * Archivo: inc/buttons.css
 */

/* === Encapsulando estilos para el boton de Sky Law ===*/

/* Reset de estilos para el elemento de enlace */
.skylaw-button-wrapper .skylaw-button {
    margin: 0;
    height: auto;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap; /* Asegura que el texto no se rompa */
}

/* Estilo principal del botón */
.skylaw-button-wrapper .skylaw-button {
    --border-right: 6px;
    --text-stroke-color: rgba(255, 255, 255, 0.6);
    --animation-color: #ff4400;
    --fs-size: 2em;
    letter-spacing: 3px;
    font-size: var(--fs-size);
    font-family: "Arial", sans-serif;
    position: relative;
    text-transform: uppercase;
    color: transparent; /* El color del texto base es transparente */
    -webkit-text-stroke: 1px var(--text-stroke-color);
    text-stroke: 1px var(--text-stroke-color);
}

/* El texto que se ve normalmente (color del contorno) */
.skylaw-button-wrapper .skylaw-button .skylaw-actual-text {
    display: inline-block;
    /* El color de trazo ya se aplica al .skylaw-button padre */
}

/* Este es el texto, cuando se hace hover en el botón */
.skylaw-button-wrapper .skylaw-button .skylaw-hover-text {
    position: absolute;
    box-sizing: border-box;
    /* content: attr(data-skylaw-hover-text); REMOVIDO: Ya no se usa content para spans con contenido HTML */
    color: var(--animation-color); /* Color del texto al pasar el ratón */
    width: 0%; /* Empezamos con 0% de ancho para el efecto de "escritura" */
    height: 100%; /* Asegura que cubra toda la altura del texto */
    top: 0;
    left: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden; /* Oculta el texto que está fuera del ancho actual */
    transition: 0.5s ease-out;
    -webkit-text-stroke: 1px var(--animation-color);
    text-stroke: 1px var(--animation-color);
    white-space: nowrap;
    /* Asegúrate de que el texto de hover no sea transparente, por eso le pusimos color: var(--animation-color); */
}

/* Efecto hover: expande el ancho del texto de hover */
.skylaw-button-wrapper .skylaw-button:hover .skylaw-hover-text {
    width: 100%; /* El ancho se expande al 100% */
    filter: drop-shadow(0 0 23px var(--animation-color));
}

/* --- Encapsulado en .areas-practica-cta para que no afecte nada más --- */
.areas-practica-cta .cta {
  position: relative;
  margin: auto;
  padding: 12px 18px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}

.areas-practica-cta .cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50px;
  background: #ff4400;
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
}

.areas-practica-cta .cta span {
  position: relative;
  font-family: "Ubuntu", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #e6dccd;
}

.areas-practica-cta .cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #ff4400; /* Color inicial de la flecha */
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.areas-practica-cta .cta:hover:before {
  width: 100%;
  background: #ff4400;
}

.areas-practica-cta .cta:hover svg {
  transform: translateX(0);
  stroke: #FFFFFF; /* ¡Aquí está el cambio! La flecha se vuelve blanca en hover */
}

.areas-practica-cta .cta:active {
  transform: scale(0.95);
}