/* IN NOMINE RALLY — portal web. Paleta v2 (docs/CONTRATO_V2.md). Sin dependencias salvo Google Fonts. */
:root {
  --ink: #121014;
  --ink-2: #1b171f;
  --ink-3: #26202b;
  --line: #3a3340;
  --acid: #b6ff00;
  --pink: #ff1f6d;
  --toxic: #ffe600;
  --rust: #b5482a;
  --blood: #8b0d1a;
  --bruise: #3a1450;
  --bone: #eee3c7;
  --muted: #b9b0a6;
  --f-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-marker: 'Permanent Marker', 'Comic Sans MS', cursive;
  --f-dirt: 'Rubik Dirt', 'Anton', Impact, sans-serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --f-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --r: 4px;
  --shadow: 6px 6px 0 #000;
  --nav-h: 64px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--ink); color: var(--bone); font: 17px/1.6 var(--f-body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acid); }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--toxic); color: var(--ink); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--toxic); outline-offset: 3px; }
code, kbd { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
kbd { display: inline-block; min-width: 1.8em; padding: 1px 6px; margin: 0 2px 2px 0; text-align: center; border: 1px solid #5a5260; border-bottom-width: 3px; border-radius: 4px; background: var(--ink); color: var(--bone); }
.small { font-size: .85rem; color: var(--muted); }

/* ---------- botones ---------- */
.btn { --bg: var(--ink-3); --fg: var(--bone); display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .7em 1.3em; border: 2px solid var(--ink); background: var(--bg); color: var(--fg); font: 1rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 #000; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.btn .ico { width: 1em; height: 1em; fill: currentColor; }
.btn-play { --bg: var(--pink); --fg: #fff; }
.btn-play:hover { --bg: #ff3d82; }
.btn-ghost { --bg: transparent; --fg: var(--bone); border-color: var(--bone); box-shadow: none; }
.btn-ghost:hover { --bg: rgba(238, 227, 199, .1); box-shadow: none; transform: none; }
.btn-xl { font-size: clamp(1.05rem, 2.2vw, 1.35rem); padding: .85em 1.6em; }

/* ---------- avisos ---------- */
.avisos { position: relative; z-index: 51; background: var(--toxic); color: var(--ink); font: .95rem/1.4 var(--f-type); text-align: center; padding: 8px var(--gut); }
.avisos a { color: var(--ink); font-weight: 700; }
.avisos p { margin: 0; }
.avisos p + p { margin-top: 4px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(18, 16, 20, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.nav.is-scrolled { background: rgba(18, 16, 20, .96); border-bottom-color: var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bone); flex: none; }
.brand-ico { width: 34px; height: 34px; }
.brand-txt { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: .03em; white-space: nowrap; }
.brand-txt .b2 { font-family: var(--f-dirt); color: var(--acid); }
.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu a:not(.btn) { color: var(--bone); text-decoration: none; font: .95rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; padding: 10px 10px; position: relative; }
.nav-menu a:not(.btn)::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; background: var(--acid); transform: scaleX(0); transition: transform .15s; }
.nav-menu a:not(.btn):hover::after, .nav-menu a.is-active::after { transform: scaleX(1); }
.nav-cta { margin-left: 10px; padding: .6em 1.2em; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 2px solid var(--bone); background: transparent; cursor: pointer; padding: 10px 9px; flex-direction: column; justify-content: space-between; }
.nav-toggle i { display: block; height: 3px; background: var(--bone); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded='true'] i:nth-of-type(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] i:nth-of-type(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] i:nth-of-type(3) { transform: translateY(-8.5px) rotate(-45deg); }
@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .nav-menu { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--ink); border-bottom: 2px solid var(--pink); padding: 8px var(--gut) 20px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav-menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-menu a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .nav-menu a:not(.btn)::after { display: none; }
  .nav-cta { margin: 16px 0 0; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(92svh, 920px); display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: 48px 0 96px; }
.hero-slides { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.slide.is-on img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.14) translate(-1%, -1%); } }
.hero-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(18,16,20,.94) 0%, rgba(18,16,20,.78) 38%, rgba(18,16,20,.25) 75%, rgba(18,16,20,.35) 100%),
  linear-gradient(0deg, var(--ink) 0%, rgba(18,16,20,0) 30%),
  radial-gradient(rgba(0,0,0,.35) 1px, transparent 1.5px) 0 0 / 4px 4px; }
.hero-in { width: 100%; }
.kicker { font: .95rem/1.4 var(--f-type); color: var(--toxic); margin-bottom: 14px; }
.hero-title { display: flex; flex-direction: column; text-transform: uppercase; margin-bottom: 14px; }
.ht-top { font: clamp(2.4rem, 7vw, 5.6rem)/.92 var(--f-display); letter-spacing: .01em; color: var(--bone); }
.ht-rally { font: clamp(4.4rem, 15vw, 11.5rem)/.85 var(--f-dirt); color: var(--acid); text-shadow: 5px 5px 0 var(--pink), 10px 10px 0 #000; margin-left: -.03em; }
.hero-claim { font: clamp(1.4rem, 3.2vw, 2.1rem)/1.2 var(--f-marker); margin-bottom: 12px; }
.hero-claim .hl { color: var(--pink); }
.hero-sub { max-width: 34em; color: #ddd3bd; font-size: clamp(1rem, 1.6vw, 1.15rem); margin-bottom: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font: .95rem/1.2 var(--f-type); color: var(--muted); }
.hero-facts b { font: 1.6rem/1 var(--f-display); color: var(--bone); margin-right: 6px; }
.hero-ctrl { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.dots { display: flex; gap: 8px; }
.dots button { width: 34px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; }
.dots button::before { content: ''; display: block; width: 100%; height: 4px; background: rgba(238,227,199,.35); transition: background .2s; }
.dots button[aria-current='true']::before { background: var(--acid); }
.hero-pause { width: 32px; height: 32px; border: 1px solid rgba(238,227,199,.5); background: rgba(18,16,20,.5); cursor: pointer; padding: 7px; }
.hero-pause svg { width: 100%; height: 100%; fill: var(--bone); }
.hero-pause .i-play { display: none; }
.hero-pause[aria-pressed='true'] .i-play { display: block; }
.hero-pause[aria-pressed='true'] .i-pause { display: none; }

/* ---------- secciones ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.sec-alt { background: var(--ink-2); }
.sec-alt::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 14px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 30%, 96% 80%, 91% 35%, 85% 70%, 78% 25%, 70% 85%, 63% 40%, 55% 75%, 47% 30%, 40% 90%, 32% 35%, 24% 70%, 16% 30%, 9% 80%, 4% 35%, 0 70%); }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.eyebrow { font: .95rem/1 var(--f-type); color: var(--acid); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em; }
.eyebrow .num { font: 1rem/1 var(--f-display); background: var(--acid); color: var(--ink); padding: 4px 6px; letter-spacing: .05em; }
.sec h2 { font: clamp(2.1rem, 5vw, 3.6rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 16px; }
.sec h2 .hl { color: var(--pink); }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #d8cfba; }
.card { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r); position: relative; }
.sub-h { font: 1.6rem/1 var(--f-display); text-transform: uppercase; margin: 64px 0 24px; }

/* cinta americana (con moderación) */
.tape::before { content: ''; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: linear-gradient(180deg, rgba(220,217,224,.85), rgba(170,167,175,.85)); clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 0, 88% 0, 92% 12%, 96% 0, 100% 10%, 100% 90%, 96% 100%, 92% 88%, 88% 100%, 12% 100%, 8% 88%, 4% 100%, 0 90%); box-shadow: 0 2px 2px rgba(0,0,0,.3); }

/* ---------- cómo se juega ---------- */
.steps { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.steps li { border-top: 3px solid var(--line); padding-top: 18px; }
.steps li:first-child { border-color: var(--acid); }
.step-n { font: 2.6rem/1 var(--f-dirt); color: var(--pink); display: block; margin-bottom: 8px; }
.steps h3 { font: 1.35rem/1.1 var(--f-display); text-transform: uppercase; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: .97rem; margin: 0; }
.como-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start; }
.shot { margin: 0; }
.shot-btn { display: block; width: 100%; padding: 0; border: 3px solid var(--bone); background: #000; cursor: zoom-in; box-shadow: var(--shadow); transform: rotate(-.6deg); transition: transform .2s; }
.shot-btn:hover { transform: rotate(0) scale(1.01); }
.shot figcaption { font: .85rem/1.4 var(--f-type); color: var(--muted); margin-top: 12px; }
.controls { padding: 24px; }
.controls h3 { font: 1.4rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 14px; }
.controls table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 14px; }
.controls th, .controls td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.controls thead th { font: .8rem/1 var(--f-type); color: var(--muted); text-transform: uppercase; }
.controls tbody th { font-weight: 600; }

/* ---------- modos ---------- */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mode { padding: 28px 22px 24px; transition: transform .15s, border-color .15s; }
.mode:hover { transform: translateY(-4px); border-color: var(--acid); }
.mode-ico { width: 44px; height: 44px; fill: var(--acid); margin: 8px 0 18px; }
.mode h3 { font: 1.45rem/1.1 var(--f-display); text-transform: uppercase; margin-bottom: 10px; }
.mode p { color: var(--muted); font-size: .97rem; margin: 0; }
.mode.is-soon { background: repeating-linear-gradient(-45deg, var(--ink-3) 0 14px, #221d27 14px 28px); }
.mode.is-soon .mode-ico { fill: var(--muted); }
.mode.is-soon:hover { border-color: var(--toxic); }
.badge { position: absolute; top: -12px; right: 16px; font: .8rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; transform: rotate(2deg); box-shadow: 3px 3px 0 #000; }
.badge-on { background: var(--acid); color: var(--ink); }
.badge-soon { background: var(--toxic); color: var(--ink); transform: rotate(-2deg); }
.badge-test { background: var(--pink); color: var(--ink); transform: rotate(-1deg); }
.mode-link { display: inline-block; margin-top: 14px; font: .95rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--acid); }
.mode-link:hover, .mode-link:focus-visible { color: var(--toxic); }

/* ---------- panda ---------- */
.crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mate { display: flex; gap: 18px; padding: 22px; align-items: flex-start; cursor: pointer; transition: transform .15s, border-color .15s; outline: none; }
.mate:hover, .mate:focus-visible { transform: translateY(-4px) rotate(-.4deg); border-color: var(--mc, var(--acid)); }
.mate:focus-visible { outline: 3px solid var(--toxic); outline-offset: 3px; }
.mate-pic { flex: none; width: 120px; height: 120px; }
.mate-pic:empty { background: var(--ink); border: 2px dashed var(--line); }
.mate-body { min-width: 0; flex: 1; }
.mate h3 { font: 1.6rem/1 var(--f-display); text-transform: uppercase; margin: 4px 0 8px; color: var(--mc, var(--bone)); }
.mate .tagline { font-size: .95rem; color: #d8cfba; margin-bottom: 8px; }
.mate .fav { font: .85rem/1.2 var(--f-type); color: var(--muted); margin-bottom: 0; }
.mate .fav b { color: var(--bone); font-family: var(--f-display); font-weight: 400; letter-spacing: .04em; }
.quote { grid-column: 1 / -1; position: relative; margin: 14px 0 0; padding: 12px 14px; background: var(--bone); color: var(--ink); font: 1.02rem/1.3 var(--f-marker); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--mc, var(--pink)); min-height: 3.6em; }
.quote::before { content: ''; position: absolute; top: -12px; left: 34px; border: 10px solid transparent; border-bottom-color: var(--ink); border-top: 0; }
.quote::after { content: ''; position: absolute; top: -8px; left: 37px; border: 7px solid transparent; border-bottom-color: var(--bone); border-top: 0; }
.quote.pop { animation: pop .28s ease-out; }
@keyframes pop { 0% { transform: scale(.94) rotate(-1deg); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.mate.has-quote { display: grid; grid-template-columns: auto 1fr; }

/* ---------- máquinas ---------- */
.cars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.car { padding: 0 20px 22px; overflow: hidden; }
.car-pic { margin: 0 -20px 16px; aspect-ratio: 10 / 7; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 32%, transparent) 0, transparent 62%), radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.6px) 0 0 / 8px 8px, var(--ink); border-bottom: 3px solid var(--c); display: flex; align-items: center; justify-content: center; }
.car-pic img { width: 92%; height: 92%; object-fit: contain; transition: transform .3s; filter: drop-shadow(0 10px 8px rgba(0,0,0,.5)); }
.car:hover .car-pic img { transform: scale(1.06) rotate(-2deg); }
.car-tag { font: .8rem/1 var(--f-type); color: var(--c); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.car h3 { font: 2rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 10px; }
.car-desc { color: var(--muted); font-size: .95rem; min-height: 4.8em; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 0; align-items: center; }
.stats dt { font: .75rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #cfc6b4; }
.stats dd { margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.stats dd i { height: 9px; background: #3a3340; transform: skewX(-18deg); }
.stats dd i.on { background: var(--c); }
.car-hp { margin: 14px 0 0; font: .8rem/1.3 var(--f-type); color: var(--muted); }

/* ---------- armas ---------- */
.weapons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.weapon { display: flex; flex-direction: column; gap: 14px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.w-ico { width: 64px; height: 64px; background: var(--c); display: grid; place-items: center; transform: rotate(-4deg); box-shadow: 4px 4px 0 #000; clip-path: polygon(3% 6%, 30% 0, 60% 4%, 97% 0, 100% 40%, 96% 97%, 55% 100%, 20% 95%, 0 100%, 4% 50%); }
.weapon:nth-child(even) .w-ico { transform: rotate(3deg); }
.w-ico svg { width: 36px; height: 36px; fill: var(--ink); }
.weapon h3 { font: 1.35rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 8px; }
.weapon p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- hecho con IA (bloque "papel") ---------- */
.sec-ia { background: var(--bone); color: var(--ink); }
.sec-ia::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 16px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 40%, 94% 90%, 88% 30%, 81% 75%, 73% 20%, 66% 85%, 58% 35%, 50% 80%, 43% 25%, 35% 90%, 27% 40%, 19% 70%, 11% 20%, 5% 85%, 0 40%); }
.sec-ia::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; background: var(--ink); clip-path: polygon(0 60%, 6% 15%, 13% 70%, 21% 30%, 29% 80%, 37% 10%, 45% 65%, 53% 25%, 61% 75%, 69% 20%, 77% 70%, 85% 15%, 93% 60%, 100% 30%, 100% 100%, 0 100%); }
.sec-ia .eyebrow { color: var(--blood); }
.sec-ia .eyebrow .num { background: var(--ink); color: var(--acid); }
.sec-ia .lead { color: #3a3238; }
.sec-ia .small { color: #6a6066; }
.sec-ia .hl { color: var(--pink); }
.ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
.figures { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 3px solid var(--ink); background: #fff8e6; box-shadow: var(--shadow); }
.fig { padding: 24px 20px; border-right: 2px dashed rgba(18,16,20,.25); }
.fig:last-child { border-right: 0; }
.fig b { display: block; font: clamp(2.4rem, 5vw, 3.6rem)/1 var(--f-display); color: var(--ink); letter-spacing: .01em; }
.fig:nth-child(1) b { color: var(--pink); }
.fig span { font: .9rem/1.3 var(--f-type); color: #4a4046; }
.ia-note { grid-column: 1 / -1; margin-top: -12px; }
.minions h3, .timeline h3 { font: 1.6rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 18px; }
.minions ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.minions li { padding: 12px 14px 12px 16px; background: #fff8e6; border-left: 5px solid var(--ink); font-size: .95rem; color: #3a3238; }
.minions li b { display: block; font: 1.05rem/1.2 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.minions li:nth-child(3n+1) { border-left-color: var(--pink); }
.minions li:nth-child(3n+2) { border-left-color: var(--rust); }
.timeline ol { list-style: none; padding: 0; margin: 0 0 14px; position: relative; }
.timeline ol::before { content: ''; position: absolute; left: 84px; top: 8px; bottom: 8px; width: 3px; background: var(--ink); }
.timeline li { display: grid; grid-template-columns: 70px 1fr; gap: 36px; padding: 10px 0; position: relative; }
.timeline li::before { content: ''; position: absolute; left: 78px; top: 17px; width: 15px; height: 15px; background: var(--acid); border: 3px solid var(--ink); border-radius: 50%; }
.timeline time { font: 1.3rem/1.2 var(--f-display); text-align: right; }
.timeline span { color: #3a3238; font-size: .97rem; }

/* ---------- noticias ---------- */
.news { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.post { display: flex; flex-direction: column; overflow: hidden; transition: transform .15s, border-color .15s; }
.post:hover { transform: translateY(-4px); border-color: var(--pink); }
.post-img { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.post time { font: .82rem/1 var(--f-type); color: var(--acid); margin-bottom: 10px; }
.post h3 { font: 1.35rem/1.1 var(--f-display); text-transform: uppercase; margin-bottom: 10px; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a::after { content: ''; position: absolute; inset: 0; }
.post p { color: var(--muted); font-size: .95rem; margin: 0; }
.news { grid-template-columns: repeat(3, 1fr); }
.post:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; }
.post:first-child .post-img { aspect-ratio: auto; min-height: 300px; }
.post:first-child .post-body { padding: 32px; justify-content: center; }
.post:first-child h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.post:first-child p { font-size: 1.02rem; }
@media (max-width: 1100px) { .news { grid-template-columns: repeat(2, 1fr); } }
.loading, .empty { color: var(--muted); font-family: var(--f-type); }
.events { display: grid; gap: 14px; }
.event { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 18px 20px; align-items: center; }
.ev-date { text-align: center; border-right: 2px solid var(--line); padding-right: 18px; }
.ev-date b { display: block; font: 2.6rem/1 var(--f-display); color: var(--toxic); }
.ev-date span { font: .85rem/1 var(--f-type); text-transform: uppercase; color: var(--muted); }
.event h4 { font: 1.25rem/1.1 var(--f-display); text-transform: uppercase; margin: 0 0 6px; }
.event .where { font: .85rem/1.2 var(--f-type); color: var(--acid); margin-bottom: 6px; }
.event p { color: var(--muted); font-size: .95rem; margin: 0; }
.event.is-example { border-style: dashed; }
.ex-tag { display: inline-block; font: .7rem/1 var(--f-display); letter-spacing: .1em; background: var(--toxic); color: var(--ink); padding: 3px 6px; margin-right: 8px; vertical-align: 3px; }

/* ---------- hoja de ruta ---------- */
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.road-col { padding: 24px; background: var(--ink-3); border: 1px solid var(--line); border-top: 5px solid var(--acid); }
.road-col.is-doing { border-top-color: var(--toxic); }
.road-col.is-next { border-top-color: var(--pink); }
.road-col h3 { font: 1.5rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.road-col h3::after { content: attr(data-n); font: .8rem/1 var(--f-type); color: var(--muted); }
.road-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.road-col li { position: relative; padding-left: 28px; font-size: .97rem; color: #d8cfba; }
.road-col li::before { position: absolute; left: 0; top: 0; font: 1rem/1.5 var(--f-display); }
.is-done li::before { content: '✓'; color: var(--acid); }
.is-doing li::before { content: '›'; color: var(--toxic); font-size: 1.4rem; line-height: 1.05; }
.is-next li::before { content: '+'; color: var(--pink); }

/* ---------- comunidad ---------- */
.sec-community { background: linear-gradient(120deg, var(--bruise), #2a0f22 60%, var(--blood)); overflow: hidden; }
.sec-community::after { content: 'NO FUTURE'; position: absolute; right: -2%; bottom: -6%; font: clamp(5rem, 16vw, 13rem)/1 var(--f-dirt); color: rgba(255,255,255,.05); pointer-events: none; transform: rotate(-6deg); white-space: nowrap; }
.com-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.newsletter { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; max-width: 560px; }
.newsletter input { flex: 1 1 240px; min-width: 0; padding: .8em 1em; font: 1rem var(--f-body); background: var(--bone); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 #000; }
.newsletter input::placeholder { color: #7a7066; }
.nl-msg { flex-basis: 100%; margin: 4px 0 0; min-height: 1.4em; font: 1rem/1.4 var(--f-marker); color: var(--toxic); }
.social { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(18,16,20,.55); border: 1px solid rgba(238,227,199,.2); color: var(--bone); text-decoration: none; font: 1.05rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; transition: background .15s, border-color .15s; }
.social a:hover { background: rgba(18,16,20,.85); border-color: var(--acid); }
.social svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* ---------- footer ---------- */
.foot { background: #0b0a0d; padding: 56px 0 36px; border-top: 3px solid var(--pink); }
.foot-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 48px; }
.foot-brand p { color: var(--muted); font-size: .92rem; margin: 10px 0 0; }
.ai-stamp { display: inline-block; font: .9rem/1 var(--f-display) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--acid) !important; border: 2px solid var(--acid); padding: 6px 10px; transform: rotate(-3deg); margin-top: 16px !important; }
.foot-links { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 24px; align-content: start; justify-content: end; }
.foot-links a { color: var(--bone); text-decoration: none; font-size: .95rem; }
.foot-links a:hover { color: var(--acid); }
.credits, .copy { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; margin: 0; }
.credits { border-top: 1px solid var(--line); padding-top: 24px; }
.credits a { color: var(--bone); }

/* ---------- lightbox ---------- */
.lightbox { border: 3px solid var(--bone); padding: 0; background: #000; max-width: min(1600px, 94vw); box-shadow: var(--shadow); }
.lightbox::backdrop { background: rgba(0,0,0,.85); }
.lightbox img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.lb-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font: 2rem/1 var(--f-display); background: var(--pink); color: #fff; border: 2px solid #000; cursor: pointer; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .modes, .cars { grid-template-columns: repeat(2, 1fr); }
  .weapons { grid-template-columns: repeat(3, 1fr); }
  .crew { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .como-grid, .ia-grid, .com-in, .road, .foot-in { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .fig:nth-child(2) { border-right: 0; }
  .fig:nth-child(-n+2) { border-bottom: 2px dashed rgba(18,16,20,.25); }
  .news { grid-template-columns: 1fr; }
  .post:first-child { grid-template-columns: 1fr; }
  .post:first-child .post-img { aspect-ratio: 16 / 9; min-height: 0; }
  .post:first-child .post-body { padding: 18px 20px 22px; }
  .foot-links { justify-content: start; }
  .hero-shade { background: linear-gradient(90deg, rgba(18,16,20,.92), rgba(18,16,20,.6)), linear-gradient(0deg, var(--ink) 0%, rgba(18,16,20,0) 30%); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .modes, .cars, .crew, .steps { grid-template-columns: 1fr; }
  .weapons { grid-template-columns: 1fr; gap: 0; }
  .weapon { flex-direction: row; align-items: flex-start; padding: 18px 0; }
  .w-ico { flex: none; width: 56px; height: 56px; }
  .w-ico svg { width: 30px; height: 30px; }
  .mate-pic { width: 96px; height: 96px; }
  .mate { padding: 18px; }
  .hero { padding: 32px 0 80px; min-height: 0; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-facts { gap: 8px 18px; }
  .brand-txt { font-size: 1.15rem; }
  .event { grid-template-columns: 72px 1fr; gap: 14px; padding: 16px; }
  .ev-date { padding-right: 12px; }
  .ev-date b { font-size: 2rem; }
  .timeline ol::before { left: 60px; }
  .timeline li { grid-template-columns: 50px 1fr; gap: 28px; }
  .timeline li::before { left: 54px; }
  .social { grid-template-columns: 1fr 1fr; }
  .foot-links { grid-template-columns: repeat(2, auto); }
  .car-desc { min-height: 0; }
}

/* ---------------------------------------------------------------------------
   El juego dentro de la web (PC): recuadro 16:9 sobre el fondo del hero, botón de ampliar debajo a la derecha.
   --------------------------------------------------------------------------- */
.hero.has-game { min-height: calc(100svh - var(--nav-h)); padding: 32px 0 28px; justify-content: center; }
.hero.has-game .hero-in, .hero.has-game .hero-ctrl { display: none; }
/* ventana de juego encajada en la web (como Virtual Regatta): 16:9, máx. 1180 px, centrada y con aire alrededor */
.game-stage { --gw: min(1180px, 92vw, calc((100svh - var(--nav-h) - 120px) * 16 / 9)); width: var(--gw); margin: 0 auto; }
.game-stage[hidden] { display: none; }
.game-box { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border: 1px solid rgba(238,227,199,.22); border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden; }
.game-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--ink); }
.game-box:fullscreen { border: 0; box-shadow: none; aspect-ratio: auto; }
.game-poster { position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: var(--bone);
  background: linear-gradient(180deg, rgba(18,16,20,.35), rgba(18,16,20,.8)), url('/portal/img/salida-1920.webp') center / cover; }
.game-poster .gp-title { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; }
.game-poster .ht-top { font-size: clamp(2rem, 4vw, 3.6rem); }
.game-poster .ht-rally { font-size: clamp(3.6rem, 9vw, 7.5rem); }
.game-poster .gp-sub { font: 1.15rem/1.2 var(--f-marker); }
.game-poster .gp-sub b { color: var(--pink); font-weight: normal; }
.game-poster:hover .gp-play, .game-poster:focus-visible .gp-play { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 #000; }
.game-poster:focus-visible { outline: 3px solid var(--acid); outline-offset: -6px; }
.game-bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 10px; }
.game-alt { font: .9rem/1 var(--f-type); color: var(--muted); text-decoration: none; }
.game-alt:hover, .game-alt:focus-visible { color: var(--acid); }
.game-expand { width: 40px; height: 40px; padding: 8px; display: grid; place-items: center; cursor: pointer; background: rgba(18,16,20,.85); color: var(--bone); border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
.game-expand svg { width: 100%; height: 100%; fill: currentColor; }
.game-expand:hover, .game-expand:focus-visible { background: var(--acid); color: var(--ink); outline: none; }
.game-expand:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.game-bar .game-expand { border-radius: 6px; box-shadow: none; border-color: rgba(238,227,199,.25); }