.vao-oracle {
    --vao-bg: #F6F0E9;
    --vao-title: #2F3A35;
    --vao-text: #4A514D;
    --vao-accent: #8B7A64;
    --vao-highlight: #8B7A64;
    --vao-card-back: #F6F0E9;
    --vao-font: inherit;
    position: relative;
    isolation: isolate;
    overflow: visible;
    width: 100%;
    padding: clamp(22px, 4vw, 44px) 0;
    box-sizing: border-box;
    background: var(--vao-bg);
    color: var(--vao-text);
    font-family: var(--vao-font);
}

.vao-oracle *,
.vao-oracle *::before,
.vao-oracle *::after {
    box-sizing: border-box;
}

.vao-oracle--transparent {
    background: transparent;
}

.vao-oracle__inner {
    position: relative;
    z-index: 2;
    width: min(100%, 780px);
    margin: 0 auto;
    text-align: center;
}

.vao-oracle__ambience {
    position: absolute;
    inset: -8% -2%;
    z-index: 0;
    pointer-events: none;
}

.vao-oracle__orb,
.vao-oracle__stars,
.vao-oracle__halo {
    position: absolute;
    opacity: 0;
    transition: opacity 240ms ease;
}

.vao-oracle__eyebrow {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: var(--vao-accent);
    font-size: clamp(.78rem, 1.8vw, .92rem);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vao-oracle__title {
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    color: var(--vao-title);
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 1.1;
}

.vao-oracle__intro {
    position: relative;
    z-index: 2;
    max-width: 590px;
    margin: 0 auto 32px;
    color: var(--vao-text);
    font-size: clamp(1rem, 2.5vw, 1.08rem);
    line-height: 1.65;
}

.vao-card {
    position: relative;
    z-index: 2;
    display: block;
    width: min(74vw, 310px);
    aspect-ratio: 2 / 3;
    margin: 0 auto !important;
    margin-inline: auto !important;
    padding: 0;
    float: none !important;
    left: auto !important;
    right: auto !important;
    max-width: 100%;
    border: 0;
    border-radius: 18px;
    background: transparent;
    cursor: pointer;
    perspective: 1500px;
    -webkit-tap-highlight-color: transparent;
}

.vao-card:focus-visible {
    outline: 2px solid var(--vao-accent);
    outline-offset: 8px;
}

.vao-card:disabled {
    cursor: default;
}

.vao-card__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: transform 900ms cubic-bezier(.2,.78,.2,1), filter 220ms ease;
}

.vao-card:not(:disabled):hover .vao-card__inner {
    filter: drop-shadow(0 18px 25px rgba(0,0,0,.12));
}

.vao-card.is-flipped .vao-card__inner {
    transform: rotateY(180deg);
}

.vao-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(35, 35, 35, .16);
    border-radius: inherit;
    box-shadow: 0 18px 44px rgba(0,0,0,.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.vao-card__back {
    background: var(--vao-card-back);
}

.vao-card__front {
    background: transparent;
    transform: rotateY(180deg);
}

.vao-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vao-card__image--back,
.vao-card__image--front {
    object-fit: cover;
    object-position: center center;
}

.vao-card__fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 28px;
}

.vao-card__symbol {
    display: block;
    margin-bottom: 20px;
    color: var(--vao-accent);
    font-size: 2.7rem;
}

.vao-card__brand {
    color: var(--vao-title);
    font-size: 1rem;
    letter-spacing: .08em;
}

.vao-card__loading {
    position: absolute;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(0,0,0,.12);
    border-top-color: var(--vao-accent);
    border-radius: 50%;
    animation: vao-spin .75s linear infinite;
}

.vao-card.has-image .vao-card__loading {
    display: none;
}

@keyframes vao-spin {
    to { transform: rotate(360deg); }
}

.vao-oracle__result {
    position: relative;
    z-index: 2;
    width: min(100%, 660px);
    margin: 30px auto 0;
    min-height: 1px;
    color: var(--vao-text);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 420ms ease, transform 420ms ease;
}

.vao-oracle__result.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.vao-oracle__result-title {
    margin: 0 0 12px;
    color: var(--vao-title);
    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1.2;
}

