:root{
  --bg:#07111f;--ink:#f4f7fb;--muted:#c3d0df;--cyan:#6fd4ff;--mag:#ff4fa3;--amber:#ffb547;
  --line:rgba(111,212,255,.32);--panel:rgba(6,14,28,.72);
  --display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --body:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --max:1120px;--ease:cubic-bezier(.16,.84,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 1.02rem/1.65 var(--body);background:var(--bg);overflow-x:hidden}
body.is-closed{overflow:hidden}
html.skip-intro body.is-closed{overflow:auto}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url(fondo.jpg) center top/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(5,10,22,.5),rgba(5,10,22,.68))}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--max),calc(100% - 2.4rem));margin-inline:auto}
section{padding:4.4rem 0;scroll-margin-top:4.2rem}

.xp{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:linear-gradient(90deg,var(--cyan),var(--mag),var(--amber));transform:scaleX(var(--p,0));transform-origin:left;box-shadow:0 0 10px var(--mag)}

h2{margin:0 0 1.2rem;padding-left:.9rem;border-left:5px solid var(--mag);font:400 clamp(2rem,4.6vw,3.2rem)/1.02 var(--display);letter-spacing:.04em;text-shadow:2px 0 rgba(255,79,163,.55),-2px 0 rgba(111,212,255,.5)}
h3{margin:0 0 .7rem;font:400 clamp(1.7rem,3vw,2.3rem)/1.05 var(--display);letter-spacing:.05em;color:var(--cyan)}
p{margin:0}

/* reveal: barrido tipo escaneo */
.reveal{opacity:0;clip-path:inset(0 99% 0 0);transition:clip-path 800ms var(--ease),opacity 260ms ease}
.reveal.in{opacity:1;clip-path:inset(0 0 0 0)}

/* intro de arranque */
.intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#03070f;transition:opacity 420ms ease}
.intro::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(111,212,255,.07) 0 1px,transparent 1px 4px);animation:roll 1.2s linear infinite}
.intro::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75))}
.intro.is-leaving{opacity:0}
.intro.is-done{display:none}
.intro-inner{position:relative;z-index:1;width:min(520px,78vw);text-align:center}
.intro-logo{display:block;width:100%;animation:boot 2.4s steps(1,end) both}
.load{height:8px;margin-top:1.6rem;border:1px solid var(--cyan);padding:1px}
.load i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--mag));transform-origin:left;animation:fill 2.3s var(--ease) both}
.skip{position:absolute;z-index:2;top:1rem;right:1rem;min-height:44px;padding:0 1rem;background:transparent;color:var(--muted);border:1px solid var(--line);font:500 .95rem var(--body);cursor:pointer}
.skip:hover{color:var(--ink);border-color:var(--cyan)}
@keyframes roll{to{background-position:0 8px}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes boot{
  0%{opacity:0}8%{opacity:1;transform:translateX(-6px);filter:drop-shadow(6px 0 var(--mag)) drop-shadow(-6px 0 var(--cyan))}
  14%{opacity:.2;transform:none;filter:none}20%{opacity:1;transform:translateX(5px);filter:drop-shadow(-5px 0 var(--mag))}
  28%{transform:none;filter:none}100%{opacity:1;transform:none;filter:none}
}

/* barra superior */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:60px;padding:.3rem .9rem .3rem 1rem;background:rgba(5,10,22,.7);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.wordmark{flex:none;color:var(--cyan);font:400 2.15rem/1 var(--display);letter-spacing:.08em;text-decoration:none;text-shadow:0 0 14px rgba(111,212,255,.55)}
.wordmark span{color:var(--mag)}
.topbar nav{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem;color:var(--muted);font-size:.95rem;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.topbar nav a:hover{color:var(--ink);border-color:var(--mag)}

/* portada */
.hero{padding:1.6rem 0 2.4rem;display:grid;place-items:center;overflow:hidden}
.stage{position:relative;width:min(680px,90vw,max(300px,calc((100vh - 136px)/1.4194)));width:min(680px,90vw,max(300px,calc((100svh - 136px)/1.4194)));perspective:1100px}
.halo{position:absolute;inset:-14%;border-radius:50%;background:conic-gradient(from 0deg,var(--mag),var(--amber),var(--cyan),var(--mag));filter:blur(46px);opacity:.55;animation:spin 14s linear infinite}
.cover{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;box-shadow:0 28px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18);will-change:transform}
.cover img{display:block;width:100%}
.sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:linear-gradient(105deg,transparent calc(var(--mx,50%) - 22%),rgba(255,255,255,.34) var(--mx,50%),transparent calc(var(--mx,50%) + 22%))}
.stage:hover .sheen{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(4,9,20,.82);padding:.55rem 0}
.track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.track span{padding-right:3.2rem;font:400 1.5rem/1 var(--display);letter-spacing:.12em;color:var(--amber);white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* adelantos */
.notes{display:grid;gap:2.6rem}
.note{display:grid;gap:1.2rem;align-items:center}
.note>img{width:100%;display:block;border:1px solid var(--line);box-shadow:0 0 34px rgba(111,212,255,.18)}
.hud{position:relative;padding:1.4rem 1.5rem;background:var(--panel);border:1px solid rgba(111,212,255,.16);backdrop-filter:blur(8px)}
.hud::before,.hud::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--cyan)}
.hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hud::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.note p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

