/* Pandora — portada. Un sistema solar vivo detrás: el sol asoma arriba a la derecha y los planetas del juego orbitan. */
body.home { min-height: 100vh; overflow-x: hidden;
  background:
    radial-gradient(1px 1px at 12% 18%, #ffffffb0 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 34%, #ffffff80 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 74%, #cfe3ff90 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, #ffffff70 50%, transparent 51%),
    radial-gradient(900px 700px at 90% 0%, #3a2610 0%, transparent 55%),
    radial-gradient(800px 600px at 10% 90%, #1d1638 0%, transparent 60%),
    var(--void);
  background-size: 240px 240px, 310px 310px, 270px 270px, 350px 350px, 100% 100%, 100% 100%, 100% 100%;
}
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sky .sun { position: absolute; right: -110px; top: -110px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6d0, #ffbe45 40%, #e0701a 72%);
  box-shadow: 0 0 80px #ffb547, 0 0 200px rgba(255,140,0,.5), 0 0 380px rgba(255,140,0,.25); }
/* Cada órbita es un círculo centrado en el sol (40px, 40px desde la esquina superior derecha). */
.sky .orbit { position: absolute; right: calc(40px - var(--R)); top: calc(40px - var(--R)); width: calc(var(--R) * 2); height: calc(var(--R) * 2);
  border-radius: 50%; border: 1px dashed rgba(239,210,140,.12); animation: spin var(--T) linear infinite; rotate: var(--A); }
.sky .orbit img { position: absolute; left: 50%; top: 0; width: var(--P); height: var(--P); margin: calc(var(--P) / -2) 0 0 calc(var(--P) / -2); animation: spin-rev var(--T) linear infinite; rotate: calc(var(--A) * -1); }
.sky .orbit img.moon { width: calc(var(--P) * .36); height: calc(var(--P) * .36); margin: calc(var(--P) * -.62) 0 0 calc(var(--P) * .2); }
.sky .o0 { --R: 300px; --P: 74px; --T: 160s; --A: 200deg; }
.sky .o1 { --R: 470px; --P: 104px; --T: 240s; --A: 230deg; }
.sky .o2 { --R: 650px; --P: 140px; --T: 320s; --A: 252deg; }
.sky .o3 { --R: 830px; --P: 120px; --T: 400s; --A: 215deg; }
.sky .o4 { --R: 1010px; --P: 96px; --T: 480s; --A: 262deg; }
.sky .o5 { --R: 1190px; --P: 128px; --T: 560s; --A: 238deg; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }

.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 9vh 24px 40px; display: grid; grid-template-columns: 1.15fr 420px; gap: 48px; align-items: start; }


.wrap-wide { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.intro h1 {    text-shadow: none; display: flex; align-items: center; gap: 18px; margin: 0; font-size: clamp(54px, 8vw, 104px); line-height: .95; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3cf 10%, #efd28c 45%, #b48433 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #2b1d07) drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.intro h1 img { width: clamp(48px, 6vw, 76px); height: auto; filter: none; }
.tagline { margin: 14px 0 0; font: 400 clamp(22px, 2.6vw, 30px)/1.25 var(--display); color: var(--parchment); }
.pitch { max-width: 52ch; font-size: 20px; line-height: 1.55; color: #e6ecf7; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.pitch p { margin: 0 0 12px; }


.gate { padding: 24px 26px 26px; border: 2px solid var(--gilt); border-radius: 12px; background: linear-gradient(180deg, rgba(23,42,77,.96), rgba(13,24,46,.97));
  box-shadow: 0 0 0 3px #2b1f08, 0 0 0 4px var(--gilt-lo), 0 30px 80px rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.gate h2 { margin: 0 0 6px; font-size: 26px; }
.gate .btn.big { width: 100%; min-height: 48px;  margin-top: 4px; }
.gate .btn + .btn { margin-top: 10px; width: 100%; }
.switch { display: grid; grid-template-columns: 1fr 1fr; margin: -6px -8px 18px; border-bottom: 1px solid var(--gilt-lo); }
.switch button { padding: 10px 0 12px; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--muted); font: 400 20px/1 var(--display); cursor: pointer; }
.switch button[aria-selected="true"] { color: var(--gilt-hi); border-bottom-color: var(--gilt); }
.linkish { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--gilt-hi); font: 500 15px/1 var(--ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.form-msg { min-height: 0; margin: 0 0 10px; color: #ffb4a6; }
.form-msg.ok { color: #9fe0b3; }
.form-msg:empty { display: none; }
.field .err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.worlds { margin-top: 30px; }
.worlds h2 { font-size: 30px; margin: 0 0 14px; }
.world-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.world { padding: 16px 18px; border: 1px solid #2a3f66; border-radius: 8px; background: rgba(13,24,46,.85); }
.world h3 { margin: 0 0 6px; font-size: 22px; }
.world p { margin: 4px 0 0; }
.foot { display: flex; gap: 18px; justify-content: space-between; color: var(--muted); padding-top: 40px; padding-bottom: 30px; }
.foot a { color: var(--muted); }

@media (max-width: 900px) {
  .wrap { grid-template-columns: 1fr; gap: 28px; padding-top: 6vh; padding:9vh 8px 40px;}
  .sky .sun { width: 200px; height: 200px; right: -80px; top: -80px; }
  .sky .o0 { --R: 200px; --P: 54px; } .sky .o1 { --R: 320px; --P: 70px; } .sky .o2 { --R: 440px; --P: 90px; }
  .sky .o3 { --R: 560px; --P: 78px; } .sky .o4 { --R: 680px; --P: 64px; } .sky .o5 { --R: 800px; --P: 80px; }
  .pitch { font-size: 16px; }
  .wrap-wide {padding: 0 5px;}
  .home-modal {max-width: min(520px, calc(100vw - 0px));}
}
@media (prefers-reduced-motion: reduce) { .sky .orbit, .sky .orbit img { animation: none; } }
.lang-pick select { background: rgba(6,10,23,.7); color: var(--ink); border: 1px solid var(--gilt-lo); border-radius: 6px; padding: 4px 8px; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 1.10: presentación con la imagen del juego al lado */
.intro-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 300px); gap: 18px; align-items: center; margin-top: 22px; }
/* La imagen tiene fondo oscuro: se funde con el cielo (bordes suaves y el negro se vuelve transparente). */
.intro-body .hero { width: 100%;  object-fit: contain; mix-blend-mode: lighten;}
@media (max-width: 900px) { .intro-body { grid-template-columns: minmax(0, 1fr) 160px; } }
@media (max-width: 520px) { .intro-body { grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; } .intro-body .hero { max-height: 230px; } .pitch { font-size: 15px; } }

/* Entrar con Google y antibots */
.or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted); font-size: 15px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--gilt-lo); }
.btn-google { width: 100%; min-height: 48px; max-height: none; background: #fff; color: #1f1f1f; border-color: #dadce0; text-shadow: none; font-weight: 600; gap: 12px; }
.btn-google:hover { background: #f4f6fb; }
.gate .btn-google.big + .muted { margin-top: 8px; }
.captcha span[data-cap-q] { font-size: 17px; color: var(--gilt-hi); }
.captcha input[name=captcha] { max-width: 140px; font-size: 20px; text-align: center; letter-spacing: .05em; }
.small { font-size: 14px; } .center { text-align: center; }

/* Tarjetas de descarga */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-top: 10px; }
.dl-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 12px; text-decoration: none; color: var(--ink);
  border: 2px solid var(--gilt); background: linear-gradient(135deg, rgba(43,31,8,.92), rgba(13,24,46,.95) 55%); box-shadow: 0 0 0 3px #2b1f08, 0 14px 40px rgba(0,0,0,.5); transition: transform .15s; }
.dl-card:hover { transform: translateY(-2px); }
.dl-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #2a1a00; background: radial-gradient(circle at 35% 30%, #fff3cf, #e0b04a 60%, #8a5a12); }
.dl-txt { display: grid; gap: 2px; }
.dl-txt b { font: 400 22px/1.15 var(--display); color: var(--parchment); }
.dl-txt small { color: #c9d3e6; font-size: 15px; line-height: 1.3; }
.dl-arrow { font-size: 26px; color: var(--gilt-hi); }

/* Tarjetas de universos (con foto) */
.world { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; border-color: var(--gilt-lo); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.world-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 1px solid var(--gilt-lo); }
.world-body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.world-body h3 { margin: 0; font-size: 24px; }
.world-desc { margin: 0; color: #dfe6f3; font-size: 16px; line-height: 1.45; }
.world-facts { display: grid; gap: 4px; margin: 0; }
.world-facts div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px; border-radius: 6px; background: rgba(6,10,23,.7); font-size: 16px; }
.world-facts dt { color: #c9d3e6; } .world-facts dd { margin: 0; font-weight: 700; color: var(--gilt-hi); text-align: right; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #2a210c; color: #f6e2b0; font: 600 13px/1.4 var(--ui); vertical-align: middle; }

/* Ventanas (contacto e instalar) */
.foot-contact { margin: 0; font-size: 17px; }
.home-modal { padding: 0; border: 0; background: none; color: var(--ink); max-width: min(520px, calc(100vw - 24px)); width: 100%; }
.home-modal::backdrop { background: rgba(3,6,14,.75); backdrop-filter: blur(2px); }
.home-modal-box { position: relative; padding: 24px 26px 26px; border: 2px solid var(--gilt); border-radius: 12px; background: linear-gradient(180deg, rgba(23,42,77,.98), rgba(13,24,46,.99));
  box-shadow: 0 0 0 3px #2b1f08, 0 30px 80px rgba(0,0,0,.6); }
.home-modal-box h2 { margin: 0 0 6px; font-size: 28px; }
.home-modal-box .btn.big { width: 100%; min-height: 48px; }
.home-modal-x { position: absolute; right: 10px; top: 8px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gilt-lo); background: #0a1326; color: var(--gilt-hi); font-size: 24px; line-height: 1; cursor: pointer; }

.world-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.world-facts dt { white-space: nowrap; }