/* ===== R02 functional foundation: tokens.css ===== */
:root{
  /* ALEXX SkyRider R02: metal + reactor + HUD, menos neón genérico. */
  --bg-void:#030407;
  --bg-void-2:#070a10;
  --bg-floor:#0b0d12;
  --panel:#10131a;
  --panel-2:#171b24;
  --metal-dark:#1b1f28;
  --metal-mid:#5d6874;
  --metal-light:#c7d0d8;
  --sky-red:#ff2a12;
  --sky-red-dim:#99190d;
  --sky-orange:#ff7a00;
  --sky-orange-dim:#9c4300;
  --sky-blue:#00c8ff;
  --sky-blue-dim:#077d9c;
  --neon-blue:var(--sky-blue);
  --neon-blue-dim:var(--sky-blue-dim);
  --neon-pink:#ff3b25;
  --neon-pink-dim:#99190d;
  --neon-purple:#5768ff;
  --neon-purple-dim:#283099;
  --neon-amber:#ffb020;
  --safe-green:#39ff8a;
  --text-soft:#f2f4f8;
  --text-dim:#9aa5b8;
  --text-faint:#667085;
  --font-display:Impact, Haettenschweiler, 'Arial Narrow Bold', system-ui, sans-serif;
  --font-body:'Trebuchet MS', system-ui, sans-serif;
  --font-mono:'Courier New', ui-monospace, monospace;
  --radius-cab:18px;
  --max-content:1200px;
}

/* ===== R02 functional foundation: base.css ===== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-void);
  color:var(--text-soft);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
svg{display:block;}
::selection{background:var(--sky-red-dim);color:#fff;}
:focus-visible{outline:2px solid var(--neon-amber);outline-offset:3px;border-radius:4px;}
.skip-link{position:absolute;left:12px;top:-100px;z-index:999;background:#fff;color:#000;padding:10px 14px;border-radius:6px;font-family:var(--font-mono);}
.skip-link:focus{top:12px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
.audio-status-hidden{position:fixed;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ===== R02 functional foundation: crt-effects.css ===== */
.crt-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
  opacity:.45;
}
.crt-shell::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.35) 100%);
  z-index:4;
}

/* ===== R02 functional foundation: responsive.css ===== */
@media (max-width:1180px){.page-grid{grid-template-columns:1fr;}.page-grid>main{grid-column:1;}.side-banner-slot{display:none;}}
@media (max-width:820px){.pilot-card{grid-template-columns:1fr;}.pilot-copy{text-align:center;}.system-list{text-align:left;}.audio-toggle{right:14px;bottom:14px;}}
@media (max-width:720px){.hero{padding:104px 18px 72px;}.top-gate-nav{top:12px;gap:6px;}.nav-pill{font-size:.64rem;padding:7px 10px;}.hero-logo{width:min(520px,94vw);}.hero-tagline{font-size:.72rem;line-height:1.8;}.official-badge{font-size:.58rem;line-height:1.5;}.boot-line{font-size:.58rem;line-height:1.6;}.audio-toggle{font-size:.62rem;padding:8px 10px;}.pilot-section{padding-top:56px;}.cabinets-section{padding-top:64px;}.cabinets-row{gap:32px;}.security-grid{text-align:center;}.hero-actions{gap:9px;}.hero-cta{font-size:.72rem;padding:12px 20px;}}

/* ===== R02 functional foundation: r20-mobile.css ===== */
/* R20: retain the arcade identity, allow direct reading at every size. */
.r20-copy{line-height:1.8;margin:1rem 0;color:var(--text-dim);overflow-wrap:anywhere}
.r20-story{max-width:940px;text-align:left}
.r20-story .section-title{text-align:center}
#mainGate{min-width:0}
@media(max-width:820px){
  .hero{padding:20px 16px 42px}
  .top-gate-nav{position:relative;top:auto;left:auto;transform:none;width:100%;gap:8px;margin:0 auto 16px;justify-content:center}
  .nav-pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;padding:10px 12px;white-space:normal}
  .audio-toggle{position:relative;inset:auto;display:block;margin:12px auto 22px;min-height:44px;max-width:100%;font-size:.75rem}
  .hero-content{min-width:0;width:100%}
  .hero-logo{max-width:100%;height:auto}
  .hero-visual-frame{width:100%;max-width:100%}
  .pilot-section,.token-section,.cabinets-section{padding:40px 16px}
  .pilot-card,.visual-pilot-card{grid-template-columns:minmax(0,1fr);padding:18px;gap:20px}
  .pilot-copy,.visual-pilot-copy{text-align:left;min-width:0}
  .pilot-image-wrap{max-width:330px;width:100%;margin:auto}
  .pilot-image-wrap img{max-width:100%;height:auto}
  .token-panel{padding:22px 16px;min-width:0}
  .token-grid,.security-grid,.tested-grid,.cabinets-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .token-grid article,.tested-card,.cabinet{min-width:0;max-width:100%}
  .section-title{font-size:clamp(1.25rem,5.5vw,2rem);overflow-wrap:anywhere}
  p,li,.token-intro,.hero-intro,.r20-copy{font-size:1rem;line-height:1.8;overflow-wrap:anywhere}
  .hero-actions{flex-wrap:wrap;max-width:100%}
  .hero-cta,.play-btn{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .hero-actions .hero-cta{width:100%;text-align:center}
  .face-carousel{aspect-ratio:16/9;width:100%}
  .face-media-slot video,.hero-video-frame video{object-fit:contain}
  video,img{max-width:100%}
  .face-name-overlay{font-size:.7rem;max-width:90%;overflow-wrap:anywhere}
  .downward-action-callout{overflow-wrap:anywhere}
  footer{padding:26px 16px 40px}
}

/* ===== R02 functional foundation: r21-retro-future.css ===== */

/* ALEXX SkyRider™ R21 — Retro → Future editorial candidate.
   Presentation layer only; demo gameplay is not modified. */
:root{
  --r21-bg:#03070d; --r21-panel:#07111a; --r21-panel2:#0b1822;
  --r21-text:#e9f7ff; --r21-dim:#a8bdc8; --r21-cyan:#63e8ff;
  --r21-blue:#6aa8ff; --r21-pink:#ff5bc9; --r21-red:#ff6573;
  --r21-max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--r21-bg)}
