/* Fuentes auto-alojadas — SIL Open Font License.
   Ambas son variables: Google Fonts devolvió el mismo archivo para
   los dos pesos solicitados de cada familia, así que un solo
   @font-face por familia cubre todo el rango de peso.
   font-display:swap muestra la tipografía de respaldo mientras
   cargan, para que el texto nunca quede invisible. */

@font-face {
  font-family: "Fraunces";
  src: url("fuentes/fraunces-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fuentes/inter-variable.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Paleta "Códice" — obsidiana, papel y oro viejo. Un solo modo, oscuro, a propósito. */
:root {
  --fondo:  #14100E;
  --texto:  #EFE6D8;
  --tenue:  #A09384;
  --oro:    #B08D57;
  --jade:   #6F8F6F;
  --ambar:  #907B56;
  --gris:   #867A6E;
  --filete: #2A231D;

  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans:  Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.hoja {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(3rem, 12vh, 7rem) 1.5rem 4rem;
}

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

.kicker {
  margin: 0;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 1.5rem 0 0;
}

.nombre {
  font-family: var(--serif);
  font-size: 1.0625rem;
  margin: 2rem 0 .35rem;
}

.frase {
  margin: 0;
  max-width: 46ch;
  color: var(--tenue);
  font-size: .9375rem;
  line-height: 1.6;
}

.filete {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
  margin: 2.5rem 0 .5rem;
}

/* ---- Lista de proyectos ---- */

.proyectos { list-style: none; margin: 0; padding: 0; }
.proyectos li + li { border-top: 1px solid var(--filete); }

.renglon {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.125rem 0;
  color: inherit;
  text-decoration: none;
}

.renglon:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 4px;
  border-radius: 2px;
}

a.renglon:hover .nombre-proyecto { color: var(--oro); }
a.renglon:hover .flecha { transform: translateX(3px); }

.cuerpo { flex: 1; min-width: 0; }

.titulo-linea {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  flex-wrap: wrap;
}

.nombre-proyecto {
  font-family: var(--serif);
  font-size: 1.1875rem;
  transition: color .18s ease;
}

.estado {
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.estado.linea { color: var(--jade); }
.estado.obra  { color: var(--ambar); }
.estado.idea  { color: var(--gris); }

.descripcion {
  margin: .25rem 0 0;
  color: var(--tenue);
  font-size: .875rem;
  line-height: 1.5;
}

.flecha {
  color: var(--oro);
  font-size: 1.125rem;
  transition: transform .18s ease;
}
.renglon.inerte .flecha { color: var(--gris); }

/* ---- Móvil ---- */

@media (max-width: 34rem) {
  .flecha { display: none; }
  .renglon { padding: 1rem 0; }
}

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