:root{
    --papel:#FBFAF7;
    --tinta:#24211D;
    --gris:#736D64;
    --guinda:#6B1E2E;
    --guinda-claro:#8A2A3C;
    --oro:#B08D3F;
    --linea:#DFD9CE;
    --medida:34rem;
  }

  *{box-sizing:border-box}

  html{ -webkit-text-size-adjust:100% }

  body{
    margin:0;
    background:var(--papel);
    color:var(--tinta);
    font-family:"Spectral",Georgia,"Times New Roman",serif;
    font-weight:400;
    font-size:1.0625rem;
    line-height:1.72;
    -webkit-font-smoothing:antialiased;
  }

  .envoltura{
    max-width:52rem;
    margin:0 auto;
    padding:0 1.75rem;
  }

  a{color:var(--guinda)}
  a:focus-visible,
  .volumen:focus-visible{
    outline:2px solid var(--guinda);
    outline-offset:3px;
  }

  /* ---------- Portada ---------- */

  .portada{
    padding:5.5rem 0 3.25rem;
  }

  .portada h1{
    font-size:clamp(2.4rem,7vw,3.9rem);
    font-weight:800;
    line-height:1.04;
    letter-spacing:-0.022em;
    margin:0 0 1.1rem;
    max-width:16ch;
  }

  .autoria{
    font-size:1.0625rem;
    font-style:italic;
    color:var(--gris);
    margin:0 0 2.25rem;
  }

  .entrada{
    font-size:1.1875rem;
    line-height:1.68;
    max-width:var(--medida);
    margin:0;
  }

  .entrada + .entrada{ margin-top:1.1rem }

  .gratis{
    display:inline-block;
    margin-top:1.75rem;
    padding-bottom:0.15rem;
    border-bottom:2px solid var(--oro);
    font-weight:600;
  }

  /* ---------- Estante de volúmenes ---------- */

  .estante{
    margin:3.5rem 0 4.5rem;
    border-top:1px solid var(--linea);
  }

  .volumen{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    gap:0 1.5rem;
    padding:1.6rem 1.25rem 1.6rem 1.4rem;
    border-bottom:1px solid var(--linea);
    border-left:6px solid var(--guinda);
    text-decoration:none;
    color:inherit;
    background:transparent;
    transition:background-color .18s ease, border-left-width .18s ease, padding-left .18s ease;
  }

  .volumen:hover,
  .volumen:focus-visible{
    background:rgba(107,30,46,.045);
    border-left-width:14px;
    padding-left:0.75rem;
  }

  .anio{
    font-size:2.9rem;
    font-weight:800;
    letter-spacing:-0.03em;
    line-height:1;
    color:var(--guinda);
    font-variant-numeric:lining-nums;
  }

  .detalle{ min-width:0 }

  .detalle .nombre{
    display:block;
    font-size:1.0625rem;
    font-weight:600;
    line-height:1.35;
  }

  .medidas{
    display:block;
    font-size:0.9375rem;
    color:var(--gris);
    margin-top:0.15rem;
  }

  .medidas span + span{ margin-left:1.15rem }

  .accion{
    font-size:0.9375rem;
    font-weight:600;
    color:var(--guinda);
    white-space:nowrap;
  }

  /* ---------- Secciones ---------- */

  section h2{
    font-size:1.45rem;
    font-weight:600;
    letter-spacing:-0.012em;
    margin:0 0 1.15rem;
  }

  section{ margin-bottom:4rem }

  section p{ max-width:var(--medida) }

  .materias{
    list-style:none;
    padding:0;
    margin:1.5rem 0 0;
    max-width:var(--medida);
  }

  .materias li{
    padding:0.72rem 0 0.72rem 1.5rem;
    border-top:1px solid var(--linea);
    position:relative;
    line-height:1.5;
  }

  .materias li::before{
    content:"";
    position:absolute;
    left:0;
    top:1.42rem;
    width:0.5rem;
    height:1px;
    background:var(--oro);
  }

  .cita{
    max-width:var(--medida);
    padding:1.35rem 1.5rem;
    background:#F4F1EB;
    border-left:3px solid var(--oro);
    font-size:0.9875rem;
    line-height:1.6;
  }

  .cita p{ margin:0 }
  .cita .fuente{ font-style:italic }

  /* ---------- Pie ---------- */

  footer{
    border-top:1px solid var(--linea);
    padding:2.5rem 0 4rem;
    font-size:0.9375rem;
    color:var(--gris);
  }

  footer p{ margin:0 0 0.5rem; max-width:var(--medida) }

  @media (max-width:34rem){
    .portada{ padding:3.5rem 0 2.5rem }
    .volumen{
      grid-template-columns:auto 1fr;
      row-gap:0.6rem;
      padding:1.35rem 1rem 1.35rem 1.1rem;
    }
    .anio{ font-size:2.2rem }
    .accion{ grid-column:1 / -1 }
  }

  @media (prefers-reduced-motion:reduce){
    *{ transition:none !important }
  }

