:root { color-scheme: light; --verde: #123e32; --papel: #fffdfa; --fondo: #f3f1ea; --linea: #d9d4c8; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--verde); font: 1rem/1.45 system-ui, sans-serif; }
.portada { padding: 1.25rem 1rem 1.1rem; text-align: center; border-bottom: 1px solid var(--linea); background: var(--papel); }
.portada p { margin: 0; }
.marca { display: block; width: min(10rem, 55vw); height: auto; margin: 0 auto .35rem; }
.edicion { font-size: .85rem; color: #526458; }
h1 { font: 500 clamp(1.9rem, 5vw, 3.6rem)/1.04 Georgia, serif; margin: .6rem 0; }
#destacada { color: var(--verde); text-underline-offset: .23em; }
main { max-width: 68rem; margin: auto; padding: .75rem clamp(.6rem, 2.5vw, 1.5rem); }
nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem; }
#categorias { margin-bottom: .75rem; }
button, select, .consulta { font: inherit; min-height: 44px; padding: .48rem .75rem; border: 1px solid var(--linea); border-radius: .25rem; background: var(--papel); color: var(--verde); }
button, select { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button[aria-pressed="true"], .consulta { background: var(--verde); color: white; border-color: var(--verde); }
select { max-width: 62vw; }
#paginas { display: grid; background: var(--papel); border: 1px solid var(--linea); box-shadow: 0 12px 28px #221d1820, 0 4px 0 -1px #e4ded3, 0 7px 0 -2px #d9d2c6; }
#paginas:empty { display: none; }
article { display: flex; flex-direction: column; min-width: 0; padding: clamp(.65rem, 1.55vw, 1.25rem); }
.ficha { padding-top: .65rem; }
.etiqueta { color: #4b6456; font-size: .74rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
h2 { margin: .1rem 0; font: 600 clamp(1.27rem, 2.4vw, 1.7rem)/1.12 Georgia, serif; }
.ficha p { margin: .28rem 0 .65rem; }
.afiche { display: block; }
.afiche img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: #f6f4ef; }
.consulta { display: inline-flex; align-items: center; text-decoration: none; }
.controles { margin-top: .85rem; }
#estado, footer { text-align: center; font-size: .86rem; color: #526458; }
footer a { color: var(--verde); }
:focus-visible { outline: 3px solid #b74f10; outline-offset: 2px; }
@media (max-width: 849px) {
  .ficha { order: -1; padding: 0 0 .7rem; }
  .consulta { justify-content: center; width: 100%; }
}
@media (min-width: 850px) {
  #paginas:has(article:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  article:only-child { max-width: 34rem; width: 100%; justify-self: center; }
  article:has(+ article) { background: linear-gradient(to left, #33271916, transparent 1.4rem); border-right: 1px solid var(--linea); }
  article + article { background: linear-gradient(to right, #3327190e, transparent 1.4rem); }
}
#paginas { touch-action: pan-y pinch-zoom; }
.afiche img { user-select: none; -webkit-user-drag: none; }
.controles { margin: 0 0 .65rem; }
@media (max-width: 849px) {
  .portada { padding-block: .8rem; }
  .marca { width: min(8rem, 50vw); }
  #categorias { gap: .25rem; }
  #categorias button { padding-inline: .42rem; font-size: .84rem; }
  .controles { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; background: var(--fondo); padding: .25rem 0; }
  .controles button, .controles select { font-size: .84rem; padding-inline: .42rem; }
  .controles select { width: 100%; max-width: none; }
  #paginas { scroll-margin-top: 55px; }
}

@media (max-width: 849px) {
  .portada {
    display: grid;
    grid-template-columns: clamp(4.5rem, 23vw, 7rem) minmax(0, 1fr);
    align-items: center;
    gap: .15rem .65rem;
    padding: .55rem .75rem .4rem;
    text-align: left;
  }
  .marca { grid-column: 1; grid-row: 1 / span 2; width: 100%; margin: 0; }
  .edicion { grid-column: 2; grid-row: 2; font-size: .72rem; line-height: 1.2; }
  .portada h1 { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(1.12rem, 4.7vw, 1.6rem); }
  #destacada { grid-column: 2; font-size: .76rem; min-height: 44px; align-content: center; }
  main { padding-top: .4rem; }
  #categorias { justify-content: start; flex-wrap: nowrap; overflow-x: auto; margin-bottom: .25rem; }
  #categorias button { flex: 0 0 auto; }
  .controles { margin-bottom: .35rem; }
  article { padding: .5rem; }
  .ficha { padding-bottom: .45rem; }
  .ficha p { margin: .15rem 0 .35rem; }
}

@media (max-width: 849px) {
  .portada, #categorias, footer { display: none; }
  main { padding: .3rem; }
  #paginas { scroll-margin-top: 0; }
  article { padding: .3rem; }
  .ficha { padding: 0 0 .3rem; }
  .etiqueta { font-size: .65rem; }
  h2 { font-size: 1.1rem; }
  .ficha p { font-size: .8rem; margin: .1rem 0 .25rem; }
  .consulta { padding: .25rem .5rem; font-size: .83rem; }
  .afiche img { height: max(12rem, calc(100dvh - 13rem)); max-height: calc((100vw - 1.3rem) * 1.25); }
  .controles {
    position: static;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    margin: .25rem 0 0;
  }
  .controles select { display: none; }
  .controles button { padding: .2rem .45rem; font-size: .78rem; }
  #estado { margin: .1rem 0; font-size: .73rem; }
}