/* APERTURA del servidor oficial (miércoles 28/10/2026, 20 h). Lo cargan la portada (/) y /apertura.
   Maqueta aprobada por Tute el 25/10: docs/apertura/web-oficial/ (maqueta.html, apertura.css).
   Usa los tokens de app.css (rojo #c00000 + dorado + fondo oscuro) y suma una sola cara nueva para los
   títulos: IM Fell English SC (SIL OFL 1.1, servida desde /s/fonts: la CSP no deja Google Fonts). La url de la fuente
   es la misma que precarga services/apertura.ts (APERTURA_FUENTE): cambiarlas juntas.
   El «Apertura» del menú vive en app.css (el menú está en todas las páginas, este archivo no). */
@font-face {
  font-family: "IM Fell English SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/s/fonts/im-fell-english-sc.woff2?v=1") format("woff2");
}
:root {
  --ap-display: "IM Fell English SC", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

/* ---- portada de la apertura (reemplaza al hero de la portada) ---- */
.ap-hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius);
  margin: 26px 0 18px; box-shadow: var(--shadow); }
.ap-hero .ap-foto { position: absolute; inset: 0; z-index: -3; background: var(--bg) center 42% / cover no-repeat; }
.ap-hero::after { content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(10,9,8,.92) 0%, rgba(10,9,8,.72) 45%, rgba(10,9,8,.25) 100%),
              linear-gradient(0deg, rgba(122,0,0,.35), transparent 55%); }
.ap-hero canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.ap-hero-in { padding: clamp(26px, 5vw, 56px); display: grid; gap: 16px; max-width: 660px; }
.ap-eyebrow { font: 700 .78rem/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ap-logo { width: min(300px, 70%); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)); }
.ap-titulo { font: 400 clamp(1.8rem, 4vw, 2.7rem)/1.08 var(--ap-display); color: var(--white); margin: 0; text-wrap: balance; }
.ap-titulo b { font-weight: 400; color: var(--gold-bright); }
.ap-bajada { color: var(--text); font-size: 1.05rem; max-width: 46ch; margin: 0; }
.ap-cuenta { display: grid; grid-template-columns: repeat(4, minmax(0, 72px)); gap: 8px; margin: 2px 0 4px; }
.ap-cuenta div { border: 1px solid var(--gold-soft); background: rgba(10,9,8,.72); border-radius: var(--radius-sm); padding: 9px 4px 7px; text-align: center; }
.ap-cuenta b { display: block; font: 700 1.7rem/1 var(--font); color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.ap-cuenta span { font: 700 .62rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.ap-abierto { font: 400 1.6rem/1.1 var(--ap-display); color: var(--ok); margin: 0; }
.ap-hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ap-mas { color: var(--gold); font-weight: 700; font-size: .92rem; text-decoration: none; width: fit-content; }
.ap-mas:hover { color: var(--gold-bright); text-decoration: underline; }

/* ---- tira «Lo que te espera» ---- */
.ap-tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 30px; }
.ap-tira a { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform .15s; }
.ap-tira a:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.ap-tira img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.ap-tira div { padding: 12px 14px 14px; display: grid; gap: 4px; }
.ap-tira b { font: 400 1.15rem/1.15 var(--ap-display); color: var(--white); }
.ap-tira span { color: var(--text-dim); font-size: .9rem; line-height: 1.4; }

/* ---- la noticia de la apertura: borde dorado. La noticia vive en la base (tabla noticias) y se dibuja
        como todas (renderNoticiaBuff); se la reconoce por su botón a /apertura ([boton=/apertura]). ---- */
.news-card:has(> p > a.btn[href="/apertura"]) { border-color: var(--gold-soft); }

/* ================= página /apertura ================= */
.ap-pag { padding: 26px 0 10px; }
.ap-pag h2 { font: 400 clamp(1.7rem, 3.6vw, 2.5rem)/1.1 var(--ap-display); color: var(--white); margin: 0; text-wrap: balance; }
.ap-pag h3 { font: 400 1.2rem/1.15 var(--ap-display); color: var(--white); margin: 0; }
.ap-rotulo { font: 700 .76rem/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ap-bloque { padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.ap-bloque.ap-primero { border-top: 0; }
.ap-par { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ap-par.al-reves > figure { order: 2; }
.ap-pag figure { margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.ap-pag figure img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ap-pag figcaption { padding: 8px 14px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); border-top: 1px solid var(--line); }
.ap-texto { display: grid; gap: 14px; min-width: 0; }
.ap-texto p { color: var(--text); margin: 0; max-width: 60ch; line-height: 1.65; }
.ap-texto p strong { color: var(--white); }
.ap-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: var(--text); }
.ap-lista li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ap-lista li::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg) translateY(-2px); background: var(--red-2); }
.ap-escalera { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.ap-escalera div { display: grid; gap: 5px; align-content: end; }
.ap-escalera i { display: block; border-radius: 3px 3px 0 0; }
.ap-escalera b { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--white); }
.ap-escalera small { font-size: .7rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ap-dungeons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.ap-dg { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); min-width: 0; }
.ap-dg .ap-mini { display: block; aspect-ratio: 4 / 3; background: var(--bg-3) center / cover no-repeat; border-bottom: 1px solid var(--line); }
.ap-dg div { padding: 11px 13px 13px; display: grid; gap: 5px; }
.ap-dg em { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--caos); }
.ap-dg p { margin: 0; color: var(--text-dim); font-size: .88rem; line-height: 1.45; }
.ap-pasos { list-style: none; counter-reset: p; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ap-pasos li { counter-increment: p; border-top: 2px solid var(--red); padding-top: 12px; display: grid; gap: 6px; align-content: start; color: var(--text-dim); font-size: .95rem; }
.ap-pasos li::before { content: counter(p); font: 700 2rem/1 var(--font); color: var(--gold-bright); }
.ap-pasos b { color: var(--white); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
/* el header es sticky: que el salto a #arcadia, #pvp... no quede tapado */
.ap-pag [id] { scroll-margin-top: calc(var(--header-h) + 12px); }

@media (max-width: 900px) {
  .ap-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-par { grid-template-columns: minmax(0, 1fr); }
  .ap-par.al-reves > figure { order: 0; }
  .ap-dungeons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ap-tira, .ap-dungeons, .ap-pasos { grid-template-columns: minmax(0, 1fr); }
  .ap-escalera { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
  .ap-cuenta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}