/* Hero: tarjetas 3D giratorias ("Elegí tu punto de partida") */
.hero-3d {
    margin-top: 8px;
    max-width: 520px
}

.hero-3d-stage {
    display: grid;
    gap: 12px
}

.h3d-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 18px;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg,var(--navy-2),var(--navy) 70%);
    border: 1px solid rgba(143,180,240,.22);
    box-shadow: 0 18px 40px rgba(6,27,72,.28)
}

    .h3d-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 62%);
        pointer-events: none
    }

    .h3d-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: var(--accent)
    }

    .h3d-card > * {
        position: relative
    }

.h3d-num {
    position: absolute !important;
    right: 18px;
    top: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1;
    color: rgba(255,255,255,.09)
}

.h3d-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff
}

    .h3d-icon svg {
        width: 21px;
        height: 21px
    }

.h3d-card strong {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.3;
    max-width: 20ch
}

.h3d-sub {
    font-size: .88rem;
    line-height: 1.45;
    color: rgba(255,255,255,.72)
}

.h3d-go {
    margin-top: auto;
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    gap: 8px;
    align-items: center
}

    .h3d-go i {
        font-style: normal;
        display: inline-block;
        transition: transform .2s;
        color: var(--accent);
        filter: brightness(1.5)
    }

.h3d-card:hover .h3d-go i {
    transform: translateX(4px)
}

.hero-3d-ctrl {
    display: none
}

/* Anillo 3D: tres tarjetas que orbitan en círculo (el JS calcula la posición de cada una) */
.hero-3d.is-3d {
    perspective: 1000px;
    perspective-origin: 50% 30%
}

    .hero-3d.is-3d .hero-3d-stage {
        display: block;
        position: relative;
        height: 290px;
        transform-style: preserve-3d
    }

.h3d-orbit {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 6px;
    height: 72px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb,var(--blue) 35%,transparent);
    background: radial-gradient(closest-side,rgba(18,59,121,.10),transparent 75%);
    transform: translateZ(-60px)
}

.hero-3d.is-3d .h3d-card {
    position: absolute;
    left: 50%;
    top: 0;
    width: 244px;
    height: 236px;
    margin-left: -122px;
    backface-visibility: hidden;
    will-change: transform
}
    /* Sin JS: posición fija de respaldo */
    .hero-3d.is-3d .h3d-card[data-pos="0"] {
        z-index: 3
    }

    .hero-3d.is-3d .h3d-card[data-pos="-1"] {
        transform: translateX(-148px) translateZ(-195px) rotateY(26deg);
        z-index: 1;
        opacity: .62
    }

    .hero-3d.is-3d .h3d-card[data-pos="1"] {
        transform: translateX(148px) translateZ(-195px) rotateY(-26deg);
        z-index: 1;
        opacity: .62
    }

.hero-3d.is-live .h3d-card {
    transition: none
}

.hero-3d.is-3d .h3d-card:not(.is-front) {
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(6,27,72,.2)
}

.hero-3d.is-3d .hero-3d-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 4px
}

.h3d-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s,color .15s
}

    .h3d-arrow:hover {
        background: var(--navy);
        color: #fff
    }

    .h3d-arrow svg {
        width: 16px;
        height: 16px
    }

.h3d-dots {
    display: flex;
    gap: 8px
}

    .h3d-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 999px;
        border: 0;
        background: var(--line);
        cursor: pointer;
        transition: width .3s,background .3s
    }

        .h3d-dots button.is-on {
            width: 24px;
            background: var(--navy)
        }

        .h3d-arrow:focus-visible, .h3d-dots button:focus-visible, .h3d-card:focus-visible {
            outline: 3px solid var(--spark);
            outline-offset: 3px
        }

@media (max-width:640px) {
    .hero-3d.is-3d .hero-3d-stage {
        height: 270px
    }

    .hero-3d.is-3d .h3d-card {
        width: 224px;
        margin-left: -112px;
        height: 228px
    }
}