/* Venusia FX — fondo violeta, vidrio, animaciones y brillos (se carga después del CSS del motor) */
:root{
  --primary-background: transparent !important;
  --header-background: transparent !important;
  --light-background: rgba(255,255,255,.9);
  --progress: rgba(255,255,255,.55) !important;
  --progress-track: #6639F6 !important;
  --fx-ink: #1B1433;
  --fx-sub: #4A3D70;
  --fx-v1: #6639F6;
  --fx-v2: #4D2DB3;
  --fx-v3: #8B6BFF;
  --fx-rose: #E58FC9;
}
html{
  background:
    radial-gradient(120% 70% at 50% -10%, #F3EDFF 0%, rgba(243,237,255,0) 60%),
    linear-gradient(180deg, #E4D9FF 0%, #CDB9F8 38%, #B197F0 72%, #9C7DE8 100%) !important;
  background-attachment: fixed !important;
  min-height: 100%;
}
body{ background: transparent !important; }
.wrapper,.main,.quiz,.quiz__form,[data-screens-list],.main__pay,.main__paywall-scroll{ background: transparent !important; }

/* capa de fondo animada */
#fx-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#fx-bg .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
#fx-bg .b1{width:58vmax;height:58vmax;left:-18vmax;top:-12vmax;background:radial-gradient(circle,#B79CFF 0%,rgba(183,156,255,0) 70%);animation:fxDrift1 22s ease-in-out infinite alternate}
#fx-bg .b2{width:50vmax;height:50vmax;right:-20vmax;top:22vh;background:radial-gradient(circle,#F2A9D8 0%,rgba(242,169,216,0) 70%);opacity:.45;animation:fxDrift2 26s ease-in-out infinite alternate}
#fx-bg .b3{width:60vmax;height:60vmax;left:10vw;bottom:-30vmax;background:radial-gradient(circle,#7B55F0 0%,rgba(123,85,240,0) 70%);opacity:.5;animation:fxDrift3 30s ease-in-out infinite alternate}
@keyframes fxDrift1{to{transform:translate(12vw,10vh) scale(1.12)}}
@keyframes fxDrift2{to{transform:translate(-14vw,-8vh) scale(.92)}}
@keyframes fxDrift3{to{transform:translate(-8vw,-12vh) scale(1.08)}}
#fx-bg .star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.9);opacity:0;animation:fxTwinkle var(--d,4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}

/* textos legibles sobre violeta */
.container-type-sub-title{--type-sub-title-text-color: var(--fx-sub) !important}
.container-type-paragraph{--type-paragraph-color: var(--fx-sub) !important}
.type-sub-title,.type-paragraph{color:var(--fx-sub)}
.type-title{color:var(--fx-ink)}
.quiz__circle{background:rgba(255,255,255,.7)!important;backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(60,30,140,.12)}
.quiz__btn-prev{background:rgba(255,255,255,.55)!important;border-radius:50%;backdrop-filter:blur(8px)}

/* barra de progreso con brillo */
.quiz__progress.progress{background:rgba(255,255,255,.5)!important;box-shadow:inset 0 1px 2px rgba(60,30,140,.12)}
.progress__bar{background:linear-gradient(90deg,#8B6BFF,#6639F6 55%,#C24F9C)!important;box-shadow:0 0 12px rgba(139,107,255,.8);transition:width .6s cubic-bezier(.2,.8,.2,1)!important}

/* opciones tipo vidrio */
.type-options__descr{
  background: rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(60,30,140,.12), inset 0 0 0 1px rgba(255,255,255,.7) !important;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease !important;
}
@media (hover:hover){ .type-options__label:hover .type-options__descr{transform:translateY(-2px);box-shadow:0 12px 26px rgba(60,30,140,.18), inset 0 0 0 1px rgba(255,255,255,.8)!important} }
.type-options__label:active .type-options__descr{transform:scale(.98)}
.type-options__label.selected .type-options__descr,
.type-options__input:checked + .type-options__descr{
  background:#fff !important;
  box-shadow: 0 0 0 2px var(--fx-v1), 0 12px 28px rgba(102,57,246,.32) !important;
  animation: fxPick .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes fxPick{40%{transform:scale(1.035)}100%{transform:scale(1)}}
.type-options-images__label{transition:transform .2s ease, filter .2s ease}
.type-options-images__container{box-shadow:0 10px 26px rgba(60,30,140,.18);border-color:transparent!important}
.type-options-images__label:active{transform:scale(.97)}
.type-options-images__name{background:linear-gradient(110deg,#6639F6,#4D2DB3)!important}
.type-options-evaluation__list{background:rgba(255,255,255,.75)!important;backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(60,30,140,.12)}
.type-input__input,.type-input input,input[type=text],input[type=email]{background:rgba(255,255,255,.9)!important}

/* botón con brillo que recorre */
.type-button:not([disabled]):not(.type-button--link){
  background-image: linear-gradient(110deg,#6639F6 0%,#4D2DB3 38%,#9A7DFF 50%,#4D2DB3 62%,#6639F6 100%) !important;
  background-size: 260% 100% !important;
  animation: fxShine 3.2s ease-in-out infinite, fxGlow 3.2s ease-in-out infinite;
  box-shadow: 0 10px 26px rgba(77,45,179,.38);
  transition: transform .15s ease;
}
.type-button:not([disabled]):active{transform:scale(.97)}
@keyframes fxShine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
@keyframes fxGlow{0%,100%{box-shadow:0 10px 26px rgba(77,45,179,.35)}50%{box-shadow:0 12px 34px rgba(139,107,255,.6)}}
.type-button[disabled]{background:rgba(255,255,255,.55)!important;color:#8C82A8!important}
.type-button--link,.copy{background:rgba(255,255,255,.7)!important;backdrop-filter:blur(8px)}

/* entrada de pantalla escalonada: la dispara CSS en el mismo instante en que aparece la pantalla */
.quiz__screen.active > .container-type{animation:fxUp .42s cubic-bezier(.2,.8,.2,1) backwards}
.quiz__screen.active > .container-type:nth-child(2){animation-delay:.04s}
.quiz__screen.active > .container-type:nth-child(3){animation-delay:.08s}
.quiz__screen.active > .container-type:nth-child(4){animation-delay:.12s}
.quiz__screen.active > .container-type:nth-child(5){animation-delay:.16s}
.quiz__screen.active > .container-type:nth-child(n+6){animation-delay:.2s}
.quiz__screen.active > .container-type-button,.quiz__screen.active > .container-type-button-link{animation-name:fxFade!important}
@keyframes fxUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
[data-paywall-content] > .container-type{animation:fxUp .5s cubic-bezier(.2,.8,.2,1) backwards}

/* destellos */
.fx-spark{position:fixed;left:0;top:0;width:8px;height:8px;pointer-events:none;z-index:9999;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#D9CCFF 45%,rgba(139,107,255,0) 70%);animation:fxSpark .75s cubic-bezier(.2,.8,.2,1) forwards}
.fx-spark.star{border-radius:0;background:none;width:12px;height:12px}
.fx-spark.star::before{content:"✦";position:absolute;inset:0;color:#fff;font-size:12px;line-height:12px;text-shadow:0 0 6px #B79CFF}
@keyframes fxSpark{0%{opacity:1;transform:translate(var(--x0),var(--y0)) scale(.6)}100%{opacity:0;transform:translate(var(--x1),var(--y1)) scale(1.1) rotate(var(--r,0deg))}}
.fx-ring{position:fixed;pointer-events:none;z-index:9998;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 18px rgba(139,107,255,.8);animation:fxRing .6s ease-out forwards}
@keyframes fxRing{from{opacity:.9;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.fx-confetti{position:fixed;top:-12px;width:8px;height:14px;z-index:9999;pointer-events:none;border-radius:2px;animation:fxFall var(--t,2.6s) cubic-bezier(.3,.6,.5,1) forwards}
@keyframes fxFall{to{transform:translate(var(--dx),110vh) rotate(var(--rot));opacity:.9}}

/* botón de sonido */
#fx-sound{position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:9000;width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(255,255,255,.75);backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(60,30,140,.2);display:grid;place-items:center;color:#4D2DB3;cursor:pointer}
#fx-sound svg{width:20px;height:20px}

/* paywall sobre violeta */
.type-payment-terms,.type-payment-terms *{color:var(--fx-sub)!important}
.type-prices-list__card{box-shadow:0 8px 22px rgba(60,30,140,.14)}
.goal-item,.card-container{background:rgba(255,255,255,.72)!important;backdrop-filter:blur(8px)}
.type-faq-question__item{background:rgba(255,255,255,.85)!important}
.container-type-slider-results{background:rgba(255,255,255,.88)}
.type-timer-sticky{backdrop-filter:blur(10px)}

@media (prefers-reduced-motion:reduce){
  #fx-bg .blob,#fx-bg .star,.type-button{animation:none!important}
  .quiz__screen.active > .container-type{animation:none!important}
}

/* botón fijo: espacio y degradé detrás para que no tape el texto */
.quiz__screen.active{padding-bottom:120px}
#fx-fade{position:fixed;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:4;background:linear-gradient(180deg,rgba(156,125,232,0) 0%,rgba(156,125,232,.85) 55%,#9C7DE8 100%);opacity:0;transition:opacity .3s}
body.fx-has-fixed #fx-fade{opacity:1}
.type-button{z-index:6}
.type-timer-sticky,.type-timer-sticky__container{background:rgba(255,255,255,.94)!important}
#fx-sound{top:calc(62px + env(safe-area-inset-top,0px));bottom:auto;width:36px;height:36px;right:10px}
#fx-sound svg{width:17px;height:17px}
body.fx-pay #fx-sound{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}

/* fundido cruzado entre pantallas */
.fx-ghost{animation:fxGhost .22s ease-out forwards}
.fx-ghost .fx-ghost-screen{display:block!important}
.fx-ghost .fx-ghost-screen > .container-type{animation:none!important}
.fx-ghost .type-button{position:static!important;visibility:hidden}
@keyframes fxGhost{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}