/* ============================================
   BOTON CTA
   Widget: webc-boton-cta
   Globales: usa tokens --webc__* del theme
   ============================================ */
.boton-cta {
  display: flex;
  width: 100%;
}
.boton-cta--izquierda {
  justify-content: flex-start;
}
.boton-cta--centro {
  justify-content: center;
}
.boton-cta--derecha {
  justify-content: flex-end;
}
.boton-cta--completo .boton-cta__boton {
  width: 100%;
}
.boton-cta__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--webc__spacing-sm);
  font-family: var(--webc__font-text);
  font-size: var(--webc__font-size-sm);
  font-weight: var(--webc__font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--webc__letter-spacing-cta);
  padding: var(--webc__btn-padding);
  border: 1px solid var(--webc__color-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.boton-cta__boton:active {
  transform: translateY(0);
}
/* ===== TEXTO ===== */
.boton-cta__texto {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  margin: 0;
  padding: 0;
}
/* ===== ICONO — Heredar color del variant y cambiarlo en hover ===== */
.boton-cta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  line-height: 1;
  color: inherit;
  transition: color 0.3s ease;
}
.boton-cta__icono i {
  color: inherit;
}
.boton-cta__icono svg {
  fill: currentColor;
  color: inherit;
  width: 1.1em;
  height: 1.1em;
  transition: fill 0.3s ease, color 0.3s ease;
}
/* ===== COLORES — Aplican color al botón (texto e icono lo heredan) ===== */
.boton-cta--primary {
  background-color: var(--webc__color-primary);
  color: var(--webc__color-white);
}
.boton-cta--primary:hover {
  background-color: white;
  color: var(--webc__color-primary);
}
.boton-cta--accent {
  background-color: var(--webc__color-accent);
  color: var(--webc__color-white);
}
.boton-cta--accent:hover {
  background-color: var(--webc__color-accent-dark);
  color: var(--webc__color-white);
}
.boton-cta--secondary {
  background-color: var(--webc__color-secondary);
  color: var(--webc__color-white);
}
.boton-cta--secondary:hover {
  background-color: var(--webc__color-primary-dark);
  color: var(--webc__color-white);
}
.boton-cta--blanco {
  background-color: var(--webc__color-white);
  color: var(--webc__color-primary);
  border: 1px solid var(--webc__color-primary);
}
.boton-cta--blanco:hover {
  background-color: var(--webc__color-primary);
  color: var(--webc__color-white);
  border-color: var(--webc__color-primary);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
  .boton-cta--izquierda,
  .boton-cta--centro,
  .boton-cta--derecha {
    justify-content: stretch;
  }
  .boton-cta--izquierda .boton-cta__boton,
  .boton-cta--centro .boton-cta__boton,
  .boton-cta--derecha .boton-cta__boton {
    width: 100%;
  }
}