/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS — bloques que sólo existen en una pantalla concreta.
   ═══════════════════════════════════════════════════════════════════════ */

@layer pages {
  /* ── Portada: cabecera principal ─────────────────────────────────── */
  .hero {
    position: relative;
    display: grid;
    align-content: center;
    gap: var(--space-s);
    min-height: min(64svh, 34rem);
    padding-block: var(--space-xl);
    overflow: hidden;
  }

  /* Haz de luz de la lámpara. Puramente decorativo. */
  .hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto;
    height: 130%;
    background: conic-gradient(
      from 180deg at 50% 0%,
      transparent 0deg,
      color-mix(in oklab, var(--sodium) 12%, transparent) 12deg,
      transparent 30deg
    );
    filter: blur(28px);
    pointer-events: none;
  }

  .hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--mercury);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }

  .hero__title {
    font-size: var(--step-5);
    line-height: 0.86;
    letter-spacing: -0.005em;
  }
  .hero__title em {
    display: block;
    font-style: normal;
    color: var(--sodium);
    text-shadow: 0 0 60px color-mix(in oklab, var(--sodium) 45%, transparent);
  }

  .hero__lead {
    max-width: 34rem;
    color: var(--bone-2);
    font-size: var(--step-1);
    line-height: 1.5;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
  }

  .hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: var(--border);
  }
  .hero__stat b {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1;
    color: var(--sodium);
  }
  .hero__stat span {
    color: var(--bone-3);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  /* ── Catálogo: barra de herramientas ─────────────────────────────── */
  .catalog__bar {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    background: color-mix(in oklab, var(--soot) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .catalog__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
  }
  .catalog__count {
    color: var(--bone-3);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-inline-start: auto;
  }

  /* ── Ficha del juego (debajo del reproductor) ────────────────────── */
  .gameinfo {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
  @media (width < 60rem) {
    .gameinfo {
      grid-template-columns: 1fr;
    }
  }

  .gameinfo__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs);
  }
  .gameinfo__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    margin-top: var(--space-2xs);
  }

  .panel {
    padding: var(--space-s);
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--felt);
  }
  .panel h3 {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: var(--space-2xs);
    font-size: var(--step-1);
  }
  .panel h3 .ico {
    color: var(--sodium);
  }

  .deflist {
    display: grid;
    gap: var(--space-2xs);
    font-size: var(--step--1);
  }
  .deflist > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    padding-bottom: var(--space-2xs);
    border-bottom: 1px dashed var(--edge);
  }
  .deflist > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .deflist dt {
    color: var(--bone-3);
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .deflist dd {
    text-align: right;
    color: var(--bone);
  }

  .controls-list {
    display: grid;
    gap: var(--space-2xs);
    font-size: var(--step--1);
  }
  .controls-list > li {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--bone-2);
  }
  .controls-list .ico {
    --ico-size: 1.2em;
    color: var(--bone-3);
  }

  /* ── Páginas de texto (privacidad, acerca de, 404) ───────────────── */
  .page-head {
    padding-block: var(--space-xl) var(--space-m);
    border-bottom: var(--border);
  }
  .page-head p {
    margin-top: var(--space-2xs);
    max-width: var(--width-prose);
    color: var(--bone-2);
  }
  .prose {
    max-width: var(--width-prose);
    color: var(--bone-2);
  }
  .prose h2 {
    color: var(--bone);
    font-size: var(--step-2);
  }
  .prose h3 {
    color: var(--bone);
    font-size: var(--step-1);
  }

  /* ── Contacto ────────────────────────────────────────────────────── */
  .contact-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  }

  .contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m);
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--felt);
  }
  /* Lo urgente se distingue de un vistazo, también para quien escribe. */
  .contact-card--urgente {
    border-left: 3px solid var(--blood);
  }

  .contact-card h2 {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--step-1);
  }
  .contact-card h2 .ico {
    color: var(--sodium);
  }
  .contact-card--urgente h2 .ico {
    color: var(--blood);
  }
  .contact-card p {
    color: var(--bone-2);
    font-size: var(--step--1);
    line-height: 1.55;
  }
  .contact-card .btn {
    margin-top: auto;
    align-self: start;
  }
  .contact-note {
    color: var(--bone-3) !important;
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }
  .contact-note b {
    color: var(--sodium);
    font-weight: 400;
  }

  /* ── Panel privado ───────────────────────────────────────────────── */
  .panel-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }

  .panel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-s);
    padding-block: var(--space-2xs);
    border-top: 1px dashed var(--edge);
  }
  .panel-row--simple {
    justify-content: space-between;
    gap: var(--space-2xs);
  }
  .panel-row__name {
    flex: 1 1 9rem;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .panel-stat {
    display: grid;
    min-width: 5.5rem;
  }
  .panel-stat b {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1;
    color: var(--sodium);
  }
  .panel-stat span {
    color: var(--bone-3);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.05em;
  }

  /* Barras de actividad por día. */
  .bars {
    display: flex;
    align-items: end;
    gap: 2px;
    height: 7rem;
    padding-top: var(--space-2xs);
  }
  .bar {
    display: flex;
    flex-direction: column;
    justify-content: end;
    flex: 1 1 0;
    height: 100%;
    min-width: 0;
  }
  .bar__fill {
    background: var(--sodium);
    opacity: 0.75;
  }
  .bar:hover .bar__fill {
    opacity: 1;
  }
  .bar__label {
    margin-top: 3px;
    color: var(--bone-3);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    text-align: center;
    overflow: hidden;
  }

  /* ── 404 / offline ───────────────────────────────────────────────── */
  .stage {
    display: grid;
    place-items: center;
    gap: var(--space-s);
    min-height: 70svh;
    padding-block: var(--space-xl);
    text-align: center;
  }
  .stage__code {
    font-family: var(--font-display);
    font-size: var(--step-5);
    line-height: 0.8;
    color: var(--sodium);
    text-shadow: 0 0 70px color-mix(in oklab, var(--sodium) 40%, transparent);
  }
  .stage p {
    max-width: 32rem;
    color: var(--bone-2);
  }
}