/* Landing de descargas · mismos colores y letras que el juego */
:root{
  --fondo:#0E2419; --fondo-2:#2B8A55; --lima:#C9E265; --lima-2:#8FB019; --sobre-lima:#14301F;
  --texto:#FFFFFF; --texto-2:#C6D0BA; --dorado:#F3D66B;
  --titulos:'Lilita One',system-ui,sans-serif; --cuerpo:'Nunito',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--cuerpo);font-weight:800}
.pant{min-height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% 0,#1F6B42 0,transparent 70%),var(--fondo);
  padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}

.cab{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0}
.cab__icono{width:44px;height:44px;border-radius:11px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cab__nombre{flex:1;min-width:0;font-family:var(--titulos);font-size:18px;line-height:1.1}
.cab__idioma{flex:none;height:36px;padding:0 8px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:var(--texto);font:800 13px var(--cuerpo)}
.cab__idioma option{color:#14301F}

.titular{padding:14px 16px 12px}
h1{margin:0;font-family:var(--titulos);font-weight:400;font-size:clamp(27px,7.8vw,44px);line-height:1.08;text-wrap:balance}
h1 span{color:var(--lima)}
.datos{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;color:var(--texto-2)}
.datos__nota{color:var(--dorado);font-weight:900}
.datos__sep{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}

.tira{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 6px;scroll-padding:0 16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tira::-webkit-scrollbar{display:none}
.tira img{flex:none;height:min(54dvh,480px);width:auto;aspect-ratio:560/1212;border-radius:18px;scroll-snap-align:start;
  background:#1B4A32;box-shadow:0 8px 22px rgba(0,0,0,.4)}

.chips{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0;padding:0 16px}
.chips li{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 10px;border-radius:14px;
  background:rgba(255,255,255,.08);font-size:13px;line-height:1.2}
.chips span{font-size:20px;flex:none}
.chips__nuevo{flex:none;margin-left:auto;padding:2px 6px;border-radius:7px;background:var(--lima);color:var(--sobre-lima);font-size:10px;font-weight:900;text-transform:uppercase}

.barra{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(14,36,25,0),var(--fondo) 30%)}
.boton{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;height:56px;border-radius:16px;
  background:var(--lima);color:var(--sobre-lima);text-decoration:none;font-family:var(--titulos);font-size:17px;
  box-shadow:0 4px 0 var(--lima-2);transition:transform .1s,box-shadow .1s}
.boton:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lima-2)}
.boton:focus-visible,.cab__idioma:focus-visible,.pie a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.boton__largo{display:none}
.solo-ios .boton--play,.solo-android .boton--apple{display:none}
.solo-ios .boton,.solo-android .boton{font-size:21px}
.solo-ios .boton__largo,.solo-android .boton__largo{display:inline}
.solo-ios .boton__corto,.solo-android .boton__corto{display:none}

.pie{display:flex;justify-content:center;gap:18px;padding:16px 16px calc(92px + env(safe-area-inset-bottom,0px));
  font-size:12px;color:var(--texto-2);background:var(--fondo)}
.pie a{color:inherit}

@media (min-width:900px){
  .pant{display:grid;grid-template-columns:minmax(380px,460px) minmax(0,1fr);column-gap:40px;
    grid-template-rows:auto auto auto 1fr;grid-template-areas:"cab cab" "titular tira" "chips tira" "barra tira";
    max-width:1280px;margin:0 auto;padding:0 32px 40px;min-height:0;background:none}
  body{background:radial-gradient(90% 70% at 30% 0,#1F6B42 0,transparent 70%),var(--fondo)}
  .cab{grid-area:cab;padding:24px 0}.titular{grid-area:titular;padding:32px 0 0}.tira{grid-area:tira;padding:6px 0 10px}
  .tira img{height:600px}.chips{grid-area:chips;padding:0;margin-top:24px;align-self:start}
  .barra{grid-area:barra;position:static;padding:24px 0 0;background:none;align-self:start}
  .pie{padding-bottom:24px;background:none}
}
@media (prefers-reduced-motion:reduce){.boton{transition:none}}