/* ==========================================================================
   alexochz.com — sistema de estilos
   Una sola hoja para todo el sitio. Para una página nueva, copiá un HTML
   existente y no toques nada de acá salvo que quieras cambiar el sistema.

   Dirección: paleta sobria (blanco roto, grafito, verde abeto) con
   tipografía serif de ensayo para la lectura y mono para fechas y temas.
   ========================================================================== */

/* ---- Variables del sistema ---------------------------------------------- */
:root {
  /* Color */
  --fondo:        #FAFAF8;   /* blanco roto neutro */
  --tinta:        #26282A;   /* grafito, texto principal */
  --tinta-suave:  #5C6058;   /* meta, texto secundario */
  --abeto:        #2E4B3C;   /* verde abeto: links, tags, acentos */
  --abeto-claro:  #3F6653;   /* hover de links */
  --linea:        #E4E4DE;   /* hairlines */

  /* Tipografía */
  --serif: "Source Serif 4", "Charter", "Iowan Old Style", Georgia, serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica (base 18px, ratio contenido) */
  --t-meta:   0.778rem;   /* 14px — fechas, tags, pie */
  --t-cuerpo: 1rem;       /* 18px — lectura */
  --t-h2:     1.333rem;   /* 24px — subtítulos de ensayo */
  --t-h1:     1.778rem;   /* 32px — título de ensayo / home */

  /* Espaciado */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 2rem;
  --esp-4: 3.5rem;

  /* Medida de lectura */
  --ancho: 42rem;
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  font-size: 18px;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pagina {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: var(--esp-4) var(--esp-2) var(--esp-3);
}

/* ---- Enlaces -------------------------------------------------------------- */
a {
  color: var(--abeto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--abeto) 40%, transparent);
}

a:hover,
a:focus-visible {
  color: var(--abeto-claro);
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--abeto);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Cabecera del sitio ---------------------------------------------------- */
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  font-family: var(--mono);
  font-size: var(--t-meta);
}

.cabecera .marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.cabecera .marca:hover { color: var(--abeto); }

.cabecera .marca-foto {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cabecera nav {
  display: flex;
  gap: var(--esp-2);
}

.cabecera nav a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.cabecera nav a:hover,
.cabecera nav a[aria-current="page"] {
  color: var(--abeto);
}

/* ---- Home: intro ------------------------------------------------------------ */
.intro p {
  margin: 0 0 var(--esp-2);
  font-size: 1.05rem;
}

.intro {
  margin-bottom: var(--esp-4);
}

/* ---- Home / Notas: registro cronológico ------------------------------------- */
.anio {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  color: var(--tinta-suave);
  letter-spacing: 0.06em;
  margin: var(--esp-3) 0 var(--esp-1);
  padding-bottom: var(--esp-1);
  border-bottom: 1px solid var(--linea);
}

.registro {
  list-style: none;
  margin: 0;
  padding: 0;
}

.registro li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--esp-2);
  padding: 0.55rem 0;
  align-items: baseline;
}

.registro time {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  white-space: nowrap;
}

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

.registro a:hover {
  color: var(--abeto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.tema {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--abeto);
  letter-spacing: 0.04em;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* ---- Ensayo ------------------------------------------------------------------ */
.ensayo header {
  margin-bottom: var(--esp-3);
}

.ensayo h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--esp-1);
}

.ensayo .meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}

.ensayo h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--esp-3) 0 var(--esp-1);
}

.ensayo p {
  margin: 0 0 var(--esp-2);
}

.ensayo blockquote {
  margin: var(--esp-2) 0;
  padding-left: var(--esp-2);
  border-left: 2px solid var(--abeto);
  color: var(--tinta-suave);
  font-style: italic;
}

.ensayo ul,
.ensayo ol {
  margin: 0 0 var(--esp-2);
  padding-left: 1.4rem;
}

.ensayo li { margin-bottom: 0.35rem; }

.ensayo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--esp-2) 0;
}

.ensayo figcaption {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--tinta-suave);
  margin-top: -1rem;
  margin-bottom: var(--esp-2);
}

.ensayo figure { margin: var(--esp-3) 0; }
.ensayo figure img { margin: 0; }
.ensayo figure figcaption { margin-top: 0.4rem; margin-bottom: 0; }

.ensayo hr {
  border: none;
  border-top: 1px solid var(--linea);
  margin: var(--esp-3) 0;
}

/* ---- Notas -------------------------------------------------------------------- */
.nota {
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--linea);
}

.nota:last-child { border-bottom: none; }

.nota .meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--tinta-suave);
  display: block;
  margin-bottom: 0.35rem;
}

.nota p { margin: 0 0 var(--esp-1); }
.nota p:last-child { margin-bottom: 0; }

/* ---- Pie ------------------------------------------------------------------------ */
.pie {
  margin-top: var(--esp-4);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--tinta-suave);
}

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

.pie a:hover { color: var(--abeto); }

.pie .contacto { display: flex; align-items: center; gap: var(--esp-2); }

.pie .contacto a {
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--tinta-suave) 65%, var(--fondo));
}

.pie .contacto a:hover { color: var(--abeto); }

.pie .contacto svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  display: block;
}

/* ---- Móvil ------------------------------------------------------------------------ */
@media (max-width: 34rem) {
  html { font-size: 17px; }

  .pagina { padding-top: var(--esp-3); }

  .registro li {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 0.7rem 0;
  }
}

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