/* Arte de portada: escenarios propios, medidas reservadas y movimiento de compositor. */
body[data-pagina=inicio]::before,body[data-pagina=inicio]::after{animation:none;will-change:auto}
body[data-pagina=inicio] button,body[data-pagina=inicio] .boton{transition-property:transform,opacity}
.portada .portada-arte{position:relative;display:block;flex-shrink:0;isolation:isolate;inline-size:100%;block-size:132px;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,#65dfd512,transparent 65%),linear-gradient(135deg,#382451,#221832)}
.portada-ilustracion{display:block;inline-size:100%;block-size:100%;object-fit:contain;transform-origin:50% 65%}
.portada-insignia{position:absolute;inset-inline-start:10px;inset-block-start:10px;display:grid;place-items:center;inline-size:28px;block-size:28px;border:1px solid #c4a0ff40;border-radius:10px;background:#21163dc9;font:16px/1 system-ui,sans-serif}
/* El escenario reemplaza las formas decorativas y el emoji gigante del catálogo. */
.portada .juego-arte::before,.portada .juego-arte::after{content:none}
.portada .juego-card{transition-property:transform,opacity}
.portada .juego-flecha{inset-block-end:10px;inset-inline-end:10px;inline-size:28px;block-size:28px;background:#31234d;border:1px solid #b9a3ff50}
.portada .juego-info{background:linear-gradient(155deg,#332448,#241b3b)}
/* La reserva ocupa exactamente lo mismo antes y después de recibir las APIs. */
.portada .solos-lista{min-block-size:190px;block-size:190px}
.portada .solos-card{flex-basis:228px;position:relative;block-size:174px;min-block-size:174px;padding:10px;gap:4px;margin:0;inline-size:auto;text-align:start;font-weight:400;overflow:hidden;background:linear-gradient(135deg,#3b2857,#241b3b);border-color:#7c649d;box-shadow:0 4px 0 #100c26}
.portada .solos-card .portada-arte{block-size:52px;background:none;overflow:visible}
.portada .solos-card .portada-ilustracion{inline-size:112px;margin-inline:auto}
.portada .solos-card .portada-insignia{inset-block-start:0;inset-inline-start:0;inline-size:24px;block-size:24px;font-size:14px}
.portada .solos-nombre{font-size:.96rem}
.portada .solos-estado{margin-block-start:auto}
/* Las tres recomendaciones conservan su alto al cambiar personas, grupo o tiempo. */
.portada .recomendacion{block-size:400px;padding:16px;gap:0;background:linear-gradient(155deg,#302247,#20172f);overflow:hidden}
.portada .recomendacion .portada-arte{inline-size:calc(100% + 32px);margin:-16px -16px 14px;block-size:116px;border-block-end:1px solid #b9a3ff26}
.portada .recomendacion-head{min-block-size:50px;flex-shrink:0}
.portada .recomendacion-head h3{font-size:1.15rem}
.portada .recomendacion-descripcion{margin-block:8px;font-size:.77rem}
.portada .recomendacion :is(button,a.boton){margin-block-start:auto;margin-block-end:0;flex-shrink:0}
.portada .portada-destacada{border-color:#b6f275;box-shadow:0 0 0 1px #b6f27528,0 6px 0 #100c26}
@media(prefers-reduced-motion:no-preference){
  .portada .portada-destacada .portada-ilustracion{animation:portada-flotar 5s ease-in-out infinite}
  .portada .solos-card{transition:transform .18s ease,opacity .18s ease}
}
@keyframes portada-flotar{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .portada .solos-card:hover{transform:translateY(-3px)}
  .portada .juego-card:hover{transform:translateY(-4px)}
}
@media(max-width:1000px) and (min-width:701px){.portada .recomendacion{block-size:460px}}
@media(max-width:700px){
  .portada .portada-arte{block-size:106px}
  .portada .recomendacion{block-size:370px}
  .portada .recomendacion .portada-arte{block-size:110px;margin-block-end:10px}
  .portada .recomendacion-head{min-block-size:44px}
  .portada .recomendacion-head h3{font-size:1.2rem}
}
/* La estrella del logo conserva su lugar también en RTL a 320 px. */
@media(max-width:700px){.portada .logo-estrella{inset-inline-end:-.2em;font-size:.35em}.portada .hero-texto{min-inline-size:0}}
@media(prefers-reduced-motion:reduce){
  body[data-pagina=inicio] *,body[data-pagina=inicio] *::before,body[data-pagina=inicio] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}