/* Gachapón online: usa los colores y botones de la tienda (styles.css). */
.gacha { padding: 22px 0 70px; }
.gacha-volver { margin-left: auto; text-decoration: none; }
.gacha-portada { padding: 26px 26px 24px; margin-bottom: 18px; border-radius: 22px; background: var(--marca-azul); color: #d9d6f5; }
.gacha-portada__etiqueta { margin: 0 0 4px; color: var(--marca-coral); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.gacha-portada h1 { margin: 0 0 8px; font-family: var(--titulos); font-variation-settings: "SOFT" 100; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; color: var(--marca-crema); }
.gacha-portada p { margin: 0; max-width: 620px; font-size: 16px; }
.gacha-portada strong { color: var(--marca-crema); }
.gacha-cargando, .gacha-vacio { color: var(--texto-suave); text-align: center; padding: 30px 0; }
.gacha-cargando[hidden], .gacha-apagado[hidden], .gacha-cuenta[hidden], .gacha-maquinas[hidden], .gacha-cajita[hidden], .gacha-ayuda[hidden] { display: none; }

.gacha-apagado { max-width: 460px; margin: 30px auto; text-align: center; }
.gacha-apagado__icono { margin: 0 auto; width: 90px; height: 90px; }
.gacha-apagado__icono .dibujo-gacha { width: 100%; height: 100%; }
.gacha-maquina__foto .dibujo-gacha { width: 46%; height: auto; }
.gacha-maquina__accion .btn .icono-gacha { width: 22px; height: 22px; }
.gacha-apagado h2 { margin: 6px 0; font-family: var(--titulos); font-variation-settings: "SOFT" 100; }
.gacha-apagado p { color: var(--texto-suave); }
.gacha-apagado .btn { width: auto; padding: 0 24px; }

/* Tarjetas de la cuenta */
.gacha-tarjeta { margin-bottom: 16px; padding: 18px 20px; border: 1px solid var(--borde); border-radius: 18px; background: var(--superficie); }
.gacha-tarjeta h2 { margin: 0 0 4px; font-family: var(--titulos); font-variation-settings: "SOFT" 100; font-size: 22px; }
.gacha-tarjeta p { margin: 0 0 12px; color: var(--texto-suave); }
.gacha-tarjeta label { display: block; margin-bottom: 6px; font-weight: 800; }
.gacha-fila { display: flex; gap: 8px; margin-bottom: 8px; }
.gacha-fila .btn { width: auto; margin: 0; padding: 0 18px; flex-shrink: 0; }
.gacha-campo { width: 100%; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); font: inherit; }
.gacha-campo:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.gacha-campo--codigo { max-width: 180px; font-size: 22px; font-weight: 800; letter-spacing: 0.3em; text-align: center; }
.gacha-saldo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.gacha-saldo__texto { display: flex; flex-direction: column; }
.gacha-saldo__texto span { color: var(--texto-suave); }
.gacha-saldo__texto strong { font-family: var(--titulos); font-size: 34px; line-height: 1.1; color: var(--acento); }
.gacha-saldo__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gacha-saldo__botones .btn { width: auto; height: 44px; padding: 0 18px; font-size: 15px; }
.gacha-perfil__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.gacha-perfil__campos label { display: flex; flex-direction: column; gap: 6px; }
.gacha-perfil .btn { width: auto; padding: 0 24px; margin: 0; }

/* Máquinas */
.gacha-maquinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-bottom: 26px; }
.gacha-maquina { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borde); border-radius: 20px; background: var(--superficie); box-shadow: var(--sombra); scroll-margin-top: 90px; }
.gacha-maquina--agotada { opacity: 0.7; }
.gacha-maquina__foto { aspect-ratio: 4 / 3; background: var(--superficie-2); display: grid; place-items: center; overflow: hidden; }
.gacha-maquina__foto img { width: 100%; height: 100%; object-fit: cover; }
.gacha-maquina__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.gacha-maquina h2 { margin: 0; font-family: var(--titulos); font-variation-settings: "SOFT" 100; font-size: 22px; line-height: 1.2; }
.gacha-maquina__desc { margin: 0; color: var(--texto-suave); font-size: 15px; }
.gacha-maquina__precio { margin: 0; font-size: 15px; }
.gacha-maquina__precio strong { font-size: 19px; color: var(--coral-texto); }
.gacha-maquina__accion { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.gacha-maquina__accion .btn { margin: 4px 0 0; height: 48px; font-size: 16px; text-decoration: none; }
.gacha-recargar { align-self: center; color: var(--coral-texto); font-size: 14px; font-weight: 700; }
.gacha-sin-foto { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--titulos); font-size: 40px; color: var(--acento); background: var(--superficie-2); }
/* Máquina destacada al llegar desde el inicio (/gachapon#maquina-…) */
.gacha-maquina--resaltada { animation: resaltar 2s ease-out; }
@keyframes resaltar { 0%, 45% { box-shadow: 0 0 0 4px var(--marca-coral), var(--sombra); } 100% { box-shadow: var(--sombra); } }