body.r21-gate{margin:0;background:var(--r21-bg);color:var(--r21-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
html[lang="en"] [data-r21-lang="es"]{display:none!important}
html[lang="es"] [data-r21-lang="en"]{display:none!important}
.r21-skip{position:fixed;left:10px;top:-90px;z-index:999;background:#fff;color:#000;padding:10px 14px}
.r21-skip:focus{top:10px}
.r21-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px clamp(14px,3vw,34px);background:rgba(2,7,12,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(99,232,255,.2)}
.r21-brand{color:#fff;text-decoration:none;font-weight:950;letter-spacing:.08em;white-space:nowrap}.r21-brand span{color:var(--r21-cyan)}
.r21-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.r21-nav a,.r21-nav-button{border:1px solid rgba(99,232,255,.27);background:rgba(5,14,22,.88);color:#e4fbff;border-radius:999px;padding:9px 12px;text-decoration:none;font:800 .72rem/1 system-ui;letter-spacing:.05em;cursor:pointer}
.r21-nav a:hover,.r21-nav-button:hover{border-color:var(--r21-cyan);box-shadow:0 0 18px rgba(99,232,255,.14)}
.r21-nav-button .audio-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px}
.r21-section{position:relative;padding:clamp(64px,9vw,118px) max(18px,calc((100vw - var(--r21-max))/2));overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05)}
.era-retro{background:radial-gradient(circle at 14% 14%,rgba(255,91,201,.08),transparent 30%),radial-gradient(circle at 84% 20%,rgba(99,232,255,.07),transparent 30%),#03070d}
.era-evolution{background:radial-gradient(circle at 84% 18%,rgba(106,168,255,.08),transparent 33%),linear-gradient(180deg,#040a11,#07111a)}
.era-modern{background:radial-gradient(circle at 70% 8%,rgba(99,232,255,.06),transparent 30%),linear-gradient(180deg,#07111a,#0b1620)}
.r21-heading{display:flex;align-items:flex-end;gap:16px;margin-bottom:34px;max-width:1000px}
.r21-heading>span{color:var(--r21-cyan);font:800 .76rem/1 ui-monospace,monospace;letter-spacing:.18em}
.r21-heading h2{margin:0;font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.02;letter-spacing:.015em;text-shadow:0 0 22px rgba(99,232,255,.16)}
.r21-heading h2:after{content:"";display:block;width:min(220px,42vw);height:3px;margin-top:14px;background:linear-gradient(90deg,var(--r21-cyan),var(--r21-pink),transparent);background-size:180% 100%;animation:r21bar 3.8s linear infinite}
@keyframes r21bar{to{background-position:180% 0}}
.r21-copy{max-width:960px;color:var(--r21-dim);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.85}
.r21-copy p{margin:.6em 0 1em}.r21-copy strong{color:#fff}
.r21-note{max-width:920px;color:var(--r21-dim);line-height:1.75}
.r21-kicker{color:var(--r21-cyan);font:800 .8rem/1.3 ui-monospace,monospace;letter-spacing:.18em}
.r21-evidence{color:#829fac;font:700 .69rem/1.5 ui-monospace,monospace;letter-spacing:.08em;margin-top:24px}
.r21-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:1px solid rgba(99,232,255,.42);border-radius:10px;background:rgba(6,16,24,.9);color:#e9fbff;text-decoration:none;font-weight:900;letter-spacing:.04em}
.r21-btn.primary{background:linear-gradient(135deg,rgba(14,95,130,.9),rgba(31,38,82,.92));box-shadow:0 0 28px rgba(99,232,255,.12)}
.r21-btn:hover{transform:translateY(-1px);border-color:var(--r21-cyan)}
.r21-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Hero */
.r21-hero{min-height:calc(100vh - 66px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(28px,5vw,78px);align-items:center;padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(70px,8vw,110px)}
.r21-grid-glow{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(99,232,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(99,232,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.r21-hero-copy,.r21-hero-figure{position:relative;z-index:2}
.r21-hero-logo{display:block;width:min(100%,620px);height:auto;margin:8px 0 10px;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 26px rgba(99,232,255,.13))}
.r21-hero h1{margin:8px 0;font-size:clamp(3rem,8vw,7.8rem);line-height:.88;letter-spacing:-.045em;text-shadow:0 0 34px rgba(99,232,255,.18)}
.r21-slogan{margin:24px 0 0;color:var(--r21-cyan);font:950 clamp(1.2rem,3vw,2.2rem)/1 ui-monospace,monospace;letter-spacing:.18em}
.r21-impact{margin:12px 0 0;font-weight:950;font-size:clamp(1rem,2.3vw,1.65rem);letter-spacing:.04em}
.r21-support{color:var(--r21-dim);font-size:1.05rem}
.r21-crt-window{position:relative;aspect-ratio:1;border:2px solid rgba(99,232,255,.4);border-radius:26px;background:radial-gradient(circle,rgba(15,40,58,.92),#020609 70%);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 65px rgba(99,232,255,.12),inset 0 0 80px rgba(99,232,255,.07)}
.r21-scanline{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.018) 3px 4px);pointer-events:none}
.r21-sprite{image-rendering:pixelated;object-fit:contain}
.r21-sprite-hero{width:min(44%,190px);filter:drop-shadow(0 0 18px rgba(99,232,255,.42));animation:r21float 2.6s ease-in-out infinite}
.r21-sprite-medium{width:160px;max-width:34vw;filter:drop-shadow(0 0 18px rgba(255,91,201,.26))}
.r21-down-arrow{position:absolute;bottom:8%;font-size:clamp(2rem,7vw,4.5rem);color:rgba(99,232,255,.7);animation:r21down 1.35s ease-in-out infinite}
.r21-hero-figure>p{text-align:center;color:#6f8b99;font:700 .68rem/1.4 ui-monospace,monospace;letter-spacing:.12em}
@keyframes r21float{50%{transform:translateY(10px)}} @keyframes r21down{50%{transform:translateY(10px);opacity:.4}}

/* Editorial components */
.r21-era-track,.r21-progression{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:980px;padding:22px;border:1px solid rgba(99,232,255,.2);border-radius:14px;background:rgba(4,12,19,.66);color:#d9f9ff;font:800 .82rem/1.4 ui-monospace,monospace}
.r21-era-track b,.r21-progression b{color:var(--r21-pink)}
.r21-with-figure{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.r21-downward-demo{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
.r21-route-window{position:relative;height:min(58vw,520px);min-height:380px;overflow:hidden;border-radius:22px;border:1px solid rgba(99,232,255,.32);background:#02080d}
.r21-route-scroll{position:absolute;inset:-240px 0;background-repeat:repeat-y;background-position:center 0;background-size:min(100%,480px) auto;animation:r21route 8s linear infinite}
.r21-route-scroll.day-route{background-image:url("../assets/r21-sprites/15_ROUTE_TERRAIN/DAY/rio_clasico2.png")}
.r21-route-ship{position:absolute;left:50%;top:38%;width:96px;transform:translateX(-50%);filter:drop-shadow(0 0 12px rgba(99,232,255,.45))}
.r21-route-label{position:absolute;right:14px;bottom:14px;padding:7px 9px;background:rgba(0,0,0,.72);border:1px solid rgba(99,232,255,.35);color:var(--r21-cyan);font:800 .7rem/1 ui-monospace,monospace}
@keyframes r21route{
 from{background-position:center 0}
 to{background-position:center -480px}
}
.r21-controls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:960px}
.r21-controls-grid>div{min-height:120px;padding:18px;border:1px solid rgba(99,232,255,.18);border-radius:14px;background:rgba(4,14,22,.72);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.r21-controls-grid span{width:100%;margin-top:8px;color:#d7f7ff;font:800 .78rem/1.3 ui-monospace,monospace}
kbd{min-width:42px;text-align:center;border:1px solid rgba(255,255,255,.26);border-bottom-width:3px;border-radius:7px;padding:7px 10px;background:#0d1821;color:#fff}
.r21-mantra{padding-left:18px;border-left:3px solid var(--r21-cyan);color:#e9fbff}
.r21-resource-layout{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;align-items:center;gap:30px;max-width:1050px}
.r21-resource{margin:0;text-align:center}.r21-resource img{max-width:110px;height:150px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 18px rgba(99,232,255,.24));animation:r21float 2.8s ease-in-out infinite}.r21-resource.danger img{filter:drop-shadow(0 0 18px rgba(255,101,115,.3));animation-delay:-1.3s}.r21-resource figcaption{margin-top:8px;font:950 .85rem/1 ui-monospace,monospace;letter-spacing:.16em}

/* Five Faces as one continuous journey */
.r21-face-journey{position:relative;display:grid;gap:14px;margin-top:34px}
.r21-face-journey:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(var(--r21-cyan),var(--r21-pink),var(--r21-blue));opacity:.22}
.r21-face-band{position:relative;min-height:260px;display:grid;grid-template-columns:280px minmax(0,1fr) 180px;gap:24px;align-items:center;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;background:rgba(3,9,14,.82)}
.r21-face-route{height:220px;border-radius:14px;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),var(--route);background-position:center;background-repeat:repeat-y;background-size:cover;animation:r21faceRoute 9s linear infinite;box-shadow:inset 0 0 50px rgba(0,0,0,.28)}
@keyframes r21faceRoute{to{background-position:center 460px}}
.r21-face-copy{position:relative;z-index:2}.r21-face-copy>span{font:950 clamp(1.35rem,3vw,2.4rem)/1 ui-monospace,monospace;color:#fff;letter-spacing:.08em}.r21-face-copy p{color:var(--r21-dim);line-height:1.7}
.r21-face-creature{justify-self:center;max-width:150px;max-height:150px;filter:drop-shadow(0 0 18px rgba(99,232,255,.25))}
.r21-face-band.night{border-color:rgba(106,168,255,.2)}.r21-face-band.cemetery{border-color:rgba(255,91,201,.18)}.r21-face-band.snow{border-color:rgba(190,240,255,.22)}.r21-face-band.canyon{border-color:rgba(255,180,96,.18)}

/* Threats / Guardians */
.r21-threat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.r21-threat-grid article{min-height:190px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(3,11,17,.65);display:grid;place-items:center;text-align:center}
.r21-threat-grid article.feature{grid-column:span 2;background:radial-gradient(circle,rgba(255,91,201,.08),transparent 60%),rgba(3,11,17,.72)}
.r21-threat-grid img{max-width:145px;max-height:110px;image-rendering:pixelated;object-fit:contain}.r21-threat-grid h3{margin:8px 0 0;font:900 .86rem/1.2 ui-monospace,monospace;letter-spacing:.08em}
.r21-threat-grid article p{margin:10px auto 0;max-width:28ch;color:var(--r21-dim);font-size:.82rem;line-height:1.5;text-align:center}
.r21-guardian-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:30px}
.r21-guardian-line article{min-height:260px;padding:14px;border:1px solid rgba(99,232,255,.13);border-radius:16px;background:rgba(3,11,17,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.r21-guardian-line img{max-width:135px;max-height:135px;image-rendering:pixelated}.r21-guardian-line h3{margin:14px 0 2px;color:var(--r21-cyan);font:950 .82rem/1.25 ui-monospace,monospace}.r21-guardian-line p{margin:0;color:var(--r21-dim)}
.r21-guardian-line .r21-guardian-name{color:#e9f7ff;font-weight:850}
.r21-guardian-line .r21-guardian-desc{margin-top:9px;color:var(--r21-dim);font-size:.76rem;line-height:1.45;max-width:22ch}
.r21-mode-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.r21-mode-split article{padding:28px;border:1px solid rgba(99,232,255,.18);border-radius:18px;background:linear-gradient(160deg,rgba(7,23,34,.9),rgba(7,12,20,.88))}.r21-mode-split h3{font-size:clamp(1.3rem,2.5vw,2rem);margin-top:0}.r21-mode-split p{color:var(--r21-dim);line-height:1.75}.r21-mode-split strong{color:#fff}
.r21-basics{max-width:920px;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;padding-left:24px;color:#d8edf6}.r21-basics li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);line-height:1.55}

/* Modern close */
.r21-then-now{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin-bottom:30px}.r21-then-now>div{padding:28px;border:1px solid rgba(99,232,255,.18);border-radius:16px;background:rgba(11,28,40,.7)}.r21-then-now span{display:block;margin-bottom:12px;color:var(--r21-cyan);font:800 .72rem/1 ui-monospace,monospace;letter-spacing:.14em}.r21-then-now strong{font-size:clamp(1rem,2vw,1.4rem);line-height:1.5}
.r21-tested-grid,.r21-journal-categories{display:flex;flex-wrap:wrap;gap:10px;max-width:1000px}.r21-tested-grid span,.r21-journal-categories span{padding:10px 13px;border:1px solid rgba(99,232,255,.18);border-radius:999px;background:rgba(10,28,40,.78);color:#dff9ff;font-weight:780;font-size:.88rem}
.r21-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px}.r21-demo-grid article{padding:34px;border:1px solid rgba(99,232,255,.22);border-radius:18px;background:linear-gradient(160deg,rgba(11,35,48,.95),rgba(8,16,25,.95))}.r21-demo-grid h3{font-size:clamp(1.6rem,3vw,2.5rem);margin:.25em 0}.r21-demo-grid p:not(.r21-kicker){color:var(--r21-dim)}.r21-copy.compact{margin-top:24px}
.r21-journal-categories{margin:26px 0}.r21-text-link{display:inline-block;margin-top:12px;color:var(--r21-cyan);text-decoration:none;font-weight:900;letter-spacing:.05em}
.r21-faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.r21-faq-grid details{padding:20px;border:1px solid rgba(99,232,255,.16);border-radius:14px;background:rgba(10,25,35,.72)}.r21-faq-grid summary{cursor:pointer;font-weight:900;line-height:1.4}.r21-faq-grid p{color:var(--r21-dim);line-height:1.65}
.r21-closing-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.r21-contact{color:var(--r21-dim)}
.r21-footer{padding:38px max(18px,calc((100vw - var(--r21-max))/2));display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#02070b;border-top:1px solid rgba(99,232,255,.14);color:#88a4b1}.r21-footer a{color:var(--r21-cyan);text-decoration:none}

@media(max-width:900px){
 .r21-topbar{align-items:flex-start}.r21-nav{max-width:72%}
 .r21-hero{grid-template-columns:1fr;min-height:auto}.r21-hero-figure{max-width:560px;width:100%;margin:auto}
 .r21-downward-demo{grid-template-columns:1fr}.r21-route-window{height:520px}
 .r21-controls-grid{grid-template-columns:1fr 1fr}.r21-resource-layout{grid-template-columns:120px minmax(0,1fr) 120px}
 .r21-face-band{grid-template-columns:220px minmax(0,1fr) 140px}.r21-guardian-line{grid-template-columns:repeat(3,minmax(0,1fr))}
 .r21-faq-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
 .r21-hero-logo{width:min(100%,520px);margin-left:auto;margin-right:auto}
 .r21-topbar{position:relative;display:block}.r21-brand{display:block;margin-bottom:10px}.r21-nav{max-width:none;justify-content:flex-start}.r21-nav a{display:none}.r21-nav-button{min-height:44px}
 .r21-section{padding:58px 18px}.r21-heading{align-items:flex-start}.r21-heading h2{overflow-wrap:anywhere}
 .r21-with-figure{grid-template-columns:1fr}.r21-sprite-medium{justify-self:center}.r21-controls-grid{grid-template-columns:1fr}
 .r21-resource-layout{grid-template-columns:1fr}.r21-resource{display:flex;align-items:center;justify-content:center;gap:16px}.r21-resource img{height:110px}
 .r21-progression{justify-content:center}.r21-face-journey:before{display:none}.r21-face-band{grid-template-columns:1fr;min-height:0}.r21-face-route{height:190px}.r21-face-creature{max-width:130px}
 .r21-threat-grid{grid-template-columns:1fr 1fr}.r21-threat-grid article.feature{grid-column:span 2}.r21-guardian-line{grid-template-columns:1fr 1fr}.r21-guardian-line article{min-height:220px}
 .r21-mode-split,.r21-then-now,.r21-demo-grid{grid-template-columns:1fr}.r21-basics{grid-template-columns:1fr}.r21-route-window{height:430px;min-height:0}
}
@media(max-width:420px){.r21-threat-grid,.r21-guardian-line{grid-template-columns:1fr}.r21-threat-grid article.feature{grid-column:auto}.r21-hero h1{font-size:clamp(3rem,18vw,5rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.r21-heading h2:after,.r21-sprite-hero,.r21-down-arrow,.r21-route-scroll,.r21-face-route,.r21-resource img{animation:none!important}}


/* R21B atmosphere pass — presentation only. */
:root{
  --r21-violet:#8a6dff;
  --r21-gold:#ffc66d;
}
html{background:
 radial-gradient(circle at 15% 8%, rgba(255,91,201,.10), transparent 18%),
 radial-gradient(circle at 85% 0%, rgba(99,232,255,.09), transparent 22%),
 #02060a}
body.r21-gate{position:relative;background:
 radial-gradient(circle at 18% 0%, rgba(255,91,201,.07), transparent 20%),
 radial-gradient(circle at 86% 0%, rgba(99,232,255,.07), transparent 25%),
 linear-gradient(180deg,#02060a 0%,#031018 22%,#07121a 55%,#07131d 100%)}
body.r21-gate::before,
body.r21-gate::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body.r21-gate::before{
  opacity:.42;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.020) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 12%, rgba(0,0,0,.18));
  mix-blend-mode:screen;
}
body.r21-gate::after{
  opacity:.55;
  background:
    radial-gradient(circle at 50% -10%, rgba(99,232,255,.16), transparent 36%),
    radial-gradient(circle at -5% 20%, rgba(255,91,201,.11), transparent 30%),
    radial-gradient(circle at 105% 28%, rgba(106,168,255,.12), transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.42) 100%);
}
.r21-topbar,.r21-section,.r21-footer{position:relative;z-index:1}
.r21-topbar{
  background:linear-gradient(180deg,rgba(4,10,16,.94),rgba(3,8,13,.88));
  box-shadow:0 14px 40px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.04);
}
.r21-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,rgba(99,232,255,.85),rgba(255,91,201,.75),transparent);opacity:.85}
.r21-brand{letter-spacing:.11em;text-shadow:0 0 12px rgba(99,232,255,.18),0 0 24px rgba(99,232,255,.1)}
.r21-nav a,.r21-nav-button{
  background:linear-gradient(180deg,rgba(8,18,28,.92),rgba(4,11,18,.92));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 8px 18px rgba(0,0,0,.18);
}
.r21-section{scroll-margin-top:90px;border-bottom:1px solid rgba(255,255,255,.045)}
.r21-section::before{
  content:"";position:absolute;inset:10px 12px auto 12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,232,255,.18),rgba(255,91,201,.16),transparent);
  pointer-events:none;opacity:.75;
}
.era-retro{background:
  linear-gradient(180deg,rgba(255,255,255,.015),transparent 18%),
  radial-gradient(circle at 10% 16%,rgba(255,91,201,.12),transparent 26%),
  radial-gradient(circle at 85% 16%,rgba(99,232,255,.11),transparent 26%),
  linear-gradient(180deg,#03070d,#06111b 68%,#08131b)}
.era-evolution{background:
  linear-gradient(180deg,rgba(255,255,255,.018),transparent 16%),
  radial-gradient(circle at 84% 18%,rgba(106,168,255,.12),transparent 31%),
  radial-gradient(circle at 16% 34%,rgba(99,232,255,.06),transparent 28%),
  linear-gradient(180deg,#040a11,#07131b 60%,#08141d)}
.era-modern{background:
  linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%),
  radial-gradient(circle at 75% 8%,rgba(99,232,255,.10),transparent 24%),
  radial-gradient(circle at 18% 20%,rgba(255,198,109,.08),transparent 20%),
  linear-gradient(180deg,#07111a,#0c1925)}
.r21-heading{
  position:relative;align-items:center;gap:18px;margin-bottom:38px;padding:14px 18px 18px;
  border:1px solid rgba(99,232,255,.12);border-radius:18px;
  background:linear-gradient(180deg,rgba(6,16,25,.76),rgba(4,11,18,.48));
  box-shadow:0 18px 36px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.02);
}
.r21-heading::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 26px rgba(99,232,255,.05), inset 0 0 40px rgba(255,91,201,.03)}
.r21-heading>span{
  display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 8px;
  border-radius:14px;border:1px solid rgba(99,232,255,.26);
  background:linear-gradient(180deg,rgba(7,23,35,.92),rgba(4,14,22,.84));
  box-shadow:0 0 18px rgba(99,232,255,.10), inset 0 0 18px rgba(99,232,255,.08);
  color:#d9fdff;text-shadow:0 0 10px rgba(99,232,255,.45);
}
.r21-heading h2{
  text-transform:uppercase;letter-spacing:.04em;
  text-shadow:0 0 8px rgba(255,255,255,.14), 0 0 18px rgba(99,232,255,.16), 0 0 34px rgba(99,232,255,.10);
}
.r21-heading h2:after{height:4px;border-radius:999px;box-shadow:0 0 12px rgba(99,232,255,.28), 0 0 22px rgba(255,91,201,.18)}
.r21-copy,.r21-note,.r21-support,.r21-contact{ text-shadow:0 1px 0 rgba(0,0,0,.25); }
.r21-hero{
  isolation:isolate;
  background:
   radial-gradient(circle at 12% 14%, rgba(255,91,201,.14), transparent 24%),
   radial-gradient(circle at 82% 18%, rgba(99,232,255,.14), transparent 28%),
   linear-gradient(180deg,#03070d 0%,#051019 42%,#07131b 100%);
}
.r21-hero::before{
  content:"";position:absolute;inset:16px;border:1px solid rgba(99,232,255,.10);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 30%);
  box-shadow:inset 0 0 40px rgba(255,255,255,.02), 0 0 60px rgba(99,232,255,.04);
  pointer-events:none;z-index:1;
}
.r21-hero-video-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:0}
.r21-hero-video{width:100%;height:100%;object-fit:cover;opacity:.16;filter:saturate(1.12) contrast(1.08) blur(.5px)}
.r21-hero-video-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,7,11,.74) 0%,rgba(2,7,11,.50) 40%,rgba(2,7,11,.64) 100%),radial-gradient(circle at 70% 45%,rgba(99,232,255,.10),transparent 28%),radial-gradient(circle at 25% 20%,rgba(255,91,201,.10),transparent 28%)}
.r21-ambient-lights{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.r21-ambient-lights span{position:absolute;display:block;width:360px;height:360px;border-radius:50%;filter:blur(45px);opacity:.22;animation:r21Pulse 8s ease-in-out infinite}
.r21-ambient-lights span:nth-child(1){left:-120px;top:10%;background:rgba(255,91,201,.55)}
.r21-ambient-lights span:nth-child(2){right:-100px;top:18%;background:rgba(99,232,255,.55);animation-delay:-2.5s}
.r21-ambient-lights span:nth-child(3){left:30%;bottom:-140px;background:rgba(106,168,255,.40);animation-delay:-5s}
@keyframes r21Pulse{50%{transform:scale(1.16);opacity:.32}}
.r21-grid-glow{background-image:linear-gradient(rgba(99,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(99,232,255,.055) 1px,transparent 1px);background-size:34px 34px;opacity:.95}
.r21-hero-copy{padding:22px 24px 24px;border-radius:24px;background:linear-gradient(180deg,rgba(4,11,18,.74),rgba(4,11,18,.46));border:1px solid rgba(99,232,255,.14);box-shadow:0 30px 50px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.02)}
.r21-kicker{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(5,19,30,.82);border:1px solid rgba(99,232,255,.20);box-shadow:0 0 16px rgba(99,232,255,.10)}
.r21-hero-logo{filter:drop-shadow(0 0 14px rgba(255,255,255,.10)) drop-shadow(0 0 30px rgba(99,232,255,.24)) drop-shadow(0 0 55px rgba(255,91,201,.12))}
.r21-slogan{display:inline-block;padding:.42em .7em;border-radius:14px;background:linear-gradient(180deg,rgba(10,29,41,.86),rgba(6,18,27,.86));border:1px solid rgba(99,232,255,.22);box-shadow:0 0 24px rgba(99,232,255,.10)}
.r21-impact{display:inline-block;padding:10px 14px;border-radius:12px;background:rgba(5,18,30,.56);border-left:3px solid rgba(99,232,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 20px rgba(0,0,0,.16)}
.r21-actions{margin-top:30px}
.r21-btn{background:linear-gradient(180deg,rgba(8,22,33,.94),rgba(5,13,20,.94));box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 12px 24px rgba(0,0,0,.24)}
.r21-btn.primary{background:linear-gradient(135deg,rgba(17,105,146,.96),rgba(52,44,118,.96));box-shadow:0 0 22px rgba(99,232,255,.18), 0 0 36px rgba(99,232,255,.10), 0 12px 24px rgba(0,0,0,.24)}
.r21-crt-window{border-color:rgba(99,232,255,.48);background:
  radial-gradient(circle at 50% 38%,rgba(34,98,134,.34),transparent 26%),
  radial-gradient(circle at 50% 48%,rgba(255,91,201,.12),transparent 32%),
  radial-gradient(circle,rgba(15,40,58,.98),#020609 72%);
  box-shadow:0 0 85px rgba(99,232,255,.14), inset 0 0 90px rgba(99,232,255,.08), inset 0 0 24px rgba(255,255,255,.04)}
.r21-hero-figure>p{display:inline-block;padding:8px 10px;background:rgba(0,0,0,.42);border-radius:999px;border:1px solid rgba(99,232,255,.20)}
.r21-era-track,.r21-progression,
.r21-controls-grid>div,
.r21-face-band,
.r21-threat-grid article,
.r21-guardian-line article,
.r21-mode-split article,
.r21-then-now>div,
.r21-demo-grid article,
.r21-faq-grid details{
  box-shadow:0 18px 32px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.018);
}
.r21-controls-grid>div,
.r21-threat-grid article,
.r21-guardian-line article,
.r21-demo-grid article,
.r21-faq-grid details{
  background:linear-gradient(180deg,rgba(6,17,25,.90),rgba(5,13,20,.74));
}
.r21-face-band{background:linear-gradient(180deg,rgba(5,13,20,.88),rgba(3,9,14,.84));}
.r21-face-route{box-shadow:inset 0 0 60px rgba(0,0,0,.32), 0 0 24px rgba(99,232,255,.08)}
.r21-threat-grid article.feature{background:radial-gradient(circle at 50% 20%,rgba(255,91,201,.10),transparent 38%),linear-gradient(180deg,rgba(8,18,27,.92),rgba(5,13,20,.80))}
.r21-guardian-line h3,.r21-resource figcaption,.r21-threat-grid h3{
  text-shadow:0 0 10px rgba(99,232,255,.18);
}
.r21-tested-grid span,.r21-journal-categories span{box-shadow:0 8px 16px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.02)}
.r21-footer{background:linear-gradient(180deg,#02070b,#010509)}
@media(max-width:900px){
  .r21-hero-copy{padding:20px}
}
@media(max-width:640px){
  .r21-hero::before{inset:8px}
  .r21-heading{padding:14px 14px 16px;align-items:flex-start}
  .r21-heading>span{min-width:46px;height:46px}
  .r21-hero-copy{padding:18px}
  .r21-slogan,.r21-impact{display:block}
}
@media(prefers-reduced-motion:reduce){
  .r21-ambient-lights span{animation:none}
  .r21-hero-video{display:none}
}


/* R21D demo-entry arcade marquee — Gate presentation only. */
.r21-demo-hall{
  background:
    radial-gradient(circle at 20% 22%,rgba(190,238,255,.10),transparent 26%),
    radial-gradient(circle at 80% 24%,rgba(64,100,255,.11),transparent 28%),
    linear-gradient(180deg,#07131d,#07111a 68%,#081722);
}
.r21-demo-intro{max-width:820px;margin:-10px 0 30px;color:#cae8f3;font-size:clamp(1rem,1.8vw,1.18rem);line-height:1.7}
.r21-demo-intro p{margin:0}
.r21-demo-marquee-grid{max-width:1160px;gap:26px;align-items:stretch}
.r21-demo-cabinet{
  position:relative;isolation:isolate;min-height:560px;padding:0!important;overflow:hidden;
  border:1px solid rgba(99,232,255,.34)!important;border-radius:24px!important;
  background:#030a10!important;
  box-shadow:0 34px 60px rgba(0,0,0,.34),0 0 34px rgba(99,232,255,.08),inset 0 0 0 1px rgba(255,255,255,.035)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.r21-demo-cabinet:hover,.r21-demo-cabinet:focus-within{
  transform:translateY(-4px);border-color:rgba(99,232,255,.72)!important;
  box-shadow:0 38px 72px rgba(0,0,0,.40),0 0 38px rgba(99,232,255,.15),inset 0 0 0 1px rgba(255,255,255,.05)!important;
}
.r21-demo-cabinet-night{border-color:rgba(106,168,255,.38)!important;box-shadow:0 34px 60px rgba(0,0,0,.34),0 0 34px rgba(106,168,255,.08),inset 0 0 0 1px rgba(255,255,255,.035)!important}
.r21-demo-preview{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#02070b}
.r21-demo-cabinet-arctic .r21-demo-preview{background:#071722 url("../assets/img/visual-update/face-arctic.png") center/cover no-repeat}
.r21-demo-cabinet-night .r21-demo-preview{background:#040713 url("../assets/img/visual-update/face-night.png") center/cover no-repeat}
.r21-demo-preview video{width:100%;height:100%;object-fit:cover;transform:scale(1.035);filter:saturate(1.18) contrast(1.07);opacity:.66}
.r21-demo-preview-overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,5,10,.10) 0%,rgba(0,5,10,.34) 34%,rgba(2,7,12,.88) 72%,rgba(2,7,12,.97) 100%),
  radial-gradient(circle at 50% 15%,transparent 0 18%,rgba(0,0,0,.22) 65%,rgba(0,0,0,.55) 100%)}
.r21-demo-cabinet-arctic .r21-demo-preview-overlay{box-shadow:inset 0 0 80px rgba(181,237,255,.08)}
.r21-demo-cabinet-night .r21-demo-preview-overlay{box-shadow:inset 0 0 80px rgba(106,168,255,.09)}
.r21-demo-scanlines{position:absolute;inset:0;opacity:.34;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.022) 3px 4px);mix-blend-mode:screen}
.r21-demo-corners{position:absolute;inset:12px;pointer-events:none;z-index:5}
.r21-demo-corners span{position:absolute;width:34px;height:34px;border-color:rgba(99,232,255,.66);filter:drop-shadow(0 0 6px rgba(99,232,255,.32))}
.r21-demo-corners span:nth-child(1){left:0;top:0;border-left:2px solid;border-top:2px solid}
.r21-demo-corners span:nth-child(2){right:0;top:0;border-right:2px solid;border-top:2px solid}
.r21-demo-corners span:nth-child(3){left:0;bottom:0;border-left:2px solid;border-bottom:2px solid}
.r21-demo-corners span:nth-child(4){right:0;bottom:0;border-right:2px solid;border-bottom:2px solid}
.r21-demo-cabinet-night .r21-demo-corners span{border-color:rgba(106,168,255,.72);filter:drop-shadow(0 0 6px rgba(106,168,255,.34))}
.r21-demo-marquee{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:18px 18px 0;padding:14px 18px;border:1px solid rgba(99,232,255,.38);border-radius:14px;
  background:linear-gradient(180deg,rgba(5,24,35,.92),rgba(4,14,22,.82));
  box-shadow:0 0 18px rgba(99,232,255,.11),inset 0 0 22px rgba(99,232,255,.05);
  backdrop-filter:blur(5px);
}
.r21-demo-cabinet-night .r21-demo-marquee{border-color:rgba(106,168,255,.40);background:linear-gradient(180deg,rgba(10,20,49,.92),rgba(4,10,24,.84));box-shadow:0 0 18px rgba(106,168,255,.12),inset 0 0 22px rgba(106,168,255,.05)}
.r21-demo-marquee span{font:950 clamp(.90rem,1.8vw,1.12rem)/1 ui-monospace,monospace;letter-spacing:.12em;color:#effdff;text-shadow:0 0 10px rgba(99,232,255,.42)}
.r21-demo-marquee small{font:900 .66rem/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--r21-cyan);white-space:nowrap}
.r21-demo-cabinet-night .r21-demo-marquee small{color:#9bbcff}
.r21-demo-cabinet-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 28px 28px;background:linear-gradient(180deg,transparent,rgba(2,7,12,.58) 12%,rgba(2,7,12,.94) 38%,rgba(2,7,12,.985) 100%)}
.r21-demo-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.r21-demo-badges span{padding:7px 9px;border-radius:999px;border:1px solid rgba(99,232,255,.28);background:rgba(5,20,30,.76);color:#e3faff;font:850 .66rem/1 ui-monospace,monospace;letter-spacing:.08em;box-shadow:0 0 12px rgba(99,232,255,.06)}
.r21-demo-cabinet-night .r21-demo-badges span{border-color:rgba(106,168,255,.30);background:rgba(8,15,37,.78)}
.r21-demo-cabinet-body p{min-height:3.6em;margin:0 0 18px!important;color:#c5dce7!important;line-height:1.65!important;text-shadow:0 1px 2px #000}
.r21-demo-play{width:100%;gap:10px;justify-content:center;position:relative;overflow:hidden}
.r21-demo-play::after{content:"";position:absolute;top:-40%;bottom:-40%;width:46px;left:-72px;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:r21DemoButtonSweep 4.4s ease-in-out infinite}
@keyframes r21DemoButtonSweep{0%,68%{left:-72px}88%,100%{left:calc(100% + 72px)}}
.r21-demo-footnote{max-width:940px;margin-top:28px;padding:16px 18px;border-left:2px solid rgba(99,232,255,.30);background:rgba(4,13,20,.36);border-radius:0 12px 12px 0}
@media(max-width:900px){.r21-demo-cabinet{min-height:520px}}
@media(max-width:640px){
 .r21-demo-marquee-grid{gap:18px}
 .r21-demo-cabinet{min-height:500px}
 .r21-demo-marquee{margin:14px 14px 0;padding:12px 13px;align-items:flex-start;flex-direction:column;gap:7px}
 .r21-demo-cabinet-body{padding:24px 20px 22px}
 .r21-demo-cabinet-body p{min-height:0}
}
@media(prefers-reduced-motion:reduce){.r21-demo-preview video{display:none}.r21-demo-play::after{animation:none}}


/* R21E — Five Faces live preview integration */
.r21-face-band{grid-template-columns:280px minmax(0,1fr) 180px}
.r21-face-preview{
  position:relative;
  height:220px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(99,232,255,.28);
  background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),var(--route);
  background-position:center;
  background-repeat:repeat-y;
  background-size:cover;
  box-shadow:inset 0 0 60px rgba(0,0,0,.34),0 0 24px rgba(99,232,255,.08);
}
.r21-face-preview::before,
.r21-face-preview::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.r21-face-preview::before{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0 2px,transparent 2px 4px);opacity:.34}
.r21-face-preview::after{background:linear-gradient(180deg,rgba(2,8,12,.08),rgba(2,8,12,.28) 52%,rgba(2,8,12,.62));}
.r21-face-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.92;filter:saturate(1.08) contrast(1.05)}
.r21-face-preview-tag{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  background:rgba(0,0,0,.68);border:1px solid rgba(99,232,255,.32);
  color:var(--r21-cyan);font:800 .64rem/1 ui-monospace,monospace;letter-spacing:.16em;
  box-shadow:0 0 14px rgba(99,232,255,.10);
}
.r21-face-preview-tag::before{content:"●";font-size:.7rem;color:#8cff89;text-shadow:0 0 8px rgba(140,255,137,.7)}
.r21-face-band.day .r21-face-preview{border-color:rgba(255,198,109,.28)}
.r21-face-band.night .r21-face-preview{border-color:rgba(106,168,255,.32)}
.r21-face-band.cemetery .r21-face-preview{border-color:rgba(255,91,201,.30)}
.r21-face-band.snow .r21-face-preview{border-color:rgba(190,240,255,.34)}
.r21-face-band.canyon .r21-face-preview{border-color:rgba(255,180,96,.28)}
@media(max-width:900px){
 .r21-face-band{grid-template-columns:220px minmax(0,1fr) 140px}
}
@media(max-width:640px){
 .r21-face-band{grid-template-columns:1fr;min-height:0}
 .r21-face-preview{height:190px}
}
@media(prefers-reduced-motion:reduce){
 .r21-face-video{display:none}
}


/* R21F — Journal connection only */
.r21-journal-categories a{
  padding:10px 13px;
  border:1px solid rgba(99,232,255,.18);
  border-radius:999px;
  background:rgba(10,28,40,.78);
  color:#dff9ff;
  font-weight:780;
  font-size:.88rem;
  text-decoration:none;
  box-shadow:0 8px 16px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.02);
}
.r21-journal-categories a:hover,.r21-journal-categories a:focus-visible{
  border-color:var(--r21-cyan);
  color:#fff;
  box-shadow:0 0 18px rgba(99,232,255,.14),0 8px 16px rgba(0,0,0,.12);
}
.r21-journal-context-link{
  display:inline-block;
  margin-top:12px;
  color:var(--r21-cyan);
  text-decoration:none;
  font:850 .82rem/1.45 ui-monospace,monospace;
  letter-spacing:.035em;
  border-bottom:1px solid rgba(99,232,255,.22);
}
.r21-journal-context-link:hover,.r21-journal-context-link:focus-visible{color:#fff;border-bottom-color:var(--r21-cyan);text-shadow:0 0 10px rgba(99,232,255,.28)}
.r21-context-wrap{max-width:1000px;margin:20px 0 0}
.r21-latest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1100px;margin-top:28px}
.r21-latest-card{
  min-height:285px;
  padding:24px;
  border:1px solid rgba(99,232,255,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(7,20,30,.90),rgba(5,13,20,.80));
  box-shadow:0 18px 32px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.018);
  display:flex;
  flex-direction:column;
}
.r21-latest-category{color:var(--r21-cyan);font:850 .68rem/1.3 ui-monospace,monospace;letter-spacing:.14em;margin-bottom:10px}
.r21-latest-card h3{margin:.15em 0 .7em;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.2;color:#fff}
.r21-latest-card p{margin:.25em 0 1.2em;color:var(--r21-dim);line-height:1.65;flex:1}
.r21-latest-card>a{align-self:flex-start;color:var(--r21-cyan);font-weight:900;text-decoration:none;letter-spacing:.04em}
.r21-latest-card>a:hover,.r21-latest-card>a:focus-visible{color:#fff;text-shadow:0 0 10px rgba(99,232,255,.3)}
.r21-latest-journal-cta{margin-top:24px}
@media(max-width:760px){.r21-latest-grid{grid-template-columns:1fr}.r21-latest-card{min-height:0}}

/* ===== R02 functional foundation: r21-title-effects.css ===== */
/* ALEXX SkyRider™ R21C — R20B title atmosphere adapted to R21 headings.
   Scope: R21 section titles / numbered title badges only. */

:root{
  --gate-arcade-red:#ff3b30;
  --gate-arcade-orange:#ff7a00;
  --gate-arcade-yellow:#ffe81f;
  --gate-arcade-lime:#b6ff2f;
  --gate-arcade-green:#53ff74;
  --gate-arcade-cyan:#2fe5ff;
  --gate-arcade-blue:#2f6bff;
  --gate-arcade-violet:#b02fff;
  --gate-arcade-magenta:#ff2fd4;
  --gate-arcade-cream:#fff9e0;
}

/* Preserve the R21B heading frame, but let R20B's neon palette drive it. */
.r21-heading{
  --gate-title-neon:var(--gate-arcade-cyan);
  --gate-title-delay:0s;
  border-color:color-mix(in srgb,var(--gate-title-neon) 24%,transparent);
  box-shadow:
    0 18px 36px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 26px color-mix(in srgb,var(--gate-title-neon) 5%,transparent);
}

.r21-heading>span{
  color:var(--gate-arcade-cream);
  border-color:color-mix(in srgb,var(--gate-title-neon) 42%,transparent);
  text-shadow:
    0 0 4px var(--gate-arcade-cream),
    0 0 10px var(--gate-title-neon),
    0 0 20px var(--gate-title-neon);
  box-shadow:
    0 0 18px color-mix(in srgb,var(--gate-title-neon) 16%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--gate-title-neon) 10%,transparent);
}

/* R20B neon breathe, adapted from .section-title to .r21-heading h2. */
.r21-heading h2.gate-retro-title{
  --gate-title-neon:inherit;
  --gate-title-delay:inherit;
  position:relative;
  isolation:isolate;
  color:var(--gate-arcade-cream)!important;
  text-shadow:
    0 0 4px var(--gate-arcade-cream),
    0 0 10px var(--gate-title-neon),
    0 0 22px var(--gate-title-neon),
    0 0 36px var(--gate-title-neon);
  animation:gate-neon-breathe 3.15s ease-in-out infinite alternate;
  animation-delay:var(--gate-title-delay);
  animation-play-state:paused;
  will-change:text-shadow,filter;
}

.r21-heading h2.gate-retro-title.gate-title-inview{
  animation-play-state:running;
}

@keyframes gate-neon-breathe{
  0%{
    text-shadow:
      0 0 4px var(--gate-arcade-cream),
      0 0 8px var(--gate-title-neon),
      0 0 16px var(--gate-title-neon),
      0 0 26px var(--gate-title-neon);
    filter:saturate(1.02) brightness(.98);
  }
  100%{
    text-shadow:
      0 0 6px var(--gate-arcade-cream),
      0 0 14px var(--gate-title-neon),
      0 0 28px var(--gate-title-neon),
      0 0 46px var(--gate-title-neon),
      0 0 62px var(--gate-title-neon);
    filter:saturate(1.16) brightness(1.05);
  }
}

/* Reset R21B's static h2 underline pseudo-element so ::before/::after can be the R20B CRT split. */
.r21-heading h2.gate-retro-title::before,
.r21-heading h2.gate-retro-title::after{
  content:attr(data-gate-retro-text);
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-transform:inherit;
  text-shadow:none;
  white-space:normal;
  display:block;
  width:auto;
  height:auto;
  margin:0;
  background:none;
  background-size:auto;
  border-radius:0;
  box-shadow:none;
}

.r21-heading h2.gate-retro-title::before{
  color:var(--gate-arcade-magenta);
  animation:gate-glitch-a 3.45s infinite linear;
  animation-delay:var(--gate-title-delay);
  animation-play-state:paused;
}

.r21-heading h2.gate-retro-title::after{
  color:var(--gate-arcade-cyan);
  animation:gate-glitch-b 2.85s infinite linear;
  animation-delay:calc(var(--gate-title-delay) - .72s);
  animation-play-state:paused;
}

.r21-heading h2.gate-retro-title.gate-title-inview::before,
.r21-heading h2.gate-retro-title.gate-title-inview::after{
  animation-play-state:running;
}

@keyframes gate-glitch-a{
  0%,89%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
  90%{opacity:.64;transform:translate(-3px,-1px);clip-path:inset(10% 0 58% 0)}
  92%{opacity:.42;transform:translate(2px,1px);clip-path:inset(43% 0 23% 0)}
  94%{opacity:.56;transform:translate(-1px,0);clip-path:inset(69% 0 6% 0)}
  96%,98%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
}

@keyframes gate-glitch-b{
  0%,84%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
  85%{opacity:.58;transform:translate(3px,1px);clip-path:inset(56% 0 12% 0)}
  87%{opacity:.40;transform:translate(-2px,-1px);clip-path:inset(13% 0 52% 0)}
  89%{opacity:.52;transform:translate(1px,0);clip-path:inset(73% 0 4% 0)}
  91%,98%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
}

/* R20B scanner underline. This replaces R21B's static/gradient title bar. */
.r21-heading h2.gate-retro-title > .gate-title-scan{
  position:absolute;
  left:50%;
  bottom:-13px;
  width:min(360px,76%);
  height:2px;
  transform:translateX(-50%) scaleX(.45);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--gate-title-neon),rgba(255,255,255,.72),var(--gate-title-neon),transparent);
  box-shadow:0 0 8px var(--gate-title-neon),0 0 16px rgba(255,255,255,.18);
  opacity:.55;
  animation:gate-scan-line 3.7s ease-in-out infinite;
  animation-delay:var(--gate-title-delay);
  animation-play-state:paused;
  pointer-events:none;
}

.r21-heading h2.gate-retro-title.gate-title-inview > .gate-title-scan{
  animation-play-state:running;
}

@keyframes gate-scan-line{
  0%,100%{transform:translateX(-50%) scaleX(.45);opacity:.50}
  50%{transform:translateX(-50%) scaleX(1);opacity:1}
}

/* Let the active title color echo subtly into the R21 heading frame. */
.r21-heading.gate-heading-inview{
  border-color:color-mix(in srgb,var(--gate-title-neon) 34%,transparent);
  box-shadow:
    0 18px 36px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 28px color-mix(in srgb,var(--gate-title-neon) 7%,transparent),
    0 0 22px color-mix(in srgb,var(--gate-title-neon) 6%,transparent);
}

@media(max-width:720px){
  .r21-heading h2.gate-retro-title{
    text-shadow:
      0 0 4px var(--gate-arcade-cream),
      0 0 9px var(--gate-title-neon),
      0 0 18px var(--gate-title-neon),
      0 0 28px var(--gate-title-neon);
  }
  .r21-heading h2.gate-retro-title > .gate-title-scan{width:min(280px,72%)}
}

@media(prefers-reduced-motion:reduce){
  .r21-heading h2.gate-retro-title,
  .r21-heading h2.gate-retro-title::before,
  .r21-heading h2.gate-retro-title::after,
  .r21-heading h2.gate-retro-title > .gate-title-scan{
    animation:none!important;
  }
  .r21-heading h2.gate-retro-title::before,
  .r21-heading h2.gate-retro-title::after{display:none!important}
  .r21-heading h2.gate-retro-title > .gate-title-scan{
    transform:translateX(-50%) scaleX(.78)!important;
    opacity:.72!important;
  }
}

/* ===== R02 functional foundation: r24-visual-test.css ===== */
/* =========================================================
   ALEXX SkyRider™ — R24 VISUAL TEST
   Capa visual solamente.
   No modifica demos, textos ni lógica.
   ========================================================= */

:root{
  --r24-bg:#03060b;
  --r24-panel:#08121b;
  --r24-panel-2:#0d1822;

  --r24-cyan:#2fe5ff;
  --r24-blue:#2f6bff;
  --r24-red:#ff3b30;
  --r24-orange:#ff7a00;
  --r24-yellow:#ffe81f;
  --r24-magenta:#ff2fd4;

  --r24-text:#fff9e8;
  --r24-dim:#b8c9d4;
}


/* =========================================================
   FONDO GENERAL / ATMÓSFERA
   ========================================================= */

body.r21-gate{
  background:
    radial-gradient(circle at 18% 14%,
      rgba(255,47,212,.14),
      transparent 26%),

    radial-gradient(circle at 82% 12%,
      rgba(47,229,255,.14),
      transparent 28%),

    radial-gradient(circle at 50% 88%,
      rgba(255,122,0,.07),
      transparent 34%),

    linear-gradient(
      180deg,
      #02050a 0%,
      #040912 45%,
      #03070c 100%
    );

  color:var(--r24-text);
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.r21-topbar{
  background:
    linear-gradient(
      180deg,
      rgba(3,8,14,.96),
      rgba(3,8,14,.86)
    );

  border-bottom:
    1px solid rgba(47,229,255,.38);

  box-shadow:
    0 8px 28px rgba(0,0,0,.34),
    0 0 24px rgba(47,229,255,.08);
}

.r21-brand{
  text-shadow:
    0 0 6px rgba(255,255,255,.30),
    0 0 14px rgba(47,229,255,.34);
}

.r21-brand span{
  color:var(--r24-cyan);
}


/* =========================================================
   BOTONES NAVEGACIÓN
   ========================================================= */

.r21-nav a,
.r21-nav-button{
  border:
    1px solid rgba(47,229,255,.38);

  background:
    linear-gradient(
      180deg,
      rgba(10,24,34,.95),
      rgba(4,12,19,.95)
    );

  color:#f7fdff;

  box-shadow:
    inset 0 0 16px rgba(47,229,255,.05),
    0 0 12px rgba(47,229,255,.06);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.r21-nav a:hover,
.r21-nav-button:hover{
  transform:translateY(-1px);

  border-color:var(--r24-orange);

  box-shadow:
    0 0 10px rgba(255,122,0,.22),
    0 0 22px rgba(47,229,255,.12);
}


/* =========================================================
   SECCIONES
   ========================================================= */

.r21-section{
  border-bottom:
    1px solid rgba(255,255,255,.07);

  padding-top:
    clamp(62px,8vw,108px);

  padding-bottom:
    clamp(62px,8vw,108px);
}


/* Más variedad de color entre zonas */

.era-retro{
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(255,47,212,.13),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 18%,
      rgba(47,229,255,.12),
      transparent 30%
    ),

    linear-gradient(
      180deg,
      #02050a,
      #050913
    );
}

.era-evolution{
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(47,107,255,.15),
      transparent 30%
    ),

    radial-gradient(
      circle at 8% 75%,
      rgba(255,122,0,.08),
      transparent 34%
    ),

    linear-gradient(
      180deg,
      #050913,
      #07121b
    );
}

.era-modern{
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(255,47,212,.08),
      transparent 28%
    ),

    radial-gradient(
      circle at 82% 8%,
      rgba(47,229,255,.12),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #07121b,
      #091722
    );
}


/* =========================================================
   TÍTULOS — MÁS PRESENCIA ARCADE
   ========================================================= */

.r21-heading{
  position:relative;
  margin-bottom:38px;
}

.r21-heading h2{
  color:#fff9e0;

  font-size:
    clamp(2rem,4.6vw,3.7rem);

  font-weight:950;

  letter-spacing:.015em;

  text-shadow:
    0 0 5px rgba(255,255,255,.55),
    0 0 12px rgba(47,229,255,.65),
    0 0 26px rgba(47,229,255,.32);
}


/* Barra grande estilo arcade */

.r21-heading::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-14px;

  width:min(420px,72vw);
  height:4px;

  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      var(--r24-magenta),
      var(--r24-orange),
      transparent
    );

  box-shadow:
    0 0 8px rgba(47,229,255,.75),
    0 0 16px rgba(255,47,212,.30);
}

.r21-heading>span{
  color:var(--r24-yellow);

  text-shadow:
    0 0 7px rgba(255,232,31,.5),
    0 0 16px rgba(255,122,0,.36);
}


/* =========================================================
   HERO
   ========================================================= */

.r21-hero{
  min-height:
    calc(100vh - 64px);

  grid-template-columns:
    minmax(0,1.3fr)
    minmax(300px,.7fr);

  gap:
    clamp(30px,5vw,76px);
}


/* VIDEO DE FONDO HERO MÁS VISIBLE */

.r21-hero-video{
  opacity:.36;

  filter:
    saturate(1.22)
    contrast(1.08)
    brightness(.83);
}

.r21-hero-video-wrap::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(2,5,10,.35),
      rgba(2,5,10,.65)
    );
}


/* Logo protagonista */

.r21-hero-logo{
  width:min(100%,760px);

  margin:
    2px 0 18px;

  filter:
    drop-shadow(
      0 0 12px rgba(255,255,255,.10)
    )
    drop-shadow(
      0 0 26px rgba(47,229,255,.24)
    )
    drop-shadow(
      0 8px 24px rgba(255,59,48,.18)
    );
}


/* Nave derecha */

.r21-crt-window{
  border:
    2px solid rgba(47,229,255,.55);

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(20,56,74,.95),
      #020609 72%
    );

  box-shadow:
    0 0 28px rgba(47,229,255,.24),
    0 0 64px rgba(255,47,212,.10),
    inset 0 0 88px rgba(47,229,255,.10);
}


/* =========================================================
   TEXTO
   ========================================================= */

.r21-copy,
.r21-note,
.r21-support{
  color:var(--r24-dim);
}

.r21-copy{
  line-height:1.82;
}

.r21-copy strong{
  color:#fff;
}


/* =========================================================
   BOTONES PRINCIPALES
   ========================================================= */

.r21-btn{
  border:
    1px solid rgba(47,229,255,.55);

  background:
    linear-gradient(
      180deg,
      rgba(11,28,40,.96),
      rgba(5,15,23,.96)
    );

  box-shadow:
    inset 0 0 18px rgba(47,229,255,.07),
    0 0 16px rgba(47,229,255,.08);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.r21-btn.primary{
  background:
    linear-gradient(
      135deg,
      #0b6b8c,
      #1741a4 58%,
      #4b1b81
    );

  box-shadow:
    0 0 18px rgba(47,229,255,.22),
    0 0 30px rgba(47,107,255,.15);
}

.r21-btn:hover{
  transform:translateY(-2px);

  border-color:var(--r24-orange);

  box-shadow:
    0 0 14px rgba(255,122,0,.22),
    0 0 26px rgba(47,229,255,.12);
}


/* =========================================================
   TARJETAS / MARCOS
   ========================================================= */

.r21-controls-grid>div,
.r21-face-band,
.r21-latest-card,
.r21-era-track,
.r21-progression{
  background:
    linear-gradient(
      180deg,
      rgba(10,24,34,.88),
      rgba(3,10,16,.90)
    );

  border-color:
    rgba(47,229,255,.22);

  box-shadow:
    inset 0 0 24px rgba(47,229,255,.025),
    0 12px 30px rgba(0,0,0,.22);
}


/* =========================================================
   IMÁGENES / VIDEOS
   ========================================================= */

.r21-face-video,
video{
  border-radius:14px;
}

.r21-face-video{
  box-shadow:
    0 0 20px rgba(47,229,255,.10);
}


/* =========================================================
   MOBILE-FIRST VERTICAL
   Android + iOS
   ========================================================= */

@media(max-width:820px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .r21-topbar{
    position:relative;

    flex-direction:column;

    align-items:center;

    gap:12px;

    padding:
      14px 14px 16px;
  }

  .r21-brand{
    text-align:center;
  }

  .r21-nav{
    width:100%;

    justify-content:center;

    gap:8px;
  }

  .r21-nav a,
  .r21-nav-button{
    min-height:44px;

    padding:
      10px 12px;

    white-space:normal;

    text-align:center;
  }


  .r21-section{
    padding:
      52px 18px;
  }


  .r21-hero{
    min-height:auto;

    display:flex;

    flex-direction:column;

    grid-template-columns:none;

    gap:30px;

    padding-top:38px;
    padding-bottom:54px;
  }


  .r21-hero-copy{
    width:100%;
  }


  .r21-hero-logo{
    width:100%;

    max-width:620px;

    margin:
      0 auto 18px;
  }


  .r21-hero-figure{
    width:100%;

    max-width:460px;

    margin:auto;
  }


  .r21-heading{
    display:block;

    margin-bottom:42px;
  }


  .r21-heading>span{
    display:block;

    margin-bottom:10px;
  }


  .r21-heading h2{
    font-size:
      clamp(1.7rem,8vw,2.6rem);

    line-height:1.08;

    overflow-wrap:anywhere;
  }


  .r21-heading::after{
    width:min(330px,85vw);
  }


  .r21-copy,
  .r21-note,
  .r21-support{
    font-size:1rem;

    line-height:1.78;

    overflow-wrap:anywhere;
  }


  .r21-actions{
    width:100%;
  }


  .r21-btn{
    min-height:48px;

    width:100%;

    text-align:center;
  }


  video,
  img{
    max-width:100%;
    height:auto;
  }


  .r21-with-figure,
  .r21-downward-demo,
  .r21-resource-layout,
  .r21-face-band{
    grid-template-columns:
      minmax(0,1fr);
  }


  .r21-face-route{
    width:100%;
  }
}


/* =========================================================
   REDUCE MOTION / ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
  }
}
/* =========================================================
   R24 — HERO LIMPIO
   Desactiva video de fondo y nave giratoria lateral.
   No modifica HTML ni lógica.
   ========================================================= */

#hero .r21-hero-video-wrap,
#hero .r21-hero-figure{
  display:none !important;
}


/* Hero centrado y más limpio */

#hero.r21-hero{
  display:flex;
  justify-content:center;
  align-items:center;

  min-height:calc(100vh - 70px);

  padding:
    clamp(70px,9vw,130px)
    clamp(20px,6vw,90px);

  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(255,47,212,.18),
      transparent 30%
    ),

    radial-gradient(
      circle at 78% 24%,
      rgba(47,229,255,.18),
      transparent 32%
    ),

    radial-gradient(
      circle at 50% 92%,
      rgba(255,122,0,.10),
      transparent 38%
    ),

    linear-gradient(
      180deg,
      #020409 0%,
      #06101a 55%,
      #03070c 100%
    );
}


/* Contenido principal */

#hero .r21-hero-copy{
  width:min(100%,920px);

  margin:0 auto;

  text-align:center;

  position:relative;
  z-index:2;
}


/* Logo protagonista */

#hero .r21-hero-logo{
  width:min(100%,720px);

  display:block;

  margin:
    20px auto 28px;

  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.12))
    drop-shadow(0 0 28px rgba(47,229,255,.24))
    drop-shadow(0 14px 35px rgba(255,59,48,.20));
}


/* Kicker superior */

#hero .r21-kicker{
  display:inline-block;

  margin:0 auto 18px;

  padding:9px 16px;

  border:
    1px solid rgba(47,229,255,.45);

  border-radius:999px;

  background:
    rgba(3,10,16,.72);

  color:var(--r24-cyan);

  box-shadow:
    0 0 18px rgba(47,229,255,.10);

  letter-spacing:.16em;
}


/* PLUG AND PLAY */

#hero .r21-slogan{
  display:inline-block;

  margin:
    4px auto 14px;

  padding:
    10px 24px;

  border:
    1px solid rgba(47,229,255,.48);

  border-radius:8px;

  background:
    linear-gradient(
      180deg,
      rgba(10,29,40,.92),
      rgba(4,12,18,.94)
    );

  color:#eaffff;

  font-size:
    clamp(1.4rem,3vw,2.2rem);

  font-weight:950;

  letter-spacing:.16em;

  text-shadow:
    0 0 8px rgba(47,229,255,.72);

  box-shadow:
    0 0 18px rgba(47,229,255,.10),
    inset 0 0 18px rgba(47,229,255,.05);
}


/* Frase principal */

#hero .r21-impact{
  width:fit-content;
  max-width:100%;

  margin:
    0 auto 16px;

  padding:
    10px 18px;

  border-left:
    3px solid var(--r24-orange);

  border-right:
    3px solid var(--r24-cyan);

  background:
    linear-gradient(
      90deg,
      rgba(255,122,0,.08),
      rgba(47,229,255,.06)
    );

  color:#fff;

  font-size:
    clamp(1.05rem,2vw,1.45rem);

  font-weight:900;

  letter-spacing:.035em;

  text-shadow:
    0 0 8px rgba(255,255,255,.18);
}


/* Texto secundario */

#hero .r21-support{
  max-width:650px;

  margin:
    14px auto 24px;

  color:#c9dce5;

  text-align:center;
}


/* Botones */

#hero .r21-actions{
  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:14px;

  margin-top:26px;
}


/* Línea luminosa decorativa */

#hero .r21-hero-copy::after{
  content:"";

  display:block;

  width:min(560px,78vw);

  height:3px;

  margin:
    34px auto 0;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--r24-cyan),
      var(--r24-magenta),
      var(--r24-orange),
      transparent
    );

  box-shadow:
    0 0 12px rgba(47,229,255,.42);
}


/* =========================================================
   MÓVIL VERTICAL
   ========================================================= */

@media(max-width:820px){

  #hero.r21-hero{
    min-height:auto;

    padding:
      54px 18px 62px;
  }


  #hero .r21-hero-logo{
    width:min(100%,520px);

    margin:
      14px auto 22px;
  }


  #hero .r21-kicker{
    font-size:.72rem;

    line-height:1.4;
  }


  #hero .r21-slogan{
    width:100%;

    max-width:420px;

    font-size:
      clamp(1.25rem,7vw,1.8rem);

    letter-spacing:.12em;
  }


  #hero .r21-impact{
    width:100%;

    font-size:
      clamp(.98rem,4.5vw,1.2rem);

    line-height:1.35;
  }


  #hero .r21-actions{
    flex-direction:column;

    width:100%;
  }


  #hero .r21-btn{
    width:100%;

    max-width:420px;

    margin:0 auto;
  }
}
/* =========================================================
   R24 — HERO AJUSTE 02
   Elimina apariencia de tarjeta negra y compacta la portada.
   ========================================================= */