/* ================================================
   Páginas de criterio (una por sección del anuario)
   ================================================ */

.migas{
  padding:2.25rem 0 0;
  font-size:0.9375rem;
  color:var(--gris);
}

.migas a{ text-decoration:none }
.migas a:hover{ text-decoration:underline }
.migas span{ margin:0 0.4rem }

.criterio-encabezado{
  padding:1.75rem 0 0;
  border-bottom:1px solid var(--linea);
  margin-bottom:2.25rem;
  padding-bottom:2rem;
}

.criterio-encabezado h1{
  font-size:clamp(1.75rem,4.5vw,2.6rem);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-0.018em;
  margin:0 0 1.5rem;
  max-width:22ch;
}

.expediente{
  display:grid;
  grid-template-columns:9.5rem 1fr;
  gap:0.5rem 1rem;
  font-size:0.9375rem;
  max-width:var(--medida);
}

.expediente dt{ color:var(--gris) }
.expediente dd{ margin:0 }

.respuesta{
  max-width:var(--medida);
  padding:1.5rem 1.6rem;
  background:#F4F1EB;
  border-left:3px solid var(--guinda);
  margin-bottom:2.75rem;
}

.respuesta p{ margin:0; max-width:none }
.respuesta p + p{ margin-top:0.85rem }

.criterio-cuerpo h2{
  font-size:1.3rem;
  font-weight:600;
  margin:2.75rem 0 1rem;
}

.criterio-cuerpo p{ max-width:var(--medida) }

blockquote{
  margin:1.5rem 0;
  padding:0 0 0 1.4rem;
  border-left:2px solid var(--oro);
  max-width:var(--medida);
  font-size:1rem;
  color:#3A342D;
}

blockquote p{ margin:0 0 0.9rem }
blockquote p:last-child{ margin-bottom:0 }

.omision{
  display:block;
  color:var(--gris);
  letter-spacing:0.25em;
  margin:0.6rem 0;
}

.fuente-cita{
  display:block;
  margin-top:0.9rem;
  font-size:0.875rem;
  font-style:italic;
  color:var(--gris);
}

.descarga-pie{
  margin:3.5rem 0 0;
  padding:1.5rem 1.6rem;
  border:1px solid var(--linea);
  max-width:var(--medida);
}

.descarga-pie p{ margin:0 0 0.6rem }
.descarga-pie p:last-child{ margin-bottom:0 }

.navegacion{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  justify-content:space-between;
  margin:3rem 0 4rem;
  padding-top:1.5rem;
  border-top:1px solid var(--linea);
  font-size:0.9375rem;
}

@media (max-width:34rem){
  .expediente{ grid-template-columns:1fr; gap:0.15rem }
  .expediente dt{ margin-top:0.7rem }
}