.gacha-coleccion summary { cursor: pointer; color: var(--acento); font-weight: 800; font-size: 14px; }
.gacha-coleccion ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.gacha-coleccion li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; }
.gacha-figura__foto { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--superficie-2); border: 2px solid var(--borde); }
.gacha-figura__foto img { width: 100%; height: 100%; object-fit: cover; }
.gacha-figura__foto .gacha-sin-foto { font-size: 24px; }
.gacha-figura__nombre { font-weight: 700; line-height: 1.2; }
.gacha-figura__quedan { color: var(--texto-suave); font-size: 12px; }
.gacha-figura--agotada { opacity: 0.45; }

/* Mi cajita */
.gacha-cajita { margin-bottom: 26px; padding: 18px 20px 20px; border: 1px solid var(--borde); border-radius: 20px; background: var(--superficie); scroll-margin-top: 90px; }
.gacha-cajita__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gacha-cajita h2 { margin: 0; font-family: var(--titulos); font-variation-settings: "SOFT" 100; font-size: 24px; }
.gacha-cajita h3 { margin: 18px 0 8px; font-size: 16px; }
.gacha-cajita__cabecera .btn { width: auto; margin: 0; padding: 0 20px; }
.gacha-cajita__ayuda { margin: 6px 0 12px; color: var(--texto-suave); font-size: 14px; }
.gacha-cajita__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.gacha-capsula { display: grid; grid-template-columns: auto 56px 1fr; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); cursor: pointer; }
.gacha-capsula:has(input:checked) { border-color: var(--acento); }
.gacha-capsula input { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
.gacha-capsula__foto { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--superficie-2); }
.gacha-capsula__foto img { width: 100%; height: 100%; object-fit: cover; }
.gacha-capsula__foto .gacha-sin-foto { font-size: 22px; }
.gacha-capsula__texto { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--texto-suave); }
.gacha-capsula__texto strong { color: var(--texto); font-size: 15px; }
.gacha-capsula__plazo { color: var(--ok); font-weight: 700; }
.gacha-capsula--vencida .gacha-capsula__plazo { color: var(--pocas); }
.gacha-entregas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.gacha-entregas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.gacha-historial { margin-top: 16px; font-size: 14px; }
.gacha-historial summary { cursor: pointer; color: var(--acento); font-weight: 800; }
.gacha-historial ul { list-style: none; margin: 8px 0 0; padding: 0; }
.gacha-historial li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); color: var(--texto-suave); }
.gacha-historial strong { color: var(--texto); white-space: nowrap; }
.gacha-historial .gacha-mas { color: var(--ok); }

.gacha-ayuda { padding: 18px 20px; border-radius: 18px; background: var(--superficie-2); }
.gacha-ayuda h2 { margin: 0 0 8px; font-family: var(--titulos); font-variation-settings: "SOFT" 100; font-size: 20px; }
.gacha-ayuda ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.gacha-ayuda__nota { margin: 12px 0 0; color: var(--texto-suave); font-size: 14px; }