#hero .r21-hero-copy{
  width:min(100%,980px);

  padding:
    8px 18px 12px;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}


/* Por si la tarjeta viene de contenedores internos */

#hero .r21-hero-copy > *,
#hero .r21-hero-inner{
  box-shadow:none;
}


/* Hero más compacto */

#hero.r21-hero{
  min-height:auto;

  padding:
    clamp(44px,5vw,72px)
    clamp(18px,5vw,70px)
    clamp(50px,6vw,82px);
}


/* Logo un poco más compacto para que entren los slogans */

#hero .r21-hero-logo{
  width:min(100%,640px);

  margin:
    8px auto 20px;
}


/* Acercar el contenido superior */

#hero .r21-kicker{
  margin-bottom:10px;
}


/* PLUG AND PLAY más visible */

#hero .r21-slogan{
  margin:
    0 auto 12px;
}


/* Frase principal */

#hero .r21-impact{
  margin:
    0 auto 12px;
}


/* Menos separación en textos y botones */

#hero .r21-support{
  margin:
    10px auto 18px;
}

#hero .r21-actions{
  margin-top:18px;
}


/* Línea decorativa más cercana */

#hero .r21-hero-copy::after{
  margin-top:24px;
}


/* =========================================================
   MÓVIL VERTICAL
   ========================================================= */

