/* /forever Y /en/forever (17-10-2026, rehechas en Lima). Solo su maquetación: tokens, botones, chips, móviles, cartas y
   preguntas vienen de sistema.css, carta.css, pantallas.css y guia.css. El tinte es el de WoW: Forever en la app
   (`tinte-gold` en el <main>): el filete de los tramos y el bloque detrás de los móviles. */

/* ── Arriba: el texto y la pila de cartas ───────────────────────────────── */
.fe-hero {
  display: grid;
  gap: var(--s-6);
  padding-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}
.fe-rotulo { margin: var(--s-5) 0 var(--s-4); padding-left: 0.3rem; } /* la inclinación del chip saca la esquina */
.fe-hero .titular { max-width: 14ch; }
.fe-hero .linea { max-width: 36rem; }
.fe-accion { margin-top: var(--s-6); }
.fe-accion .boton { margin-left: 0.5rem; }
.fe-accion .nota { margin-top: var(--s-3); }

/* La pila: tres cartas de 304×418 en la misma celda, la de delante recta y las de detrás abiertas. Por debajo de 26 rem
   se escala entera (como los móviles dibujados) en vez de recolocar piezas. */
.fe-pila { display: grid; place-items: center; padding: var(--s-5) 0 var(--s-6); }
/* La caja mide lo que asoman las de detrás al girar (≈ 56 px por abajo): así la pila no se sale encima de lo que viene
   después (`oficio` · derrame). Las cartas, arriba y a su tamaño. */
.fe-pila__mesa { position: relative; width: 304px; height: calc(418px + 3.5rem); }
.fe-pila__carta { position: absolute; top: 0; left: 0; width: 304px; height: 418px; }
.fe-pila__carta[data-fe="0"] { z-index: 3; transform: rotate(-2deg); }
.fe-pila__carta[data-fe="1"] { z-index: 2; transform: translate(-46px, 18px) rotate(-9deg); }
.fe-pila__carta[data-fe="2"] { z-index: 1; transform: translate(48px, 30px) rotate(8deg); }
/* Las de detrás, quietas y sin acabados (como en el mazo de la portada): solo canto, franja, etiqueta y filete. */
.fe-pila__carta:not([data-fe="0"]) :is(.cl-fx, .cl-chispas, .cl-destello, .cl-foil, .cl-plast, .cl-luz) { display: none; }
/* A 320 la pila abierta mide ~330 px: entera a escala, sin que main la recorte por los lados. */
@media (max-width: 26rem) { .fe-pila__mesa { zoom: 0.8; } }
@media (max-width: 22.5rem) { .fe-pila__mesa { zoom: 0.68; } }

@media (prefers-reduced-motion: no-preference) {
  /* Al llegar, las de detrás se abren desde debajo de la de delante. Solo transform: no mueve nada de alrededor. */
  .fe-pila__carta[data-fe="1"] { animation: fe-abre-1 var(--mov-lento) var(--curva-entra) 120ms both; }
  .fe-pila__carta[data-fe="2"] { animation: fe-abre-2 var(--mov-lento) var(--curva-entra) 200ms both; }
}
@keyframes fe-abre-1 { from { transform: rotate(-2deg); } }
@keyframes fe-abre-2 { from { transform: rotate(-2deg); } }

@media (min-width: 60rem) {
  .fe-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; padding-bottom: var(--s-6); }
  .fe-pila { padding: var(--s-6) 0; }
}

/* ── Las tres secciones con su móvil: texto y pantalla, alternando el lado ── */
.fe-tema { display: grid; gap: var(--s-7); align-items: center; }
.fe-tema__texto p { margin: var(--s-4) 0 0; max-width: 36rem; font-size: var(--t-cuerpo); line-height: 1.55; }
.fe-tema__texto .seccion__titulo + p { margin-top: var(--s-5); color: var(--ink); font-size: var(--t-linea); line-height: 1.45; }
.fe-movil { margin: 0; display: grid; justify-items: center; text-align: center; }
.fe-movil .movil--dibujado { width: auto; max-width: none; padding: 0; }
.fe-movil .pie-captura { max-width: 18rem; font-weight: 600; color: var(--ink); }
@media (min-width: 60rem) {
  .fe-tema { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
  .fe-tema--reves .fe-movil { order: -1; }
}

/* ── Qué buscar en cada momento: una fila por tramo, con el filete del tinte ── */
.fe-tramos { margin: var(--s-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.fe-tramo {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border-left: 6px solid var(--tinte);
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--corte-l)) 0, 100% var(--corte-l), 100% 100%, 0 100%);
}
.fe-tramo__cuando { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; }
.fe-tramo__cuando .dato { color: var(--ink-soft); }
.guia .fe-tramo h3 {
  margin: var(--s-2) 0 0;
  font-family: var(--display);
  font-size: var(--t-tarjeta);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}