.vao-oracle__result-copy {
    color: var(--vao-text) !important;
    font-size: clamp(1rem, 2.5vw, 1.08rem);
    line-height: 1.7;
}

.vao-oracle__result-copy p,
.vao-oracle__result-copy li,
.vao-oracle__result-copy span,
.vao-oracle__result-copy em {
    color: inherit !important;
}

.vao-oracle__result-copy strong,
.vao-oracle__result-copy b {
    color: var(--vao-highlight) !important;
}

.vao-oracle__result-copy a {
    color: var(--vao-accent) !important;
}

.vao-oracle__result-copy > :first-child {
    margin-top: 0;
}

.vao-oracle__result-copy > :last-child {
    margin-bottom: 0;
}

.vao-oracle__notice {
    margin: 0 0 16px;
    padding: 11px 16px;
    border: 1px solid rgba(139, 122, 100, .22);
    border-radius: 999px;
    color: var(--vao-text);
    background: rgba(139, 122, 100, .08);
    font-size: .95rem;
    line-height: 1.45;
}

.vao-oracle__error {
    margin: 20px auto 0;
    color: var(--vao-text);
    line-height: 1.55;
}

/* Presets: ambientación sin bordes ni recuadros */
.vao-oracle__ambience { display:block; }
.vao-oracle--preset-none .vao-oracle__ambience { display:none; }

.vao-oracle--preset-starlight .vao-oracle__stars,
.vao-oracle--preset-starlight .vao-oracle__halo,
.vao-oracle--preset-galaxy .vao-oracle__stars,
.vao-oracle--preset-galaxy .vao-oracle__halo,
.vao-oracle--preset-galaxy .vao-oracle__orb,
.vao-oracle--preset-aurora .vao-oracle__orb,
.vao-oracle--preset-aurora .vao-oracle__halo { opacity:1; }

.vao-oracle--preset-starlight .vao-oracle__ambience {
    background:
        radial-gradient(circle at 50% 42%, rgba(205,178,120,.22) 0, rgba(205,178,120,.08) 28%, transparent 62%),
        radial-gradient(circle at 20% 22%, rgba(112,124,158,.12) 0, transparent 34%),
        radial-gradient(circle at 82% 30%, rgba(158,128,172,.11) 0, transparent 34%);
}

.vao-oracle--preset-starlight .vao-oracle__stars--a,
.vao-oracle--preset-galaxy .vao-oracle__stars--a,
.vao-oracle--preset-starlight .vao-oracle__stars--b,
.vao-oracle--preset-galaxy .vao-oracle__stars--b {
    inset: 0 2% auto;
    height: 66%;
    background-repeat: repeat;
}

.vao-oracle--preset-starlight .vao-oracle__stars--a,
.vao-oracle--preset-galaxy .vao-oracle__stars--a {
    background-image:
        radial-gradient(circle at 18% 22%, rgba(112,88,136,.82) 0 1.2px, transparent 1.5px),
        radial-gradient(circle at 34% 62%, rgba(190,150,75,.88) 0 1px, transparent 1.3px),
        radial-gradient(circle at 62% 28%, rgba(80,116,156,.80) 0 1.3px, transparent 1.6px),
        radial-gradient(circle at 78% 54%, rgba(145,116,165,.78) 0 1px, transparent 1.3px),
        radial-gradient(circle at 90% 16%, rgba(196,160,91,.82) 0 1.4px, transparent 1.7px);
    background-size: 245px 170px;
    opacity:.78;
}

.vao-oracle--preset-starlight .vao-oracle__stars--b,
.vao-oracle--preset-galaxy .vao-oracle__stars--b {
    inset: 12% 8% auto;
    height: 60%;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(120,105,145,.66) 0 1px, transparent 1.3px),
        radial-gradient(circle at 42% 70%, rgba(194,159,91,.64) 0 1.1px, transparent 1.4px),
        radial-gradient(circle at 70% 38%, rgba(91,124,157,.62) 0 1px, transparent 1.3px),
        radial-gradient(circle at 86% 62%, rgba(150,126,165,.60) 0 1px, transparent 1.3px);
    background-size: 305px 200px;
    opacity:.58;
}