@media(max-width:820px){

  #hero.r21-hero{
    padding:
      34px 16px 48px;
  }

  #hero .r21-hero-copy{
    padding:
      0;
  }

  #hero .r21-hero-logo{
    width:min(100%,480px);

    margin:
      6px auto 16px;
  }

  #hero .r21-kicker{
    margin-bottom:8px;
  }

  #hero .r21-slogan{
    margin-bottom:10px;
  }

  #hero .r21-impact{
    margin-bottom:10px;
  }

}
/* =========================================================
   R24 — NEÓN DEL LOGO
   Halo arcade controlado.
   ========================================================= */

#hero .r21-hero-logo{
  position:relative;

  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.18))
    drop-shadow(0 0 14px rgba(47,229,255,.48))
    drop-shadow(0 0 28px rgba(47,107,255,.34))
    drop-shadow(0 0 42px rgba(255,59,48,.20));
}


/* Aura suave detrás del logo */

#hero .r21-hero-copy{
  position:relative;
}

#hero .r21-hero-copy::before{
  content:"";

  position:absolute;

  left:50%;
  top:48%;

  width:min(760px,88vw);
  height:min(420px,54vw);

  transform:translate(-50%,-50%);

  pointer-events:none;

  z-index:-1;

  background:
    radial-gradient(
      ellipse at center,
      rgba(47,229,255,.18) 0%,
      rgba(47,107,255,.10) 32%,
      rgba(255,59,48,.07) 52%,
      transparent 72%
    );

  filter:blur(24px);

  opacity:.95;
}


/* Ligero pulso de luz */

@keyframes r24-logo-glow{
  0%,100%{
    filter:
      drop-shadow(0 0 6px rgba(255,255,255,.16))
      drop-shadow(0 0 14px rgba(47,229,255,.44))
      drop-shadow(0 0 28px rgba(47,107,255,.30))
      drop-shadow(0 0 40px rgba(255,59,48,.16));
  }

  50%{
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.22))
      drop-shadow(0 0 18px rgba(47,229,255,.58))
      drop-shadow(0 0 34px rgba(47,107,255,.38))
      drop-shadow(0 0 48px rgba(255,59,48,.22));
  }
}

#hero .r21-hero-logo{
  animation:
    r24-logo-glow 4.8s ease-in-out infinite;
}


/* Accesibilidad */

@media(prefers-reduced-motion:reduce){

  #hero .r21-hero-logo{
    animation:none !important;
  }

}
/* =========================================================
   R24 — HERO NEGRO + NUBES DE COLOR
   Reduce saturación azul y deja lucir el neón del logo.
   ========================================================= */

/* Hero con fondo más negro y atmósfera en nubes suaves */

#hero.r21-hero{
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(255, 40, 140, .16) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 24%,
      rgba(0, 220, 255, .14) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 82%,
      rgba(255, 110, 0, .10) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 52% 46%,
      rgba(80, 120, 255, .06) 0%,
      transparent 22%
    ),
    linear-gradient(
      180deg,
      #010203 0%,
      #020406 48%,
      #010203 100%
    ) !important;
}


/* Reforzar el negro del área central */

#hero .r21-hero-copy{
  background:transparent !important;
}


/* Aura del logo más limpia y menos azul saturado */

#hero .r21-hero-copy::before{
  width:min(720px,86vw);
  height:min(390px,52vw);

  background:
    radial-gradient(
      ellipse at center,
      rgba(47,229,255,.12) 0%,
      rgba(47,107,255,.06) 24%,
      rgba(255,59,48,.08) 44%,
      rgba(255,47,212,.05) 58%,
      transparent 74%
    );

  filter:blur(28px);
  opacity:.78;
}


/* Neón del logo menos agresivo y más elegante */

#hero .r21-hero-logo{
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.14))
    drop-shadow(0 0 10px rgba(47,229,255,.30))
    drop-shadow(0 0 20px rgba(47,107,255,.18))
    drop-shadow(0 0 28px rgba(255,59,48,.14));
}


/* Pulso más sutil */

@keyframes r24-logo-glow-soft{
  0%,100%{
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,.12))
      drop-shadow(0 0 10px rgba(47,229,255,.26))
      drop-shadow(0 0 18px rgba(47,107,255,.16))
      drop-shadow(0 0 26px rgba(255,59,48,.12));
  }

  50%{
    filter:
      drop-shadow(0 0 6px rgba(255,255,255,.18))
      drop-shadow(0 0 14px rgba(47,229,255,.34))
      drop-shadow(0 0 24px rgba(47,107,255,.22))
      drop-shadow(0 0 32px rgba(255,59,48,.16));
  }
}

#hero .r21-hero-logo{
  animation:r24-logo-glow-soft 5.2s ease-in-out infinite;
}
/* =========================================================
   R24 — HERO NEGRO TOTAL + NEÓN DE FONDO MÁS INTENSO
   ========================================================= */

/* Fondo completamente oscuro */
#hero.r21-hero{
  position: relative;
  overflow: hidden;

  background: #010203 !important;
}

/* Quitamos fondos previos visibles */
#hero .r21-hero-copy::before{
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Halo general de fondo detrás del contenido */
#hero.r21-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(circle at 50% 38%,
      rgba(47,229,255,.16) 0%,
      rgba(47,229,255,.10) 12%,
      rgba(47,107,255,.06) 22%,
      transparent 42%),
    radial-gradient(circle at 50% 42%,
      rgba(255,47,212,.10) 0%,
      transparent 34%),
    radial-gradient(circle at 50% 46%,
      rgba(255,122,0,.08) 0%,
      transparent 30%);

  filter: blur(26px);
  opacity: .95;

  animation: r24-hero-neon-pulse 2.8s ease-in-out infinite;
}

/* Asegurar que el contenido quede encima */
#hero .r21-hero-copy{
  position: relative;
  z-index: 2;
}

/* Logo con neón más fuerte */
#hero .r21-hero-logo{
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.18))
    drop-shadow(0 0 14px rgba(47,229,255,.44))
    drop-shadow(0 0 24px rgba(47,229,255,.34))
    drop-shadow(0 0 36px rgba(47,107,255,.26))
    drop-shadow(0 0 46px rgba(255,59,48,.18));

  animation: r24-logo-glow-strong 2.8s ease-in-out infinite;
}

/* Pulso del fondo */
@keyframes r24-hero-neon-pulse{
  0%,100%{
    opacity:.72;
    filter: blur(22px);
  }

  50%{
    opacity:1;
    filter: blur(34px);
  }
}

/* Pulso del logo */
@keyframes r24-logo-glow-strong{
  0%,100%{
    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.16))
      drop-shadow(0 0 12px rgba(47,229,255,.36))
      drop-shadow(0 0 20px rgba(47,229,255,.28))
      drop-shadow(0 0 30px rgba(47,107,255,.22))
      drop-shadow(0 0 38px rgba(255,59,48,.14));
  }

  50%{
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.22))
      drop-shadow(0 0 18px rgba(47,229,255,.58))
      drop-shadow(0 0 30px rgba(47,229,255,.42))
      drop-shadow(0 0 42px rgba(47,107,255,.30))
      drop-shadow(0 0 54px rgba(255,59,48,.22));
  }
}

/* Accesibilidad */
@media(prefers-reduced-motion:reduce){
  #hero.r21-hero::before,
  #hero .r21-hero-logo{
    animation:none !important;
  }
}
/* =========================================================
   R24 — SLOGANS HERO
   PLUG AND PLAY + DOWNWARD VERTICAL ACTION
   ========================================================= */

#hero .r21-slogan{
  position:relative;

  display:inline-block;

  margin:
    2px auto 14px;

  padding:
    12px 28px;

  border:
    1px solid rgba(47,229,255,.62);

  border-radius:10px;

  background:
    linear-gradient(
      180deg,
      rgba(8,18,28,.96),
      rgba(2,7,11,.98)
    );

  color:#f3ffff;

  font-size:
    clamp(1.35rem,2.8vw,2.1rem);

  font-weight:950;

  letter-spacing:.16em;

  text-shadow:
    0 0 6px rgba(255,255,255,.24),
    0 0 12px rgba(47,229,255,.72),
    0 0 24px rgba(47,229,255,.34);

  box-shadow:
    0 0 12px rgba(47,229,255,.18),
    0 0 26px rgba(47,229,255,.10),
    inset 0 0 18px rgba(47,229,255,.05);

  animation:
    r24-slogan-pulse 3.4s ease-in-out infinite;
}


/* Barra luminosa inferior */

#hero .r21-slogan::after{
  content:"";

  position:absolute;

  left:10%;
  right:10%;
  bottom:-8px;

  height:2px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--r24-cyan),
      var(--r24-magenta),
      var(--r24-orange),
      transparent
    );

  box-shadow:
    0 0 8px rgba(47,229,255,.55);
}


/* Frase principal */

#hero .r21-impact{
  display:inline-block;

  width:auto;
  max-width:100%;

  margin:
    8px auto 12px;

  padding:
    9px 18px;

  border:none;

  background:transparent;

  color:#ffffff;

  font-size:
    clamp(1.05rem,2vw,1.4rem);

  font-weight:900;

  letter-spacing:.05em;

  text-shadow:
    0 0 5px rgba(255,255,255,.18),
    0 0 10px rgba(255,122,0,.28);
}


/* pequeño detalle de color */

#hero .r21-impact::before{
  content:"";

  display:inline-block;

  width:9px;
  height:9px;

  margin-right:10px;

  border-radius:50%;

  background:var(--r24-orange);

  box-shadow:
    0 0 8px rgba(255,122,0,.85),
    0 0 16px rgba(255,59,48,.45);

  vertical-align:middle;
}


/* Pulso suave */

@keyframes r24-slogan-pulse{
  0%,100%{
    box-shadow:
      0 0 10px rgba(47,229,255,.16),
      0 0 22px rgba(47,229,255,.08),
      inset 0 0 16px rgba(47,229,255,.04);
  }

  50%{
    box-shadow:
      0 0 16px rgba(47,229,255,.32),
      0 0 34px rgba(47,229,255,.16),
      inset 0 0 22px rgba(47,229,255,.08);
  }
}


/* =========================================================
   MÓVIL VERTICAL
   ========================================================= */

@media(max-width:820px){

  #hero .r21-slogan{
    width:min(100%,420px);

    padding:
      11px 16px;

    font-size:
      clamp(1.15rem,6vw,1.65rem);

    letter-spacing:.11em;
  }


  #hero .r21-impact{
    width:100%;

    padding:
      8px 4px;

    font-size:
      clamp(.95rem,4.4vw,1.15rem);

    line-height:1.4;
  }

}


/* Accesibilidad */

@media(prefers-reduced-motion:reduce){

  #hero .r21-slogan{
    animation:none !important;
  }

}
/* =========================================================
   R24 — TITULOS GLOBALES LIMPIOS
   Quita la tarjeta grande de todas las secciones.
   ========================================================= */

.r21-section .r21-heading{
  width:100% !important;

  padding:0 !important;
  margin-bottom:42px !important;

  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}


/* Número de sección */

.r21-section .r21-heading > span{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:42px;
  height:42px;

  margin:0 0 12px 0;

  padding:0 10px;

  border-radius:10px;

  background:rgba(5,8,12,.88);

  box-shadow:
    0 0 10px rgba(47,229,255,.12);
}


/* Título sin caja */

.r21-section .r21-heading h2{
  margin:0 !important;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}


/* Barra luminosa */

.r21-section .r21-heading::after{
  left:0;

  width:min(520px,82vw);

  height:4px;

  bottom:-18px;

  border-radius:999px;
}


/* Móvil */

@media(max-width:820px){

  .r21-section .r21-heading{
    margin-bottom:38px !important;
  }

  .r21-section .r21-heading > span{
    min-width:38px;
    height:38px;
  }

}
/* =========================================================
   R24 — TITULOS SIN PANEL DE FONDO
   ========================================================= */

.r21-section .r21-heading,
.r21-section .r21-heading h2,
.r21-section .r21-heading h2::before,
.r21-section .r21-heading h2::after{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
/* =========================================================
   R24 — ELIMINAR PANEL RESIDUAL DE TITULOS
   ========================================================= */

.r21-section .r21-heading::before{
  content:none !important;
  display:none !important;

  background:none !important;
  border:none !important;
  box-shadow:none !important;
}
/* =========================================================
   R24 — WHAT IS ALEXX SKYRIDER
   Ilustración protagonista, sin tarjeta pesada.
   ========================================================= */

#what-is .r21-with-figure{
  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(300px,.85fr);

  gap:
    clamp(34px,6vw,86px);

  align-items:center;
}


/* Texto */

#what-is .r21-with-figure > div{
  max-width:760px;
}


/* G-Pajarraco grande */

#what-is .r21-sprite-medium{
  width:
    clamp(260px,29vw,430px) !important;

  max-width:100%;

  height:auto;

  justify-self:center;

  border:none !important;
  background:transparent !important;
  box-shadow:none !important;

  filter:
    drop-shadow(0 0 8px rgba(150,255,80,.22))
    drop-shadow(0 0 18px rgba(47,229,255,.16))
    drop-shadow(0 16px 28px rgba(0,0,0,.48));
}


/* Halo muy suave detrás del enemigo */

#what-is .r21-with-figure{
  position:relative;
}

#what-is .r21-with-figure::after{
  content:"";

  position:absolute;

  right:3%;
  top:50%;

  width:
    clamp(260px,32vw,460px);

  height:
    clamp(220px,28vw,390px);

  transform:
    translateY(-50%);

  z-index:0;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(150,255,70,.10),
      rgba(47,229,255,.05) 36%,
      transparent 70%
    );

  filter:blur(30px);
}


/* Mantener imagen encima del halo */

#what-is .r21-sprite-medium{
  position:relative;
  z-index:1;
}


