/* Pasos del Abismo · web. Usa el sistema de diseño «Abismo» de la app (design/tokens/abismo.css). */

@font-face { font-family: 'Jersey 15'; src: url(fuentes/jersey-15.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fuentes/alegreya-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fuentes/alegreya-sans-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url(fuentes/alegreya-sans-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url(fuentes/im-fell-english-italic.woff2) format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url(fuentes/im-fell-english-sc.woff2) format('woff2'); font-display: swap; }

:root {
  color-scheme: dark;
  /* Primitivos (design/tokens/abismo.css) */
  --abismo-300: #8EA8A0; --abismo-400: #61827B; --abismo-600: #254340; --abismo-700: #1A302D;
  --abismo-800: #122422; --abismo-850: #0D1B1A; --abismo-900: #091313; --abismo-950: #050B0B;
  --pergamino-50: #F6F1E3; --pergamino-100: #E9E1CA; --pergamino-300: #B3A57F;
  --icor-300: #84F2C8; --icor-400: #4FE0AA; --icor-600: #179C70; --icor-800: #0D4F3B;
  --oro-300: #E2C77E; --oro-400: #CFAA58; --oro-600: #86672C;
  --vacio-300: #BBA8FF; --vacio-400: #9A82F7; --vacio-500: #7A5EE6; --vacio-700: #3E2A8C;
  --abisal-300: #8FD3F5; --abisal-400: #56B6E6;
  --sangre-400: #EC6475; --ambar-400: #F2B04F; --vela-400: #FF9455;
  --cosmos-300: #F0B8F7; --cosmos-400: #E58BF2; --cosmos-500: #C95FE0;
  --ceniza-300: #C2C7C8; --ceniza-400: #9AA1A3; --musgo-300: #A8EB9C; --musgo-400: #6FD663; --grieta-300: #FF8A8A; --grieta-400: #F04A4A;
  /* Tema «Abismo» */
  --background: var(--abismo-950); --foreground: var(--pergamino-100); --surface: var(--abismo-850);
  --surface-2: var(--abismo-800); --surface-3: var(--abismo-700); --border: var(--abismo-700); --separator: var(--abismo-600);
  --muted: var(--abismo-300); --accent: var(--icor-400); --focus: var(--icor-300); --link: var(--abisal-400);
  --ritual: var(--oro-400); --xp: var(--vacio-400); --flame: var(--vela-400); --cyan: var(--abisal-400); --legendary: var(--cosmos-400);
  --stat-fue: var(--vela-400); --stat-agi: var(--abisal-400); --stat-int: var(--vacio-400);
  --stat-vit: var(--sangre-400); --stat-vol: var(--oro-400); --stat-hor: var(--cosmos-400);
  --vida: var(--sangre-400); --mana: var(--vacio-400); --cordura: var(--oro-300); --hambre: var(--ambar-400);
  /* Escala, forma y luz */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;
  --stroke: 2px; --pixel: 0 4px 0 0 #000000a6;
  --display: 'Jersey 15', 'Alegreya Sans', system-ui, sans-serif;
  --sans: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lore: 'IM Fell English', Georgia, serif;
  --lore-sc: 'IM Fell English SC', Georgia, serif;
  --ancho: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font: 400 17px/1.55 var(--sans); overflow-x: hidden;
  background-image:
    radial-gradient(1200px 700px at 85% -10%, #4fe0aa12, transparent 60%),
    radial-gradient(900px 700px at -10% 30%, #7a5ee614, transparent 60%);
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--abisal-300); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: 0.5px; margin: 0; }
h2 { font-size: clamp(38px, 6vw, 56px); line-height: 1; }
h3 { font-size: 26px; line-height: 1.1; margin: 0 0 10px; }
h4 { font-size: 22px; line-height: 1.1; margin: 0 0 8px; }
p { margin: 0 0 12px; }
strong, b { font-weight: 700; color: var(--pergamino-50); }
.muted { color: var(--muted); }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--abismo-950); padding: 8px 14px; border-radius: var(--radius-md); z-index: 100; }
.saltar:focus { left: 8px; }

/* Capas de ambiente: niebla, partículas y linterna */
.niebla { position: fixed; inset: -20% -40%; pointer-events: none; z-index: 0; opacity: 0.5;
  background:
    radial-gradient(40% 30% at 20% 30%, #8ea8a00d, transparent 70%),
    radial-gradient(35% 25% at 70% 60%, #8ea8a00a, transparent 70%),
    radial-gradient(30% 20% at 40% 85%, #9a82f70d, transparent 70%);
  animation: deriva 60s linear infinite alternate; will-change: transform; }
@keyframes deriva { to { transform: translate3d(12%, -4%, 0); } }
/* La linterna se mueve con transform: así el navegador no repinta la pantalla en cada movimiento del mouse. */
.linterna { position: fixed; left: -260px; top: -260px; width: 520px; height: 520px; pointer-events: none; z-index: 1; opacity: 0;
  transition: opacity 0.6s; will-change: transform; background: radial-gradient(closest-side, #4fe0aa0f, transparent); }
.linterna.activa { opacity: 1; }
.motas { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.mota { position: absolute; width: 3px; height: 3px; border-radius: 1px; background: var(--icor-300); opacity: 0; box-shadow: 0 0 6px var(--icor-400); }
header, main, footer { position: relative; z-index: 2; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; justify-content: space-between;
  padding: 12px max(20px, calc((100vw - var(--ancho)) / 2)); background: #050b0bf2;
  border-bottom: var(--stroke) solid var(--border); }
.marca { font-family: var(--display); font-size: 24px; color: var(--foreground); text-decoration: none; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
/* flex-shrink: 0 para que el menú no aplaste el ícono en pantallas angostas. */
.marca { flex-shrink: 0; }
.marca img { width: 28px; height: 28px; flex-shrink: 0; image-rendering: pixelated; }
.barra nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.barra nav::-webkit-scrollbar { display: none; }
.barra nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.barra nav a:hover, .barra nav a[aria-current] { color: var(--foreground); background: var(--surface-3); }

/* Contenedores */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 88px 20px 0; }
.cabeza { margin-bottom: 28px; max-width: 760px; }
.cabeza p { color: var(--muted); font-size: 18px; margin-top: 12px; }
.overline { font: 500 12px/16px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--ritual); margin: 0 0 12px; }
.subtitulo { margin: 44px 0 10px; font-size: 30px; }
.columnas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.columnas.dos { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.tarjeta { background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--pixel); }
.tarjeta p:last-child { margin-bottom: 0; }
.lista { margin: 0; padding-left: 18px; }
.lista li { margin-bottom: 8px; }
.lista li::marker { color: var(--accent); }
.desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Portada (design/previews/portada.png) */
.portada { position: relative; max-width: var(--ancho); margin: 0 auto; min-height: min(900px, calc(100svh - 58px));
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; padding: 48px 20px 40px; }
.orbe { position: absolute; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, var(--o), transparent); }
.orbe-verde { width: 640px; height: 640px; right: -120px; top: 40px; --o: var(--icor-400); opacity: 0.1; }
.orbe-violeta { width: 600px; height: 520px; left: -260px; bottom: -120px; --o: var(--vacio-500); opacity: 0.12; }
.titulo-abismo { font-size: clamp(64px, 11vw, 124px); line-height: 0.92; letter-spacing: 4px; margin: 0 0 24px; color: var(--pergamino-100); text-shadow: 0 4px 0 #000000a6; }
.titulo-abismo span { display: inline-block; }
.lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--muted); max-width: 620px; margin-bottom: 24px; }
.cita { margin: 0 0 28px; padding: 4px 0 4px 18px; border-left: var(--stroke) solid var(--ritual); max-width: 560px; }
.cita p { font: italic 20px/1.4 var(--lore); color: var(--pergamino-100); margin: 0 0 8px; }
.cita cite { font: 14px/18px var(--lore-sc); letter-spacing: 1px; color: var(--ritual); font-style: normal; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.boton { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/20px var(--sans); letter-spacing: 0.3px; padding: 12px 20px;
  border-radius: var(--radius-lg); text-decoration: none; border: var(--stroke) solid transparent; }
.boton-primario { background: var(--accent); color: var(--abismo-950); box-shadow: 0 4px 0 0 var(--icor-600); }
.boton-primario:hover { color: var(--abismo-950); background: var(--icor-300); }
.boton-primario:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--icor-600); }
.boton-fantasma { color: var(--muted); border-color: var(--separator); }
.vitrinas { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.vitrinas li { width: 72px; height: 72px; border-radius: var(--radius-md); border: var(--stroke) solid var(--border); background: var(--surface); box-shadow: var(--pixel); display: grid; place-items: center; }
.vitrinas img { width: 58px; height: 58px; }
.anillo { position: relative; width: min(460px, 100%); aspect-ratio: 1; justify-self: center; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.anillo .pista { fill: none; stroke: var(--surface-3); stroke-width: 20; }
.anillo .progreso { fill: none; stroke: url(#grad-anillo); stroke-width: 20; stroke-dasharray: 1288; stroke-dashoffset: 1288; }
.anillo .aro-oro { fill: var(--abismo-900); stroke: var(--oro-600); stroke-width: 1.5; }
.anillo .marca-tic { stroke: var(--oro-400); stroke-width: 2; opacity: 0.55; }
.anillo-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.anillo-centro img { width: 46%; height: auto; filter: drop-shadow(0 0 24px #4fe0aa33); animation: flotar 5s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-10px); } }
.contador { font: 400 68px/68px var(--display); color: var(--pergamino-100); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* Pilares */
.pilares { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pilares li { background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--pixel); }
.pilares strong { display: block; font: 400 22px/1.1 var(--display); margin: 12px 0 6px; letter-spacing: 0.3px; }
.pilares p { color: var(--muted); margin: 0; }
.glifo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); background: color-mix(in srgb, var(--c) 14%, transparent); border: var(--stroke) solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); }
.glifo svg { width: 26px; height: 26px; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabla th, .tabla td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--separator); vertical-align: top; }
.tabla th { font: 500 12px/16px var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr:last-child td { border-bottom: 0; }
.cifra { font: 400 22px/1 var(--display); color: var(--pergamino-50); }

/* Stats y estilos */
.st { display: inline-block; min-width: 42px; font: 400 16px/22px var(--display); letter-spacing: 1px; color: var(--c); }
.st.fue { --c: var(--stat-fue); } .st.agi { --c: var(--stat-agi); } .st.int { --c: var(--stat-int); }
.st.vit { --c: var(--stat-vit); } .st.vol { --c: var(--stat-vol); } .st.hor { --c: var(--stat-hor); }
.estilo { display: inline-block; font: 700 13px/18px var(--sans); padding: 2px 10px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); margin-right: 6px; }
.estilo.bruta { --c: var(--stat-fue); } .estilo.veloz { --c: var(--stat-agi); } .estilo.arcana { --c: var(--stat-int); }
.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.etapas div { background: var(--surface-2); border: var(--stroke) solid var(--border); border-radius: var(--radius-md); padding: 10px; text-align: center; }
.etapas strong { display: block; font: 400 18px/1.1 var(--display); margin-top: 4px; }
.sigla { font: 400 14px/18px var(--display); color: var(--xp); letter-spacing: 1px; }

/* Bestiario */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.filtro { font: 700 14px/18px var(--sans); color: var(--muted); background: var(--surface); border: var(--stroke) solid var(--border); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.filtro[aria-pressed="true"] { color: var(--abismo-950); background: var(--accent); border-color: var(--accent); }
.bestiario { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.bestiario > li[hidden] { display: none; }
.bestia { height: 100%; background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--pixel); transition: border-color 0.2s, transform 0.2s; }
.bestia:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-2px); }
.bestia.bruta { --c: var(--stat-fue); } .bestia.veloz { --c: var(--stat-agi); } .bestia.arcana { --c: var(--stat-int); }
.bestia summary { list-style: none; cursor: pointer; padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.bestia summary::-webkit-details-marker { display: none; }
.vitrina { width: 112px; height: 112px; display: grid; place-items: end center; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent 75%); }
.vitrina img { width: 104px; height: 104px; }
/* Caja fija de 3 líneas para el nombre: así todas las tarjetas cerradas miden lo mismo. */
.bestia h3 { font-size: 19px; line-height: 22px; margin: 6px 0 0; min-height: 66px; display: flex; align-items: center; justify-content: center; }
.bestia .tipo { font-size: 13px; color: var(--muted); }
.bestia .detalle { padding: 0 14px 16px; font-size: 15px; }
.bestia .detalle p { color: var(--muted); font: 400 16px/1.5 var(--sans); }

.barras { display: grid; gap: 4px; margin-top: 8px; }
.barra-stat { display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 6px; font: 400 14px/18px var(--display); }
.barra-stat i { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.barra-stat i b { display: block; height: 100%; width: calc(var(--v) / 18 * 100%); background: var(--c2); border-radius: 3px; }
.barra-stat span:last-child { text-align: right; color: var(--pergamino-50); }
.victorias { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* Peleas */
.arena-fondo { position: relative; }
.arena-fondo::before { content: ''; position: absolute; inset: 40px 0 auto; height: 480px; z-index: -1; border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #050b0bcc, #050b0b 85%), url(img/arena.webp) center 30% / cover; opacity: 0.6; }
.acciones-pelea { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.acciones-pelea li { border: var(--stroke) solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); border-radius: var(--radius-lg); padding: 10px 14px; }
.acciones-pelea strong { display: block; font: 400 19px/24px var(--display); color: var(--pergamino-50); }
.acciones-pelea span { color: var(--c); font-size: 14px; }

/* Ítems */
.items { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.item { background: color-mix(in srgb, var(--c, var(--ceniza-400)) 8%, var(--surface)); border: var(--stroke) solid var(--border); border-top: 4px solid var(--c, var(--ceniza-400)); border-radius: var(--radius-lg); padding: 12px; text-align: center; box-shadow: var(--pixel); }
.item img { width: 76px; height: 76px; }
.item strong { display: block; font: 400 17px/19px var(--display); margin-top: 4px; min-height: 38px; }
.item span { font-size: 13px; color: var(--muted); }
.rareza-punto { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c); margin-right: 8px; box-shadow: 0 0 8px var(--c); }

/* Viaje */
.viaje { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.viaje li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--separator); }
.viaje li:last-child { border-bottom: 0; }
.viaje svg { width: 24px; height: 24px; color: var(--ritual); }
.viaje .km { font: 400 16px/1 var(--display); color: var(--cyan); }

/* Reliquias */
.categoria { margin-top: 28px; }
.categoria-cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.categoria-cabeza h3 { margin: 0; }
.categoria-cabeza p { margin: 0; color: var(--muted); }
.reliquias { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.reliquia { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; }
.medallon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--oro-300);
  background: radial-gradient(circle at 35% 30%, #cfaa5833, #5c461e55); border: var(--stroke) solid var(--oro-600); }
.medallon svg { width: 24px; height: 24px; }
.reliquia.legend .medallon { color: var(--cosmos-300); border-color: var(--cosmos-500); background: radial-gradient(circle at 35% 30%, #e58bf244, #3e2a8c66); box-shadow: 0 0 14px #e58bf244; }
.reliquia.primal .medallon { color: #ff8a8a; border-color: #f04a4a; background: radial-gradient(circle at 35% 30%, #f04a4a44, #4a0f1a66); box-shadow: 0 0 14px #f04a4a44; }
.reliquia strong { display: block; font: 400 17px/20px var(--display); letter-spacing: 0.3px; }
.reliquia span { font-size: 14px; color: var(--muted); }
.reliquia .xp { font: 400 16px/1 var(--display); color: var(--xp); white-space: nowrap; }

/* Balance y matemática */
.formula { font: 400 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--icor-300); background: var(--abismo-900); border: 1px solid var(--separator); border-radius: var(--radius-md); padding: 12px 14px; overflow-x: auto; white-space: pre; margin: 10px 0 14px; }
code { font: 400 0.92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--icor-300); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 20px; }
.kpi { background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--pixel); }
.kpi .valor { font: 400 40px/1 var(--display); color: var(--accent); }
.kpi .etiqueta { font-size: 14px; color: var(--muted); margin-top: 6px; }
.campana { background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--pixel); }
.campana-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.campana svg { width: 100%; height: auto; display: block; }
.campana .eje { stroke: var(--separator); }
.campana .texto-eje { fill: var(--muted); font: 12px var(--sans); }
.campana .zona { fill: #4fe0aa0f; }
.campana .curva { fill: none; stroke: var(--ritual); stroke-width: 2.5; }
.campana .punto { stroke: var(--abismo-950); stroke-width: 1; }
.campana .punto.bruta { fill: var(--stat-fue); } .campana .punto.veloz { fill: var(--stat-agi); } .campana .punto.arcana { fill: var(--stat-int); }
.campana [hidden] { display: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: var(--muted); margin-top: 10px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--c); }
details.mas { margin-top: 14px; }
details.mas summary { cursor: pointer; color: var(--link); font-weight: 700; }

/* Preguntas */
.preguntas details { background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 10px; }
.preguntas summary { cursor: pointer; font: 400 20px/1.2 var(--display); letter-spacing: 0.3px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.preguntas summary::after { content: '+'; color: var(--accent); }
.preguntas details[open] summary::after { content: '−'; }
.preguntas details p { margin: 10px 0 0; color: var(--muted); }

/* Pie */
.pie { max-width: var(--ancho); margin: 96px auto 0; padding: 28px 20px 40px; border-top: var(--stroke) solid var(--border); font-size: 15px; }
.pie p { margin: 0 0 6px; }

/* Aparición desde el abismo (la anima app.js; sin JS se ve todo) */
.anima .emerge { opacity: 0; }

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; min-height: 0; }
  .anillo { width: min(340px, 86vw); order: -1; }
  .barra { gap: 12px; }
  .marca span { display: none; }
  .seccion { padding-top: 64px; }

  .columnas.dos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .niebla, .anillo-centro img { animation: none; }
  .motas, .linterna { display: none; }
}

/* Prólogo (lore) */
.pergamino { position: relative; max-width: 820px; padding: 28px 32px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #e9e1ca0d, #e9e1ca05), var(--abismo-900);
  border: var(--stroke) solid var(--oro-600); box-shadow: var(--pixel), inset 0 0 60px #00000080; }
.pergamino p { font: 400 19px/1.75 var(--sans); color: var(--pergamino-100); margin-bottom: 18px; max-width: 68ch; }
.pergamino strong { color: var(--oro-300); font-weight: 500; }
.pergamino em { font: italic 21px/1.5 var(--lore); color: var(--cosmos-300); }
.capitular::first-letter { float: left; font: 400 64px/0.8 var(--display); color: var(--oro-400); margin: 6px 10px 0 0; font-style: normal; }
.fragmentos { margin-top: 16px; }
.fragmentos figure { margin: 0; }
.fragmentos blockquote { margin: 0 0 10px; font: italic 18px/1.45 var(--lore); color: var(--pergamino-100); }
.fragmentos figcaption { font: 13px/18px var(--lore-sc); letter-spacing: 1px; color: var(--ritual); }
@media (max-width: 860px) { .pergamino { padding: 20px; } .pergamino p { font-size: 17px; } }

/* Políticas */
.politicas h4, .politicas h2 { font-size: 20px; line-height: 1.2; margin: 18px 0 6px; color: var(--pergamino-50); }
.politicas h2:first-child, .politicas h4:first-of-type { margin-top: 4px; }
.politicas p, .politicas li { color: var(--muted); font-size: 16px; }

/* Sin desborde horizontal en pantallas angostas */
html, body { overflow-x: clip; }
.portada { overflow-x: clip; }
.columnas > *, .kpis > * { min-width: 0; }
.tarjeta { overflow-x: auto; }
@media (max-width: 520px) { .tabla { font-size: 14px; } .tabla th, .tabla td { padding: 7px 6px; } }

/* Ajustes tras revisar */
.cabeza .overline { color: var(--ritual); font-size: 12px; margin: 0 0 12px; }
.bestiario { align-items: start; }
.bestia { height: auto; }
.bestiario > li:has(> details[open]) { grid-column: span 2; }
.bestia .detalle p.victorias { font: 400 14px/1.4 var(--sans); color: var(--muted); }
@media (max-width: 860px) { .bestiario > li:has(> details[open]) { grid-column: 1 / -1; } }

/* Capturas de pantallas de la app (tira que se desliza en el teléfono) */
.capturas { list-style: none; padding: 0 0 8px; margin: 16px 0 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.capturas li { flex: 0 0 220px; scroll-snap-align: start; }
.capturas figure { margin: 0; }
.capturas img { display: block; width: 220px; border-radius: var(--radius-xl); border: var(--stroke) solid var(--border);
  -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
.capturas figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* Selector de idioma en la barra */
.barra nav { min-width: 0; }
.idiomas { display: flex; gap: 2px; flex-shrink: 0; }
.idiomas a { color: var(--muted); text-decoration: none; font: 700 13px/1 var(--sans); letter-spacing: 0.5px; padding: 7px 8px; border-radius: 999px; }
.idiomas a:hover, .idiomas a[aria-current] { color: var(--foreground); background: var(--surface-3); }