/* Escritorio, estados de la interfaz, movimiento reducido y tableta. Va después de los componentes. */
/* ---------- Escritorio ---------- */
@media (min-width: 880px) {
  .cabecera { padding: 24px 28px 0; }
  .firma b { font-size: 1.55rem; }
  .hoja {
    left: 28px; right: auto; bottom: auto; top: 104px;
    width: 410px; max-height: calc(100% - 132px);
    border-radius: 16px;
    box-shadow: var(--sombra);
    padding: 26px 28px 28px;
    transform: translateX(-120%);
  }
  .hoja.abierta { transform: none; }
  .hoja .asa { display: none; }
  #intro { top: auto; bottom: 40px; width: 470px; padding: 34px 34px 32px; }
  #indice { left: auto; right: 28px; top: 92px; bottom: 28px; width: 400px; max-height: none; transform: translateX(120%); }
  #indice.abierta { transform: none; }
  #historia { padding-top: 0; }
  .progreso { margin: 0 -28px 24px; border-radius: 16px 16px 0 0; overflow: hidden; }
  #ficha { top: 136px; bottom: 24px; width: 440px; max-height: none; padding: 0 0 30px; overflow-y: auto; }
  .ficha-cuerpo { padding: 24px 28px 0; }
  .ficha-cuerpo.sin-foto { padding-top: 30px; }
  .collage { margin: 20px -28px 0; }
  .portada figcaption { padding: 8px 28px 0; }
  .filtros { left: 28px; right: auto; bottom: 28px; padding: 0; flex-wrap: wrap; max-width: 60vw; }
  .atribucion { bottom: 10px; right: 10px; writing-mode: horizontal-tb; transform: none; }
}

/* ---------- Estados de la interfaz ---------- */
body:not(.modo-explorar) .filtros, body.ficha-abierta .filtros { opacity: 0; transform: translateY(20px); pointer-events: none; }
body.modo-intro .boton-indice, body.modo-historia .boton-indice { opacity: 0; pointer-events: none; }
.boton-indice, .firma { transition: opacity .4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Tableta en vertical: la hoja no se estira de lado a lado; queda centrada con ancho de lectura. */
@media (min-width: 600px) and (max-width: 879px) {
  .hoja { max-width: 640px; margin: 0 auto; }
}