/* =========================================================
   MÓVIL VERTICAL
   ========================================================= */

@media(max-width:820px){

  #what-is .r21-with-figure{
    grid-template-columns:
      minmax(0,1fr);

    gap:30px;
  }


  #what-is .r21-sprite-medium{
    width:
      min(78vw,360px) !important;

    margin:
      4px auto 0;
  }


  #what-is .r21-with-figure::after{
    left:50%;
    right:auto;

    top:auto;
    bottom:-20px;

    width:min(88vw,410px);
    height:280px;

    transform:
      translateX(-50%);
  }

}
/* =========================================================
   R24 — G-PAJARRACO CRT MODERADO
   Reduce ampliación y lo presenta como monitor arcade.
   ========================================================= */

#what-is .r21-sprite-medium{
  width:
    clamp(170px,19vw,260px) !important;

  max-width:100%;
  height:auto;

  display:block;

  margin:auto;

  image-rendering:pixelated;

  filter:
    drop-shadow(0 0 6px rgba(140,255,80,.22))
    drop-shadow(0 0 12px rgba(47,229,255,.12));
}


/* Contenedor visual CRT */

#what-is .r21-with-figure{
  position:relative;
}


/* Si la imagen está dentro de figure */

#what-is figure{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:300px;

  padding:28px;

  border:
    1px solid rgba(47,229,255,.32);

  border-radius:16px;

  background:
    radial-gradient(
      circle at center,
      rgba(20,54,45,.34),
      rgba(2,7,10,.94) 68%
    );

  box-shadow:
    inset 0 0 45px rgba(47,229,255,.05),
    0 0 16px rgba(47,229,255,.08);

  overflow:hidden;
}


/* Scanlines CRT muy suaves */

#what-is figure::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 4px
    );

  opacity:.38;
}


/* Halo anterior más pequeño */

#what-is .r21-with-figure::after{
  width:300px;
  height:250px;

  opacity:.55;
}


/* Móvil */

@media(max-width:820px){

  #what-is .r21-sprite-medium{
    width:
      min(58vw,230px) !important;
  }

  #what-is figure{
    width:100%;
    max-width:400px;

    min-height:270px;

    margin:auto;

    padding:24px;
  }

}
/* =========================================================
   R24 — NAVE ORIENTADA HACIA ABAJO
   Solo cambia la orientación visual.
   ========================================================= */

#downward-action .r21-route-ship{
  transform: scaleY(-1);
}
/* =========================================================
   R24 — PILOT CONTROLS
   Paneles arcade ligeros.
   ========================================================= */

#controls .r21-controls-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;

  margin-top:22px;
}


/* Tarjetas */

#controls .r21-controls-grid > div{
  min-height:92px;

  padding:
    16px 14px;

  border:
    1px solid rgba(47,229,255,.22);

  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      rgba(5,12,18,.90),
      rgba(2,6,10,.96)
    );

  box-shadow:
    inset 0 0 18px rgba(47,229,255,.025),
    0 0 12px rgba(0,0,0,.30);
}


/* Teclas */

#controls kbd{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:34px;
  height:32px;

  margin:
    0 5px 12px 0;

  padding:
    0 9px;

  border:
    1px solid rgba(47,229,255,.45);

  border-radius:6px;

  background:#071017;

  color:#ffffff;

  font-weight:900;

  box-shadow:
    inset 0 0 9px rgba(47,229,255,.08),
    0 0 7px rgba(47,229,255,.10);

  text-shadow:
    0 0 5px rgba(47,229,255,.42);
}


/* Nombre de acción */

#controls .r21-controls-grid span{
  display:block;

  color:#d9f7ff;

  font-size:.78rem;

  font-weight:900;

  letter-spacing:.055em;
}


/* Un toque magenta en FIRE */

#controls .r21-controls-grid > div:nth-child(5) kbd{
  border-color:
    rgba(255,47,212,.50);

  box-shadow:
    inset 0 0 9px rgba(255,47,212,.07),
    0 0 8px rgba(255,47,212,.12);
}


/* PAUSE ligeramente naranja */

#controls .r21-controls-grid > div:nth-child(6) kbd{
  border-color:
    rgba(255,122,0,.50);

  box-shadow:
    inset 0 0 9px rgba(255,122,0,.06),
    0 0 8px rgba(255,122,0,.12);
}


/* Nota de gamepad */

#controls .r21-note{
  margin-top:18px;

  max-width:980px;

  color:#aebfc8;

  line-height:1.7;
}


/* =========================================================
   TABLET / PANTALLA ESTRECHA
   ========================================================= */

@media(max-width:900px){

  #controls .r21-controls-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   SMARTPHONE VERTICAL
   Android / iPhone
   ========================================================= */

@media(max-width:520px){

  #controls .r21-controls-grid{
    grid-template-columns:
      minmax(0,1fr);

    gap:10px;
  }


  #controls .r21-controls-grid > div{
    min-height:auto;

    padding:
      14px 14px;
  }


  #controls kbd{
    min-width:40px;
    height:36px;
  }

}
/* =========================================================
   R24 — FUEL & TNT
   Presentación visual ligera y equilibrada.
   ========================================================= */

#fuel-tnt .r21-fuel-layout{
  display:grid;

  grid-template-columns:
    minmax(150px,.65fr)
    minmax(0,1.7fr)
    minmax(150px,.65fr);

  gap:
    clamp(24px,4vw,52px);

  align-items:center;

  margin-top:26px;
}


/* Sprites */

#fuel-tnt .r21-fuel-layout img{
  width:
    clamp(95px,10vw,150px);

  max-width:100%;

  height:auto;

  margin:auto;

  image-rendering:pixelated;
}


/* Fuel */

#fuel-tnt .r21-fuel-layout > :first-child img{
  filter:
    drop-shadow(0 0 8px rgba(47,229,255,.38))
    drop-shadow(0 0 18px rgba(47,229,255,.18));
}


/* TNT */

#fuel-tnt .r21-fuel-layout > :last-child img{
  filter:
    drop-shadow(0 0 8px rgba(255,90,60,.40))
    drop-shadow(0 0 18px rgba(255,59,48,.20));
}


/* Texto central */

#fuel-tnt .r21-fuel-copy{
  max-width:720px;

  margin:auto;

  line-height:1.78;
}


/* Etiquetas */

#fuel-tnt .r21-fuel-layout strong,
#fuel-tnt .r21-fuel-layout figcaption{
  display:block;

  margin-top:8px;

  text-align:center;

  color:#ffffff;

  font-size:.78rem;

  font-weight:900;

  letter-spacing:.09em;
}


/* Móvil vertical */

@media(max-width:820px){

  #fuel-tnt .r21-fuel-layout{
    grid-template-columns:
      minmax(0,1fr);

    gap:24px;

    text-align:center;
  }


  #fuel-tnt .r21-fuel-layout img{
    width:
      min(32vw,130px);
  }


  #fuel-tnt .r21-fuel-copy{
    width:100%;

    text-align:left;
  }

}
/* =========================================================
   R24 — THE FIVE FACES
   Videos grandes + identidad visual propia por Face
   ========================================================= */

#faces .r21-face-journey{
  display:flex;
  flex-direction:column;
  gap:34px;

  margin-top:34px;
}


/* Cada Face: abierta sobre fondo negro */

#faces .r21-face-band{
  display:grid;

  grid-template-columns:
    minmax(320px, .95fr)
    minmax(0, 1.15fr)
    minmax(120px, .35fr);

  align-items:center;

  gap:
    clamp(28px,4vw,58px);

  padding:
    clamp(20px,3vw,34px);

  border:none !important;
  border-radius:18px;

  background:
    rgba(2,6,10,.62) !important;

  box-shadow:none !important;

  position:relative;
  overflow:hidden;
}


/* =========================================================
   VIDEO / PREVIEW GRANDE
   ========================================================= */

#faces .r21-face-preview{
  width:100%;
  max-width:520px;

  aspect-ratio:16 / 9;

  justify-self:center;

  border-radius:15px;

  overflow:hidden;

  border:
    1px solid rgba(47,229,255,.28);

  background:#010203;

  box-shadow:
    0 0 18px rgba(47,229,255,.10);

  position:relative;
}


#faces .r21-face-video{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  border-radius:15px;
}


/* Etiqueta LIVE */

#faces .r21-face-preview-tag{
  position:absolute;

  left:12px;
  bottom:10px;

  padding:
    6px 10px;

  border-radius:999px;

  background:
    rgba(1,7,10,.86);

  border:
    1px solid rgba(47,229,255,.38);

  color:#8ff7ff;

  font-size:.66rem;
  font-weight:900;

  letter-spacing:.12em;

  text-shadow:
    0 0 6px rgba(47,229,255,.42);
}


/* =========================================================
   NOMBRE Y TEXTO
   ========================================================= */

#faces .r21-face-copy{
  position:relative;
  z-index:2;
}


#faces .r21-face-copy > span{
  display:block;

  margin-bottom:10px;

  color:#ffffff;

  font-size:
    clamp(1.8rem,3.2vw,3rem);

  font-weight:950;

  line-height:1;

  letter-spacing:.035em;

  text-shadow:
    0 0 8px rgba(255,255,255,.16);
}


#faces .r21-face-copy p{
  max-width:620px;

  margin:0;

  color:#b8c8d1;

  font-size:
    clamp(.96rem,1.35vw,1.08rem);

  line-height:1.7;
}


/* =========================================================
   CRIATURA
   ========================================================= */

#faces .r21-face-creature{
  width:
    clamp(90px,10vw,150px) !important;

  max-width:100%;

  height:auto;

  justify-self:center;

  image-rendering:pixelated;

  position:relative;
  z-index:2;
}


/* =========================================================
   IDENTIDAD DE COLOR POR FACE
   ========================================================= */

/* DAY */

#faces .r21-face-band.day{
  box-shadow:
    inset 4px 0 0 rgba(47,229,255,.70) !important;
}

#faces .day .r21-face-copy > span{
  text-shadow:
    0 0 10px rgba(47,229,255,.50),
    0 0 22px rgba(47,229,255,.20);
}


/* NIGHT */

#faces .r21-face-band.night{
  box-shadow:
    inset 4px 0 0 rgba(65,95,255,.75) !important;
}

#faces .night .r21-face-copy > span{
  text-shadow:
    0 0 10px rgba(80,110,255,.60),
    0 0 24px rgba(80,80,255,.22);
}


/* CEMETERY */

#faces .r21-face-band.cemetery{
  box-shadow:
    inset 4px 0 0 rgba(190,55,255,.72) !important;
}

#faces .cemetery .r21-face-copy > span{
  text-shadow:
    0 0 10px rgba(205,70,255,.58),
    0 0 24px rgba(160,40,255,.20);
}


/* SNOW / ARCTIC */

#faces .r21-face-band.snow{
  box-shadow:
    inset 4px 0 0 rgba(130,220,255,.80) !important;
}

#faces .snow .r21-face-copy > span{
  text-shadow:
    0 0 10px rgba(140,230,255,.60),
    0 0 24px rgba(60,170,255,.22);
}


/* CANYON */

#faces .r21-face-band.canyon{
  box-shadow:
    inset 4px 0 0 rgba(255,125,35,.78) !important;
}

#faces .canyon .r21-face-copy > span{
  text-shadow:
    0 0 10px rgba(255,135,45,.62),
    0 0 24px rgba(255,80,20,.20);
}


/* =========================================================
   TABLET / 4:3
   ========================================================= */

@media(max-width:1050px){

  #faces .r21-face-band{
    grid-template-columns:
      minmax(270px,.9fr)
      minmax(0,1.1fr)
      minmax(90px,.28fr);

    gap:24px;
  }

}


/* =========================================================
   SMARTPHONE VERTICAL
   Android + iPhone
   ========================================================= */

@media(max-width:720px){

  #faces .r21-face-band{
    grid-template-columns:
      minmax(0,1fr);

    gap:20px;

    padding:
      18px 14px 24px;

    text-align:center;

    box-shadow:
      inset 0 3px 0 rgba(47,229,255,.45) !important;
  }


  #faces .r21-face-preview{
    width:100%;
    max-width:520px;

    margin:auto;
  }


  #faces .r21-face-copy{
    width:100%;
  }


  #faces .r21-face-copy p{
    margin:auto;

    text-align:left;
  }


  #faces .r21-face-creature{
    width:
      min(30vw,130px) !important;

    margin:auto;
  }

}
/* =========================================================
   R24 — ENEMIES & RECURRING THREATS
   Catálogo arcade más visual.
   ========================================================= */

#enemies .r21-enemy-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;

  margin-top:28px;
}


/* Tarjetas más ligeras */

#enemies .r21-enemy-grid > *{
  min-height:190px;

  padding:
    20px 16px;

  border:
    1px solid rgba(47,229,255,.16);

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.78),
      rgba(1,4,7,.92)
    );

  box-shadow:
    inset 0 0 22px rgba(47,229,255,.02);

  text-align:center;
}


/* Sprites */

#enemies .r21-enemy-grid img{
  width:
    clamp(78px,8vw,120px);

  max-width:100%;

  height:auto;

  margin:
    0 auto 12px;

  image-rendering:pixelated;
}


/* Halo alternado */

#enemies .r21-enemy-grid > *:nth-child(3n+1) img{
  filter:
    drop-shadow(0 0 8px rgba(47,229,255,.28))
    drop-shadow(0 0 18px rgba(47,229,255,.12));
}

#enemies .r21-enemy-grid > *:nth-child(3n+2) img{
  filter:
    drop-shadow(0 0 8px rgba(255,47,212,.25))
    drop-shadow(0 0 18px rgba(255,47,212,.10));
}

#enemies .r21-enemy-grid > *:nth-child(3n+3) img{
  filter:
    drop-shadow(0 0 8px rgba(255,122,0,.26))
    drop-shadow(0 0 18px rgba(255,122,0,.10));
}


/* Nombre */

#enemies .r21-enemy-grid strong,
#enemies .r21-enemy-grid h3{
  display:block;

  margin-bottom:8px;

  color:#ffffff;

  font-size:
    clamp(.9rem,1.4vw,1.05rem);

  font-weight:950;

  letter-spacing:.08em;

  text-shadow:
    0 0 6px rgba(47,229,255,.18);
}


/* Descripción */

#enemies .r21-enemy-grid p{
  margin:0 auto;

  max-width:260px;

  color:#aebec7;

  font-size:.88rem;

  line-height:1.55;
}


/* Tablet / 4:3 */

@media(max-width:1000px){

  #enemies .r21-enemy-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* Smartphone vertical */

@media(max-width:560px){

  #enemies .r21-enemy-grid{
    grid-template-columns:
      minmax(0,1fr);

    gap:12px;
  }


  #enemies .r21-enemy-grid > *{
    min-height:auto;

    padding:
      18px 14px;
  }


  #enemies .r21-enemy-grid img{
    width:
      min(30vw,105px);
  }

}
/* =========================================================
   R24 — GUARDIANS
   Más identidad visual sin forzar el pixel art.
   ========================================================= */

#guardians .r21-guardian-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));

  gap:12px;

  margin-top:26px;
}


/* Cada guardián */

#guardians .r21-guardian-grid > *{
  padding:
    18px 12px 16px;

  border:
    1px solid rgba(47,229,255,.14);

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.78),
      rgba(1,4,7,.94)
    );

  text-align:center;

  box-shadow:
    inset 0 0 18px rgba(47,229,255,.02);
}


/* Sprites */

#guardians .r21-guardian-grid img{
  width:
    clamp(72px,7vw,105px);

  max-width:100%;
  height:auto;

  margin:
    0 auto 10px;

  image-rendering:pixelated;
}


/* DAY */

#guardians .r21-guardian-grid > *:nth-child(1) img{
  filter:
    drop-shadow(0 0 8px rgba(47,229,255,.34))
    drop-shadow(0 0 18px rgba(47,229,255,.12));
}


/* NIGHT */

#guardians .r21-guardian-grid > *:nth-child(2) img{
  filter:
    drop-shadow(0 0 8px rgba(75,95,255,.40))
    drop-shadow(0 0 18px rgba(75,95,255,.14));
}


/* CEMETERY */

#guardians .r21-guardian-grid > *:nth-child(3) img{
  filter:
    drop-shadow(0 0 8px rgba(205,60,255,.34))
    drop-shadow(0 0 18px rgba(205,60,255,.12));
}


/* SNOW / ARCTIC */

#guardians .r21-guardian-grid > *:nth-child(4) img{
  filter:
    drop-shadow(0 0 8px rgba(150,230,255,.40))
    drop-shadow(0 0 18px rgba(100,190,255,.14));
}


/* CANYON */

#guardians .r21-guardian-grid > *:nth-child(5) img{
  filter:
    drop-shadow(0 0 8px rgba(255,125,35,.38))
    drop-shadow(0 0 18px rgba(255,90,20,.14));
}


/* Nombre de Face */

#guardians .r21-guardian-grid .r21-face-label{
  display:block;

  margin-bottom:5px;

  font-size:.72rem;

  font-weight:950;

  letter-spacing:.08em;

  color:var(--r24-cyan);
}


/* Nombre del guardián */

#guardians .r21-guardian-grid h3,
#guardians .r21-guardian-grid strong{
  display:block;

  margin-bottom:7px;

  color:#ffffff;

  font-size:
    clamp(.9rem,1.25vw,1rem);

  font-weight:950;
}


/* Descripción */

#guardians .r21-guardian-grid p{
  margin:0 auto;

  max-width:180px;

  color:#aebec7;

  font-size:.82rem;

  line-height:1.48;
}


/* Tablet / 4:3 */

@media(max-width:1050px){

  #guardians .r21-guardian-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


/* Smartphone vertical */

@media(max-width:620px){

  #guardians .r21-guardian-grid{
    grid-template-columns:
      minmax(0,1fr);

    gap:12px;
  }


  #guardians .r21-guardian-grid > *{
    padding:
      16px 12px;
  }


  #guardians .r21-guardian-grid img{
    width:
      min(28vw,95px);
  }

}
/* =========================================================
   R24 — GUARDIANS SCALE FIX
   Yeti y Stone Man con presencia equivalente.
   ========================================================= */

#guardians .r21-guardian-grid > *:nth-child(4) img,
#guardians .r21-guardian-grid > *:nth-child(5) img{
  width:
    clamp(92px,8.5vw,125px) !important;

  max-width:100%;

  transform-origin:center;
}


/* En móvil mantener proporción equilibrada */

@media(max-width:620px){

  #guardians .r21-guardian-grid > *:nth-child(4) img,
  #guardians .r21-guardian-grid > *:nth-child(5) img{
    width:
      min(34vw,115px) !important;
  }

}
/* =========================================================
   R24 — GUARDIANS CORRECCIÓN REAL
   Igualar presencia visual de los 5 guardianes.
   ========================================================= */

#guardians .r21-guardian-line{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}


/* Espacio uniforme para todos */

#guardians .r21-guardian-line > article{
  min-height:215px;

  padding:18px 12px;

  overflow:visible;

  text-align:center;
}


/* Base común */

#guardians .r21-guardian-line img{
  width:100px;
  height:100px;

  object-fit:contain;

  display:block;

  margin:0 auto 10px;

  transform-origin:center center;

  image-rendering:pixelated;
}


/* YETI — necesita mayor escala visual */

#guardians .r21-guardian-line > article:nth-child(4) img{
  transform:scale(1.35);
}


/* STONE MAN — necesita mayor escala visual */

#guardians .r21-guardian-line > article:nth-child(5) img{
  transform:scale(1.32);
}


/* Halos temáticos */

#guardians .r21-guardian-line > article:nth-child(1) img{
  filter:drop-shadow(0 0 10px rgba(47,229,255,.36));
}

#guardians .r21-guardian-line > article:nth-child(2) img{
  filter:drop-shadow(0 0 10px rgba(80,100,255,.40));
}

#guardians .r21-guardian-line > article:nth-child(3) img{
  filter:drop-shadow(0 0 10px rgba(205,60,255,.36));
}

#guardians .r21-guardian-line > article:nth-child(4) img{
  filter:drop-shadow(0 0 10px rgba(150,230,255,.42));
}

#guardians .r21-guardian-line > article:nth-child(5) img{
  filter:drop-shadow(0 0 10px rgba(255,125,35,.40));
}


/* 4:3 / tablet */

@media(max-width:1050px){

  #guardians .r21-guardian-line{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

}


/* Smartphone vertical */

