/* § Valores */
:root {
  --papel: #F2F2EF;
  --tinta: #16171A;
  --tinta-gris: #4A4D55;
  --cobalto: #2B4BC4;
  --cobalto-hondo: #22399A;
  --realce: #E6E7E2;
  --filete: #B9BBB4;
  --alerta: #9B1C31;

  --letra-titular: "Instrument Serif", "Times New Roman", serif;
  --letra-lectura: "Literata", Georgia, serif;
  --letra-cifra: "Red Hat Mono", ui-monospace, monospace;

  --cuerpo-0: 0.8125rem;
  --cuerpo-1: 0.9375rem;
  --cuerpo-2: 1.125rem;
  --cuerpo-3: 1.375rem;
  --cuerpo-4: 1.75rem;
  --cuerpo-5: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --cuerpo-6: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  --interlinea-texto: 1.6;
  --interlinea-titular: 1.12;

  --blanco-1: 0.25rem;
  --blanco-2: 0.5rem;
  --blanco-3: 1rem;
  --blanco-4: 1.5rem;
  --blanco-5: 2.5rem;
  --blanco-6: 4rem;
  --blanco-7: 6rem;
  --medida: 38rem;
  --margen-acotacion: 15rem;
  --pliego: 72rem;
  --pausa: 160ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* § Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra-lectura);
  font-size: var(--cuerpo-2);
  line-height: var(--interlinea-texto);
  /* Una dirección de correo o una URL larga no tienen dónde partirse y se
     llevan la página al costado. Acá abajo de 360 px pasaba en /contacto/. */
  overflow-wrap: break-word;
}

h1,
h2 {
  margin: 0;
  font-family: var(--letra-titular);
  font-weight: 400;
  line-height: var(--interlinea-titular);
}

h1 {
  font-size: var(--cuerpo-5);
}

h2 {
  font-size: var(--cuerpo-4);
}

h3 {
  margin: 0;
  font-size: var(--cuerpo-2);
  font-weight: 600;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

a {
  color: var(--cobalto);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--blanco-1);
  transition: color var(--pausa) var(--curva);
}

a:visited {
  color: var(--cobalto-hondo);
}

@media (hover: hover) {
  a:hover {
    color: var(--cobalto-hondo);
    text-decoration-thickness: 2px;
  }
}

