/* inicio.css — «El cielo de Términa» */

.inicio-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding-bottom: var(--e6);
}

.inicio-reloj { text-align: center; }

.inicio-etiqueta {
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  color: #9aa2c0;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inicio-juntos {
  margin: var(--e3) 0 0;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--oro-claro);
}

.inicio-tatl { font-size: var(--t-sm); }

.inicio-hada { border-color: var(--hada); }

.inicio-progreso {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.inicio-progreso-num {
  font-family: var(--fuente-numero);
  font-size: var(--t-xl);
  color: var(--oro-claro);
  line-height: 1;
}
.inicio-progreso-de {
  font-size: var(--t-sm);
  color: #9aa2c0;
}

.inicio-lista { display: flex; flex-direction: column; gap: var(--e2); }

.inicio-item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.25);
  font-size: var(--t-sm);
}
.inicio-item[data-hecha='true'] {
  background: rgba(40,66,40,.4);
  color: #a8c9a0;
}

.inicio-mas {
  margin: var(--e2) 0 0;
  text-align: center;
  font-size: var(--t-xs);
  color: #8b93b5;
}

/* ── Primeros pasos ─────────────────────────────────────────────────────── */

.inicio-pasos { border-color: var(--oro-claro); }

.inicio-pasos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.inicio-paso {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .25);
  font-size: var(--t-sm);
  transition: border-color var(--rapido), background var(--rapido), scale var(--rapido);
}

.inicio-paso[data-hecho='false'] {
  border-color: rgba(217, 180, 74, .3);
  cursor: pointer;
}
.inicio-paso[data-hecho='false']:hover {
  border-color: var(--oro);
  background: rgba(217, 180, 74, .12);
}
.inicio-paso[data-hecho='false']:active { scale: .985; }

.inicio-paso[data-hecho='true'] {
  opacity: .5;
  color: #a8c9a0;
  text-decoration: line-through;
  text-decoration-color: rgba(168, 201, 160, .45);
}

.inicio-paso-marca {
  flex: 0 0 auto;
  width: 1.25rem;
  text-align: center;
  color: var(--oro-claro);
}
.inicio-paso[data-hecho='true'] .inicio-paso-marca { color: var(--exito); }

.inicio-paso-flecha {
  flex: 0 0 auto;
  color: var(--oro);
  font-size: 1.2rem;
  line-height: 1;
}