@media(max-width:620px){

  #guardians .r21-guardian-line{
    grid-template-columns:minmax(0,1fr);
  }

  #guardians .r21-guardian-line img{
    width:105px;
    height:105px;
  }

}
/* =========================================================
   R24 — TWO WAYS TO PLAY
   MAIN ARCADE vs TIME ATTACK
   ========================================================= */

#ways-to-play .r21-mode-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:18px;

  margin-top:28px;
}


/* Base común */

#ways-to-play .r21-mode-grid > *{
  position:relative;

  padding:
    26px 22px 24px;

  border:none !important;

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.82),
      rgba(1,4,7,.96)
    );

  overflow:hidden;

  box-shadow:none !important;
}


/* Línea luminosa superior */

#ways-to-play .r21-mode-grid > *::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:4px;

  border-radius:
    16px 16px 0 0;
}


/* MAIN ARCADE */

#ways-to-play .r21-mode-grid > *:nth-child(1){
  box-shadow:
    inset 0 0 26px rgba(47,229,255,.035) !important;
}

#ways-to-play .r21-mode-grid > *:nth-child(1)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      transparent
    );

  box-shadow:
    0 0 12px rgba(47,229,255,.35);
}


/* TIME ATTACK */

#ways-to-play .r21-mode-grid > *:nth-child(2){
  box-shadow:
    inset 0 0 26px rgba(255,47,212,.035) !important;
}

#ways-to-play .r21-mode-grid > *:nth-child(2)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-orange),
      var(--r24-magenta),
      transparent
    );

  box-shadow:
    0 0 12px rgba(255,47,212,.28);
}


/* Títulos */

#ways-to-play .r21-mode-grid h3{
  margin:
    0 0 14px;

  font-size:
    clamp(1.55rem,2.5vw,2.15rem);

  font-weight:950;

  letter-spacing:.02em;

  color:#ffffff;
}


#ways-to-play .r21-mode-grid > *:nth-child(1) h3{
  text-shadow:
    0 0 8px rgba(47,229,255,.44),
    0 0 18px rgba(47,229,255,.18);
}


#ways-to-play .r21-mode-grid > *:nth-child(2) h3{
  text-shadow:
    0 0 8px rgba(255,122,0,.42),
    0 0 18px rgba(255,47,212,.18);
}


/* Texto */

#ways-to-play .r21-mode-grid p{
  color:#b7c7cf;

  line-height:1.72;

  margin-bottom:.8em;
}


/* Frase fuerte del Time Attack */

#ways-to-play .r21-mode-grid strong{
  color:#ffffff;

  text-shadow:
    0 0 6px rgba(255,122,0,.25);
}


/* =========================================================
   SMARTPHONE VERTICAL
   ========================================================= */

@media(max-width:720px){

  #ways-to-play .r21-mode-grid{
    grid-template-columns:
      minmax(0,1fr);

    gap:14px;
  }


  #ways-to-play .r21-mode-grid > *{
    padding:
      22px 18px;
  }


  #ways-to-play .r21-mode-grid h3{
    font-size:
      clamp(1.45rem,7vw,1.95rem);
  }

}
/* =========================================================
   R24 — TWO WAYS TO PLAY — CORRECCIÓN REAL
   ========================================================= */

#modes .r21-mode-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
}

#modes .r21-mode-split > article{
  position:relative;

  padding:28px 24px 26px;

  border:none !important;
  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.84),
      rgba(1,4,7,.97)
    ) !important;

  overflow:hidden;
}


/* MAIN ARCADE */

#modes .r21-mode-split > article:nth-child(1){
  box-shadow:
    inset 0 0 28px rgba(47,229,255,.05),
    0 0 18px rgba(47,229,255,.06) !important;
}

#modes .r21-mode-split > article:nth-child(1)::before{
  content:"";

  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      transparent
    );

  box-shadow:
    0 0 14px rgba(47,229,255,.42);
}


/* TIME ATTACK */

#modes .r21-mode-split > article:nth-child(2){
  box-shadow:
    inset 0 0 28px rgba(255,47,212,.05),
    0 0 18px rgba(255,122,0,.06) !important;
}

#modes .r21-mode-split > article:nth-child(2)::before{
  content:"";

  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--r24-orange),
      var(--r24-magenta),
      transparent
    );

  box-shadow:
    0 0 14px rgba(255,47,212,.34);
}


/* Títulos */

#modes .r21-mode-split h3{
  margin:0 0 14px;

  color:#fff;

  font-size:
    clamp(1.55rem,2.5vw,2.2rem);

  font-weight:950;
}

#modes .r21-mode-split > article:nth-child(1) h3{
  color:#dfffff;

  text-shadow:
    0 0 9px rgba(47,229,255,.60),
    0 0 20px rgba(47,229,255,.22);
}

#modes .r21-mode-split > article:nth-child(2) h3{
  color:#fff0df;

  text-shadow:
    0 0 9px rgba(255,122,0,.58),
    0 0 20px rgba(255,47,212,.22);
}


/* Texto */

#modes .r21-mode-split p{
  color:#b8c8d0;
  line-height:1.72;
}

#modes .r21-mode-split strong{
  color:#fff;
}


/* Smartphone vertical */

@media(max-width:720px){

  #modes .r21-mode-split{
    grid-template-columns:minmax(0,1fr);
  }

  #modes .r21-mode-split > article{
    padding:22px 18px;
  }

}
/* =========================================================
   R24 — PILOT BASICS
   Más ritmo visual, misma lectura.
   ========================================================= */

#pilot-basics .r21-basics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 26px;

  margin-top:22px;
  padding:0;

  list-style:none;
  counter-reset:r24-basics;
}


#pilot-basics .r21-basics li{
  counter-increment:r24-basics;

  position:relative;

  padding:
    14px 12px 14px 42px;

  border-bottom:
    1px solid rgba(255,255,255,.07);

  color:#d4dde2;

  line-height:1.5;
}


/* Número arcade */

#pilot-basics .r21-basics li::before{
  content:
    counter(r24-basics, decimal-leading-zero);

  position:absolute;

  left:0;
  top:13px;

  color:var(--r24-magenta);

  font-size:.72rem;
  font-weight:950;

  letter-spacing:.06em;

  text-shadow:
    0 0 7px rgba(255,47,212,.50);
}


/* Smartphone vertical */

@media(max-width:720px){

  #pilot-basics .r21-basics{
    grid-template-columns:minmax(0,1fr);
  }

}
/* =========================================================
   R24 — PLUG AND PLAY — THEN AND NOW
   ========================================================= */

#plug-play .r21-then-now{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}

#plug-play .r21-then-now > *{
  position:relative;
  padding:22px 20px;

  border:none !important;
  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.82),
      rgba(1,4,7,.96)
    ) !important;

  overflow:hidden;
}

/* THEN */
#plug-play .r21-then-now > *:nth-child(1){
  box-shadow:
    inset 0 0 24px rgba(255,122,0,.045) !important;
}

#plug-play .r21-then-now > *:nth-child(1)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--r24-orange),
      #ffd84a,
      transparent
    );

  box-shadow:
    0 0 12px rgba(255,122,0,.32);
}

/* NOW */
#plug-play .r21-then-now > *:nth-child(2){
  box-shadow:
    inset 0 0 24px rgba(47,229,255,.045) !important;
}

#plug-play .r21-then-now > *:nth-child(2)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      transparent
    );

  box-shadow:
    0 0 12px rgba(47,229,255,.32);
}


/* THEN / NOW label */

#plug-play .r21-then-now small{
  display:block;

  margin-bottom:10px;

  font-size:.72rem;
  font-weight:950;
  letter-spacing:.14em;
}

#plug-play .r21-then-now > *:nth-child(1) small{
  color:#ffd35d;
}

#plug-play .r21-then-now > *:nth-child(2) small{
  color:var(--r24-cyan);
}


/* Main statement */

#plug-play .r21-then-now strong{
  display:block;

  color:#fff;

  font-size:
    clamp(1.05rem,1.8vw,1.35rem);

  line-height:1.5;
}


/* Smartphone */

@media(max-width:720px){

  #plug-play .r21-then-now{
    grid-template-columns:minmax(0,1fr);
  }

}
/* =========================================================
   R24 — PLUG AND PLAY THEN / NOW — CORRECCIÓN REAL
   ========================================================= */

#plug-now .r21-then-now{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}

#plug-now .r21-then-now > div{
  position:relative;

  padding:24px 20px 22px;

  border:none !important;
  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.84),
      rgba(1,4,7,.97)
    ) !important;

  overflow:hidden;
}


/* THEN — cálido */

#plug-now .r21-then-now > div:nth-child(1){
  box-shadow:
    inset 0 0 26px rgba(255,122,0,.05),
    0 0 16px rgba(255,122,0,.05) !important;
}

#plug-now .r21-then-now > div:nth-child(1)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--r24-orange),
      #ffd84a,
      transparent
    );

  box-shadow:
    0 0 12px rgba(255,122,0,.34);
}


/* NOW — moderno */

#plug-now .r21-then-now > div:nth-child(2){
  box-shadow:
    inset 0 0 26px rgba(47,229,255,.05),
    0 0 16px rgba(47,229,255,.05) !important;
}

#plug-now .r21-then-now > div:nth-child(2)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      transparent
    );

  box-shadow:
    0 0 12px rgba(47,229,255,.34);
}


/* THEN / NOW */

#plug-now .r21-then-now span{
  display:block;

  margin-bottom:10px;

  font-size:.72rem;
  font-weight:950;
  letter-spacing:.14em;
}

#plug-now .r21-then-now > div:nth-child(1) span{
  color:#ffd35d;

  text-shadow:
    0 0 7px rgba(255,122,0,.40);
}

#plug-now .r21-then-now > div:nth-child(2) span{
  color:var(--r24-cyan);

  text-shadow:
    0 0 7px rgba(47,229,255,.42);
}


/* Mensaje */

#plug-now .r21-then-now strong{
  display:block;

  color:#fff;

  font-size:
    clamp(1.05rem,1.8vw,1.35rem);

  line-height:1.5;
}


/* Smartphone vertical */

@media(max-width:720px){

  #plug-now .r21-then-now{
    grid-template-columns:minmax(0,1fr);
  }

}
/* =========================================================
   R24 — TESTED WITH
   Etiquetas más vivas, misma estructura.
   ========================================================= */

#tested-with .r21-tested-list{
  display:flex;
  flex-wrap:wrap;

  gap:10px 10px;

  margin-top:18px;
}


/* Etiquetas */

#tested-with .r21-tested-list > *{
  display:inline-flex;

  align-items:center;

  min-height:34px;

  padding:
    8px 13px;

  border:
    1px solid rgba(47,229,255,.30);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(5,14,20,.92),
      rgba(2,7,11,.96)
    );

  color:#dffaff;

  font-size:.82rem;
  font-weight:800;

  box-shadow:
    inset 0 0 10px rgba(47,229,255,.04),
    0 0 8px rgba(47,229,255,.05);
}


/* Variación ligera de color */

#tested-with .r21-tested-list > *:nth-child(3n+1){
  border-color:
    rgba(47,229,255,.38);
}

#tested-with .r21-tested-list > *:nth-child(3n+2){
  border-color:
    rgba(255,47,212,.28);

  box-shadow:
    inset 0 0 10px rgba(255,47,212,.03),
    0 0 8px rgba(255,47,212,.04);
}

#tested-with .r21-tested-list > *:nth-child(3n+3){
  border-color:
    rgba(255,122,0,.30);

  box-shadow:
    inset 0 0 10px rgba(255,122,0,.03),
    0 0 8px rgba(255,122,0,.04);
}


/* Smartphone vertical */

@media(max-width:620px){

  #tested-with .r21-tested-list{
    gap:8px;
  }

  #tested-with .r21-tested-list > *{
    max-width:100%;

    white-space:normal;

    line-height:1.35;
  }

}
/* =========================================================
   R24 — PLAY ALEXX SKYRIDER NOW
   Demo zone / Arcade showcase
   ========================================================= */

#play-now{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}


/* Fondo especial solo para esta sección */

#play-now::before,
#play-now::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:0;
  filter:blur(42px);
  opacity:.42;
}

#play-now::before{
  width:340px;
  height:340px;
  left:-80px;
  top:90px;

  background:
    radial-gradient(
      circle,
      rgba(47,229,255,.22) 0%,
      rgba(47,229,255,.08) 36%,
      transparent 72%
    );
}

#play-now::after{
  width:360px;
  height:360px;
  right:-90px;
  top:70px;

  background:
    radial-gradient(
      circle,
      rgba(255,47,212,.20) 0%,
      rgba(120,60,255,.10) 38%,
      transparent 74%
    );
}


/* =========================================================
   GRID REAL DE DEMOS
   ========================================================= */

#play-now .r21-demo-grid,
#play-now .r21-demo-split,
#play-now .r21-play-grid{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;

  margin-top:26px;
}


/* Tarjetas / portales */

#play-now .r21-demo-grid > *,
#play-now .r21-demo-split > *,
#play-now .r21-play-grid > *{
  position:relative;

  padding:10px 10px 14px;

  border:
    1px solid rgba(47,229,255,.24);

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(6,14,22,.84),
      rgba(1,5,9,.96)
    );

  overflow:hidden;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 12px 28px rgba(0,0,0,.34);
}


/* Portales con color diferente */

#play-now .r21-demo-grid > *:nth-child(1),
#play-now .r21-demo-split > *:nth-child(1),
#play-now .r21-play-grid > *:nth-child(1){
  box-shadow:
    0 0 0 1px rgba(47,229,255,.08) inset,
    0 0 24px rgba(47,229,255,.12),
    0 14px 28px rgba(0,0,0,.35);
}

#play-now .r21-demo-grid > *:nth-child(2),
#play-now .r21-demo-split > *:nth-child(2),
#play-now .r21-play-grid > *:nth-child(2){
  border-color:
    rgba(255,47,212,.22);

  box-shadow:
    0 0 0 1px rgba(255,47,212,.08) inset,
    0 0 24px rgba(255,47,212,.10),
    0 14px 28px rgba(0,0,0,.35);
}


/* Línea superior tipo marquee */

#play-now .r21-demo-grid > *::before,
#play-now .r21-demo-split > *::before,
#play-now .r21-play-grid > *::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:3px;
  border-radius:999px;
}

#play-now .r21-demo-grid > *:nth-child(1)::before,
#play-now .r21-demo-split > *:nth-child(1)::before,
#play-now .r21-play-grid > *:nth-child(1)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      transparent
    );

  box-shadow:
    0 0 12px rgba(47,229,255,.42);
}

#play-now .r21-demo-grid > *:nth-child(2)::before,
#play-now .r21-demo-split > *:nth-child(2)::before,
#play-now .r21-play-grid > *:nth-child(2)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-magenta),
      var(--r24-blue),
      transparent
    );

  box-shadow:
    0 0 12px rgba(255,47,212,.34);
}


/* =========================================================
   VISUAL INTERNO / IMAGEN DEMO
   ========================================================= */

#play-now .r21-demo-grid img,
#play-now .r21-demo-grid video,
#play-now .r21-demo-split img,
#play-now .r21-demo-split video,
#play-now .r21-play-grid img,
#play-now .r21-play-grid video{
  display:block;
  width:100%;
  height:auto;

  border-radius:14px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 18px rgba(0,0,0,.28);
}


/* Etiquetas pequeñas dentro del card */

#play-now .r21-demo-grid span,
#play-now .r21-demo-split span,
#play-now .r21-play-grid span{
  letter-spacing:.08em;
}


/* Títulos fuertes dentro del demo */

#play-now .r21-demo-grid h3,
#play-now .r21-demo-grid strong,
#play-now .r21-demo-split h3,
#play-now .r21-demo-split strong,
#play-now .r21-play-grid h3,
#play-now .r21-play-grid strong{
  color:#fff;
}


/* =========================================================
   BOTONES PRINCIPALES
   ========================================================= */

#play-now .r21-demo-grid > * a:last-of-type,
#play-now .r21-demo-split > * a:last-of-type,
#play-now .r21-play-grid > * a:last-of-type,
#play-now .r21-demo-grid > * button:last-of-type,
#play-now .r21-demo-split > * button:last-of-type,
#play-now .r21-play-grid > * button:last-of-type{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:50px;
  width:100%;

  margin-top:14px;
  padding:0 16px;

  border:none !important;
  border-radius:10px;

  color:#fff;
  font-weight:900;
  letter-spacing:.03em;
  text-decoration:none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}


/* Botón arcade */

#play-now .r21-demo-grid > *:nth-child(1) a:last-of-type,
#play-now .r21-demo-split > *:nth-child(1) a:last-of-type,
#play-now .r21-play-grid > *:nth-child(1) a:last-of-type,
#play-now .r21-demo-grid > *:nth-child(1) button:last-of-type,
#play-now .r21-demo-split > *:nth-child(1) button:last-of-type,
#play-now .r21-play-grid > *:nth-child(1) button:last-of-type{
  background:
    linear-gradient(
      90deg,
      #1576aa,
      #3151c9,
      #4837b8
    );

  box-shadow:
    0 0 16px rgba(47,229,255,.18),
    0 8px 20px rgba(0,0,0,.28);
}

#play-now .r21-demo-grid > *:nth-child(2) a:last-of-type,
#play-now .r21-demo-split > *:nth-child(2) a:last-of-type,
#play-now .r21-play-grid > *:nth-child(2) a:last-of-type,
#play-now .r21-demo-grid > *:nth-child(2) button:last-of-type,
#play-now .r21-demo-split > *:nth-child(2) button:last-of-type,
#play-now .r21-play-grid > *:nth-child(2) button:last-of-type{
  background:
    linear-gradient(
      90deg,
      #1b7fae,
      #4d3fc2,
      #6c2eb2
    );

  box-shadow:
    0 0 16px rgba(255,47,212,.14),
    0 8px 20px rgba(0,0,0,.28);
}


/* Hover */

#play-now .r21-demo-grid > * a:last-of-type:hover,
#play-now .r21-demo-split > * a:last-of-type:hover,
#play-now .r21-play-grid > * a:last-of-type:hover,
#play-now .r21-demo-grid > * button:last-of-type:hover,
#play-now .r21-demo-split > * button:last-of-type:hover,
#play-now .r21-play-grid > * button:last-of-type:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);

  box-shadow:
    0 0 22px rgba(47,229,255,.18),
    0 10px 24px rgba(0,0,0,.30);
}


/* =========================================================
   PANEL INFORMATIVO INFERIOR
   ========================================================= */

#play-now .r21-demo-note,
#play-now .r21-play-note,
#play-now blockquote:last-of-type,
#play-now .r21-callout{
  position:relative;
  z-index:1;

  margin-top:20px;
  padding:16px 18px;

  border-left:
    2px solid rgba(47,229,255,.48);

  border-radius:0 12px 12px 0;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.58),
      rgba(2,6,10,.78)
    );

  color:#c1ced6;
}


/* =========================================================
   SMARTPHONE VERTICAL
   ========================================================= */

@media(max-width:760px){

  #play-now .r21-demo-grid,
  #play-now .r21-demo-split,
  #play-now .r21-play-grid{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }

}
/* =========================================================
   R24 — SECTION 17 DEMO ZONE — CORRECCIÓN REAL
   ========================================================= */

#demos{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(circle at 15% 35%,
      rgba(47,229,255,.14),
      transparent 32%
    ),
    radial-gradient(circle at 85% 35%,
      rgba(255,47,212,.13),
      transparent 32%
    ),
    #010203 !important;
}


/* Dos halos ambientales */

#demos::before,
#demos::after{
  content:"";
  position:absolute;
  pointer-events:none;
  filter:blur(48px);
  opacity:.72;
}

#demos::before{
  width:380px;
  height:380px;
  left:-110px;
  top:120px;

  background:
    radial-gradient(
      circle,
      rgba(47,229,255,.20),
      transparent 68%
    );
}

#demos::after{
  width:400px;
  height:400px;
  right:-120px;
  top:120px;

  background:
    radial-gradient(
      circle,
      rgba(255,47,212,.18),
      transparent 68%
    );
}


/* Mantener contenido encima */

#demos > *{
  position:relative;
  z-index:2;
}


/* =========================================================
   GRID DE DEMOS
   ========================================================= */

#demos .r21-demo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:22px;

  margin-top:28px;
}


/* Cabinas */

#demos .r21-demo-cabinet{
  position:relative;

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(5,13,20,.88),
      rgba(1,4,8,.97)
    ) !important;

  overflow:hidden;

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}


/* MAIN ARCADE */

#demos .r21-demo-cabinet-arctic{
  border:
    1px solid rgba(47,229,255,.48) !important;

  box-shadow:
    0 0 22px rgba(47,229,255,.16),
    0 16px 32px rgba(0,0,0,.38) !important;
}


