@font-face {
  font-family: "DM Sans";
  src: url("dm-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --negro: #171612;
  --dorado: #ebb528;
  --papel: #faf8f2;
  --blanco: #fffefa;
  --tinta-suave: #605b50;
  --borde: #e8e1d3;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--negro);
  background: var(--papel);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
a:focus-visible { outline: 2px solid #9b6400; outline-offset: 4px; }
.portada a:focus-visible { outline-color: var(--dorado); }

.contenedor { width: min(100% - 3rem, 72rem); margin-inline: auto; }
.saltar {
  position: fixed;
  z-index: 2;
  inset: .5rem auto auto .5rem;
  padding: .75rem 1rem;
  background: var(--blanco);
  transform: translateY(-150%);
}
.saltar:focus { transform: translateY(0); }
.cabecera, .pie { background: var(--blanco); }
.barra {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.barra img { width: clamp(7.5rem, 29vw, 10.5rem); height: auto; }
.barra a { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; }
.enlace-cabecera, .pie a { font-size: .875rem; font-weight: 700; text-decoration: none; }
.enlace-cabecera:hover, .pie a:hover { text-decoration: underline; text-underline-offset: 4px; }

.portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 3px solid var(--dorado);
  background: var(--negro);
  color: var(--blanco);
}
.portada::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 92% 112%, #e8ac3f65, transparent 58%),
    radial-gradient(ellipse at 73% 92%, #bc7d2329, transparent 61%);
}
.portada::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -11rem;
  left: 62%;
  width: 49rem;
  aspect-ratio: 1;
  border: 1px solid #e6b35e61;
  border-radius: 50%;
  box-shadow: 0 0 0 3rem #e6b35e1c, 0 0 0 6rem #e6b35e10, inset 0 0 5rem #e6b35e19;
}
.portada-contenido { padding-block: clamp(2.75rem, 6.5vw, 5.5rem); }
.estado {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  color: #f1c66d;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.estado::before { content: ""; width: 1.45rem; height: 1px; background: currentColor; }
h1 {
  margin: 0;
  font-size: clamp(2.35rem, 7vw, 5.5rem);
  font-weight: 750;
  letter-spacing: -.07em;
  line-height: 1;
}
h1 span { color: #f3c450; }
.bajada { max-width: 36ch; margin: 1.15rem 0 1.5rem; color: #eee4d0; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.55; }
.accion {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 48px;
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: var(--dorado);
  color: var(--negro);
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}
.accion:hover { background: #f4c850; }

.consulta {
  display: grid;
  grid-template-columns: minmax(13rem, 16.5rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(1.5rem, 4.5vw, 4rem);
}
.indice {
  position: sticky;
  top: 1.25rem;
  padding: 1.05rem;
  border: 1px solid var(--borde);
  border-radius: .9rem;
  background: var(--blanco);
}
.indice h2 { margin: .1rem .3rem .8rem; font-size: 1rem; letter-spacing: -.025em; }
.indice ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.indice a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  padding: .55rem .65rem;
  border-radius: .35rem;
  background: #f5f0e5;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.indice a::after { content: "↓" / ""; color: #765613; }
.indice a:hover { background: #f6e8bd; }
.documento { min-width: 0; }
.introduccion {
  margin: 0 0 1.25rem;
  padding: .5rem 0 .5rem 1rem;
  border-left: 3px solid var(--dorado);
  color: var(--tinta-suave);
  font-size: 1rem;
  line-height: 1.65;
}
.seccion {
  scroll-margin-top: 1rem;
  margin-bottom: .9rem;
  padding: clamp(1.15rem, 3.75vw, 2.3rem);
  border: 1px solid var(--borde);
  border-radius: .9rem;
  background: var(--blanco);
  overflow-wrap: anywhere;
}
.seccion:last-child { margin-bottom: 0; }
.seccion:target { border-color: #ad7c18; box-shadow: 0 0 0 2px #f3dfa5; }
.seccion h2 { margin: 0 0 .7rem; font-size: clamp(1.5rem, 4.5vw, 2.1rem); letter-spacing: -.045em; line-height: 1.1; }
.articulo { margin: 0 0 1.2rem; color: var(--tinta-suave); font-size: .8rem; font-weight: 650; }
.texto { max-width: 68ch; color: #3e382d; font-size: 1rem; line-height: 1.65; }
.texto h3 { margin: 1.25rem 0 .4rem; color: var(--negro); font-size: 1rem; font-weight: 800; line-height: 1.4; }
.texto > :first-child { margin-top: 0; }
.texto > :last-child { margin-bottom: 0; }
.texto p, .texto ul { margin: 0 0 .85rem; }
.texto ul { padding-left: 1.15em; }
.texto li + li { margin-top: .5rem; }
.texto li::marker { color: #9c6e11; }
.pie { border-top: 1px solid var(--borde); }
.pie img { width: 7rem; }

@media (max-width: 47rem) {
  .contenedor { width: calc(100% - 2rem); }
  .barra { min-height: 4rem; }
  .portada::after { left: 65%; top: -9rem; }
  .consulta { grid-template-columns: minmax(0, 1fr); }
  .indice { position: static; }
  .indice ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .indice a { height: 100%; }
}
@media (max-width: 22rem) {
  .enlace-cabecera { font-size: .8rem; }
  .salto-portada { display: none; }
  .indice a { font-size: .8125rem; }
}
@media (max-height: 39rem) and (min-width: 47.001rem) {
  .indice { position: static; }
}
@media print {
  .cabecera, .indice, .accion, .pie, .portada::before, .portada::after { display: none; }
  .contenedor { width: auto; }
  .consulta { display: block; }
  .portada, .seccion { border: 0; background: #fff; color: #000; }
  .portada-contenido, .seccion { padding: 0; }
  .portada :is(.estado, h1 span, .bajada) { color: #000; }
  .seccion h2, .seccion h3 { break-after: avoid; }
}