.vao-oracle--preset-starlight .vao-oracle__halo {
    left:50%; top:22%; width:480px; height:480px; transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(circle, rgba(255,248,228,.42) 0, rgba(228,201,146,.20) 30%, rgba(166,180,208,.10) 52%, transparent 75%);
    filter:blur(12px);
}

.vao-oracle--preset-galaxy .vao-oracle__ambience {
    background:
        radial-gradient(circle at 18% 24%, rgba(92,56,145,.30) 0, transparent 40%),
        radial-gradient(circle at 82% 28%, rgba(36,112,164,.27) 0, transparent 40%),
        radial-gradient(ellipse at 50% 75%, rgba(214,116,162,.22) 0, rgba(240,176,112,.12) 34%, transparent 66%);
}
.vao-oracle--preset-galaxy .vao-oracle__orb--1 { top:5%; left:7%; width:370px; height:370px; border-radius:50%; background:radial-gradient(circle, rgba(88,50,150,.46) 0, rgba(88,50,150,.18) 46%, transparent 74%); filter:blur(18px); }
.vao-oracle--preset-galaxy .vao-oracle__orb--2 { top:16%; right:6%; width:330px; height:330px; border-radius:50%; background:radial-gradient(circle, rgba(29,116,170,.38) 0, rgba(29,116,170,.14) 46%, transparent 74%); filter:blur(16px); }
.vao-oracle--preset-galaxy .vao-oracle__orb--3 { bottom:2%; left:50%; width:470px; height:270px; transform:translateX(-50%); border-radius:999px; background:radial-gradient(ellipse, rgba(235,145,192,.27) 0, rgba(247,181,116,.15) 36%, transparent 72%); filter:blur(20px); }
.vao-oracle--preset-galaxy .vao-oracle__halo { left:50%; top:20%; width:580px; height:530px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.13) 0, rgba(255,255,255,.05) 40%, transparent 70%); }

.vao-oracle--preset-aurora .vao-oracle__ambience {
    background:
        radial-gradient(ellipse at 22% 28%, rgba(139,190,164,.23) 0, transparent 44%),
        radial-gradient(ellipse at 80% 28%, rgba(151,180,225,.21) 0, transparent 44%),
        radial-gradient(ellipse at 50% 78%, rgba(232,196,137,.17) 0, transparent 50%);
}
.vao-oracle--preset-aurora .vao-oracle__orb--1 { top:6%; left:11%; width:320px; height:410px; border-radius:50%; background:radial-gradient(ellipse, rgba(151,198,169,.34) 0, rgba(151,198,169,.13) 46%, transparent 76%); filter:blur(26px); }
.vao-oracle--preset-aurora .vao-oracle__orb--2 { top:8%; right:10%; width:340px; height:440px; border-radius:50%; background:radial-gradient(ellipse, rgba(165,185,229,.31) 0, rgba(165,185,229,.11) 46%, transparent 76%); filter:blur(28px); }
.vao-oracle--preset-aurora .vao-oracle__orb--3 { bottom:0; left:50%; width:490px; height:260px; transform:translateX(-50%); border-radius:999px; background:radial-gradient(ellipse, rgba(236,204,150,.27) 0, rgba(236,204,150,.09) 44%, transparent 76%); filter:blur(24px); }
.vao-oracle--preset-aurora .vao-oracle__halo { left:50%; top:24%; width:510px; height:510px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.33) 0, rgba(255,255,255,.12) 34%, transparent 72%); filter:blur(9px); }


/* Efectos al descubrir la carta */
.vao-card::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

.vao-oracle--effect-soft-flip .vao-card__inner {
    transition-duration: 900ms;
    transition-timing-function: cubic-bezier(.2,.78,.2,1);
}

.vao-oracle--effect-glow-flip .vao-card__inner {
    transition-duration: 1050ms;
    transition-timing-function: cubic-bezier(.16,.84,.26,1);
}

.vao-oracle--effect-glow-flip .vao-card.is-flipped .vao-card__inner {
    transform: rotateY(180deg) scale(1.012);
}