/* TIME ATTACK */

#demos .r21-demo-cabinet-night{
  border:
    1px solid rgba(255,47,212,.42) !important;

  box-shadow:
    0 0 22px rgba(255,47,212,.14),
    0 16px 32px rgba(0,0,0,.38) !important;
}


/* =========================================================
   VIDEO / PREVIEW
   ========================================================= */

#demos .r21-demo-preview{
  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#000;
}


#demos .r21-demo-preview video{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  filter:
    saturate(1.12)
    contrast(1.06)
    brightness(.86);
}


/* Gradiente sobre video */

#demos .r21-demo-preview-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.52)
    );
}


/* =========================================================
   MARQUEE SUPERIOR
   ========================================================= */

#demos .r21-demo-marquee{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:12px;

  padding:
    11px 14px;

  background:
    rgba(1,6,10,.90);

  border-bottom:
    1px solid rgba(255,255,255,.06);
}


#demos .r21-demo-marquee span{
  color:#ffffff;

  font-size:
    clamp(1rem,1.8vw,1.35rem);

  font-weight:950;

  letter-spacing:.08em;
}


#demos .r21-demo-cabinet-arctic .r21-demo-marquee span{
  text-shadow:
    0 0 8px rgba(47,229,255,.70),
    0 0 18px rgba(47,229,255,.25);
}


#demos .r21-demo-cabinet-night .r21-demo-marquee span{
  text-shadow:
    0 0 8px rgba(255,47,212,.68),
    0 0 18px rgba(255,47,212,.24);
}


#demos .r21-demo-marquee small{
  font-size:.68rem;

  font-weight:900;

  letter-spacing:.12em;

  color:#a9c8d5;
}


/* =========================================================
   CUERPO
   ========================================================= */

#demos .r21-demo-cabinet-body{
  padding:
    16px 16px 18px;
}


/* Badges */

#demos .r21-demo-badges{
  display:flex;
  flex-wrap:wrap;

  gap:7px;

  margin-bottom:14px;
}


#demos .r21-demo-badges span{
  padding:
    5px 9px;

  border-radius:999px;

  background:
    rgba(3,9,14,.88);

  border:
    1px solid rgba(47,229,255,.26);

  color:#dffbff;

  font-size:.64rem;

  font-weight:900;

  letter-spacing:.08em;
}


#demos .r21-demo-cabinet-night .r21-demo-badges span{
  border-color:
    rgba(255,47,212,.26);
}


/* Texto */

#demos .r21-demo-cabinet-body p{
  color:#c1cdd4;

  line-height:1.65;
}


/* =========================================================
   BOTONES DEMO
   ========================================================= */

#demos .r21-demo-play{
  min-height:52px;

  margin-top:16px;

  border:none !important;

  font-weight:950;

  letter-spacing:.03em;

  animation:
    r24-demo-button-pulse 3.2s ease-in-out infinite;
}


#demos .r21-demo-cabinet-arctic .r21-demo-play{
  background:
    linear-gradient(
      90deg,
      #0785b4,
      #2756d5,
      #6434bc
    ) !important;

  box-shadow:
    0 0 16px rgba(47,229,255,.28),
    0 8px 20px rgba(0,0,0,.30);
}


#demos .r21-demo-cabinet-night .r21-demo-play{
  background:
    linear-gradient(
      90deg,
      #2860c6,
      #6539c4,
      #a12e98
    ) !important;

  box-shadow:
    0 0 16px rgba(255,47,212,.24),
    0 8px 20px rgba(0,0,0,.30);
}


@keyframes r24-demo-button-pulse{

  0%,100%{
    filter:brightness(1);
  }

  50%{
    filter:brightness(1.15);
  }

}


/* =========================================================
   NOTA INFERIOR
   ========================================================= */

#demos .r21-demo-footnote{
  margin-top:20px;

  padding:
    16px 18px;

  border-left:
    3px solid var(--r24-cyan);

  border-radius:
    0 12px 12px 0;

  background:
    rgba(2,7,11,.76);

  box-shadow:
    inset 0 0 18px rgba(47,229,255,.025);
}


/* =========================================================
   HOVER
   ========================================================= */

#demos .r21-demo-cabinet:hover{
  transform:
    translateY(-3px);
}


#demos .r21-demo-cabinet-arctic:hover{
  box-shadow:
    0 0 32px rgba(47,229,255,.25),
    0 18px 36px rgba(0,0,0,.40) !important;
}


#demos .r21-demo-cabinet-night:hover{
  box-shadow:
    0 0 32px rgba(255,47,212,.23),
    0 18px 36px rgba(0,0,0,.40) !important;
}


/* =========================================================
   SMARTPHONE VERTICAL
   ========================================================= */

@media(max-width:760px){

  #demos .r21-demo-grid{
    grid-template-columns:
      minmax(0,1fr);

    gap:18px;
  }


  #demos .r21-demo-marquee{
    align-items:flex-start;
    flex-direction:column;
  }


  #demos .r21-demo-play{
    width:100%;
  }

}


/* Accesibilidad */

@media(prefers-reduced-motion:reduce){

  #demos .r21-demo-play{
    animation:none !important;
  }

}

/* =========================================================
   R24 — DEMO ZONE
   Quitar rótulos superpuestos sobre las previews
   ========================================================= */

#demos .r21-demo-marquee{
  display:none !important;
}

/* =========================================================
   R24 — DEVELOPMENT & PILOT JOURNAL
   Accesos editoriales con más presencia.
   ========================================================= */

#journal .r21-journal-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:22px;
}


/* Categorías */

#journal .r21-journal-tags > *{
  display:inline-flex;
  align-items:center;

  min-height:36px;

  padding:
    8px 13px;

  border:
    1px solid rgba(47,229,255,.26);

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(5,14,20,.90),
      rgba(2,7,11,.96)
    );

  color:#dffaff;

  font-size:.82rem;
  font-weight:800;

  box-shadow:
    inset 0 0 10px rgba(47,229,255,.035);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


/* Colores alternados */

#journal .r21-journal-tags > *:nth-child(3n+1){
  border-color:rgba(47,229,255,.38);
}

#journal .r21-journal-tags > *:nth-child(3n+2){
  border-color:rgba(255,47,212,.28);
}

#journal .r21-journal-tags > *:nth-child(3n+3){
  border-color:rgba(255,122,0,.30);
}


/* Hover */

#journal .r21-journal-tags > *:hover{
  transform:translateY(-1px);

  border-color:#fff;

  box-shadow:
    0 0 12px rgba(47,229,255,.12);
}


/* Botón principal editorial */

#journal .r21-btn{
  margin-top:18px;

  min-height:48px;

  padding:
    0 20px;

  border:
    1px solid rgba(47,229,255,.52);

  background:
    linear-gradient(
      90deg,
      rgba(5,40,55,.96),
      rgba(18,45,88,.96),
      rgba(60,35,100,.94)
    );

  color:#fff;

  font-weight:900;

  box-shadow:
    0 0 14px rgba(47,229,255,.16);
}


/* Smartphone */

@media(max-width:620px){

  #journal .r21-journal-tags{
    gap:8px;
  }

  #journal .r21-journal-tags > *{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  #journal .r21-btn{
    width:100%;
  }

}
/* =========================================================
   R24 — EXPLORE THE JOURNAL
   Catálogo editorial con más identidad visual.
   ========================================================= */

#explore-journal .r21-latest-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:16px;

  margin-top:26px;
}


/* Tarjetas */

#explore-journal .r21-latest-card{
  position:relative;

  padding:20px 18px 18px;

  border:
    1px solid rgba(47,229,255,.18);

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.84),
      rgba(1,4,7,.96)
    );

  overflow:hidden;

  box-shadow:none !important;
}


/* Línea superior según tarjeta */

#explore-journal .r21-latest-card::before{
  content:"";

  position:absolute;
  left:0;
  right:0;
  top:0;

  height:3px;
}


#explore-journal .r21-latest-card:nth-child(1)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      transparent
    );
}

#explore-journal .r21-latest-card:nth-child(2)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-magenta),
      #7b56ff,
      transparent
    );
}

#explore-journal .r21-latest-card:nth-child(3)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-orange),
      #ffd84a,
      transparent
    );
}

#explore-journal .r21-latest-card:nth-child(4)::before{
  background:
    linear-gradient(
      90deg,
      #76ff75,
      var(--r24-cyan),
      transparent
    );
}


/* Categoría */

#explore-journal .r21-latest-card small{
  color:var(--r24-cyan);

  font-size:.68rem;

  font-weight:950;

  letter-spacing:.14em;
}


/* Título */

#explore-journal .r21-latest-card h3{
  margin:
    10px 0 14px;

  color:#ffffff;

  font-size:
    clamp(1.15rem,2vw,1.45rem);

  line-height:1.2;
}


/* Resumen */

#explore-journal .r21-latest-card p{
  color:#b6c5cd;

  line-height:1.65;
}


/* READ ARTICLE */

#explore-journal .r21-latest-card a{
  display:inline-block;

  margin-top:12px;

  color:var(--r24-cyan);

  font-weight:950;

  letter-spacing:.04em;

  text-decoration:none;

  text-shadow:
    0 0 7px rgba(47,229,255,.25);
}


/* Botones inferiores */

#explore-journal .r21-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:20px;
}


#explore-journal .r21-actions .r21-btn:first-child{
  background:
    linear-gradient(
      90deg,
      #087b9f,
      #3151c9
    );

  box-shadow:
    0 0 14px rgba(47,229,255,.16);
}


#explore-journal .r21-actions .r21-btn:last-child{
  background:
    linear-gradient(
      90deg,
      #5b2c8d,
      #9b327f
    );

  box-shadow:
    0 0 14px rgba(255,47,212,.14);
}


/* Smartphone vertical */

@media(max-width:720px){

  #explore-journal .r21-latest-grid{
    grid-template-columns:minmax(0,1fr);
  }


  #explore-journal .r21-actions{
    flex-direction:column;
  }


  #explore-journal .r21-actions .r21-btn{
    width:100%;
  }

}
/* =========================================================
   R24 — EXPLORE THE JOURNAL — CORRECCIÓN REAL
   ========================================================= */

#latest-journal .r21-latest-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:16px;
  margin-top:26px;
}


/* Tarjetas */

#latest-journal .r21-latest-card{
  position:relative;

  padding:20px 18px 18px;

  border:
    1px solid rgba(47,229,255,.16);

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.84),
      rgba(1,4,7,.97)
    );

  overflow:hidden;

  box-shadow:none !important;
}


/* Línea luminosa superior */

#latest-journal .r21-latest-card::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:3px;
}


#latest-journal .r21-latest-card:nth-child(1)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-cyan),
      var(--r24-blue),
      transparent
    );
}

#latest-journal .r21-latest-card:nth-child(2)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-magenta),
      #7958ff,
      transparent
    );
}

#latest-journal .r21-latest-card:nth-child(3)::before{
  background:
    linear-gradient(
      90deg,
      var(--r24-orange),
      #ffd84a,
      transparent
    );
}

#latest-journal .r21-latest-card:nth-child(4)::before{
  background:
    linear-gradient(
      90deg,
      #76ff75,
      var(--r24-cyan),
      transparent
    );
}


/* Categoría */

#latest-journal .r21-latest-category{
  margin-bottom:10px;

  color:var(--r24-cyan);

  font-size:.68rem;
  font-weight:950;

  letter-spacing:.14em;
}


/* Título */

#latest-journal .r21-latest-card h3{
  margin:
    0 0 14px;

  color:#fff;

  font-size:
    clamp(1.15rem,2vw,1.45rem);

  line-height:1.2;
}


/* Resumen */

#latest-journal .r21-latest-card p{
  color:#b6c5cd;

  line-height:1.65;
}


/* READ ARTICLE */

#latest-journal .r21-latest-card a{
  display:inline-block;

  margin-top:12px;

  color:var(--r24-cyan);

  font-weight:950;

  letter-spacing:.04em;

  text-decoration:none;

  text-shadow:
    0 0 7px rgba(47,229,255,.25);
}


/* Variar color del enlace */

#latest-journal .r21-latest-card:nth-child(2) a{
  color:#df9cff;
}

#latest-journal .r21-latest-card:nth-child(3) a{
  color:#ffd16a;
}

#latest-journal .r21-latest-card:nth-child(4) a{
  color:#91ff9a;
}


/* Botones inferiores */

#latest-journal .r21-actions{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:20px;
}


#latest-journal .r21-actions .r21-btn:first-child{
  background:
    linear-gradient(
      90deg,
      #087b9f,
      #3151c9
    );

  box-shadow:
    0 0 14px rgba(47,229,255,.16);
}


#latest-journal .r21-actions .r21-btn:last-child{
  background:
    linear-gradient(
      90deg,
      #5b2c8d,
      #9b327f
    );

  box-shadow:
    0 0 14px rgba(255,47,212,.14);
}


/* Smartphone vertical */

@media(max-width:720px){

  #latest-journal .r21-latest-grid{
    grid-template-columns:minmax(0,1fr);
  }


  #latest-journal .r21-actions{
    flex-direction:column;
  }


  #latest-journal .r21-actions .r21-btn{
    width:100%;
  }

}
/* =========================================================
   R24 — FAQ / PRIVACY / CONTACT
   ========================================================= */

#faq .r21-faq-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;

  margin-top:24px;
}


/* FAQ cards */

#faq .r21-faq-grid > *{
  padding:16px 14px;

  border:
    1px solid rgba(47,229,255,.16);

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,15,.82),
      rgba(1,4,7,.96)
    );

  box-shadow:none !important;
}


/* Pregunta */

#faq summary,
#faq .r21-faq-grid strong{
  color:#fff;

  font-weight:900;

  line-height:1.35;

  text-shadow:
    0 0 6px rgba(255,255,255,.08);
}


/* Respuesta */

#faq .r21-faq-grid p{
  margin-top:10px;

  color:#b7c6ce;

  line-height:1.6;
}


/* Botones inferiores */

#faq .r21-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:20px;
}

#faq .r21-actions .r21-btn{
  min-height:44px;
  padding:0 16px;
}


/* Diferenciar accesos */

#faq .r21-actions .r21-btn:nth-child(1){
  border-color:rgba(47,229,255,.44);
}

#faq .r21-actions .r21-btn:nth-child(2){
  border-color:rgba(255,47,212,.34);
}

#faq .r21-actions .r21-btn:nth-child(3){
  border-color:rgba(255,122,0,.36);
}

#faq .r21-actions .r21-btn:nth-child(4){
  border-color:rgba(118,255,117,.30);
}


/* Smartphone vertical */

@media(max-width:760px){

  #faq .r21-faq-grid{
    grid-template-columns:minmax(0,1fr);
  }

  #faq .r21-actions{
    flex-direction:column;
  }

  #faq .r21-actions .r21-btn{
    width:100%;
  }

}


/* ===== R02 functional foundation: r25-unified-r50k.css ===== */
/* ALEXX SkyRider™ Unified Portal R01
   Visual fusion: current functional Gate + R50K retro/CRT language.
   Loaded last so gameplay and approved functional code remain untouched. */
