/* EligeTuJuguete · animaciones ligeras (sin librerías). Todo se desactiva con "reducir movimiento". */
/* arreglo: las columnas de la ficha no deben ensancharse por la tabla (desbordaba en móvil) */
.prod-head > *, .hero-grid > *{min-width:0}
.tbl{max-width:100%;overflow-x:auto}
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .wrap{position:relative;z-index:1}
.orbs{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none}
.orbs span{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;will-change:transform}
.orbs span:nth-child(1){width:420px;height:420px;left:-80px;top:-60px;background:radial-gradient(circle at 35% 35%,#F7C6DD,#E59BBE 60%,transparent 72%);animation:etj-float1 22s ease-in-out infinite alternate}
.orbs span:nth-child(2){width:360px;height:360px;right:-60px;top:10%;background:radial-gradient(circle at 40% 40%,#C9E7E1,#8FCBC0 60%,transparent 72%);animation:etj-float2 26s ease-in-out infinite alternate}
.orbs span:nth-child(3){width:300px;height:300px;left:35%;bottom:-120px;background:radial-gradient(circle at 50% 40%,#FBE3B5,#F2C77B 60%,transparent 72%);animation:etj-float3 30s ease-in-out infinite alternate}
.orbs span:nth-child(4){width:180px;height:180px;left:55%;top:5%;background:radial-gradient(circle,#E8D4F3,#C8A6E0 60%,transparent 72%);opacity:.45;animation:etj-float2 18s ease-in-out infinite alternate-reverse}
@keyframes etj-float1{to{transform:translate(90px,60px) scale(1.12)}}
@keyframes etj-float2{to{transform:translate(-80px,70px) scale(.92)}}
@keyframes etj-float3{to{transform:translate(60px,-70px) scale(1.08)}}

/* entrada del hero */
.hero h1,.hero .lead,.hero .q-card{animation:etj-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation-delay:.08s}
.hero .q-card{animation-delay:.16s}
@keyframes etj-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* aparición al hacer scroll (solo si el JS está activo) */
.js-motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js-motion .reveal.in{opacity:1;transform:none}

/* tarjetas y fichas */
.card,.pick{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.pick:hover{transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(122,31,78,.35);border-color:#C9A3B8}
.card .thumb svg,.pick .thumb svg{transition:transform .35s ease}
.card:hover .thumb svg,.pick:hover .thumb svg{transform:scale(1.08) rotate(-3deg)}

/* botones */
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(122,31,78,.55)}
.btn:active{transform:translateY(0)}
.btn:not(.ghost)::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:not(.ghost):hover::after{left:120%}

/* opciones de tests y recomendador */
.opt{transition:transform .15s ease,border-color .15s ease,background .15s ease}
.opt:hover{transform:translateX(4px)}
.q-swap > *{animation:etj-rise .45s cubic-bezier(.2,.7,.2,1) both}

/* barra de lectura en guías */
#readbar{position:fixed;top:0;left:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--mulberry),#C2477F);z-index:50;pointer-events:none}

/* barra de valoración en fichas */
.scorebar{display:block;height:8px;margin:.5rem 0 0;border-radius:99px;background:var(--line);overflow:hidden;max-width:320px}
.scorebar i{display:block;height:100%;width:var(--w,0%);border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--mulberry));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.scorebar.in i{transform:scaleX(1)}

/* lista "lo más leído" */
.toplist li{transition:transform .2s ease}
.toplist li:hover{transform:translateX(4px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-motion .reveal{opacity:1;transform:none}
  .orbs{display:none}
  .scorebar i{transform:none}
}

/* temporada Black Friday 2026 (portada y fichas) */
section.bf-season{background:#2A0F1E;color:#fff;padding:1.5rem 0}
.bf-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:1.25rem;align-items:center}
.bf-inner > *{min-width:0}
section.bf-season h2{color:#fff;margin:.2rem 0 .4rem;font-size:1.35rem}
section.bf-season p{color:#F3E6EC;margin:0}
.bf-kicker{font-weight:700;letter-spacing:.02em;color:#FFD27A!important;text-transform:uppercase;font-size:.85rem}
.bf-count{display:inline-block;margin-left:.4rem;padding:.1rem .55rem;border-radius:99px;background:#FFD27A;color:#2A0F1E;font-size:.9rem;font-weight:800;vertical-align:middle}
.bf-links{display:flex;flex-wrap:wrap;gap:.5rem}
.bf-links a{display:inline-block;padding:.5rem .8rem;border-radius:99px;background:#fff;color:#7A1F4E;font-weight:700;text-decoration:none;transition:transform .15s ease,background .15s ease}
.bf-links a:hover{transform:translateY(-2px);background:#FFE9F2}
@media (max-width:760px){.bf-inner{grid-template-columns:1fr}}