:focus-visible {
  outline: 2px solid var(--cobalto);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

time,
data {
  font-variant-numeric: tabular-nums;
}

/* § Salto y solo lectores */
.salto {
  position: absolute;
  top: var(--blanco-2);
  left: var(--blanco-2);
  padding: var(--blanco-2) var(--blanco-3);
  background: var(--tinta);
  color: var(--papel);
  transform: translateY(-200%);
}

.salto:focus-visible {
  transform: none;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* § Cabecera */
.cabecera {
  padding: var(--blanco-6) var(--blanco-3) 0;
  text-align: center;
}

.mancheta {
  font-family: var(--letra-titular);
  font-size: var(--cuerpo-6);
  line-height: var(--interlinea-titular);
  color: var(--tinta);
  text-decoration: none;
}

.mancheta:visited {
  color: var(--tinta);
}

.lema {
  margin-top: var(--blanco-2);
  font-size: var(--cuerpo-1);
  font-style: italic;
  color: var(--tinta-gris);
}

.secciones {
  max-width: var(--pliego);
  margin: var(--blanco-4) auto 0;
  padding-top: var(--blanco-3);
  border-top: 1px solid var(--filete);
}

.secciones ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  list-style: none;
  font-size: var(--cuerpo-1);
}

.secciones li + li::before {
  content: "·";
  padding: 0 var(--blanco-2);
  color: var(--tinta-gris);
}

.secciones a {
  color: var(--tinta);
  text-decoration: none;
}

@media (hover: hover) {
  .secciones a:hover {
    color: var(--cobalto);
    text-decoration: underline;
  }
}

@media (max-width: 39.99em) {
  .mancheta {
    font-size: var(--cuerpo-5);
  }

  .secciones ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .secciones li {
    scroll-snap-align: start;
  }
}

/* § Portada */
.portada-destacado {
  max-width: var(--medida);
  margin: var(--blanco-7) auto 0;
  padding: 0 var(--blanco-3);
  text-align: center;
}

.rubro {
  font-size: var(--cuerpo-1);
  font-style: italic;
  font-weight: 400;
  color: var(--tinta-gris);
}

.portada-destacado h1 {
  margin-top: var(--blanco-3);
}

.bajada {
  margin-top: var(--blanco-4);
  font-size: var(--cuerpo-3);
  color: var(--tinta-gris);
}

.firma {
  margin-top: var(--blanco-4);
  font-size: var(--cuerpo-1);
  color: var(--tinta-gris);
}

.firma time {
  font-family: var(--letra-cifra);
  font-size: var(--cuerpo-0);
  white-space: nowrap;
}

.seguir {
  margin-top: var(--blanco-4);
  font-style: italic;
}

.asterismo {
  margin: var(--blanco-6) 0;
  font-family: var(--letra-titular);
  font-size: var(--cuerpo-4);
  line-height: var(--interlinea-titular);
  text-align: center;
  color: var(--tinta-gris);
}

/* § Índice */
.indice {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 var(--blanco-3);
}

.indice h2 {
  text-align: center;
}

.indice .rubro {
  margin-top: var(--blanco-5);
  padding-bottom: var(--blanco-2);
  border-bottom: 1px solid var(--filete);
}

.indice ol {
  padding: 0;
  list-style: none;
}

.indice-entrada {
  display: grid;
  grid-template-columns: var(--blanco-5) 1fr;
  column-gap: var(--blanco-3);
  padding: var(--blanco-3) 0;
}

.indice-numero {
  grid-row: span 3;
  font-family: var(--letra-cifra);
  font-size: var(--cuerpo-1);
  color: var(--cobalto);
  padding-top: var(--blanco-1);
}

.indice-entrada > a {
  color: var(--tinta);
  text-decoration: none;
}

@media (hover: hover) {
  .indice-entrada > a:hover {
    color: var(--cobalto);
    text-decoration: underline;
  }
}

.indice-entrada .firma {
  margin-top: 0;
}

.indice h2 + p {
  margin-top: var(--blanco-3);
}

.indice-resumen {
  font-size: var(--cuerpo-1);
}

/* § Archivo */
.archivo tbody th {
  font-weight: 400;
  font-style: italic;
  color: var(--tinta-gris);
}

.archivo td:last-child {
  font-family: var(--letra-cifra);
  font-size: var(--cuerpo-0);
  white-space: nowrap;
}

@media (max-width: 39.99em) {
  .archivo thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .archivo tr {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--blanco-2);
    padding: var(--blanco-3) 0;
    border-bottom: 1px solid var(--filete);
  }

  .archivo th,
  .archivo td {
    padding: 0;
    border: 0;
  }

  .archivo tbody th,
  .archivo td:nth-child(2) {
    flex-basis: 100%;
  }

  .archivo td:nth-child(3) {
    flex-shrink: 0;
    font-size: var(--cuerpo-1);
    color: var(--tinta-gris);
  }
}

/* § Ensayo */
.ensayo {
  max-width: var(--pliego);
  margin: var(--blanco-6) auto 0;
  padding: 0 var(--blanco-3);
}

.ensayo-texto {
  max-width: var(--medida);
  margin: 0 auto;
}

.ensayo-texto > * + * {
  margin-top: var(--blanco-3);
}

.ensayo-texto > h2 {
  margin-top: var(--blanco-5);
}

.ensayo-texto > h3 {
  margin-top: var(--blanco-4);
}

.ensayo-texto ul,
.ensayo-texto ol {
  padding-left: var(--blanco-4);
}

.ensayo-texto li + li {
  margin-top: var(--blanco-2);
}