:root{
  --portal-green:#00ff41;
  --portal-green2:#00b32c;
  --portal-green3:#064b19;
  --portal-amber:#ffb000;
  --portal-cyan:#70e6ff;
  --portal-magenta:#ff2fd4;
  --portal-cream:#fff9e0;
  --portal-bg:#000;
  --portal-panel:rgba(0,12,4,.90);
  --portal-line:rgba(0,255,65,.28);
  --portal-text:#d6ffdf;
  --portal-muted:#86c893;
  --portal-max:1220px;
}
html{background:#000;scroll-behavior:smooth;overflow-x:hidden}
body.r21-gate{
  overflow-x:hidden;
  background:
    radial-gradient(circle at 18% 10%,rgba(0,255,65,.055),transparent 28rem),
    radial-gradient(circle at 82% 32%,rgba(47,229,255,.04),transparent 30rem),
    #000;
  color:var(--portal-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  line-height:1.65;
}
body.r21-gate::before{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0,rgba(0,0,0,.14) 1px,transparent 1px,transparent 3px);
}
body.r21-gate::after{
  content:"";position:fixed;inset:0;z-index:9996;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.73) 100%);
}
.r21-topbar{
  background:rgba(0,0,0,.95)!important;
  border-bottom:1px solid var(--portal-green3)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.44),0 0 20px rgba(0,255,65,.035)!important;
  backdrop-filter:blur(7px);
}
.r21-brand{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;letter-spacing:.09em;color:var(--portal-cream)!important;text-shadow:0 0 7px rgba(0,255,65,.38)!important}
.r21-brand span{color:var(--portal-green)!important}
.r21-nav{gap:.45rem!important}
.r21-nav a,.r21-nav-button{
  border:1px solid rgba(0,255,65,.23)!important;
  background:#001006!important;
  color:var(--portal-green)!important;
  font:700 .72rem/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  letter-spacing:.075em!important;
  padding:.55rem .72rem!important;
  min-height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .18s,box-shadow .18s,text-shadow .18s,transform .18s;
}
.r21-nav a:hover,.r21-nav-button:hover,.r21-nav a:focus-visible,.r21-nav-button:focus-visible{
  border-color:var(--portal-green)!important;box-shadow:0 0 13px rgba(0,255,65,.18)!important;text-shadow:0 0 7px var(--portal-green)!important;transform:translateY(-1px);
}
.r21-section{
  max-width:var(--portal-max)!important;
  margin-inline:auto!important;
  border-top:1px solid rgba(0,255,65,.12)!important;
  background:linear-gradient(180deg,rgba(0,9,3,.30),rgba(0,0,0,.08))!important;
}
.r21-section:nth-of-type(even){background:linear-gradient(180deg,rgba(0,13,5,.40),rgba(0,0,0,.12))!important}
.r21-heading{
  border-bottom:1px solid var(--portal-green3)!important;
  padding-bottom:.72rem!important;
  margin-bottom:1.35rem!important;
  gap:1rem!important;
}
.r21-heading span{color:var(--portal-amber)!important;letter-spacing:.14em!important;font-weight:800!important}
.r21-heading h2{
  color:var(--portal-cream)!important;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  text-shadow:0 0 5px rgba(255,249,224,.55),0 0 12px rgba(47,229,255,.43),0 0 24px rgba(47,229,255,.18)!important;
}
.r21-copy,.r21-support,.r21-note,.r21-resource p,.r21-latest-card p,.r21-demo-footnote{color:#c6f1ce!important}
.r21-copy p,.r21-resource p,.r21-latest-card p{max-width:76ch}
.r21-btn{
  border:1px solid var(--portal-green3)!important;
  background:#001207!important;
  color:var(--portal-green)!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  letter-spacing:.065em!important;
  box-shadow:inset 0 0 18px rgba(0,255,65,.025)!important;
  transition:.18s!important;
}
.r21-btn:hover,.r21-btn:focus-visible{border-color:var(--portal-green)!important;box-shadow:0 0 14px rgba(0,255,65,.22),inset 0 0 16px rgba(0,255,65,.04)!important;text-shadow:0 0 7px var(--portal-green)!important;transform:translateY(-1px)}
.r21-btn.primary{border-color:var(--portal-amber)!important;color:var(--portal-amber)!important;background:rgba(255,176,0,.035)!important}
.r21-kicker,.r21-latest-category,.r21-demo-badges,.r21-route-label{color:var(--portal-amber)!important;letter-spacing:.13em!important}
.r21-hero{min-height:min(820px,88vh)!important;isolation:isolate;background:#000!important}
.r21-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.52) 70%,#000)}
.r21-hero-copy,.r21-hero-figure{z-index:2!important}
.r21-hero-copy{
  background:rgba(0,8,2,.72)!important;
  border:1px solid var(--portal-line)!important;
  padding:clamp(1.1rem,3vw,2.1rem)!important;
  box-shadow:0 0 36px rgba(0,255,65,.075),inset 0 0 28px rgba(0,255,65,.025)!important;
}
/* Preserve the approved official Gate logo and its neon treatment. */
.r21-hero-logo{
  filter:drop-shadow(0 0 7px rgba(255,255,255,.34)) drop-shadow(0 0 15px rgba(0,255,65,.42)) drop-shadow(0 0 30px rgba(47,229,255,.20))!important;
  animation:portal-logo-breathe 3.6s ease-in-out infinite alternate;
}
@keyframes portal-logo-breathe{from{filter:drop-shadow(0 0 6px rgba(255,255,255,.25)) drop-shadow(0 0 13px rgba(0,255,65,.35)) drop-shadow(0 0 26px rgba(47,229,255,.12))}to{filter:drop-shadow(0 0 9px rgba(255,255,255,.42)) drop-shadow(0 0 22px rgba(0,255,65,.55)) drop-shadow(0 0 38px rgba(47,229,255,.20))}}
.r21-slogan{color:var(--portal-amber)!important;letter-spacing:.19em!important;text-shadow:0 0 12px rgba(255,176,0,.25)!important}
.r21-impact{color:var(--portal-cream)!important;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;letter-spacing:.055em!important;text-shadow:0 0 7px rgba(47,229,255,.42)!important}
.r21-crt-window,.r21-route-window,.r21-face-preview,.r21-demo-preview{
  border-color:rgba(0,255,65,.30)!important;
  box-shadow:0 0 28px rgba(0,255,65,.06),inset 0 0 26px rgba(0,255,65,.025)!important;
}
.r21-crt-window::after,.r21-route-window::after,.r21-demo-preview::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 2px,transparent 4px);mix-blend-mode:screen;
}
.r21-resource,.r21-latest-card,.r21-demo-cabinet,.r21-faq-grid>*,.r21-testid-card,
.r21-controls-grid>*,.r21-threat-grid>*,.r21-basics>*,.r21-mode-split>*{
  border-color:var(--portal-green3)!important;background:var(--portal-panel)!important;box-shadow:inset 0 0 24px rgba(0,255,65,.025)!important;
}
.r21-journal-categories{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.72rem!important;margin:1.1rem 0 1.5rem!important}
.r21-journal-categories a{
  border:1px solid var(--portal-green3)!important;background:rgba(0,17,6,.78)!important;color:#b9ffc7!important;padding:.78rem!important;text-align:center!important;min-height:64px;display:flex;align-items:center;justify-content:center;font-size:.78rem;line-height:1.35;
}
.r21-journal-categories a:hover,.r21-journal-categories a:focus-visible{border-color:var(--portal-green)!important;color:#fff!important;text-shadow:0 0 8px rgba(0,255,65,.62)!important}
.r21-journal-context-link{color:var(--portal-cyan)!important;border-bottom:1px dotted rgba(112,230,255,.42)!important}
.r21-latest-grid{gap:1rem!important}
.r21-latest-card{position:relative;overflow:hidden!important}
.r21-latest-card::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(var(--portal-cyan),var(--portal-green),transparent);opacity:.7}
.r21-latest-card h3,.r21-resource h3{color:var(--portal-cream)!important;text-shadow:0 0 10px rgba(47,229,255,.20)!important}
.r21-demo-hall{background:radial-gradient(circle at 50% 0,rgba(255,176,0,.04),transparent 38%),#000!important}
.r21-demo-marquee{border-color:rgba(255,176,0,.55)!important;color:var(--portal-amber)!important;box-shadow:0 0 18px rgba(255,176,0,.10)!important}
.r21-demo-cabinet{border-color:rgba(0,255,65,.30)!important}
.r21-demo-play{border-color:var(--portal-amber)!important;color:var(--portal-amber)!important;background:rgba(255,176,0,.04)!important}
.r21-footer{border-top:1px solid var(--portal-green3)!important;background:#010903!important;color:var(--portal-muted)!important}
.r21-footer a{color:var(--portal-green)!important}
.audio-led{box-shadow:0 0 8px currentColor}
:focus-visible{outline:2px solid var(--portal-amber)!important;outline-offset:3px!important}
img,video,canvas,svg{max-width:100%}
@media(max-width:980px){
  .r21-journal-categories{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r21-topbar{align-items:flex-start!important}
}
@media(max-width:720px){
  .r21-topbar{padding:.55rem .65rem!important}
  .r21-brand{font-size:.95rem!important}
  .r21-nav{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .r21-nav a,.r21-nav-button{width:100%!important;min-width:0!important;font-size:.66rem!important;padding:.55rem .5rem!important}
  .r21-section{padding-inline:clamp(.85rem,4vw,1.25rem)!important}
  .r21-journal-categories{grid-template-columns:1fr!important}
  .r21-hero{min-height:auto!important}
  .r21-hero-copy{width:100%!important}
}
@media(max-width:430px){
  .r21-nav{grid-template-columns:1fr!important}
  .r21-actions{display:grid!important;grid-template-columns:1fr!important}
  .r21-btn{width:100%!important;text-align:center!important;justify-content:center!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .r21-hero-logo{animation:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* ========================================================================
   ALEXX SkyRider™ PORTAL UNIFIED R02 — R50K DOMINANT VISUAL SYSTEM
   Functional selectors remain compatible with the approved R01 markup.
   This section is the public visual authority for the Gate shell.
   ======================================================================== */
:root{
  --r02-green:#00ff41;--r02-green-2:#00b32c;--r02-green-3:#043d13;
  --r02-amber:#ffb000;--r02-cyan:#70e6ff;--r02-magenta:#ff2fd4;
  --r02-paper:#f2fff5;--r02-text:#c7ffd2;--r02-muted:#79b986;
  --r02-bg:#000;--r02-panel:rgba(0,12,4,.92);--r02-line:rgba(0,255,65,.24);
  --r02-max:1220px;
}
*{box-sizing:border-box}
html{background:#000;overflow-x:hidden}
body.r21-gate{
  min-height:100vh;overflow-x:hidden;background:#000;color:var(--r02-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  line-height:1.65;
}
/* R50K scanlines + vignette + subtle phosphor/noise without obscuring text. */
body.r21-gate::before{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:1;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px);
}
body.r21-gate::after{
  content:"";position:fixed;inset:0;z-index:9996;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.78) 100%);
}
.r02-noise{position:fixed;inset:0;z-index:9995;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Sticky R50K terminal header. */
.r21-topbar{
  position:sticky!important;top:0!important;z-index:500!important;
  display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:1rem!important;
  padding:.55rem 1rem!important;background:rgba(0,0,0,.96)!important;border:0!important;border-bottom:1px solid var(--r02-green-3)!important;
  backdrop-filter:blur(5px)!important;box-shadow:none!important;
}
.r21-brand{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-size:.78rem!important;font-weight:900!important;letter-spacing:.14em!important;color:var(--r02-paper)!important;text-shadow:none!important;white-space:nowrap}
.r21-brand span{color:var(--r02-green)!important}
.r21-nav{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:.4rem!important;flex-wrap:wrap!important}
.r21-nav>a,.r21-nav-button{
  min-height:36px!important;padding:.45rem .7rem!important;border:1px solid var(--r02-green-3)!important;border-radius:0!important;
  background:transparent!important;color:var(--r02-green)!important;font:700 .67rem/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;box-shadow:none!important;
}
.r21-nav>a:hover,.r21-nav-button:hover,.r21-nav>a:focus-visible,.r21-nav-button:focus-visible{
  border-color:var(--r02-green)!important;box-shadow:0 0 12px rgba(0,255,65,.20)!important;text-shadow:0 0 7px var(--r02-green)!important;transform:none!important;
}
[data-audio-toggle][aria-pressed="true"]{border-color:var(--r02-amber)!important;color:var(--r02-amber)!important}
.audio-led{width:.48rem;height:.48rem;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;display:inline-block;margin-right:.28rem}

main{position:relative;z-index:1}
.r21-section{
  width:min(calc(100% - 2.8rem),var(--r02-max))!important;max-width:var(--r02-max)!important;margin:0 auto!important;padding:clamp(2.5rem,6vw,5rem) clamp(1rem,2.7vw,2rem)!important;
  border:0!important;border-top:1px solid rgba(0,255,65,.12)!important;background:transparent!important;box-shadow:none!important;
}
.r21-section:nth-of-type(even){background:transparent!important}
.r21-heading{display:flex!important;align-items:flex-end!important;gap:1rem!important;border-bottom:1px solid var(--r02-green-3)!important;margin-bottom:1.3rem!important;padding-bottom:.65rem!important}
.r21-heading span{color:var(--r02-amber)!important;letter-spacing:.15em!important;font:800 .72rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;white-space:nowrap}
.r21-heading h2{margin:0!important;color:var(--r02-green)!important;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;font-size:clamp(1.35rem,3vw,2.2rem)!important;letter-spacing:.06em!important;text-transform:uppercase!important;line-height:1.12!important;text-shadow:none!important}
.r21-copy,.r21-copy p,.r21-support,.r21-note,.r21-resource p,.r21-latest-card p,.r21-demo-footnote{color:var(--r02-text)!important}
.r21-copy p,.r21-resource p,.r21-latest-card p{max-width:76ch}

/* R03 HERO — centered official lockup + visible trademark + R50K terminal/CRT language. */
.r21-hero{
  width:100%!important;max-width:none!important;min-height:78vh!important;
  padding:clamp(3.8rem,7vw,6.8rem) max(1rem,calc((100vw - var(--r02-max))/2 + 1.4rem))!important;
  display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;align-items:center!important;
  gap:clamp(1.3rem,3vw,2.3rem)!important;position:relative!important;overflow:hidden!important;background:#000!important;border-top:0!important;
  text-align:center!important;
}
.r21-hero-video-wrap{opacity:.14!important;filter:grayscale(.9) sepia(.75) hue-rotate(63deg) saturate(1.75) contrast(1.08)!important;transform:scale(1.04)!important}
.r21-hero-video{width:100%!important;height:100%!important;object-fit:cover!important}
.r21-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.66) 58%,#000 96%),
  radial-gradient(circle at 50% 34%,rgba(47,229,255,.08),transparent 25%),
  radial-gradient(circle at 50% 48%,rgba(255,47,212,.045),transparent 34%)!important}
.r21-grid-glow,.r21-ambient-lights{opacity:.14!important}
.r21-hero-copy{
  position:relative!important;z-index:2!important;width:min(100%,980px)!important;max-width:980px!important;margin:0 auto!important;
  padding:clamp(1.35rem,3.2vw,2.35rem)!important;background:rgba(0,8,2,.82)!important;
  border:1px solid rgba(0,255,65,.30)!important;border-radius:0!important;
  box-shadow:0 0 38px rgba(0,255,65,.085),inset 0 0 38px rgba(0,255,65,.025)!important;
  text-align:center!important;
}
.r21-hero-copy::before{
  content:"SYS:// HERO_LOCKUP / SIGNAL_READY"!important;position:absolute!important;left:1rem!important;top:.55rem!important;
  width:auto!important;height:auto!important;transform:none!important;background:none!important;filter:none!important;opacity:.62!important;
  color:var(--r02-muted)!important;font:700 .55rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  letter-spacing:.13em!important;pointer-events:none!important;z-index:3!important;
}
.r21-hero-copy::after{
  content:""!important;display:block!important;width:min(620px,82%)!important;height:2px!important;margin:1.45rem auto 0!important;
  border-radius:0!important;background:linear-gradient(90deg,transparent,var(--r02-green),var(--r02-cyan),var(--r02-amber),transparent)!important;
  box-shadow:0 0 12px rgba(0,255,65,.22),0 0 18px rgba(112,230,255,.10)!important;
}
.r21-kicker{margin:.35rem 0 .85rem!important;color:var(--r02-amber)!important;letter-spacing:.18em!important;font-size:.72rem!important;font-weight:800!important;text-align:center!important}
.r03-logo-lockup{
  position:relative!important;display:block!important;width:min(650px,82vw)!important;max-width:100%!important;
  margin:.25rem auto 1rem!important;isolation:isolate!important;
}
.r03-logo-lockup::before{
  content:"";position:absolute;inset:8% 4% 5%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,255,65,.115),rgba(47,229,255,.07) 36%,rgba(255,47,212,.035) 54%,transparent 72%);
  filter:blur(24px);opacity:.95;animation:r03-logo-aura 3.8s ease-in-out infinite alternate;
}
.r21-hero-logo{
  display:block!important;width:100%!important;max-width:100%!important;height:auto!important;margin:0 auto!important;object-fit:contain!important;object-position:center center!important;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.34)) drop-shadow(0 0 16px rgba(0,255,65,.42)) drop-shadow(0 0 29px rgba(47,229,255,.24)) drop-shadow(0 0 42px rgba(255,59,48,.12))!important;
  animation:r03-logo-breathe 3.8s ease-in-out infinite alternate!important;
}
.r03-trademark{
  position:absolute!important;right:1.2%!important;top:61.5%!important;display:block!important;margin:0!important;transform:translateY(-50%)!important;
  color:#fff9e0!important;font-family:Arial,Helvetica,sans-serif!important;font-weight:800!important;font-size:clamp(1.25rem,2.35vw,1.9rem)!important;
  line-height:1!important;letter-spacing:0!important;text-shadow:0 0 3px #fff,0 0 8px rgba(47,229,255,.88),0 0 15px rgba(0,255,65,.45)!important;
  opacity:1!important;z-index:3!important;
}
@keyframes r03-logo-breathe{from{filter:drop-shadow(0 0 6px rgba(255,255,255,.27)) drop-shadow(0 0 13px rgba(0,255,65,.34)) drop-shadow(0 0 24px rgba(47,229,255,.17)) drop-shadow(0 0 34px rgba(255,59,48,.08))}to{filter:drop-shadow(0 0 9px rgba(255,255,255,.42)) drop-shadow(0 0 22px rgba(0,255,65,.52)) drop-shadow(0 0 38px rgba(47,229,255,.27)) drop-shadow(0 0 50px rgba(255,59,48,.13))}}
@keyframes r03-logo-aura{from{opacity:.68;transform:scale(.97)}to{opacity:1;transform:scale(1.035)}}
.r21-slogan{margin:.1rem auto .7rem!important;color:var(--r02-amber)!important;letter-spacing:.18em!important;font-weight:800!important;text-shadow:0 0 10px rgba(255,176,0,.18)!important;text-align:center!important}
.r21-impact{margin:.35rem auto!important;color:var(--r02-paper)!important;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;letter-spacing:.055em!important;text-shadow:0 0 14px rgba(47,229,255,.08)!important;text-align:center!important}
.r21-support{margin:.7rem auto 1rem!important;max-width:720px!important;text-align:center!important}
.r21-actions{justify-content:center!important;margin-top:1.05rem!important}
.r21-hero-figure{
  position:relative!important;z-index:2!important;width:min(440px,88vw)!important;max-width:440px!important;margin:0 auto!important;
  text-align:center!important;color:var(--r02-muted)!important;font-size:.72rem!important;letter-spacing:.12em!important;
}
.r21-crt-window,.r21-route-window,.r21-face-preview,.r21-demo-preview{
  position:relative!important;border:1px solid var(--r02-green-3)!important;border-radius:0!important;background:#000!important;
  box-shadow:0 0 30px rgba(0,255,65,.06),inset 0 0 24px rgba(0,255,65,.025)!important;overflow:hidden!important;
}
.r21-crt-window::after,.r21-route-window::after,.r21-face-preview::after,.r21-demo-preview::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.17) 0,rgba(0,0,0,.17) 1px,transparent 1px,transparent 3px)!important}

/* R50K flat terminal panels: not a monochrome-green copy; amber/cyan indicate roles. */
.r21-resource,.r21-latest-card,.r21-demo-cabinet,.r21-faq-grid>*,.r21-testid-card,.r21-controls-grid>*,.r21-threat-grid>*,.r21-basics>*,.r21-mode-split>*,.r21-face-card{
  border:1px solid var(--r02-green-3)!important;border-radius:0!important;background:var(--r02-panel)!important;padding:1.3rem!important;
  box-shadow:inset 0 0 25px rgba(0,255,65,.025)!important;
}
.r21-resource h3,.r21-latest-card h3,.r21-face-card h3{color:#b9ffc7!important;text-shadow:none!important}
.r21-kicker,.r21-latest-category,.r21-demo-badges,.r21-route-label,.r21-eyebrow{color:var(--r02-amber)!important;letter-spacing:.15em!important}
.r21-journal-context-link,.r21-copy a:not(.r21-btn){color:var(--r02-cyan)!important;border-bottom:1px dotted rgba(112,230,255,.42)!important}
.r21-btn,.r21-demo-play{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:.58rem .85rem!important;
  border:1px solid var(--r02-green-3)!important;border-radius:0!important;background:transparent!important;color:var(--r02-green)!important;
  font:700 .72rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;letter-spacing:.08em!important;text-transform:uppercase!important;box-shadow:none!important;
}
.r21-btn:hover,.r21-demo-play:hover,.r21-btn:focus-visible,.r21-demo-play:focus-visible{border-color:var(--r02-green)!important;box-shadow:0 0 12px rgba(0,255,65,.2)!important;text-shadow:0 0 7px var(--r02-green)!important;transform:none!important}
.r21-btn.primary,.r21-demo-play{border-color:var(--r02-amber)!important;color:var(--r02-amber)!important;background:rgba(255,176,0,.025)!important}
.r21-journal-categories{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1rem!important;margin:1.4rem 0!important}
.r21-journal-categories a{min-height:90px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:1rem!important;border:1px solid var(--r02-green-3)!important;background:var(--r02-panel)!important;color:#b9ffc7!important;font-size:.78rem!important;line-height:1.35!important}
.r21-journal-categories a:hover,.r21-journal-categories a:focus-visible{border-color:var(--r02-green)!important;color:#fff!important;text-shadow:0 0 8px rgba(0,255,65,.55)!important}
.r21-latest-card{position:relative;overflow:hidden!important}
.r21-latest-card::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(var(--r02-cyan),var(--r02-green),transparent);opacity:.7}
.r21-demo-hall{background:transparent!important}
.r21-demo-marquee{border:1px solid rgba(255,176,0,.55)!important;border-radius:0!important;color:var(--r02-amber)!important;background:rgba(255,176,0,.025)!important;box-shadow:0 0 18px rgba(255,176,0,.08)!important}
.r21-footer{position:relative;z-index:10;border-top:1px solid var(--r02-green-3)!important;background:#010903!important;color:var(--r02-muted)!important}
.r21-footer a{color:var(--r02-green)!important}

/* Terminal micro-details. */
.r21-section:not(.r21-hero)::before{content:"SYS:// ALEXX_SKYRIDER / PORTAL";display:block;margin-bottom:1rem;color:var(--r02-muted);font-size:.61rem;letter-spacing:.13em;opacity:.52}
.r21-resource::after,.r21-latest-card::after,.r21-demo-cabinet::after{content:"READY";display:block;margin-top:1rem;padding-top:.55rem;border-top:1px dashed rgba(0,255,65,.12);color:var(--r02-muted);font-size:.58rem;letter-spacing:.14em}

:focus-visible{outline:2px solid var(--r02-amber)!important;outline-offset:3px!important}
img,video,canvas,svg{max-width:100%}

@media(max-width:980px){
 .r21-hero{min-height:auto!important;padding-top:3.6rem!important;padding-bottom:3.6rem!important}
 .r21-hero-copy{width:min(100%,860px)!important}
 .r21-hero-figure{max-width:420px!important;margin:auto!important;width:min(88vw,420px)!important}
 .r21-journal-categories{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .r21-topbar{grid-template-columns:1fr!important;align-items:start!important}.r21-nav{justify-content:flex-start!important}
}
@media(max-width:720px){
 .r21-section{width:100%!important;padding:2.7rem .9rem!important}
 .r21-hero{padding:2.8rem .75rem!important}.r21-hero-copy{padding:1.35rem .8rem 1.15rem!important}
 .r21-hero-copy::before{left:.7rem!important;top:.45rem!important;font-size:.48rem!important;letter-spacing:.1em!important}
 .r03-logo-lockup{width:min(100%,620px)!important;margin:.35rem auto .85rem!important}
 .r21-hero-logo{width:100%!important;max-width:100%!important}
 .r03-trademark{font-size:clamp(1.05rem,5.2vw,1.45rem)!important;right:1.2%!important;top:61.5%!important}
 .r21-topbar{padding:.5rem .55rem!important;gap:.45rem!important}.r21-brand{font-size:.69rem!important}
 .r21-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:.35rem!important}
 .r21-nav>a,.r21-nav-button{width:100%!important;min-width:0!important;white-space:normal!important;font-size:.61rem!important;padding:.5rem .35rem!important}
 .r21-journal-categories{grid-template-columns:1fr!important}.r21-heading{align-items:flex-start!important}.r21-heading h2{font-size:1.42rem!important}
}
@media(max-width:430px){
 .r21-nav{grid-template-columns:1fr!important}.r21-actions{display:grid!important}.r21-btn{width:100%!important}
 .r21-hero{padding-inline:.55rem!important}.r21-hero-copy{padding-inline:.62rem!important}
 .r03-trademark{font-size:1.05rem!important;right:1.4%!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.r21-hero-video{display:none!important}}