.vao-oracle--effect-glow-flip .vao-card.is-flipped::before {
    animation: vao-reveal-glow 1150ms ease-out both;
    background: radial-gradient(circle, rgba(255,246,210,.64) 0, rgba(219,195,132,.28) 28%, rgba(172,187,221,.14) 48%, transparent 72%);
    filter: blur(10px);
}

@keyframes vao-reveal-glow {
    0% { opacity: 0; transform: scale(.72); }
    35% { opacity: .95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); }
}

.vao-oracle--effect-lift .vao-card__inner {
    transition: filter 220ms ease;
}

.vao-oracle--effect-lift .vao-card.is-flipped .vao-card__inner {
    animation: vao-lift-reveal 1120ms cubic-bezier(.18,.76,.2,1) both;
}

@keyframes vao-lift-reveal {
    0% { transform: translateY(0) rotateY(0deg) scale(1); }
    42% { transform: translateY(-18px) rotateY(92deg) scale(1.045); }
    72% { transform: translateY(-7px) rotateY(160deg) scale(1.025); }
    100% { transform: translateY(0) rotateY(180deg) scale(1); }
}

.vao-oracle--effect-vertical .vao-card__inner {
    transition-duration: 950ms;
    transition-timing-function: cubic-bezier(.2,.78,.2,1);
}

.vao-oracle--effect-vertical .vao-card__front {
    transform: rotateX(180deg);
}

.vao-oracle--effect-vertical .vao-card.is-flipped .vao-card__inner {
    transform: rotateX(180deg);
}

.vao-oracle--effect-ethereal .vao-card__inner {
    transform-style: flat;
    transition: filter 720ms ease, transform 720ms ease;
}

.vao-oracle--effect-ethereal .vao-card__face {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 760ms ease, filter 760ms ease, transform 760ms cubic-bezier(.2,.75,.2,1);
}

.vao-oracle--effect-ethereal .vao-card__front {
    opacity: 0;
    filter: blur(12px);
    transform: scale(.93);
}

.vao-oracle--effect-ethereal .vao-card__back {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.vao-oracle--effect-ethereal .vao-card.is-flipped .vao-card__inner {
    transform: none;
}

.vao-oracle--effect-ethereal .vao-card.is-flipped .vao-card__front {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.vao-oracle--effect-ethereal .vao-card.is-flipped .vao-card__back {
    opacity: 0;
    filter: blur(8px);
    transform: scale(1.045);
}

@media (max-width: 600px) {
    .vao-oracle {
        padding-top: 18px;
        padding-bottom: 28px;
    }

    .vao-card {
        width: min(78vw, 280px);
        border-radius: 15px;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-inline: auto !important;
        transform: none !important;
    }

    .vao-oracle__inner {
        width: 100%;
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0;
        padding-right: 0;
    }

    .vao-oracle__ambience {
        inset: -2% -4%;
    }

    .vao-oracle--preset-galaxy .vao-oracle__orb--1,
    .vao-oracle--preset-galaxy .vao-oracle__orb--2,
    .vao-oracle--preset-aurora .vao-oracle__orb--1,
    .vao-oracle--preset-aurora .vao-oracle__orb--2 {
        width: 220px;
        height: 260px;
    }

    .vao-oracle--preset-galaxy .vao-oracle__orb--3,
    .vao-oracle--preset-aurora .vao-oracle__orb--3,
    .vao-oracle--preset-starlight .vao-oracle__halo,
    .vao-oracle--preset-galaxy .vao-oracle__halo,
    .vao-oracle--preset-aurora .vao-oracle__halo {
        width: 320px;
        max-width: 92vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vao-card__inner,
    .vao-oracle__result,
    .vao-oracle__orb,
    .vao-oracle__stars,
    .vao-oracle__halo {
        transition-duration: 1ms;
    }

    .vao-card__loading {
        animation-duration: 1.5s;
    }

    .vao-oracle--effect-lift .vao-card.is-flipped .vao-card__inner,
    .vao-oracle--effect-glow-flip .vao-card.is-flipped::before {
        animation-duration: 1ms;
    }
}