.ensayo-texto blockquote {
  padding-left: var(--blanco-4);
  border-left: 2px solid var(--filete);
  font-style: italic;
}

.miga ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0;
  list-style: none;
  font-size: var(--cuerpo-1);
  color: var(--tinta-gris);
}

.miga li + li::before {
  content: "›";
  padding: 0 var(--blanco-2);
}

.ensayo-texto > h1 {
  margin-top: var(--blanco-4);
}

@media (min-width: 64em) {
  .ensayo-texto {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--medida)) var(--margen-acotacion);
    column-gap: var(--blanco-5);
    max-width: none;
  }

  .ensayo-texto > * {
    grid-column: 2;
  }

  .ensayo-texto > .acotacion {
    grid-column: 3;
    align-self: start;
    padding-top: var(--blanco-1);
  }

  .ensayo-texto > .cuadro {
    grid-column: 2 / 4;
  }
}

/* § Acotaciones */
.llamada {
  position: relative;
  top: calc(-1 * var(--blanco-2));
  vertical-align: baseline;
  font-family: var(--letra-cifra);
  font-size: var(--cuerpo-0);
  color: var(--cobalto);
}

.acotacion {
  padding-left: var(--blanco-4);
  font-size: var(--cuerpo-1);
  color: var(--tinta-gris);
}

.acotacion .llamada {
  padding-right: var(--blanco-1);
}

@media (min-width: 64em) {
  .acotacion {
    padding-left: 0;
  }
}

/* § Figuras */
.figura img {
  width: 100%;
}

.figura-pie {
  margin-top: var(--blanco-2);
  font-size: var(--cuerpo-1);
  font-style: italic;
  color: var(--tinta-gris);
}

.figura-credito {
  display: block;
  font-size: var(--cuerpo-0);
  font-style: normal;
}

/* § Cuadros */
.cuadro {
  overflow-x: auto;
  container-type: inline-size;
}

.cuadro table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  font-size: var(--cuerpo-1);
}

.cuadro caption {
  position: sticky;
  left: 0;
  max-width: 100cqi;
  padding-bottom: var(--blanco-2);
  font-style: italic;
  text-align: left;
}

.cuadro thead th {
  border-bottom: 1px solid var(--tinta);
  background: var(--realce);
  font-weight: 600;
  vertical-align: bottom;
}

.cuadro th,
.cuadro td {
  padding: var(--blanco-1) var(--blanco-3) var(--blanco-1) 0;
  text-align: left;
}

.cuadro tbody th {
  font-weight: 400;
}

.cuadro td:has(> data:only-child),
.cuadro table:has(tbody data) thead th + th {
  text-align: right;
}

.cuadro data {
  font-family: var(--letra-cifra);
  font-size: var(--cuerpo-0);
}

.cuadro-fuente {
  margin-top: var(--blanco-2);
  font-size: var(--cuerpo-0);
  color: var(--tinta-gris);
}

/* § Cierre */
.fuentes ol {
  padding-left: var(--blanco-4);
  font-size: var(--cuerpo-1);
  overflow-wrap: anywhere;
}

.cita-sugerida {
  padding: var(--blanco-3) var(--blanco-4);
  background: var(--realce);
  font-size: var(--cuerpo-1);
  overflow-wrap: anywhere;
}

.cita-sugerida p + p {
  margin-top: var(--blanco-2);
}

.aviso-inversion {
  font-size: var(--cuerpo-1);
  font-style: italic;
  color: var(--tinta-gris);
}

.relacionados ul {
  padding: 0;
  list-style: none;
}

/* § Formularios */
.boletin,
.consulta {
  max-width: var(--medida);
  margin: var(--blanco-6) auto 0;
}

.boletin {
  padding: 0 var(--blanco-3);
}

.ensayo-texto .boletin,
.ensayo-texto .consulta {
  margin-top: var(--blanco-5);
  padding: 0;
}

