@font-face {
  font-family: "Archivo";
  src: url("fuentes/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fuentes/literata.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fuentes/literata-italica.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* danielsalas.cl, versión 4 (octubre de 2026).
   Un solo fondo, una tinta y un gris. Todo el sitio usa la misma grilla:
   el título de cada sección a la izquierda y las entradas a la derecha. */
:root {
  --papel: #EEEFF1;
  --tinta: #1B2336;
  --grafito: #50586A;
  --linea: rgba(27, 35, 54, .14);
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --margen: clamp(1rem, 5vw, 4.5rem);
  --ancho: 1180px;
  --columna-anio: 7.25rem;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(27, 35, 54, .45);
  text-underline-offset: .22em;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }

.saltar {
  position: absolute; left: var(--margen); top: -4rem;
  background: var(--tinta); color: var(--papel); padding: .6rem 1rem;
  font-family: var(--sans); z-index: 10;
}
.saltar:focus { top: 1rem; }

.pagina { padding: 0 var(--margen); }

/* La grilla compartida */
.fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.25fr);
  gap: 1rem clamp(2rem, 5vw, 4.5rem);
  max-width: var(--ancho);
  margin: 0 auto;
}

/* ---------- Encabezado ---------- */

.nav {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.4rem 0 0;
  display: flex;
  justify-content: flex-end;
}
.nav ul {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--sans); font-stretch: 85%; font-weight: 500; font-size: .95rem;
}
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }

.encabezado { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5.5rem); }

.nombre {
  margin: 0;
  font-family: var(--sans);
  font-stretch: 62%;
  font-weight: 560;
  font-size: clamp(3.5rem, 7.4vw, 6.25rem);
  line-height: .86;
  letter-spacing: -.01em;
}
.nombre span { display: block; }

.presentacion { align-self: end; }
.oficio {
  margin: 0 0 1rem;
  font-style: italic;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.35;
}
.bio { margin: 0 0 1.75rem; max-width: 40rem; }

.enlaces {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--sans); font-stretch: 85%; font-weight: 560; font-size: 1rem;
}

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

.seccion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  border-top: 1px solid var(--linea);
}

.seccion-titulo {
  margin: 0;
  align-self: start;
  position: sticky;
  top: 1.5rem;
  font-family: var(--sans);
  font-stretch: 62%;
  font-weight: 540;
  font-size: clamp(2.4rem, 4.6vw, 3.75rem);
  line-height: .92;
  letter-spacing: -.01em;
}

.cuerpo h3 {
  margin: 2.75rem 0 .6rem;
  font-family: var(--sans); font-stretch: 85%; font-weight: 620; font-size: 1.12rem;
}
.cuerpo > h3:first-child { margin-top: .35rem; }

.lineas { list-style: none; margin: 0; padding: 0; font-size: 1.18rem; line-height: 1.5; }
.lineas li { padding: .55rem 0; border-top: 1px solid var(--linea); }

.registro { list-style: none; margin: 0; padding: 0; }
.registro li {
  display: grid;
  grid-template-columns: var(--columna-anio) minmax(0, 1fr);
  gap: 1.5rem;
  padding: .95rem 0;
  border-top: 1px solid var(--linea);
}
.cuerpo > .registro:first-child > li:first-child,
.cuerpo > .lineas:first-child > li:first-child { border-top: 0; padding-top: .35rem; }

.anio {
  text-align: right;
  font-family: var(--sans); font-stretch: 85%; font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--grafito);
  padding-top: .15em;
  white-space: nowrap;
}
.registro p { margin: 0; max-width: 64ch; }
.registro .detalle { margin-top: .3rem; font-size: 1rem; color: var(--grafito); }
.registro .detalle a { color: var(--tinta); white-space: nowrap; }

/* ---------- Contacto ---------- */

.correo {
  display: inline-block;
  margin: .2rem 0 1.5rem;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.contacto-enlaces {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-family: var(--sans); font-stretch: 85%; font-weight: 560; font-size: 1rem;
}
.lugar { margin: 0; color: var(--grafito); font-size: 1rem; }

.pie {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--linea);
  font-size: .9rem;
  color: var(--grafito);
}
.pie p { margin: 0; }


/* ---------- Retrato ---------- */

.retrato { margin: 0 0 1.75rem; width: 8.5rem; }
.retrato img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px rgba(27, 35, 54, .18); }

@media (min-width: 821px) {
  .encabezado .bio { font-size: 1.25rem; line-height: 1.55; }
}

/* ---------- Páginas de obra ---------- */

.volver { margin-right: auto; }
.nav { gap: .5rem 1.5rem; flex-wrap: wrap; }
.nav .volver a { font-family: var(--sans); font-stretch: 85%; font-weight: 620; font-size: .95rem; text-decoration: none; }

.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.galeria a { display: block; }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #d9dbe0; }
.galeria .ancha { grid-column: 1 / -1; }
.credito { margin: .9rem 0 0; font-size: 1rem; color: var(--grafito); }

.texto p { margin: 0 0 1rem; max-width: 64ch; }
.texto p:last-child { margin-bottom: 0; }

.ficha { margin: 0; display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
.ficha dt, .ficha dd { margin: 0; padding: .7rem 0; border-top: 1px solid var(--linea); }
.ficha dt { font-family: var(--sans); font-stretch: 85%; font-size: 1rem; color: var(--grafito); padding-right: 1.5rem; padding-top: .85rem; }
.ficha dt:first-of-type, .ficha dt:first-of-type + dd { border-top: 0; padding-top: .35rem; }

/* ---------- Pantallas angostas ---------- */

@media (max-width: 820px) {
  .fila { grid-template-columns: 1fr; }
  .nav { justify-content: flex-start; }
  .nav ul { gap: .35rem 1.1rem; }
  .encabezado .fila { gap: 1.75rem; }
  .seccion-titulo { position: static; margin-bottom: 1.25rem; }
  .registro li { grid-template-columns: 1fr; gap: .15rem; }
  .anio { text-align: left; padding-top: 0; }

  .retrato { width: 6.75rem; margin-bottom: 1.4rem; }
  .galeria { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { padding-bottom: 0; }
  .ficha dd { border-top: 0; padding-top: .15rem; }
  .ficha dt:first-of-type + dd { padding-top: .15rem; }
}

/* ---------- Impresión: el sitio se imprime como un CV ---------- */

@media print {
  body { background: #fff; font-size: 10.5pt; }
  .nav, .saltar { display: none; }
  .seccion { break-inside: auto; padding: 1.2rem 0; }
  .registro li { break-inside: avoid; }
  .seccion-titulo { position: static; }
  a { text-decoration: none; }
}