/* Pedir mis cápsulas */
.gacha-opciones { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; }
.gacha-opcion { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; cursor: pointer; font-weight: 700; }
.gacha-opcion:has(input:checked) { border-color: var(--acento); background: var(--superficie-2); }
.gacha-opcion input { accent-color: var(--acento); }
.gacha-opcion span { flex: 1; }
.gacha-envio { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.gacha-envio[hidden] { display: none; }

/* ---------- La máquina que gira ---------- */
/* El diálogo es un pequeño escenario azul con una luz al centro. */
.gacha-giro {
  position: relative; width: 380px; padding: 24px 22px 22px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 75% at 50% 32%, #5d52b8 0%, var(--marca-azul) 55%, #1d1a52 100%);
  color: var(--marca-crema);
}
.gacha-giro__texto { margin: 12px 0 0; font-weight: 800; color: #d9d6f5; letter-spacing: 0.02em; }
.gacha-giro__texto[hidden] { display: none; }
.escenario { position: relative; width: 240px; height: 318px; margin: 0 auto; }
.escenario::before { /* sombra bajo la máquina */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 230px; height: 34px; margin-left: -115px;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.35), transparent);
}
.destello--g1 { width: 20px; height: 20px; top: 26px; left: -8px; }
.destello--g2 { width: 14px; height: 14px; top: 8px; right: 0; animation-delay: 0.7s; }
.destello--g3 { width: 16px; height: 16px; top: 150px; right: -14px; animation-delay: 1.4s; }
/* Al aparecer, la máquina sube con un rebote. */
.entra { animation: entrar 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes entrar {
  0% { opacity: 0; transform: translateY(40px) scale(0.6); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.maquina-anim { position: absolute; left: 10px; top: 0; width: 220px; height: 304px; transform-origin: 50% 100%; }
.maquina-anim__tapa {
  position: absolute; left: 72px; top: 10px; z-index: 2; width: 76px; height: 26px; border-radius: 14px 14px 4px 4px;
  display: grid; place-items: center; background: linear-gradient(180deg, #4a43a3, var(--marca-azul));
}
.maquina-anim__tapa::before {
  content: ""; position: absolute; left: 50%; top: -17px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd0c4, var(--marca-coral)); border: 3px solid var(--marca-azul);
}
.maquina-anim__tapa span { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; color: var(--marca-crema); }
.maquina-anim__cupula {
  position: absolute; left: 20px; top: 22px; z-index: 1; width: 180px; height: 180px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 40% 30%, rgb(255 255 255 / 0.95), rgb(236 240 255 / 0.75) 45%, rgb(190 200 255 / 0.6));
  border: 6px solid var(--marca-azul);
  box-shadow: inset 0 -12px 22px rgb(49 45 119 / 0.25), inset 0 6px 14px rgb(255 255 255 / 0.8), 0 8px 24px rgb(0 0 0 / 0.25);
}
.maquina-anim__brillo {
  position: absolute; left: 22px; top: 16px; z-index: 3; width: 34px; height: 74px; border-radius: 50%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0)); transform: rotate(28deg);
}
.bola {
  position: absolute; width: 42px; height: 42px; border-radius: 50%; transform: rotate(var(--g));
  background: linear-gradient(180deg, var(--c) 50%, #fbf4e4 50%);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.1), inset 0 3px 0 rgb(255 255 255 / 0.35), 0 1px 2px rgb(0 0 0 / 0.15);
}
.bola::after { content: ""; position: absolute; left: 9px; top: 6px; width: 10px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.7); }
.bola--1 { --c: #f2917c; left: 8px;   top: 114px; --g: -10deg; --dx: 14px;  --dy: 46px; --t: 0.55s; }
.bola--2 { --c: #7cc6f2; left: 48px;  top: 126px; --g: 20deg;  --dx: -12px; --dy: 58px; --t: 0.62s; }
.bola--3 { --c: #f2d27c; left: 90px;  top: 124px; --g: -25deg; --dx: 16px;  --dy: 54px; --t: 0.5s; }
.bola--4 { --c: #9be0a8; left: 126px; top: 106px; --g: 35deg;  --dx: -18px; --dy: 40px; --t: 0.58s; }
.bola--5 { --c: #c59cf2; left: 26px;  top: 76px;  --g: 15deg;  --dx: 20px;  --dy: 34px; --t: 0.66s; }
.bola--6 { --c: #f27cb4; left: 68px;  top: 86px;  --g: -30deg; --dx: -16px; --dy: 38px; --t: 0.52s; }
.bola--7 { --c: #f2917c; left: 108px; top: 70px;  --g: 40deg;  --dx: 12px;  --dy: 30px; --t: 0.6s; }
.bola--8 { --c: #7cc6f2; left: 46px;  top: 40px;  --g: -15deg; --dx: 18px;  --dy: 22px; --t: 0.57s; }
.bola--9 { --c: #9be0a8; left: 88px;  top: 34px;  --g: 25deg;  --dx: -14px; --dy: 20px; --t: 0.64s; }

.maquina-anim__cuerpo {
  position: absolute; left: 16px; top: 188px; width: 188px; height: 102px; border-radius: 18px 18px 14px 14px;
  background: linear-gradient(180deg, #f8b3a2 0%, var(--marca-coral) 38%, #e07862 100%);
  border: 6px solid var(--marca-azul); box-shadow: inset 0 -8px 0 rgb(0 0 0 / 0.08), 0 8px 18px rgb(0 0 0 / 0.25);
}
.maquina-anim__perilla {
  position: absolute; left: 14px; top: 16px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--marca-crema) 55%, #e6dcc4);
  border: 4px solid var(--marca-azul); box-shadow: 0 3px 0 rgb(0 0 0 / 0.15);
}
.maquina-anim__manija {
  position: absolute; left: 50%; top: 4px; bottom: 4px; width: 10px; margin-left: -5px; border-radius: 5px;
  background: linear-gradient(90deg, #4a43a3, var(--marca-azul));
}
.maquina-anim__manija::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--marca-coral); }
.maquina-anim__ranura { position: absolute; left: 80px; top: 20px; width: 12px; height: 30px; border-radius: 6px; background: #241f5e; box-shadow: 0 0 0 3px var(--marca-crema); }
.maquina-anim__salida {
  position: absolute; right: 12px; top: 18px; width: 62px; height: 50px; border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #17144a, #2a2766); box-shadow: inset 0 6px 10px rgb(0 0 0 / 0.5), 0 0 0 3px var(--marca-crema);
}
.maquina-anim__luces { position: absolute; left: 12px; right: 12px; bottom: 6px; display: flex; justify-content: space-between; }
.maquina-anim__luces i { width: 9px; height: 9px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 6px #ffe680; opacity: 0.55; }
.maquina-anim__base {
  position: absolute; left: 28px; top: 290px; width: 164px; height: 14px; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, var(--marca-azul), #1f1c55);
}

/* La cápsula sale por la boca de abajo (su color cambia en cada giro: --cap). */
.capsula { position: absolute; left: 140px; top: 224px; z-index: 4; width: 38px; height: 38px; opacity: 0; }
.capsula__arriba, .capsula__abajo { position: absolute; left: 0; width: 38px; height: 19px; }
.capsula__arriba {
  top: 0; border-radius: 19px 19px 0 0; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cap, #f2917c) 65%, #fff), var(--cap, #f2917c));
}
.capsula__arriba::after { content: ""; position: absolute; left: 8px; top: 4px; width: 9px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 0.75); }
.capsula__abajo { bottom: 0; border-radius: 0 0 19px 19px; background: #fbf4e4; border: 2px solid var(--cap, #f2917c); border-top: 0; }
.maquina-anim__flash {
  position: absolute; left: 110px; top: 109px; z-index: 5; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgb(255 243 196 / 0.9) 35%, transparent 70%); opacity: 0; pointer-events: none;
}

/* Girando: tiembla la máquina, gira la perilla, se revuelven las bolas y titilan las luces. */
.girando { animation: temblar 0.32s ease-in-out infinite; }
.girando .maquina-anim__perilla { animation: perilla 0.9s cubic-bezier(0.5, 0, 0.3, 1) 2; }
.girando .bola { animation: revolver var(--t) ease-in-out infinite; }
.girando .maquina-anim__luces i, .cae .maquina-anim__luces i { animation: titilar 0.5s steps(1) infinite; }
.girando .maquina-anim__luces i:nth-child(2n), .cae .maquina-anim__luces i:nth-child(2n) { animation-delay: 0.25s; }
/* Cae: la cápsula rebota en la boca y sube al frente; abre: se parte con un destello. */
.cae .capsula { animation: caer 1.2s cubic-bezier(0.3, 0, 0.3, 1) forwards; }
.abre .capsula { opacity: 1; transform: translate(-49px, -134px) scale(2.3) rotate(360deg); }
.abre .capsula__arriba { animation: abrir-arriba 0.55s ease-out forwards; }
.abre .capsula__abajo { animation: abrir-abajo 0.55s ease-out forwards; }
.abre .maquina-anim__flash { animation: flash 0.7s ease-out forwards; }
@keyframes temblar { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.6deg) translateX(-2px); } 75% { transform: rotate(1.6deg) translateX(2px); } }
@keyframes perilla { to { transform: rotate(360deg); } }
@keyframes revolver {
  0%   { transform: translate(0, 0) rotate(var(--g)); }
  30%  { transform: translate(var(--dx), calc(var(--dy) * -1)) rotate(calc(var(--g) + 140deg)); }
  60%  { transform: translate(calc(var(--dx) * -0.7), calc(var(--dy) * -0.6)) rotate(calc(var(--g) + 250deg)); }
  100% { transform: translate(0, 0) rotate(calc(var(--g) + 360deg)); }
}
@keyframes titilar { 0% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes caer {
  0%   { opacity: 0; transform: translate(0, -14px) scale(0.6); }
  12%  { opacity: 1; transform: translate(0, 0) scale(0.7); }
  28%  { transform: translate(0, 14px) scale(0.75); }
  36%  { transform: translate(0, 5px) scale(0.78); }
  44%  { transform: translate(0, 14px) scale(0.8); }
  100% { opacity: 1; transform: translate(-49px, -134px) scale(2.3) rotate(360deg); }
}
@keyframes abrir-arriba { to { transform: translate(-26px, -30px) rotate(-40deg); opacity: 0; } }
@keyframes abrir-abajo { to { transform: translate(26px, 30px) rotate(40deg); opacity: 0; } }
@keyframes flash { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(14); } }

/* Confeti al abrir la cápsula (las piezas las crea gachapon.js) */
.estallido { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.estallido i {
  position: absolute; left: 50%; top: 40%; width: 9px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0;
  animation: confeti 1.5s cubic-bezier(0.2, 0.7, 0.4, 1) var(--d) forwards;
}
.estallido i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
@keyframes confeti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
}

/* El premio */
.premio[hidden] { display: none; }
.premio { position: relative; animation: premio 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.premio__marco { position: relative; width: 170px; height: 170px; margin: 6px auto 12px; display: grid; place-items: center; }
.premio__marco::before { /* rayos de luz que giran detrás de la figura */
  content: ""; position: absolute; inset: -44px; border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 243 196 / 0.3) 0deg 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
  animation: rayos 10s linear infinite;
}
.premio__foto {
  position: relative; width: 156px; height: 156px; border-radius: 50%; overflow: hidden;
  border: 5px solid var(--marca-coral); background: var(--marca-crema);
  box-shadow: 0 0 0 8px rgb(242 145 124 / 0.3), 0 10px 30px rgb(0 0 0 / 0.35);
}
.premio__foto img { width: 100%; height: 100%; object-fit: cover; }
.premio__etiqueta { margin: 0; color: var(--marca-coral); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; }
.premio__nombre { margin: 2px 0; font-family: var(--titulos); font-variation-settings: "SOFT" 100; font-size: 28px; line-height: 1.15; color: var(--marca-crema); }
.premio__maquina { margin: 0 0 16px; color: #c9c5f0; font-size: 14px; }
.premio__botones { display: grid; gap: 8px; }
.premio__botones .btn { width: 100%; margin: 0; }
.gacha-giro .btn--primario { height: 48px; background: var(--marca-coral); color: #2a1c3f; font-size: 16px; }
.gacha-giro .btn--suave { background: transparent; color: var(--marca-crema); border-color: rgb(251 244 228 / 0.35); }
@keyframes premio { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes rayos { to { transform: rotate(360deg); } }
/* Con el giro terminado se ve el premio, no la máquina. */
.gacha-giro:has(.premio:not([hidden])) .escenario { display: none; }

@media (prefers-reduced-motion: reduce) {
  .entra, .girando, .girando .maquina-anim__perilla, .girando .bola, .maquina-anim__luces i, .cae .capsula,
  .abre .capsula__arriba, .abre .capsula__abajo, .abre .maquina-anim__flash, .estallido i, .premio,
  .premio__marco::before, .gacha-maquina--resaltada { animation: none !important; }
}

@media (max-width: 640px) {
  .gacha-volver { display: none; }
  .gacha-portada { padding: 20px 18px; }
  .gacha-fila { flex-direction: column; }
  .gacha-fila .btn { width: 100%; }
  .gacha-campo--codigo { max-width: none; }
  .gacha-perfil__campos { grid-template-columns: 1fr; }
  .gacha-saldo__botones { width: 100%; }
  .gacha-saldo__botones .btn { flex: 1 1 100%; }
  .gacha-giro { width: 100%; }
}