/* =========================================================
   Button swap — Orisa at-btn microinteraction
   Dual label slide + dual diagonal arrow on hover
   ========================================================= */

.btn-swap {
    gap: 8px;
}

.btn-swap .btn-swap__label {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    line-height: 1.15;
}

.btn-swap .btn-swap__t1,
.btn-swap .btn-swap__t2 {
    display: block;
    transition: transform 0.3s ease, top 0.3s ease;
}

.btn-swap .btn-swap__t1 {
    position: relative;
}

.btn-swap .btn-swap__t2 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    white-space: nowrap;
}

.btn-swap .btn-swap__icon {
    position: relative;
    overflow: hidden;
    width: 16px;
    height: 16px;
    display: inline-flex;
    flex-shrink: 0;
    margin-left: 2px;
}

.btn-swap .btn-swap__icon svg {
    width: 14px;
    height: 14px;
    position: absolute;
    bottom: 0;
    left: 1px;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out;
    transform: translateY(0);
}

.btn-swap .btn-swap__icon svg:last-child {
    left: -12px;
    bottom: -12px;
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 0);
}

/* Hover — Orisa */
.btn-swap:hover .btn-swap__t1,
.btn-swap:focus-visible .btn-swap__t1 {
    transform: translateY(-150%);
}

.btn-swap:hover .btn-swap__t2,
.btn-swap:focus-visible .btn-swap__t2 {
    top: 50%;
    transform: translateY(-50%);
}

.btn-swap:hover .btn-swap__icon svg:first-child,
.btn-swap:focus-visible .btn-swap__icon svg:first-child {
    transform: translate(16px, -16px);
}

.btn-swap:hover .btn-swap__icon svg:last-child,
.btn-swap:focus-visible .btn-swap__icon svg:last-child {
    opacity: 1;
    visibility: visible;
    transform: translate(13px, -13px);
}

/* Kill lift transforms that fight the swap */
.btn.btn-swap:hover,
.btn.btn-swap:focus-visible,
.rama-svc__cta.btn-swap:hover,
.rama-why__cta.btn-swap:hover,
.voyage-close__btn.btn-swap:hover {
    transform: none;
}

/* Link-style CTA (caps "Ver servicios") keeps underline feel */
.voyage-caps__all.btn-swap {
    gap: 8px;
}

.voyage-caps__all.btn-swap .btn-swap__icon svg {
    color: inherit;
}

.voyage-caps__all.btn-swap:hover svg {
    transform: none; /* override old single-arrow nudge */
}

@media (prefers-reduced-motion: reduce) {
    .btn-swap .btn-swap__t1,
    .btn-swap .btn-swap__t2,
    .btn-swap .btn-swap__icon svg {
        transition: none;
    }

    .btn-swap:hover .btn-swap__t1,
    .btn-swap:focus-visible .btn-swap__t1 {
        transform: none;
    }

    .btn-swap:hover .btn-swap__t2,
    .btn-swap:focus-visible .btn-swap__t2 {
        top: 100%;
        transform: none;
    }

    .btn-swap:hover .btn-swap__icon svg:first-child,
    .btn-swap:focus-visible .btn-swap__icon svg:first-child,
    .btn-swap:hover .btn-swap__icon svg:last-child,
    .btn-swap:focus-visible .btn-swap__icon svg:last-child {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    .btn-swap .btn-swap__icon svg:last-child {
        opacity: 0;
        visibility: hidden;
    }
}