/* Llamado a la accion animado de los juegos (pantalla de entrada). Estilo P8: fondo oscuro, lima del sitio, Manrope, etiquetas en pastilla.
   Prefijo cta-. Se aplica sobre el boton .rl-seat sin cambiar su funcion. */
.rl-seat.cta{justify-content:center;gap:0;padding:0 5%;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,rgba(9,12,9,.55) 0,rgba(6,8,6,.86) 100%);backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.cta-card{display:contents}
/* Los textos y el boton real se apilan en el mismo flujo */
.rl-seat.cta>b,.rl-seat.cta>span{position:relative;z-index:1}
.rl-seat.cta>b{margin-top:clamp(16px,3cqw,28px);min-height:clamp(42px,6.2cqw,56px);padding:0 clamp(20px,3.4cqw,32px);border-radius:40px;font:800 clamp(13px,2cqw,17px)/1 Manrope,'DM Sans',Arial,sans-serif;letter-spacing:.02em;gap:10px;overflow:hidden;box-shadow:0 0 0 0 rgba(209,246,90,.55)}
.rl-seat.cta>b::after{content:"\2192";display:inline-block;font-weight:800}
.rl-seat.cta>span{margin-top:10px;font:600 clamp(10px,1.45cqw,12px)/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.06em;color:#cfd3c8}
.rl-seat.cta:hover>b{filter:brightness(1.08)}
.rl-seat.cta:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

/* Fondo animado */
.cta-glow{position:absolute;left:50%;top:44%;width:70%;height:70%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(209,246,90,.22) 0,rgba(209,246,90,0) 66%);opacity:0}
.cta-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(209,246,90,.7),transparent);opacity:0}
.cta-corner{position:absolute;width:clamp(16px,3.2cqw,30px);height:clamp(16px,3.2cqw,30px);border:2px solid var(--accent);opacity:0}
.cta-corner.c1{left:4%;top:7%;border-right:0;border-bottom:0}
.cta-corner.c2{right:4%;top:7%;border-left:0;border-bottom:0}
.cta-corner.c3{left:4%;bottom:7%;border-right:0;border-top:0}
.cta-corner.c4{right:4%;bottom:7%;border-left:0;border-top:0}

/* Texto */
.cta-eyebrow{margin:0;display:flex;align-items:center;gap:8px;font:700 clamp(9px,1.5cqw,13px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.2em;color:#fff;opacity:0}
.cta-eyebrow em{width:.7em;height:.7em;border-radius:50%;background:var(--accent)}
.cta-eyebrow u{text-decoration:none;color:var(--accent);margin-left:-.18em;margin-right:.1em}
.cta-name{margin:clamp(8px,1.8cqw,16px) 0 0;display:flex;flex-wrap:wrap;justify-content:center;font:800 clamp(30px,9.4cqw,92px)/1 Manrope,'DM Sans',Arial,sans-serif;letter-spacing:-.02em;color:#fff;text-align:center;white-space:pre}
.cta-name i{display:inline-block;font-style:normal;opacity:0;transform:translateY(.55em)}
.cta-name strong{display:inline-flex;font-weight:800;color:var(--accent)}
.cta-line{margin:clamp(8px,1.6cqw,14px) 0 0;height:3px;width:min(46%,380px);border-radius:3px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.cta-chips{margin:clamp(10px,2cqw,18px) 0 0;display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center}
.cta-chips small{display:inline-flex;align-items:center;gap:7px;padding:clamp(5px,.9cqw,8px) clamp(9px,1.5cqw,13px);border:1px solid rgba(255,255,255,.2);border-radius:30px;background:rgba(255,255,255,.05);font:600 clamp(9px,1.35cqw,12px)/1 'DM Sans',Arial,sans-serif;color:#e8ebe2;opacity:0;transform:translateY(8px)}
.cta-chips small::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--accent)}

/* Movimiento: solo mientras la pantalla de entrada esta a la vista */
.rl-seat.cta-play .cta-glow{animation:cta-respira 3.6s ease-in-out infinite}
.rl-seat.cta-play .cta-scan{animation:cta-barre 4.2s linear 1s infinite}
.rl-seat.cta-play .cta-corner{animation:cta-esquina .7s cubic-bezier(.2,1.3,.4,1) .15s both}
.rl-seat.cta-play .cta-eyebrow{animation:cta-sube .55s ease-out .1s both}
.rl-seat.cta-play .cta-eyebrow em{animation:cta-punto 1.3s ease-in-out infinite}
.rl-seat.cta-play .cta-name i{animation:cta-letra .6s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.25s + var(--n) * 45ms)}
.rl-seat.cta-play .cta-line{animation:cta-traza .8s cubic-bezier(.3,.9,.3,1) .85s both}
.rl-seat.cta-play .cta-chips small{animation:cta-sube .5s ease-out both}
.rl-seat.cta-play .cta-chips small:nth-child(1){animation-delay:1.05s}
.rl-seat.cta-play .cta-chips small:nth-child(2){animation-delay:1.18s}
.rl-seat.cta-play .cta-chips small:nth-child(3){animation-delay:1.31s}
.rl-seat.cta-play>b{animation:cta-pulso 2s ease-out 1.5s infinite}
.rl-seat.cta-play>b::after{animation:cta-flecha 1.1s ease-in-out 1.5s infinite}
.rl-seat.cta-play>b::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:cta-brillo 3.2s ease-in-out 2s infinite}
@keyframes cta-respira{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes cta-barre{0%{top:0;opacity:0}8%{opacity:.8}92%{opacity:.8}100%{top:100%;opacity:0}}
@keyframes cta-esquina{from{opacity:0;transform:scale(1.8)}to{opacity:.9;transform:none}}
@keyframes cta-sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cta-punto{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}
@keyframes cta-letra{from{opacity:0;transform:translateY(.55em) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes cta-traza{to{transform:scaleX(1)}}
@keyframes cta-pulso{0%{box-shadow:0 0 0 0 rgba(209,246,90,.55)}70%,100%{box-shadow:0 0 0 16px rgba(209,246,90,0)}}
@keyframes cta-flecha{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes cta-brillo{0%,60%{left:-40%}100%{left:130%}}

/* Sin animacion: se muestra todo ya compuesto */
@media(prefers-reduced-motion:reduce){
  .cta-name i,.cta-eyebrow,.cta-chips small,.cta-corner{opacity:1;transform:none}
  .cta-line{transform:none}
  .cta-glow{opacity:.7}
  .rl-seat.cta-play *,.rl-seat.cta-play>b{animation:none!important}
}
/* Pantalla pequena: menos adornos y el boton mas cerca del titulo */
@media(max-width:640px){
  .rl-seat.cta>b{margin-top:14px}
  .cta-chips small:nth-child(3){display:none}
  .cta-scan{display:none}
}