.boletin form,
.consulta form {
  display: grid;
  gap: var(--blanco-3);
  margin-top: var(--blanco-3);
}

.boletin h2 + p {
  margin-top: var(--blanco-2);
}

@media (min-width: 40em) {
  .boletin form {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .boletin form > :not(.campo):not(.enviar) {
    grid-column: 1 / -1;
  }
}

.campo label {
  display: block;
  font-size: var(--cuerpo-1);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: var(--blanco-2) 0;
  border: 0;
  border-bottom: 1px solid var(--tinta-gris);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
}

.campo textarea {
  min-height: calc(var(--blanco-6) * 2);
  resize: vertical;
}

/* El filete de abajo marca el campo activo, pero no reemplaza al foco: esta
   regla es mas especifica que :focus-visible y antes lo apagaba, de modo que
   con el teclado no quedaba mas senal que 1 px de borde. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-bottom: 2px solid var(--cobalto);
  padding-bottom: calc(var(--blanco-2) - 1px);
}

.campo [aria-invalid="true"] {
  border-bottom-color: var(--alerta);
}

.campo-error {
  margin-top: var(--blanco-1);
  font-size: var(--cuerpo-1);
  color: var(--alerta);
}

.casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--blanco-2);
  align-items: start;
  font-size: var(--cuerpo-0);
}

/* Minimo de WCAG 2.5.8 para un control: 24 px de lado. */
.casilla input {
  width: var(--blanco-4);
  height: var(--blanco-4);
  margin: 0;
  accent-color: var(--cobalto);
}

.casilla .campo-error {
  grid-column: 2;
}

.aviso-datos,
.aviso-recaptcha {
  font-size: var(--cuerpo-0);
  color: var(--tinta-gris);
}

.boletin + .aviso-datos {
  max-width: var(--medida);
  margin: var(--blanco-3) auto 0;
  padding: 0 var(--blanco-3);
}

.ensayo-texto > .boletin + .aviso-datos,
.ensayo-texto > .consulta + .aviso-datos {
  margin-top: var(--blanco-3);
  padding: 0;
}

.enviar {
  padding: var(--blanco-2) var(--blanco-4);
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-style: italic;
  cursor: pointer;
  transition: background-color var(--pausa) var(--curva), color var(--pausa) var(--curva);
}

@media (hover: hover) {
  .enviar:hover {
    background: var(--tinta);
    color: var(--papel);
  }
}

/* § Glosario */
.glosario-letras ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--blanco-1) var(--blanco-3);
  padding: 0;
  list-style: none;
  font-size: var(--cuerpo-1);
  color: var(--tinta-gris);
}

.glosario-buscar [aria-live] {
  margin-top: var(--blanco-1);
  font-size: var(--cuerpo-1);
  color: var(--tinta-gris);
}

.glosario dt {
  margin-top: var(--blanco-4);
  font-weight: 600;
  scroll-margin-top: var(--blanco-3);
}

.glosario h2 {
  margin-top: var(--blanco-5);
  scroll-margin-top: var(--blanco-3);
}

.glosario dd {
  margin-top: var(--blanco-1);
}

.glosario dd a {
  font-size: var(--cuerpo-1);
}

/* § Colofón */
.colofon {
  max-width: var(--medida);
  margin: var(--blanco-7) auto 0;
  padding: var(--blanco-5) var(--blanco-3) var(--blanco-6);
  border-top: 1px solid var(--filete);
  text-align: center;
  font-size: var(--cuerpo-1);
  color: var(--tinta-gris);
}

.colofon p + p {
  margin-top: var(--blanco-2);
}

.colofon-marca {
  font-family: var(--letra-titular);
  font-size: var(--cuerpo-4);
  color: var(--tinta);
}

.colofon-enlaces {
  margin: var(--blanco-4) 0;
}

.colofon-enlaces ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--blanco-1) var(--blanco-3);
  padding: 0;
  list-style: none;
}

/* § Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}