/* ============================================================
   Punto ciego — hoja de estilos
   Paleta y tipografía: cambia solo las variables de :root
   ============================================================ */

:root {
  /* Papel: gris ceniza frío, no crema. Aire de contingencia. */
  --papel:        #E9EAE5;
  --papel-hondo:  #DFE1DB;
  --tinta:        #15171B;
  --tinta-suave:  #5B6067;
  --linea:        #C9CBC4;

  /* Los dos extremos de un portal. Se usan con cuentagotas. */
  --azul:         #2340D8;
  --naranja:      #DE5A1E;

  --display: "Archivo", system-ui, sans-serif;
  --cuerpo:  "Literata", Georgia, serif;
  --util:    "IBM Plex Mono", ui-monospace, monospace;

  --medida: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* Neutraliza los contenedores que mete Quarto */
#quarto-content, main, .page-columns, .content, #quarto-document-content {
  display: block !important;
  grid-template-columns: none !important;
  max-width: none;
  padding: 0;
  margin: 0;
}

main {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
}

/* Quarto a veces inserta su propio título; lo apagamos porque
   cada página trae su encabezado escrito a mano. */
#title-block-header { display: none; }

/* ---------- La ruta: azul a naranja, entrada y salida ---------- */
.ruta {
  height: 2px;
  border: 0;
  margin: 2.5rem 0;
  background: linear-gradient(90deg, var(--azul), var(--naranja));
}

/* ---------- Portada ---------- */
.portada {
  padding: 5rem 0 0;
}

.portada .marca {
  font-family: var(--util);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 1.75rem;
}

.portada h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.25rem, 16vw, 5.5rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 0;
  text-transform: lowercase;
}

.portada .premisa {
  font-size: 1.0625rem;
  color: var(--tinta-suave);
  max-width: 30rem;
  margin: 1.75rem 0 0;
}

/* ---------- Índice de capítulos: registro administrativo ---------- */
.registro {
  margin: 3.5rem 0 0;
  border-top: 1px solid var(--linea);
}

.entrada {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  color: inherit;
}

.entrada:hover .titulo,
.entrada:focus-visible .titulo {
  color: var(--azul);
}

.entrada .num {
  font-family: var(--util);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--papel);
  background: var(--tinta);
  padding: 0.2rem 0.45rem;
  flex: none;
}

.entrada .titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
  transition: color 0.15s ease;
}

.entrada .fecha {
  font-family: var(--util);
  font-size: 0.6875rem;
  color: var(--tinta-suave);
  flex: none;
  letter-spacing: 0.04em;
}

.pendiente {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-suave);
}

.pendiente .num {
  font-family: var(--util);
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--linea);
  flex: none;
}

.pendiente .titulo {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.125rem;
}

/* ---------- Página de capítulo ---------- */
.cabecera {
  padding: 4rem 0 0;
}

.cabecera .num {
  font-family: var(--util);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 0.75rem;
}

.cabecera h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}

.texto p {
  margin: 0 0 1.4em;
  hanging-punctuation: first;
}

/* Capitular: la primera letra del capítulo */
.texto > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 700;
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--azul);
}

.texto img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2.5rem 0;
}

.texto figcaption {
  font-family: var(--util);
  font-size: 0.75rem;
  color: var(--tinta-suave);
  margin-top: 0.5rem;
}

/* ---------- Navegación entre capítulos ---------- */
.pasos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-family: var(--util);
  font-size: 0.8125rem;
}

.pasos a {
  color: var(--azul);
  text-decoration: none;
}

.pasos a:hover { text-decoration: underline; }

/* ---------- Genéricos ---------- */
a { color: var(--azul); }

a:focus-visible,
.entrada:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
}

footer, .nav-footer {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  font-family: var(--util);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linea);
}

@media (max-width: 30rem) {
  .entrada .fecha { display: none; }
  .portada { padding-top: 3.5rem; }
}

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

/* La premisa del mundo va primero y con más peso; la de Luna la sigue,
   más chica, porque es la puerta de entrada y no el argumento. */
.portada .premisa.segunda {
  font-size: 0.9375rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--azul);
}

/* El título del libro completa el del capítulo: "Ser más" + "que una corredora" */
.cabecera .raiz {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--tinta-suave);
  margin: 0 0 0.15rem;
  text-transform: lowercase;
}