.guia .fe-tramo p:last-child { margin: 0; max-width: 46rem; font-size: var(--t-pie); line-height: 1.5; }
@media (min-width: 48rem) {
  .fe-tramo { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  .fe-tramo__cuando { grid-row: span 2; flex-direction: column; align-items: flex-start; }
  .guia .fe-tramo h3 { margin-top: 0; }
}

/* ── Cómo funciona: los pasos numerados, con el número del sistema (paso__pie) ── */
.fe-pasos { margin: var(--s-6) 0 0; padding: 0; list-style: none; counter-reset: fe-paso; display: grid; gap: var(--s-4); max-width: 34rem; }
.fe-pasos li { counter-increment: fe-paso; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-4); align-items: start; font-size: var(--t-linea); font-weight: 600; line-height: 1.35; }
.fe-pasos li::before {
  content: counter(fe-paso);
  display: grid;
  place-items: center;
  height: 2rem;
  background: var(--ink);
  clip-path: polygon(0.5rem 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%);
  color: var(--action-ink);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
}

/* ── El grupo por dentro (la pantalla nueva de pantallas.mjs) ─────────────── */
.pg-grupo-cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 2px solid var(--surface-raised); }
.pg-grupo-cabeza > div { flex: 1; min-width: 0; }
.pg-grupo-cabeza b { display: block; font: 900 18px/1 var(--display); text-transform: uppercase; }
.pg-grupo-cabeza small { display: block; margin-top: 4px; font: 700 10px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.pg-baldosa { display: grid; place-items: center; width: 36px; height: 36px; flex: none; background: var(--tinte); color: var(--tinte-ink); font: 900 15px/1 var(--display); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.pg-mas { font: 900 18px/1 var(--display); color: var(--ink-soft); }
.pg-tira { display: flex; align-items: center; gap: 10px; padding: 10px 14px 0; }
.pg-tira > span { display: flex; align-items: center; gap: 5px; font: 700 11px/1 var(--font); }
.pg-tira .pp-av { width: 24px; height: 24px; }
.pg-tira .pp-av img { width: 26px; height: 26px; left: -1px; top: 1px; }
.pg-tira em { font: 600 11px/1 var(--font); font-style: normal; color: var(--ink-soft); }
.pg-fija { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 14px 0; padding: 10px 12px; background: var(--surface); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.pg-fija b { font: 900 15px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.pg-ajeno { display: flex; align-items: flex-end; gap: 7px; max-width: 86%; }
.pg-ajeno .pp-av { flex: none; width: 26px; height: 26px; }
.pg-ajeno .pp-av img { width: 28px; height: 28px; left: -1px; top: 1px; }
.pg-ajeno > div { display: grid; gap: 3px; justify-items: start; }
.pg-ajeno small { font: 700 10px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.pg-ajeno .pp-burbuja { max-width: none; }

/* ── El cierre ─────────────────────────────────────────────────────────── */
.fe-cierre { padding-bottom: var(--seccion); }
.fe-cierre .seccion__linea { max-width: 34rem; }

/* El nombre corto del juego en la ficha de la fila de sesión, en una línea: «WORLD OF / WARCRAFT» se leía como dos
   fichas. Cabe en la columna de 300 px del móvil dibujado. */
.fe .pp-que .chip { white-space: nowrap; }

/* ── El Discord: el canal de Forever, con el botón secundario ───────────── */
.fe-discord .boton { margin-top: var(--s-5); margin-left: 0.5rem; }