/* Página de Éxodo Survivors (www.zojim.com.ar/exodo). Base: zojim-ui.css; encima, la estética arcade del juego:
   títulos en la letra de píxeles del juego (ExodoPx, solo en títulos cortos), cielo nocturno y botones con borde de píxel.
   El texto de lectura sigue en Geist y en rem, como pide la guía (diseno/GUIA.md). Color del juego: violeta noche. */
[data-app="exodo"] { --z-app-1: #c4a5ff; --z-app-2: #8b5cf6; --z-app-tinta: #140a2a; --ex-oro: #f2d24a; --ex-oro-2: #e8a33a; --ex-noche: #0f0b1d; }

body.z[data-app="exodo"] {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(139, 92, 246, .22), transparent 70%),
    radial-gradient(700px 480px at 0% 20%, rgba(242, 210, 74, .07), transparent 70%),
    var(--z-negro);
}
.px { font-family: "ExodoPx", "Geist", monospace; letter-spacing: .02em; font-weight: 400; image-rendering: pixelated; -webkit-font-smoothing: none; }
main.ex { max-width: 1060px; padding-block: 8px 72px; display: grid; gap: 64px; }
main.ex > section { display: grid; gap: 20px; }
.ex p { margin: 0; }

/* ---------- portada ---------- */
.ex-hero { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; padding-top: 12px; }
@media (min-width: 900px) { .ex-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.ex-hero-txt { display: grid; gap: 18px; justify-items: start; }
.ex-titulo { margin: 0; line-height: .95; font-size: clamp(2.8rem, 11vw, 5.4rem); color: var(--ex-oro);
  text-shadow: 0 4px 0 #7a4a10, 0 8px 0 rgba(0, 0, 0, .45); }
.ex-titulo span { display: block; font-size: .5em; color: #ece8f6; text-shadow: 0 3px 0 #3a2e5a; margin-top: .25em; }
.ex-lema { font-size: var(--z-t-medio); color: var(--z-texto-2); max-width: 34rem; }
.ex-oferta { display: inline-grid; gap: 4px; padding: 12px 16px; border: 2px solid var(--ex-oro); border-radius: 14px;
  background: linear-gradient(180deg, rgba(242, 210, 74, .14), rgba(242, 210, 74, .04)); }
.ex-oferta b { color: var(--ex-oro); font-size: var(--z-t-medio); }
.ex-oferta span { color: var(--z-texto-2); font-size: var(--z-t-chico); }
.ex-ctas { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.ex-ctas .z-btn { flex: 1 1 15rem; }
.ex-bajar { margin: -4px 0 0; font-size: var(--z-t-chico); }
.ex-bajar a { color: var(--ex-oro); text-underline-offset: 3px; }
.ex-btn-jugar { background: linear-gradient(180deg, #fff0b8 0 8%, var(--ex-oro) 8% 55%, var(--ex-oro-2) 55%); color: #2a1400; border: 0;
  box-shadow: 0 0 0 3px #fff0c8 inset, 0 6px 0 #6a3a08; font-weight: 700; }
.ex-btn-jugar:hover { filter: brightness(1.06); }
.ex-sellos { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; color: var(--z-texto-2); font-size: var(--z-t-chico); }
.ex-sellos li::before { content: "✦ "; color: var(--ex-oro); }

/* video de una partida dentro de un marco de máquina arcade */
.ex-pantalla { position: relative; margin: 0; padding: 10px; border-radius: 20px; background: linear-gradient(#2a1f48, #120c24);
  box-shadow: 0 0 0 2px #4a3a7a, 0 24px 60px rgba(0, 0, 0, .6); }
.ex-pantalla video, .ex-pantalla img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--ex-noche); image-rendering: pixelated; }
.ex-pantalla figcaption { margin-top: 8px; font-size: var(--z-t-chico); color: var(--z-texto-3); text-align: center; }

/* ---------- títulos de sección ---------- */
.ex-sec-tit { display: grid; gap: 8px; }
.ex-sec-tit .z-kicker { color: var(--z-app-1); }
.ex-sec-tit h2 { margin: 0; font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.05; color: #f5f3ee; }
.ex-sec-tit h2 em { font-style: normal; color: var(--ex-oro); }

/* ---------- números del juego ---------- */
.ex-numeros { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .ex-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ex-numeros li { display: grid; gap: 4px; padding: 18px 16px; border-radius: 18px; background: #151229; border: 1px solid #2e2650; }
.ex-numeros b { font-size: clamp(2rem, 7vw, 2.8rem); color: var(--ex-oro); line-height: 1; }
.ex-numeros span { color: var(--z-texto-2); }

/* ---------- tarjetas ---------- */
.ex-grilla { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ex-grilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-grilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-tarjeta { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 22px; background: #141127; border: 1px solid #2e2650; }
.ex-tarjeta h3 { margin: 0; font-size: var(--z-t-h3); color: #f5f3ee; }
.ex-tarjeta.oro { border: 2px solid var(--ex-oro); background: linear-gradient(180deg, #221a10, #141127 60%); }
.ex-tarjeta .precio { font-size: clamp(1.6rem, 5vw, 2.1rem); color: var(--ex-oro); font-weight: 700; }
.ex-tarjeta .precio s { color: var(--z-texto-3); font-weight: 400; font-size: .6em; margin-left: .4em; }
.ex-tarjeta .z-tildes li::before { background-color: var(--ex-oro); }
.ex-chip { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: var(--z-t-chico); background: rgba(196, 165, 255, .14); color: var(--z-app-1); }
.ex-chip.oro { background: rgba(242, 210, 74, .16); color: var(--ex-oro); }

/* ---------- adornos ---------- */
.ex-adornos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ex-adornos li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed #2e2650; }
.ex-adornos li span { color: var(--z-texto-2); }
.ex-adornos li b { color: var(--ex-oro); white-space: nowrap; }

/* ---------- capturas (carrusel con scroll horizontal; en PC, en fila) ---------- */
.ex-capturas { display: grid; grid-auto-flow: column; grid-auto-columns: min(62%, 15rem); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; margin: 0; list-style: none; padding-left: 0; overscroll-behavior-x: contain; }
.ex-capturas li { scroll-snap-align: start; }
.ex-capturas img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 16px; border: 2px solid #2e2650; }
@media (min-width: 1000px) { .ex-capturas { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; } }

/* ---------- medios de pago ---------- */
.ex-pago { display: grid; gap: 14px; padding: 24px; border-radius: 22px; background: #0f1d16; border: 2px solid #2f6a46; }
.ex-pago h3 { margin: 0; font-size: var(--z-t-h3); color: #c8f0a8; }
.ex-medios { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ex-medios li { padding: 8px 14px; border-radius: 999px; background: #17291f; border: 1px solid #2f6a46; color: #e6f7ec; }

/* ---------- preguntas ---------- */
.ex-preguntas { display: grid; gap: 10px; }
.ex-preguntas details { border-radius: 16px; background: #141127; border: 1px solid #2e2650; }
.ex-preguntas summary { min-height: 3rem; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 12px; }
.ex-preguntas summary::-webkit-details-marker { display: none; }
.ex-preguntas summary::before { content: "+"; color: var(--ex-oro); font-weight: 700; width: 1em; flex: none; }
.ex-preguntas details[open] summary::before { content: "−"; }
.ex-preguntas details > div { padding: 0 18px 18px 48px; color: var(--z-texto-2); display: grid; gap: 8px; }
.ex-preguntas a { color: var(--z-dorado-claro, #ead7a4); }

/* ---------- novedades ---------- */
.ex-novedades { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ex-novedades li { display: grid; gap: 4px; padding: 16px 18px; border-left: 4px solid var(--z-app-1); background: #141127; border-radius: 0 16px 16px 0; }
.ex-novedades time { font-size: var(--z-t-chico); color: var(--z-app-1); }

/* ---------- cierre ---------- */
.ex-final { justify-items: center; text-align: center; padding: 32px 20px; border-radius: 24px;
  background: radial-gradient(500px 220px at 50% 0%, rgba(242, 210, 74, .14), transparent 70%), #120e24; border: 1px solid #2e2650; }
.ex-final .ex-ctas { justify-content: center; max-width: 40rem; }

.ex-pantalla .ex-poster-fijo { display: none; }
@media (prefers-reduced-motion: reduce) { .ex-pantalla video { display: none; } .ex-pantalla .ex-poster-fijo { display: block; } }