/* ============================================================
   link-uvp — Componente de enlace con ícono flecha
   Modos:    light (default) | dark
   Tamaños:  grande (default) | pequeno
   Tipos:    general (default) | gradiente
   ============================================================ */

/* ---- Ícono: flecha → como máscara CSS ---- */
.link-uvp__icon {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-color: #9534eb;
    -webkit-mask-image: url("../../img/b-learning/icon-flecha.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 14px 14px;
    mask-image: url("../../img/b-learning/icon-flecha.svg");
    mask-repeat: no-repeat;
    mask-size: 14px 14px;
    transition: background-color 0.2s ease;
}

/* ---- Texto ---- */
.link-uvp__text {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.48px;
    white-space: nowrap;
    color: #9534eb;
    transition: color 0.2s ease;
}

/* ---- Base ---- */
.link-uvp {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 8px 16px 8px 8px;
    border: 4px solid transparent;
    border-radius: 20px;
    text-decoration: none;
    width: fit-content;
    cursor: pointer;
    background: none;
    outline: none;
    transition: border-color 0.2s ease, padding 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- Hover: borde aparece, ícono va a la derecha ---- */
.link-uvp:hover {
    border-color: #af67f0;
    flex-direction: row-reverse;
    padding: 8px 8px 8px 16px;
}

.link-uvp:hover .link-uvp__icon {
    background-color: #7a01e6;
}

.link-uvp:hover .link-uvp__text {
    color: #7a01e6;
}

/* ---- Click / Active: fondo morado sólido, texto casi blanco ---- */
.link-uvp:active {
    background-color: #9534eb;
    border-color: transparent;
    flex-direction: row-reverse;
    padding: 8px 8px 8px 16px;
}

.link-uvp:active .link-uvp__icon {
    background-color: #f0eef1;
}

.link-uvp:active .link-uvp__text {
    color: #f0eef1;
}

/* ---- Disabled: gris, sin interacción ---- */
.link-uvp[disabled],
.link-uvp[aria-disabled="true"],
.link-uvp--disabled {
    flex-direction: row-reverse;
    padding: 8px 8px 8px 16px;
    cursor: not-allowed;
    pointer-events: none;
}

.link-uvp[disabled] .link-uvp__icon,
.link-uvp[aria-disabled="true"] .link-uvp__icon,
.link-uvp--disabled .link-uvp__icon {
    background-color: #a198a8;
}

.link-uvp[disabled] .link-uvp__text,
.link-uvp[aria-disabled="true"] .link-uvp__text,
.link-uvp--disabled .link-uvp__text {
    color: #a198a8;
}

/* Anula hover/active cuando está deshabilitado */
.link-uvp[disabled]:hover,
.link-uvp[aria-disabled="true"]:hover,
.link-uvp--disabled:hover,
.link-uvp[disabled]:active,
.link-uvp[aria-disabled="true"]:active,
.link-uvp--disabled:active {
    background-color: transparent;
    border-color: transparent;
    flex-direction: row-reverse;
    padding: 8px 8px 8px 16px;
}

.link-uvp[disabled]:hover .link-uvp__icon,
.link-uvp[aria-disabled="true"]:hover .link-uvp__icon,
.link-uvp--disabled:hover .link-uvp__icon,
.link-uvp[disabled]:active .link-uvp__icon,
.link-uvp[aria-disabled="true"]:active .link-uvp__icon,
.link-uvp--disabled:active .link-uvp__icon {
    background-color: #a198a8;
}

.link-uvp[disabled]:hover .link-uvp__text,
.link-uvp[aria-disabled="true"]:hover .link-uvp__text,
.link-uvp--disabled:hover .link-uvp__text,
.link-uvp[disabled]:active .link-uvp__text,
.link-uvp[aria-disabled="true"]:active .link-uvp__text,
.link-uvp--disabled:active .link-uvp__text {
    color: #a198a8;
}

/* ============================================================
   MODO: dark — sobre fondos oscuros (blanco)
   ============================================================ */
.link-uvp--dark .link-uvp__icon {
    background-color: #ffffff;
}

.link-uvp--dark .link-uvp__text {
    color: #ffffff;
}

.link-uvp--dark:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.link-uvp--dark:hover .link-uvp__icon {
    background-color: rgba(255, 255, 255, 0.7);
}

.link-uvp--dark:hover .link-uvp__text {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   TAMAÑO: pequeno — 12px
   ============================================================ */
.link-uvp--pequeno .link-uvp__icon {
    width: 12px;
    height: 12px;
    -webkit-mask-image: url("../../img/b-learning/icon-flecha.svg");
    -webkit-mask-size: 12px 12px;
    mask-image: url(../../img/b-learning/icon-flecha.svg);
    mask-size: 12px 12px;
}

.link-uvp--pequeno .link-uvp__text {
    font-size: 12px;
    letter-spacing: -0.36px;
}

/* ============================================================
   TIPO: gradiente — flecha + texto con degradado cálido
   Sin hover especial (solo opacidad)
   ============================================================ */
.link-uvp--gradiente .link-uvp__icon {
    background: linear-gradient(220.22deg, #EA3638 2.75%, #FFA705 43.51%, #FEE44B 68.6%);
}

.link-uvp--gradiente .link-uvp__text {
    background: linear-gradient(220.22deg, #EA3638 2.75%, #FFA705 43.51%, #FEE44B 68.6%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Hover gradiente: solo opacidad, sin flip ni borde */
.link-uvp--gradiente:hover {
    border-color: transparent;
    flex-direction: row;
    padding: 8px 16px 8px 8px;
    opacity: 0.75;
}

.link-uvp--gradiente:hover .link-uvp__icon {
    background: linear-gradient(220.22deg, #EA3638 2.75%, #FFA705 43.51%, #FEE44B 68.6%);
}

.link-uvp--gradiente:hover .link-uvp__text {
    color: transparent;
}