/* Dirección editorial local: estructura limpia, fotografía protagonista y controles de alto contraste. */
:root { --paper: #f3f0e9; --electric: #cfff45; --night: #07091a; }
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
.site-header { backdrop-filter: blur(18px); background: linear-gradient(180deg,rgba(4,6,22,.88),rgba(4,6,22,.44)); border-bottom: 1px solid rgba(255,255,255,.09); }
.catalog-nav > a,.catalog-dropdown summary { border-radius: 999px; padding: 8px 10px; transition: background .2s ease,color .2s ease; }
.catalog-nav > a:hover,.catalog-dropdown summary:hover { background: rgba(207,255,69,.13); color: var(--electric); }
.hero { min-height: min(900px,100svh); isolation: isolate; }
.hero-copy { max-width: 630px; }
.hero h1 { letter-spacing: -.075em; line-height: .89; text-wrap: balance; }
.hero .lead { max-width: 49ch; }
.hero-signals { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:26px 0 0; padding:0; }
.hero-signals li { border:1px solid rgba(255,255,255,.27); border-radius:99px; color:#fff; font:700 10px "DM Mono",monospace; letter-spacing:.14em; padding:8px 12px; }
.hero-signals li:first-child { border-color:var(--electric); color:var(--electric); }
.hero-game { border:1px solid rgba(255,255,255,.2); box-shadow: 20px 24px 0 rgba(5,5,20,.26),0 30px 80px rgba(0,0,0,.35); transform: rotate(1.2deg); }
.ticker { border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.arcade-lounge { background:#090d28; min-height:670px; overflow:hidden; position:relative; }
.arcade-lounge img { filter: saturate(1.15) contrast(1.07); opacity:.8; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.arcade-lounge:hover img { transform:scale(1.035); }
.arcade-lounge-copy { background:linear-gradient(90deg,rgba(5,7,20,.92),rgba(5,7,20,.56),transparent); max-width:720px; padding-right:90px; }
.section { padding-top:clamp(76px,11vw,156px); padding-bottom:clamp(76px,11vw,156px); }
.section-head h2,.experience-banner h2 { letter-spacing:-.065em; line-height:.92; text-wrap:balance; }
.machine-grid { gap:clamp(14px,2vw,30px); }
.machine-card { background:var(--paper); border:1px solid rgba(255,255,255,.6); overflow:hidden; position:relative; }
.machine-card::before { background:radial-gradient(circle at 50% 15%,rgba(109,205,255,.34),transparent 38%); content:""; inset:0; opacity:.8; pointer-events:none; position:absolute; }
.machine-card > * { position:relative; z-index:1; }
.machine-card.large::after { background:url("assets/photo-project/arcade-fullsize-hogar.webp") center/cover; content:""; inset:0; mix-blend-mode:multiply; opacity:.12; pointer-events:none; position:absolute; }
.machine-card:nth-child(2)::after { background:url("assets/photo-project/arcade-compact-bar.webp") center/cover; content:""; inset:0; mix-blend-mode:multiply; opacity:.1; pointer-events:none; position:absolute; }
.machine-card:nth-child(3)::after { background:url("assets/photo-project/arcade-bartop-club.webp") center/cover; content:""; inset:0; mix-blend-mode:multiply; opacity:.1; pointer-events:none; position:absolute; }
.machine-card:hover { box-shadow:14px 17px 0 rgba(207,255,69,.18),0 25px 50px rgba(0,0,0,.24); transform:translateY(-8px) rotate(-.35deg); }
.format-footer { align-items:center; border-top:1px solid rgba(255,255,255,.23); display:grid; gap:20px; grid-template-columns:auto 1fr minmax(210px,1.4fr) auto; margin-top:34px; padding-top:20px; }
.format-footer span,.format-footer a { color:var(--electric); font:700 10px "DM Mono",monospace; letter-spacing:.11em; text-decoration:none; }
.format-footer i { background:rgba(255,255,255,.3); height:1px; }
.format-footer p { color:#d8d6e4; font-size:14px; margin:0; }
.format-footer a:hover { color:#fff; }
.retro-strip { box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -1px rgba(255,255,255,.18); }
.experiences { overflow:hidden; }
.experience-banner { padding-bottom:44px; }
.quest-map { border:1px solid rgba(207,255,69,.31); box-shadow:0 28px 80px rgba(0,0,0,.33),inset 0 0 70px rgba(43,68,199,.18); }
.quest-map::after { background:linear-gradient(90deg,transparent,rgba(207,255,69,.18),transparent); content:""; height:1px; left:0; position:absolute; right:0; top:30%; }
.quest-status { color:var(--electric); font:700 10px "DM Mono",monospace; left:28px; letter-spacing:.12em; margin:0; position:absolute; top:23px; z-index:2; }
.news-grid { gap:16px; }
.news-card { border-radius:2px; min-height:295px; overflow:hidden; position:relative; }
.news-card::before { background:linear-gradient(180deg,transparent 18%,rgba(7,8,29,.97)); content:""; inset:0; position:absolute; z-index:0; }
.news-card:nth-child(1) { background:url("assets/made-for-arcade/arcade-fullsize.jpg") center/cover; }
.news-card:nth-child(2) { background:url("assets/made-for-arcade/reaction-ring.jpg") center/cover; }
.news-card:nth-child(3) { background:url("assets/made-for-arcade/custom-built.jpg") center/cover; }
.news-card article { align-content:end; background:transparent; border:0; display:grid; min-height:295px; position:relative; z-index:1; }
.news-card article p { color:var(--electric); }
.jal-help { border:1px solid rgba(88,221,255,.34); }
.reviews-layout { border-top:1px solid rgba(255,255,255,.18); padding-top:28px; }
.review-form,.review-card { border:1px solid rgba(255,255,255,.12); box-shadow:0 22px 50px rgba(0,0,0,.18); }
.review-form input:focus,.review-form textarea:focus,.review-form select:focus { border-color:var(--electric); box-shadow:0 0 0 3px rgba(207,255,69,.16); outline:0; }
footer { border-top:1px solid rgba(255,255,255,.15); }
@media (max-width:800px) {
  .site-header { backdrop-filter:blur(14px); }
  .hero { min-height:100svh; padding-bottom:42px; }
  .hero h1 { font-size:clamp(44px,14vw,72px); }
  .hero-game { margin-top:28px; transform:none; }
  .arcade-lounge { min-height:620px; }
  .arcade-lounge-copy { background:linear-gradient(0deg,rgba(5,7,20,.96),rgba(5,7,20,.56),transparent); max-width:none; padding:110px 24px 28px; }
  .format-footer { align-items:start; grid-template-columns:1fr; gap:12px; }
  .format-footer i { width:48px; }
  .format-footer a { margin-top:8px; }
  .quest-status { font-size:9px; left:18px; top:17px; }
  .news-card,.news-card article { min-height:245px; }
}
@media (prefers-reduced-motion:reduce) { .arcade-lounge img,.machine-card { transition:none; } .machine-card:hover { transform:none; } }

/* Sistema de marcos Arcade JAL: bordes redondeados, perfil neón y picos de máquina recreativa. */
:root { --jal-radius: 22px; --jal-radius-small: 14px; --jal-stroke: rgba(207,255,69,.78); }
.button,
.hero-signals li,
.catalog-nav > a,
.catalog-dropdown summary,
.mobile-catalog-nav summary,
.machine-select,
.text-link {
  border-radius: 999px;
}
.button {
  border: 1px solid var(--jal-stroke);
  box-shadow: 0 0 0 3px rgba(207,255,69,.07), 0 9px 22px rgba(0,0,0,.2);
}
.button:hover { box-shadow: 0 0 0 3px rgba(207,255,69,.16),0 0 26px rgba(207,255,69,.2),0 12px 24px rgba(0,0,0,.27); }
.hero-game,
.arcade-lounge,
.machine-card,
.quest-map,
.news-card,
.news-grid article,
.review-form,
.review-card,
.jal-help,
.jal-help details {
  border-radius: var(--jal-radius);
}
.hero-game,
.quest-map,
.review-form {
  border-color: var(--jal-stroke);
  position: relative;
}
.hero-game::before,
.quest-map::before,
.review-form::before {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: calc(var(--jal-radius) - 6px);
  content:"";
  inset: 6px;
  pointer-events:none;
  position:absolute;
}
.hero-game > *,
.quest-map > *,
.review-form > * { position:relative; z-index:1; }
.arcade-lounge { border:1px solid rgba(255,255,255,.16); box-shadow:0 22px 60px rgba(0,0,0,.28); }
.arcade-lounge::after {
  border:2px solid var(--jal-stroke);
  border-radius: var(--jal-radius);
  content:"";
  inset: 10px;
  pointer-events:none;
  position:absolute;
  z-index:2;
}
.arcade-lounge-copy {
  border: 1px solid rgba(207,255,69,.78);
  border-radius: 0 var(--jal-radius) var(--jal-radius) 0;
  box-shadow: 7px 0 0 rgba(207,255,69,.16);
}
.machine-card { border-radius: var(--jal-radius); }
.machine-card .machine-illustration { filter: drop-shadow(0 12px 10px rgba(8,7,31,.2)); }
.machine-card .machine-select {
  align-items:center;
  background:rgba(7,9,26,.92);
  color:#fff;
  display:inline-flex;
  gap:7px;
  margin-top:5px;
  padding:9px 12px;
}
.machine-card:hover .machine-select { background:var(--electric); color:var(--night); }
.machine-card:hover .machine-select b { color:inherit; }
.news-card { border:1px solid rgba(207,255,69,.45); box-shadow:0 16px 34px rgba(0,0,0,.22); }
.news-grid article { border-radius: calc(var(--jal-radius) - 2px); }
.jal-help { border-radius:var(--jal-radius); overflow:hidden; }
.jal-help details { border:0; border-bottom:1px solid rgba(88,221,255,.18); border-radius:0; }
.jal-help details:first-child { border-radius:var(--jal-radius) var(--jal-radius) 0 0; }
.jal-help details:last-child { border-bottom:0; border-radius:0 0 var(--jal-radius) var(--jal-radius); }
.format-footer { border-radius:var(--jal-radius-small); padding:20px 22px; border:1px solid rgba(255,255,255,.16); background:rgba(5,7,24,.35); }
.quest-node { border-radius:18px; box-shadow:0 0 0 2px rgba(207,255,69,.13),0 13px 26px rgba(0,0,0,.23); }
.quest-node:hover { box-shadow:0 0 0 3px rgba(207,255,69,.3),0 0 24px rgba(207,255,69,.3); }
.review-form input,.review-form textarea,.review-form select { border-radius:12px; }
.review-card { border-radius:0 var(--jal-radius-small) var(--jal-radius-small) 0; }
@media (max-width:800px) {
  :root { --jal-radius:18px; }
  .arcade-lounge::after { inset:7px; }
  .arcade-lounge-copy { border-radius:var(--jal-radius) var(--jal-radius) 0 0; box-shadow:0 -6px 0 rgba(207,255,69,.13); }
  .format-footer { padding:18px; }
}

/* La placa editorial se apoya sobre el suelo y deja respirar la escena del salón. */
.arcade-lounge { align-items:flex-end; min-height:clamp(520px,46vw,720px); padding:0; }
.arcade-lounge::after { background:linear-gradient(180deg,rgba(3,4,11,.02) 0%,rgba(3,4,11,.05) 48%,rgba(3,4,11,.28) 72%,rgba(3,4,11,.68) 100%); border:0; box-shadow:none; inset:0; }
.arcade-lounge > img { object-position:center 43%; }
.arcade-lounge-copy {
  backdrop-filter:blur(12px);
  background:linear-gradient(135deg,rgba(7,10,26,.84),rgba(16,16,36,.69));
  border:1px solid var(--jal-stroke);
  border-radius:var(--jal-radius) var(--jal-radius) 4px 4px;
  box-shadow:0 0 0 5px rgba(7,9,26,.48),0 -1px 22px rgba(207,255,69,.24),10px 10px 0 rgba(255,76,160,.18);
  margin:0 clamp(18px,5vw,82px) clamp(18px,3.6vw,46px) auto;
  max-width:min(520px,56%);
  padding:clamp(22px,2.9vw,38px) clamp(23px,3.8vw,48px);
}
.arcade-lounge-copy::after { border:1px solid rgba(255,255,255,.18); border-radius:calc(var(--jal-radius) - 7px) calc(var(--jal-radius) - 7px) 2px 2px; content:""; inset:7px; pointer-events:none; position:absolute; }
.arcade-lounge-copy > * { position:relative; z-index:1; }
.arcade-lounge-copy .eyebrow { margin-bottom:13px; }
.arcade-lounge-copy h2 { font-size:clamp(34px,4.1vw,61px); margin:0; }
.arcade-lounge-copy p:not(.eyebrow) { font-size:15px; margin:15px 0 19px; }
.arcade-lounge-copy .button { padding:11px 17px; }
@media (max-width:800px) {
  .arcade-lounge { min-height:610px; }
  .arcade-lounge > img { object-position:51% 36%; }
  .arcade-lounge-copy { margin:0 13px 14px; max-width:none; padding:22px 22px 20px; }
  .arcade-lounge-copy h2 { font-size:clamp(34px,10vw,48px); }
}

/* Marcador del juego: cada dato tiene su propia zona y no se cruza con START ni con los récords. */
.hero-game { aspect-ratio: 480 / 395; display:grid; grid-template-rows:auto minmax(0,1fr) auto; transform:rotate(1deg); }
.playable canvas { height:auto; min-height:0; width:100%; }
.game-chrome { align-items:center; min-height:39px; padding:11px 15px; }
.game-message { bottom:82px; inset-inline:0; top:39px; }
.game-footer { align-items:center; background:#18142d; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:8px; grid-template-columns:auto minmax(120px,1fr); min-height:56px; padding:9px 14px; position:relative; z-index:5; }
.game-footer #localBest { color:#f1edf8; font:700 10px "DM Mono",monospace; letter-spacing:.04em; white-space:nowrap; }
.game-footer a { justify-self:end; line-height:1.25; max-width:165px; text-align:right; }
.pixel-touch-controls { position:absolute; bottom:66px; left:12px; z-index:4; }
@media (max-width:800px) {
  .hero-game { aspect-ratio:auto; transform:none; }
  .game-footer { grid-template-columns:1fr; min-height:70px; padding:9px 12px; }
  .game-footer a { justify-self:start; max-width:none; text-align:left; }
  .game-message { bottom:96px; }
  .pixel-touch-controls { bottom:101px; }
}

/* Pixel Run: el escenario y los mandos ocupan filas distintas. START siempre queda libre. */
.hero-game.playable {
  aspect-ratio: auto;
  display: grid;
  grid-template-rows: auto auto auto auto;
  overflow: hidden;
}
.hero-game .game-stage { grid-row: 2; position: relative; width: 100%; }
/* Mantiene el lienzo completo: el tamaño de la escena nunca depende de una altura fija. */
.hero-game .game-stage {
  aspect-ratio: 480 / 310;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.hero-game .game-stage canvas {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
/* La decoración del suelo pertenecía al antiguo mockup y ocultaba la nave real. */
.hero-game.playable .game-stage::after { display: none; }
.hero-game .game-message {
  bottom: 0;
  inset-inline: 0;
  top: 0;
  z-index: 5;
}
.hero-game .pixel-touch-controls {
  align-items: center;
  background: #12122a;
  border-top: 1px solid rgba(255,255,255,.14);
  bottom: auto;
  display: flex;
  gap: 12px;
  grid-row: 3;
  justify-content: center;
  left: auto;
  min-height: 62px;
  padding: 9px 14px;
  position: relative;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  visibility: hidden;
  z-index: 4;
}
.hero-game.is-playing .pixel-touch-controls { pointer-events: auto; visibility: visible; }
.hero-game .pixel-touch-controls button {
  min-height: 42px;
  min-width: 68px;
  touch-action: none;
}
.hero-game .game-footer { grid-row: 4; }
.coin-intro-ui button::before { background: none; border: 0; content: none; }
.coin-intro-ui button { padding-left: 24px; }
.coin-intro-ui .coin-dot { color: var(--electric); font-size: 16px; margin-right: 7px; }
@media (max-width:800px) {
  .hero-game.playable { max-width: 100%; width: 100%; }
  .hero-game .game-stage { aspect-ratio: 480 / 310; }
  .hero-game .pixel-touch-controls { min-height: 64px; }
  .hero-game .pixel-touch-controls button { min-height: 46px; min-width: 82px; }
  .hero-game .game-message { bottom: 0; top: 0; }
}
html,body{overflow-x:hidden}
#siteInvaders{width:100%!important;max-width:100%!important}