.poster{display:block;width:100%;border:1px solid var(--line);box-shadow:0 0 0 6px rgba(255,79,163,.18),0 26px 60px rgba(0,0,0,.5)}

/* dónde */
.stores{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.4rem 2.2rem}
.stores img{width:auto;height:78px;max-width:200px;object-fit:contain;display:block;transition:transform .25s var(--ease),filter .25s}
.stores img:hover{transform:translateY(-4px) scale(1.06);filter:drop-shadow(0 6px 14px rgba(111,212,255,.5))}

/* colección */
.prize-row{display:grid;gap:2.2rem;align-items:start}
.meter{display:flex;gap:6px;margin:0 0 1.4rem}
.meter i{flex:1;height:10px;background:rgba(255,255,255,.14)}
.meter .on{background:linear-gradient(90deg,var(--cyan),var(--mag));box-shadow:0 0 12px rgba(111,212,255,.7)}
.issues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .8rem}
.issue{margin:0}
.shot{position:relative;aspect-ratio:1600/2271;overflow:hidden;border:1px solid var(--line);background:#0a1626}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.is-now .shot{border-color:var(--amber);box-shadow:0 0 22px rgba(255,181,71,.55)}
.soon{display:grid;place-content:center;gap:.4rem;text-align:center;border:1px dashed rgba(111,212,255,.5);animation:pulse 2.6s ease-in-out infinite}
.soon strong{font:400 clamp(2.6rem,7vw,4rem)/1 var(--display);letter-spacing:.06em;color:rgba(195,208,223,.55)}
.soon em{font-style:normal;font-size:.8rem;color:var(--cyan)}
@keyframes pulse{50%{border-color:rgba(255,79,163,.85);box-shadow:inset 0 0 22px rgba(255,79,163,.22)}}
.issue figcaption{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:center;margin-top:.45rem;font:400 1.5rem/1 var(--display);letter-spacing:.08em}
.tag{padding:.2rem .45rem;background:var(--amber);color:#1a1000;font:600 .7rem/1 var(--body);letter-spacing:0}

.contest{display:grid;gap:1rem;align-items:center;border-color:rgba(255,79,163,.5);background:rgba(34,8,26,.62)}
.contest::before,.contest::after{border-color:var(--mag)}
.contest img{width:min(100%,420px);display:block;margin-inline:auto;filter:drop-shadow(0 0 20px rgba(255,79,163,.45))}
.contest h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.contest p{font-size:1.08rem}

/* archivo */
.archive{display:grid;gap:1.6rem;align-items:center}
.qr-link{display:block;width:min(100%,290px);padding:12px;background:#fff;justify-self:center;box-shadow:0 0 0 3px var(--cyan),0 0 32px rgba(111,212,255,.4);transition:transform .25s var(--ease)}
.qr-link:hover{transform:scale(1.04) rotate(-1deg)}
.qr-link img{display:block;width:100%}
.lede{max-width:42rem;margin-bottom:1.5rem;color:var(--muted);font-size:1.1rem}
.lede a{color:var(--cyan)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 1.8rem;background:var(--mag);color:#1a0512;font:400 1.5rem/1 var(--display);letter-spacing:.08em;text-decoration:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:transform .2s var(--ease),background .2s}
.btn:hover{background:var(--amber);transform:translateY(-3px)}
.btn:active{transform:scale(.96)}

/* pie */
.site-footer{padding:2.6rem 0 3rem;border-top:1px solid var(--line);background:rgba(4,9,20,.72)}
.socials{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.3rem}
.socials a{display:block;width:52px;height:52px;line-height:0;transition:transform .25s var(--ease),filter .25s}
.socials a:hover{transform:translateY(-4px);filter:drop-shadow(0 6px 12px rgba(255,79,163,.6))}
.socials img{width:100%;height:100%;object-fit:contain}
.colophon{font:400 1.4rem/1.2 var(--display);letter-spacing:.1em;color:var(--amber)}

@media(min-width:860px){
  .note{grid-template-columns:1.05fr 1fr;gap:2rem}
  .note:nth-child(even)>img{order:2}
  .prize-row{grid-template-columns:1.5fr 1fr;gap:2.6rem}
  .contest{position:sticky;top:5rem}
  .archive{grid-template-columns:300px 1fr;gap:2.6rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;clip-path:none}
  .track{transform:none}
}

html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.topbar{top:env(safe-area-inset-top,0px)}